diff --git a/package.json b/package.json index c5c77fb..e3e8883 100644 --- a/package.json +++ b/package.json @@ -27,20 +27,26 @@ "@fortawesome/react-fontawesome": "^0.2.2", "@hookform/resolvers": "^5.0.1", "@prisma/client": "^6.9.0", - "@radix-ui/react-dropdown-menu": "^2.1.14", + "@radix-ui/react-avatar": "^1.1.10", + "@radix-ui/react-collapsible": "^1.1.11", + "@radix-ui/react-dialog": "^1.1.14", + "@radix-ui/react-dropdown-menu": "^2.1.15", "@radix-ui/react-hover-card": "^1.1.13", "@radix-ui/react-label": "^2.1.6", + "@radix-ui/react-popover": "^1.1.14", "@radix-ui/react-scroll-area": "^1.2.8", "@radix-ui/react-select": "^2.2.4", - "@radix-ui/react-separator": "^1.1.6", - "@radix-ui/react-slot": "^1.2.2", + "@radix-ui/react-separator": "^1.1.7", + "@radix-ui/react-slot": "^1.2.3", "@radix-ui/react-switch": "^1.2.4", "@radix-ui/react-tabs": "^1.1.11", + "@radix-ui/react-tooltip": "^1.2.7", "@tanstack/react-query": "^5.80.7", "bcryptjs": "^3.0.2", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", - "lucide-react": "^0.511.0", + "cmdk": "^1.1.1", + "lucide-react": "^0.515.0", "next": "15.4.0-canary.92", "next-auth": "^5.0.0-beta.25", "next-themes": "^0.4.6", diff --git a/src/app/home/page.tsx b/src/app/(main)/home/page.tsx similarity index 81% rename from src/app/home/page.tsx rename to src/app/(main)/home/page.tsx index 77f3cf8..c381c03 100644 --- a/src/app/home/page.tsx +++ b/src/app/(main)/home/page.tsx @@ -1,15 +1,13 @@ 'use client'; import { RedirectButton } from '@/components/buttons/redirect-button'; -import { ThemePicker } from '@/components/misc/theme-picker'; import { useGetApiUserMe } from '@/generated/api/user/user'; export default function Home() { const { data, isLoading } = useGetApiUserMe(); return ( -
-
{}
+

