fix: Fixed various issues with the dashboard, tab bar, and database issues

2025-10-21 22:09:05 -05:00
parent 21d8cf9b2c
commit 217af1e286
23 changed files with 757 additions and 254 deletions
--- a/src/ui/Desktop/Navigation/Hosts/Host.tsx
+++ b/src/ui/Desktop/Navigation/Hosts/Host.tsx
@@ -1,11 +1,17 @@
 import React, { useEffect, useState } from "react";
 import { Status, StatusIndicator } from "@/components/ui/shadcn-io/status";
-import { Button } from "@/components/ui/button.tsx";
-import { ButtonGroup } from "@/components/ui/button-group.tsx";
-import { Server, Terminal } from "lucide-react";
-import { useTabs } from "@/ui/Desktop/Navigation/Tabs/TabContext.tsx";
-import { getServerStatusById } from "@/ui/main-axios.ts";
-import type { HostProps } from "../../../../types/index.js";
+import { Button } from "@/components/ui/button";
+import { ButtonGroup } from "@/components/ui/button-group";
+import { EllipsisVertical, Terminal } from "lucide-react";
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+} from "@/components/ui/dropdown-menu";
+import { useTabs } from "@/ui/Desktop/Navigation/Tabs/TabContext";
+import { getServerStatusById } from "@/ui/main-axios";
+import type { HostProps } from "../../../../types";

 export function Host({ host }: HostProps): React.ReactElement {
  const { addTab } = useTabs();
@@ -35,8 +41,6 @@ export function Host({ host }: HostProps): React.ReactElement {
            setServerStatus("offline");
          } else if (err?.response?.status === 504) {
            setServerStatus("degraded");
-          } else if (err?.response?.status === 404) {
-            setServerStatus("offline");
          } else {
            setServerStatus("offline");
          }
@@ -45,7 +49,6 @@ export function Host({ host }: HostProps): React.ReactElement {
    };

    fetchStatus();
-
    const intervalId = window.setInterval(fetchStatus, 30000);

    return () => {
@@ -58,10 +61,6 @@ export function Host({ host }: HostProps): React.ReactElement {
    addTab({ type: "terminal", title, hostConfig: host });
  };

-  const handleServerClick = () => {
-    addTab({ type: "server", title, hostConfig: host });
-  };
-
  return (
    <div>
      <div className="flex items-center gap-2">
@@ -71,17 +70,12 @@ export function Host({ host }: HostProps): React.ReactElement {
        >
          <StatusIndicator />
        </Status>
+
        <p className="font-semibold flex-1 min-w-0 break-words text-sm">
          {host.name || host.ip}
        </p>
+
        <ButtonGroup className="flex-shrink-0">
-          <Button
-            variant="outline"
-            className="!px-2 border-1 border-dark-border"
-            onClick={handleServerClick}
-          >
-            <Server />
-          </Button>
          {host.enableTerminal && (
            <Button
              variant="outline"
@@ -91,8 +85,46 @@ export function Host({ host }: HostProps): React.ReactElement {
              <Terminal />
            </Button>
          )}
+
+          <DropdownMenu modal={false}>
+            <DropdownMenuTrigger asChild>
+              <Button
+                variant="outline"
+                className={`!px-2 border-1 border-dark-border ${
+                  host.enableTerminal ? "rounded-tl-none rounded-bl-none" : ""
+                }`}
+              >
+                <EllipsisVertical />
+              </Button>
+            </DropdownMenuTrigger>
+
+            <DropdownMenuContent
+              align="start"
+              side="right"
+              className="min-w-[160px]"
+            >
+              <DropdownMenuItem
+                onClick={() =>
+                  addTab({ type: "server", title, hostConfig: host })
+                }
+              >
+                Open Server Details
+              </DropdownMenuItem>
+              <DropdownMenuItem
+                onClick={() =>
+                  addTab({ type: "file_manager", title, hostConfig: host })
+                }
+              >
+                Open File Manager
+              </DropdownMenuItem>
+              <DropdownMenuItem onClick={() => alert("Settings clicked")}>
+                Edit
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
        </ButtonGroup>
      </div>
+
      {hasTags && (
        <div className="flex flex-wrap items-center gap-2 mt-1">
          {tags.map((tag: string) => (
--- a/src/ui/Desktop/Navigation/TopNavbar.tsx
+++ b/src/ui/Desktop/Navigation/TopNavbar.tsx
@@ -276,44 +276,97 @@ export function TopNavbar({
      ...prev,
      currentX: e.clientX,
    }));
+  };

-    // Calculate target position based on mouse X
-    if (!containerRef.current) return;
+  const calculateTargetIndex = () => {
+    if (!containerRef.current || dragState.draggedIndex === null) return null;

-    const containerRect = containerRef.current.getBoundingClientRect();
-    const mouseX = e.clientX - containerRect.left;
+    const draggedIndex = dragState.draggedIndex;

+    // Build array of tab boundaries in ORIGINAL order
+    const tabBoundaries: {
+      index: number;
+      start: number;
+      end: number;
+      mid: number;
+    }[] = [];
    let accumulatedX = 0;
-    let newTargetIndex = dragState.draggedIndex;

    tabs.forEach((tab, i) => {
      const tabEl = tabRefs.current.get(i);
      if (!tabEl) return;

      const tabWidth = tabEl.getBoundingClientRect().width;
-      const tabCenter = accumulatedX + tabWidth / 2;
-
-      if (mouseX < tabCenter && i === 0) {
-        newTargetIndex = 0;
-      } else if (mouseX >= tabCenter && mouseX < accumulatedX + tabWidth) {
-        newTargetIndex = i;
-      }
-
+      tabBoundaries.push({
+        index: i,
+        start: accumulatedX,
+        end: accumulatedX + tabWidth,
+        mid: accumulatedX + tabWidth / 2,
+      });
      accumulatedX += tabWidth + 4; // 4px gap
    });

-    if (mouseX >= accumulatedX - 4) {
-      newTargetIndex = tabs.length - 1;
+    if (tabBoundaries.length === 0) return null;
+
+    // Calculate the dragged tab's center in container coordinates
+    const containerRect = containerRef.current.getBoundingClientRect();
+    const draggedTab = tabBoundaries[draggedIndex];
+    // Convert absolute positions to container-relative coordinates
+    const currentX = dragState.currentX - containerRect.left;
+    const startX = dragState.startX - containerRect.left;
+    const offset = currentX - startX;
+    const draggedCenter = draggedTab.mid + offset;
+
+    // Determine target index based on where the dragged tab's center is
+    let newTargetIndex = draggedIndex;
+
+    if (offset < 0) {
+      // Moving left - find the leftmost tab whose midpoint we've passed
+      for (let i = draggedIndex - 1; i >= 0; i--) {
+        if (draggedCenter < tabBoundaries[i].mid) {
+          newTargetIndex = i;
+        } else {
+          break;
+        }
+      }
+    } else if (offset > 0) {
+      // Moving right - find the rightmost tab whose midpoint we've passed
+      for (let i = draggedIndex + 1; i < tabBoundaries.length; i++) {
+        if (draggedCenter > tabBoundaries[i].mid) {
+          newTargetIndex = i;
+        } else {
+          break;
+        }
+      }
    }

-    setDragState((prev) => ({
-      ...prev,
-      targetIndex: newTargetIndex,
-    }));
+    return newTargetIndex;
  };

  const handleDragOver = (e: React.DragEvent) => {
    e.preventDefault();
+
+    // Firefox compatibility - track position via dragover
+    if (dragState.draggedIndex === null) return;
+
+    const containerRect = containerRef.current?.getBoundingClientRect();
+    if (!containerRect) return;
+
+    // Update currentX if we have a valid clientX (Firefox may not provide it in onDrag)
+    if (e.clientX !== 0) {
+      setDragState((prev) => ({
+        ...prev,
+        currentX: e.clientX,
+      }));
+    }
+
+    const newTargetIndex = calculateTargetIndex();
+    if (newTargetIndex !== null && newTargetIndex !== dragState.targetIndex) {
+      setDragState((prev) => ({
+        ...prev,
+        targetIndex: newTargetIndex,
+      }));
+    }
  };

  const handleDrop = (e: React.DragEvent) => {
@@ -326,14 +379,26 @@ export function TopNavbar({
      dragState.draggedIndex !== dragState.targetIndex
    ) {
      reorderTabs(dragState.draggedIndex, dragState.targetIndex);
-    }

-    setDragState({
-      draggedIndex: null,
-      startX: 0,
-      currentX: 0,
-      targetIndex: null,
-    });
+      // Delay clearing drag state to prevent visual jitter
+      // This allows the reorder to complete and re-render before removing transforms
+      setTimeout(() => {
+        setDragState({
+          draggedIndex: null,
+          startX: 0,
+          currentX: 0,
+          targetIndex: null,
+        });
+      }, 0);
+    } else {
+      // No reorder needed, clear immediately
+      setDragState({
+        draggedIndex: null,
+        startX: 0,
+        currentX: 0,
+        targetIndex: null,
+      });
+    }
  };

  const handleDragEnd = () => {
@@ -345,14 +410,25 @@ export function TopNavbar({
      dragState.draggedIndex !== dragState.targetIndex
    ) {
      reorderTabs(dragState.draggedIndex, dragState.targetIndex);
-    }

-    setDragState({
-      draggedIndex: null,
-      startX: 0,
-      currentX: 0,
-      targetIndex: null,
-    });
+      // Delay clearing drag state to prevent visual jitter
+      setTimeout(() => {
+        setDragState({
+          draggedIndex: null,
+          startX: 0,
+          currentX: 0,
+          targetIndex: null,
+        });
+      }, 0);
+    } else {
+      // No reorder needed, clear immediately
+      setDragState({
+        draggedIndex: null,
+        startX: 0,
+        currentX: 0,
+        targetIndex: null,
+      });
+    }
  };

  const isSplitScreenActive =