Update file naming and structure for mobile support

src/ui/Desktop/Admin/AdminSettings.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import {useSidebar} from "@/components/ui/sidebar";
+import {useSidebar} from "@/components/ui/sidebar.tsx";
 import {Separator} from "@/components/ui/separator.tsx";
 import {Button} from "@/components/ui/button.tsx";
 import {Alert, AlertDescription, AlertTitle} from "@/components/ui/alert.tsx";

src/ui/Desktop/Apps/File Manager/FileManager.tsx

@@ -1,11 +1,11 @@
 import React, {useState, useEffect, useRef} from "react";
-import {FileManagerLeftSidebar} from "@/ui/Apps/File Manager/FileManagerLeftSidebar.tsx";
-import {FileManagerTabList} from "@/ui/Apps/File Manager/FileManagerTabList.tsx";
-import {FileManagerHomeView} from "@/ui/Apps/File Manager/FileManagerHomeView.tsx";
-import {FileManagerFileEditor} from "@/ui/Apps/File Manager/FileManagerFileEditor.tsx";
-import {FileManagerOperations} from "@/ui/Apps/File Manager/FileManagerOperations.tsx";
+import {FileManagerLeftSidebar} from "@/ui/Desktop/Apps/File Manager/FileManagerLeftSidebar.tsx";
+import {FileManagerTabList} from "@/ui/Desktop/Apps/File Manager/FileManagerTabList.tsx";
+import {FileManagerHomeView} from "@/ui/Desktop/Apps/File Manager/FileManagerHomeView.tsx";
+import {FileManagerFileEditor} from "@/ui/Desktop/Apps/File Manager/FileManagerFileEditor.tsx";
+import {FileManagerOperations} from "@/ui/Desktop/Apps/File Manager/FileManagerOperations.tsx";
 import {Button} from '@/components/ui/button.tsx';
-import {FIleManagerTopNavbar} from "@/ui/Apps/File Manager/FIleManagerTopNavbar.tsx";
+import {FIleManagerTopNavbar} from "@/ui/Desktop/Apps/File Manager/FIleManagerTopNavbar.tsx";
 import {cn} from '@/lib/utils.ts';
 import {Save, RefreshCw, Settings, Trash2} from 'lucide-react';
 import {Separator} from '@/components/ui/separator.tsx';

src/ui/Desktop/Apps/Host Manager/HostManager.tsx

@@ -1,8 +1,8 @@
 import React, {useState} from "react";
-import {HostManagerHostViewer} from "@/ui/Apps/Host Manager/HostManagerHostViewer.tsx"
+import {HostManagerHostViewer} from "@/ui/Desktop/Apps/Host Manager/HostManagerHostViewer.tsx"
 import {Tabs, TabsContent, TabsList, TabsTrigger} from "@/components/ui/tabs.tsx";
 import {Separator} from "@/components/ui/separator.tsx";
-import {HostManagerHostEditor} from "@/ui/Apps/Host Manager/HostManagerHostEditor.tsx";
+import {HostManagerHostEditor} from "@/ui/Desktop/Apps/Host Manager/HostManagerHostEditor.tsx";
 import {useSidebar} from "@/components/ui/sidebar.tsx";
 import {useTranslation} from "react-i18next";
 

src/ui/Desktop/Apps/Host Manager/HostManagerHostEditor.tsx

@@ -13,7 +13,7 @@ import {
     FormMessage,
 } from "@/components/ui/form.tsx";
 import {Input} from "@/components/ui/input.tsx";
-import {ScrollArea} from "@/components/ui/scroll-area"
+import {ScrollArea} from "@/components/ui/scroll-area.tsx"
 import {Separator} from "@/components/ui/separator.tsx";
 import {Tabs, TabsContent, TabsList, TabsTrigger} from "@/components/ui/tabs.tsx";
 import React, {useEffect, useRef, useState} from "react";

src/ui/Desktop/Apps/Host Manager/HostManagerHostViewer.tsx

@@ -1,11 +1,11 @@
 import React, {useState, useEffect, useMemo} from "react";
