feat: added support for closing tabs with the middle mouse button

This behavior is similar to Chrome or VSCode, where pressing the middle mouse button allows for easy tab closure.

Additionally:

- Improved the visual consistency between having no tabs and having tabs, ensuring the toolbar height remains the same.
- Enhanced the visual distinction between selected and unselected tabs, maintaining the visual position of elements to avoid unnecessary movement.

src/components/gui/sortable-tab.tsx

@@ -27,19 +27,22 @@ export const WindowTabItemButton = forwardRef<
 >(function WindowTabItemButton(props: WindowTabItemButtonProps, ref) {
   const { icon: Icon, selected, title, onClose, isDragging, ...rest } = props;
 
-  const className = cn(
-    "h-9 flex items-center text-left text-xs font-semibold px-2 w-max-[150px]",
-    "libsql-window-tab",
-    isDragging && "z-20",
-    isDragging && !selected && "bg-gray-200 dark:bg-gray-700 rounded-t",
-    selected
-      ? "border-x border-t bg-background border-b-background rounded-t"
-      : "border-b border-t border-t-secondary border-x-secondary opacity-65 hover:opacity-100"
-  );
-
   return (
-    <button className={className} ref={ref} {...rest}>
-      <Icon className="w-4 h-4 ml-2 grow-0 shrink-0" />
+    <button
+      className={cn(
+        "h-9 flex items-center text-left text-xs font-semibold px-2 w-max-[150px] border-x border-t",
+        "libsql-window-tab",
+        isDragging && "z-20",
+        isDragging && !selected && "bg-gray-200 dark:bg-gray-700 rounded-t",
+        selected
+          ? "border-b-background bg-background rounded-t"
+          : "border-t-secondary border-x-secondary opacity-65 hover:opacity-100"
+      )}
+      onAuxClick={({ button }) => button === 1 && onClose && onClose()}
+      ref={ref}
+      {...rest}
+    >
+      <Icon className="ml-2 h-4 w-4 shrink-0 grow-0" />
       <div className="line-clamp-1 grow px-2">{title}</div>
       {onClose && (
         <div

src/components/gui/windows-tab.tsx

@@ -140,7 +140,7 @@ export default function WindowTabs({
       >
         <div className="flex flex-col w-full h-full">
           <div className="grow-0 shrink-0 pt-1 bg-secondary overflow-x-auto no-scrollbar">
-            <div className="flex">
+            <div className="flex min-h-9">
               {menu ? (
                 <DropdownMenu modal={false}>
                   <DropdownMenuTrigger>