From a6f74e0c22bb394f4a74d34b930f10f99f24a1ad Mon Sep 17 00:00:00 2001 From: SomeCodecat <88855796+SomeCodecat@users.noreply.github.com> Date: Mon, 16 Jun 2025 13:01:20 +0200 Subject: [PATCH 1/4] feat: add Radix UI components and implement sidebar functionality - Added new Radix UI components: Dialog, Tooltip, Separator, and updated existing components. - Introduced a Sidebar component with collapsible functionality and mobile responsiveness. - Implemented a custom hook `useIsMobile` to manage mobile state. - Updated package dependencies in package.json and yarn.lock for new components. - Created utility components such as Button, Skeleton, and Input for consistent styling. feat: add AppSidebar component with collapsible functionality and sidebar menu - Introduced AppSidebar component for a customizable sidebar layout. - Implemented collapsible sections using Radix UI's Collapsible component. - Added sidebar menu items with icons and links for navigation. - Created Sidebar UI components including SidebarHeader, SidebarFooter, and SidebarMenu. - Integrated ThemePicker for theme selection within the sidebar. - Updated sidebar styles and layout for better responsiveness. chore: add @radix-ui/react-collapsible dependency - Added @radix-ui/react-collapsible package to manage collapsible UI elements. --- package.json | 9 +- src/app/{ => (main)}/home/page.tsx | 4 +- src/app/(main)/layout.tsx | 23 + src/app/globals.css | 18 +- src/components/custom-ui/app-sidebar.tsx | 147 ++++ src/components/misc/header.tsx | 23 + src/components/misc/logo.tsx | 1 + src/components/ui/collapsible.tsx | 33 + src/components/ui/separator.tsx | 7 +- src/components/ui/sheet.tsx | 139 ++++ src/components/ui/sidebar.tsx | 725 +++++++++++++++++++ src/components/ui/skeleton.tsx | 13 + src/components/ui/tooltip.tsx | 61 ++ src/components/wrappers/sidebar-provider.tsx | 23 + src/hooks/use-mobile.ts | 19 + yarn.lock | 482 +++++++----- 16 files changed, 1520 insertions(+), 207 deletions(-) rename src/app/{ => (main)}/home/page.tsx (81%) create mode 100644 src/app/(main)/layout.tsx create mode 100644 src/components/custom-ui/app-sidebar.tsx create mode 100644 src/components/misc/header.tsx create mode 100644 src/components/ui/collapsible.tsx create mode 100644 src/components/ui/sheet.tsx create mode 100644 src/components/ui/sidebar.tsx create mode 100644 src/components/ui/skeleton.tsx create mode 100644 src/components/ui/tooltip.tsx create mode 100644 src/components/wrappers/sidebar-provider.tsx create mode 100644 src/hooks/use-mobile.ts diff --git a/package.json b/package.json index f943b16..1623ef9 100644 --- a/package.json +++ b/package.json @@ -27,20 +27,23 @@ "@fortawesome/react-fontawesome": "^0.2.2", "@hookform/resolvers": "^5.0.1", "@prisma/client": "^6.9.0", + "@radix-ui/react-collapsible": "^1.1.11", + "@radix-ui/react-dialog": "^1.1.14", "@radix-ui/react-dropdown-menu": "^2.1.14", "@radix-ui/react-hover-card": "^1.1.13", "@radix-ui/react-label": "^2.1.6", "@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", + "lucide-react": "^0.515.0", "next": "15.4.0-canary.95", "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..a5f7eaf 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -55,6 +55,8 @@ --card: var(--neutral-800); + --sidebar-width-icon: 32px; + /* ------------------- */ --foreground: oklch(0.13 0.028 261.692); @@ -95,17 +97,17 @@ --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); @@ -339,17 +341,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/components/custom-ui/app-sidebar.tsx b/src/components/custom-ui/app-sidebar.tsx new file mode 100644 index 0000000..b279c73 --- /dev/null +++ b/src/components/custom-ui/app-sidebar.tsx @@ -0,0 +1,147 @@ +'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/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 { ThemePicker } from '@/components/misc/theme-picker'; + +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: '#', + icon: CalendarClock, + }, +]; + +export function AppSidebar() { + return ( + <> + + + + + + + + + + + + {' '} + + Favorites + + + + + + + + + + + + + {items.map((item) => ( + + + + + + {item.title} + + + + + ))} + + + + + + + + + New Event + + + + + + + + ); +} diff --git a/src/components/misc/header.tsx b/src/components/misc/header.tsx new file mode 100644 index 0000000..dbf8a1f --- /dev/null +++ b/src/components/misc/header.tsx @@ -0,0 +1,23 @@ +import { SidebarTrigger } from '@/components/ui/sidebar'; +import { ThemePicker } from '@/components/misc/theme-picker'; + +export default function Header({ + children, +}: Readonly<{ + children: React.ReactNode; +}>) { + return ( +
+
+ + + + Search + + + +
+
{children}
+
+ ); +} diff --git a/src/components/misc/logo.tsx b/src/components/misc/logo.tsx index 129adef..739fc90 100644 --- a/src/components/misc/logo.tsx +++ b/src/components/misc/logo.tsx @@ -90,6 +90,7 @@ export default function Logo({ return ( {alt) { + return ; +} + +function CollapsibleTrigger({ + ...props +}: React.ComponentProps) { + return ( + + ); +} + +function CollapsibleContent({ + ...props +}: React.ComponentProps) { + return ( + + ); +} + +export { Collapsible, CollapsibleTrigger, CollapsibleContent }; 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..84649ad --- /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/sidebar.tsx b/src/components/ui/sidebar.tsx new file mode 100644 index 0000000..6b68b8f --- /dev/null +++ b/src/components/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 ( + + + + + ); +} diff --git a/src/components/custom-ui/app-sidebar.tsx b/src/components/custom-ui/app-sidebar.tsx index ae00c9b..4861363 100644 --- a/src/components/custom-ui/app-sidebar.tsx +++ b/src/components/custom-ui/app-sidebar.tsx @@ -6,27 +6,27 @@ import { SidebarContent, SidebarFooter, SidebarGroup, - SidebarGroupAction, + // SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, - SidebarInput, - SidebarInset, + // SidebarInput, + // SidebarInset, SidebarMenu, - SidebarMenuAction, - SidebarMenuBadge, + // SidebarMenuAction, + // SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, - SidebarMenuSkeleton, - SidebarMenuSub, - SidebarMenuSubButton, - SidebarMenuSubItem, - SidebarProvider, - SidebarRail, - SidebarSeparator, - SidebarTrigger, - useSidebar, -} from '@/components/ui/sidebar'; + // SidebarMenuSkeleton, + // SidebarMenuSub, + // SidebarMenuSubButton, + // SidebarMenuSubItem, + // SidebarProvider, + // SidebarRail, + // SidebarSeparator, + // SidebarTrigger, + // useSidebar, +} from '@/components/custom-ui/sidebar'; import { ChevronDown } from 'lucide-react'; import { @@ -39,8 +39,6 @@ import Logo from '@/components/misc/logo'; import Link from 'next/link'; -import { ThemePicker } from '@/components/misc/theme-picker'; - import { Star, CalendarDays, diff --git a/src/components/ui/sidebar.tsx b/src/components/custom-ui/sidebar.tsx similarity index 99% rename from src/components/ui/sidebar.tsx rename to src/components/custom-ui/sidebar.tsx index 6b68b8f..11228cb 100644 --- a/src/components/ui/sidebar.tsx +++ b/src/components/custom-ui/sidebar.tsx @@ -466,7 +466,7 @@ function SidebarMenuItem({ className, ...props }: React.ComponentProps<'li'>) {
  • ); diff --git a/src/components/misc/header.tsx b/src/components/misc/header.tsx index dbf8a1f..ed53953 100644 --- a/src/components/misc/header.tsx +++ b/src/components/misc/header.tsx @@ -1,5 +1,22 @@ -import { SidebarTrigger } from '@/components/ui/sidebar'; +import { SidebarTrigger } from '@/components/custom-ui/sidebar'; import { ThemePicker } from '@/components/misc/theme-picker'; +import { NotificationButton } from '@/components/buttons/notification-button'; + +import { BellRing, Inbox } from 'lucide-react'; +import UserDropdown from '@/components/misc/user-dropdown'; + +const items = [ + { + title: 'Calendar', + url: '#', + icon: Inbox, + }, + { + title: 'Friends', + url: '#', + icon: BellRing, + }, +]; export default function Header({ children, @@ -8,13 +25,24 @@ export default function Header({ }>) { return (
    -
    +
    Search - + + {items.map((item) => ( + + + + ))} +
    {children}
    diff --git a/src/components/misc/nav-user.tsx b/src/components/misc/nav-user.tsx new file mode 100644 index 0000000..53ab582 --- /dev/null +++ b/src/components/misc/nav-user.tsx @@ -0,0 +1,110 @@ +'use client'; + +import { + BadgeCheck, + Bell, + ChevronsUpDown, + CreditCard, + LogOut, + Sparkles, +} from 'lucide-react'; + +import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'; +import { + DropdownMenu, + DropdownMenuContent, + DropdownMenuGroup, + DropdownMenuItem, + DropdownMenuLabel, + DropdownMenuSeparator, + DropdownMenuTrigger, +} from '@/components/ui/dropdown-menu'; +import { + SidebarMenu, + SidebarMenuButton, + SidebarMenuItem, + useSidebar, +} from '@/components/custom-ui/sidebar'; + +export function NavUser({ + user, +}: { + user: { + name: string; + email: string; + avatar: string; + }; +}) { + const { isMobile } = useSidebar(); + + return ( + + + + + + + + CN + +
    + {user.name} + {user.email} +
    + +     +     + + +
    + + + CN + +
    + {user.name} + {user.email} +
    +
    +     + + + + + Upgrade to Pro + + + + + + + Account + + + + Billing + + + + Notifications + + + + + + Log out + +     +     +     +     + ); +} diff --git a/src/components/misc/notification-dot.tsx b/src/components/misc/notification-dot.tsx new file mode 100644 index 0000000..a918188 --- /dev/null +++ b/src/components/misc/notification-dot.tsx @@ -0,0 +1,35 @@ +import { cn } from '@/lib/utils'; +import { cva, type VariantProps } from 'class-variance-authority'; +import { CircleSmall } from 'lucide-react'; + +const dotVariants = cva('', { + variants: { + variant: { + neutral: 'fill-neutral-900', + active: 'fill-red-600 stroke-red-600', + hidden: 'hidden', + }, + }, + defaultVariants: { + variant: 'hidden', + }, +}); + +function NotificationDot({ + className, + dotVariant, + ...props +}: { + className: string; + dotVariant: VariantProps['variant']; +}) { + return ( + + ); +} + +export type NDot = VariantProps['variant']; +export { NotificationDot, dotVariants }; diff --git a/src/components/misc/user-card.tsx b/src/components/misc/user-card.tsx new file mode 100644 index 0000000..faefc35 --- /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..8f5aa05 --- /dev/null +++ b/src/components/misc/user-dropdown.tsx @@ -0,0 +1,59 @@ +'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/sheet.tsx b/src/components/ui/sheet.tsx index 84649ad..e8d5ec1 100644 --- a/src/components/ui/sheet.tsx +++ b/src/components/ui/sheet.tsx @@ -1,31 +1,31 @@ -"use client" +'use client'; -import * as React from "react" -import * as SheetPrimitive from "@radix-ui/react-dialog" -import { XIcon } from "lucide-react" +import * as React from 'react'; +import * as SheetPrimitive from '@radix-ui/react-dialog'; +import { XIcon } from 'lucide-react'; -import { cn } from "@/lib/utils" +import { cn } from '@/lib/utils'; function Sheet({ ...props }: React.ComponentProps) { - return + return ; } function SheetTrigger({ ...props }: React.ComponentProps) { - return + return ; } function SheetClose({ ...props }: React.ComponentProps) { - return + return ; } function SheetPortal({ ...props }: React.ComponentProps) { - return + return ; } function SheetOverlay({ @@ -34,71 +34,71 @@ function SheetOverlay({ }: React.ComponentProps) { return ( - ) + ); } function SheetContent({ className, children, - side = "right", + side = 'right', ...props }: React.ComponentProps & { - side?: "top" | "right" | "bottom" | "left" + side?: 'top' | 'right' | 'bottom' | 'left'; }) { return ( {children} - - - Close + + + Close - ) + ); } -function SheetHeader({ className, ...props }: React.ComponentProps<"div">) { +function SheetHeader({ className, ...props }: React.ComponentProps<'div'>) { return (
    - ) + ); } -function SheetFooter({ className, ...props }: React.ComponentProps<"div">) { +function SheetFooter({ className, ...props }: React.ComponentProps<'div'>) { return (
    - ) + ); } function SheetTitle({ @@ -107,11 +107,11 @@ function SheetTitle({ }: React.ComponentProps) { return ( - ) + ); } function SheetDescription({ @@ -120,11 +120,11 @@ function SheetDescription({ }: React.ComponentProps) { return ( - ) + ); } export { @@ -136,4 +136,4 @@ export { SheetFooter, SheetTitle, SheetDescription, -} +}; diff --git a/src/components/ui/skeleton.tsx b/src/components/ui/skeleton.tsx index 32ea0ef..a9344b2 100644 --- a/src/components/ui/skeleton.tsx +++ b/src/components/ui/skeleton.tsx @@ -1,13 +1,13 @@ -import { cn } from "@/lib/utils" +import { cn } from '@/lib/utils'; -function Skeleton({ className, ...props }: React.ComponentProps<"div">) { +function Skeleton({ className, ...props }: React.ComponentProps<'div'>) { return (
    - ) + ); } -export { Skeleton } +export { Skeleton }; diff --git a/src/components/ui/tooltip.tsx b/src/components/ui/tooltip.tsx index 4ee26b3..2b8b1d7 100644 --- a/src/components/ui/tooltip.tsx +++ b/src/components/ui/tooltip.tsx @@ -1,9 +1,9 @@ -"use client" +'use client'; -import * as React from "react" -import * as TooltipPrimitive from "@radix-ui/react-tooltip" +import * as React from 'react'; +import * as TooltipPrimitive from '@radix-ui/react-tooltip'; -import { cn } from "@/lib/utils" +import { cn } from '@/lib/utils'; function TooltipProvider({ delayDuration = 0, @@ -11,11 +11,11 @@ function TooltipProvider({ }: React.ComponentProps) { return ( - ) + ); } function Tooltip({ @@ -23,15 +23,15 @@ function Tooltip({ }: React.ComponentProps) { return ( - + - ) + ); } function TooltipTrigger({ ...props }: React.ComponentProps) { - return + return ; } function TooltipContent({ @@ -43,19 +43,19 @@ function TooltipContent({ return ( {children} - + - ) + ); } -export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider } +export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }; 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/sidebar-provider.tsx b/src/components/wrappers/sidebar-provider.tsx index 3873fa4..3c9ff95 100644 --- a/src/components/wrappers/sidebar-provider.tsx +++ b/src/components/wrappers/sidebar-provider.tsx @@ -1,7 +1,7 @@ 'use client'; import React from 'react'; -import { SidebarProvider } from '../ui/sidebar'; +import { SidebarProvider } from '../custom-ui/sidebar'; export default function SidebarProviderWrapper({ defaultOpen, diff --git a/src/hooks/use-mobile.ts b/src/hooks/use-mobile.ts index 2b0fe1d..821f8ff 100644 --- a/src/hooks/use-mobile.ts +++ b/src/hooks/use-mobile.ts @@ -1,19 +1,21 @@ -import * as React from "react" +import * as React from 'react'; -const MOBILE_BREAKPOINT = 768 +const MOBILE_BREAKPOINT = 768; export function useIsMobile() { - const [isMobile, setIsMobile] = React.useState(undefined) + const [isMobile, setIsMobile] = React.useState( + undefined, + ); React.useEffect(() => { - const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`) + 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) - }, []) + setIsMobile(window.innerWidth < MOBILE_BREAKPOINT); + }; + mql.addEventListener('change', onChange); + setIsMobile(window.innerWidth < MOBILE_BREAKPOINT); + return () => mql.removeEventListener('change', onChange); + }, []); - return !!isMobile + return !!isMobile; } diff --git a/yarn.lock b/yarn.lock index 3328163..ba978f0 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1299,6 +1299,29 @@ __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" @@ -1441,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: @@ -1951,6 +1974,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" @@ -6637,9 +6675,10 @@ __metadata: "@fortawesome/react-fontawesome": "npm:^0.2.2" "@hookform/resolvers": "npm:^5.0.1" "@prisma/client": "npm:^6.9.0" + "@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.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-scroll-area": "npm:^1.2.8" @@ -9394,7 +9433,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: From 8bee6ede3fc144c0c3013e7c3c448565f2befaef Mon Sep 17 00:00:00 2001 From: SomeCodecat <88855796+SomeCodecat@users.noreply.github.com> Date: Wed, 25 Jun 2025 12:01:04 +0200 Subject: [PATCH 4/4] refactor: remove unused imports from notification button and user dropdown components --- src/components/buttons/notification-button.tsx | 9 --------- src/components/custom-ui/app-sidebar.tsx | 14 -------------- src/components/misc/user-dropdown.tsx | 7 ------- 3 files changed, 30 deletions(-) diff --git a/src/components/buttons/notification-button.tsx b/src/components/buttons/notification-button.tsx index 0b718f9..f41f325 100644 --- a/src/components/buttons/notification-button.tsx +++ b/src/components/buttons/notification-button.tsx @@ -2,15 +2,6 @@ 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'; diff --git a/src/components/custom-ui/app-sidebar.tsx b/src/components/custom-ui/app-sidebar.tsx index 4861363..f823970 100644 --- a/src/components/custom-ui/app-sidebar.tsx +++ b/src/components/custom-ui/app-sidebar.tsx @@ -6,26 +6,12 @@ import { 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'; diff --git a/src/components/misc/user-dropdown.tsx b/src/components/misc/user-dropdown.tsx index 8f5aa05..e55f4bb 100644 --- a/src/components/misc/user-dropdown.tsx +++ b/src/components/misc/user-dropdown.tsx @@ -5,15 +5,8 @@ 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';