-import {Card, CardContent} from "@/components/ui/card";
-import {Button} from "@/components/ui/button";
-import {Badge} from "@/components/ui/badge";
-import {ScrollArea} from "@/components/ui/scroll-area";
-import {Input} from "@/components/ui/input";
-import {Accordion, AccordionContent, AccordionItem, AccordionTrigger} from "@/components/ui/accordion";
-import {Tooltip, TooltipContent, TooltipProvider, TooltipTrigger} from "@/components/ui/tooltip";
+import {Card, CardContent} from "@/components/ui/card.tsx";
+import {Button} from "@/components/ui/button.tsx";
+import {Badge} from "@/components/ui/badge.tsx";
+import {ScrollArea} from "@/components/ui/scroll-area.tsx";
+import {Input} from "@/components/ui/input.tsx";
+import {Accordion, AccordionContent, AccordionItem, AccordionTrigger} from "@/components/ui/accordion.tsx";
+import {Tooltip, TooltipContent, TooltipProvider, TooltipTrigger} from "@/components/ui/tooltip.tsx";
 import {getSSHHosts, deleteSSHHost, bulkImportSSHHosts} from "@/ui/main-axios.ts";
 import {toast} from "sonner";
 import {useTranslation} from "react-i18next";

src/ui/Desktop/Apps/Server/Server.tsx

@@ -1,13 +1,13 @@
 import React from "react";
-import {useSidebar} from "@/components/ui/sidebar";
+import {useSidebar} from "@/components/ui/sidebar.tsx";
 import {Status, StatusIndicator} from "@/components/ui/shadcn-io/status";
 import {Separator} from "@/components/ui/separator.tsx";
 import {Button} from "@/components/ui/button.tsx";
-import {Progress} from "@/components/ui/progress"
+import {Progress} from "@/components/ui/progress.tsx"
 import {Cpu, HardDrive, MemoryStick} from "lucide-react";
-import {Tunnel} from "@/ui/Apps/Tunnel/Tunnel.tsx";
+import {Tunnel} from "@/ui/Desktop/Apps/Tunnel/Tunnel.tsx";
 import {getServerStatusById, getServerMetricsById, type ServerMetrics} from "@/ui/main-axios.ts";
