feat: layout fix

components/ui/action-button.tsx

@@ -3,22 +3,37 @@ import { Button } from "~/components/ui/button";
 import { cn } from "~/lib/utils";
 import React, { forwardRef } from "react";
 import { IconType } from "react-icons/lib";
+import { VariantProps, cva } from "class-variance-authority";
 
-type Props = React.ComponentProps<typeof Button> & {
-  icon: IconType;
-};
+const variants = cva(
+  "text-slate-400 hover:bg-transparent hover:dark:bg-transparent p-0 flex-shrink-0",
+  {
+    variants: {
+      size: {
+        sm: "h-8 w-6",
+        md: "h-8 w-8",
+        lg: "h-10 w-10",
+      },
+    },
+    defaultVariants: {
+      size: "sm",
+    },
+  }
+);
+
+type Props = Omit<React.ComponentProps<typeof Button>, "size"> &
+  VariantProps<typeof variants> & {
+    icon: IconType;
+  };
 
 const ActionButton = forwardRef(
-  ({ icon: Icon, className, onClick, ...props }: Props, ref: any) => {
+  ({ icon: Icon, className, size, onClick, ...props }: Props, ref: any) => {
     return (
       <Button
         ref={ref}
         variant="ghost"
         size="sm"
-        className={cn(
-          "text-slate-400 hover:bg-transparent hover:dark:bg-transparent h-8 w-6 p-0 flex-shrink-0",
-          className
-        )}
+        className={cn(variants({ size }), className)}
         onClick={(e) => {
           if (onClick) {
             e.preventDefault();

components/ui/resizable.tsx

@@ -41,16 +41,18 @@ type ResizablePanelProps = Omit<
   "defaultSize"
 > & {
   defaultSize: number | BreakpointValues<number>;
+  defaultCollapsed?: boolean | BreakpointValues<boolean>;
 };
 
 const ResizablePanel = forwardRef((props: ResizablePanelProps, ref: any) => {
-  const { defaultSize, ...restProps } = props;
+  const { defaultSize, defaultCollapsed, ...restProps } = props;
   const initialSize = useBreakpointValue(defaultSize);
+  const initialCollapsed = useBreakpointValue(defaultCollapsed);
 
   return (
     <ResizablePrimitive.Panel
       ref={ref}
-      defaultSize={initialSize}
+      defaultSize={initialCollapsed ? 0 : initialSize}
       {...restProps}
     />
   );

components/ui/tabs.tsx

@@ -8,6 +8,7 @@ export type Tab = {
   title: string;
   icon?: React.ReactNode;
   render?: () => React.ReactNode;
+  locked?: boolean;
 };
 
 type Props = {
@@ -76,7 +77,7 @@ const Tabs = ({ tabs, current = 0, onChange, onClose }: Props) => {
               icon={tab.icon}
               isActive={idx === current}
               onSelect={() => onChange && onChange(idx)}
-              onClose={() => onClose && onClose(idx)}
+              onClose={!tab.locked ? () => onClose && onClose(idx) : null}
             />
           ))}
         </nav>
@@ -93,12 +94,13 @@ type TabItemProps = {
   icon?: React.ReactNode;
   isActive?: boolean;
   onSelect: () => void;
-  onClose: () => void;
+  onClose?: (() => void) | null;
 };
 
 const TabItem = ({
   index,
   title,
+  icon,
   isActive,
   onSelect,
   onClose,
@@ -116,19 +118,28 @@ const TabItem = ({
       )}
       onClick={onSelect}
     >
-      <button className="pl-4 pr-0 truncate flex items-center self-stretch">
-        <FileIcon
-          file={{ isDirectory: false, filename: title }}
-          className="mr-1"
-        />
-        <span className="truncate">{filename}</span>
+      <button
+        className={cn(
+          "pl-4 pr-4 truncate flex items-center self-stretch",
+          onClose ? "pr-0" : ""
+        )}
+      >
+        {icon != null ? (
+          icon
+        ) : (
+          <FileIcon file={{ isDirectory: false, filename: title }} />
+        )}
+        <span className="inline-block ml-2 truncate">{filename}</span>
         <span>{ext}</span>
       </button>
-      <ActionButton
-        icon={FiX}
-        className="opacity-0 group-hover:opacity-100 transition-colors"
-        onClick={onClose}
-      />
+
+      {onClose ? (
+        <ActionButton
+          icon={FiX}
+          className="opacity-0 group-hover:opacity-100 transition-colors"
+          onClick={() => onClose()}
+        />
+      ) : null}
     </div>
   );
 };