dennii/Termix
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases 22 Wiki Activity

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

Browse Source
This commit is contained in:
LukeGus
2025-10-21 22:09:05 -05:00
parent 21d8cf9b2c
commit 217af1e286
23 changed files with 757 additions and 254 deletions
Download Patch File Download Diff File Expand all files Collapse all files

113
src/ui/Desktop/Apps/Dashboard/Dashboard.tsx
View File

@@ -32,9 +32,13 @@ import {
UserPlus,
Settings,
User,
Loader2,
Terminal,
FolderOpen,
} from "lucide-react";
import { Status } from "@/components/ui/shadcn-io/status";
import { BsLightning } from "react-icons/bs";
import { useTranslation } from "react-i18next";
interface DashboardProps {
onSelectView: (view: string) => void;
@@ -55,6 +59,7 @@ export function Dashboard({
isTopbarOpen,
onSelectView,
}: DashboardProps): React.ReactElement {
const { t } = useTranslation();
const [loggedIn, setLoggedIn] = useState(isAuthenticated);
const [isAdmin, setIsAdmin] = useState(false);
const [, setUsername] = useState<string | null>(null);
@@ -74,9 +79,12 @@ export function Dashboard({
const [recentActivity, setRecentActivity] = useState<RecentActivityItem[]>(
[],
);
const [recentActivityLoading, setRecentActivityLoading] =
useState<boolean>(true);
const [serverStats, setServerStats] = useState<
Array<{ id: number; name: string; cpu: number | null; ram: number | null }>
>([]);
const [serverStatsLoading, setServerStatsLoading] = useState<boolean>(true);
const { addTab, setCurrentTab, tabs: tabList } = useTabs();
@@ -165,7 +173,10 @@ export function Dashboard({
for (const host of hosts) {
if (host.tunnelConnections) {
try {
const tunnelConnections = JSON.parse(host.tunnelConnections);
// tunnelConnections is already parsed as an array from the backend
const tunnelConnections = Array.isArray(host.tunnelConnections)
? host.tunnelConnections
: JSON.parse(host.tunnelConnections);
if (Array.isArray(tunnelConnections)) {
totalTunnelsCount += tunnelConnections.length;
}
@@ -180,10 +191,13 @@ export function Dashboard({
setTotalCredentials(credentials.length);
// Fetch recent activity (35 items)
setRecentActivityLoading(true);
const activity = await getRecentActivity(35);
setRecentActivity(activity);
setRecentActivityLoading(false);
// Fetch server stats for first 5 servers
setServerStatsLoading(true);
const serversWithStats = await Promise.all(
hosts.slice(0, 5).map(async (host: { id: number; name: string }) => {
try {
@@ -205,8 +219,11 @@ export function Dashboard({
}),
);
setServerStats(serversWithStats);
setServerStatsLoading(false);
} catch (error) {
console.error("Failed to fetch dashboard data:", error);
setRecentActivityLoading(false);
setServerStatsLoading(false);
}
};
@@ -328,7 +345,9 @@ export function Dashboard({
>
<div className="flex flex-col relative z-10 w-full h-full">
<div className="flex flex-row items-center justify-between w-full px-3 mt-3">
<div className="text-2xl text-white font-semibold">Dashboard</div>
<div className="text-2xl text-white font-semibold">
{t("dashboard.title")}
</div>
<div className="flex flex-row gap-3">
<Button
className="font-semibold"
@@ -340,7 +359,7 @@ export function Dashboard({
)
}
>
GitHub
{t("dashboard.github")}
</Button>
<Button
className="font-semibold"
@@ -352,7 +371,7 @@ export function Dashboard({
)
}
>
Support
{t("dashboard.support")}
</Button>
<Button
className="font-semibold"
@@ -364,7 +383,7 @@ export function Dashboard({
)
}
>
Discord
{t("dashboard.discord")}
</Button>
<Button
className="font-semibold"
@@ -373,7 +392,7 @@ export function Dashboard({
window.open("https://github.com/sponsors/LukeGus", "_blank")
}
>
Donate
{t("dashboard.donate")}
</Button>
</div>
</div>
@@ -386,7 +405,7 @@ export function Dashboard({
<div className="flex flex-col mx-3 my-2 overflow-y-auto overflow-x-hidden">
<p className="text-xl font-semibold mb-3 mt-1 flex flex-row items-center">
<Server className="mr-3" />
Server Overview
{t("dashboard.serverOverview")}
</p>
<div className="bg-dark-bg w-full h-auto border-2 border-dark-border rounded-md px-3 py-3">
<div className="flex flex-row items-center justify-between mb-3">
@@ -396,7 +415,9 @@ export function Dashboard({
color="#FFFFFF"
className="shrink-0"
/>
<p className="ml-2 leading-none">Version</p>
<p className="ml-2 leading-none">
{t("dashboard.version")}
</p>
</div>
<div className="flex flex-row items-center">
@@ -409,8 +430,8 @@ export function Dashboard({
className={`ml-2 text-sm border-1 border-dark-border ${versionStatus === "up_to_date" ? "text-green-400" : "text-yellow-400"}`}
>
{versionStatus === "up_to_date"
? "Up to Date"
: "Update Available"}
? t("dashboard.upToDate")
: t("dashboard.updateAvailable")}
</Button>
<UpdateLog loggedIn={loggedIn} />
</div>
@@ -423,7 +444,9 @@ export function Dashboard({
color="#FFFFFF"
className="shrink-0"
/>
<p className="ml-2 leading-none">Uptime</p>
<p className="ml-2 leading-none">
{t("dashboard.uptime")}
</p>
</div>
<div className="flex flex-row items-center">
@@ -440,14 +463,18 @@ export function Dashboard({
color="#FFFFFF"
className="shrink-0"
/>
<p className="ml-2 leading-none">Database</p>
<p className="ml-2 leading-none">
{t("dashboard.database")}
</p>
</div>
<div className="flex flex-row items-center">
<p
className={`leading-none ${dbHealth === "healthy" ? "text-green-400" : "text-red-400"}`}
>
{dbHealth}
{dbHealth === "healthy"
? t("dashboard.healthy")
: t("dashboard.error")}
</p>
</div>
</div>
@@ -460,7 +487,9 @@ export function Dashboard({
color="#FFFFFF"
className="mr-3 shrink-0"
/>
<p className="m-0 leading-none">Total Servers</p>
<p className="m-0 leading-none">
{t("dashboard.totalServers")}
</p>
</div>
<p className="m-0 leading-none text-muted-foreground font-semibold">
{totalServers}
@@ -473,7 +502,9 @@ export function Dashboard({
color="#FFFFFF"
className="mr-3 shrink-0"
/>
<p className="m-0 leading-none">Total Tunnels</p>
<p className="m-0 leading-none">
{t("dashboard.totalTunnels")}
</p>
</div>
<p className="m-0 leading-none text-muted-foreground font-semibold">
{totalTunnels}
@@ -488,7 +519,9 @@ export function Dashboard({
color="#FFFFFF"
className="mr-3 shrink-0"
/>
<p className="m-0 leading-none">Total Credentials</p>
<p className="m-0 leading-none">
{t("dashboard.totalCredentials")}
</p>
</div>
<p className="m-0 leading-none text-muted-foreground font-semibold">
{totalCredentials}
@@ -502,7 +535,7 @@ export function Dashboard({
<div className="flex flex-row items-center justify-between mb-3 mt-1">
<p className="text-xl font-semibold flex flex-row items-center">
<Clock className="mr-3" />
Recent Activity
{t("dashboard.recentActivity")}
</p>
<Button
variant="outline"
@@ -510,13 +543,18 @@ export function Dashboard({
className="border-2 !border-dark-border h-7"
onClick={handleResetActivity}
>
Reset
{t("dashboard.reset")}
</Button>
</div>
<div className="grid gap-4 grid-cols-[repeat(auto-fit,minmax(200px,1fr))] auto-rows-min overflow-y-auto overflow-x-hidden">
{recentActivity.length === 0 ? (
{recentActivityLoading ? (
<div className="flex flex-row items-center text-muted-foreground text-sm">
<Loader2 className="animate-spin mr-2" size={16} />
<span>{t("dashboard.loadingRecentActivity")}</span>
</div>
) : recentActivity.length === 0 ? (
<p className="text-muted-foreground text-sm">
No recent activity
{t("dashboard.noRecentActivity")}
</p>
) : (
recentActivity.map((item) => (
@@ -526,7 +564,11 @@ export function Dashboard({
className="border-2 !border-dark-border bg-dark-bg"
onClick={() => handleActivityClick(item)}
>
<Server size={20} className="shrink-0" />
{item.type === "terminal" ? (
<Terminal size={20} className="shrink-0" />
) : (
<FolderOpen size={20} className="shrink-0" />
)}
<p className="truncate ml-2 font-semibold">
{item.hostName}
</p>
@@ -542,7 +584,7 @@ export function Dashboard({
<div className="flex flex-col mx-3 my-2 overflow-y-auto overflow-x-hidden">
<p className="text-xl font-semibold mb-3 mt-1 flex flex-row items-center">
<FastForward className="mr-3" />
Quick Actions
{t("dashboard.quickActions")}
</p>
<div className="grid gap-4 grid-cols-[repeat(auto-fit,minmax(200px,1fr))] auto-rows-min overflow-y-auto overflow-x-hidden">
<Button
@@ -555,7 +597,7 @@ export function Dashboard({
style={{ width: "40px", height: "40px" }}
/>
<span className="font-semibold text-sm mt-2">
Add Host
{t("dashboard.addHost")}
</span>
</Button>
<Button
@@ -568,7 +610,7 @@ export function Dashboard({
style={{ width: "40px", height: "40px" }}
/>
<span className="font-semibold text-sm mt-2">
Add Credential
{t("dashboard.addCredential")}
</span>
</Button>
{isAdmin && (
@@ -582,7 +624,7 @@ export function Dashboard({
style={{ width: "40px", height: "40px" }}
/>
<span className="font-semibold text-sm mt-2">
Admin Settings
{t("dashboard.adminSettings")}
</span>
</Button>
)}
@@ -596,7 +638,7 @@ export function Dashboard({
style={{ width: "40px", height: "40px" }}
/>
<span className="font-semibold text-sm mt-2">
User Profile
{t("dashboard.userProfile")}
</span>
</Button>
</div>
@@ -606,12 +648,17 @@ export function Dashboard({
<div className="flex flex-col mx-3 my-2 flex-1 overflow-hidden">
<p className="text-xl font-semibold mb-3 mt-1 flex flex-row items-center">
<ChartLine className="mr-3" />
Server Stats
{t("dashboard.serverStats")}
</p>
<div className="grid gap-4 grid-cols-[repeat(auto-fit,minmax(200px,1fr))] auto-rows-min overflow-y-auto overflow-x-hidden">
{serverStats.length === 0 ? (
{serverStatsLoading ? (
<div className="flex flex-row items-center text-muted-foreground text-sm">
<Loader2 className="animate-spin mr-2" size={16} />
<span>{t("dashboard.loadingServerStats")}</span>
</div>
) : serverStats.length === 0 ? (
<p className="text-muted-foreground text-sm">
No server data available
{t("dashboard.noServerData")}
</p>
) : (
serverStats.map((server) => (
@@ -629,16 +676,16 @@ export function Dashboard({
</div>
<div className="flex flex-row justify-between text-xs text-muted-foreground">
<span>
CPU:{" "}
{t("dashboard.cpu")}:{" "}
{server.cpu !== null
? `${server.cpu}%`
: "N/A"}
: t("dashboard.notAvailable")}
</span>
<span>
RAM:{" "}
{t("dashboard.ram")}:{" "}
{server.ram !== null
? `${server.ram}%`
: "N/A"}
: t("dashboard.notAvailable")}
</span>
</div>
</div>

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

@@ -220,6 +220,34 @@ function FileManagerContent({ initialHost, onClose }: FileManagerProps) {
const pathChangeTimerRef = useRef<NodeJS.Timeout | null>(null);
const currentLoadingPathRef = useRef<string>("");
const keepaliveTimerRef = useRef<NodeJS.Timeout | null>(null);
const activityLoggedRef = useRef(false);
const activityLoggingRef = useRef(false); // Prevent concurrent logging calls
// Centralized activity logging to prevent duplicates
const logFileManagerActivity = useCallback(async () => {
if (
!currentHost?.id ||
activityLoggedRef.current ||
activityLoggingRef.current
) {
return;
}
activityLoggingRef.current = true;
activityLoggedRef.current = true;
try {
const hostName =
currentHost.name || `${currentHost.username}@${currentHost.ip}`;
await logActivity("file_manager", currentHost.id, hostName);
} catch (err) {
console.warn("Failed to log file manager activity:", err);
// Reset on error so it can be retried
activityLoggedRef.current = false;
} finally {
activityLoggingRef.current = false;
}
}, [currentHost]);
const handleFileDragStart = useCallback(
(files: FileItem[]) => {
@@ -299,15 +327,6 @@ function FileManagerContent({ initialHost, onClose }: FileManagerProps) {
setSshSessionId(sessionId);
// Log activity for recent connections
if (currentHost?.id) {
const hostName =
currentHost.name || `${currentHost.username}@${currentHost.ip}`;
logActivity("file_manager", currentHost.id, hostName).catch((err) => {
console.warn("Failed to log file manager activity:", err);
});
}
try {
const response = await listSSHFiles(sessionId, currentPath);
const files = Array.isArray(response)
@@ -316,6 +335,9 @@ function FileManagerContent({ initialHost, onClose }: FileManagerProps) {
setFiles(files);
clearSelection();
initialLoadDoneRef.current = true;
// Log activity for recent connections (after successful directory load)
logFileManagerActivity();
} catch (dirError: unknown) {
console.error("Failed to load initial directory:", dirError);
}
@@ -1257,15 +1279,6 @@ function FileManagerContent({ initialHost, onClose }: FileManagerProps) {
setSshSessionId(totpSessionId);
setTotpSessionId(null);
// Log activity for recent connections
if (currentHost?.id) {
const hostName =
currentHost.name || `${currentHost.username}@${currentHost.ip}`;
logActivity("file_manager", currentHost.id, hostName).catch((err) => {
console.warn("Failed to log file manager activity:", err);
});
}
try {
const response = await listSSHFiles(totpSessionId, currentPath);
const files = Array.isArray(response)
@@ -1275,6 +1288,9 @@ function FileManagerContent({ initialHost, onClose }: FileManagerProps) {
clearSelection();
initialLoadDoneRef.current = true;
toast.success(t("fileManager.connectedSuccessfully"));
// Log activity for recent connections (after successful directory load)
logFileManagerActivity();
} catch (dirError: unknown) {
console.error("Failed to load initial directory:", dirError);
}

1
src/ui/Desktop/Apps/Server/Server.tsx
View File

@@ -447,7 +447,6 @@ export function Server({
</div>
)}
{/* SSH Tunnels */}
{currentHostConfig?.tunnelConnections &&
currentHostConfig.tunnelConnections.length > 0 && (
<div className="rounded-lg border-2 border-dark-border m-3 bg-dark-bg-darker h-[360px] overflow-hidden flex flex-col min-h-0">

36
src/ui/Desktop/Apps/Terminal/Terminal.tsx
View File

@@ -93,12 +93,40 @@ export const Terminal = forwardRef<TerminalHandle, SSHTerminalProps>(
const isReconnectingRef = useRef(false);
const isConnectingRef = useRef(false);
const connectionTimeoutRef = useRef<NodeJS.Timeout | null>(null);
const activityLoggedRef = useRef(false);
const activityLoggingRef = useRef(false); // Prevent concurrent logging calls
const lastSentSizeRef = useRef<{ cols: number; rows: number } | null>(null);
const pendingSizeRef = useRef<{ cols: number; rows: number } | null>(null);
const notifyTimerRef = useRef<NodeJS.Timeout | null>(null);
const DEBOUNCE_MS = 140;
// Centralized activity logging to prevent duplicates
const logTerminalActivity = async () => {
if (
!hostConfig.id ||
activityLoggedRef.current ||
activityLoggingRef.current
) {
return;
}
activityLoggingRef.current = true;
activityLoggedRef.current = true;
try {
const hostName =
hostConfig.name || `${hostConfig.username}@${hostConfig.ip}`;
await logActivity("terminal", hostConfig.id, hostName);
} catch (err) {
console.warn("Failed to log terminal activity:", err);
// Reset on error so it can be retried
activityLoggedRef.current = false;
} finally {
activityLoggingRef.current = false;
}
};
useEffect(() => {
isVisibleRef.current = isVisible;
}, [isVisible]);
@@ -471,13 +499,7 @@ export const Terminal = forwardRef<TerminalHandle, SSHTerminalProps>(
isReconnectingRef.current = false;
// Log activity for recent connections
if (hostConfig.id) {
const hostName =
hostConfig.name || `${hostConfig.username}@${hostConfig.ip}`;
logActivity("terminal", hostConfig.id, hostName).catch((err) => {
console.warn("Failed to log terminal activity:", err);
});
}
logTerminalActivity();
} else if (msg.type === "disconnected") {
wasDisconnectedBySSH.current = true;
setIsConnected(false);

102
src/ui/Desktop/Authentication/Auth.tsx
View File

@@ -12,6 +12,7 @@ import {
loginUser,
getUserInfo,
getRegistrationAllowed,
getPasswordLoginAllowed,
getOIDCConfig,
getSetupRequired,
initiatePasswordReset,
@@ -65,6 +66,7 @@ export function Auth({
const [firstUser, setFirstUser] = useState(false);
const [firstUserToastShown, setFirstUserToastShown] = useState(false);
const [registrationAllowed, setRegistrationAllowed] = useState(true);
const [passwordLoginAllowed, setPasswordLoginAllowed] = useState(true);
const [oidcConfigured, setOidcConfigured] = useState(false);
const [resetStep, setResetStep] = useState<
@@ -104,6 +106,18 @@ export function Auth({
});
}, []);
useEffect(() => {
getPasswordLoginAllowed()
.then((res) => {
setPasswordLoginAllowed(res.allowed);
})
.catch((err) => {
if (err.code !== "NO_SERVER_CONFIGURED") {
console.error("Failed to fetch password login status:", err);
}
});
}, []);
useEffect(() => {
getOIDCConfig()
.then((response) => {
@@ -153,6 +167,12 @@ export function Auth({
}
}, [registrationAllowed, internalLoggedIn, t]);
useEffect(() => {
if (!passwordLoginAllowed && oidcConfigured && tab !== "external") {
setTab("external");
}
}, [passwordLoginAllowed, oidcConfigured, tab]);
async function handleSubmit(e: React.FormEvent) {
e.preventDefault();
setLoading(true);
@@ -163,6 +183,12 @@ export function Auth({
return;
}
if (!passwordLoginAllowed && !firstUser) {
toast.error(t("errors.passwordLoginDisabled"));
setLoading(false);
return;
}
try {
let res;
if (tab === "login") {
@@ -697,42 +723,46 @@ export function Auth({
{!loggedIn && !authLoading && !totpRequired && (
<>
<div className="flex gap-2 mb-6">
<button
type="button"
className={cn(
"flex-1 py-2 text-base font-medium rounded-md transition-all",
tab === "login"
? "bg-primary text-primary-foreground shadow"
: "bg-muted text-muted-foreground hover:bg-accent",
)}
onClick={() => {
setTab("login");
if (tab === "reset") resetPasswordState();
if (tab === "signup") clearFormFields();
}}
aria-selected={tab === "login"}
disabled={loading || firstUser}
>
{t("common.login")}
</button>
<button
type="button"
className={cn(
"flex-1 py-2 text-base font-medium rounded-md transition-all",
tab === "signup"
? "bg-primary text-primary-foreground shadow"
: "bg-muted text-muted-foreground hover:bg-accent",
)}
onClick={() => {
setTab("signup");
if (tab === "reset") resetPasswordState();
if (tab === "login") clearFormFields();
}}
aria-selected={tab === "signup"}
disabled={loading || !registrationAllowed}
>
{t("common.register")}
</button>
{passwordLoginAllowed && (
<button
type="button"
className={cn(
"flex-1 py-2 text-base font-medium rounded-md transition-all",
tab === "login"
? "bg-primary text-primary-foreground shadow"
: "bg-muted text-muted-foreground hover:bg-accent",
)}
onClick={() => {
setTab("login");
if (tab === "reset") resetPasswordState();
if (tab === "signup") clearFormFields();
}}
aria-selected={tab === "login"}
disabled={loading || firstUser}
>
{t("common.login")}
</button>
)}
{passwordLoginAllowed && (
<button
type="button"
className={cn(
"flex-1 py-2 text-base font-medium rounded-md transition-all",
tab === "signup"
? "bg-primary text-primary-foreground shadow"
: "bg-muted text-muted-foreground hover:bg-accent",
)}
onClick={() => {
setTab("signup");
if (tab === "reset") resetPasswordState();
if (tab === "login") clearFormFields();
}}
aria-selected={tab === "signup"}
disabled={loading || !registrationAllowed}
>
{t("common.register")}
</button>
)}
{oidcConfigured && (
<button
type="button"

72
src/ui/Desktop/Navigation/Hosts/Host.tsx
View File

@@ -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) => (

142
src/ui/Desktop/Navigation/TopNavbar.tsx
View File

@@ -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 =