-import {useTabs} from "@/ui/Navigation/Tabs/TabContext.tsx";
+import {useTabs} from "@/ui/Desktop/Navigation/Tabs/TabContext.tsx";
 import {useTranslation} from 'react-i18next';
 
 interface ServerProps {

src/ui/Desktop/Apps/Tunnel/Tunnel.tsx

@@ -1,5 +1,5 @@
 import React, {useState, useEffect, useCallback} from "react";
-import {TunnelViewer} from "@/ui/Apps/Tunnel/TunnelViewer.tsx";
+import {TunnelViewer} from "@/ui/Desktop/Apps/Tunnel/TunnelViewer.tsx";
 import {getSSHHosts, getTunnelStatuses, connectTunnel, disconnectTunnel, cancelTunnel} from "@/ui/main-axios.ts";
 
 interface TunnelConnection {

src/ui/Desktop/DesktopApp.tsx

@@ -0,0 +1,228 @@
+import React, {useState, useEffect} from "react"
+import {LeftSidebar} from "@/ui/Desktop/Navigation/LeftSidebar.tsx"
+import {Homepage} from "@/ui/Homepage/Homepage.tsx"
+import {AppView} from "@/ui/Desktop/Navigation/AppView.tsx"
+import {HostManager} from "@/ui/Desktop/Apps/Host Manager/HostManager.tsx"
+import {TabProvider, useTabs} from "@/ui/Desktop/Navigation/Tabs/TabContext.tsx"
+import {TopNavbar} from "@/ui/Desktop/Navigation/TopNavbar.tsx";
+import { AdminSettings } from "@/ui/Desktop/Admin/AdminSettings.tsx";
+import { UserProfile } from "@/ui/Desktop/User/UserProfile.tsx";
+import { Toaster } from "@/components/ui/sonner.tsx";
+import { getUserInfo } from "@/ui/main-axios.ts";
+
+function getCookie(name: string) {
+    return document.cookie.split('; ').reduce((r, v) => {
+        const parts = v.split('=');
+        return parts[0] === name ? decodeURIComponent(parts[1]) : r;
+    }, "");
+}
+
+function setCookie(name: string, value: string, days = 7) {
+    const expires = new Date(Date.now() + days * 864e5).toUTCString();
+    document.cookie = `${name}=${encodeURIComponent(value)}; expires=${expires}; path=/`;
+}
+
+function AppContent() {
+    const [view, setView] = useState<string>("homepage")
+    const [mountedViews, setMountedViews] = useState<Set<string>>(new Set(["homepage"]))
+    const [isAuthenticated, setIsAuthenticated] = useState(false)
+    const [username, setUsername] = useState<string | null>(null)
+    const [isAdmin, setIsAdmin] = useState(false)
+    const [authLoading, setAuthLoading] = useState(true)
+    const [isTopbarOpen, setIsTopbarOpen] = useState<boolean>(true)
+    const {currentTab, tabs} = useTabs();
+
+    useEffect(() => {
+        const checkAuth = () => {
+            const jwt = getCookie("jwt");
+            if (jwt) {
+                setAuthLoading(true);
+                getUserInfo()
+                    .then((meRes) => {
+                        setIsAuthenticated(true);
+                        setIsAdmin(!!meRes.is_admin);
+                        setUsername(meRes.username || null);
+                    })
+                    .catch((err) => {
+                        setIsAuthenticated(false);
+                        setIsAdmin(false);
+                        setUsername(null);
+                        document.cookie = 'jwt=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
+                    })
+                    .finally(() => setAuthLoading(false));
+            } else {
+                setIsAuthenticated(false);
+                setIsAdmin(false);
+                setUsername(null);
+                setAuthLoading(false);
+            }
+        }
+
+        checkAuth()
+
+        const handleStorageChange = () => checkAuth()
+        window.addEventListener('storage', handleStorageChange)
+
+        return () => window.removeEventListener('storage', handleStorageChange)
+    }, [])
+
+    const handleSelectView = (nextView: string) => {
+        setMountedViews((prev) => {
+            if (prev.has(nextView)) return prev
+            const next = new Set(prev)
+            next.add(nextView)
+            return next
+        })
+        setView(nextView)
+    }
+
+    const handleAuthSuccess = (authData: { isAdmin: boolean; username: string | null; userId: string | null }) => {
+        setIsAuthenticated(true)
+        setIsAdmin(authData.isAdmin)
+        setUsername(authData.username)
+    }
+
+    const currentTabData = tabs.find(tab => tab.id === currentTab);
+    const showTerminalView = currentTabData?.type === 'terminal' || currentTabData?.type === 'server' || currentTabData?.type === 'file_manager';
+    const showHome = currentTabData?.type === 'home';
+    const showSshManager = currentTabData?.type === 'ssh_manager';
+    const showAdmin = currentTabData?.type === 'admin';
+    const showProfile = currentTabData?.type === 'profile';
+
+    return (
+        <div>
+            {!isAuthenticated && !authLoading && (
+                <div>
+                    <div className="absolute inset-0" style={{
+                        backgroundImage: `linear-gradient(
+                            135deg,
+                            transparent 0%,
+                            transparent 49%,
+                            rgba(255, 255, 255, 0.03) 49%,
+                            rgba(255, 255, 255, 0.03) 51%,
+                            transparent 51%,
+                            transparent 100%
+                        )`,
+                        backgroundSize: '80px 80px'
+                    }} />
+                </div>
+            )}
+
+            {!isAuthenticated && !authLoading && (
+                <div className="fixed inset-0 flex items-center justify-center z-[10000]">
+                    <Homepage 
+                        onSelectView={handleSelectView}
+                        isAuthenticated={isAuthenticated}
+                        authLoading={authLoading}
+                        onAuthSuccess={handleAuthSuccess}
+                        isTopbarOpen={isTopbarOpen}
+                    />
+                </div>
+            )}
+
+            {isAuthenticated && (
+                <LeftSidebar
+                    onSelectView={handleSelectView}
+                    disabled={!isAuthenticated || authLoading}
+                    isAdmin={isAdmin}
+                    username={username}
+                >
+                    <div
+                        className="h-screen w-full"
+                        style={{
+                            visibility: showTerminalView ? "visible" : "hidden",
+                            pointerEvents: showTerminalView ? "auto" : "none",
+                            height: showTerminalView ? "100vh" : 0,
+                            width: showTerminalView ? "100%" : 0,
+                            position: showTerminalView ? "static" : "absolute",
+                            overflow: "hidden",
+                        }}
+                    >
+                        <AppView isTopbarOpen={isTopbarOpen} />
+                    </div>
+
+                    <div
+                        className="h-screen w-full"
+                        style={{
+                            visibility: showHome ? "visible" : "hidden",
+                            pointerEvents: showHome ? "auto" : "none",
+                            height: showHome ? "100vh" : 0,
+                            width: showHome ? "100%" : 0,
+                            position: showHome ? "static" : "absolute",
+                            overflow: "hidden",
+                        }}
+                    >
+                        <Homepage 
+                            onSelectView={handleSelectView}
+                            isAuthenticated={isAuthenticated}
+                            authLoading={authLoading}
+                            onAuthSuccess={handleAuthSuccess}
+                            isTopbarOpen={isTopbarOpen}
+                        />
+                    </div>
+
+                    <div
+                        className="h-screen w-full"
+                        style={{
+                            visibility: showSshManager ? "visible" : "hidden",
+                            pointerEvents: showSshManager ? "auto" : "none",
+                            height: showSshManager ? "100vh" : 0,
+                            width: showSshManager ? "100%" : 0,
+                            position: showSshManager ? "static" : "absolute",
+                            overflow: "hidden",
+                        }}
+                    >
+                        <HostManager onSelectView={handleSelectView} isTopbarOpen={isTopbarOpen} />
+                    </div>
+
+                    <div
+                        className="h-screen w-full"
+                        style={{
+                            visibility: showAdmin ? "visible" : "hidden",
+                            pointerEvents: showAdmin ? "auto" : "none",
+                            height: showAdmin ? "100vh" : 0,
+                            width: showAdmin ? "100%" : 0,
+                            position: showAdmin ? "static" : "absolute",
+                            overflow: "hidden",
+                        }}
+                    >
+                        <AdminSettings isTopbarOpen={isTopbarOpen} />
+                    </div>
+
+                    <div
+                        className="h-screen w-full"
+                        style={{
+                            visibility: showProfile ? "visible" : "hidden",
+                            pointerEvents: showProfile ? "auto" : "none",
+                            height: showProfile ? "100vh" : 0,
+                            width: showProfile ? "100%" : 0,
+                            position: showProfile ? "static" : "absolute",
+                            overflow: "auto",
+                        }}
+                    >
+                        <UserProfile isTopbarOpen={isTopbarOpen} />
+                    </div>
+
+                    <TopNavbar isTopbarOpen={isTopbarOpen} setIsTopbarOpen={setIsTopbarOpen}/>
+                </LeftSidebar>
+            )}
+            <Toaster 
+                position="bottom-right"
+                richColors={false}
+                closeButton
+                duration={5000}
+                offset={20}
+            />
+        </div>
+    )
+}
+
+function DesktopApp() {
+    return (
+        <TabProvider>
+            <AppContent />
+        </TabProvider>
+    );
+}
+
+export default DesktopApp

src/ui/Desktop/Navigation/AppView.tsx

@@ -1,8 +1,8 @@
 import React, {useEffect, useRef, useState} from "react";
-import {Terminal} from "@/ui/Apps/Terminal/Terminal.tsx";
-import {Server as ServerView} from "@/ui/Apps/Server/Server.tsx";
-import {FileManager} from "@/ui/Apps/File Manager/FileManager.tsx";
-import {useTabs} from "@/ui/Navigation/Tabs/TabContext.tsx";
+import {Terminal} from "@/ui/Desktop/Apps/Terminal/Terminal.tsx";
+import {Server as ServerView} from "@/ui/Desktop/Apps/Server/Server.tsx";
+import {FileManager} from "@/ui/Desktop/Apps/File Manager/FileManager.tsx";
+import {useTabs} from "@/ui/Desktop/Navigation/Tabs/TabContext.tsx";
 import {ResizablePanelGroup, ResizablePanel, ResizableHandle} from '@/components/ui/resizable.tsx';
 import * as ResizablePrimitive from "react-resizable-panels";
 import {useSidebar} from "@/components/ui/sidebar.tsx";

src/ui/Desktop/Navigation/Hosts/FolderCard.tsx

@@ -2,7 +2,7 @@ import React, {useState} from "react";
 import {CardTitle} from "@/components/ui/card.tsx";
 import {ChevronDown, Folder} from "lucide-react";
 import {Button} from "@/components/ui/button.tsx";
-import {Host} from "@/ui/Navigation/Hosts/Host.tsx";
+import {Host} from "@/ui/Desktop/Navigation/Hosts/Host.tsx";
 import {Separator} from "@/components/ui/separator.tsx";
 
 interface SSHHost {

src/ui/Desktop/Navigation/Hosts/Host.tsx

@@ -3,7 +3,7 @@ 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/Navigation/Tabs/TabContext.tsx";
+import {useTabs} from "@/ui/Desktop/Navigation/Tabs/TabContext.tsx";
 import {getServerStatusById} from "@/ui/main-axios.ts";
 
 interface SSHHost {

src/ui/Desktop/Navigation/LeftSidebar.tsx

@@ -31,7 +31,7 @@ import {
     SheetTitle,
     SheetTrigger,
     SheetClose
-} from "@/components/ui/sheet";
+} from "@/components/ui/sheet.tsx";
 import {Checkbox} from "@/components/ui/checkbox.tsx";
 import {Input} from "@/components/ui/input.tsx";
 import {Label} from "@/components/ui/label.tsx";
@@ -47,9 +47,9 @@ import {
     TableRow,
 } from "@/components/ui/table.tsx";
 import {Card} from "@/components/ui/card.tsx";
-import {FolderCard} from "@/ui/Navigation/Hosts/FolderCard.tsx";
+import {FolderCard} from "@/ui/Desktop/Navigation/Hosts/FolderCard.tsx";
 import {getSSHHosts} from "@/ui/main-axios.ts";
-import {useTabs} from "@/ui/Navigation/Tabs/TabContext.tsx";
+import {useTabs} from "@/ui/Desktop/Navigation/Tabs/TabContext.tsx";
 import { deleteAccount } from "@/ui/main-axios.ts";
 
 interface SSHHost {

src/ui/Desktop/Navigation/TopNavbar.tsx

@@ -1,9 +1,9 @@
 import React, {useState} from "react";
-import {useSidebar} from "@/components/ui/sidebar";
+import {useSidebar} from "@/components/ui/sidebar.tsx";
 import {Button} from "@/components/ui/button.tsx";
 import {ChevronDown, ChevronUpIcon, Hammer} from "lucide-react";
-import {Tab} from "@/ui/Navigation/Tabs/Tab.tsx";
-import {useTabs} from "@/ui/Navigation/Tabs/TabContext.tsx";
+import {Tab} from "@/ui/Desktop/Navigation/Tabs/Tab.tsx";
+import {useTabs} from "@/ui/Desktop/Navigation/Tabs/TabContext.tsx";
 import {
     Accordion,
     AccordionContent,

src/ui/Desktop/User/UserProfile.tsx

@@ -6,12 +6,12 @@ import {Label} from "@/components/ui/label.tsx";
 import {Alert, AlertDescription, AlertTitle} from "@/components/ui/alert.tsx";
 import {Tabs, TabsContent, TabsList, TabsTrigger} from "@/components/ui/tabs.tsx";
 import {User, Shield, Key, AlertCircle} from "lucide-react";
-import {TOTPSetup} from "@/ui/User/TOTPSetup.tsx";
+import {TOTPSetup} from "@/ui/Desktop/User/TOTPSetup.tsx";
 import {getUserInfo} from "@/ui/main-axios.ts";
 import {toast} from "sonner";
-import {PasswordReset} from "@/ui/User/PasswordReset.tsx";
+import {PasswordReset} from "@/ui/Desktop/User/PasswordReset.tsx";
 import {useTranslation} from "react-i18next";
-import {LanguageSwitcher} from "@/components/LanguageSwitcher";
+import {LanguageSwitcher} from "@/components/LanguageSwitcher.tsx";
 
 interface UserProfileProps {
     isTopbarOpen?: boolean;