+
+
+
+ {activeDoc.title}
+
+ {hasDraftPending ? (
+
+ Draft Pending
+
+ ) : (
+
+ Published
+
+ )}
+
+
+ {activeDoc.description}
+
+
+
+ Updated: {new Date(activeDoc.updated_at).toLocaleString()}
+
+ •
+ By: {activeDoc.updated_by}
+ •
+ Revisions: {activeDoc.revisions?.length ?? 0}
+
+
+
+ {/* View/Edit Mode Toggles */}
+
+ setEditMode('structured')}
+ className={`px-3 py-1.5 rounded-lg font-semibold transition-colors ${
+ editMode === 'structured'
+ ? 'bg-surface-container-high text-primary-container shadow-sm'
+ : 'text-outline hover:text-on-surface'
+ }`}
+ >
+ Structured
+
+ setEditMode('json')}
+ className={`px-3 py-1.5 rounded-lg font-semibold transition-colors ${
+ editMode === 'json'
+ ? 'bg-surface-container-high text-primary-container shadow-sm'
+ : 'text-outline hover:text-on-surface'
+ }`}
+ >
+ Raw JSON
+
+
+
+
+ setIsPreviewOpen(true)}
+ className="flex items-center gap-2 px-3.5 py-2 rounded-xl border border-outline-variant/40 bg-surface-container hover:bg-surface-container-high text-on-surface text-xs sm:text-sm font-semibold transition-colors"
+ >
+
+ visibility
+
+ Preview Changes
+
+
+ setIsHistoryOpen(true)}
+ className="flex items-center gap-2 px-3.5 py-2 rounded-xl border border-outline-variant/40 bg-surface-container hover:bg-surface-container-high text-on-surface text-xs sm:text-sm font-medium transition-colors"
+ >
+
+ history
+
+ Revision History
+
+
+
+
+ void handleSaveOrPublish('draft')}
+ disabled={isSubmitting || Boolean(jsonError)}
+ className="flex items-center gap-2 px-4 py-2 rounded-xl border border-amber-500/40 bg-amber-500/10 hover:bg-amber-500/20 text-amber-300 text-xs sm:text-sm font-semibold transition-colors disabled:opacity-50"
+ >
+ save
+ {isSubmitting ? 'Saving...' : 'Save Draft'}
+
+
+ void handleSaveOrPublish('publish')}
+ disabled={isSubmitting || Boolean(jsonError)}
+ className="flex items-center gap-2 px-4 py-2 rounded-xl bg-primary-container hover:brightness-110 text-on-primary-container text-xs sm:text-sm font-bold transition-all shadow-[0_0_12px_rgba(0,242,254,0.25)] disabled:opacity-50"
+ >
+ cloud_upload
+ {isSubmitting ? 'Publishing...' : 'Publish Live'}
+
+
+
+
+ {/* Editor Mode: Structured Form vs Raw JSON */}
+ {editMode === 'json' ? (
+
+ {/* Homepage Hero Structured Form */}
+ {selectedSlug === 'homepage_hero' && (
+
+
+
+ Headline
+
+
+ updateContent((prev) => ({ ...prev, headline: e.target.value }))
+ }
+ className="w-full px-3 py-2 rounded-lg bg-surface-container-low border border-outline-variant/30 text-on-surface text-xs focus:outline-none focus:border-primary-container"
+ />
+
+
+
+
+ Subheadline
+
+
+
+
+
+ )}
+
+ {/* Features Structured Form */}
+ {selectedSlug === 'features' && (
+
+
+
+ Features List ({Array.isArray(workingContent.items) ? workingContent.items.length : 0})
+
+
+ updateContent((prev) => ({
+ ...prev,
+ items: [
+ ...(Array.isArray(prev.items) ? prev.items : []),
+ { title: 'New Feature', description: 'Feature description', icon: 'speed' },
+ ],
+ }))
+ }
+ className="flex items-center gap-1 text-xs font-medium text-primary-container hover:underline"
+ >
+ add
+ Add Feature Item
+
+
+
+ {Array.isArray(workingContent.items) &&
+ workingContent.items.map((item: any, idx: number) => (
+
+
+
+ Item #{idx + 1}
+
+
+ updateContent((prev) => ({
+ ...prev,
+ items: prev.items.filter((_: any, i: number) => i !== idx),
+ }))
+ }
+ className="text-outline hover:text-error text-xs flex items-center gap-0.5"
+ >
+ delete
+ Remove
+
+
+
+
+
+
+
+ Description
+
+
+
+ ))}
+
+ )}
+
+ {/* Screenshots Structured Form */}
+ {selectedSlug === 'screenshots' && (
+
+
+
+ Gallery Screenshots ({Array.isArray(workingContent.items) ? workingContent.items.length : 0})
+
+
+ updateContent((prev) => ({
+ ...prev,
+ items: [
+ ...(Array.isArray(prev.items) ? prev.items : []),
+ { title: 'New Screenshot', caption: 'Visual caption', image_url: '/screenshots/sample.png' },
+ ],
+ }))
+ }
+ className="flex items-center gap-1 text-xs font-medium text-primary-container hover:underline"
+ >
+ add
+ Add Screenshot
+
+
+
+ {Array.isArray(workingContent.items) &&
+ workingContent.items.map((item: any, idx: number) => (
+
+
+
+ Screenshot #{idx + 1}
+
+
+ updateContent((prev) => ({
+ ...prev,
+ items: prev.items.filter((_: any, i: number) => i !== idx),
+ }))
+ }
+ className="text-outline hover:text-error text-xs flex items-center gap-0.5"
+ >
+ delete
+ Remove
+
+
+
+
+
+
+
+ Caption
+
+
+ updateContent((prev) => {
+ const nextItems = [...prev.items];
+ nextItems[idx] = { ...nextItems[idx], caption: e.target.value };
+ return { ...prev, items: nextItems };
+ })
+ }
+ className="w-full px-2.5 py-1.5 rounded bg-surface-container border border-outline-variant/30 text-on-surface text-xs focus:outline-none focus:border-primary-container"
+ />
+
+
+ ))}
+
+ )}
+
+ {/* FAQs Structured Form */}
+ {selectedSlug === 'faqs' && (
+
+
+
+ FAQ Items ({Array.isArray(workingContent.items) ? workingContent.items.length : 0})
+
+
+ updateContent((prev) => ({
+ ...prev,
+ items: [
+ ...(Array.isArray(prev.items) ? prev.items : []),
+ { question: 'Question topic?', answer: 'Detailed guidance answer.' },
+ ],
+ }))
+ }
+ className="flex items-center gap-1 text-xs font-medium text-primary-container hover:underline"
+ >
+ add
+ Add FAQ
+
+
+
+ {Array.isArray(workingContent.items) &&
+ workingContent.items.map((item: any, idx: number) => (
+
+
+
+ FAQ #{idx + 1}
+
+
+ updateContent((prev) => ({
+ ...prev,
+ items: prev.items.filter((_: any, i: number) => i !== idx),
+ }))
+ }
+ className="text-outline hover:text-error text-xs flex items-center gap-0.5"
+ >
+ delete
+ Remove
+
+
+
+
+
+ Question
+
+
+ updateContent((prev) => {
+ const nextItems = [...prev.items];
+ nextItems[idx] = { ...nextItems[idx], question: e.target.value };
+ return { ...prev, items: nextItems };
+ })
+ }
+ className="w-full px-2.5 py-1.5 rounded bg-surface-container border border-outline-variant/30 text-on-surface text-xs focus:outline-none focus:border-primary-container"
+ />
+
+
+
+
+ Answer
+
+
+
+ ))}
+
+ )}
+
+ {/* Download Links Structured Form */}
+ {selectedSlug === 'download_links' && (
+
+ )}
+
+ {/* Changelog Structured Form */}
+ {selectedSlug === 'changelog' && (
+
+
+
+ Releases List ({Array.isArray(workingContent.releases) ? workingContent.releases.length : 0})
+
+
+ updateContent((prev) => ({
+ ...prev,
+ releases: [
+ {
+ version: 'v1.0.5',
+ release_date: new Date().toISOString().split('T')[0],
+ title: 'New Release',
+ notes: 'Description of changes',
+ },
+ ...(Array.isArray(prev.releases) ? prev.releases : []),
+ ],
+ }))
+ }
+ className="flex items-center gap-1 text-xs font-medium text-primary-container hover:underline"
+ >
+ add
+ Add Release
+
+
+
+ {Array.isArray(workingContent.releases) &&
+ workingContent.releases.map((rel: any, idx: number) => (
+
+
+
+ {rel.version || `Release #${idx + 1}`}
+
+
+ updateContent((prev) => ({
+ ...prev,
+ releases: prev.releases.filter((_: any, i: number) => i !== idx),
+ }))
+ }
+ className="text-outline hover:text-error text-xs flex items-center gap-0.5"
+ >
+ delete
+ Remove
+
+
+
+
+
+
+
+ Release Notes / Changelog Details
+
+
+
+ ))}
+
+ )}
+
+ {/* Policy Pages Structured Form */}
+ {selectedSlug === 'policy_pages' && (
+
+
+
+ Privacy Policy Body
+
+
+
+
+
+ Terms of Service Body
+
+
+
+ )}
+