Improve banner drafts and event settings assistant

apps/web/src/components/event-workspace.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import type { ReactNode } from "react";
+import { useState, type ReactNode } from "react";
 import { ImageIcon, Settings2Icon, UsersIcon, StickyNoteIcon, ActivityIcon } from "lucide-react";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 
@@ -18,13 +18,14 @@ export function EventWorkspace({
   tabs: EventWorkspaceTab[];
 }) {
   const initial = tabs[0]?.id ?? "photos";
+  const [settingsVisited, setSettingsVisited] = useState(initial === "settings");
   const icons = { photos: ImageIcon, settings: Settings2Icon, people: UsersIcon, notes: StickyNoteIcon, activity: ActivityIcon, audit: ActivityIcon };
 
   return (
     <div className="reveal flex flex-col gap-6 sm:gap-8">
       {heading}
       {tabs.length === 0 ? null : (
-        <Tabs defaultValue={initial} className="gap-5">
+        <Tabs defaultValue={initial} onValueChange={(value) => { if (value === "settings") setSettingsVisited(true); }} className="gap-5">
           <TabsList variant="line" aria-label="Event sections" className="w-full max-w-full justify-start gap-2 overflow-x-auto p-0 shadow-[inset_0_-1px_0_var(--border)] group-data-horizontal/tabs:h-12">
             {tabs.map((tab) => {
               const Icon = icons[tab.id as keyof typeof icons];
@@ -40,7 +41,7 @@ export function EventWorkspace({
             ); })}
           </TabsList>
           {tabs.map((tab) => (
-            <TabsContent key={tab.id} value={tab.id} className="flex flex-col gap-4">
+            <TabsContent key={tab.id} value={tab.id} forceMount={tab.id === "settings" && settingsVisited ? true : undefined} className="flex flex-col gap-4 data-[state=inactive]:hidden">
               {tab.content}
             </TabsContent>
           ))}