feat: sidebar (#39)

* style: update (dark) sidebar css variables

* feat: sidebar boilerplate and breadcrumb header

* some refactor

* feat: use collapsible

* fix: add tg/grants and remove boilerplate

* feat: storage hooks and cookies utility

* feat: user nav, category open state persistence

* fix: cookie expiration, use <Link> instead of <a>

* chore: remove zustand, remove old i18n, biome fixes

* feat: sidebar item icons, type cleanup

* feat: remove category pages, adjust page padding

* chore: biome

* style: adjust destructive color variable

* style: container mx-auto by default

* fix: remove category pages, dont create link for category in breadcrumb

* fix: re-render issue with the use-cookie-storage hook

* fix: same as previous commit, but for use-session-storage

* fix: coderabbit suggestion

* fix: match also subroutes in category items

* fix: catch JSON parse error

* fix: rename column in groups

* style: move breadcrumb to center

* fix: cleanup home

* style: button icon svg size

* style: fix padding mismatch between pages and loadings

* feat: loading skeleton for account page

* perf: make dashboard homepage static for now

* feat: add associations management with card component and delete dialog

* feat: add No association found message for empty state

* Connect getAllAssociations and move client logic from page

* Refactor AssociationsList integration

* feat: update association card to display initials when logo is not provided

* refactor: integrate AssociationsList functionality directly into AssociationsView

* feat: implement create, edit, and delete association functionalities

* fix: improve getInitials function to remove "-"

* feat: error handling for delete, save, edit

* feat: add loading state to save and cancel actions

* feat: update button variants for success and error states in UI components

* feat: implement association links management with dialog and save functionality

* fix: review

* fix: bring back user details page, link from user list

* feat: add back user search, make container flex(col) with pb-6

* fix: missing notFound in user-details, loading style

* fix: not found page

* fix: add a11y to user details button

* feat: update icon for Web section in navigation

* fix: validate user ID and update last messages limit

* Revert "Merge commit '1df7f77252231489983eb493e1eb7f6f4c5d5652' into sidebar"

This reverts commit ecefa99, reversing
changes made to fc4fbf8.

---------

Co-authored-by: Bianca <ianoselbiancaroberta02@gmail.com>

Author: lorenzocorallo

src/app/dashboard/(active)/account/loading.tsx

@@ -0,0 +1,34 @@
+import { Skeleton } from "@/components/ui/skeleton"
+import { NewPasskeyButton } from "./passkey-button"
+
+export default function Loading() {
+  return (
+    <main className="container">
+      <h2 className="text-accent-foreground mb-4 text-3xl font-bold">Account</h2>
+      <div className="flex gap-4 mb-12">
+        <Skeleton className="h-32 w-32 rounded-full" />
+
+        <div className="flex flex-col gap-2">
+          <div className="flex items-center gap-2">
+            <span className="text-accent-foreground/70">Name:</span>
+            <Skeleton className="w-40 h-5" />
+          </div>
+
+          <div className="flex items-center gap-2">
+            <span className="text-accent-foreground/70">Email:</span>
+            <Skeleton className="w-70 h-5" />
+          </div>
+          <div className="flex items-center gap-2">
+            <span className="text-accent-foreground/70">Telegram:</span>
+            <Skeleton className="w-60 h-5" />
+          </div>
+        </div>
+      </div>
+      <div className="flex flex-col gap-4 justify-start items-start">
+        <h3>Passkeys</h3>
+        <Skeleton className="w-full h-10" />
+        <NewPasskeyButton />
+      </div>
+    </main>
+  )
+}

src/app/dashboard/(active)/account/page.tsx

@@ -21,7 +21,7 @@ export default async function Account() {
   const { user } = session
 
   return (
-    <main className="container mx-auto px-4 py-8">
+    <main className="container">
       <h2 className="text-accent-foreground mb-4 text-3xl font-bold">Account</h2>
       <div className="flex gap-4 mb-12">
         <ProfilePic user={user} />

src/app/dashboard/(active)/azure/members/loading.tsx

@@ -2,7 +2,7 @@ import { SkeletonAssocTable } from "./table"
 
 export default function Loading() {
   return (
-    <div className="container p-8">
+    <div className="container">
       <SkeletonAssocTable />
     </div>
   )

src/app/dashboard/(active)/azure/members/page.tsx

@@ -8,7 +8,7 @@ export default async function AssocMembers() {
   const members = await getAzureMembers()
 
   return (
-    <div className="container p-8">
+    <div className="container">
       <ErrorBoundary fallback={<div>Something went wrong</div>}>
         <Suspense fallback={<Spinner />}>
           <AssocTable members={members} />

src/app/dashboard/(active)/azure/members/table.tsx

@@ -33,7 +33,7 @@ export function AssocTable({ members }: { members: AzureMember[] }) {
   const users = sociFilter ? members.filter((v) => v.isMember) : members
 
   return (
-    <div className="space-y-3">
+    <div className="space-y-3 w-full">
       <div className="flex gap-2 items-center">
         <p>Utenti MS @polinetwork.org</p>
         <Badge
@@ -60,7 +60,7 @@ export function AssocTable({ members }: { members: AzureMember[] }) {
 
 export function SkeletonAssocTable() {
   return (
-    <div className="space-y-3">
+    <div className="space-y-3 w-full">
       <div className="flex gap-2 items-center">
         <p>Utenti MS @polinetwork.org</p>
         <Badge className="animate-pulse w-15" />

src/app/dashboard/(active)/azure/page.tsx

@@ -0,0 +1,74 @@
+"use client"
+import { usePathname } from "next/navigation"
+import { Fragment, useMemo } from "react"
+import { NAV_MAP } from "@/components/dashboard-sidebar/data"
+import {
+  BreadcrumbItem as BreadcrumbItemComponent,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  Breadcrumb as BreadcrumbRoot,
+  BreadcrumbSeparator,
+} from "@/components/ui/breadcrumb"
+
+export type BreadcrumbItem = {
+  title: string
+  url?: string
+}
+
+export function Breadcrumb({ className, ...props }: React.ComponentProps<"nav">) {
+  const pathname = usePathname()
+  const items = useMemo(() => getBreadcrumbs(NAV_MAP, pathname), [pathname])
+
+  return (
+    <BreadcrumbRoot className={className} {...props}>
+      <BreadcrumbList>
+        {items.map((item, i) => (
+          <Fragment key={`breadcrumb-item-${i}`}>
+            <BreadcrumbItemComponent className="hidden md:block">
+              {i === items.length - 1 ? (
+                <BreadcrumbPage>{item.title}</BreadcrumbPage>
+              ) : item.url ? (
+                <BreadcrumbLink href={item.url}>{item.title}</BreadcrumbLink>
+              ) : (
+                item.title
+              )}
+            </BreadcrumbItemComponent>
+            {i < items.length - 1 && <BreadcrumbSeparator className="hidden md:block" />}
+          </Fragment>
+        ))}
+      </BreadcrumbList>
+    </BreadcrumbRoot>
+  )
+}
+
+function getBreadcrumbs(navMap: Map<string, string>, pathname: string): BreadcrumbItem[] {
+  const segments = pathname.split("/").filter(Boolean)
+  const breadcrumbs: BreadcrumbItem[] = []
+
+  let currentPath = ""
+  let i = 0
+
+  for (const segment of segments) {
+    currentPath += `/${segment}`
+    let title = navMap.get(currentPath)
+    if (!title) {
+      if (isUUIDorId(segment)) {
+        title = "Details"
+      } else {
+        title = segment.charAt(0).toUpperCase() + segment.slice(1)
+      }
+    }
+
+    // note: at the moment we do not plan to make category pages.
+    // If such pages are made in the future, this logic can be removed
+    breadcrumbs.push({ title, url: i !== 1 ? currentPath : undefined })
+    i++
+  }
+
+  return breadcrumbs
+}
+
+function isUUIDorId(segment: string) {
+  return !Number.isNaN(Number(segment)) || segment.length > 20 // Regex custom a seconda dei tuoi ID
+}

src/app/dashboard/(active)/breadcrumb.tsx

@@ -1,13 +1,17 @@
 "use client"
 
-import type { User } from "better-auth"
 import { UserRoundPenIcon } from "lucide-react"
 import Link from "next/link"
 import { Button } from "@/components/ui/button"
+import { useSession } from "@/lib/auth"
+
+export function CompleteProfile() {
+  const { data, isPending } = useSession()
+
+  if (!data || isPending) return null
 
-export function CompleteProfile({ user }: { user: User }) {
   return (
-    !user.name && (
+    !data.user.name && (
       <div className="flex items-center p-2 pl-4 mb-4 gap-2 rounded-lg border text-accent-foreground bg-yellow-400/10 border-yellow-400">
         <UserRoundPenIcon size={16} />
         <p className="grow">Your profile is incomplete, please enter the missing information.</p>

src/app/dashboard/(active)/complete-profile.tsx

@@ -0,0 +1,50 @@
+import { cookies } from "next/headers"
+import { DashboardSidebar } from "@/components/dashboard-sidebar"
+import { SidebarInset, SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar"
+import { COOKIES } from "@/constants"
+import { Breadcrumb } from "./breadcrumb"
+
+function parseCookie(cookie: string) {
+  try {
+    const parsed = JSON.parse(cookie)
+    return parsed
+  } catch (_e) {
+    return {}
+  }
+}
+
+export default async function AdminLayout({ children }: { children: React.ReactNode }) {
+  const sidebarCookies = await getSidebarCookies()
+
+  return (
+    <SidebarProvider
+      defaultOpen={sidebarCookies.open}
+      style={
+        {
+          "--sidebar-width": "19rem",
+        } as React.CSSProperties
+      }
+    >
+      <DashboardSidebar categoryState={sidebarCookies.state} />
+      <SidebarInset className="px-4">
+        <header className="flex h-16 shrink-0 relative items-center justify-between gap-2 border-b mb-8">
+          <SidebarTrigger className="-ml-1" size="icon" />
+          <Breadcrumb className="absolute left-1/2 -translate-x-1/2" />
+          <div></div>
+        </header>
+        {children}
+      </SidebarInset>
+    </SidebarProvider>
+  )
+}
+
+async function getSidebarCookies() {
+  const cookieStore = await cookies()
+
+  const sidebarCategoryStateCookie = cookieStore.get(COOKIES.SIDEBAR_CATEGORY_STATE)?.value
+  const sidebarOpenCookie = cookieStore.get(COOKIES.SIDEBAR_OPEN)?.value
+  const state: Record<string, boolean> = sidebarCategoryStateCookie ? parseCookie(sidebarCategoryStateCookie) : {}
+  const open: boolean = sidebarOpenCookie !== undefined ? parseCookie(sidebarOpenCookie) : true
+
+  return { state, open }
+}

src/app/dashboard/(active)/layout.tsx

@@ -0,0 +1,19 @@
+import Link from "next/link"
+import { Button } from "@/components/ui/button"
+
+export default function NotFound() {
+  return (
+    <div className="flex flex-1 flex-col items-center justify-center gap-8 px-4">
+      <div className="flex flex-col items-center gap-2 text-center">
+        <h1 className="font-heading text-[12rem] leading-none font-bold tracking-tight text-primary">404</h1>
+        <h2 className="font-heading text-2xl font-semibold text-foreground">Not found</h2>
+        <p className="max-w-sm text-muted-foreground">
+          The resource you&apos;re looking for doesn&apos;t exist or has been moved.
+        </p>
+      </div>
+      <Link href=".">
+        <Button>Go Back</Button>
+      </Link>
+    </div>
+  )
+}