Bring the codebase in line with CLAUDE.md conventions

- Convert getRouter, OrderingPage, and OrderStatusRoute from function
  declarations to arrow functions
- Migrate header-user.tsx off raw Tailwind classes onto a co-located
  SCSS module, and remove Tailwind entirely (deps, Vite plugin,
  styles.css) since it was the only consumer and duplicated the
  documented SCSS Modules system
- Fix CLAUDE.md's stale ~/ alias example and structure diagram to
  match the project's actual #/ and @/ aliases and directories

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

src/integrations/better-auth/header-user.module.scss

@@ -0,0 +1,52 @@
+@use '../../styles/variables' as *;
+
+.avatar {
+  height: 2rem;
+  width: 2rem;
+  background: $color-surface;
+}
+
+.avatarPulse {
+  animation: pulse 1.5s ease-in-out infinite;
+}
+
+.avatarInitial {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: $color-text-muted;
+}
+
+.session {
+  display: flex;
+  align-items: center;
+  gap: $space-2;
+}
+
+.signOut {
+  flex: 1;
+  height: 2.25rem;
+  padding: 0 $space-3;
+  font-size: 0.875rem;
+  font-weight: 500;
+  background: $color-background;
+  color: $color-text;
+  border: 1px solid $color-border;
+  transition: background-color 0.15s ease;
+
+  &:hover {
+    background: $color-surface;
+  }
+}
+
+@keyframes pulse {
+  0%,
+  100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+}

src/integrations/better-auth/header-user.tsx

@@ -1,31 +1,29 @@
 import { authClient } from '#/lib/auth-client'
 
+import styles from './header-user.module.scss'
+
 const BetterAuthHeader = () => {
   const { data: session, isPending } = authClient.useSession()
 
   if (isPending) {
-    return (
-      <div className="h-8 w-8 bg-neutral-100 dark:bg-neutral-800 animate-pulse" />
-    )
+    return <div className={`${styles.avatar} ${styles.avatarPulse}`} />
   }
 
   if (session?.user) {
     return (
-      <div className="flex items-center gap-2">
+      <div className={styles.session}>
         {session.user.image ? (
-          <img src={session.user.image} alt="" className="h-8 w-8" />
+          <img src={session.user.image} alt="" className={styles.avatar} />
         ) : (
-          <div className="h-8 w-8 bg-neutral-100 dark:bg-neutral-800 flex items-center justify-center">
-            <span className="text-xs font-medium text-neutral-600 dark:text-neutral-400">
-              {session.user.name.charAt(0).toUpperCase() || 'U'}
-            </span>
+          <div className={`${styles.avatar} ${styles.avatarInitial}`}>
+            <span>{session.user.name.charAt(0).toUpperCase() || 'U'}</span>
           </div>
         )}
         <button
           onClick={() => {
             void authClient.signOut()
           }}
-          className="flex-1 h-9 px-4 text-sm font-medium bg-white dark:bg-neutral-900 text-neutral-900 dark:text-neutral-50 border border-neutral-300 dark:border-neutral-700 hover:bg-neutral-50 dark:hover:bg-neutral-800 transition-colors"
+          className={styles.signOut}
         >
           Sign out
         </button>

src/router.tsx

@@ -1,7 +1,7 @@
 import { createRouter as createTanStackRouter } from '@tanstack/react-router'
 import { routeTree } from './routeTree.gen'
 
-export function getRouter() {
+export const getRouter = () => {
   const router = createTanStackRouter({
     routeTree,
     scrollRestoration: true,

src/routes/__root.tsx

@@ -2,7 +2,6 @@ import { HeadContent, Scripts, createRootRoute } from '@tanstack/react-router'
 import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools'
 import { TanStackDevtools } from '@tanstack/react-devtools'
 
-import appCss from '../styles.css?url'
 import '../styles/globals.scss'
 
 const RootDocument = ({ children }: { children: React.ReactNode }) => (
@@ -42,12 +41,6 @@ export const Route = createRootRoute({
         title: 'Ghost Kitchen',
       },
     ],
-    links: [
-      {
-        rel: 'stylesheet',
-        href: appCss,
-      },
-    ],
   }),
   shellComponent: RootDocument,
 })

src/routes/index.tsx

@@ -9,16 +9,7 @@ import { getMenu } from '#/server/menu.ts'
 
 import styles from './index.module.scss'
 
-export const Route = createFileRoute('/')({
-  loader: async () => {
-    const brand = await getBrand()
-    const menu = await getMenu({ data: { brandId: brand.id } })
-    return { brand, menu }
-  },
-  component: OrderingPage,
-})
-
-function OrderingPage() {
+const OrderingPage = () => {
   const { brand, menu } = Route.useLoaderData()
   const navigate = useNavigate()
   const [quantities, setQuantities] = useState<Record<number, number>>({})
@@ -76,3 +67,12 @@ function OrderingPage() {
     </main>
   )
 }
+
+export const Route = createFileRoute('/')({
+  loader: async () => {
+    const brand = await getBrand()
+    const menu = await getMenu({ data: { brandId: brand.id } })
+    return { brand, menu }
+  },
+  component: OrderingPage,
+})

src/routes/orders/$orderId.tsx

@@ -6,6 +6,13 @@ import { getOrderStatus } from '#/server/orders.ts'
 
 const searchSchema = z.object({ token: z.string().optional() })
 
+const OrderStatusRoute = () => {
+  const status = Route.useLoaderData()
+  const { token } = Route.useSearch()
+
+  return <OrderStatusView status={status} guestAccessToken={token} />
+}
+
 export const Route = createFileRoute('/orders/$orderId')({
   validateSearch: (search: Record<string, unknown>) =>
     searchSchema.parse(search),
@@ -19,10 +26,3 @@ export const Route = createFileRoute('/orders/$orderId')({
     }),
   component: OrderStatusRoute,
 })
-
-function OrderStatusRoute() {
-  const status = Route.useLoaderData()
-  const { token } = Route.useSearch()
-
-  return <OrderStatusView status={status} guestAccessToken={token} />
-}

src/styles.css

@@ -1,17 +0,0 @@
-
-@import "tailwindcss";
-
-* {
-  box-sizing: border-box;
-}
-
-html,
-body,
-#app {
-  min-height: 100%;
-}
-
-body {
-  margin: 0;
-}
-