Restore Ultracite + fix sidebar (#1233)

components/visibility-selector.tsx

@@ -1,23 +1,23 @@
-'use client';
+"use client";
 
-import { type ReactNode, useMemo, useState } from 'react';
-import { Button } from '@/components/ui/button';
+import { type ReactNode, useMemo, useState } from "react";
+import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-} from '@/components/ui/dropdown-menu';
-import { cn } from '@/lib/utils';
+} from "@/components/ui/dropdown-menu";
+import { useChatVisibility } from "@/hooks/use-chat-visibility";
+import { cn } from "@/lib/utils";
 import {
   CheckCircleFillIcon,
   ChevronDownIcon,
   GlobeIcon,
   LockIcon,
-} from './icons';
-import { useChatVisibility } from '@/hooks/use-chat-visibility';
+} from "./icons";
 
-export type VisibilityType = 'private' | 'public';
+export type VisibilityType = "private" | "public";
 
 const visibilities: Array<{
   id: VisibilityType;
@@ -26,15 +26,15 @@ const visibilities: Array<{
   icon: ReactNode;
 }> = [
   {
-    id: 'private',
-    label: 'Private',
-    description: 'Only you can access this chat',
+    id: "private",
+    label: "Private",
+    description: "Only you can access this chat",
     icon: <LockIcon />,
   },
   {
-    id: 'public',
-    label: 'Public',
-    description: 'Anyone with the link can access this chat',
+    id: "public",
+    label: "Public",
+    description: "Anyone with the link can access this chat",
     icon: <GlobeIcon />,
   },
 ];
@@ -56,40 +56,40 @@ export function VisibilitySelector({
 
   const selectedVisibility = useMemo(
     () => visibilities.find((visibility) => visibility.id === visibilityType),
-    [visibilityType],
+    [visibilityType]
   );
 
   return (
-    <DropdownMenu open={open} onOpenChange={setOpen}>
+    <DropdownMenu onOpenChange={setOpen} open={open}>
       <DropdownMenuTrigger
         asChild
         className={cn(
-          'w-fit data-[state=open]:bg-accent data-[state=open]:text-accent-foreground',
-          className,
+          "w-fit data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+          className
         )}
       >
         <Button
+          className="hidden h-8 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 md:flex md:h-fit md:px-2"
           data-testid="visibility-selector"
           variant="outline"
-          className="hidden h-8 md:flex md:h-fit md:px-2 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0"
         >
           {selectedVisibility?.icon}
           <span className="md:sr-only">{selectedVisibility?.label}</span>
-          <ChevronDownIcon/>
+          <ChevronDownIcon />
         </Button>
       </DropdownMenuTrigger>
 
       <DropdownMenuContent align="start" className="min-w-[300px]">
         {visibilities.map((visibility) => (
           <DropdownMenuItem
+            className="group/item flex flex-row items-center justify-between gap-4"
+            data-active={visibility.id === visibilityType}
             data-testid={`visibility-selector-item-${visibility.id}`}
             key={visibility.id}
             onSelect={() => {
               setVisibilityType(visibility.id);
               setOpen(false);
             }}
-            className="group/item flex flex-row items-center justify-between gap-4"
-            data-active={visibility.id === visibilityType}
           >
             <div className="flex flex-col items-start gap-1">
               {visibility.label}