admin/ClaudeMarketing
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add "How This Works" guide to Asset Library

Browse Source 
Explains review/approve, repurpose, variations, Postiz publishing,
filtering/sorting, and asset lineage in a help dialog.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Trey t
2026-03-23 22:48:57 -05:00
parent 2ab8af64d4
commit cee43980dc
1 changed files with 80 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/(dashboard)/assets/page.tsx
+79
View File
@@ -1,15 +1,31 @@
"use client";
import { useState } from "react";
import { HelpCircle } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
Dialog,
DialogContent,
DialogDescription,
DialogHeader,
DialogTitle,
} from "@/components/ui/dialog";
import { AssetGallery } from "@/components/asset-gallery";
import { PostizPushModal } from "@/components/postiz-push-modal";
export default function GlobalAssetsPage() {
const [pushModalIds, setPushModalIds] = useState<string[] | null>(null);
const [helpOpen, setHelpOpen] = useState(false);
return (
<div className="space-y-6">
<div className="flex items-center justify-between">
<h1 className="text-3xl font-bold">Asset Library</h1>
<Button variant="outline" size="sm" onClick={() => setHelpOpen(true)}>
<HelpCircle className="mr-2 h-4 w-4" />
How This Works
</Button>
</div>
<AssetGallery onPushToPostiz={(ids) => setPushModalIds(ids)} />
{pushModalIds && (
<PostizPushModal
@@ -17,6 +33,69 @@ export default function GlobalAssetsPage() {
onClose={() => setPushModalIds(null)}
/>
)}
<Dialog open={helpOpen} onOpenChange={setHelpOpen}>
<DialogContent className="max-w-lg">
<DialogHeader>
<DialogTitle>Asset Library Guide</DialogTitle>
<DialogDescription>
Everything you can do with your generated assets.
</DialogDescription>
</DialogHeader>
<div className="space-y-4 text-sm">
<section>
<h3 className="font-semibold mb-1">Review &amp; Approve</h3>
<p className="text-muted-foreground">
Every asset starts as a draft. Use <strong>Approve</strong> or <strong>Reject</strong> to
triage. Select multiple assets with checkboxes for bulk actions.
</p>
</section>
<section>
<h3 className="font-semibold mb-1">Repurpose</h3>
<p className="text-muted-foreground">
Take any image and instantly resize it for other platforms — Instagram Feed, Stories,
TikTok, Nextdoor. Sharp handles the crop locally (no AI cost). If the platform changes,
the caption is automatically re-toned to match the new platform&apos;s voice.
</p>
</section>
<section>
<h3 className="font-semibold mb-1">Spawn Variations</h3>
<p className="text-muted-foreground">
Pick a winning image and generate N new ads that keep the same visual style and CTA
but explore different hook angles. The AI uses the original as a reference image for
visual consistency. Great for A/B testing — find what resonates, then make more of it.
</p>
</section>
<section>
<h3 className="font-semibold mb-1">Push to Postiz</h3>
<p className="text-muted-foreground">
Select approved assets and schedule them for publishing via Postiz. Pick a date/time
and they&apos;ll be queued to the right platform channel automatically.
</p>
</section>
<section>
<h3 className="font-semibold mb-1">Filter &amp; Sort</h3>
<p className="text-muted-foreground">
Use the dropdowns to filter by platform, type (image/video/copy), or status.
Sort by newest, oldest, name, platform, or type. Use the search box to find
assets by filename or metadata.
</p>
</section>
<section>
<h3 className="font-semibold mb-1">Asset Lineage</h3>
<p className="text-muted-foreground">
Repurposed and variation assets show &quot;Derived from: original_file.png&quot; so you
can always trace back to the source. This builds a family tree of your best-performing content.
</p>
</section>
</div>
</DialogContent>
</Dialog>
</div>
);
}