Restore Ultracite + fix sidebar (#1233)

components/elements/web-preview.tsx

@@ -1,22 +1,22 @@
-'use client';
+"use client";
 
-import { Button } from '@/components/ui/button';
+import { ChevronDownIcon } from "lucide-react";
+import type { ComponentProps, ReactNode } from "react";
+import { createContext, useContext, useState } from "react";
+import { Button } from "@/components/ui/button";
 import {
   Collapsible,
   CollapsibleContent,
   CollapsibleTrigger,
-} from '@/components/ui/collapsible';
-import { Input } from '@/components/ui/input';
+} from "@/components/ui/collapsible";
+import { Input } from "@/components/ui/input";
 import {
   Tooltip,
   TooltipContent,
   TooltipProvider,
   TooltipTrigger,
-} from '@/components/ui/tooltip';
-import { cn } from '@/lib/utils';
-import { ChevronDownIcon } from 'lucide-react';
-import type { ComponentProps, ReactNode } from 'react';
-import { createContext, useContext, useState } from 'react';
+} from "@/components/ui/tooltip";
+import { cn } from "@/lib/utils";
 
 export type WebPreviewContextValue = {
   url: string;
@@ -30,12 +30,12 @@ const WebPreviewContext = createContext<WebPreviewContextValue | null>(null);
 const useWebPreview = () => {
   const context = useContext(WebPreviewContext);
   if (!context) {
-    throw new Error('WebPreview components must be used within a WebPreview');
+    throw new Error("WebPreview components must be used within a WebPreview");
   }
   return context;
 };
 
-export type WebPreviewProps = ComponentProps<'div'> & {
+export type WebPreviewProps = ComponentProps<"div"> & {
   defaultUrl?: string;
   onUrlChange?: (url: string) => void;
 };
@@ -43,7 +43,7 @@ export type WebPreviewProps = ComponentProps<'div'> & {
 export const WebPreview = ({
   className,
   children,
-  defaultUrl = '',
+  defaultUrl = "",
   onUrlChange,
   ...props
 }: WebPreviewProps) => {
@@ -66,8 +66,8 @@ export const WebPreview = ({
     <WebPreviewContext.Provider value={contextValue}>
       <div
         className={cn(
-          'flex size-full flex-col rounded-lg border bg-card',
-          className,
+          "flex size-full flex-col rounded-lg border bg-card",
+          className
         )}
         {...props}
       >
@@ -77,7 +77,7 @@ export const WebPreview = ({
   );
 };
 
-export type WebPreviewNavigationProps = ComponentProps<'div'>;
+export type WebPreviewNavigationProps = ComponentProps<"div">;
 
 export const WebPreviewNavigation = ({
   className,
@@ -85,7 +85,7 @@ export const WebPreviewNavigation = ({
   ...props
 }: WebPreviewNavigationProps) => (
   <div
-    className={cn('flex items-center gap-1 border-b p-2', className)}
+    className={cn("flex items-center gap-1 border-b p-2", className)}
     {...props}
   >
     {children}
@@ -135,7 +135,7 @@ export const WebPreviewUrl = ({
   const { url, setUrl } = useWebPreview();
 
   const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
-    if (event.key === 'Enter') {
+    if (event.key === "Enter") {
       const target = event.target as HTMLInputElement;
       setUrl(target.value);
     }
@@ -154,7 +154,7 @@ export const WebPreviewUrl = ({
   );
 };
 
-export type WebPreviewBodyProps = ComponentProps<'iframe'> & {
+export type WebPreviewBodyProps = ComponentProps<"iframe"> & {
   loading?: ReactNode;
 };
 
@@ -169,7 +169,7 @@ export const WebPreviewBody = ({
   return (
     <div className="flex-1">
       <iframe
-        className={cn('size-full', className)}
+        className={cn("size-full", className)}
         sandbox="allow-scripts allow-same-origin allow-forms allow-popups allow-presentation"
         src={(src ?? url) || undefined}
         title="Preview"
@@ -180,9 +180,9 @@ export const WebPreviewBody = ({
   );
 };
 
-export type WebPreviewConsoleProps = ComponentProps<'div'> & {
+export type WebPreviewConsoleProps = ComponentProps<"div"> & {
   logs?: Array<{
-    level: 'log' | 'warn' | 'error';
+    level: "log" | "warn" | "error";
     message: string;
     timestamp: Date;
   }>;
@@ -198,7 +198,7 @@ export const WebPreviewConsole = ({
 
   return (
     <Collapsible
-      className={cn('border-t bg-muted/50 font-mono text-sm', className)}
+      className={cn("border-t bg-muted/50 font-mono text-sm", className)}
       onOpenChange={setConsoleOpen}
       open={consoleOpen}
       {...props}
@@ -211,16 +211,16 @@ export const WebPreviewConsole = ({
           Console
           <ChevronDownIcon
             className={cn(
-              'h-4 w-4 transition-transform duration-200',
-              consoleOpen && 'rotate-180',
+              "h-4 w-4 transition-transform duration-200",
+              consoleOpen && "rotate-180"
             )}
           />
         </Button>
       </CollapsibleTrigger>
       <CollapsibleContent
         className={cn(
-          'px-4 pb-4',
-          'data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 outline-hidden data-[state=closed]:animate-out data-[state=open]:animate-in',
+          "px-4 pb-4",
+          "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 outline-hidden data-[state=closed]:animate-out data-[state=open]:animate-in"
         )}
       >
         <div className="max-h-48 space-y-1 overflow-y-auto">
@@ -230,16 +230,16 @@ export const WebPreviewConsole = ({
             logs.map((log, index) => (
               <div
                 className={cn(
-                  'text-xs',
-                  log.level === 'error' && 'text-destructive',
-                  log.level === 'warn' && 'text-yellow-600',
-                  log.level === 'log' && 'text-foreground',
+                  "text-xs",
+                  log.level === "error" && "text-destructive",
+                  log.level === "warn" && "text-yellow-600",
+                  log.level === "log" && "text-foreground"
                 )}
                 key={`${log.timestamp.getTime()}-${index}`}
               >
                 <span className="text-muted-foreground">
                   {log.timestamp.toLocaleTimeString()}
-                </span>{' '}
+                </span>{" "}
                 {log.message}
               </div>
             ))