Refine workspaces and event publishing; harden uploads and email delivery

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

@@ -1,6 +1,7 @@
 "use client";
 
 import type { ReactNode } from "react";
+import { ImageIcon, Settings2Icon, UsersIcon, StickyNoteIcon, ActivityIcon } from "lucide-react";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 
 export type EventWorkspaceTab = {
@@ -17,22 +18,26 @@ export function EventWorkspace({
   tabs: EventWorkspaceTab[];
 }) {
   const initial = tabs[0]?.id ?? "photos";
+  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">
-          <TabsList className="sticky top-[calc(3.5rem+env(safe-area-inset-top))] z-30 h-11 w-full max-w-full justify-start overflow-x-auto bg-muted/90 backdrop-blur-md sm:top-[calc(4rem+env(safe-area-inset-top))] sm:h-10">
-            {tabs.map((tab) => (
+          <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];
+              return (
               <TabsTrigger
                 key={tab.id}
                 value={tab.id}
-                className="tap-target flex-none px-3"
+                className="h-full flex-none gap-2 rounded-none border-0 px-4 py-3 transition-colors data-[state=active]:text-primary after:bg-primary group-data-horizontal/tabs:after:bottom-0"
               >
+                {Icon ? <Icon aria-hidden="true" /> : null}
                 {tab.label}
               </TabsTrigger>
-            ))}
+            ); })}
           </TabsList>
           {tabs.map((tab) => (
             <TabsContent key={tab.id} value={tab.id} className="flex flex-col gap-4">