Update file naming and structure for mobile support

2025-09-03 19:14:57 -05:00
parent 25e5b61b3e
commit 4852b0f884
36 changed files with 49 additions and 49 deletions
--- a/src/ui/Desktop/Navigation/Tabs/Tab.tsx
+++ b/src/ui/Desktop/Navigation/Tabs/Tab.tsx
@@ -0,0 +1,142 @@
+import React from "react";
+import {ButtonGroup} from "@/components/ui/button-group.tsx";
+import {Button} from "@/components/ui/button.tsx";
+import {useTranslation} from 'react-i18next';
+import {
+    Home,
+    SeparatorVertical,
+    X,
+    Terminal as TerminalIcon,
+    Server as ServerIcon,
+    Folder as FolderIcon
+} from "lucide-react";
+
+interface TabProps {
+    tabType: string;
+    title?: string;
+    isActive?: boolean;
+    onActivate?: () => void;
+    onClose?: () => void;
+    onSplit?: () => void;
+    canSplit?: boolean;
+    canClose?: boolean;
+    disableActivate?: boolean;
+    disableSplit?: boolean;
+    disableClose?: boolean;
+}
+
+export function Tab({
+                        tabType,
+                        title,
+                        isActive,
+                        onActivate,
+                        onClose,
+                        onSplit,
+                        canSplit = false,
+                        canClose = false,
+                        disableActivate = false,
+                        disableSplit = false,
+                        disableClose = false
+                    }: TabProps): React.ReactElement {
+    const {t} = useTranslation();
+    if (tabType === "home") {
+        return (
+            <Button
+                variant="outline"
+                className={`!px-2 border-1 border-[#303032] ${isActive ? '!bg-[#1d1d1f] !text-white !border-[#2d2d30]' : ''}`}
+                onClick={onActivate}
+                disabled={disableActivate}
+            >
+                <Home/>
+            </Button>
+        );
+    }
+
+    if (tabType === "terminal" || tabType === "server" || tabType === "file_manager") {
+        const isServer = tabType === 'server';
+        const isFileManager = tabType === 'file_manager';
+        return (
+            <ButtonGroup>
+                <Button
+                    variant="outline"
+                    className={`!px-2 border-1 border-[#303032] ${isActive ? '!bg-[#1d1d1f] !text-white !border-[#2d2d30]' : ''}`}
+                    onClick={onActivate}
+                    disabled={disableActivate}
+                >
+                    {isServer ? <ServerIcon className="mr-1 h-4 w-4"/> : isFileManager ?
+                        <FolderIcon className="mr-1 h-4 w-4"/> : <TerminalIcon className="mr-1 h-4 w-4"/>}
+                    {title || (isServer ? t('nav.serverStats') : isFileManager ? t('nav.fileManager') : t('nav.terminal'))}
+                </Button>
+                {canSplit && (
+                    <Button
+                        variant="outline"
+                        className="!px-2 border-1 border-[#303032]"
+                        onClick={onSplit}
+                        disabled={disableSplit}
+                        title={disableSplit ? t('nav.cannotSplitTab') : t('nav.splitScreen')}
+                    >
+                        <SeparatorVertical className="w-[28px] h-[28px]"/>
+                    </Button>
+                )}
+                {canClose && (
+                    <Button
+                        variant="outline"
+                        className="!px-2 border-1 border-[#303032]"
+                        onClick={onClose}
+                        disabled={disableClose}
+                    >
+                        <X/>
+                    </Button>
+                )}
+            </ButtonGroup>
+        );
+    }
+
+    if (tabType === "ssh_manager") {
+        return (
+            <ButtonGroup>
+                <Button
+                    variant="outline"
+                    className={`!px-2 border-1 border-[#303032] ${isActive ? '!bg-[#1d1d1f] !text-white !border-[#2d2d30]' : ''}`}
+                    onClick={onActivate}
+                    disabled={disableActivate}
+                >
+                    {title || t('nav.sshManager')}
+                </Button>
+                <Button
+                    variant="outline"
+                    className="!px-2 border-1 border-[#303032]"
+                    onClick={onClose}
+                    disabled={disableClose}
+                >
+                    <X/>
+                </Button>
+            </ButtonGroup>
+        );
+    }
+
+    if (tabType === "admin") {
+        return (
+            <ButtonGroup>
+                <Button
+                    variant="outline"
+                    className={`!px-2 border-1 border-[#303032] ${isActive ? '!bg-[#1d1d1f] !text-white !border-[#2d2d30]' : ''}`}
+                    onClick={onActivate}
+                    disabled={disableActivate}
+                >
+                    {title || t('nav.admin')}
+                </Button>
+                <Button
+                    variant="outline"
+                    className="!px-2 border-1 border-[#303032]"
+                    onClick={onClose}
+                    disabled={disableClose}
+                >
+                    <X/>
+                </Button>
+            </ButtonGroup>
+        );
+    }
+
+    return null;
+}