feat : remove random padding in admin footer and add public button to every section of admin

app/admin/[character]/[page]/page.tsx

@@ -8,6 +8,7 @@ import { GuideSectionEditor } from "@/components/admin/guide-section-editor";
 import { GuideSectionNav } from "@/components/admin/guide-section-nav";
 import { AdminHeader } from "@/components/admin/admin-header";
 import { EditorPresence } from "@/components/admin/editor-presence";
+import { GuideVisibilityControl } from "@/components/admin/guide-visibility-control";
 import { Button } from "@/components/ui/button";
 import { getAdminSession } from "@/lib/auth/server";
 import { getCachedCatalogOptions } from "@/lib/cache/catalog";
@@ -64,7 +65,7 @@ export default async function StructuredEditorPage({
       <AdminHeader />
       <main className="mx-auto flex w-full max-w-7xl flex-col gap-6 px-4 pb-4 sm:px-6 sm:pb-6 lg:px-8 lg:pb-8">
         <div className="flex flex-col">
-          <header className="flex items-center gap-4">
+          <header className="flex flex-wrap items-center gap-4">
             <Button
               variant="ghost"
               size="icon"
@@ -77,14 +78,20 @@ export default async function StructuredEditorPage({
             <div className="relative size-16 shrink-0 overflow-hidden rounded-lg border">
               <Image src={guide.coverUrl} alt={guide.name} fill sizes="64px" className="object-cover" />
             </div>
-            <div className="min-w-0">
+            <div className="min-w-0 flex-1">
               <p className="text-sm text-muted-foreground">{guide.name}</p>
               <h1 className="whitespace-nowrap font-heading text-3xl font-semibold">
                 {sectionTitle}
               </h1>
               <EditorPresence guideId={guide.id} section={sectionTitle} />
             </div>
-            <Button className="ml-auto" variant="outline" render={<Link href={`/admin/${guide.characterKey}/preview/${page}`} target="_blank" />} nativeButton={false}>
+            <GuideVisibilityControl
+              guideId={guide.id}
+              guideName={guide.name}
+              isPublic={guide.isPublic}
+              version={guide.version}
+            />
+            <Button variant="outline" render={<Link href={`/admin/${guide.characterKey}/preview/${page}`} target="_blank" />} nativeButton={false}>
               Preview
             </Button>
           </header>

app/admin/[character]/comment/page.tsx

@@ -6,6 +6,7 @@ import { connection } from "next/server";
 
 import { AdminHeader } from "@/components/admin/admin-header";
 import { GuideSectionNav } from "@/components/admin/guide-section-nav";
+import { GuideVisibilityControl } from "@/components/admin/guide-visibility-control";
 import { CommentBoardContent } from "@/components/comments/comment-board-content";
 import { CommentBoardSkeleton } from "@/components/comments/comment-skeleton";
 import { Button } from "@/components/ui/button";
@@ -34,17 +35,23 @@ export default async function GuideCommentPage({
       <AdminHeader />
       <main lang="th" className="mx-auto flex w-full max-w-7xl flex-col gap-6 px-4 pb-4 sm:px-6 sm:pb-6 lg:px-8 lg:pb-8">
         <div className="flex flex-col">
-          <header className="flex items-center gap-4">
+          <header className="flex flex-wrap items-center gap-4">
             <Button variant="ghost" size="icon" render={<Link href="/admin" />} nativeButton={false} aria-label="กลับหน้าภาพรวม">
               <ArrowLeftIcon />
             </Button>
             <div className="relative size-16 shrink-0 overflow-hidden rounded-lg border">
               <Image src={guide.coverUrl} alt={guide.name} fill sizes="64px" className="object-cover" />
             </div>
-            <div className="min-w-0">
+            <div className="min-w-0 flex-1">
               <p className="text-sm text-muted-foreground">{guide.name}</p>
               <h1 className="font-heading text-3xl font-semibold">ความคิดเห็น</h1>
             </div>
+            <GuideVisibilityControl
+              guideId={guide.id}
+              guideName={guide.name}
+              isPublic={guide.isPublic}
+              version={guide.version}
+            />
           </header>
           <GuideSectionNav guideId={guide.id} characterKey={guide.characterKey} current="comment" extras={extras} />
         </div>

components/admin/editors/artifact-editor.tsx

@@ -612,7 +612,7 @@ export function ArtifactEditor({
                             >
                               {dragHandle}
                               <div className="flex min-w-0 flex-1 flex-col gap-3">
-                                <div className="grid gap-3 lg:grid-cols-[1fr_1fr_4rem_auto]">
+                                <div className="grid gap-3 lg:grid-cols-[1fr_1fr_8rem_auto]">
                                   <ArtifactSelect
                                     items={artifacts}
                                     value={row.firstArtifactKey}

components/admin/save-status.tsx

@@ -145,7 +145,6 @@ export function SaveStatus({
 }: SaveFeedbackProps & { canSave: boolean; onSave: () => void }) {
   return (
     <>
-      <div className="h-28" aria-hidden="true" />
       <FloatingSavePanel>
         <div role="status" aria-live="polite" className="min-h-0 max-w-full shrink touch-pan-y overflow-y-auto">
           <SaveFeedback {...props} />

lib/guides/queries.ts

@@ -348,6 +348,7 @@ export async function getGuideEditorHeader(characterKey: string) {
       slug: guides.slug,
       name: guides.name,
       version: guides.version,
+      isPublic: guides.isPublic,
       coverObjectKey: media.objectKey,
     })
     .from(guides)