Initialize repo and add session changes (2025-09-08)

resources/js/admin/api.ts

@@ -0,0 +1,94 @@
+export async function login(email: string, password: string): Promise<{ token: string }> {
+  const res = await fetch('/api/v1/tenant/login', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ email, password }),
+  });
+  if (!res.ok) throw new Error('Login failed');
+  return res.json();
+}
+
+export async function getEvents(): Promise<any[]> {
+  const token = localStorage.getItem('ta_token') || '';
+  const res = await fetch('/api/v1/tenant/events', {
+    headers: { Authorization: `Bearer ${token}` },
+  });
+  if (!res.ok) throw new Error('Failed to load events');
+  const json = await res.json();
+  return json.data ?? [];
+}
+
+export async function createEvent(payload: { name: string; slug: string; date?: string; is_active?: boolean }): Promise<number> {
+  const token = localStorage.getItem('ta_token') || '';
+  const res = await fetch('/api/v1/tenant/events', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${token}` },
+    body: JSON.stringify(payload),
+  });
+  if (!res.ok) throw new Error('Failed to create event');
+  const json = await res.json();
+  return json.id;
+}
+
+export async function updateEvent(id: number, payload: Partial<{ name: string; slug: string; date?: string; is_active?: boolean }>): Promise<void> {
+  const token = localStorage.getItem('ta_token') || '';
+  const res = await fetch(`/api/v1/tenant/events/${id}`, {
+    method: 'PUT',
+    headers: { 'Content-Type': 'application/json', Authorization: `Bearer ${token}` },
+    body: JSON.stringify(payload),
+  });
+  if (!res.ok) throw new Error('Failed to update event');
+}
+
+export async function getEventPhotos(id: number): Promise<any[]> {
+  const token = localStorage.getItem('ta_token') || '';
+  const res = await fetch(`/api/v1/tenant/events/${id}/photos`, { headers: { Authorization: `Bearer ${token}` } });
+  if (!res.ok) throw new Error('Failed to load photos');
+  const json = await res.json();
+  return json.data ?? [];
+}
+
+export async function featurePhoto(id: number) {
+  const token = localStorage.getItem('ta_token') || '';
+  await fetch(`/api/v1/tenant/photos/${id}/feature`, { method: 'POST', headers: { Authorization: `Bearer ${token}` } });
+}
+
+export async function unfeaturePhoto(id: number) {
+  const token = localStorage.getItem('ta_token') || '';
+  await fetch(`/api/v1/tenant/photos/${id}/unfeature`, { method: 'POST', headers: { Authorization: `Bearer ${token}` } });
+}
+
+export async function getEvent(id: number): Promise<any> {
+  const token = localStorage.getItem('ta_token') || '';
+  const res = await fetch(`/api/v1/tenant/events/${id}`, { headers: { Authorization: `Bearer ${token}` } });
+  if (!res.ok) throw new Error('Failed to load event');
+  return res.json();
+}
+
+export async function toggleEvent(id: number): Promise<boolean> {
+  const token = localStorage.getItem('ta_token') || '';
+  const res = await fetch(`/api/v1/tenant/events/${id}/toggle`, { method: 'POST', headers: { Authorization: `Bearer ${token}` } });
+  if (!res.ok) throw new Error('Failed to toggle');
+  const json = await res.json();
+  return !!json.is_active;
+}
+
+export async function getEventStats(id: number): Promise<{ total: number; featured: number; likes: number }> {
+  const token = localStorage.getItem('ta_token') || '';
+  const res = await fetch(`/api/v1/tenant/events/${id}/stats`, { headers: { Authorization: `Bearer ${token}` } });
+  if (!res.ok) throw new Error('Failed to load stats');
+  return res.json();
+}
+
+export async function createInviteLink(id: number): Promise<string> {
+  const token = localStorage.getItem('ta_token') || '';
+  const res = await fetch(`/api/v1/tenant/events/${id}/invites`, { method: 'POST', headers: { Authorization: `Bearer ${token}` } });
+  if (!res.ok) throw new Error('Failed to create invite');
+  const json = await res.json();
+  return json.link as string;
+}
+
+export async function deletePhoto(id: number) {
+  const token = localStorage.getItem('ta_token') || '';
+  await fetch(`/api/v1/tenant/photos/${id}`, { method: 'DELETE', headers: { Authorization: `Bearer ${token}` } });
+}

resources/js/admin/main.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import { RouterProvider } from 'react-router-dom';
+import { router } from './router';
+import '../../css/app.css';
+import { initializeTheme } from '@/hooks/use-appearance';
+
+initializeTheme();
+const rootEl = document.getElementById('root')!;
+createRoot(rootEl).render(
+  <React.StrictMode>
+    <RouterProvider router={router} />
+  </React.StrictMode>
+);
+

resources/js/admin/pages/EventDetailPage.tsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import { useNavigate, useSearchParams } from 'react-router-dom';
+import { getEvent, getEventStats, toggleEvent, createInviteLink } from '../api';
+import { Button } from '@/components/ui/button';
+
+export default function EventDetailPage() {
+  const [sp] = useSearchParams();
+  const id = Number(sp.get('id'));
+  const nav = useNavigate();
+  const [ev, setEv] = React.useState<any | null>(null);
+  const [stats, setStats] = React.useState<{ total: number; featured: number; likes: number } | null>(null);
+  const [invite, setInvite] = React.useState<string | null>(null);
+
+  async function load() {
+    const e = await getEvent(id);
+    setEv(e);
+    setStats(await getEventStats(id));
+  }
+  React.useEffect(() => { load(); }, [id]);
+
+  async function onToggle() {
+    const isActive = await toggleEvent(id);
+    setEv((o: any) => ({ ...(o || {}), is_active: isActive }));
+  }
+
+  async function onInvite() {
+    const link = await createInviteLink(id);
+    setInvite(link);
+    try { await navigator.clipboard.writeText(link); } catch {}
+  }
+
+  if (!ev) return <div className="p-4">Lade…</div>;
+  const joinLink = `${location.origin}/e/${ev.slug}`;
+  const qrUrl = `/admin/qr?data=${encodeURIComponent(joinLink)}`;
+
+  return (
+    <div className="mx-auto max-w-3xl p-4 space-y-4">
+      <div className="flex items-center justify-between">
+        <h1 className="text-lg font-semibold">Event: {renderName(ev.name)}</h1>
+        <div className="flex gap-2">
+          <Button variant="secondary" onClick={onToggle}>{ev.is_active ? 'Deaktivieren' : 'Aktivieren'}</Button>
+          <Button variant="secondary" onClick={() => nav(`/admin/events/photos?id=${id}`)}>Fotos moderieren</Button>
+        </div>
+      </div>
+      <div className="rounded border p-3 text-sm">
+        <div>Slug: {ev.slug}</div>
+        <div>Datum: {ev.date ?? '-'}</div>
+        <div>Status: {ev.is_active ? 'Aktiv' : 'Inaktiv'}</div>
+      </div>
+      <div className="grid grid-cols-3 gap-3 text-center text-sm">
+        <div className="rounded border p-3"><div className="text-2xl font-semibold">{stats?.total ?? 0}</div><div>Fotos</div></div>
+        <div className="rounded border p-3"><div className="text-2xl font-semibold">{stats?.featured ?? 0}</div><div>Featured</div></div>
+        <div className="rounded border p-3"><div className="text-2xl font-semibold">{stats?.likes ?? 0}</div><div>Likes gesamt</div></div>
+      </div>
+      <div className="rounded border p-3">
+        <div className="mb-2 text-sm font-medium">Join-Link</div>
+        <div className="mb-2 flex items-center gap-2">
+          <input className="w-full rounded border p-2 text-sm" value={joinLink} readOnly />
+          <Button variant="secondary" onClick={() => navigator.clipboard.writeText(joinLink)}>Kopieren</Button>
+        </div>
+        <div className="mb-2 text-sm font-medium">QR</div>
+        <img src={qrUrl} alt="QR" width={200} height={200} className="rounded border" />
+        <div className="mt-3">
+          <Button variant="secondary" onClick={onInvite}>Einladungslink erzeugen</Button>
+          {invite && <div className="mt-2 text-xs text-muted-foreground">Erzeugt und kopiert: {invite}</div>}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function renderName(name: any): string {
+  if (typeof name === 'string') return name;
+  if (name && (name.de || name.en)) return name.de || name.en;
+  return JSON.stringify(name);
+}
+

resources/js/admin/pages/EventFormPage.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+import { createEvent, updateEvent } from '../api';
+import { useNavigate, useSearchParams } from 'react-router-dom';
+
+export default function EventFormPage() {
+  const [sp] = useSearchParams();
+  const id = sp.get('id');
+  const nav = useNavigate();
+  const [name, setName] = React.useState('');
+  const [slug, setSlug] = React.useState('');
+  const [date, setDate] = React.useState('');
+  const [active, setActive] = React.useState(true);
+  const [saving, setSaving] = React.useState(false);
+  const isEdit = !!id;
+
+  async function save() {
+    setSaving(true);
+    try {
+      if (isEdit) {
+        await updateEvent(Number(id), { name, slug, date, is_active: active });
+      } else {
+        await createEvent({ name, slug, date, is_active: active });
+      }
+      nav('/admin/events');
+    } finally { setSaving(false); }
+  }
+
+  return (
+    <div className="mx-auto max-w-md p-4 space-y-3">
+      <h1 className="text-lg font-semibold">{isEdit ? 'Event bearbeiten' : 'Neues Event'}</h1>
+      <Input placeholder="Name" value={name} onChange={(e) => setName(e.target.value)} />
+      <Input placeholder="Slug" value={slug} onChange={(e) => setSlug(e.target.value)} />
+      <Input placeholder="Datum" type="date" value={date} onChange={(e) => setDate(e.target.value)} />
+      <label className="flex items-center gap-2 text-sm"><input type="checkbox" checked={active} onChange={(e) => setActive(e.target.checked)} /> Aktiv</label>
+      <div className="flex gap-2">
+        <Button onClick={save} disabled={saving || !name || !slug}>{saving ? 'Speichern…' : 'Speichern'}</Button>
+        <Button variant="secondary" onClick={() => nav(-1)}>Abbrechen</Button>
+      </div>
+    </div>
+  );
+}
+

resources/js/admin/pages/EventPhotosPage.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+import { useSearchParams } from 'react-router-dom';
+import { deletePhoto, featurePhoto, getEventPhotos, unfeaturePhoto } from '../api';
+import { Button } from '@/components/ui/button';
+
+export default function EventPhotosPage() {
+  const [sp] = useSearchParams();
+  const id = Number(sp.get('id'));
+  const [rows, setRows] = React.useState<any[]>([]);
+  const [loading, setLoading] = React.useState(true);
+
+  async function load() {
+    setLoading(true);
+    try { setRows(await getEventPhotos(id)); } finally { setLoading(false); }
+  }
+  React.useEffect(() => { load(); }, [id]);
+
+  async function onFeature(p: any) { await featurePhoto(p.id); load(); }
+  async function onUnfeature(p: any) { await unfeaturePhoto(p.id); load(); }
+  async function onDelete(p: any) { await deletePhoto(p.id); load(); }
+
+  return (
+    <div className="mx-auto max-w-5xl p-4">
+      <h1 className="mb-3 text-lg font-semibold">Fotos moderieren</h1>
+      {loading && <div>Lade…</div>}
+      <div className="grid grid-cols-2 gap-3 sm:grid-cols-3 md:grid-cols-4">
+        {rows.map((p) => (
+          <div key={p.id} className="rounded border p-2">
+            <img src={p.thumbnail_path || p.file_path} className="mb-2 aspect-square w-full rounded object-cover" />
+            <div className="flex items-center justify-between text-sm">
+              <span>❤ {p.likes_count}</span>
+              <div className="flex gap-1">
+                {p.is_featured ? (
+                  <Button size="sm" variant="secondary" onClick={() => onUnfeature(p)}>Unfeature</Button>
+                ) : (
+                  <Button size="sm" variant="secondary" onClick={() => onFeature(p)}>Feature</Button>
+                )}
+                <Button size="sm" variant="destructive" onClick={() => onDelete(p)}>Löschen</Button>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+

resources/js/admin/pages/EventsPage.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { getEvents } from '../api';
+import { Button } from '@/components/ui/button';
+import { Link, useNavigate } from 'react-router-dom';
+
+export default function EventsPage() {
+  const [rows, setRows] = React.useState<any[]>([]);
+  const [loading, setLoading] = React.useState(true);
+  const [error, setError] = React.useState<string | null>(null);
+  const nav = useNavigate();
+
+  React.useEffect(() => {
+    (async () => {
+      try { setRows(await getEvents()); } catch (e) { setError('Laden fehlgeschlagen'); } finally { setLoading(false); }
+    })();
+  }, []);
+
+  return (
+    <div className="mx-auto max-w-3xl p-4">
+      <div className="mb-3 flex items-center justify-between">
+        <h1 className="text-lg font-semibold">Meine Events</h1>
+        <div className="flex gap-2">
+          <Button variant="secondary" onClick={() => nav('/admin/events/new')}>Neues Event</Button>
+          <Link to="/admin/settings"><Button variant="secondary">Einstellungen</Button></Link>
+        </div>
+      </div>
+      {loading && <div>Lade…</div>}
+      {error && <div className="rounded border border-red-300 bg-red-50 p-2 text-sm text-red-700">{error}</div>}
+      <div className="divide-y rounded border">
+        {rows.map((e) => (
+          <div key={e.id} className="flex items-center justify-between p-3">
+            <div className="text-sm">
+              <div className="font-medium">{renderName(e.name)}</div>
+              <div className="text-muted-foreground">Slug: {e.slug} · Datum: {e.date ?? '-'}</div>
+            </div>
+            <div className="flex items-center gap-2">
+              <Link to={`/admin/events/view?id=${e.id}`} className="text-sm underline">details</Link>
+              <Link to={`/admin/events/edit?id=${e.id}`} className="text-sm underline">bearbeiten</Link>
+              <Link to={`/admin/events/photos?id=${e.id}`} className="text-sm underline">fotos</Link>
+              <a className="text-sm underline" href={`/e/${e.slug}`} target="_blank">öffnen</a>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+function renderName(name: any): string {
+  if (typeof name === 'string') return name;
+  if (name && (name.de || name.en)) return name.de || name.en;
+  return JSON.stringify(name);
+}

resources/js/admin/pages/LoginPage.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { login } from '../api';
+import { useNavigate } from 'react-router-dom';
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+import AppearanceToggleDropdown from '@/components/appearance-dropdown';
+
+export default function LoginPage() {
+  const nav = useNavigate();
+  const [email, setEmail] = React.useState('');
+  const [password, setPassword] = React.useState('');
+  const [error, setError] = React.useState<string | null>(null);
+  const [loading, setLoading] = React.useState(false);
+
+  async function submit(e: React.FormEvent) {
+    e.preventDefault();
+    setError(null);
+    setLoading(true);
+    try {
+      const { token } = await login(email, password);
+      localStorage.setItem('ta_token', token);
+      nav('/admin', { replace: true });
+    } catch (err: any) {
+      setError('Login fehlgeschlagen');
+    } finally { setLoading(false); }
+  }
+
+  return (
+    <div className="mx-auto max-w-sm p-6">
+      <div className="mb-4 flex items-center justify-between">
+        <h1 className="text-lg font-semibold">Tenant Admin</h1>
+        <AppearanceToggleDropdown />
+      </div>
+      <form onSubmit={submit} className="space-y-3">
+        {error && <div className="rounded border border-red-300 bg-red-50 p-2 text-sm text-red-700">{error}</div>}
+        <Input placeholder="E-Mail" type="email" value={email} onChange={(e) => setEmail(e.target.value)} />
+        <Input placeholder="Passwort" type="password" value={password} onChange={(e) => setPassword(e.target.value)} />
+        <Button type="submit" disabled={loading || !email || !password} className="w-full">{loading ? 'Bitte warten…' : 'Anmelden'}</Button>
+      </form>
+    </div>
+  );
+}
+

resources/js/admin/pages/SettingsPage.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import AppearanceToggleDropdown from '@/components/appearance-dropdown';
+import { Button } from '@/components/ui/button';
+import { useNavigate } from 'react-router-dom';
+
+export default function SettingsPage() {
+  const nav = useNavigate();
+  function logout() {
+    localStorage.removeItem('ta_token');
+    nav('/admin/login', { replace: true });
+  }
+  return (
+    <div className="mx-auto max-w-sm p-6">
+      <h1 className="mb-4 text-lg font-semibold">Einstellungen</h1>
+      <div className="mb-4">
+        <div className="text-sm font-medium">Darstellung</div>
+        <AppearanceToggleDropdown />
+      </div>
+      <Button variant="destructive" onClick={logout}>Abmelden</Button>
+    </div>
+  );
+}
+

resources/js/admin/router.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { createBrowserRouter, Outlet, Navigate } from 'react-router-dom';
+import LoginPage from './pages/LoginPage';
+import EventsPage from './pages/EventsPage';
+import SettingsPage from './pages/SettingsPage';
+import EventFormPage from './pages/EventFormPage';
+import EventPhotosPage from './pages/EventPhotosPage';
+import EventDetailPage from './pages/EventDetailPage';
+
+function RequireAuth() {
+  const token = localStorage.getItem('ta_token');
+  if (!token) return <Navigate to="/admin/login" replace />;
+  return <Outlet />;
+}
+
+export const router = createBrowserRouter([
+  { path: '/admin/login', element: <LoginPage /> },
+  {
+    path: '/admin',
+    element: <RequireAuth />,
+    children: [
+      { index: true, element: <EventsPage /> },
+      { path: 'events', element: <EventsPage /> },
+      { path: 'events/new', element: <EventFormPage /> },
+      { path: 'events/edit', element: <EventFormPage /> },
+      { path: 'events/view', element: <EventDetailPage /> },
+      { path: 'events/photos', element: <EventPhotosPage /> },
+      { path: 'settings', element: <SettingsPage /> },
+    ],
+  },
+  { path: '*', element: <Navigate to="/admin" replace /> },
+]);

resources/js/app.tsx

@@ -0,0 +1,24 @@
+import '../css/app.css';
+
+import { createInertiaApp } from '@inertiajs/react';
+import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
+import { createRoot } from 'react-dom/client';
+import { initializeTheme } from './hooks/use-appearance';
+
+const appName = import.meta.env.VITE_APP_NAME || 'Laravel';
+
+createInertiaApp({
+    title: (title) => title ? `${title} - ${appName}` : appName,
+    resolve: (name) => resolvePageComponent(`./pages/${name}.tsx`, import.meta.glob('./pages/**/*.tsx')),
+    setup({ el, App, props }) {
+        const root = createRoot(el);
+
+        root.render(<App {...props} />);
+    },
+    progress: {
+        color: '#4B5563',
+    },
+});
+
+// This will set light / dark mode on load...
+initializeTheme();

resources/js/components/app-content.tsx

@@ -0,0 +1,18 @@
+import { SidebarInset } from '@/components/ui/sidebar';
+import * as React from 'react';
+
+interface AppContentProps extends React.ComponentProps<'main'> {
+    variant?: 'header' | 'sidebar';
+}
+
+export function AppContent({ variant = 'header', children, ...props }: AppContentProps) {
+    if (variant === 'sidebar') {
+        return <SidebarInset {...props}>{children}</SidebarInset>;
+    }
+
+    return (
+        <main className="mx-auto flex h-full w-full max-w-7xl flex-1 flex-col gap-4 rounded-xl" {...props}>
+            {children}
+        </main>
+    );
+}

resources/js/components/app-header.tsx

@@ -0,0 +1,183 @@
+import { Breadcrumbs } from '@/components/breadcrumbs';
+import { Icon } from '@/components/icon';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { Button } from '@/components/ui/button';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
+import { NavigationMenu, NavigationMenuItem, NavigationMenuList, navigationMenuTriggerStyle } from '@/components/ui/navigation-menu';
+import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from '@/components/ui/sheet';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
+import { UserMenuContent } from '@/components/user-menu-content';
+import { useInitials } from '@/hooks/use-initials';
+import { cn } from '@/lib/utils';
+import { dashboard } from '@/routes';
+import { type BreadcrumbItem, type NavItem, type SharedData } from '@/types';
+import { Link, usePage } from '@inertiajs/react';
+import { BookOpen, Folder, LayoutGrid, Menu, Search } from 'lucide-react';
+import AppLogo from './app-logo';
+import AppLogoIcon from './app-logo-icon';
+
+const mainNavItems: NavItem[] = [
+    {
+        title: 'Dashboard',
+        href: dashboard(),
+        icon: LayoutGrid,
+    },
+];
+
+const rightNavItems: NavItem[] = [
+    {
+        title: 'Repository',
+        href: 'https://github.com/laravel/react-starter-kit',
+        icon: Folder,
+    },
+    {
+        title: 'Documentation',
+        href: 'https://laravel.com/docs/starter-kits#react',
+        icon: BookOpen,
+    },
+];
+
+const activeItemStyles = 'text-neutral-900 dark:bg-neutral-800 dark:text-neutral-100';
+
+interface AppHeaderProps {
+    breadcrumbs?: BreadcrumbItem[];
+}
+
+export function AppHeader({ breadcrumbs = [] }: AppHeaderProps) {
+    const page = usePage<SharedData>();
+    const { auth } = page.props;
+    const getInitials = useInitials();
+    return (
+        <>
+            <div className="border-b border-sidebar-border/80">
+                <div className="mx-auto flex h-16 items-center px-4 md:max-w-7xl">
+                    {/* Mobile Menu */}
+                    <div className="lg:hidden">
+                        <Sheet>
+                            <SheetTrigger asChild>
+                                <Button variant="ghost" size="icon" className="mr-2 h-[34px] w-[34px]">
+                                    <Menu className="h-5 w-5" />
+                                </Button>
+                            </SheetTrigger>
+                            <SheetContent side="left" className="flex h-full w-64 flex-col items-stretch justify-between bg-sidebar">
+                                <SheetTitle className="sr-only">Navigation Menu</SheetTitle>
+                                <SheetHeader className="flex justify-start text-left">
+                                    <AppLogoIcon className="h-6 w-6 fill-current text-black dark:text-white" />
+                                </SheetHeader>
+                                <div className="flex h-full flex-1 flex-col space-y-4 p-4">
+                                    <div className="flex h-full flex-col justify-between text-sm">
+                                        <div className="flex flex-col space-y-4">
+                                            {mainNavItems.map((item) => (
+                                                <Link key={item.title} href={item.href} className="flex items-center space-x-2 font-medium">
+                                                    {item.icon && <Icon iconNode={item.icon} className="h-5 w-5" />}
+                                                    <span>{item.title}</span>
+                                                </Link>
+                                            ))}
+                                        </div>
+
+                                        <div className="flex flex-col space-y-4">
+                                            {rightNavItems.map((item) => (
+                                                <a
+                                                    key={item.title}
+                                                    href={typeof item.href === 'string' ? item.href : item.href.url}
+                                                    target="_blank"
+                                                    rel="noopener noreferrer"
+                                                    className="flex items-center space-x-2 font-medium"
+                                                >
+                                                    {item.icon && <Icon iconNode={item.icon} className="h-5 w-5" />}
+                                                    <span>{item.title}</span>
+                                                </a>
+                                            ))}
+                                        </div>
+                                    </div>
+                                </div>
+                            </SheetContent>
+                        </Sheet>
+                    </div>
+
+                    <Link href={dashboard()} prefetch className="flex items-center space-x-2">
+                        <AppLogo />
+                    </Link>
+
+                    {/* Desktop Navigation */}
+                    <div className="ml-6 hidden h-full items-center space-x-6 lg:flex">
+                        <NavigationMenu className="flex h-full items-stretch">
+                            <NavigationMenuList className="flex h-full items-stretch space-x-2">
+                                {mainNavItems.map((item, index) => (
+                                    <NavigationMenuItem key={index} className="relative flex h-full items-center">
+                                        <Link
+                                            href={item.href}
+                                            className={cn(
+                                                navigationMenuTriggerStyle(),
+                                                page.url === (typeof item.href === 'string' ? item.href : item.href.url) && activeItemStyles,
+                                                'h-9 cursor-pointer px-3',
+                                            )}
+                                        >
+                                            {item.icon && <Icon iconNode={item.icon} className="mr-2 h-4 w-4" />}
+                                            {item.title}
+                                        </Link>
+                                        {page.url === item.href && (
+                                            <div className="absolute bottom-0 left-0 h-0.5 w-full translate-y-px bg-black dark:bg-white"></div>
+                                        )}
+                                    </NavigationMenuItem>
+                                ))}
+                            </NavigationMenuList>
+                        </NavigationMenu>
+                    </div>
+
+                    <div className="ml-auto flex items-center space-x-2">
+                        <div className="relative flex items-center space-x-1">
+                            <Button variant="ghost" size="icon" className="group h-9 w-9 cursor-pointer">
+                                <Search className="!size-5 opacity-80 group-hover:opacity-100" />
+                            </Button>
+                            <div className="hidden lg:flex">
+                                {rightNavItems.map((item) => (
+                                    <TooltipProvider key={item.title} delayDuration={0}>
+                                        <Tooltip>
+                                            <TooltipTrigger>
+                                                <a
+                                                    href={typeof item.href === 'string' ? item.href : item.href.url}
+                                                    target="_blank"
+                                                    rel="noopener noreferrer"
+                                                    className="group ml-1 inline-flex h-9 w-9 items-center justify-center rounded-md bg-transparent p-0 text-sm font-medium text-accent-foreground ring-offset-background transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50"
+                                                >
+                                                    <span className="sr-only">{item.title}</span>
+                                                    {item.icon && <Icon iconNode={item.icon} className="size-5 opacity-80 group-hover:opacity-100" />}
+                                                </a>
+                                            </TooltipTrigger>
+                                            <TooltipContent>
+                                                <p>{item.title}</p>
+                                            </TooltipContent>
+                                        </Tooltip>
+                                    </TooltipProvider>
+                                ))}
+                            </div>
+                        </div>
+                        <DropdownMenu>
+                            <DropdownMenuTrigger asChild>
+                                <Button variant="ghost" className="size-10 rounded-full p-1">
+                                    <Avatar className="size-8 overflow-hidden rounded-full">
+                                        <AvatarImage src={auth.user.avatar} alt={auth.user.name} />
+                                        <AvatarFallback className="rounded-lg bg-neutral-200 text-black dark:bg-neutral-700 dark:text-white">
+                                            {getInitials(auth.user.name)}
+                                        </AvatarFallback>
+                                    </Avatar>
+                                </Button>
+                            </DropdownMenuTrigger>
+                            <DropdownMenuContent className="w-56" align="end">
+                                <UserMenuContent user={auth.user} />
+                            </DropdownMenuContent>
+                        </DropdownMenu>
+                    </div>
+                </div>
+            </div>
+            {breadcrumbs.length > 1 && (
+                <div className="flex w-full border-b border-sidebar-border/70">
+                    <div className="mx-auto flex h-12 w-full items-center justify-start px-4 text-neutral-500 md:max-w-7xl">
+                        <Breadcrumbs breadcrumbs={breadcrumbs} />
+                    </div>
+                </div>
+            )}
+        </>
+    );
+}

resources/js/components/app-logo-icon.tsx

@@ -0,0 +1,13 @@
+import { SVGAttributes } from 'react';
+
+export default function AppLogoIcon(props: SVGAttributes<SVGElement>) {
+    return (
+        <svg {...props} viewBox="0 0 40 42" xmlns="http://www.w3.org/2000/svg">
+            <path
+                fillRule="evenodd"
+                clipRule="evenodd"
+                d="M17.2 5.63325L8.6 0.855469L0 5.63325V32.1434L16.2 41.1434L32.4 32.1434V23.699L40 19.4767V9.85547L31.4 5.07769L22.8 9.85547V18.2999L17.2 21.411V5.63325ZM38 18.2999L32.4 21.411V15.2545L38 12.1434V18.2999ZM36.9409 10.4439L31.4 13.5221L25.8591 10.4439L31.4 7.36561L36.9409 10.4439ZM24.8 18.2999V12.1434L30.4 15.2545V21.411L24.8 18.2999ZM23.8 20.0323L29.3409 23.1105L16.2 30.411L10.6591 27.3328L23.8 20.0323ZM7.6 27.9212L15.2 32.1434V38.2999L2 30.9666V7.92116L7.6 11.0323V27.9212ZM8.6 9.29991L3.05913 6.22165L8.6 3.14339L14.1409 6.22165L8.6 9.29991ZM30.4 24.8101L17.2 32.1434V38.2999L30.4 30.9666V24.8101ZM9.6 11.0323L15.2 7.92117V22.5221L9.6 25.6333V11.0323Z"
+            />
+        </svg>
+    );
+}

resources/js/components/app-logo.tsx

@@ -0,0 +1,14 @@
+import AppLogoIcon from './app-logo-icon';
+
+export default function AppLogo() {
+    return (
+        <>
+            <div className="flex aspect-square size-8 items-center justify-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground">
+                <AppLogoIcon className="size-5 fill-current text-white dark:text-black" />
+            </div>
+            <div className="ml-1 grid flex-1 text-left text-sm">
+                <span className="mb-0.5 truncate leading-tight font-semibold">Laravel Starter Kit</span>
+            </div>
+        </>
+    );
+}

resources/js/components/app-shell.tsx

@@ -0,0 +1,18 @@
+import { SidebarProvider } from '@/components/ui/sidebar';
+import { SharedData } from '@/types';
+import { usePage } from '@inertiajs/react';
+
+interface AppShellProps {
+    children: React.ReactNode;
+    variant?: 'header' | 'sidebar';
+}
+
+export function AppShell({ children, variant = 'header' }: AppShellProps) {
+    const isOpen = usePage<SharedData>().props.sidebarOpen;
+
+    if (variant === 'header') {
+        return <div className="flex min-h-screen w-full flex-col">{children}</div>;
+    }
+
+    return <SidebarProvider defaultOpen={isOpen}>{children}</SidebarProvider>;
+}

resources/js/components/app-sidebar-header.tsx

@@ -0,0 +1,14 @@
+import { Breadcrumbs } from '@/components/breadcrumbs';
+import { SidebarTrigger } from '@/components/ui/sidebar';
+import { type BreadcrumbItem as BreadcrumbItemType } from '@/types';
+
+export function AppSidebarHeader({ breadcrumbs = [] }: { breadcrumbs?: BreadcrumbItemType[] }) {
+    return (
+        <header className="flex h-16 shrink-0 items-center gap-2 border-b border-sidebar-border/50 px-6 transition-[width,height] ease-linear group-has-data-[collapsible=icon]/sidebar-wrapper:h-12 md:px-4">
+            <div className="flex items-center gap-2">
+                <SidebarTrigger className="-ml-1" />
+                <Breadcrumbs breadcrumbs={breadcrumbs} />
+            </div>
+        </header>
+    );
+}

resources/js/components/app-sidebar.tsx

@@ -0,0 +1,57 @@
+import { NavFooter } from '@/components/nav-footer';
+import { NavMain } from '@/components/nav-main';
+import { NavUser } from '@/components/nav-user';
+import { Sidebar, SidebarContent, SidebarFooter, SidebarHeader, SidebarMenu, SidebarMenuButton, SidebarMenuItem } from '@/components/ui/sidebar';
+import { dashboard } from '@/routes';
+import { type NavItem } from '@/types';
+import { Link } from '@inertiajs/react';
+import { BookOpen, Folder, LayoutGrid } from 'lucide-react';
+import AppLogo from './app-logo';
+
+const mainNavItems: NavItem[] = [
+    {
+        title: 'Dashboard',
+        href: dashboard(),
+        icon: LayoutGrid,
+    },
+];
+
+const footerNavItems: NavItem[] = [
+    {
+        title: 'Repository',
+        href: 'https://github.com/laravel/react-starter-kit',
+        icon: Folder,
+    },
+    {
+        title: 'Documentation',
+        href: 'https://laravel.com/docs/starter-kits#react',
+        icon: BookOpen,
+    },
+];
+
+export function AppSidebar() {
+    return (
+        <Sidebar collapsible="icon" variant="inset">
+            <SidebarHeader>
+                <SidebarMenu>
+                    <SidebarMenuItem>
+                        <SidebarMenuButton size="lg" asChild>
+                            <Link href={dashboard()} prefetch>
+                                <AppLogo />
+                            </Link>
+                        </SidebarMenuButton>
+                    </SidebarMenuItem>
+                </SidebarMenu>
+            </SidebarHeader>
+
+            <SidebarContent>
+                <NavMain items={mainNavItems} />
+            </SidebarContent>
+
+            <SidebarFooter>
+                <NavFooter items={footerNavItems} className="mt-auto" />
+                <NavUser />
+            </SidebarFooter>
+        </Sidebar>
+    );
+}

resources/js/components/appearance-dropdown.tsx

@@ -0,0 +1,53 @@
+import { Button } from '@/components/ui/button';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
+import { useAppearance } from '@/hooks/use-appearance';
+import { Monitor, Moon, Sun } from 'lucide-react';
+import { HTMLAttributes } from 'react';
+
+export default function AppearanceToggleDropdown({ className = '', ...props }: HTMLAttributes<HTMLDivElement>) {
+    const { appearance, updateAppearance } = useAppearance();
+
+    const getCurrentIcon = () => {
+        switch (appearance) {
+            case 'dark':
+                return <Moon className="h-5 w-5" />;
+            case 'light':
+                return <Sun className="h-5 w-5" />;
+            default:
+                return <Monitor className="h-5 w-5" />;
+        }
+    };
+
+    return (
+        <div className={className} {...props}>
+            <DropdownMenu>
+                <DropdownMenuTrigger asChild>
+                    <Button variant="ghost" size="icon" className="h-9 w-9 rounded-md">
+                        {getCurrentIcon()}
+                        <span className="sr-only">Toggle theme</span>
+                    </Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent align="end">
+                    <DropdownMenuItem onClick={() => updateAppearance('light')}>
+                        <span className="flex items-center gap-2">
+                            <Sun className="h-5 w-5" />
+                            Light
+                        </span>
+                    </DropdownMenuItem>
+                    <DropdownMenuItem onClick={() => updateAppearance('dark')}>
+                        <span className="flex items-center gap-2">
+                            <Moon className="h-5 w-5" />
+                            Dark
+                        </span>
+                    </DropdownMenuItem>
+                    <DropdownMenuItem onClick={() => updateAppearance('system')}>
+                        <span className="flex items-center gap-2">
+                            <Monitor className="h-5 w-5" />
+                            System
+                        </span>
+                    </DropdownMenuItem>
+                </DropdownMenuContent>
+            </DropdownMenu>
+        </div>
+    );
+}

resources/js/components/appearance-tabs.tsx

@@ -0,0 +1,34 @@
+import { Appearance, useAppearance } from '@/hooks/use-appearance';
+import { cn } from '@/lib/utils';
+import { LucideIcon, Monitor, Moon, Sun } from 'lucide-react';
+import { HTMLAttributes } from 'react';
+
+export default function AppearanceToggleTab({ className = '', ...props }: HTMLAttributes<HTMLDivElement>) {
+    const { appearance, updateAppearance } = useAppearance();
+
+    const tabs: { value: Appearance; icon: LucideIcon; label: string }[] = [
+        { value: 'light', icon: Sun, label: 'Light' },
+        { value: 'dark', icon: Moon, label: 'Dark' },
+        { value: 'system', icon: Monitor, label: 'System' },
+    ];
+
+    return (
+        <div className={cn('inline-flex gap-1 rounded-lg bg-neutral-100 p-1 dark:bg-neutral-800', className)} {...props}>
+            {tabs.map(({ value, icon: Icon, label }) => (
+                <button
+                    key={value}
+                    onClick={() => updateAppearance(value)}
+                    className={cn(
+                        'flex items-center rounded-md px-3.5 py-1.5 transition-colors',
+                        appearance === value
+                            ? 'bg-white shadow-xs dark:bg-neutral-700 dark:text-neutral-100'
+                            : 'text-neutral-500 hover:bg-neutral-200/60 hover:text-black dark:text-neutral-400 dark:hover:bg-neutral-700/60',
+                    )}
+                >
+                    <Icon className="-ml-1 h-4 w-4" />
+                    <span className="ml-1.5 text-sm">{label}</span>
+                </button>
+            ))}
+        </div>
+    );
+}

resources/js/components/breadcrumbs.tsx

@@ -0,0 +1,34 @@
+import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from '@/components/ui/breadcrumb';
+import { type BreadcrumbItem as BreadcrumbItemType } from '@/types';
+import { Link } from '@inertiajs/react';
+import { Fragment } from 'react';
+
+export function Breadcrumbs({ breadcrumbs }: { breadcrumbs: BreadcrumbItemType[] }) {
+    return (
+        <>
+            {breadcrumbs.length > 0 && (
+                <Breadcrumb>
+                    <BreadcrumbList>
+                        {breadcrumbs.map((item, index) => {
+                            const isLast = index === breadcrumbs.length - 1;
+                            return (
+                                <Fragment key={index}>
+                                    <BreadcrumbItem>
+                                        {isLast ? (
+                                            <BreadcrumbPage>{item.title}</BreadcrumbPage>
+                                        ) : (
+                                            <BreadcrumbLink asChild>
+                                                <Link href={item.href}>{item.title}</Link>
+                                            </BreadcrumbLink>
+                                        )}
+                                    </BreadcrumbItem>
+                                    {!isLast && <BreadcrumbSeparator />}
+                                </Fragment>
+                            );
+                        })}
+                    </BreadcrumbList>
+                </Breadcrumb>
+            )}
+        </>
+    );
+}

resources/js/components/delete-user.tsx

@@ -0,0 +1,81 @@
+import ProfileController from '@/actions/App/Http/Controllers/Settings/ProfileController';
+import HeadingSmall from '@/components/heading-small';
+import InputError from '@/components/input-error';
+import { Button } from '@/components/ui/button';
+import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogTitle, DialogTrigger } from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { Form } from '@inertiajs/react';
+import { useRef } from 'react';
+
+export default function DeleteUser() {
+    const passwordInput = useRef<HTMLInputElement>(null);
+
+    return (
+        <div className="space-y-6">
+            <HeadingSmall title="Delete account" description="Delete your account and all of its resources" />
+            <div className="space-y-4 rounded-lg border border-red-100 bg-red-50 p-4 dark:border-red-200/10 dark:bg-red-700/10">
+                <div className="relative space-y-0.5 text-red-600 dark:text-red-100">
+                    <p className="font-medium">Warning</p>
+                    <p className="text-sm">Please proceed with caution, this cannot be undone.</p>
+                </div>
+
+                <Dialog>
+                    <DialogTrigger asChild>
+                        <Button variant="destructive">Delete account</Button>
+                    </DialogTrigger>
+                    <DialogContent>
+                        <DialogTitle>Are you sure you want to delete your account?</DialogTitle>
+                        <DialogDescription>
+                            Once your account is deleted, all of its resources and data will also be permanently deleted. Please enter your password
+                            to confirm you would like to permanently delete your account.
+                        </DialogDescription>
+
+                        <Form
+                            {...ProfileController.destroy.form()}
+                            options={{
+                                preserveScroll: true,
+                            }}
+                            onError={() => passwordInput.current?.focus()}
+                            resetOnSuccess
+                            className="space-y-6"
+                        >
+                            {({ resetAndClearErrors, processing, errors }) => (
+                                <>
+                                    <div className="grid gap-2">
+                                        <Label htmlFor="password" className="sr-only">
+                                            Password
+                                        </Label>
+
+                                        <Input
+                                            id="password"
+                                            type="password"
+                                            name="password"
+                                            ref={passwordInput}
+                                            placeholder="Password"
+                                            autoComplete="current-password"
+                                        />
+
+                                        <InputError message={errors.password} />
+                                    </div>
+
+                                    <DialogFooter className="gap-2">
+                                        <DialogClose asChild>
+                                            <Button variant="secondary" onClick={() => resetAndClearErrors()}>
+                                                Cancel
+                                            </Button>
+                                        </DialogClose>
+
+                                        <Button variant="destructive" disabled={processing} asChild>
+                                            <button type="submit">Delete account</button>
+                                        </Button>
+                                    </DialogFooter>
+                                </>
+                            )}
+                        </Form>
+                    </DialogContent>
+                </Dialog>
+            </div>
+        </div>
+    );
+}

resources/js/components/heading-small.tsx

@@ -0,0 +1,8 @@
+export default function HeadingSmall({ title, description }: { title: string; description?: string }) {
+    return (
+        <header>
+            <h3 className="mb-0.5 text-base font-medium">{title}</h3>
+            {description && <p className="text-sm text-muted-foreground">{description}</p>}
+        </header>
+    );
+}

resources/js/components/heading.tsx

@@ -0,0 +1,8 @@
+export default function Heading({ title, description }: { title: string; description?: string }) {
+    return (
+        <div className="mb-8 space-y-0.5">
+            <h2 className="text-xl font-semibold tracking-tight">{title}</h2>
+            {description && <p className="text-sm text-muted-foreground">{description}</p>}
+        </div>
+    );
+}

resources/js/components/icon.tsx

@@ -0,0 +1,11 @@
+import { cn } from '@/lib/utils';
+import { type LucideProps } from 'lucide-react';
+import { type ComponentType } from 'react';
+
+interface IconProps extends Omit<LucideProps, 'ref'> {
+    iconNode: ComponentType<LucideProps>;
+}
+
+export function Icon({ iconNode: IconComponent, className, ...props }: IconProps) {
+    return <IconComponent className={cn('h-4 w-4', className)} {...props} />;
+}

resources/js/components/input-error.tsx

@@ -0,0 +1,10 @@
+import { cn } from '@/lib/utils';
+import { type HTMLAttributes } from 'react';
+
+export default function InputError({ message, className = '', ...props }: HTMLAttributes<HTMLParagraphElement> & { message?: string }) {
+    return message ? (
+        <p {...props} className={cn('text-sm text-red-600 dark:text-red-400', className)}>
+            {message}
+        </p>
+    ) : null;
+}

resources/js/components/nav-footer.tsx

@@ -0,0 +1,34 @@
+import { Icon } from '@/components/icon';
+import { SidebarGroup, SidebarGroupContent, SidebarMenu, SidebarMenuButton, SidebarMenuItem } from '@/components/ui/sidebar';
+import { type NavItem } from '@/types';
+import { type ComponentPropsWithoutRef } from 'react';
+
+export function NavFooter({
+    items,
+    className,
+    ...props
+}: ComponentPropsWithoutRef<typeof SidebarGroup> & {
+    items: NavItem[];
+}) {
+    return (
+        <SidebarGroup {...props} className={`group-data-[collapsible=icon]:p-0 ${className || ''}`}>
+            <SidebarGroupContent>
+                <SidebarMenu>
+                    {items.map((item) => (
+                        <SidebarMenuItem key={item.title}>
+                            <SidebarMenuButton
+                                asChild
+                                className="text-neutral-600 hover:text-neutral-800 dark:text-neutral-300 dark:hover:text-neutral-100"
+                            >
+                                <a href={typeof item.href === 'string' ? item.href : item.href.url} target="_blank" rel="noopener noreferrer">
+                                    {item.icon && <Icon iconNode={item.icon} className="h-5 w-5" />}
+                                    <span>{item.title}</span>
+                                </a>
+                            </SidebarMenuButton>
+                        </SidebarMenuItem>
+                    ))}
+                </SidebarMenu>
+            </SidebarGroupContent>
+        </SidebarGroup>
+    );
+}

resources/js/components/nav-main.tsx

@@ -0,0 +1,28 @@
+import { SidebarGroup, SidebarGroupLabel, SidebarMenu, SidebarMenuButton, SidebarMenuItem } from '@/components/ui/sidebar';
+import { type NavItem } from '@/types';
+import { Link, usePage } from '@inertiajs/react';
+
+export function NavMain({ items = [] }: { items: NavItem[] }) {
+    const page = usePage();
+    return (
+        <SidebarGroup className="px-2 py-0">
+            <SidebarGroupLabel>Platform</SidebarGroupLabel>
+            <SidebarMenu>
+                {items.map((item) => (
+                    <SidebarMenuItem key={item.title}>
+                        <SidebarMenuButton
+                            asChild
+                            isActive={page.url.startsWith(typeof item.href === 'string' ? item.href : item.href.url)}
+                            tooltip={{ children: item.title }}
+                        >
+                            <Link href={item.href} prefetch>
+                                {item.icon && <item.icon />}
+                                <span>{item.title}</span>
+                            </Link>
+                        </SidebarMenuButton>
+                    </SidebarMenuItem>
+                ))}
+            </SidebarMenu>
+        </SidebarGroup>
+    );
+}

resources/js/components/nav-user.tsx

@@ -0,0 +1,36 @@
+import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
+import { SidebarMenu, SidebarMenuButton, SidebarMenuItem, useSidebar } from '@/components/ui/sidebar';
+import { UserInfo } from '@/components/user-info';
+import { UserMenuContent } from '@/components/user-menu-content';
+import { useIsMobile } from '@/hooks/use-mobile';
+import { type SharedData } from '@/types';
+import { usePage } from '@inertiajs/react';
+import { ChevronsUpDown } from 'lucide-react';
+
+export function NavUser() {
+    const { auth } = usePage<SharedData>().props;
+    const { state } = useSidebar();
+    const isMobile = useIsMobile();
+
+    return (
+        <SidebarMenu>
+            <SidebarMenuItem>
+                <DropdownMenu>
+                    <DropdownMenuTrigger asChild>
+                        <SidebarMenuButton size="lg" className="group text-sidebar-accent-foreground data-[state=open]:bg-sidebar-accent">
+                            <UserInfo user={auth.user} />
+                            <ChevronsUpDown className="ml-auto size-4" />
+                        </SidebarMenuButton>
+                    </DropdownMenuTrigger>
+                    <DropdownMenuContent
+                        className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
+                        align="end"
+                        side={isMobile ? 'bottom' : state === 'collapsed' ? 'left' : 'bottom'}
+                    >
+                        <UserMenuContent user={auth.user} />
+                    </DropdownMenuContent>
+                </DropdownMenu>
+            </SidebarMenuItem>
+        </SidebarMenu>
+    );
+}

resources/js/components/text-link.tsx

@@ -0,0 +1,19 @@
+import { cn } from '@/lib/utils';
+import { Link } from '@inertiajs/react';
+import { ComponentProps } from 'react';
+
+type LinkProps = ComponentProps<typeof Link>;
+
+export default function TextLink({ className = '', children, ...props }: LinkProps) {
+    return (
+        <Link
+            className={cn(
+                'text-foreground underline decoration-neutral-300 underline-offset-4 transition-colors duration-300 ease-out hover:decoration-current! dark:decoration-neutral-500',
+                className,
+            )}
+            {...props}
+        >
+            {children}
+        </Link>
+    );
+}

resources/js/components/ui/alert.tsx

@@ -0,0 +1,66 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+  {
+    variants: {
+      variant: {
+        default: "bg-background text-foreground",
+        destructive:
+          "text-destructive-foreground [&>svg]:text-current *:data-[slot=alert-description]:text-destructive-foreground/80",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Alert({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn(
+        "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDescription({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Alert, AlertTitle, AlertDescription }

resources/js/components/ui/avatar.tsx

@@ -0,0 +1,51 @@
+import * as React from "react"
+import * as AvatarPrimitive from "@radix-ui/react-avatar"
+
+import { cn } from "@/lib/utils"
+
+function Avatar({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Root>) {
+  return (
+    <AvatarPrimitive.Root
+      data-slot="avatar"
+      className={cn(
+        "relative flex size-8 shrink-0 overflow-hidden rounded-full",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AvatarImage({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
+  return (
+    <AvatarPrimitive.Image
+      data-slot="avatar-image"
+      className={cn("aspect-square size-full", className)}
+      {...props}
+    />
+  )
+}
+
+function AvatarFallback({
+  className,
+  ...props
+}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
+  return (
+    <AvatarPrimitive.Fallback
+      data-slot="avatar-fallback"
+      className={cn(
+        "bg-muted flex size-full items-center justify-center rounded-full",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Avatar, AvatarImage, AvatarFallback }

resources/js/components/ui/badge.tsx

@@ -0,0 +1,46 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-auto",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+        destructive:
+          "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40",
+        outline:
+          "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Badge({
+  className,
+  variant,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"span"> &
+  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "span"
+
+  return (
+    <Comp
+      data-slot="badge"
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+export { Badge, badgeVariants }

resources/js/components/ui/breadcrumb.tsx

@@ -0,0 +1,109 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { ChevronRight, MoreHorizontal } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Breadcrumb({ ...props }: React.ComponentProps<"nav">) {
+  return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />
+}
+
+function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
+  return (
+    <ol
+      data-slot="breadcrumb-list"
+      className={cn(
+        "text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="breadcrumb-item"
+      className={cn("inline-flex items-center gap-1.5", className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbLink({
+  asChild,
+  className,
+  ...props
+}: React.ComponentProps<"a"> & {
+  asChild?: boolean
+}) {
+  const Comp = asChild ? Slot : "a"
+
+  return (
+    <Comp
+      data-slot="breadcrumb-link"
+      className={cn("hover:text-foreground transition-colors", className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="breadcrumb-page"
+      role="link"
+      aria-disabled="true"
+      aria-current="page"
+      className={cn("text-foreground font-normal", className)}
+      {...props}
+    />
+  )
+}
+
+function BreadcrumbSeparator({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="breadcrumb-separator"
+      role="presentation"
+      aria-hidden="true"
+      className={cn("[&>svg]:size-3.5", className)}
+      {...props}
+    >
+      {children ?? <ChevronRight />}
+    </li>
+  )
+}
+
+function BreadcrumbEllipsis({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="breadcrumb-ellipsis"
+      role="presentation"
+      aria-hidden="true"
+      className={cn("flex size-9 items-center justify-center", className)}
+      {...props}
+    >
+      <MoreHorizontal className="size-4" />
+      <span className="sr-only">More</span>
+    </span>
+  )
+}
+
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+}

resources/js/components/ui/button.tsx

@@ -0,0 +1,58 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-[color,box-shadow] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40",
+        outline:
+          "border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground",
+        secondary:
+          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        icon: "size-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant,
+  size,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot : "button"
+
+  return (
+    <Comp
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }

resources/js/components/ui/card.tsx

@@ -0,0 +1,68 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Card({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-header"
+      className={cn("flex flex-col gap-1.5 px-6", className)}
+      {...props}
+    />
+  )
+}
+
+function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-title"
+      className={cn("leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-content"
+      className={cn("px-6", className)}
+      {...props}
+    />
+  )
+}
+
+function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn("flex items-center px-6", className)}
+      {...props}
+    />
+  )
+}
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }

resources/js/components/ui/checkbox.tsx

@@ -0,0 +1,30 @@
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { CheckIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Checkbox({
+  className,
+  ...props
+}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {
+  return (
+    <CheckboxPrimitive.Root
+      data-slot="checkbox"
+      className={cn(
+        "peer border-input data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator
+        data-slot="checkbox-indicator"
+        className="flex items-center justify-center text-current transition-none"
+      >
+        <CheckIcon className="size-3.5" />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  )
+}
+
+export { Checkbox }

resources/js/components/ui/collapsible.tsx

@@ -0,0 +1,31 @@
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
+
+function Collapsible({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
+  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />
+}
+
+function CollapsibleTrigger({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
+  return (
+    <CollapsiblePrimitive.CollapsibleTrigger
+      data-slot="collapsible-trigger"
+      {...props}
+    />
+  )
+}
+
+function CollapsibleContent({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
+  return (
+    <CollapsiblePrimitive.CollapsibleContent
+      data-slot="collapsible-content"
+      {...props}
+    />
+  )
+}
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent }

resources/js/components/ui/dialog.tsx

@@ -0,0 +1,133 @@
+import * as React from "react"
+import * as DialogPrimitive from "@radix-ui/react-dialog"
+import { XIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Dialog({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+}
+
+function DialogTrigger({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+}
+
+function DialogPortal({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+}
+
+function DialogClose({
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+  return (
+    <DialogPrimitive.Overlay
+      data-slot="dialog-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogContent({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Content>) {
+  return (
+    <DialogPortal data-slot="dialog-portal">
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        data-slot="dialog-content"
+        className={cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4">
+          <XIcon />
+          <span className="sr-only">Close</span>
+        </DialogPrimitive.Close>
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  )
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-header"
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn("text-lg leading-none font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+}

resources/js/components/ui/dropdown-menu.tsx

@@ -0,0 +1,255 @@
+import * as React from "react"
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
+import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function DropdownMenu({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
+  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
+}
+
+function DropdownMenuPortal({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
+  return (
+    <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
+  )
+}
+
+function DropdownMenuTrigger({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
+  return (
+    <DropdownMenuPrimitive.Trigger
+      data-slot="dropdown-menu-trigger"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuContent({
+  className,
+  sideOffset = 4,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
+  return (
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.Content
+        data-slot="dropdown-menu-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-md",
+          className
+        )}
+        {...props}
+      />
+    </DropdownMenuPrimitive.Portal>
+  )
+}
+
+function DropdownMenuGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
+  return (
+    <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
+  )
+}
+
+function DropdownMenuItem({
+  className,
+  inset,
+  variant = "default",
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
+  inset?: boolean
+  variant?: "default" | "destructive"
+}) {
+  return (
+    <DropdownMenuPrimitive.Item
+      data-slot="dropdown-menu-item"
+      data-inset={inset}
+      data-variant={variant}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive-foreground data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/40 data-[variant=destructive]:focus:text-destructive-foreground data-[variant=destructive]:*:[svg]:!text-destructive-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuCheckboxItem({
+  className,
+  children,
+  checked,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
+  return (
+    <DropdownMenuPrimitive.CheckboxItem
+      data-slot="dropdown-menu-checkbox-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      checked={checked}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.CheckboxItem>
+  )
+}
+
+function DropdownMenuRadioGroup({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
+  return (
+    <DropdownMenuPrimitive.RadioGroup
+      data-slot="dropdown-menu-radio-group"
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuRadioItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
+  return (
+    <DropdownMenuPrimitive.RadioItem
+      data-slot="dropdown-menu-radio-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CircleIcon className="size-2 fill-current" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.RadioItem>
+  )
+}
+
+function DropdownMenuLabel({
+  className,
+  inset,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.Label
+      data-slot="dropdown-menu-label"
+      data-inset={inset}
+      className={cn(
+        "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
+  return (
+    <DropdownMenuPrimitive.Separator
+      data-slot="dropdown-menu-separator"
+      className={cn("bg-border -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="dropdown-menu-shortcut"
+      className={cn(
+        "text-muted-foreground ml-auto text-xs tracking-widest",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function DropdownMenuSub({
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
+  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
+}
+
+function DropdownMenuSubTrigger({
+  className,
+  inset,
+  children,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
+  inset?: boolean
+}) {
+  return (
+    <DropdownMenuPrimitive.SubTrigger
+      data-slot="dropdown-menu-sub-trigger"
+      data-inset={inset}
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto size-4" />
+    </DropdownMenuPrimitive.SubTrigger>
+  )
+}
+
+function DropdownMenuSubContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
+  return (
+    <DropdownMenuPrimitive.SubContent
+      data-slot="dropdown-menu-sub-content"
+      className={cn(
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] overflow-hidden rounded-md border p-1 shadow-lg",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  DropdownMenu,
+  DropdownMenuPortal,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+}

resources/js/components/ui/icon.tsx

@@ -0,0 +1,14 @@
+import { LucideIcon } from 'lucide-react';
+
+interface IconProps {
+    iconNode?: LucideIcon | null;
+    className?: string;
+}
+
+export function Icon({ iconNode: IconComponent, className }: IconProps) {
+    if (!IconComponent) {
+        return null;
+    }
+
+    return <IconComponent className={className} />;
+}

resources/js/components/ui/input.tsx

@@ -0,0 +1,21 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        "border-input file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Input }

resources/js/components/ui/label.tsx

@@ -0,0 +1,22 @@
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+
+import { cn } from "@/lib/utils"
+
+function Label({
+  className,
+  ...props
+}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  return (
+    <LabelPrimitive.Root
+      data-slot="label"
+      className={cn(
+        "text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Label }

resources/js/components/ui/navigation-menu.tsx

@@ -0,0 +1,168 @@
+import * as React from "react"
+import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"
+import { cva } from "class-variance-authority"
+import { ChevronDownIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function NavigationMenu({
+  className,
+  children,
+  viewport = true,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {
+  viewport?: boolean
+}) {
+  return (
+    <NavigationMenuPrimitive.Root
+      data-slot="navigation-menu"
+      data-viewport={viewport}
+      className={cn(
+        "group/navigation-menu relative flex max-w-max flex-1 items-center justify-center",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      {viewport && <NavigationMenuViewport />}
+    </NavigationMenuPrimitive.Root>
+  )
+}
+
+function NavigationMenuList({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.List>) {
+  return (
+    <NavigationMenuPrimitive.List
+      data-slot="navigation-menu-list"
+      className={cn(
+        "group flex flex-1 list-none items-center justify-center gap-1",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function NavigationMenuItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Item>) {
+  return (
+    <NavigationMenuPrimitive.Item
+      data-slot="navigation-menu-item"
+      className={cn("relative", className)}
+      {...props}
+    />
+  )
+}
+
+const navigationMenuTriggerStyle = cva(
+  "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[active=true]:bg-accent/50 data-[state=open]:bg-accent/50 data-[active=true]:text-accent-foreground ring-ring/10 dark:ring-ring/20 dark:outline-ring/40 outline-ring/50 transition-[color,box-shadow] focus-visible:ring-4 focus-visible:outline-1"
+)
+
+function NavigationMenuTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>) {
+  return (
+    <NavigationMenuPrimitive.Trigger
+      data-slot="navigation-menu-trigger"
+      className={cn(navigationMenuTriggerStyle(), "group", className)}
+      {...props}
+    >
+      {children}{" "}
+      <ChevronDownIcon
+        className="relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180"
+        aria-hidden="true"
+      />
+    </NavigationMenuPrimitive.Trigger>
+  )
+}
+
+function NavigationMenuContent({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Content>) {
+  return (
+    <NavigationMenuPrimitive.Content
+      data-slot="navigation-menu-content"
+      className={cn(
+        "data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 top-0 left-0 w-full p-2 pr-2.5 md:absolute md:w-auto",
+        "group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function NavigationMenuViewport({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Viewport>) {
+  return (
+    <div
+      className={cn(
+        "absolute top-full left-0 isolate z-50 flex justify-center"
+      )}
+    >
+      <NavigationMenuPrimitive.Viewport
+        data-slot="navigation-menu-viewport"
+        className={cn(
+          "origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow md:w-[var(--radix-navigation-menu-viewport-width)]",
+          className
+        )}
+        {...props}
+      />
+    </div>
+  )
+}
+
+function NavigationMenuLink({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Link>) {
+  return (
+    <NavigationMenuPrimitive.Link
+      data-slot="navigation-menu-link"
+      className={cn(
+        "hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground ring-ring/10 dark:ring-ring/20 dark:outline-ring/40 outline-ring/50 [&_svg:not([class*='text-'])]:text-muted-foreground flex flex-col gap-1 rounded-sm p-2 text-sm transition-[color,box-shadow] focus-visible:ring-4 focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function NavigationMenuIndicator({
+  className,
+  ...props
+}: React.ComponentProps<typeof NavigationMenuPrimitive.Indicator>) {
+  return (
+    <NavigationMenuPrimitive.Indicator
+      data-slot="navigation-menu-indicator"
+      className={cn(
+        "data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden",
+        className
+      )}
+      {...props}
+    >
+      <div className="bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md" />
+    </NavigationMenuPrimitive.Indicator>
+  )
+}
+
+export {
+  NavigationMenu,
+  NavigationMenuList,
+  NavigationMenuItem,
+  NavigationMenuContent,
+  NavigationMenuTrigger,
+  NavigationMenuLink,
+  NavigationMenuIndicator,
+  NavigationMenuViewport,
+  navigationMenuTriggerStyle,
+}

resources/js/components/ui/placeholder-pattern.tsx

@@ -0,0 +1,20 @@
+import { useId } from 'react';
+
+interface PlaceholderPatternProps {
+    className?: string;
+}
+
+export function PlaceholderPattern({ className }: PlaceholderPatternProps) {
+    const patternId = useId();
+
+    return (
+        <svg className={className} fill="none">
+            <defs>
+                <pattern id={patternId} x="0" y="0" width="10" height="10" patternUnits="userSpaceOnUse">
+                    <path d="M-3 13 15-5M-5 5l18-18M-1 21 17 3"></path>
+                </pattern>
+            </defs>
+            <rect stroke="none" fill={`url(#${patternId})`} width="100%" height="100%"></rect>
+        </svg>
+    );
+}

resources/js/components/ui/select.tsx

@@ -0,0 +1,179 @@
+import * as React from "react"
+import * as SelectPrimitive from "@radix-ui/react-select"
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Select({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Root>) {
+  return <SelectPrimitive.Root data-slot="select" {...props} />
+}
+
+function SelectGroup({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Group>) {
+  return <SelectPrimitive.Group data-slot="select-group" {...props} />
+}
+
+function SelectValue({
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Value>) {
+  return <SelectPrimitive.Value data-slot="select-value" {...props} />
+}
+
+function SelectTrigger({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Trigger>) {
+  return (
+    <SelectPrimitive.Trigger
+      data-slot="select-trigger"
+      className={cn(
+        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive flex h-9 w-full items-center justify-between rounded-md border bg-transparent px-3 py-2 text-sm shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&>span]:line-clamp-1",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <SelectPrimitive.Icon asChild>
+        <ChevronDownIcon className="size-4 opacity-50" />
+      </SelectPrimitive.Icon>
+    </SelectPrimitive.Trigger>
+  )
+}
+
+function SelectContent({
+  className,
+  children,
+  position = "popper",
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Content>) {
+  return (
+    <SelectPrimitive.Portal>
+      <SelectPrimitive.Content
+        data-slot="select-content"
+        className={cn(
+          "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border shadow-md",
+          position === "popper" &&
+            "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+          className
+        )}
+        position={position}
+        {...props}
+      >
+        <SelectScrollUpButton />
+        <SelectPrimitive.Viewport
+          className={cn(
+            "p-1",
+            position === "popper" &&
+              "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
+          )}
+        >
+          {children}
+        </SelectPrimitive.Viewport>
+        <SelectScrollDownButton />
+      </SelectPrimitive.Content>
+    </SelectPrimitive.Portal>
+  )
+}
+
+function SelectLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Label>) {
+  return (
+    <SelectPrimitive.Label
+      data-slot="select-label"
+      className={cn("px-2 py-1.5 text-sm font-medium", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectItem({
+  className,
+  children,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Item>) {
+  return (
+    <SelectPrimitive.Item
+      data-slot="select-item"
+      className={cn(
+        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        className
+      )}
+      {...props}
+    >
+      <span className="absolute right-2 flex size-3.5 items-center justify-center">
+        <SelectPrimitive.ItemIndicator>
+          <CheckIcon className="size-4" />
+        </SelectPrimitive.ItemIndicator>
+      </span>
+      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+    </SelectPrimitive.Item>
+  )
+}
+
+function SelectSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
+  return (
+    <SelectPrimitive.Separator
+      data-slot="select-separator"
+      className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
+      {...props}
+    />
+  )
+}
+
+function SelectScrollUpButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
+  return (
+    <SelectPrimitive.ScrollUpButton
+      data-slot="select-scroll-up-button"
+      className={cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      )}
+      {...props}
+    >
+      <ChevronUpIcon className="size-4" />
+    </SelectPrimitive.ScrollUpButton>
+  )
+}
+
+function SelectScrollDownButton({
+  className,
+  ...props
+}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
+  return (
+    <SelectPrimitive.ScrollDownButton
+      data-slot="select-scroll-down-button"
+      className={cn(
+        "flex cursor-default items-center justify-center py-1",
+        className
+      )}
+      {...props}
+    >
+      <ChevronDownIcon className="size-4" />
+    </SelectPrimitive.ScrollDownButton>
+  )
+}
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+}

resources/js/components/ui/separator.tsx

@@ -0,0 +1,26 @@
+import * as React from "react"
+import * as SeparatorPrimitive from "@radix-ui/react-separator"
+
+import { cn } from "@/lib/utils"
+
+function Separator({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+  return (
+    <SeparatorPrimitive.Root
+      data-slot="separator-root"
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Separator }

resources/js/components/ui/sheet.tsx

@@ -0,0 +1,137 @@
+import * as React from "react"
+import * as SheetPrimitive from "@radix-ui/react-dialog"
+import { XIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
+  return <SheetPrimitive.Root data-slot="sheet" {...props} />
+}
+
+function SheetTrigger({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
+  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
+}
+
+function SheetClose({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Close>) {
+  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
+}
+
+function SheetPortal({
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Portal>) {
+  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
+}
+
+function SheetOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
+  return (
+    <SheetPrimitive.Overlay
+      data-slot="sheet-overlay"
+      className={cn(
+        "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SheetContent({
+  className,
+  children,
+  side = "right",
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Content> & {
+  side?: "top" | "right" | "bottom" | "left"
+}) {
+  return (
+    <SheetPortal>
+      <SheetOverlay />
+      <SheetPrimitive.Content
+        data-slot="sheet-content"
+        className={cn(
+          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+          side === "right" &&
+            "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
+          side === "left" &&
+            "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
+          side === "top" &&
+            "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
+          side === "bottom" &&
+            "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
+          <XIcon className="size-4" />
+          <span className="sr-only">Close</span>
+        </SheetPrimitive.Close>
+      </SheetPrimitive.Content>
+    </SheetPortal>
+  )
+}
+
+function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-header"
+      className={cn("flex flex-col gap-1.5 p-4", className)}
+      {...props}
+    />
+  )
+}
+
+function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sheet-footer"
+      className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+      {...props}
+    />
+  )
+}
+
+function SheetTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Title>) {
+  return (
+    <SheetPrimitive.Title
+      data-slot="sheet-title"
+      className={cn("text-foreground font-semibold", className)}
+      {...props}
+    />
+  )
+}
+
+function SheetDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof SheetPrimitive.Description>) {
+  return (
+    <SheetPrimitive.Description
+      data-slot="sheet-description"
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+export {
+  Sheet,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+}

resources/js/components/ui/sidebar.tsx

@@ -0,0 +1,721 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { VariantProps, cva } from "class-variance-authority"
+import { PanelLeftIcon } from "lucide-react"
+
+import { useIsMobile } from "@/hooks/use-mobile"
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Separator } from "@/components/ui/separator"
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from "@/components/ui/sheet"
+import { Skeleton } from "@/components/ui/skeleton"
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip"
+
+const SIDEBAR_COOKIE_NAME = "sidebar_state"
+const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
+const SIDEBAR_WIDTH = "16rem"
+const SIDEBAR_WIDTH_MOBILE = "18rem"
+const SIDEBAR_WIDTH_ICON = "3rem"
+const SIDEBAR_KEYBOARD_SHORTCUT = "b"
+
+type SidebarContext = {
+  state: "expanded" | "collapsed"
+  open: boolean
+  setOpen: (open: boolean) => void
+  openMobile: boolean
+  setOpenMobile: (open: boolean) => void
+  isMobile: boolean
+  toggleSidebar: () => void
+}
+
+const SidebarContext = React.createContext<SidebarContext | null>(null)
+
+function useSidebar() {
+  const context = React.useContext(SidebarContext)
+  if (!context) {
+    throw new Error("useSidebar must be used within a SidebarProvider.")
+  }
+
+  return context
+}
+
+function SidebarProvider({
+  defaultOpen = true,
+  open: openProp,
+  onOpenChange: setOpenProp,
+  className,
+  style,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & {
+  defaultOpen?: boolean
+  open?: boolean
+  onOpenChange?: (open: boolean) => void
+}) {
+  const isMobile = useIsMobile()
+  const [openMobile, setOpenMobile] = React.useState(false)
+
+  // This is the internal state of the sidebar.
+  // We use openProp and setOpenProp for control from outside the component.
+  const [_open, _setOpen] = React.useState(defaultOpen)
+  const open = openProp ?? _open
+  const setOpen = React.useCallback(
+    (value: boolean | ((value: boolean) => boolean)) => {
+      const openState = typeof value === "function" ? value(open) : value
+      if (setOpenProp) {
+        setOpenProp(openState)
+      } else {
+        _setOpen(openState)
+      }
+
+      // This sets the cookie to keep the sidebar state.
+      document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`
+    },
+    [setOpenProp, open]
+  )
+
+  // Helper to toggle the sidebar.
+  const toggleSidebar = React.useCallback(() => {
+    return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open)
+  }, [isMobile, setOpen, setOpenMobile])
+
+  // Adds a keyboard shortcut to toggle the sidebar.
+  React.useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (
+        event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
+        (event.metaKey || event.ctrlKey)
+      ) {
+        event.preventDefault()
+        toggleSidebar()
+      }
+    }
+
+    window.addEventListener("keydown", handleKeyDown)
+    return () => window.removeEventListener("keydown", handleKeyDown)
+  }, [toggleSidebar])
+
+  // We add a state so that we can do data-state="expanded" or "collapsed".
+  // This makes it easier to style the sidebar with Tailwind classes.
+  const state = open ? "expanded" : "collapsed"
+
+  const contextValue = React.useMemo<SidebarContext>(
+    () => ({
+      state,
+      open,
+      setOpen,
+      isMobile,
+      openMobile,
+      setOpenMobile,
+      toggleSidebar,
+    }),
+    [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]
+  )
+
+  return (
+    <SidebarContext.Provider value={contextValue}>
+      <TooltipProvider delayDuration={0}>
+        <div
+          data-slot="sidebar-wrapper"
+          style={
+            {
+              "--sidebar-width": SIDEBAR_WIDTH,
+              "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
+              ...style,
+            } as React.CSSProperties
+          }
+          className={cn(
+            "group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full",
+            className
+          )}
+          {...props}
+        >
+          {children}
+        </div>
+      </TooltipProvider>
+    </SidebarContext.Provider>
+  )
+}
+
+function Sidebar({
+  side = "left",
+  variant = "sidebar",
+  collapsible = "offcanvas",
+  className,
+  children,
+  ...props
+}: React.ComponentProps<"div"> & {
+  side?: "left" | "right"
+  variant?: "sidebar" | "floating" | "inset"
+  collapsible?: "offcanvas" | "icon" | "none"
+}) {
+  const { isMobile, state, openMobile, setOpenMobile } = useSidebar()
+
+  if (collapsible === "none") {
+    return (
+      <div
+        data-slot="sidebar"
+        className={cn(
+          "bg-sidebar text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col",
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    )
+  }
+
+  if (isMobile) {
+    return (
+      <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
+        <SheetHeader className="sr-only">
+          <SheetTitle>Sidebar</SheetTitle>
+          <SheetDescription>Displays the mobile sidebar.</SheetDescription>
+        </SheetHeader>
+        <SheetContent
+          data-sidebar="sidebar"
+          data-slot="sidebar"
+          data-mobile="true"
+          className="bg-sidebar text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden"
+          style={
+            {
+              "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
+            } as React.CSSProperties
+          }
+          side={side}
+        >
+          <div className="flex h-full w-full flex-col">{children}</div>
+        </SheetContent>
+      </Sheet>
+    )
+  }
+
+  return (
+    <div
+      className="group peer text-sidebar-foreground hidden md:block"
+      data-state={state}
+      data-collapsible={state === "collapsed" ? collapsible : ""}
+      data-variant={variant}
+      data-side={side}
+      data-slot="sidebar"
+    >
+      {/* This is what handles the sidebar gap on desktop */}
+      <div
+        className={cn(
+          "relative h-svh w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear",
+          "group-data-[collapsible=offcanvas]:w-0",
+          "group-data-[side=right]:rotate-180",
+          variant === "floating" || variant === "inset"
+            ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]"
+            : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)"
+        )}
+      />
+      <div
+        className={cn(
+          "fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex",
+          side === "left"
+            ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
+            : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
+          // Adjust the padding for floating and inset variants.
+          variant === "floating" || variant === "inset"
+            ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]"
+            : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l",
+          className
+        )}
+        {...props}
+      >
+        <div
+          data-sidebar="sidebar"
+          className="bg-sidebar group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm"
+        >
+          {children}
+        </div>
+      </div>
+    </div>
+  )
+}
+
+function SidebarTrigger({
+  className,
+  onClick,
+  ...props
+}: React.ComponentProps<typeof Button>) {
+  const { toggleSidebar } = useSidebar()
+
+  return (
+    <Button
+      data-sidebar="trigger"
+      data-slot="sidebar-trigger"
+      variant="ghost"
+      size="icon"
+      className={cn("h-7 w-7", className)}
+      onClick={(event) => {
+        onClick?.(event)
+        toggleSidebar()
+      }}
+      {...props}
+    >
+      <PanelLeftIcon />
+      <span className="sr-only">Toggle Sidebar</span>
+    </Button>
+  )
+}
+
+function SidebarRail({ className, ...props }: React.ComponentProps<"button">) {
+  const { toggleSidebar } = useSidebar()
+
+  return (
+    <button
+      data-sidebar="rail"
+      data-slot="sidebar-rail"
+      aria-label="Toggle Sidebar"
+      tabIndex={-1}
+      onClick={toggleSidebar}
+      title="Toggle Sidebar"
+      className={cn(
+        "hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] sm:flex",
+        "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize",
+        "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize",
+        "hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full",
+        "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2",
+        "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarInset({ className, ...props }: React.ComponentProps<"main">) {
+  return (
+    <main
+      data-slot="sidebar-inset"
+      className={cn(
+        "bg-background relative flex max-w-full min-h-svh flex-1 flex-col",
+        "peer-data-[variant=inset]:min-h-[calc(100svh-(--spacing(4)))] md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarInput({
+  className,
+  ...props
+}: React.ComponentProps<typeof Input>) {
+  return (
+    <Input
+      data-slot="sidebar-input"
+      data-sidebar="input"
+      className={cn("bg-background h-8 w-full shadow-none", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-header"
+      data-sidebar="header"
+      className={cn("flex flex-col gap-2 p-2", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-footer"
+      data-sidebar="footer"
+      className={cn("flex flex-col gap-2 p-2", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof Separator>) {
+  return (
+    <Separator
+      data-slot="sidebar-separator"
+      data-sidebar="separator"
+      className={cn("bg-sidebar-border mx-2 w-auto", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-content"
+      data-sidebar="content"
+      className={cn(
+        "flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-group"
+      data-sidebar="group"
+      className={cn("relative flex w-full min-w-0 flex-col p-2", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarGroupLabel({
+  className,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"div"> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "div"
+
+  return (
+    <Comp
+      data-slot="sidebar-group-label"
+      data-sidebar="group-label"
+      className={cn(
+        "text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 group-data-[collapsible=icon]:select-none group-data-[collapsible=icon]:pointer-events-none",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarGroupAction({
+  className,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "button"
+
+  return (
+    <Comp
+      data-slot="sidebar-group-action"
+      data-sidebar="group-action"
+      className={cn(
+        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        // Increases the hit area of the button on mobile.
+        "after:absolute after:-inset-2 md:after:hidden",
+        "group-data-[collapsible=icon]:hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarGroupContent({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-group-content"
+      data-sidebar="group-content"
+      className={cn("w-full text-sm", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenu({ className, ...props }: React.ComponentProps<"ul">) {
+  return (
+    <ul
+      data-slot="sidebar-menu"
+      data-sidebar="menu"
+      className={cn("flex w-full min-w-0 flex-col gap-1", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="sidebar-menu-item"
+      data-sidebar="menu-item"
+      className={cn("group/menu-item relative", className)}
+      {...props}
+    />
+  )
+}
+
+const sidebarMenuButtonVariants = cva(
+  "peer/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+        outline:
+          "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
+      },
+      size: {
+        default: "h-8 text-sm",
+        sm: "h-7 text-xs",
+        lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function SidebarMenuButton({
+  asChild = false,
+  isActive = false,
+  variant = "default",
+  size = "default",
+  tooltip,
+  className,
+  ...props
+}: React.ComponentProps<"button"> & {
+  asChild?: boolean
+  isActive?: boolean
+  tooltip?: string | React.ComponentProps<typeof TooltipContent>
+} & VariantProps<typeof sidebarMenuButtonVariants>) {
+  const Comp = asChild ? Slot : "button"
+  const { isMobile, state } = useSidebar()
+
+  const button = (
+    <Comp
+      data-slot="sidebar-menu-button"
+      data-sidebar="menu-button"
+      data-size={size}
+      data-active={isActive}
+      className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
+      {...props}
+    />
+  )
+
+  if (!tooltip) {
+    return button
+  }
+
+  if (typeof tooltip === "string") {
+    tooltip = {
+      children: tooltip,
+    }
+  }
+
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>{button}</TooltipTrigger>
+      <TooltipContent
+        side="right"
+        align="center"
+        hidden={state !== "collapsed" || isMobile}
+        {...tooltip}
+      />
+    </Tooltip>
+  )
+}
+
+function SidebarMenuAction({
+  className,
+  asChild = false,
+  showOnHover = false,
+  ...props
+}: React.ComponentProps<"button"> & {
+  asChild?: boolean
+  showOnHover?: boolean
+}) {
+  const Comp = asChild ? Slot : "button"
+
+  return (
+    <Comp
+      data-slot="sidebar-menu-action"
+      data-sidebar="menu-action"
+      className={cn(
+        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
+        // Increases the hit area of the button on mobile.
+        "after:absolute after:-inset-2 md:after:hidden",
+        "peer-data-[size=sm]/menu-button:top-1",
+        "peer-data-[size=default]/menu-button:top-1.5",
+        "peer-data-[size=lg]/menu-button:top-2.5",
+        "group-data-[collapsible=icon]:hidden",
+        showOnHover &&
+          "peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuBadge({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="sidebar-menu-badge"
+      data-sidebar="menu-badge"
+      className={cn(
+        "text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none",
+        "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground",
+        "peer-data-[size=sm]/menu-button:top-1",
+        "peer-data-[size=default]/menu-button:top-1.5",
+        "peer-data-[size=lg]/menu-button:top-2.5",
+        "group-data-[collapsible=icon]:hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuSkeleton({
+  className,
+  showIcon = false,
+  ...props
+}: React.ComponentProps<"div"> & {
+  showIcon?: boolean
+}) {
+  // Random width between 50 to 90%.
+  const width = React.useMemo(() => {
+    return `${Math.floor(Math.random() * 40) + 50}%`
+  }, [])
+
+  return (
+    <div
+      data-slot="sidebar-menu-skeleton"
+      data-sidebar="menu-skeleton"
+      className={cn("flex h-8 items-center gap-2 rounded-md px-2", className)}
+      {...props}
+    >
+      {showIcon && (
+        <Skeleton
+          className="size-4 rounded-md"
+          data-sidebar="menu-skeleton-icon"
+        />
+      )}
+      <Skeleton
+        className="h-4 max-w-(--skeleton-width) flex-1"
+        data-sidebar="menu-skeleton-text"
+        style={
+          {
+            "--skeleton-width": width,
+          } as React.CSSProperties
+        }
+      />
+    </div>
+  )
+}
+
+function SidebarMenuSub({ className, ...props }: React.ComponentProps<"ul">) {
+  return (
+    <ul
+      data-slot="sidebar-menu-sub"
+      data-sidebar="menu-sub"
+      className={cn(
+        "border-sidebar-border mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l px-2.5 py-0.5",
+        "group-data-[collapsible=icon]:hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuSubItem({
+  className,
+  ...props
+}: React.ComponentProps<"li">) {
+  return (
+    <li
+      data-slot="sidebar-menu-sub-item"
+      data-sidebar="menu-sub-item"
+      className={cn("group/menu-sub-item relative", className)}
+      {...props}
+    />
+  )
+}
+
+function SidebarMenuSubButton({
+  asChild = false,
+  size = "md",
+  isActive = false,
+  className,
+  ...props
+}: React.ComponentProps<"a"> & {
+  asChild?: boolean
+  size?: "sm" | "md"
+  isActive?: boolean
+}) {
+  const Comp = asChild ? Slot : "a"
+
+  return (
+    <Comp
+      data-slot="sidebar-menu-sub-button"
+      data-sidebar="menu-sub-button"
+      data-size={size}
+      data-active={isActive}
+      className={cn(
+        "text-sidebar-foreground ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground [&>svg]:text-sidebar-accent-foreground flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+        "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground",
+        size === "sm" && "text-xs",
+        size === "md" && "text-sm",
+        "group-data-[collapsible=icon]:hidden",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Sidebar,
+  SidebarContent,
+  SidebarFooter,
+  SidebarGroup,
+  SidebarGroupAction,
+  SidebarGroupContent,
+  SidebarGroupLabel,
+  SidebarHeader,
+  SidebarInput,
+  SidebarInset,
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuBadge,
+  SidebarMenuButton,
+  SidebarMenuItem,
+  SidebarMenuSkeleton,
+  SidebarMenuSub,
+  SidebarMenuSubButton,
+  SidebarMenuSubItem,
+  SidebarProvider,
+  SidebarRail,
+  SidebarSeparator,
+  SidebarTrigger,
+  useSidebar,
+}

resources/js/components/ui/skeleton.tsx

@@ -0,0 +1,13 @@
+import { cn } from "@/lib/utils"
+
+function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="skeleton"
+      className={cn("bg-primary/10 animate-pulse rounded-md", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }

resources/js/components/ui/toggle-group.tsx

@@ -0,0 +1,71 @@
+import * as React from "react"
+import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group"
+import { type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+import { toggleVariants } from "@/components/ui/toggle"
+
+const ToggleGroupContext = React.createContext<
+  VariantProps<typeof toggleVariants>
+>({
+  size: "default",
+  variant: "default",
+})
+
+function ToggleGroup({
+  className,
+  variant,
+  size,
+  children,
+  ...props
+}: React.ComponentProps<typeof ToggleGroupPrimitive.Root> &
+  VariantProps<typeof toggleVariants>) {
+  return (
+    <ToggleGroupPrimitive.Root
+      data-slot="toggle-group"
+      data-variant={variant}
+      data-size={size}
+      className={cn(
+        "group/toggle-group flex items-center rounded-md data-[variant=outline]:shadow-xs",
+        className
+      )}
+      {...props}
+    >
+      <ToggleGroupContext.Provider value={{ variant, size }}>
+        {children}
+      </ToggleGroupContext.Provider>
+    </ToggleGroupPrimitive.Root>
+  )
+}
+
+function ToggleGroupItem({
+  className,
+  children,
+  variant,
+  size,
+  ...props
+}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> &
+  VariantProps<typeof toggleVariants>) {
+  const context = React.useContext(ToggleGroupContext)
+
+  return (
+    <ToggleGroupPrimitive.Item
+      data-slot="toggle-group-item"
+      data-variant={context.variant || variant}
+      data-size={context.size || size}
+      className={cn(
+        toggleVariants({
+          variant: context.variant || variant,
+          size: context.size || size,
+        }),
+        "min-w-0 shrink-0 rounded-none shadow-none first:rounded-l-md last:rounded-r-md focus:z-10 focus-visible:z-10 data-[variant=outline]:border-l-0 data-[variant=outline]:first:border-l",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </ToggleGroupPrimitive.Item>
+  )
+}
+
+export { ToggleGroup, ToggleGroupItem }

resources/js/components/ui/toggle.tsx

@@ -0,0 +1,45 @@
+import * as React from "react"
+import * as TogglePrimitive from "@radix-ui/react-toggle"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const toggleVariants = cva(
+  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline:
+          "border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground",
+      },
+      size: {
+        default: "h-9 px-2 min-w-9",
+        sm: "h-8 px-1.5 min-w-8",
+        lg: "h-10 px-2.5 min-w-10",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Toggle({
+  className,
+  variant,
+  size,
+  ...props
+}: React.ComponentProps<typeof TogglePrimitive.Root> &
+  VariantProps<typeof toggleVariants>) {
+  return (
+    <TogglePrimitive.Root
+      data-slot="toggle"
+      className={cn(toggleVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Toggle, toggleVariants }

resources/js/components/ui/tooltip.tsx

@@ -0,0 +1,59 @@
+import * as React from "react"
+import * as TooltipPrimitive from "@radix-ui/react-tooltip"
+
+import { cn } from "@/lib/utils"
+
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delayDuration={delayDuration}
+      {...props}
+    />
+  )
+}
+
+function Tooltip({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+  return (
+    <TooltipProvider>
+      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
+    </TooltipProvider>
+  )
+}
+
+function TooltipTrigger({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 4,
+  children,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-w-sm rounded-md px-3 py-1.5 text-xs",
+          className
+        )}
+        {...props}
+      >
+        {children}
+        <TooltipPrimitive.Arrow className="bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  )
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

resources/js/components/user-info.tsx

@@ -0,0 +1,22 @@
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import { useInitials } from '@/hooks/use-initials';
+import { type User } from '@/types';
+
+export function UserInfo({ user, showEmail = false }: { user: User; showEmail?: boolean }) {
+    const getInitials = useInitials();
+
+    return (
+        <>
+            <Avatar className="h-8 w-8 overflow-hidden rounded-full">
+                <AvatarImage src={user.avatar} alt={user.name} />
+                <AvatarFallback className="rounded-lg bg-neutral-200 text-black dark:bg-neutral-700 dark:text-white">
+                    {getInitials(user.name)}
+                </AvatarFallback>
+            </Avatar>
+            <div className="grid flex-1 text-left text-sm leading-tight">
+                <span className="truncate font-medium">{user.name}</span>
+                {showEmail && <span className="truncate text-xs text-muted-foreground">{user.email}</span>}
+            </div>
+        </>
+    );
+}

resources/js/components/user-menu-content.tsx

@@ -0,0 +1,47 @@
+import { DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator } from '@/components/ui/dropdown-menu';
+import { UserInfo } from '@/components/user-info';
+import { useMobileNavigation } from '@/hooks/use-mobile-navigation';
+import { logout } from '@/routes';
+import { edit } from '@/routes/profile';
+import { type User } from '@/types';
+import { Link, router } from '@inertiajs/react';
+import { LogOut, Settings } from 'lucide-react';
+
+interface UserMenuContentProps {
+    user: User;
+}
+
+export function UserMenuContent({ user }: UserMenuContentProps) {
+    const cleanup = useMobileNavigation();
+
+    const handleLogout = () => {
+        cleanup();
+        router.flushAll();
+    };
+
+    return (
+        <>
+            <DropdownMenuLabel className="p-0 font-normal">
+                <div className="flex items-center gap-2 px-1 py-1.5 text-left text-sm">
+                    <UserInfo user={user} showEmail={true} />
+                </div>
+            </DropdownMenuLabel>
+            <DropdownMenuSeparator />
+            <DropdownMenuGroup>
+                <DropdownMenuItem asChild>
+                    <Link className="block w-full" href={edit()} as="button" prefetch onClick={cleanup}>
+                        <Settings className="mr-2" />
+                        Settings
+                    </Link>
+                </DropdownMenuItem>
+            </DropdownMenuGroup>
+            <DropdownMenuSeparator />
+            <DropdownMenuItem asChild>
+                <Link className="block w-full" href={logout()} as="button" onClick={handleLogout}>
+                    <LogOut className="mr-2" />
+                    Log out
+                </Link>
+            </DropdownMenuItem>
+        </>
+    );
+}

resources/js/guest/components/BottomNav.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import { NavLink, useParams } from 'react-router-dom';
+import { Button } from '@/components/ui/button';
+import { GalleryHorizontal, Home, Trophy } from 'lucide-react';
+
+function TabLink({ to, children }: { to: string; children: React.ReactNode }) {
+  return (
+    <NavLink to={to} className={({ isActive }) => (isActive ? 'text-foreground' : 'text-muted-foreground')}>
+      {children}
+    </NavLink>
+  );
+}
+
+export default function BottomNav() {
+  const { slug } = useParams();
+  const base = `/e/${encodeURIComponent(slug ?? 'demo')}`;
+  return (
+    <div className="fixed inset-x-0 bottom-0 z-20 border-t bg-white/90 px-3 py-2 backdrop-blur dark:bg-black/40">
+      <div className="mx-auto flex max-w-md items-center justify-between">
+        <TabLink to={`${base}`}>
+          <Button variant="ghost" size="sm" className="flex flex-col gap-1">
+            <Home className="h-5 w-5" /> <span className="text-xs">Start</span>
+          </Button>
+        </TabLink>
+        <TabLink to={`${base}/gallery`}>
+          <Button variant="ghost" size="sm" className="flex flex-col gap-1">
+            <GalleryHorizontal className="h-5 w-5" /> <span className="text-xs">Galerie</span>
+          </Button>
+        </TabLink>
+        <TabLink to={`${base}/achievements`}>
+          <Button variant="ghost" size="sm" className="flex flex-col gap-1">
+            <Trophy className="h-5 w-5" /> <span className="text-xs">Erfolge</span>
+          </Button>
+        </TabLink>
+      </div>
+    </div>
+  );
+}

resources/js/guest/components/FiltersBar.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { ToggleGroup, ToggleGroupItem } from '@/components/ui/toggle-group';
+
+export type GalleryFilter = 'latest' | 'popular' | 'mine';
+
+export default function FiltersBar({ value, onChange }: { value: GalleryFilter; onChange: (v: GalleryFilter) => void }) {
+  return (
+    <div className="mb-3 flex items-center justify-between">
+      <ToggleGroup type="single" value={value} onValueChange={(v) => v && onChange(v as GalleryFilter)}>
+        <ToggleGroupItem value="latest">Neueste</ToggleGroupItem>
+        <ToggleGroupItem value="popular">Beliebt</ToggleGroupItem>
+        <ToggleGroupItem value="mine">Meine</ToggleGroupItem>
+      </ToggleGroup>
+    </div>
+  );
+}
+

resources/js/guest/components/Header.tsx

@@ -0,0 +1,89 @@
+import React from 'react';
+import { Button } from '@/components/ui/button';
+import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from '@/components/ui/sheet';
+import AppearanceToggleDropdown from '@/components/appearance-dropdown';
+import { Settings } from 'lucide-react';
+
+export default function Header({ title = '' }: { title?: string }) {
+  return (
+    <div className="sticky top-0 z-20 flex items-center justify-between border-b bg-white/70 px-4 py-2 backdrop-blur dark:bg-black/40">
+      <div className="font-semibold">{title}</div>
+      <div className="flex items-center gap-2">
+        <AppearanceToggleDropdown />
+        <SettingsSheet />
+      </div>
+    </div>
+  );
+}
+
+function SettingsSheet() {
+  return (
+    <Sheet>
+      <SheetTrigger asChild>
+        <Button variant="ghost" size="icon" className="h-9 w-9 rounded-md">
+          <Settings className="h-5 w-5" />
+          <span className="sr-only">Einstellungen öffnen</span>
+        </Button>
+      </SheetTrigger>
+      <SheetContent side="right" className="w-80 sm:w-96">
+        <SheetHeader>
+          <SheetTitle>Einstellungen</SheetTitle>
+        </SheetHeader>
+        <div className="mt-4 space-y-4">
+          <div>
+            <div className="text-sm font-medium">Darstellung</div>
+            <div className="text-sm text-muted-foreground">Hell, Dunkel oder System</div>
+            <div className="mt-2">
+              <AppearanceToggleDropdown />
+            </div>
+          </div>
+          <div>
+            <div className="text-sm font-medium">Cache</div>
+            <ClearCacheButton />
+          </div>
+          <div>
+            <div className="text-sm font-medium">Rechtliches</div>
+            <ul className="mt-2 list-disc pl-5 text-sm">
+              <li><a href="/legal/imprint" className="underline">Impressum</a></li>
+              <li><a href="/legal/privacy" className="underline">Datenschutz</a></li>
+              <li><a href="/legal/terms" className="underline">AGB</a></li>
+            </ul>
+          </div>
+        </div>
+      </SheetContent>
+    </Sheet>
+  );
+}
+
+function ClearCacheButton() {
+  const [busy, setBusy] = React.useState(false);
+  const [done, setDone] = React.useState(false);
+
+  async function clearAll() {
+    setBusy(true); setDone(false);
+    try {
+      // Clear CacheStorage
+      if ('caches' in window) {
+        const keys = await caches.keys();
+        await Promise.all(keys.map((k) => caches.delete(k)));
+      }
+      // Clear known IndexedDB dbs (best-effort)
+      if ('indexedDB' in window) {
+        try { await new Promise((res, rej) => { const r = indexedDB.deleteDatabase('upload-queue'); r.onsuccess=()=>res(null); r.onerror=()=>res(null); }); } catch {}
+      }
+      setDone(true);
+    } finally {
+      setBusy(false);
+      setTimeout(() => setDone(false), 2500);
+    }
+  }
+
+  return (
+    <div className="mt-2">
+      <Button variant="secondary" onClick={clearAll} disabled={busy}>
+        {busy ? 'Leere Cache…' : 'Cache leeren'}
+      </Button>
+      {done && <div className="mt-2 text-xs text-muted-foreground">Cache gelöscht.</div>}
+    </div>
+  );
+}

resources/js/guest/components/ToastHost.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+
+type Toast = { id: number; text: string; type?: 'success'|'error' };
+const Ctx = React.createContext<{ push: (t: Omit<Toast,'id'>) => void } | null>(null);
+
+export function ToastProvider({ children }: { children: React.ReactNode }) {
+  const [list, setList] = React.useState<Toast[]>([]);
+  const push = React.useCallback((t: Omit<Toast,'id'>) => {
+    const id = Date.now() + Math.random();
+    setList((arr) => [...arr, { id, ...t }]);
+    setTimeout(() => setList((arr) => arr.filter((x) => x.id !== id)), 3000);
+  }, []);
+  React.useEffect(() => {
+    const onEvt = (e: any) => push(e.detail);
+    window.addEventListener('guest-toast', onEvt);
+    return () => window.removeEventListener('guest-toast', onEvt);
+  }, [push]);
+  return (
+    <Ctx.Provider value={{ push }}>
+      {children}
+      <div className="pointer-events-none fixed inset-x-0 bottom-4 z-50 flex justify-center px-4">
+        <div className="flex w-full max-w-sm flex-col gap-2">
+          {list.map((t) => (
+            <div key={t.id} className={`pointer-events-auto rounded-md border p-3 shadow-sm ${t.type==='error'?'border-red-300 bg-red-50 text-red-700':'border-green-300 bg-green-50 text-green-700'}`}>
+              {t.text}
+            </div>
+          ))}
+        </div>
+      </div>
+    </Ctx.Provider>
+  );
+}
+
+export function useToast() {
+  const ctx = React.useContext(Ctx);
+  if (!ctx) throw new Error('ToastProvider missing');
+  return ctx;
+}

resources/js/guest/lib/device.ts

@@ -0,0 +1,19 @@
+export function getDeviceId(): string {
+  const KEY = 'device-id';
+  let id = localStorage.getItem(KEY);
+  if (!id) {
+    id = genId();
+    localStorage.setItem(KEY, id);
+  }
+  return id;
+}
+
+function genId() {
+  // Simple UUID v4-ish generator
+  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
+    const r = (crypto.getRandomValues(new Uint8Array(1))[0] & 0xf) >> 0;
+    const v = c === 'x' ? r : (r & 0x3) | 0x8;
+    return v.toString(16);
+  });
+}
+

resources/js/guest/lib/image.ts

@@ -0,0 +1,91 @@
+export async function compressPhoto(
+  file: File,
+  opts: { targetBytes?: number; maxEdge?: number; qualityStart?: number } = {}
+): Promise<File> {
+  const targetBytes = opts.targetBytes ?? 1_500_000; // 1.5 MB
+  const maxEdge = opts.maxEdge ?? 2560;
+  const qualityStart = opts.qualityStart ?? 0.85;
+
+  // If already small and jpeg, return as-is
+  if (file.size <= targetBytes && file.type === 'image/jpeg') return file;
+
+  const img = await loadImageBitmap(file);
+  const { width, height } = fitWithin(img.width, img.height, maxEdge);
+
+  const canvas = createCanvas(width, height);
+  const ctx = canvas.getContext('2d');
+  if (!ctx) throw new Error('Canvas unsupported');
+  ctx.drawImage(img as any, 0, 0, width, height);
+
+  // Iteratively lower quality to fit target size
+  let quality = qualityStart;
+  let blob: Blob | null = await toBlob(canvas, 'image/jpeg', quality);
+  if (!blob) throw new Error('Failed to encode image');
+
+  while (blob.size > targetBytes && quality > 0.5) {
+    quality -= 0.05;
+    const attempt = await toBlob(canvas, 'image/jpeg', quality);
+    if (attempt) blob = attempt;
+    else break;
+  }
+
+  // If still too large, downscale further by 0.9 until it fits or edge < 800
+  let currentWidth = width;
+  let currentHeight = height;
+  while (blob.size > targetBytes && Math.max(currentWidth, currentHeight) > 800) {
+    currentWidth = Math.round(currentWidth * 0.9);
+    currentHeight = Math.round(currentHeight * 0.9);
+    const c2 = createCanvas(currentWidth, currentHeight);
+    const c2ctx = c2.getContext('2d');
+    if (!c2ctx) break;
+    c2ctx.drawImage(canvas, 0, 0, currentWidth, currentHeight);
+    const attempt = await toBlob(c2, 'image/jpeg', quality);
+    if (attempt) blob = attempt;
+  }
+
+  const outName = ensureJpegExtension(file.name);
+  return new File([blob], outName, { type: 'image/jpeg', lastModified: Date.now() });
+}
+
+function fitWithin(w: number, h: number, maxEdge: number) {
+  const scale = Math.min(1, maxEdge / Math.max(w, h));
+  return { width: Math.round(w * scale), height: Math.round(h * scale) };
+}
+
+function createCanvas(w: number, h: number): HTMLCanvasElement {
+  const c = document.createElement('canvas');
+  c.width = w; c.height = h; return c;
+}
+
+function toBlob(canvas: HTMLCanvasElement, type: string, quality: number): Promise<Blob | null> {
+  return new Promise((resolve) => canvas.toBlob(resolve, type, quality));
+}
+
+async function loadImageBitmap(file: File): Promise<HTMLImageElement | ImageBitmap> {
+  const canBitmap = 'createImageBitmap' in window;
+  if (canBitmap) {
+    try { return await (createImageBitmap as any)(file); } catch {}
+  }
+  return await loadHtmlImage(file);
+}
+
+function loadHtmlImage(file: File): Promise<HTMLImageElement> {
+  return new Promise((resolve, reject) => {
+    const url = URL.createObjectURL(file);
+    const img = new Image();
+    img.onload = () => { URL.revokeObjectURL(url); resolve(img); };
+    img.onerror = (e) => { URL.revokeObjectURL(url); reject(e); };
+    img.src = url;
+  });
+}
+
+function ensureJpegExtension(name: string) {
+  return name.replace(/\.(heic|heif|png|webp|jpg|jpeg)$/i, '') + '.jpg';
+}
+
+export function formatBytes(bytes: number) {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(2)} MB`;
+}
+

resources/js/guest/main.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { createRoot } from 'react-dom/client';
+import { RouterProvider } from 'react-router-dom';
+import { router } from './router';
+import '../../css/app.css';
+import { initializeTheme } from '@/hooks/use-appearance';
+import { ToastProvider } from './components/ToastHost';
+
+initializeTheme();
+const rootEl = document.getElementById('root')!;
+
+// Register a minimal service worker for background sync (best-effort)
+if ('serviceWorker' in navigator) {
+  navigator.serviceWorker.register('/guest-sw.js').catch(() => {});
+  navigator.serviceWorker.addEventListener('message', (evt) => {
+    if (evt.data?.type === 'sync-queue') {
+      import('./queue/queue').then((m) => m.processQueue().catch(() => {}));
+    }
+  });
+  // Also attempt to process queue on load and when going online
+  import('./queue/queue').then((m) => m.processQueue().catch(() => {}));
+  window.addEventListener('online', () => {
+    import('./queue/queue').then((m) => m.processQueue().catch(() => {}));
+  });
+}
+createRoot(rootEl).render(
+  <React.StrictMode>
+    <ToastProvider>
+      <RouterProvider router={router} />
+    </ToastProvider>
+  </React.StrictMode>
+);

resources/js/guest/pages/AchievementsPage.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Page } from './_util';
+
+export default function AchievementsPage() {
+  return (
+    <Page title="Erfolge">
+      <p>Badges and progress placeholder.</p>
+    </Page>
+  );
+}
+

resources/js/guest/pages/GalleryPage.tsx

@@ -0,0 +1,87 @@
+import React from 'react';
+import { Page } from './_util';
+import { useParams } from 'react-router-dom';
+import { usePollGalleryDelta } from '../polling/usePollGalleryDelta';
+import { Card, CardContent } from '@/components/ui/card';
+import { Alert, AlertDescription } from '@/components/ui/alert';
+import { Button } from '@/components/ui/button';
+import FiltersBar, { type GalleryFilter } from '../components/FiltersBar';
+import { Link } from 'react-router-dom';
+import { Heart } from 'lucide-react';
+import { likePhoto } from '../services/photosApi';
+
+export default function GalleryPage() {
+  const { slug } = useParams();
+  const { photos, loading, newCount, acknowledgeNew } = usePollGalleryDelta(slug!);
+  const [filter, setFilter] = React.useState<GalleryFilter>('latest');
+
+  const myPhotoIds = React.useMemo(() => {
+    try {
+      const raw = localStorage.getItem('my-photo-ids');
+      return new Set<number>(raw ? JSON.parse(raw) : []);
+    } catch { return new Set<number>(); }
+  }, []);
+
+  const list = React.useMemo(() => {
+    let arr = photos.slice();
+    if (filter === 'popular') {
+      arr.sort((a: any, b: any) => (b.likes_count ?? 0) - (a.likes_count ?? 0));
+    } else if (filter === 'mine') {
+      arr = arr.filter((p: any) => myPhotoIds.has(p.id));
+    } else {
+      arr.sort((a: any, b: any) => new Date(b.created_at ?? 0).getTime() - new Date(a.created_at ?? 0).getTime());
+    }
+    return arr;
+  }, [photos, filter, myPhotoIds]);
+  const [liked, setLiked] = React.useState<Set<number>>(new Set());
+  const [counts, setCounts] = React.useState<Record<number, number>>({});
+
+  async function onLike(id: number) {
+    if (liked.has(id)) return;
+    setLiked(new Set(liked).add(id));
+    try {
+      const c = await likePhoto(id);
+      setCounts((m) => ({ ...m, [id]: c }));
+      // keep a simple record of liked items
+      try {
+        const raw = localStorage.getItem('liked-photo-ids');
+        const arr: number[] = raw ? JSON.parse(raw) : [];
+        if (!arr.includes(id)) localStorage.setItem('liked-photo-ids', JSON.stringify([...arr, id]));
+      } catch {}
+    } catch {
+      const s = new Set(liked); s.delete(id); setLiked(s);
+    }
+  }
+
+  return (
+    <Page title="Galerie">
+      <FiltersBar value={filter} onChange={setFilter} />
+      {newCount > 0 && (
+        <Alert className="mb-3">
+          <AlertDescription>
+            {newCount} neue Fotos verfügbar.{' '}
+            <Button variant="link" className="px-1" onClick={acknowledgeNew}>Aktualisieren</Button>
+          </AlertDescription>
+        </Alert>
+      )}
+      {loading && <p>Lade…</p>}
+      <div className="grid grid-cols-2 gap-2 sm:grid-cols-3">
+        {list.map((p) => (
+          <Card key={p.id} className="relative overflow-hidden">
+            <CardContent className="p-0">
+              <Link to={`../photo/${p.id}`} state={{ photo: p }}>
+                <img src={p.thumbnail_path || p.file_path} alt="Foto" className="aspect-square w-full object-cover" />
+              </Link>
+            </CardContent>
+            <div className="absolute bottom-1 right-1 flex items-center gap-1 rounded-full bg-black/50 px-2 py-1 text-white">
+              <button onClick={() => onLike(p.id)} className={`inline-flex items-center ${liked.has(p.id) ? 'text-red-400' : ''}`} aria-label="Like">
+                <Heart className="h-4 w-4" />
+              </button>
+              <span className="text-xs">{counts[p.id] ?? p.likes_count ?? 0}</span>
+            </div>
+          </Card>
+        ))}
+      </div>
+    </Page>
+  );
+}

resources/js/guest/pages/HomePage.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { Page } from './_util';
+import { useParams, Link } from 'react-router-dom';
+import { usePollStats } from '../polling/usePollStats';
+import { Card, CardContent } from '@/components/ui/card';
+import { Button } from '@/components/ui/button';
+
+export default function HomePage() {
+  const { slug } = useParams();
+  const stats = usePollStats(slug!);
+  return (
+    <Page title={`Event: ${slug}`}>
+      <Card>
+        <CardContent className="p-3 text-sm">
+          {stats.loading ? 'Lade…' : (
+            <span>
+              <span className="font-medium">{stats.onlineGuests}</span> Gäste online · ✅{' '}
+              <span className="font-medium">{stats.tasksSolved}</span> Aufgaben gelöst
+            </span>
+          )}
+        </CardContent>
+      </Card>
+      <div className="h-3" />
+      <div className="flex flex-wrap gap-2">
+        <Link to="tasks"><Button variant="secondary">Aufgabe ziehen</Button></Link>
+        <Link to="tasks"><Button variant="secondary">Wie fühlst du dich?</Button></Link>
+        <Link to="upload"><Button>Einfach ein Foto machen</Button></Link>
+      </div>
+      <div className="h-4" />
+      <Link to="gallery" className="underline">Zur Galerie</Link>
+    </Page>
+  );
+}

resources/js/guest/pages/LandingPage.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { Page } from './_util';
+import { useNavigate } from 'react-router-dom';
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+import { Alert, AlertDescription } from '@/components/ui/alert';
+
+export default function LandingPage() {
+  const nav = useNavigate();
+  const [slug, setSlug] = React.useState('');
+  const [loading, setLoading] = React.useState(false);
+  const [error, setError] = React.useState<string | null>(null);
+
+  async function join() {
+    const s = slug.trim();
+    if (!s) return;
+    setLoading(true);
+    setError(null);
+    try {
+      const res = await fetch(`/api/v1/events/${encodeURIComponent(s)}`);
+      if (!res.ok) {
+        setError('Event nicht gefunden oder geschlossen.');
+        return;
+      }
+      nav(`/e/${encodeURIComponent(s)}`);
+    } catch (e) {
+      setError('Netzwerkfehler. Bitte später erneut versuchen.');
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <Page title="Willkommen bei Fotochallenge 🎉">
+      {error && (
+        <Alert className="mb-3" variant="destructive">
+          <AlertDescription>{error}</AlertDescription>
+        </Alert>
+      )}
+      <Input
+        value={slug}
+        onChange={(e) => setSlug(e.target.value)}
+        placeholder="QR/PIN oder Event-Slug eingeben"
+      />
+      <div className="h-3" />
+      <Button disabled={loading || !slug.trim()} onClick={join}>
+        {loading ? 'Prüfe…' : 'Event beitreten'}
+      </Button>
+    </Page>
+  );
+}

resources/js/guest/pages/LegalPage.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Page } from './_util';
+import { useParams } from 'react-router-dom';
+
+export default function LegalPage() {
+  const { page } = useParams();
+  return (
+    <Page title={`Rechtliches: ${page}`}>
+      <p>Impressum / Datenschutz / AGB</p>
+    </Page>
+  );
+}
+

resources/js/guest/pages/NotFoundPage.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Page } from './_util';
+
+export default function NotFoundPage() {
+  return (
+    <Page title="Nicht gefunden">
+      <p>Die Seite konnte nicht gefunden werden.</p>
+    </Page>
+  );
+}
+

resources/js/guest/pages/PhotoLightbox.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import { useLocation, useNavigate, useParams } from 'react-router-dom';
+import { Dialog, DialogContent } from '@/components/ui/dialog';
+import { Button } from '@/components/ui/button';
+import { Heart } from 'lucide-react';
+import { likePhoto } from '../services/photosApi';
+
+type Photo = { id: number; file_path?: string; thumbnail_path?: string; likes_count?: number; created_at?: string };
+
+export default function PhotoLightbox() {
+  const nav = useNavigate();
+  const { state } = useLocation();
+  const { photoId } = useParams();
+  const [photo, setPhoto] = React.useState<Photo | null>((state as any)?.photo ?? null);
+
+  const [likes, setLikes] = React.useState<number | null>(null);
+  const [liked, setLiked] = React.useState(false);
+
+  React.useEffect(() => {
+    if (photo) return;
+    (async () => {
+      const res = await fetch(`/api/v1/photos/${photoId}`);
+      if (res.ok) setPhoto(await res.json());
+    })();
+  }, [photo, photoId]);
+
+  React.useEffect(() => {
+    if (photo && likes === null) setLikes(photo.likes_count ?? 0);
+  }, [photo, likes]);
+
+  async function onLike() {
+    if (liked || !photo) return;
+    setLiked(true);
+    const c = await likePhoto(photo.id);
+    setLikes(c);
+  }
+
+  function onOpenChange(open: boolean) {
+    if (!open) nav(-1);
+  }
+
+  return (
+    <Dialog open onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-5xl border-0 bg-black p-0 text-white">
+        <div className="flex items-center justify-between p-2">
+          <div className="flex items-center gap-2">
+            <Button variant="secondary" size="sm" onClick={onLike} disabled={liked}>
+              <Heart className="mr-1 h-4 w-4" /> {likes ?? 0}
+            </Button>
+          </div>
+          <Button variant="secondary" size="sm" onClick={() => nav(-1)}>Schließen</Button>
+        </div>
+        <div className="flex items-center justify-center">
+          {photo ? (
+            <img src={photo.file_path || photo.thumbnail_path} alt="Foto" className="max-h-[80vh] w-auto" />
+          ) : (
+            <div className="p-6">Lade…</div>
+          )}
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}

resources/js/guest/pages/ProfileSetupPage.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { Page } from './_util';
+
+export default function ProfileSetupPage() {
+  return (
+    <Page title="Profil erstellen">
+      <input placeholder="Dein Name" style={{ width: '100%', padding: 10, border: '1px solid #ddd', borderRadius: 8 }} />
+      <div style={{ height: 12 }} />
+      <button style={{ padding: '10px 16px', borderRadius: 8, background: '#111827', color: 'white' }}>Starten</button>
+    </Page>
+  );
+}
+

resources/js/guest/pages/SettingsPage.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { Page } from './_util';
+
+export default function SettingsPage() {
+  return (
+    <Page title="Einstellungen">
+      <ul>
+        <li>Sprache</li>
+        <li>Theme</li>
+        <li>Cache leeren</li>
+        <li>Rechtliches</li>
+      </ul>
+    </Page>
+  );
+}
+

resources/js/guest/pages/SlideshowPage.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Page } from './_util';
+
+export default function SlideshowPage() {
+  return (
+    <Page title="Slideshow">
+      <p>Auto-advancing gallery placeholder.</p>
+    </Page>
+  );
+}
+

resources/js/guest/pages/TaskDetailPage.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Page } from './_util';
+
+export default function TaskDetailPage() {
+  return (
+    <Page title="Aufgaben-Detail">
+      <p>Aufgabenbeschreibung, Dauer, Gruppengröße.</p>
+    </Page>
+  );
+}
+

resources/js/guest/pages/TaskPickerPage.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Page } from './_util';
+
+export default function TaskPickerPage() {
+  return (
+    <Page title="Stimmung wählen / Aufgabe ziehen">
+      <p>Stubs for emotion grid and random task.</p>
+    </Page>
+  );
+}
+

resources/js/guest/pages/UploadPage.tsx

@@ -0,0 +1,99 @@
+import React from 'react';
+import { Page } from './_util';
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+import { useParams } from 'react-router-dom';
+import { getDeviceId } from '../lib/device';
+import { compressPhoto, formatBytes } from '../lib/image';
+import { useUploadQueue } from '../queue/hooks';
+import React from 'react';
+
+type Item = { file: File; out?: File; progress: number; done?: boolean; error?: string; id?: number };
+
+export default function UploadPage() {
+  const { slug } = useParams();
+  const [items, setItems] = React.useState<Item[]>([]);
+  const queue = useUploadQueue();
+  const [progressMap, setProgressMap] = React.useState<Record<number, number>>({});
+
+  React.useEffect(() => {
+    const onProg = (e: any) => {
+      const { id, progress } = e.detail || {};
+      if (typeof id === 'number') setProgressMap((m) => ({ ...m, [id]: progress }));
+    };
+    window.addEventListener('queue-progress', onProg);
+    return () => window.removeEventListener('queue-progress', onProg);
+  }, []);
+
+  async function onPick(e: React.ChangeEvent<HTMLInputElement>) {
+    const files = Array.from(e.target.files ?? []).slice(0, 10);
+    const results: Item[] = [];
+    for (const f of files) {
+      try {
+        const out = await compressPhoto(f, { targetBytes: 1_500_000, maxEdge: 2560, qualityStart: 0.85 });
+        results.push({ file: f, out, progress: 0 });
+      } catch (err: any) {
+        results.push({ file: f, progress: 0, error: err?.message || 'Komprimierung fehlgeschlagen' });
+      }
+    }
+    setItems(results);
+  }
+
+  async function startUpload() {
+    // Enqueue items for offline-friendly processing
+    for (const it of items) {
+      await queue.add({ slug: slug!, fileName: it.out?.name ?? it.file.name, blob: it.out ?? it.file });
+    }
+    setItems([]);
+  }
+
+  return (
+    <Page title="Foto aufnehmen/hochladen">
+      <Input type="file" accept="image/*" multiple capture="environment" onChange={onPick} />
+      <div className="h-3" />
+      <Button onClick={startUpload} disabled={items.length === 0}>Hochladen</Button>
+      <div className="mt-4 space-y-2">
+        {items.map((it, i) => (
+          <div key={i} className="rounded border p-2 text-sm">
+            <div className="flex items-center justify-between">
+              <div className="truncate">{it.file.name}</div>
+              <div className="text-xs text-muted-foreground">
+                {formatBytes(it.out?.size ?? it.file.size)}
+              </div>
+            </div>
+            {it.done && <div className="text-xs text-muted-foreground">Fertig</div>}
+            {it.error && <div className="text-xs text-red-500">{it.error}</div>}
+          </div>
+        ))}
+      </div>
+      <div className="mt-6">
+        <div className="mb-2 text-sm font-medium">Warteschlange</div>
+        {queue.loading ? (
+          <div className="text-sm text-muted-foreground">Lade…</div>
+        ) : queue.items.length === 0 ? (
+          <div className="text-sm text-muted-foreground">Keine offenen Uploads.</div>
+        ) : (
+          <div className="space-y-2">
+            {queue.items.map((q) => (
+              <div key={q.id} className="rounded border p-2 text-sm">
+                <div className="flex items-center justify-between">
+                  <div className="truncate">{q.fileName}</div>
+                  <div className="text-xs text-muted-foreground">{q.status}{q.status==='uploading' && typeof q.id==='number' ? ` • ${progressMap[q.id] ?? 0}%` : ''}</div>
+                </div>
+                {q.status === 'uploading' && typeof q.id==='number' && (
+                  <div className="mt-2 h-2 w-full rounded bg-gray-200 dark:bg-gray-700">
+                    <div className="h-2 rounded bg-emerald-500" style={{ width: `${progressMap[q.id] ?? 0}%` }} />
+                  </div>
+                )}
+              </div>
+            ))}
+            <div className="flex gap-2">
+              <Button variant="secondary" onClick={queue.retryAll}>Erneut versuchen</Button>
+              <Button variant="secondary" onClick={queue.clearFinished}>Erledigte entfernen</Button>
+            </div>
+          </div>
+        )}
+      </div>
+    </Page>
+  );
+}

resources/js/guest/pages/UploadQueuePage.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Page } from './_util';
+
+export default function UploadQueuePage() {
+  return (
+    <Page title="Uploads">
+      <p>Queue with progress/retry; background sync toggle.</p>
+    </Page>
+  );
+}
+

resources/js/guest/pages/_util.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+
+export function Page({ title, children }: { title: string; children?: React.ReactNode }) {
+  return (
+    <div style={{ maxWidth: 720, margin: '0 auto', padding: 16 }}>
+      <h1 style={{ fontSize: 20, fontWeight: 600, marginBottom: 12 }}>{title}</h1>
+      <div>{children}</div>
+    </div>
+  );
+}
+

resources/js/guest/polling/usePollGalleryDelta.ts

@@ -0,0 +1,42 @@
+import { useEffect, useRef, useState } from 'react';
+
+type Photo = { id: number; file_path?: string; thumbnail_path?: string; created_at?: string };
+
+export function usePollGalleryDelta(slug: string) {
+  const [photos, setPhotos] = useState<Photo[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [newCount, setNewCount] = useState(0);
+  const latestAt = useRef<string | null>(null);
+  const timer = useRef<number | null>(null);
+
+  async function fetchDelta() {
+    const qs = latestAt.current ? `?since=${encodeURIComponent(latestAt.current)}` : '';
+    const res = await fetch(`/api/v1/events/${encodeURIComponent(slug)}/photos${qs}`, {
+      headers: { 'Cache-Control': 'no-store' },
+    });
+    if (res.status === 304) return;
+    const json = await res.json();
+    if (Array.isArray(json.data)) {
+      const added = json.data.length;
+      const merged = latestAt.current ? [...json.data, ...photos] : json.data;
+      if (added > 0 && latestAt.current) setNewCount((c) => c + added);
+      setPhotos(merged);
+    }
+    if (json.latest_photo_at) latestAt.current = json.latest_photo_at;
+    setLoading(false);
+  }
+
+  useEffect(() => {
+    setLoading(true);
+    latestAt.current = null;
+    setPhotos([]);
+    fetchDelta();
+    timer.current = window.setInterval(fetchDelta, 30_000);
+    return () => {
+      if (timer.current) window.clearInterval(timer.current);
+    };
+  }, [slug]);
+
+  function acknowledgeNew() { setNewCount(0); }
+  return { loading, photos, newCount, acknowledgeNew };
+}

resources/js/guest/polling/usePollStats.ts

@@ -0,0 +1,39 @@
+import { useEffect, useRef, useState } from 'react';
+
+type Stats = { onlineGuests: number; tasksSolved: number; latestPhotoAt?: string };
+
+export function usePollStats(slug: string) {
+  const [data, setData] = useState<Stats | null>(null);
+  const [loading, setLoading] = useState(true);
+  const timer = useRef<number | null>(null);
+  const visible = typeof document !== 'undefined' ? document.visibilityState === 'visible' : true;
+
+  async function fetchOnce() {
+    try {
+      const res = await fetch(`/api/v1/events/${encodeURIComponent(slug)}/stats`, {
+        headers: { 'Cache-Control': 'no-store' },
+      });
+      if (res.status === 304) return;
+      const json = await res.json();
+      setData({ onlineGuests: json.online_guests ?? 0, tasksSolved: json.tasks_solved ?? 0, latestPhotoAt: json.latest_photo_at });
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  useEffect(() => {
+    setLoading(true);
+    fetchOnce();
+    function schedule() {
+      if (!visible) return;
+      timer.current = window.setInterval(fetchOnce, 10_000);
+    }
+    schedule();
+    return () => {
+      if (timer.current) window.clearInterval(timer.current);
+    };
+  }, [slug, visible]);
+
+  return { loading, onlineGuests: data?.onlineGuests ?? 0, tasksSolved: data?.tasksSolved ?? 0 };
+}
+

resources/js/guest/queue/hooks.ts

@@ -0,0 +1,40 @@
+import React from 'react';
+import { enqueue, list, processQueue, clearDone, type QueueItem } from './queue';
+
+export function useUploadQueue() {
+  const [items, setItems] = React.useState<QueueItem[]>([]);
+  const [loading, setLoading] = React.useState(true);
+
+  const refresh = React.useCallback(async () => {
+    setLoading(true);
+    const all = await list();
+    setItems(all);
+    setLoading(false);
+  }, []);
+
+  const add = React.useCallback(async (it: Parameters<typeof enqueue>[0]) => {
+    await enqueue(it);
+    await refresh();
+    await processQueue();
+  }, [refresh]);
+
+  const retryAll = React.useCallback(async () => {
+    await processQueue();
+    await refresh();
+  }, [refresh]);
+
+  const clearFinished = React.useCallback(async () => {
+    await clearDone();
+    await refresh();
+  }, [refresh]);
+
+  React.useEffect(() => {
+    refresh();
+    const online = () => processQueue().then(refresh);
+    window.addEventListener('online', online);
+    return () => window.removeEventListener('online', online);
+  }, [refresh]);
+
+  return { items, loading, refresh, add, retryAll, clearFinished } as const;
+}
+

resources/js/guest/queue/idb.ts

@@ -0,0 +1,34 @@
+export type TxMode = 'readonly' | 'readwrite';
+
+export function openDB(): Promise<IDBDatabase> {
+  return new Promise((resolve, reject) => {
+    const req = indexedDB.open('guest-upload-queue', 1);
+    req.onupgradeneeded = () => {
+      const db = req.result;
+      if (!db.objectStoreNames.contains('items')) {
+        const store = db.createObjectStore('items', { keyPath: 'id', autoIncrement: true });
+        store.createIndex('status', 'status', { unique: false });
+        store.createIndex('nextAttemptAt', 'nextAttemptAt', { unique: false });
+      }
+    };
+    req.onsuccess = () => resolve(req.result);
+    req.onerror = () => reject(req.error);
+  });
+}
+
+export async function withStore<T>(mode: TxMode, fn: (store: IDBObjectStore) => void | Promise<T>): Promise<T> {
+  const db = await openDB();
+  return new Promise((resolve, reject) => {
+    const tx = db.transaction('items', mode);
+    const store = tx.objectStore('items');
+    let result: any;
+    const wrap = async () => {
+      try { result = await fn(store); } catch (e) { reject(e); }
+    };
+    wrap();
+    tx.oncomplete = () => resolve(result);
+    tx.onerror = () => reject(tx.error);
+    tx.onabort = () => reject(tx.error);
+  });
+}
+

resources/js/guest/queue/notify.ts

@@ -0,0 +1,11 @@
+export function notify(text: string, type: 'success'|'error') {
+  // Lazy import to avoid cycle
+  import('../components/ToastHost').then(({ useToast }) => {
+    try {
+      // This only works inside React tree; for SW-triggered, we fallback
+      const evt = new CustomEvent('guest-toast', { detail: { text, type } });
+      window.dispatchEvent(evt);
+    } catch {}
+  });
+}
+

resources/js/guest/queue/queue.ts

@@ -0,0 +1,113 @@
+import { withStore } from './idb';
+import { getDeviceId } from '../lib/device';
+import { createUpload } from './xhr';
+import { notify } from './notify';
+
+export type QueueItem = {
+  id?: number;
+  slug: string;
+  fileName: string;
+  blob: Blob;
+  emotion_id?: number | null;
+  task_id?: number | null;
+  status: 'pending' | 'uploading' | 'done' | 'error';
+  retries: number;
+  nextAttemptAt?: number | null;
+  createdAt: number;
+  photoId?: number;
+};
+
+let processing = false;
+
+export async function enqueue(item: Omit<QueueItem, 'id' | 'status' | 'retries' | 'createdAt'>) {
+  const now = Date.now();
+  await withStore('readwrite', (store) => {
+    store.add({ ...item, status: 'pending', retries: 0, createdAt: now });
+  });
+  // Register background sync if available
+  if ('serviceWorker' in navigator && 'SyncManager' in window) {
+    try { const reg = await navigator.serviceWorker.ready; await reg.sync.register('upload-queue'); } catch {}
+  }
+}
+
+export async function list(): Promise<QueueItem[]> {
+  return withStore('readonly', (store) => new Promise((resolve) => {
+    const req = store.getAll();
+    req.onsuccess = () => resolve(req.result as QueueItem[]);
+  }));
+}
+
+export async function clearDone() {
+  const items = await list();
+  await withStore('readwrite', (store) => {
+    for (const it of items) {
+      if (it.status === 'done') store.delete(it.id!);
+    }
+  });
+}
+
+export async function processQueue() {
+  if (processing) return; processing = true;
+  try {
+    const now = Date.now();
+    let items = await list();
+    for (const it of items) {
+      if (it.status === 'done') continue;
+      if (it.nextAttemptAt && it.nextAttemptAt > now) continue;
+      await markStatus(it.id!, 'uploading');
+      const ok = await attemptUpload(it);
+      if (ok) {
+        await markStatus(it.id!, 'done');
+      } else {
+        const retries = (it.retries ?? 0) + 1;
+        const backoffSec = Math.min(60, Math.pow(2, Math.min(retries, 5))); // 2,4,8,16,32,60
+        await update(it.id!, { status: 'error', retries, nextAttemptAt: Date.now() + backoffSec * 1000 });
+      }
+    }
+  } finally {
+    processing = false;
+  }
+}
+
+async function attemptUpload(it: QueueItem): Promise<boolean> {
+  if (!navigator.onLine) return false;
+  try {
+    const json = await createUpload(
+      `/api/v1/events/${encodeURIComponent(it.slug)}/photos`,
+      it,
+      getDeviceId(),
+      (pct) => {
+        try {
+          window.dispatchEvent(new CustomEvent('queue-progress', { detail: { id: it.id, progress: pct } }));
+        } catch {}
+      }
+    );
+    // mark my-photo-ids for "Meine"
+    try {
+      const raw = localStorage.getItem('my-photo-ids');
+      const arr: number[] = raw ? JSON.parse(raw) : [];
+      if (json.id && !arr.includes(json.id)) localStorage.setItem('my-photo-ids', JSON.stringify([json.id, ...arr]));
+    } catch {}
+    notify('Upload erfolgreich', 'success');
+    return true;
+  } catch {
+    notify('Upload fehlgeschlagen', 'error');
+    return false;
+  }
+}
+
+async function markStatus(id: number, status: QueueItem['status']) {
+  await update(id, { status });
+}
+
+async function update(id: number, patch: Partial<QueueItem>) {
+  await withStore('readwrite', (store) => new Promise<void>((resolve, reject) => {
+    const getReq = store.get(id);
+    getReq.onsuccess = () => {
+      const val = getReq.result as QueueItem;
+      store.put({ ...val, ...patch, id });
+      resolve();
+    };
+    getReq.onerror = () => reject(getReq.error);
+  }));
+}

resources/js/guest/queue/xhr.ts

@@ -0,0 +1,33 @@
+import type { QueueItem } from './queue';
+
+export async function createUpload(
+  url: string,
+  it: QueueItem,
+  deviceId: string,
+  onProgress?: (percent: number) => void
+): Promise<any> {
+  return new Promise((resolve, reject) => {
+    const xhr = new XMLHttpRequest();
+    xhr.open('POST', url, true);
+    xhr.setRequestHeader('X-Device-Id', deviceId);
+    const form = new FormData();
+    form.append('photo', it.blob, it.fileName);
+    if (it.emotion_id) form.append('emotion_id', String(it.emotion_id));
+    if (it.task_id) form.append('task_id', String(it.task_id));
+    xhr.upload.onprogress = (ev) => {
+      if (onProgress && ev.lengthComputable) {
+        const pct = Math.min(100, Math.round((ev.loaded / ev.total) * 100));
+        onProgress(pct);
+      }
+    };
+    xhr.onload = () => {
+      if (xhr.status >= 200 && xhr.status < 300) {
+        try { resolve(JSON.parse(xhr.responseText)); } catch { resolve({}); }
+      } else {
+        reject(new Error('upload failed'));
+      }
+    };
+    xhr.onerror = () => reject(new Error('network error'));
+    xhr.send(form);
+  });
+}

resources/js/guest/router.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import { createBrowserRouter, Outlet, useParams } from 'react-router-dom';
+import Header from './components/Header';
+import BottomNav from './components/BottomNav';
+import LandingPage from './pages/LandingPage';
+import ProfileSetupPage from './pages/ProfileSetupPage';
+import HomePage from './pages/HomePage';
+import TaskPickerPage from './pages/TaskPickerPage';
+import TaskDetailPage from './pages/TaskDetailPage';
+import UploadPage from './pages/UploadPage';
+import UploadQueuePage from './pages/UploadQueuePage';
+import GalleryPage from './pages/GalleryPage';
+import PhotoLightbox from './pages/PhotoLightbox';
+import AchievementsPage from './pages/AchievementsPage';
+import SlideshowPage from './pages/SlideshowPage';
+import SettingsPage from './pages/SettingsPage';
+import LegalPage from './pages/LegalPage';
+import NotFoundPage from './pages/NotFoundPage';
+
+function HomeLayout() {
+  const { slug } = useParams();
+  return (
+    <div className="pb-16">
+      <Header title={slug ? `Event: ${slug}` : 'Fotospiel'} />
+      <div className="px-4 py-3">
+        <Outlet />
+      </div>
+      <BottomNav />
+    </div>
+  );
+}
+
+export const router = createBrowserRouter([
+  { path: '/', element: <SimpleLayout title="Fotospiel"><LandingPage /></SimpleLayout> },
+  { path: '/setup', element: <SimpleLayout title="Profil"><ProfileSetupPage /></SimpleLayout> },
+  {
+    path: '/e/:slug',
+    element: <HomeLayout />,
+    children: [
+      { index: true, element: <HomePage /> },
+      { path: 'tasks', element: <TaskPickerPage /> },
+      { path: 'tasks/:taskId', element: <TaskDetailPage /> },
+      { path: 'upload', element: <UploadPage /> },
+      { path: 'queue', element: <UploadQueuePage /> },
+      { path: 'gallery', element: <GalleryPage /> },
+      { path: 'photo/:photoId', element: <PhotoLightbox /> },
+      { path: 'achievements', element: <AchievementsPage /> },
+      { path: 'slideshow', element: <SlideshowPage /> },
+    ],
+  },
+  { path: '/settings', element: <SimpleLayout title="Einstellungen"><SettingsPage /></SimpleLayout> },
+  { path: '/legal/:page', element: <SimpleLayout title="Rechtliches"><LegalPage /></SimpleLayout> },
+  { path: '*', element: <NotFoundPage /> },
+]);
+
+function SimpleLayout({ title, children }: { title: string; children: React.ReactNode }) {
+  return (
+    <div className="pb-16">
+      <Header title={title} />
+      <div className="px-4 py-3">
+        {children}
+      </div>
+      <BottomNav />
+    </div>
+  );
+}

resources/js/guest/services/photosApi.ts

@@ -0,0 +1,15 @@
+import { getDeviceId } from '../lib/device';
+
+export async function likePhoto(id: number): Promise<number> {
+  const res = await fetch(`/api/v1/photos/${id}/like`, {
+    method: 'POST',
+    headers: {
+      'X-Device-Id': getDeviceId(),
+      'Content-Type': 'application/json',
+    },
+  });
+  if (!res.ok) throw new Error('like failed');
+  const json = await res.json();
+  return json.likes_count ?? 0;
+}
+

resources/js/hooks/use-appearance.tsx

@@ -0,0 +1,74 @@
+import { useCallback, useEffect, useState } from 'react';
+
+export type Appearance = 'light' | 'dark' | 'system';
+
+const prefersDark = () => {
+    if (typeof window === 'undefined') {
+        return false;
+    }
+
+    return window.matchMedia('(prefers-color-scheme: dark)').matches;
+};
+
+const setCookie = (name: string, value: string, days = 365) => {
+    if (typeof document === 'undefined') {
+        return;
+    }
+
+    const maxAge = days * 24 * 60 * 60;
+    document.cookie = `${name}=${value};path=/;max-age=${maxAge};SameSite=Lax`;
+};
+
+const applyTheme = (appearance: Appearance) => {
+    const isDark = appearance === 'dark' || (appearance === 'system' && prefersDark());
+
+    document.documentElement.classList.toggle('dark', isDark);
+    document.documentElement.style.colorScheme = isDark ? 'dark' : 'light';
+};
+
+const mediaQuery = () => {
+    if (typeof window === 'undefined') {
+        return null;
+    }
+
+    return window.matchMedia('(prefers-color-scheme: dark)');
+};
+
+const handleSystemThemeChange = () => {
+    const currentAppearance = localStorage.getItem('appearance') as Appearance;
+    applyTheme(currentAppearance || 'system');
+};
+
+export function initializeTheme() {
+    const savedAppearance = (localStorage.getItem('appearance') as Appearance) || 'system';
+
+    applyTheme(savedAppearance);
+
+    // Add the event listener for system theme changes...
+    mediaQuery()?.addEventListener('change', handleSystemThemeChange);
+}
+
+export function useAppearance() {
+    const [appearance, setAppearance] = useState<Appearance>('system');
+
+    const updateAppearance = useCallback((mode: Appearance) => {
+        setAppearance(mode);
+
+        // Store in localStorage for client-side persistence...
+        localStorage.setItem('appearance', mode);
+
+        // Store in cookie for SSR...
+        setCookie('appearance', mode);
+
+        applyTheme(mode);
+    }, []);
+
+    useEffect(() => {
+        const savedAppearance = localStorage.getItem('appearance') as Appearance | null;
+        updateAppearance(savedAppearance || 'system');
+
+        return () => mediaQuery()?.removeEventListener('change', handleSystemThemeChange);
+    }, [updateAppearance]);
+
+    return { appearance, updateAppearance } as const;
+}

resources/js/hooks/use-initials.tsx

@@ -0,0 +1,15 @@
+import { useCallback } from 'react';
+
+export function useInitials() {
+    return useCallback((fullName: string): string => {
+        const names = fullName.trim().split(' ');
+
+        if (names.length === 0) return '';
+        if (names.length === 1) return names[0].charAt(0).toUpperCase();
+
+        const firstInitial = names[0].charAt(0);
+        const lastInitial = names[names.length - 1].charAt(0);
+
+        return `${firstInitial}${lastInitial}`.toUpperCase();
+    }, []);
+}

resources/js/hooks/use-mobile-navigation.ts

@@ -0,0 +1,8 @@
+import { useCallback } from 'react';
+
+export function useMobileNavigation() {
+    return useCallback(() => {
+        // Remove pointer-events style from body...
+        document.body.style.removeProperty('pointer-events');
+    }, []);
+}

resources/js/hooks/use-mobile.tsx

@@ -0,0 +1,22 @@
+import { useEffect, useState } from 'react';
+
+const MOBILE_BREAKPOINT = 768;
+
+export function useIsMobile() {
+    const [isMobile, setIsMobile] = useState<boolean>();
+
+    useEffect(() => {
+        const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+
+        const onChange = () => {
+            setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+        };
+
+        mql.addEventListener('change', onChange);
+        setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+
+        return () => mql.removeEventListener('change', onChange);
+    }, []);
+
+    return !!isMobile;
+}

resources/js/layouts/app-layout.tsx

@@ -0,0 +1,14 @@
+import AppLayoutTemplate from '@/layouts/app/app-sidebar-layout';
+import { type BreadcrumbItem } from '@/types';
+import { type ReactNode } from 'react';
+
+interface AppLayoutProps {
+    children: ReactNode;
+    breadcrumbs?: BreadcrumbItem[];
+}
+
+export default ({ children, breadcrumbs, ...props }: AppLayoutProps) => (
+    <AppLayoutTemplate breadcrumbs={breadcrumbs} {...props}>
+        {children}
+    </AppLayoutTemplate>
+);

resources/js/layouts/app/app-header-layout.tsx

@@ -0,0 +1,14 @@
+import { AppContent } from '@/components/app-content';
+import { AppHeader } from '@/components/app-header';
+import { AppShell } from '@/components/app-shell';
+import { type BreadcrumbItem } from '@/types';
+import type { PropsWithChildren } from 'react';
+
+export default function AppHeaderLayout({ children, breadcrumbs }: PropsWithChildren<{ breadcrumbs?: BreadcrumbItem[] }>) {
+    return (
+        <AppShell>
+            <AppHeader breadcrumbs={breadcrumbs} />
+            <AppContent>{children}</AppContent>
+        </AppShell>
+    );
+}

resources/js/layouts/app/app-sidebar-layout.tsx

@@ -0,0 +1,18 @@
+import { AppContent } from '@/components/app-content';
+import { AppShell } from '@/components/app-shell';
+import { AppSidebar } from '@/components/app-sidebar';
+import { AppSidebarHeader } from '@/components/app-sidebar-header';
+import { type BreadcrumbItem } from '@/types';
+import { type PropsWithChildren } from 'react';
+
+export default function AppSidebarLayout({ children, breadcrumbs = [] }: PropsWithChildren<{ breadcrumbs?: BreadcrumbItem[] }>) {
+    return (
+        <AppShell variant="sidebar">
+            <AppSidebar />
+            <AppContent variant="sidebar" className="overflow-x-hidden">
+                <AppSidebarHeader breadcrumbs={breadcrumbs} />
+                {children}
+            </AppContent>
+        </AppShell>
+    );
+}

resources/js/layouts/auth-layout.tsx

@@ -0,0 +1,9 @@
+import AuthLayoutTemplate from '@/layouts/auth/auth-simple-layout';
+
+export default function AuthLayout({ children, title, description, ...props }: { children: React.ReactNode; title: string; description: string }) {
+    return (
+        <AuthLayoutTemplate title={title} description={description} {...props}>
+            {children}
+        </AuthLayoutTemplate>
+    );
+}

resources/js/layouts/auth/auth-card-layout.tsx

@@ -0,0 +1,37 @@
+import AppLogoIcon from '@/components/app-logo-icon';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { home } from '@/routes';
+import { Link } from '@inertiajs/react';
+import { type PropsWithChildren } from 'react';
+
+export default function AuthCardLayout({
+    children,
+    title,
+    description,
+}: PropsWithChildren<{
+    name?: string;
+    title?: string;
+    description?: string;
+}>) {
+    return (
+        <div className="flex min-h-svh flex-col items-center justify-center gap-6 bg-muted p-6 md:p-10">
+            <div className="flex w-full max-w-md flex-col gap-6">
+                <Link href={home()} className="flex items-center gap-2 self-center font-medium">
+                    <div className="flex h-9 w-9 items-center justify-center">
+                        <AppLogoIcon className="size-9 fill-current text-black dark:text-white" />
+                    </div>
+                </Link>
+
+                <div className="flex flex-col gap-6">
+                    <Card className="rounded-xl">
+                        <CardHeader className="px-10 pt-8 pb-0 text-center">
+                            <CardTitle className="text-xl">{title}</CardTitle>
+                            <CardDescription>{description}</CardDescription>
+                        </CardHeader>
+                        <CardContent className="px-10 py-8">{children}</CardContent>
+                    </Card>
+                </div>
+            </div>
+        </div>
+    );
+}

resources/js/layouts/auth/auth-simple-layout.tsx

@@ -0,0 +1,35 @@
+import AppLogoIcon from '@/components/app-logo-icon';
+import { home } from '@/routes';
+import { Link } from '@inertiajs/react';
+import { type PropsWithChildren } from 'react';
+
+interface AuthLayoutProps {
+    name?: string;
+    title?: string;
+    description?: string;
+}
+
+export default function AuthSimpleLayout({ children, title, description }: PropsWithChildren<AuthLayoutProps>) {
+    return (
+        <div className="flex min-h-svh flex-col items-center justify-center gap-6 bg-background p-6 md:p-10">
+            <div className="w-full max-w-sm">
+                <div className="flex flex-col gap-8">
+                    <div className="flex flex-col items-center gap-4">
+                        <Link href={home()} className="flex flex-col items-center gap-2 font-medium">
+                            <div className="mb-1 flex h-9 w-9 items-center justify-center rounded-md">
+                                <AppLogoIcon className="size-9 fill-current text-[var(--foreground)] dark:text-white" />
+                            </div>
+                            <span className="sr-only">{title}</span>
+                        </Link>
+
+                        <div className="space-y-2 text-center">
+                            <h1 className="text-xl font-medium">{title}</h1>
+                            <p className="text-center text-sm text-muted-foreground">{description}</p>
+                        </div>
+                    </div>
+                    {children}
+                </div>
+            </div>
+        </div>
+    );
+}

resources/js/layouts/auth/auth-split-layout.tsx

@@ -0,0 +1,46 @@
+import AppLogoIcon from '@/components/app-logo-icon';
+import { home } from '@/routes';
+import { type SharedData } from '@/types';
+import { Link, usePage } from '@inertiajs/react';
+import { type PropsWithChildren } from 'react';
+
+interface AuthLayoutProps {
+    title?: string;
+    description?: string;
+}
+
+export default function AuthSplitLayout({ children, title, description }: PropsWithChildren<AuthLayoutProps>) {
+    const { name, quote } = usePage<SharedData>().props;
+
+    return (
+        <div className="relative grid h-dvh flex-col items-center justify-center px-8 sm:px-0 lg:max-w-none lg:grid-cols-2 lg:px-0">
+            <div className="relative hidden h-full flex-col bg-muted p-10 text-white lg:flex dark:border-r">
+                <div className="absolute inset-0 bg-zinc-900" />
+                <Link href={home()} className="relative z-20 flex items-center text-lg font-medium">
+                    <AppLogoIcon className="mr-2 size-8 fill-current text-white" />
+                    {name}
+                </Link>
+                {quote && (
+                    <div className="relative z-20 mt-auto">
+                        <blockquote className="space-y-2">
+                            <p className="text-lg">&ldquo;{quote.message}&rdquo;</p>
+                            <footer className="text-sm text-neutral-300">{quote.author}</footer>
+                        </blockquote>
+                    </div>
+                )}
+            </div>
+            <div className="w-full lg:p-8">
+                <div className="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]">
+                    <Link href={home()} className="relative z-20 flex items-center justify-center lg:hidden">
+                        <AppLogoIcon className="h-10 fill-current text-black sm:h-12" />
+                    </Link>
+                    <div className="flex flex-col items-start gap-2 text-left sm:items-center sm:text-center">
+                        <h1 className="text-xl font-medium">{title}</h1>
+                        <p className="text-sm text-balance text-muted-foreground">{description}</p>
+                    </div>
+                    {children}
+                </div>
+            </div>
+        </div>
+    );
+}

resources/js/layouts/settings/layout.tsx

@@ -0,0 +1,72 @@
+import Heading from '@/components/heading';
+import { Button } from '@/components/ui/button';
+import { Separator } from '@/components/ui/separator';
+import { cn } from '@/lib/utils';
+import { appearance } from '@/routes';
+import { edit as editPassword } from '@/routes/password';
+import { edit } from '@/routes/profile';
+import { type NavItem } from '@/types';
+import { Link } from '@inertiajs/react';
+import { type PropsWithChildren } from 'react';
+
+const sidebarNavItems: NavItem[] = [
+    {
+        title: 'Profile',
+        href: edit(),
+        icon: null,
+    },
+    {
+        title: 'Password',
+        href: editPassword(),
+        icon: null,
+    },
+    {
+        title: 'Appearance',
+        href: appearance(),
+        icon: null,
+    },
+];
+
+export default function SettingsLayout({ children }: PropsWithChildren) {
+    // When server-side rendering, we only render the layout on the client...
+    if (typeof window === 'undefined') {
+        return null;
+    }
+
+    const currentPath = window.location.pathname;
+
+    return (
+        <div className="px-4 py-6">
+            <Heading title="Settings" description="Manage your profile and account settings" />
+
+            <div className="flex flex-col lg:flex-row lg:space-x-12">
+                <aside className="w-full max-w-xl lg:w-48">
+                    <nav className="flex flex-col space-y-1 space-x-0">
+                        {sidebarNavItems.map((item, index) => (
+                            <Button
+                                key={`${typeof item.href === 'string' ? item.href : item.href.url}-${index}`}
+                                size="sm"
+                                variant="ghost"
+                                asChild
+                                className={cn('w-full justify-start', {
+                                    'bg-muted': currentPath === (typeof item.href === 'string' ? item.href : item.href.url),
+                                })}
+                            >
+                                <Link href={item.href} prefetch>
+                                    {item.icon && <item.icon className="h-4 w-4" />}
+                                    {item.title}
+                                </Link>
+                            </Button>
+                        ))}
+                    </nav>
+                </aside>
+
+                <Separator className="my-6 lg:hidden" />
+
+                <div className="flex-1 md:max-w-2xl">
+                    <section className="max-w-xl space-y-12">{children}</section>
+                </div>
+            </div>
+        </div>
+    );
+}

resources/js/lib/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+    return twMerge(clsx(inputs));
+}

resources/js/pages/auth/confirm-password.tsx

@@ -0,0 +1,39 @@
+import ConfirmablePasswordController from '@/actions/App/Http/Controllers/Auth/ConfirmablePasswordController';
+import InputError from '@/components/input-error';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import AuthLayout from '@/layouts/auth-layout';
+import { Form, Head } from '@inertiajs/react';
+import { LoaderCircle } from 'lucide-react';
+
+export default function ConfirmPassword() {
+    return (
+        <AuthLayout
+            title="Confirm your password"
+            description="This is a secure area of the application. Please confirm your password before continuing."
+        >
+            <Head title="Confirm password" />
+
+            <Form {...ConfirmablePasswordController.store.form()} resetOnSuccess={['password']}>
+                {({ processing, errors }) => (
+                    <div className="space-y-6">
+                        <div className="grid gap-2">
+                            <Label htmlFor="password">Password</Label>
+                            <Input id="password" type="password" name="password" placeholder="Password" autoComplete="current-password" autoFocus />
+
+                            <InputError message={errors.password} />
+                        </div>
+
+                        <div className="flex items-center">
+                            <Button className="w-full" disabled={processing}>
+                                {processing && <LoaderCircle className="h-4 w-4 animate-spin" />}
+                                Confirm password
+                            </Button>
+                        </div>
+                    </div>
+                )}
+            </Form>
+        </AuthLayout>
+    );
+}

resources/js/pages/auth/forgot-password.tsx

@@ -0,0 +1,49 @@
+// Components
+import PasswordResetLinkController from '@/actions/App/Http/Controllers/Auth/PasswordResetLinkController';
+import { login } from '@/routes';
+import { Form, Head } from '@inertiajs/react';
+import { LoaderCircle } from 'lucide-react';
+
+import InputError from '@/components/input-error';
+import TextLink from '@/components/text-link';
+import { Button } from '@/components/ui/button';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import AuthLayout from '@/layouts/auth-layout';
+
+export default function ForgotPassword({ status }: { status?: string }) {
+    return (
+        <AuthLayout title="Forgot password" description="Enter your email to receive a password reset link">
+            <Head title="Forgot password" />
+
+            {status && <div className="mb-4 text-center text-sm font-medium text-green-600">{status}</div>}
+
+            <div className="space-y-6">
+                <Form {...PasswordResetLinkController.store.form()}>
+                    {({ processing, errors }) => (
+                        <>
+                            <div className="grid gap-2">
+                                <Label htmlFor="email">Email address</Label>
+                                <Input id="email" type="email" name="email" autoComplete="off" autoFocus placeholder="email@example.com" />
+
+                                <InputError message={errors.email} />
+                            </div>
+
+                            <div className="my-6 flex items-center justify-start">
+                                <Button className="w-full" disabled={processing}>
+                                    {processing && <LoaderCircle className="h-4 w-4 animate-spin" />}
+                                    Email password reset link
+                                </Button>
+                            </div>
+                        </>
+                    )}
+                </Form>
+
+                <div className="space-x-1 text-center text-sm text-muted-foreground">
+                    <span>Or, return to</span>
+                    <TextLink href={login()}>log in</TextLink>
+                </div>
+            </div>
+        </AuthLayout>
+    );
+}