see comments

.github/workflows/ci.yml

@@ -0,0 +1,36 @@
+name: CI
+
+on:
+  pull_request:
+    branches: [dev]
+  push:
+    branches: [main]
+
+jobs:
+  ci:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: npm
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Lint
+        run: npm run lint
+
+      - name: Type check
+        run: npx tsc --noEmit
+
+      - name: Build
+        run: npm run build
+        env:
+          NEXT_PUBLIC_SUPABASE_URL: ${{ secrets.NEXT_PUBLIC_SUPABASE_URL }}
+          NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY: ${{ secrets.NEXT_PUBLIC_SUPABASE_PUBLISHABLE_KEY }}
+          SUPABASE_SECRET_KEY: ${{ secrets.SUPABASE_SECRET_KEY }}

app/admin/layout.tsx

@@ -1,3 +1,4 @@
+import { cookies } from "next/headers";
 import { SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar";
 import { verifySession } from "@/lib/supabase/dal";
 import { AppSidebar } from "@/modules/shared/ui/components/app-sidebar";
@@ -5,10 +6,11 @@ import { AppSidebar } from "@/modules/shared/ui/components/app-sidebar";
 
 export default async function AdminLayout({ children }: { children: React.ReactNode }) {
     const session = await verifySession()
-
+    const cookieStore = await cookies()
+    const defaultOpen = cookieStore.get("sidebar_state")?.value !== "false"
 
     return (
-        <SidebarProvider>
+        <SidebarProvider defaultOpen={defaultOpen}>
             <AppSidebar session={session}/>
             <div className="flex w-full flex-col">
                 <div className="flex items-center border-b border-border p-3 md:hidden">

app/client/layout.tsx

@@ -1,3 +1,4 @@
+import { cookies } from "next/headers";
 import { SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar";
 import { verifySession } from "@/lib/supabase/dal";
 import { AppSidebar } from "@/modules/shared/ui/components/app-sidebar";
@@ -5,10 +6,11 @@ import { AppSidebar } from "@/modules/shared/ui/components/app-sidebar";
 
 export default async function ClientLayout({ children }: { children: React.ReactNode }) {
     const session = await verifySession()
-
+    const cookieStore = await cookies()
+    const defaultOpen = cookieStore.get("sidebar_state")?.value !== "false"
 
     return (
-        <SidebarProvider>
+        <SidebarProvider defaultOpen={defaultOpen}>
             <AppSidebar session={session}/>
             <div className="flex w-full flex-col">
                 <div className="flex items-center border-b border-border p-3 md:hidden">

hooks/use-mobile.ts

@@ -2,18 +2,20 @@ import * as React from "react"
 
 const MOBILE_BREAKPOINT = 768
 
-export function useIsMobile() {
+function subscribe(callback: () => void) {
-  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined)
-
-  React.useEffect(() => {
   const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`)
-    const onChange = () => {
+  mql.addEventListener("change", callback)
-      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
+  return () => mql.removeEventListener("change", callback)
 }
-    mql.addEventListener("change", onChange)
-    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT)
-    return () => mql.removeEventListener("change", onChange)
-  }, [])
 
-  return !!isMobile
+function getSnapshot() {
+  return window.innerWidth < MOBILE_BREAKPOINT
+}
+
+function getServerSnapshot() {
+  return false
+}
+
+export function useIsMobile() {
+  return React.useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot)
 }

modules/shared/ui/components/app-sidebar.tsx

@@ -6,6 +6,7 @@ import {
     SidebarGroupContent,
     SidebarHeader,
     SidebarMenu,
+    SidebarRail,
 } from "@/components/ui/sidebar";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 import { Session } from "../../types/user";
@@ -16,7 +17,7 @@ import UserBadge from "./user-badge";
 
 export function AppSidebar({ session }: { session: Session }) {
     const menu = session.isAdmin ? adminMenu : clientMenu;
-    const avatarUrl = `https://api.dicebear.com/10.x/waves/svg?seed=${encodeURIComponent(session.email)}`;
+    const avatarUrl = `https://api.dicebear.com/10.x/waves/svg?seed=${encodeURIComponent(session.userId)}`;
 
     return (
         <Sidebar>
@@ -52,6 +53,7 @@ export function AppSidebar({ session }: { session: Session }) {
                 <p className="truncate text-xs text-muted-foreground">{session.email}</p>
                 <LogoutButton />
             </SidebarFooter>
+            <SidebarRail />
         </Sidebar>
     )
 }

modules/shared/ui/components/sidebar-menu-link.tsx

@@ -2,7 +2,7 @@
 
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import { SidebarMenuButton, SidebarMenuItem } from "@/components/ui/sidebar";
+import { SidebarMenuButton, SidebarMenuItem, useSidebar } from "@/components/ui/sidebar";
 
 export function SidebarMenuLink({
     title,
@@ -14,12 +14,13 @@ export function SidebarMenuLink({
     icon: React.ReactNode;
 }) {
     const pathname = usePathname();
+    const { setOpenMobile } = useSidebar();
     const isActive = pathname === url;
 
     return (
         <SidebarMenuItem>
             <SidebarMenuButton
-                render={<Link href={url} />}
+                render={<Link href={url} onClick={() => setOpenMobile(false)} />}
                 isActive={isActive}
                 className="h-10 text-[0.95rem]"
             >