Initial UI commit for 1.3

2025-08-14 01:24:05 -05:00
parent 96864dbeb4
commit 81d1db09e4
33 changed files with 196 additions and 272 deletions
--- a/src/ui/SSH/Terminal/TerminalTabList.tsx
+++ b/src/ui/SSH/Terminal/TerminalTabList.tsx
@@ -0,0 +1,76 @@
+import React from "react";
+import {Button} from "@/components/ui/button.tsx";
+import {X, SeparatorVertical} from "lucide-react"
+
+interface TerminalTab {
+    id: number;
+    title: string;
+}
+
+interface SSHTabListProps {
+    allTabs: TerminalTab[];
+    currentTab: number;
+    setActiveTab: (tab: number) => void;
+    allSplitScreenTab: number[];
+    setSplitScreenTab: (tab: number) => void;
+    setCloseTab: (tab: number) => void;
+}
+
+export function TerminalTabList({
+                               allTabs,
+                               currentTab,
+                               setActiveTab,
+                               allSplitScreenTab = [],
+                               setSplitScreenTab,
+                               setCloseTab,
+                           }: SSHTabListProps): React.ReactElement {
+    const isSplitScreenActive = allSplitScreenTab.length > 0;
+
+    return (
+        <div className="inline-flex items-center h-full px-[0.5rem] overflow-x-auto">
+            {allTabs.map((terminal, index) => {
+                const isActive = terminal.id === currentTab;
+                const isSplit = allSplitScreenTab.includes(terminal.id);
+                const isSplitButtonDisabled =
+                    (isActive && !isSplitScreenActive) ||
+                    (allSplitScreenTab.length >= 3 && !isSplit);
+
+                return (
+                    <div
+                        key={terminal.id}
+                        className={index < allTabs.length - 1 ? "mr-[0.5rem]" : ""}
+                    >
+                        <div className="inline-flex rounded-md shadow-sm" role="group">
+                            <Button
+                                onClick={() => setActiveTab(terminal.id)}
+                                disabled={isSplit}
+                                variant="outline"
+                                className={`rounded-r-none ${isActive ? '!bg-[#1d1d1f] !text-white !border-[#2d2d30] !hover:bg-[#1d1d1f] !active:bg-[#1d1d1f] !focus:bg-[#1d1d1f] !hover:text-white !active:text-white !focus:text-white' : ''}`}
+                            >
+                                {terminal.title}
+                            </Button>
+
+                            <Button
+                                onClick={() => setSplitScreenTab(terminal.id)}
+                                disabled={isSplitButtonDisabled || isActive}
+                                variant="outline"
+                                className="rounded-none p-0 !w-9 !h-9"
+                            >
+                                <SeparatorVertical className="!w-5 !h-5" strokeWidth={2.5}/>
+                            </Button>
+
+                            <Button
+                                onClick={() => setCloseTab(terminal.id)}
+                                disabled={(isSplitScreenActive && isActive) || isSplit}
+                                variant="outline"
+                                className="rounded-l-none p-0 !w-9 !h-9"
+                            >
+                                <X className="!w-5 !h-5" strokeWidth={2.5}/>
+                            </Button>
+                        </div>
+                    </div>
+                );
+            })}
+        </div>
+    );
+}