Hello{' '} diff --git a/src/app/(main)/layout.tsx b/src/app/(main)/layout.tsx new file mode 100644 index 0000000..7106e70 --- /dev/null +++ b/src/app/(main)/layout.tsx @@ -0,0 +1,23 @@ +import React from 'react'; +import { cookies } from 'next/headers'; + +import { AppSidebar } from '@/components/custom-ui/app-sidebar'; +import SidebarProviderWrapper from '@/components/wrappers/sidebar-provider'; +import Header from '@/components/misc/header'; + +export default async function Layout({ + children, +}: Readonly<{ + children: React.ReactNode; +}>) { + const cookieStore = await cookies(); + const defaultOpen = cookieStore.get('sidebar_state')?.value === 'true'; + return ( + <> + + +
{children}
+ + + ); +} diff --git a/src/app/globals.css b/src/app/globals.css index f85cb2f..bc18178 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -9,6 +9,7 @@ --font-heading: 'Comfortaa', sans-serif; --font-label: 'Varela Round', sans-serif; --font-button: 'Varela Round', sans-serif; + --font-sans: var(--font-label); --transparent: transparent; @@ -28,11 +29,12 @@ --background: var(--neutral-800); --background-reversed: var(--neutral-000); - --base: var(--neutral-800); + --basecl: var(--neutral-800); --text: var(--neutral-000); --text-alt: var(--neutral-900); --text-input: var(--text); --text-muted-input: var(--neutral-450); + --text-muted: var(--neutral-300); --muted-input: var(--neutral-600); --background-disabled: var(--neutral-500); --text-disabled: var(--neutral-700); @@ -48,13 +50,27 @@ --active-secondary: oklch(0.4254 0.133 272.15); --disabled-secondary: oklch(0.4937 0.1697 271.26 / 0.5); + --destructive: oklch(60.699% 0.20755 25.945); + --hover-destructive: oklch(60.699% 0.20755 25.945 / 0.8); + --active-destructive: oklch(50.329% 0.17084 25.842); + --disabled-destructive: oklch(60.699% 0.20755 25.945 / 0.4); + --muted: var(--color-neutral-700); --hover-muted: var(--color-neutral-600); --active-muted: var(--color-neutral-400); --disabled-muted: var(--color-neutral-400); + --toaster-default-bg: var(--color-neutral-150); + --toaster-success-bg: oklch(54.147% 0.09184 144.208); + --toaster-error-bg: oklch(52.841% 0.10236 27.274); + --toaster-info-bg: oklch(44.298% 0.05515 259.369); + --toaster-warning-bg: oklch(61.891% 0.07539 102.943); + --toaster-notification-bg: var(--color-neutral-150); + --card: var(--neutral-800); + --sidebar-width-icon: 32px; + /* ------------------- */ --foreground: oklch(0.13 0.028 261.692); @@ -77,8 +93,6 @@ --accent-foreground: oklch(0.21 0.034 264.665); - --destructive: oklch(0.577 0.245 27.325); - --border: oklch(0.928 0.006 264.531); --input: oklch(0.928 0.006 264.531); @@ -95,23 +109,79 @@ --chart-5: oklch(0.769 0.188 70.08); - --sidebar: oklch(0.985 0.002 247.839); + --sidebar: var(--background); - --sidebar-foreground: oklch(0.13 0.028 261.692); + --sidebar-foreground: var(--text); --sidebar-primary: oklch(0.21 0.034 264.665); - --sidebar-primary-foreground: oklch(0.985 0.002 247.839); + --sidebar-primary-foreground: var(--text); --sidebar-accent: oklch(0.967 0.003 264.542); - --sidebar-accent-foreground: oklch(0.21 0.034 264.665); + --sidebar-accent-foreground: var(--text); --sidebar-border: oklch(0.928 0.006 264.531); --sidebar-ring: oklch(0.707 0.022 261.325); } +h1 { + font-family: var(--font-heading); + font-size: 40px; + font-style: normal; + font-weight: 700; + line-height: normal; +} + +h2 { + font-family: var(--font-heading); + font-size: 36px; + font-style: normal; + font-weight: 600; + line-height: normal; +} + +h3 { + font-family: var(--font-heading); + font-size: 32px; + font-style: normal; + font-weight: 600; + line-height: normal; +} + +h4 { + font-family: var(--font-heading); + font-size: 28px; + font-style: normal; + font-weight: 600; + line-height: normal; +} + +h5 { + font-family: var(--font-heading); + font-size: 26px; + font-style: normal; + font-weight: 600; + line-height: normal; +} + +h6 { + font-family: var(--font-heading); + font-size: 20px; + font-style: normal; + font-weight: 600; + line-height: normal; +} + +p { + font-family: var(--font-label); + font-size: 16px; + font-style: normal; + font-weight: 400; + line-height: normal; +} + @font-face { font-family: 'Comfortaa'; font-style: normal; @@ -150,11 +220,12 @@ --color-background: var(--neutral-750); --color-background-reversed: var(--background-reversed); - --color-base: var(--neutral-800); + --color-basecl: var(--neutral-800); --color-text: var(--text); --color-text-alt: var(--text-alt); --color-text-input: var(--text-input); --color-text-muted-input: var(--text-muted-input); + --color-text-muted: var(--text-muted); --color-muted-input: var(--muted-input); --color-background-disabled: var(--neutral-500); @@ -171,11 +242,23 @@ --color-active-secondary: var(--active-secondary); --color-disabled-secondary: var(--disabled-secondary); + --color-destructive: var(--destructive); + --color-hover-destructive: var(--hover-destructive); + --color-active-destructive: var(--active-destructive); + --color-disabled-destructive: var(--disabled-destructive); + --color-muted: var(--muted); --color-hover-muted: var(--hover-muted); --color-active-muted: var(--active-muted); --color-disabled-muted: var(--disabled-muted); + --color-toaster-default-bg: var(--toaster-default-bg); + --color-toaster-success-bg: var(--toaster-success-bg); + --color-toaster-error-bg: var(--toaster-error-bg); + --color-toaster-info-bg: var(--toaster-info-bg); + --color-toaster-warning-bg: var(--toaster-warning-bg); + --color-toaster-notification-bg: var(--toaster-notification-bg); + /* Custom values */ --radius-sm: calc(var(--radius) - 4px); @@ -216,8 +299,6 @@ --color-accent-foreground: var(--accent-foreground); - --color-destructive: var(--destructive); - --color-border: var(--border); --color-input: var(--input); @@ -273,11 +354,12 @@ --background: var(--neutral-750); --background-reversed: var(--neutral-000); - --base: var(--neutral-750); + --basecl: var(--neutral-750); --text: var(--neutral-000); --text-alt: var(--neutral-900); --text-input: var(--text); --text-muted-input: var(--neutral-450); + --text-muted: var(--neutral-300); --muted-input: var(--neutral-500); --background-disabled: var(--neutral-500); --text-disabled: var(--neutral-700); @@ -292,11 +374,23 @@ --active-secondary: oklch(0.4471 0.15 271.61); --disabled-secondary: oklch(0.6065 0.213 271.11 / 0.4); + --destructive: oklch(0.58 0.2149 27.13); + --hover-destructive: oklch(0.58 0.2149 27.13 / 0.8); + --active-destructive: oklch(45.872% 0.16648 26.855); + --disabled-destructive: oklch(0.58 0.2149 27.13 / 0.4); + --muted: var(--color-neutral-650); --hover-muted: var(--color-neutral-500); --active-muted: var(--color-neutral-400); --disabled-muted: var(--color-neutral-400); + --toaster-default-bg: var(--color-neutral-150); + --toaster-success-bg: var(--color-green-200); + --toaster-error-bg: var(--color-red-200); + --toaster-info-bg: var(--color-blue-200); + --toaster-warning-bg: var(--color-yellow-200); + --toaster-notification-bg: var(--color-neutral-150); + --card: var(--neutral-750); /* ------------------- */ @@ -321,8 +415,6 @@ --accent-foreground: oklch(0.985 0.002 247.839); - --destructive: oklch(0.704 0.191 22.216); - --border: oklch(1 0 0 / 10%); --input: oklch(1 0 0 / 15%); @@ -339,17 +431,17 @@ --chart-5: oklch(0.645 0.246 16.439); - --sidebar: oklch(0.21 0.034 264.665); + --sidebar: var(--background); - --sidebar-foreground: oklch(0.985 0.002 247.839); + --sidebar-foreground: var(--text); --sidebar-primary: oklch(0.488 0.243 264.376); - --sidebar-primary-foreground: oklch(0.985 0.002 247.839); + --sidebar-primary-foreground: var(--text); --sidebar-accent: oklch(0.278 0.033 256.848); - --sidebar-accent-foreground: oklch(0.985 0.002 247.839); + --sidebar-accent-foreground: var(--text); --sidebar-border: oklch(1 0 0 / 10%); diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 201a730..af40867 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -2,7 +2,7 @@ import { ThemeProvider } from '@/components/wrappers/theme-provider'; import type { Metadata } from 'next'; import './globals.css'; -import { QueryProvider } from '@/components/query-provider'; +import { QueryProvider } from '@/components/wrappers/query-provider'; export const metadata: Metadata = { title: 'MeetUp', diff --git a/src/app/settings/page.tsx b/src/app/settings/page.tsx index 563ebab..e0ad2a5 100644 --- a/src/app/settings/page.tsx +++ b/src/app/settings/page.tsx @@ -1,482 +1,5 @@ -import { Button } from '@/components/ui/button'; -import { - Card, - CardContent, - CardDescription, - CardFooter, - CardHeader, - CardTitle, -} from '@/components/ui/card'; -import { Input } from '@/components/ui/input'; -import { Label } from '@/components/ui/label'; -import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'; -import { ScrollableSettingsWrapper } from '@/components/wrappers/settings-scroll'; -import { Switch } from '@/components/ui/switch'; -import { - Select, - SelectContent, - SelectItem, - SelectTrigger, - SelectValue, -} from '@/components/ui/select'; +import SettingsPage from '@/components/misc/settings-page'; -export default function SettingsPage() { - return ( -
-
- - - Account - Notifications - Calendar - Privacy - Appearance - - - - - - - Account Settings - - Manage your account details and preferences. - - - -
- - -
-
- - -

- Email is managed by your SSO provider. -

-
-
- - -

- Upload a new profile picture. -

-
-
- - -
- -
- - -
-
- -

- Permanently delete your account and all associated data. -

-
- - - - - - - - - - - - - - Notification Preferences - - Choose how you want to be notified. - - - -
- - -
-
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - -
-
- - - - - - - - - - - - - - Calendar & Availability - - Manage your calendar display, default availability, and iCal - integrations. - - - -
- - Display - -
- - -
-
- - -
-
- - -
-
- -
- - Availability - -
- -

- Define your typical available hours (e.g., - Monday-Friday, 9 AM - 5 PM). -

- -
-
- -

- Min time before a booking can be made. -

-
- -
-
-
- -

- Max time in advance a booking can be made. -

- -
-
- -
- - iCalendar Integration - -
- - - -
-
- - - -
-
- - - - - - - - - - - - - - Sharing & Privacy - - Control who can see your calendar and book time with you. - - - -
- - -
-
- -

- (Override for Default Visibility) -
- - This setting will override the default visibility for - your calendar. You can set specific friends or groups to - see your full calendar details. - -

- -
-
- - -
-
- - -

- Prevent specific users from seeing your calendar or - booking time. -

-
- - - - - - - - - - - - - - Appearance - - Customize the look and feel of the application. - - - -
- - -
-
- - -
-
- - -
- - - - - - - - - -
-
- ); +export default function Page() { + return ; } diff --git a/src/assets/logo/logo-export.ts b/src/assets/logo/logo-export.ts index 44681d3..17a0708 100644 --- a/src/assets/logo/logo-export.ts +++ b/src/assets/logo/logo-export.ts @@ -1,5 +1,5 @@ -export { default as logo_colored_combo_light } from '@/assets/logo/logo_colored_combo_light.svg'; -export { default as logo_colored_combo_dark } from '@/assets/logo/logo_colored_combo_dark.svg'; +export { default as logo_colored_combo_light } from '@/assets/logo/new/logo_colored_combo_light.svg'; +export { default as logo_colored_combo_dark } from '@/assets/logo/new/logo_colored_combo_dark.svg'; export { default as logo_colored_primary_light } from '@/assets/logo/logo_colored_primary_light.svg'; export { default as logo_colored_primary_dark } from '@/assets/logo/logo_colored_primary_dark.svg'; export { default as logo_colored_secondary_light } from '@/assets/logo/logo_colored_secondary_light.svg'; @@ -12,5 +12,5 @@ export { default as logo_mono_secondary_light } from '@/assets/logo/logo_mono_se export { default as logo_mono_secondary_dark } from '@/assets/logo/logo_mono_secondary_dark.svg'; export { default as logo_mono_submark_light } from '@/assets/logo/logo_mono_submark_light.svg'; export { default as logo_mono_submark_dark } from '@/assets/logo/logo_mono_submark_dark.svg'; -export { default as logo_colored_submark_light } from '@/assets/logo/logo_colored_submark_light.svg'; -export { default as logo_colored_submark_dark } from '@/assets/logo/logo_colored_submark_dark.svg'; +export { default as logo_colored_submark_light } from '@/assets/logo/new/logo_colored_submark_light.svg'; +export { default as logo_colored_submark_dark } from '@/assets/logo/new/logo_colored_submark_dark.svg'; diff --git a/src/assets/logo/new/logo_colored_combo_dark.svg b/src/assets/logo/new/logo_colored_combo_dark.svg new file mode 100644 index 0000000..ec4acae --- /dev/null +++ b/src/assets/logo/new/logo_colored_combo_dark.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/src/assets/logo/new/logo_colored_combo_light.svg b/src/assets/logo/new/logo_colored_combo_light.svg new file mode 100644 index 0000000..33e6c6d --- /dev/null +++ b/src/assets/logo/new/logo_colored_combo_light.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/src/assets/logo/new/logo_colored_submark_dark.svg b/src/assets/logo/new/logo_colored_submark_dark.svg new file mode 100644 index 0000000..efadbf0 --- /dev/null +++ b/src/assets/logo/new/logo_colored_submark_dark.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/assets/logo/new/logo_colored_submark_light.svg b/src/assets/logo/new/logo_colored_submark_light.svg new file mode 100644 index 0000000..cc7b3e1 --- /dev/null +++ b/src/assets/logo/new/logo_colored_submark_light.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/components/buttons/notification-button.tsx b/src/components/buttons/notification-button.tsx new file mode 100644 index 0000000..0b718f9 --- /dev/null +++ b/src/components/buttons/notification-button.tsx @@ -0,0 +1,40 @@ +import { Button } from '@/components/ui/button'; +import { + DropdownMenu, + DropdownMenuContent, + // DropdownMenuGroup, + // DropdownMenuItem, + // DropdownMenuLabel, + // DropdownMenuPortal, + // DropdownMenuSeparator, + // DropdownMenuShortcut, + // DropdownMenuSub, + // DropdownMenuSubContent, + // DropdownMenuSubTrigger, + DropdownMenuTrigger, +} from '@/components/ui/dropdown-menu'; +import { NDot, NotificationDot } from '@/components/misc/notification-dot'; + +export function NotificationButton({ + dotVariant, + children, + ...props +}: { + dotVariant?: NDot; + children: React.ReactNode; +} & React.ComponentProps) { + return ( + + + + + + + ); +} diff --git a/src/components/custom-ui/app-sidebar.tsx b/src/components/custom-ui/app-sidebar.tsx new file mode 100644 index 0000000..d7958e4 --- /dev/null +++ b/src/components/custom-ui/app-sidebar.tsx @@ -0,0 +1,145 @@ +'use client'; + +import React from 'react'; +import { + Sidebar, + SidebarContent, + SidebarFooter, + SidebarGroup, + // SidebarGroupAction, + SidebarGroupContent, + SidebarGroupLabel, + SidebarHeader, + // SidebarInput, + // SidebarInset, + SidebarMenu, + // SidebarMenuAction, + // SidebarMenuBadge, + SidebarMenuButton, + SidebarMenuItem, + // SidebarMenuSkeleton, + // SidebarMenuSub, + // SidebarMenuSubButton, + // SidebarMenuSubItem, + // SidebarProvider, + // SidebarRail, + // SidebarSeparator, + // SidebarTrigger, + // useSidebar, +} from '@/components/custom-ui/sidebar'; + +import { ChevronDown } from 'lucide-react'; +import { + Collapsible, + CollapsibleContent, + CollapsibleTrigger, +} from '@/components/ui/collapsible'; + +import Logo from '@/components/misc/logo'; + +import Link from 'next/link'; + +import { + Star, + CalendarDays, + User, + Users, + CalendarClock, + CalendarPlus, +} from 'lucide-react'; + +const items = [ + { + title: 'Calendar', + url: '#', + icon: CalendarDays, + }, + { + title: 'Friends', + url: '#', + icon: User, + }, + { + title: 'Groups', + url: '#', + icon: Users, + }, + { + title: 'Events', + url: '/events', + icon: CalendarClock, + }, +]; + +export function AppSidebar() { + return ( + <> + + + + + + + + + + + + {' '} + + Favorites + + + + + + + + + + + + + {items.map((item) => ( + + + + + + {item.title} + + + + + ))} + + + + + + + + + New Event + + + + + + + + ); +} diff --git a/src/components/custom-ui/labeled-input.tsx b/src/components/custom-ui/labeled-input.tsx index ea26e51..b83524d 100644 --- a/src/components/custom-ui/labeled-input.tsx +++ b/src/components/custom-ui/labeled-input.tsx @@ -1,5 +1,8 @@ import { Input } from '@/components/ui/input'; import { Label } from '@/components/ui/label'; +import React from 'react'; +import { Button } from '../ui/button'; +import { Eye, EyeOff } from 'lucide-react'; export default function LabeledInput({ type, @@ -11,7 +14,7 @@ export default function LabeledInput({ error, ...rest }: { - type: 'text' | 'email' | 'password'; + type: 'text' | 'email' | 'password' | 'file'; label: string; placeholder?: string; value?: string; @@ -19,19 +22,33 @@ export default function LabeledInput({ autocomplete?: string; error?: string; } & React.InputHTMLAttributes) { + const [passwordVisible, setPasswordVisible] = React.useState(false); + return (
- - + + + {type === 'password' && ( + + )} + {error &&

{error}

}
); diff --git a/src/components/custom-ui/sidebar.tsx b/src/components/custom-ui/sidebar.tsx new file mode 100644 index 0000000..11228cb --- /dev/null +++ b/src/components/custom-ui/sidebar.tsx @@ -0,0 +1,725 @@ +'use client'; + +import * as React from 'react'; +import { Slot } from '@radix-ui/react-slot'; +import { cva, VariantProps } 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 = '4rem'; +const SIDEBAR_KEYBOARD_SHORTCUT = 'b'; + +type SidebarContextProps = { + state: 'expanded' | 'collapsed'; + open: boolean; + setOpen: (open: boolean) => void; + openMobile: boolean; + setOpenMobile: (open: boolean) => void; + isMobile: boolean; + toggleSidebar: () => void; +}; + +const SidebarContext = React.createContext(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( + () => ({ + state, + open, + setOpen, + isMobile, + openMobile, + setOpenMobile, + toggleSidebar, + }), + [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar], + ); + + return ( + + +
+ {children} +
+ + + ); +} + +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 ( +
+ {children} +
+ ); + } + + if (isMobile) { + return ( + + + + Sidebar + Displays the mobile sidebar. + +
{children}
+ + + ); + } + + return ( +
+ {/* This is what handles the sidebar gap on desktop */} +
+ +
+ ); +} + +function SidebarTrigger({ + className, + onClick, + ...props +}: React.ComponentProps) { + const { toggleSidebar } = useSidebar(); + + return ( + + ); +} + +function SidebarRail({ className, ...props }: React.ComponentProps<'button'>) { + const { toggleSidebar } = useSidebar(); + + return ( + + + + + + + No settings found. + + {settingsSections.map((section) => { + const Icon = section.icon; + return ( + handleSelect(section.value)} + className='flex items-center justify-between p-3' + > +
+ +
+ {section.label} +

+ {section.description} +

+
+
+ + + ); + })} + + + + + +
+ ); +} diff --git a/src/components/misc/settings-page.tsx b/src/components/misc/settings-page.tsx new file mode 100644 index 0000000..33a083b --- /dev/null +++ b/src/components/misc/settings-page.tsx @@ -0,0 +1,514 @@ +'use client'; + +import { useState } from 'react'; +import { Button } from '@/components/ui/button'; +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from '@/components/ui/card'; +import { Input } from '@/components/ui/input'; +import { Label } from '@/components/ui/label'; +import { ScrollableSettingsWrapper } from '@/components/wrappers/settings-scroll'; +import { Switch } from '@/components/ui/switch'; +import { + Select, + SelectContent, + SelectItem, + SelectTrigger, + SelectValue, +} from '@/components/ui/select'; +import { SettingsDropdown } from '@/components/misc/settings-dropdown'; +import { useRouter } from 'next/navigation'; +import { useGetApiUserMe } from '@/generated/api/user/user'; +import { ThemePicker } from './theme-picker'; +import LabeledInput from '../custom-ui/labeled-input'; +import { GroupWrapper } from '../wrappers/group-wrapper'; +import { Avatar } from '../ui/avatar'; +import Image from 'next/image'; +import { User } from 'lucide-react'; +import ProfilePictureUpload from './profile-picture-upload'; + +export default function SettingsPage() { + const router = useRouter(); + const [currentSection, setCurrentSection] = useState('general'); + const { data } = useGetApiUserMe(); + + const renderSettingsContent = () => { + switch (currentSection) { + case 'general': + return ( + + + + Account Settings + + + +
+ +
+
+ +
+
+ +
+
+ +
+ +
+
+ + + + Email might be managed by your SSO provider. + +
+
+ + +
+
+ +
+
+ +
+
+ +
+
+ + +
+ +
+ + +
+
+ +
+
+
+ + +
+
+
+ +
+ + + Permanently delete your account and all associated data. + +
+ + + + ); + + case 'notifications': + return ( + + + + Notification Preferences + + +
+ + +
+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + + + ); + + case 'calendarAvailability': + return ( + + + + Calendar & Availability + + +
+ Display +
+ + +
+
+ + +
+
+ + +
+
+ +
+ + Availability + +
+ + + Define your typical available hours (e.g., Monday-Friday, + 9 AM - 5 PM). + + +
+
+ + + Min time before a booking can be made. + +
+ +
+
+
+ + + Max time in advance a booking can be made. + + +
+
+ +
+ + iCalendar Integration + +
+ + + +
+
+ + + +
+
+ + + + ); + + case 'sharingPrivacy': + return ( + + + + Sharing & Privacy + + +
+ + +
+
+ + + (Override for Default Visibility) +
+ + This setting will override the default visibility for your + calendar. You can set specific friends or groups to see + your full calendar details. + + + +
+
+ + +
+
+ + + + Prevent specific users from seeing your calendar or booking + time. + +
+ + + + ); + + case 'appearance': + return ( + + + + Appearance + + +
+ + +
+
+ + +
+
+ + +
+ + + + ); + + default: + return null; + } + }; + + return ( +
+
+
+
+

Settings

+
+ +
+ +
{renderSettingsContent()}
+
+ + + + +
+
+
+ ); +} diff --git a/src/components/misc/user-card.tsx b/src/components/misc/user-card.tsx new file mode 100644 index 0000000..457d0fc --- /dev/null +++ b/src/components/misc/user-card.tsx @@ -0,0 +1,29 @@ +import { useGetApiUserMe } from '@/generated/api/user/user'; +import { Avatar } from '@/components/ui/avatar'; +import Image from 'next/image'; +import { User } from 'lucide-react'; + +export default function UserCard() { + const { data } = useGetApiUserMe(); + return ( +
+ + {data?.data.user.image ? ( + Avatar + ) : ( + + )} + +
{data?.data.user.name}
+
+ {data?.data.user.email} +
+
+ ); +} diff --git a/src/components/misc/user-dropdown.tsx b/src/components/misc/user-dropdown.tsx new file mode 100644 index 0000000..8220d06 --- /dev/null +++ b/src/components/misc/user-dropdown.tsx @@ -0,0 +1,62 @@ +'use client'; + +import { Avatar } from '@/components/ui/avatar'; +import { Button } from '@/components/ui/button'; +import { + DropdownMenu, + DropdownMenuContent, + // DropdownMenuGroup, + DropdownMenuItem, + // DropdownMenuLabel, + // DropdownMenuPortal, + DropdownMenuSeparator, + // DropdownMenuShortcut, + // DropdownMenuSub, + // DropdownMenuSubContent, + // DropdownMenuSubTrigger, + DropdownMenuTrigger, +} from '@/components/ui/dropdown-menu'; +import { useGetApiUserMe } from '@/generated/api/user/user'; +import { ChevronDown, User } from 'lucide-react'; +import Image from 'next/image'; +import Link from 'next/link'; +import UserCard from '@/components/misc/user-card'; + +export default function UserDropdown() { + const { data } = useGetApiUserMe(); + + return ( + + + + + + + + + + + Settings + + + + Logout + + + + ); +} diff --git a/src/components/ui/avatar.tsx b/src/components/ui/avatar.tsx new file mode 100644 index 0000000..6a21b65 --- /dev/null +++ b/src/components/ui/avatar.tsx @@ -0,0 +1,53 @@ +'use client'; + +import * as React from 'react'; +import * as AvatarPrimitive from '@radix-ui/react-avatar'; + +import { cn } from '@/lib/utils'; + +function Avatar({ + className, + ...props +}: React.ComponentProps) { + return ( + + ); +} + +function AvatarImage({ + className, + ...props +}: React.ComponentProps) { + return ( + + ); +} + +function AvatarFallback({ + className, + ...props +}: React.ComponentProps) { + return ( + + ); +} + +export { Avatar, AvatarImage, AvatarFallback }; diff --git a/src/components/ui/button.tsx b/src/components/ui/button.tsx index 2a25f66..0b8ce1a 100644 --- a/src/components/ui/button.tsx +++ b/src/components/ui/button.tsx @@ -5,7 +5,7 @@ import { cva, type VariantProps } from 'class-variance-authority'; import { cn } from '@/lib/utils'; const buttonVariants = cva( - "radius-lg inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-button transition-all cursor-pointer disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_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", + "radius-lg inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-button transition-all cursor-pointer disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-nonef", { variants: { variant: { diff --git a/src/components/ui/card.tsx b/src/components/ui/card.tsx index c0894f8..72c0a9c 100644 --- a/src/components/ui/card.tsx +++ b/src/components/ui/card.tsx @@ -126,7 +126,7 @@ function CardFooter({ className, ...props }: React.ComponentProps<'div'>) { return (
); diff --git a/src/components/ui/collapsible.tsx b/src/components/ui/collapsible.tsx new file mode 100644 index 0000000..3ed0ecd --- /dev/null +++ b/src/components/ui/collapsible.tsx @@ -0,0 +1,33 @@ +'use client'; + +import * as CollapsiblePrimitive from '@radix-ui/react-collapsible'; + +function Collapsible({ + ...props +}: React.ComponentProps) { + return ; +} + +function CollapsibleTrigger({ + ...props +}: React.ComponentProps) { + return ( + + ); +} + +function CollapsibleContent({ + ...props +}: React.ComponentProps) { + return ( + + ); +} + +export { Collapsible, CollapsibleTrigger, CollapsibleContent }; diff --git a/src/components/ui/command.tsx b/src/components/ui/command.tsx new file mode 100644 index 0000000..8cb4ca7 --- /dev/null +++ b/src/components/ui/command.tsx @@ -0,0 +1,184 @@ +"use client" + +import * as React from "react" +import { Command as CommandPrimitive } from "cmdk" +import { SearchIcon } from "lucide-react" + +import { cn } from "@/lib/utils" +import { + Dialog, + DialogContent, + DialogDescription, + DialogHeader, + DialogTitle, +} from "@/components/ui/dialog" + +function Command({ + className, + ...props +}: React.ComponentProps) { + return ( + + ) +} + +function CommandDialog({ + title = "Command Palette", + description = "Search for a command to run...", + children, + className, + showCloseButton = true, + ...props +}: React.ComponentProps & { + title?: string + description?: string + className?: string + showCloseButton?: boolean +}) { + return ( + + + {title} + {description} + + + + {children} + + + + ) +} + +function CommandInput({ + className, + ...props +}: React.ComponentProps) { + return ( +
+ + +
+ ) +} + +function CommandList({ + className, + ...props +}: React.ComponentProps) { + return ( + + ) +} + +function CommandEmpty({ + ...props +}: React.ComponentProps) { + return ( + + ) +} + +function CommandGroup({ + className, + ...props +}: React.ComponentProps) { + return ( + + ) +} + +function CommandSeparator({ + className, + ...props +}: React.ComponentProps) { + return ( + + ) +} + +function CommandItem({ + className, + ...props +}: React.ComponentProps) { + return ( + + ) +} + +function CommandShortcut({ + className, + ...props +}: React.ComponentProps<"span">) { + return ( + + ) +} + +export { + Command, + CommandDialog, + CommandInput, + CommandList, + CommandEmpty, + CommandGroup, + CommandItem, + CommandShortcut, + CommandSeparator, +} diff --git a/src/components/ui/dialog.tsx b/src/components/ui/dialog.tsx new file mode 100644 index 0000000..d9ccec9 --- /dev/null +++ b/src/components/ui/dialog.tsx @@ -0,0 +1,143 @@ +"use client" + +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) { + return +} + +function DialogTrigger({ + ...props +}: React.ComponentProps) { + return +} + +function DialogPortal({ + ...props +}: React.ComponentProps) { + return +} + +function DialogClose({ + ...props +}: React.ComponentProps) { + return +} + +function DialogOverlay({ + className, + ...props +}: React.ComponentProps) { + return ( + + ) +} + +function DialogContent({ + className, + children, + showCloseButton = true, + ...props +}: React.ComponentProps & { + showCloseButton?: boolean +}) { + return ( + + + + {children} + {showCloseButton && ( + + + Close + + )} + + + ) +} + +function DialogHeader({ className, ...props }: React.ComponentProps<"div">) { + return ( +
+ ) +} + +function DialogFooter({ className, ...props }: React.ComponentProps<"div">) { + return ( +
+ ) +} + +function DialogTitle({ + className, + ...props +}: React.ComponentProps) { + return ( + + ) +} + +function DialogDescription({ + className, + ...props +}: React.ComponentProps) { + return ( + + ) +} + +export { + Dialog, + DialogClose, + DialogContent, + DialogDescription, + DialogFooter, + DialogHeader, + DialogOverlay, + DialogPortal, + DialogTitle, + DialogTrigger, +} diff --git a/src/components/ui/popover.tsx b/src/components/ui/popover.tsx new file mode 100644 index 0000000..01e468b --- /dev/null +++ b/src/components/ui/popover.tsx @@ -0,0 +1,48 @@ +"use client" + +import * as React from "react" +import * as PopoverPrimitive from "@radix-ui/react-popover" + +import { cn } from "@/lib/utils" + +function Popover({ + ...props +}: React.ComponentProps) { + return +} + +function PopoverTrigger({ + ...props +}: React.ComponentProps) { + return +} + +function PopoverContent({ + className, + align = "center", + sideOffset = 4, + ...props +}: React.ComponentProps) { + return ( + + + + ) +} + +function PopoverAnchor({ + ...props +}: React.ComponentProps) { + return +} + +export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor } diff --git a/src/components/ui/separator.tsx b/src/components/ui/separator.tsx index 3b4f1ef..3234cdc 100644 --- a/src/components/ui/separator.tsx +++ b/src/components/ui/separator.tsx @@ -13,10 +13,13 @@ function Separator({ }: React.ComponentProps) { return ( ); diff --git a/src/components/ui/sheet.tsx b/src/components/ui/sheet.tsx new file mode 100644 index 0000000..e8d5ec1 --- /dev/null +++ b/src/components/ui/sheet.tsx @@ -0,0 +1,139 @@ +'use client'; + +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) { + return ; +} + +function SheetTrigger({ + ...props +}: React.ComponentProps) { + return ; +} + +function SheetClose({ + ...props +}: React.ComponentProps) { + return ; +} + +function SheetPortal({ + ...props +}: React.ComponentProps) { + return ; +} + +function SheetOverlay({ + className, + ...props +}: React.ComponentProps) { + return ( + + ); +} + +function SheetContent({ + className, + children, + side = 'right', + ...props +}: React.ComponentProps & { + side?: 'top' | 'right' | 'bottom' | 'left'; +}) { + return ( + + + + {children} + + + Close + + + + ); +} + +function SheetHeader({ className, ...props }: React.ComponentProps<'div'>) { + return ( +
+ ); +} + +function SheetFooter({ className, ...props }: React.ComponentProps<'div'>) { + return ( +
+ ); +} + +function SheetTitle({ + className, + ...props +}: React.ComponentProps) { + return ( + + ); +} + +function SheetDescription({ + className, + ...props +}: React.ComponentProps) { + return ( + + ); +} + +export { + Sheet, + SheetTrigger, + SheetClose, + SheetContent, + SheetHeader, + SheetFooter, + SheetTitle, + SheetDescription, +}; diff --git a/src/components/ui/skeleton.tsx b/src/components/ui/skeleton.tsx new file mode 100644 index 0000000..a9344b2 --- /dev/null +++ b/src/components/ui/skeleton.tsx @@ -0,0 +1,13 @@ +import { cn } from '@/lib/utils'; + +function Skeleton({ className, ...props }: React.ComponentProps<'div'>) { + return ( +
+ ); +} + +export { Skeleton }; diff --git a/src/components/ui/tooltip.tsx b/src/components/ui/tooltip.tsx new file mode 100644 index 0000000..2b8b1d7 --- /dev/null +++ b/src/components/ui/tooltip.tsx @@ -0,0 +1,61 @@ +'use client'; + +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) { + return ( + + ); +} + +function Tooltip({ + ...props +}: React.ComponentProps) { + return ( + + + + ); +} + +function TooltipTrigger({ + ...props +}: React.ComponentProps) { + return ; +} + +function TooltipContent({ + className, + sideOffset = 0, + children, + ...props +}: React.ComponentProps) { + return ( + + + {children} + + + + ); +} + +export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }; diff --git a/src/components/wrappers/group-wrapper.tsx b/src/components/wrappers/group-wrapper.tsx new file mode 100644 index 0000000..3006c9a --- /dev/null +++ b/src/components/wrappers/group-wrapper.tsx @@ -0,0 +1,23 @@ +import { cn } from '@/lib/utils'; +import type * as React from 'react'; + +interface ScrollableSettingsWrapperProps { + className?: string; + title?: string; + children: React.ReactNode; +} + +export function GroupWrapper({ + className, + title, + children, +}: ScrollableSettingsWrapperProps) { + return ( +
+ {title} + {children} +
+ ); +} diff --git a/src/components/query-provider.tsx b/src/components/wrappers/query-provider.tsx similarity index 100% rename from src/components/query-provider.tsx rename to src/components/wrappers/query-provider.tsx diff --git a/src/components/wrappers/settings-scroll.tsx b/src/components/wrappers/settings-scroll.tsx index e0f7251..a647493 100644 --- a/src/components/wrappers/settings-scroll.tsx +++ b/src/components/wrappers/settings-scroll.tsx @@ -1,16 +1,16 @@ -import React from 'react'; +import { cn } from '@/lib/utils'; +import type * as React from 'react'; -interface ScrollableContentWrapperProps { - children: React.ReactNode; +interface ScrollableSettingsWrapperProps { className?: string; + children: React.ReactNode; } -export const ScrollableSettingsWrapper: React.FC< - ScrollableContentWrapperProps -> = ({ children, className = '' }) => { +export function ScrollableSettingsWrapper({ + className, + children, +}: ScrollableSettingsWrapperProps) { return ( -
- {children} -
+
{children}
); -}; +} diff --git a/src/components/wrappers/sidebar-provider.tsx b/src/components/wrappers/sidebar-provider.tsx new file mode 100644 index 0000000..3c9ff95 --- /dev/null +++ b/src/components/wrappers/sidebar-provider.tsx @@ -0,0 +1,23 @@ +'use client'; + +import React from 'react'; +import { SidebarProvider } from '../custom-ui/sidebar'; + +export default function SidebarProviderWrapper({ + defaultOpen, + children, +}: { + defaultOpen: boolean; + children: React.ReactNode; +}) { + const [open, setOpen] = React.useState(defaultOpen); + return ( + + {children} + + ); +} diff --git a/src/hooks/use-mobile.ts b/src/hooks/use-mobile.ts new file mode 100644 index 0000000..821f8ff --- /dev/null +++ b/src/hooks/use-mobile.ts @@ -0,0 +1,21 @@ +import * as React from 'react'; + +const MOBILE_BREAKPOINT = 768; + +export function useIsMobile() { + const [isMobile, setIsMobile] = React.useState( + undefined, + ); + + React.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; +} diff --git a/yarn.lock b/yarn.lock index 56de1d1..7d3866e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -543,15 +543,15 @@ __metadata: linkType: hard "@gerrit0/mini-shiki@npm:^3.2.2": - version: 3.6.0 - resolution: "@gerrit0/mini-shiki@npm:3.6.0" + version: 3.7.0 + resolution: "@gerrit0/mini-shiki@npm:3.7.0" dependencies: - "@shikijs/engine-oniguruma": "npm:^3.6.0" - "@shikijs/langs": "npm:^3.6.0" - "@shikijs/themes": "npm:^3.6.0" - "@shikijs/types": "npm:^3.6.0" + "@shikijs/engine-oniguruma": "npm:^3.7.0" + "@shikijs/langs": "npm:^3.7.0" + "@shikijs/themes": "npm:^3.7.0" + "@shikijs/types": "npm:^3.7.0" "@shikijs/vscode-textmate": "npm:^10.0.2" - checksum: 10c0/347456c9da8a1fadd3c1f63097da459a5f930ef4bca6431cce913a379012c551e061d0a94ff7a0f307215b87f2418b7c198a55fba888fc97fb02ab36247adf6b + checksum: 10c0/eb3f4900d841338077d839ebbc7f8722b13876a586cff7abc73295e956683724dd3371a9f990900184a2d069461965951b2604d677991badf3474262e7811384 languageName: node linkType: hard @@ -1299,6 +1299,55 @@ __metadata: languageName: node linkType: hard +"@radix-ui/react-avatar@npm:^1.1.10": + version: 1.1.10 + resolution: "@radix-ui/react-avatar@npm:1.1.10" + dependencies: + "@radix-ui/react-context": "npm:1.1.2" + "@radix-ui/react-primitive": "npm:2.1.3" + "@radix-ui/react-use-callback-ref": "npm:1.1.1" + "@radix-ui/react-use-is-hydrated": "npm:0.1.0" + "@radix-ui/react-use-layout-effect": "npm:1.1.1" + peerDependencies: + "@types/react": "*" + "@types/react-dom": "*" + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + "@types/react": + optional: true + "@types/react-dom": + optional: true + checksum: 10c0/9fb0cf9a9d0fdbeaa2efda476402fc09db2e6ff9cd9aa3ea1d315d9c9579840722a4833725cb196c455e0bd775dfe04221a4f6855685ce89d2133c42e2b07e5f + languageName: node + linkType: hard + +"@radix-ui/react-collapsible@npm:^1.1.11": + version: 1.1.11 + resolution: "@radix-ui/react-collapsible@npm:1.1.11" + dependencies: + "@radix-ui/primitive": "npm:1.1.2" + "@radix-ui/react-compose-refs": "npm:1.1.2" + "@radix-ui/react-context": "npm:1.1.2" + "@radix-ui/react-id": "npm:1.1.1" + "@radix-ui/react-presence": "npm:1.1.4" + "@radix-ui/react-primitive": "npm:2.1.3" + "@radix-ui/react-use-controllable-state": "npm:1.2.2" + "@radix-ui/react-use-layout-effect": "npm:1.1.1" + peerDependencies: + "@types/react": "*" + "@types/react-dom": "*" + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + "@types/react": + optional: true + "@types/react-dom": + optional: true + checksum: 10c0/fa2de539ef06e2b2d18acebb12a34ce1534ca88bd484b7359aac05534d1e551fe83eaafbf60915c00161bb370f0dc9fc303903133510dea0a59fd018155b7db5 + languageName: node + linkType: hard + "@radix-ui/react-collection@npm:1.1.7": version: 1.1.7 resolution: "@radix-ui/react-collection@npm:1.1.7" @@ -1321,7 +1370,7 @@ __metadata: languageName: node linkType: hard -"@radix-ui/react-compose-refs@npm:1.1.2": +"@radix-ui/react-compose-refs@npm:1.1.2, @radix-ui/react-compose-refs@npm:^1.1.1": version: 1.1.2 resolution: "@radix-ui/react-compose-refs@npm:1.1.2" peerDependencies: @@ -1347,6 +1396,38 @@ __metadata: languageName: node linkType: hard +"@radix-ui/react-dialog@npm:^1.1.14, @radix-ui/react-dialog@npm:^1.1.6": + version: 1.1.14 + resolution: "@radix-ui/react-dialog@npm:1.1.14" + dependencies: + "@radix-ui/primitive": "npm:1.1.2" + "@radix-ui/react-compose-refs": "npm:1.1.2" + "@radix-ui/react-context": "npm:1.1.2" + "@radix-ui/react-dismissable-layer": "npm:1.1.10" + "@radix-ui/react-focus-guards": "npm:1.1.2" + "@radix-ui/react-focus-scope": "npm:1.1.7" + "@radix-ui/react-id": "npm:1.1.1" + "@radix-ui/react-portal": "npm:1.1.9" + "@radix-ui/react-presence": "npm:1.1.4" + "@radix-ui/react-primitive": "npm:2.1.3" + "@radix-ui/react-slot": "npm:1.2.3" + "@radix-ui/react-use-controllable-state": "npm:1.2.2" + aria-hidden: "npm:^1.2.4" + react-remove-scroll: "npm:^2.6.3" + peerDependencies: + "@types/react": "*" + "@types/react-dom": "*" + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + "@types/react": + optional: true + "@types/react-dom": + optional: true + checksum: 10c0/ab7bc783510ed8fccfe91020b214f4a571d5a1d46d398faa33f4c151bc9f586c47483b307e72b67687b06694c194b3aa80dd1de728460fa765db9f3057690ba3 + languageName: node + linkType: hard + "@radix-ui/react-direction@npm:1.1.1": version: 1.1.1 resolution: "@radix-ui/react-direction@npm:1.1.1" @@ -1383,7 +1464,7 @@ __metadata: languageName: node linkType: hard -"@radix-ui/react-dropdown-menu@npm:^2.1.14": +"@radix-ui/react-dropdown-menu@npm:^2.1.15": version: 2.1.15 resolution: "@radix-ui/react-dropdown-menu@npm:2.1.15" dependencies: @@ -1469,7 +1550,7 @@ __metadata: languageName: node linkType: hard -"@radix-ui/react-id@npm:1.1.1": +"@radix-ui/react-id@npm:1.1.1, @radix-ui/react-id@npm:^1.1.0": version: 1.1.1 resolution: "@radix-ui/react-id@npm:1.1.1" dependencies: @@ -1539,6 +1620,39 @@ __metadata: languageName: node linkType: hard +"@radix-ui/react-popover@npm:^1.1.14": + version: 1.1.14 + resolution: "@radix-ui/react-popover@npm:1.1.14" + dependencies: + "@radix-ui/primitive": "npm:1.1.2" + "@radix-ui/react-compose-refs": "npm:1.1.2" + "@radix-ui/react-context": "npm:1.1.2" + "@radix-ui/react-dismissable-layer": "npm:1.1.10" + "@radix-ui/react-focus-guards": "npm:1.1.2" + "@radix-ui/react-focus-scope": "npm:1.1.7" + "@radix-ui/react-id": "npm:1.1.1" + "@radix-ui/react-popper": "npm:1.2.7" + "@radix-ui/react-portal": "npm:1.1.9" + "@radix-ui/react-presence": "npm:1.1.4" + "@radix-ui/react-primitive": "npm:2.1.3" + "@radix-ui/react-slot": "npm:1.2.3" + "@radix-ui/react-use-controllable-state": "npm:1.2.2" + aria-hidden: "npm:^1.2.4" + react-remove-scroll: "npm:^2.6.3" + peerDependencies: + "@types/react": "*" + "@types/react-dom": "*" + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + "@types/react": + optional: true + "@types/react-dom": + optional: true + checksum: 10c0/04e557bfcaab4887694d119555b101e16b8a4e99595541ff2cbe805c551be853cb02882a2ada04e6507ffc45bc092bc2b89704b7b79f5025251767d0b4f3230a + languageName: node + linkType: hard + "@radix-ui/react-popper@npm:1.2.7": version: 1.2.7 resolution: "@radix-ui/react-popper@npm:1.2.7" @@ -1607,7 +1721,7 @@ __metadata: languageName: node linkType: hard -"@radix-ui/react-primitive@npm:2.1.3": +"@radix-ui/react-primitive@npm:2.1.3, @radix-ui/react-primitive@npm:^2.0.2": version: 2.1.3 resolution: "@radix-ui/react-primitive@npm:2.1.3" dependencies: @@ -1719,7 +1833,7 @@ __metadata: languageName: node linkType: hard -"@radix-ui/react-separator@npm:^1.1.6": +"@radix-ui/react-separator@npm:^1.1.7": version: 1.1.7 resolution: "@radix-ui/react-separator@npm:1.1.7" dependencies: @@ -1738,7 +1852,7 @@ __metadata: languageName: node linkType: hard -"@radix-ui/react-slot@npm:1.2.3, @radix-ui/react-slot@npm:^1.2.2": +"@radix-ui/react-slot@npm:1.2.3, @radix-ui/react-slot@npm:^1.2.3": version: 1.2.3 resolution: "@radix-ui/react-slot@npm:1.2.3" dependencies: @@ -1804,6 +1918,36 @@ __metadata: languageName: node linkType: hard +"@radix-ui/react-tooltip@npm:^1.2.7": + version: 1.2.7 + resolution: "@radix-ui/react-tooltip@npm:1.2.7" + dependencies: + "@radix-ui/primitive": "npm:1.1.2" + "@radix-ui/react-compose-refs": "npm:1.1.2" + "@radix-ui/react-context": "npm:1.1.2" + "@radix-ui/react-dismissable-layer": "npm:1.1.10" + "@radix-ui/react-id": "npm:1.1.1" + "@radix-ui/react-popper": "npm:1.2.7" + "@radix-ui/react-portal": "npm:1.1.9" + "@radix-ui/react-presence": "npm:1.1.4" + "@radix-ui/react-primitive": "npm:2.1.3" + "@radix-ui/react-slot": "npm:1.2.3" + "@radix-ui/react-use-controllable-state": "npm:1.2.2" + "@radix-ui/react-visually-hidden": "npm:1.2.3" + peerDependencies: + "@types/react": "*" + "@types/react-dom": "*" + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + "@types/react": + optional: true + "@types/react-dom": + optional: true + checksum: 10c0/28798d576c6ffec4f11120cd563aa9d5ab9afb9a37dc18778176442756d026c8c46eec1ddc647b2b5914045495fcb89f82530106e91acb55776b7d6b1a10fb57 + languageName: node + linkType: hard + "@radix-ui/react-use-callback-ref@npm:1.1.1": version: 1.1.1 resolution: "@radix-ui/react-use-callback-ref@npm:1.1.1" @@ -1863,6 +2007,21 @@ __metadata: languageName: node linkType: hard +"@radix-ui/react-use-is-hydrated@npm:0.1.0": + version: 0.1.0 + resolution: "@radix-ui/react-use-is-hydrated@npm:0.1.0" + dependencies: + use-sync-external-store: "npm:^1.5.0" + peerDependencies: + "@types/react": "*" + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + "@types/react": + optional: true + checksum: 10c0/635079bafe32829fc7405895154568ea94a22689b170489fd6d77668e4885e72ff71ed6d0ea3d602852841ef0f1927aa400fee2178d5dfbeb8bc9297da7d6498 + languageName: node + linkType: hard + "@radix-ui/react-use-layout-effect@npm:1.1.1": version: 1.1.1 resolution: "@radix-ui/react-use-layout-effect@npm:1.1.1" @@ -1966,7 +2125,7 @@ __metadata: languageName: node linkType: hard -"@shikijs/engine-oniguruma@npm:^3.6.0": +"@shikijs/engine-oniguruma@npm:^3.7.0": version: 3.7.0 resolution: "@shikijs/engine-oniguruma@npm:3.7.0" dependencies: @@ -1976,7 +2135,7 @@ __metadata: languageName: node linkType: hard -"@shikijs/langs@npm:^3.6.0": +"@shikijs/langs@npm:^3.7.0": version: 3.7.0 resolution: "@shikijs/langs@npm:3.7.0" dependencies: @@ -1985,7 +2144,7 @@ __metadata: languageName: node linkType: hard -"@shikijs/themes@npm:^3.6.0": +"@shikijs/themes@npm:^3.7.0": version: 3.7.0 resolution: "@shikijs/themes@npm:3.7.0" dependencies: @@ -1994,7 +2153,7 @@ __metadata: languageName: node linkType: hard -"@shikijs/types@npm:3.7.0, @shikijs/types@npm:^3.6.0": +"@shikijs/types@npm:3.7.0, @shikijs/types@npm:^3.7.0": version: 3.7.0 resolution: "@shikijs/types@npm:3.7.0" dependencies: @@ -3662,7 +3821,7 @@ __metadata: languageName: node linkType: hard -"array-includes@npm:^3.1.6, array-includes@npm:^3.1.8": +"array-includes@npm:^3.1.6, array-includes@npm:^3.1.8, array-includes@npm:^3.1.9": version: 3.1.9 resolution: "array-includes@npm:3.1.9" dependencies: @@ -3699,7 +3858,7 @@ __metadata: languageName: node linkType: hard -"array.prototype.findlastindex@npm:^1.2.5": +"array.prototype.findlastindex@npm:^1.2.6": version: 1.2.6 resolution: "array.prototype.findlastindex@npm:1.2.6" dependencies: @@ -3714,7 +3873,7 @@ __metadata: languageName: node linkType: hard -"array.prototype.flat@npm:^1.3.1, array.prototype.flat@npm:^1.3.2": +"array.prototype.flat@npm:^1.3.1, array.prototype.flat@npm:^1.3.3": version: 1.3.3 resolution: "array.prototype.flat@npm:1.3.3" dependencies: @@ -4058,6 +4217,21 @@ __metadata: languageName: node linkType: hard +"cmdk@npm:^1.1.1": + version: 1.1.1 + resolution: "cmdk@npm:1.1.1" + dependencies: + "@radix-ui/react-compose-refs": "npm:^1.1.1" + "@radix-ui/react-dialog": "npm:^1.1.6" + "@radix-ui/react-id": "npm:^1.1.0" + "@radix-ui/react-primitive": "npm:^2.0.2" + peerDependencies: + react: ^18 || ^19 || ^19.0.0-rc + react-dom: ^18 || ^19 || ^19.0.0-rc + checksum: 10c0/5605ac4396ec9bc65c82f954da19dd89a0636a54026df72780e2470da1381f9d57434a80a53f2d57eaa4e759660a3ebba9232b74258dc09970576591eae03116 + languageName: node + linkType: hard + "color-convert@npm:^2.0.1": version: 2.0.1 resolution: "color-convert@npm:2.0.1" @@ -4792,7 +4966,7 @@ __metadata: languageName: node linkType: hard -"eslint-module-utils@npm:^2.12.0": +"eslint-module-utils@npm:^2.12.1": version: 2.12.1 resolution: "eslint-module-utils@npm:2.12.1" dependencies: @@ -4805,31 +4979,31 @@ __metadata: linkType: hard "eslint-plugin-import@npm:^2.31.0": - version: 2.31.0 - resolution: "eslint-plugin-import@npm:2.31.0" + version: 2.32.0 + resolution: "eslint-plugin-import@npm:2.32.0" dependencies: "@rtsao/scc": "npm:^1.1.0" - array-includes: "npm:^3.1.8" - array.prototype.findlastindex: "npm:^1.2.5" - array.prototype.flat: "npm:^1.3.2" - array.prototype.flatmap: "npm:^1.3.2" + array-includes: "npm:^3.1.9" + array.prototype.findlastindex: "npm:^1.2.6" + array.prototype.flat: "npm:^1.3.3" + array.prototype.flatmap: "npm:^1.3.3" debug: "npm:^3.2.7" doctrine: "npm:^2.1.0" eslint-import-resolver-node: "npm:^0.3.9" - eslint-module-utils: "npm:^2.12.0" + eslint-module-utils: "npm:^2.12.1" hasown: "npm:^2.0.2" - is-core-module: "npm:^2.15.1" + is-core-module: "npm:^2.16.1" is-glob: "npm:^4.0.3" minimatch: "npm:^3.1.2" object.fromentries: "npm:^2.0.8" object.groupby: "npm:^1.0.3" - object.values: "npm:^1.2.0" + object.values: "npm:^1.2.1" semver: "npm:^6.3.1" - string.prototype.trimend: "npm:^1.0.8" + string.prototype.trimend: "npm:^1.0.9" tsconfig-paths: "npm:^3.15.0" peerDependencies: eslint: ^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8 || ^9 - checksum: 10c0/e21d116ddd1900e091ad120b3eb68c5dd5437fe2c930f1211781cd38b246f090a6b74d5f3800b8255a0ed29782591521ad44eb21c5534960a8f1fb4040fd913a + checksum: 10c0/bfb1b8fc8800398e62ddfefbf3638d185286edfed26dfe00875cc2846d954491b4f5112457831588b757fa789384e1ae585f812614c4797f0499fa234fd4a48b languageName: node linkType: hard @@ -5758,7 +5932,7 @@ __metadata: languageName: node linkType: hard -"is-core-module@npm:^2.13.0, is-core-module@npm:^2.15.1, is-core-module@npm:^2.16.0": +"is-core-module@npm:^2.13.0, is-core-module@npm:^2.16.0, is-core-module@npm:^2.16.1": version: 2.16.1 resolution: "is-core-module@npm:2.16.1" dependencies: @@ -6454,12 +6628,12 @@ __metadata: languageName: node linkType: hard -"lucide-react@npm:^0.511.0": - version: 0.511.0 - resolution: "lucide-react@npm:0.511.0" +"lucide-react@npm:^0.515.0": + version: 0.515.0 + resolution: "lucide-react@npm:0.515.0" peerDependencies: react: ^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0 - checksum: 10c0/bf09dd73cf2233abea90506ad31a91739555d761062722acbe045cb73e274f035b196472de0971a8a8f0645b2b54e3f21b8c1980fe87c909ca93171a9c28428a + checksum: 10c0/00485e09ab3d0bbb34797b1f368c269e8708522b6e2f46fd84dd5bd99741546487be9a65a260f274e8049b81cc37687566e26132f5752352c8d9bc8e5d0b3dea languageName: node linkType: hard @@ -6549,15 +6723,20 @@ __metadata: "@fortawesome/react-fontawesome": "npm:^0.2.2" "@hookform/resolvers": "npm:^5.0.1" "@prisma/client": "npm:^6.9.0" - "@radix-ui/react-dropdown-menu": "npm:^2.1.14" + "@radix-ui/react-avatar": "npm:^1.1.10" + "@radix-ui/react-collapsible": "npm:^1.1.11" + "@radix-ui/react-dialog": "npm:^1.1.14" + "@radix-ui/react-dropdown-menu": "npm:^2.1.15" "@radix-ui/react-hover-card": "npm:^1.1.13" "@radix-ui/react-label": "npm:^2.1.6" + "@radix-ui/react-popover": "npm:^1.1.14" "@radix-ui/react-scroll-area": "npm:^1.2.8" "@radix-ui/react-select": "npm:^2.2.4" - "@radix-ui/react-separator": "npm:^1.1.6" - "@radix-ui/react-slot": "npm:^1.2.2" + "@radix-ui/react-separator": "npm:^1.1.7" + "@radix-ui/react-slot": "npm:^1.2.3" "@radix-ui/react-switch": "npm:^1.2.4" "@radix-ui/react-tabs": "npm:^1.1.11" + "@radix-ui/react-tooltip": "npm:^1.2.7" "@tailwindcss/postcss": "npm:4.1.10" "@tanstack/react-query": "npm:^5.80.7" "@types/node": "npm:22.15.32" @@ -6568,11 +6747,12 @@ __metadata: bcryptjs: "npm:^3.0.2" class-variance-authority: "npm:^0.7.1" clsx: "npm:^2.1.1" + cmdk: "npm:^1.1.1" dotenv-cli: "npm:8.0.0" eslint: "npm:9.29.0" eslint-config-next: "npm:15.3.4" eslint-config-prettier: "npm:10.1.5" - lucide-react: "npm:^0.511.0" + lucide-react: "npm:^0.515.0" next: "npm:15.4.0-canary.92" next-auth: "npm:^5.0.0-beta.25" next-themes: "npm:^0.4.6" @@ -7185,7 +7365,7 @@ __metadata: languageName: node linkType: hard -"object.values@npm:^1.1.6, object.values@npm:^1.2.0, object.values@npm:^1.2.1": +"object.values@npm:^1.1.6, object.values@npm:^1.2.1": version: 1.2.1 resolution: "object.values@npm:1.2.1" dependencies: @@ -8569,7 +8749,7 @@ __metadata: languageName: node linkType: hard -"string.prototype.trimend@npm:^1.0.8, string.prototype.trimend@npm:^1.0.9": +"string.prototype.trimend@npm:^1.0.9": version: 1.0.9 resolution: "string.prototype.trimend@npm:1.0.9" dependencies: @@ -9294,7 +9474,7 @@ __metadata: languageName: node linkType: hard -"use-sync-external-store@npm:^1.4.0": +"use-sync-external-store@npm:^1.4.0, use-sync-external-store@npm:^1.5.0": version: 1.5.0 resolution: "use-sync-external-store@npm:1.5.0" peerDependencies: