Superminaren
/
kvm
mirror of https://github.com/jetkvm/kvm.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat(ui): Add dedicated mount route and refactor mount media dialog

This commit is contained in:
Adam Shiervani 2025-02-26 00:53:26 +01:00
parent c4f85b706f
commit 6a2443c07c
3 changed files with 144 additions and 116 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

97
ui/src/components/popovers/MountPopover.tsx
View File

@ -15,19 +15,14 @@ import {
} from "react-icons/lu"; } from "react-icons/lu";
import { useJsonRpc } from "@/hooks/useJsonRpc"; import { useJsonRpc } from "@/hooks/useJsonRpc";
import notifications from "../../notifications"; import notifications from "../../notifications";
import MountMediaModal from "../MountMediaDialog";
import { useClose } from "@headlessui/react"; import { useClose } from "@headlessui/react";
import { useLocation, useNavigate } from "react-router-dom";
const MountPopopover = forwardRef<HTMLDivElement, object>((_props, ref) => { const MountPopopover = forwardRef<HTMLDivElement, object>((_props, ref) => {
const diskDataChannelStats = useRTCStore(state => state.diskDataChannelStats); const diskDataChannelStats = useRTCStore(state => state.diskDataChannelStats);
const [send] = useJsonRpc(); const [send] = useJsonRpc();
const { const { remoteVirtualMediaState, setModalView, setRemoteVirtualMediaState } =
remoteVirtualMediaState, useMountMediaStore();
isMountMediaDialogOpen,
setModalView,
setIsMountMediaDialogOpen,
setRemoteVirtualMediaState,
} = useMountMediaStore();
const bytesSentPerSecond = useMemo(() => { const bytesSentPerSecond = useMemo(() => {
if (diskDataChannelStats.size < 2) return null; if (diskDataChannelStats.size < 2) return null;
@ -78,7 +73,7 @@ const MountPopopover = forwardRef<HTMLDivElement, object>((_props, ref) => {
<div className="inline-block"> <div className="inline-block">
<Card> <Card>
<div className="p-1"> <div className="p-1">
<PlusCircleIcon className="w-4 h-4 text-blue-700 shrink-0 dark:text-white" /> <PlusCircleIcon className="h-4 w-4 shrink-0 text-blue-700 dark:text-white" />
</div> </div>
</Card> </Card>
</div> </div>
@ -103,20 +98,25 @@ const MountPopopover = forwardRef<HTMLDivElement, object>((_props, ref) => {
<div className="space-y-1"> <div className="space-y-1">
<div className="flex items-center gap-x-2"> <div className="flex items-center gap-x-2">
<LuCheckCheck className="h-5 text-green-500" /> <LuCheckCheck className="h-5 text-green-500" />
<h3 className="text-base font-semibold text-black dark:text-white">Streaming from Browser</h3> <h3 className="text-base font-semibold text-black dark:text-white">
Streaming from Browser
</h3>
</div> </div>
<Card className="w-auto px-2 py-1"> <Card className="w-auto px-2 py-1">
<div className="w-full text-sm text-black truncate dark:text-white"> <div className="w-full truncate text-sm text-black dark:text-white">
{formatters.truncateMiddle(filename, 50)} {formatters.truncateMiddle(filename, 50)}
</div> </div>
</Card> </Card>
</div> </div>
<div className="flex flex-col items-center my-2 gap-y-2"> <div className="my-2 flex flex-col items-center gap-y-2">
<div className="w-full text-sm text-slate-900 dark:text-slate-100"> <div className="w-full text-sm text-slate-900 dark:text-slate-100">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<span>{formatters.bytes(size ?? 0)}</span> <span>{formatters.bytes(size ?? 0)}</span>
<div className="flex items-center gap-x-1"> <div className="flex items-center gap-x-1">
<LuArrowUpFromLine className="h-4 text-blue-700 dark:text-blue-500" strokeWidth={2} /> <LuArrowUpFromLine
className="h-4 text-blue-700 dark:text-blue-500"
strokeWidth={2}
/>
<span> <span>
{bytesSentPerSecond !== null {bytesSentPerSecond !== null
? `${formatters.bytes(bytesSentPerSecond)}/s` ? `${formatters.bytes(bytesSentPerSecond)}/s`
@ -131,33 +131,49 @@ const MountPopopover = forwardRef<HTMLDivElement, object>((_props, ref) => {
case "HTTP": case "HTTP":
return ( return (
<div className=""> <div className="">
<div className="inline-block mb-0"> <div className="mb-0 inline-block">
<Card> <Card>
<div className="p-1"> <div className="p-1">
<LuLink className="w-4 h-4 text-blue-700 dark:text-blue-500 shrink-0" /> <LuLink className="h-4 w-4 shrink-0 text-blue-700 dark:text-blue-500" />
</div> </div>
</Card> </Card>
</div> </div>
<h3 className="text-base font-semibold text-black dark:text-white">Streaming from URL</h3> <h3 className="text-base font-semibold text-black dark:text-white">
<p className="text-sm truncate text-slate-900 dark:text-slate-100">{formatters.truncateMiddle(url, 55)}</p> Streaming from URL
<p className="text-sm text-slate-900 dark:text-slate-100">{formatters.truncateMiddle(filename, 30)}</p> </h3>
<p className="text-sm text-slate-900 dark:text-slate-100">{formatters.bytes(size ?? 0)}</p> <p className="truncate text-sm text-slate-900 dark:text-slate-100">
{formatters.truncateMiddle(url, 55)}
</p>
<p className="text-sm text-slate-900 dark:text-slate-100">
{formatters.truncateMiddle(filename, 30)}
</p>
<p className="text-sm text-slate-900 dark:text-slate-100">
{formatters.bytes(size ?? 0)}
</p>
</div> </div>
); );
case "Storage": case "Storage":
return ( return (
<div className=""> <div className="">
<div className="inline-block mb-0"> <div className="mb-0 inline-block">
<Card> <Card>
<div className="p-1"> <div className="p-1">
<LuRadioReceiver className="w-4 h-4 text-blue-700 dark:text-blue-500 shrink-0" /> <LuRadioReceiver className="h-4 w-4 shrink-0 text-blue-700 dark:text-blue-500" />
</div> </div>
</Card> </Card>
</div> </div>
<h3 className="text-base font-semibold text-black dark:text-white">Mounted from JetKVM Storage</h3> <h3 className="text-base font-semibold text-black dark:text-white">
<p className="text-sm text-slate-900 dark:text-slate-100">{formatters.truncateMiddle(path, 50)}</p> Mounted from JetKVM Storage
<p className="text-sm text-slate-900 dark:text-slate-100">{formatters.truncateMiddle(filename, 30)}</p> </h3>
<p className="text-sm text-slate-900 dark:text-slate-100">{formatters.bytes(size ?? 0)}</p> <p className="text-sm text-slate-900 dark:text-slate-100">
{formatters.truncateMiddle(path, 50)}
</p>
<p className="text-sm text-slate-900 dark:text-slate-100">
{formatters.truncateMiddle(filename, 30)}
</p>
<p className="text-sm text-slate-900 dark:text-slate-100">
{formatters.bytes(size ?? 0)}
</p>
</div> </div>
); );
default: default:
@ -165,14 +181,17 @@ const MountPopopover = forwardRef<HTMLDivElement, object>((_props, ref) => {
} }
}; };
const close = useClose(); const close = useClose();
const location = useLocation();
useEffect(() => { useEffect(() => {
syncRemoteVirtualMediaState(); syncRemoteVirtualMediaState();
}, [syncRemoteVirtualMediaState, isMountMediaDialogOpen]); }, [syncRemoteVirtualMediaState, location.pathname]);
const navigate = useNavigate();
return ( return (
<GridCard> <GridCard>
<div className="p-4 py-3 space-y-4"> <div className="space-y-4 p-4 py-3">
<div ref={ref} className="grid h-full grid-rows-headerBody"> <div ref={ref} className="grid h-full grid-rows-headerBody">
<div className="h-full space-y-4 "> <div className="h-full space-y-4 ">
<div className="space-y-4"> <div className="space-y-4">
@ -185,7 +204,7 @@ const MountPopopover = forwardRef<HTMLDivElement, object>((_props, ref) => {
<Card> <Card>
<div className="flex items-center gap-x-1.5 px-2.5 py-2 text-sm"> <div className="flex items-center gap-x-1.5 px-2.5 py-2 text-sm">
<ExclamationTriangleIcon className="h-4 text-yellow-500" /> <ExclamationTriangleIcon className="h-4 text-yellow-500" />
<div className="flex items-center w-full text-black"> <div className="flex w-full items-center text-black">
<div>Closing this tab will unmount the image</div> <div>Closing this tab will unmount the image</div>
</div> </div>
</div> </div>
@ -193,7 +212,7 @@ const MountPopopover = forwardRef<HTMLDivElement, object>((_props, ref) => {
) : null} ) : null}
<div <div
className="space-y-2 opacity-0 animate-fadeIn" className="animate-fadeIn space-y-2 opacity-0"
style={{ style={{
animationDuration: "0.7s", animationDuration: "0.7s",
animationDelay: "0.1s", animationDelay: "0.1s",
@ -203,7 +222,7 @@ const MountPopopover = forwardRef<HTMLDivElement, object>((_props, ref) => {
<div className="group"> <div className="group">
<Card> <Card>
<div className="w-full px-4 py-8"> <div className="w-full px-4 py-8">
<div className="flex flex-col items-center justify-center h-full text-center"> <div className="flex h-full flex-col items-center justify-center text-center">
{renderGridCardContent()} {renderGridCardContent()}
</div> </div>
</div> </div>
@ -211,8 +230,8 @@ const MountPopopover = forwardRef<HTMLDivElement, object>((_props, ref) => {
</div> </div>
</div> </div>
{remoteVirtualMediaState ? ( {remoteVirtualMediaState ? (
<div className="flex items-center justify-between text-xs select-none"> <div className="flex select-none items-center justify-between text-xs">
<div className="text-white select-none dark:text-slate-300"> <div className="select-none text-white dark:text-slate-300">
<span>Mounted as</span>{" "} <span>Mounted as</span>{" "}
<span className="font-semibold"> <span className="font-semibold">
{remoteVirtualMediaState.mode === "Disk" ? "Disk" : "CD-ROM"} {remoteVirtualMediaState.mode === "Disk" ? "Disk" : "CD-ROM"}
@ -244,7 +263,10 @@ const MountPopopover = forwardRef<HTMLDivElement, object>((_props, ref) => {
d="M4.99933 0.775635L0 5.77546H10L4.99933 0.775635Z" d="M4.99933 0.775635L0 5.77546H10L4.99933 0.775635Z"
fill="currentColor" fill="currentColor"
/> />
<path d="M10 7.49976H0V9.22453H10V7.49976Z" fill="currentColor" /> <path
d="M10 7.49976H0V9.22453H10V7.49976Z"
fill="currentColor"
/>
</g> </g>
<defs> <defs>
<clipPath id="clip0_3137_1186"> <clipPath id="clip0_3137_1186">
@ -261,16 +283,11 @@ const MountPopopover = forwardRef<HTMLDivElement, object>((_props, ref) => {
</div> </div>
</div> </div>
</div> </div>
<MountMediaModal
open={isMountMediaDialogOpen}
setOpen={setIsMountMediaDialogOpen}
/>
</div> </div>
{!remoteVirtualMediaState && ( {!remoteVirtualMediaState && (
<div <div
className="flex items-center justify-end space-x-2 opacity-0 animate-fadeIn" className="flex animate-fadeIn items-center justify-end space-x-2 opacity-0"
style={{ style={{
animationDuration: "0.7s", animationDuration: "0.7s",
animationDelay: "0.2s", animationDelay: "0.2s",
@ -290,7 +307,7 @@ const MountPopopover = forwardRef<HTMLDivElement, object>((_props, ref) => {
text="Add New Media" text="Add New Media"
onClick={() => { onClick={() => {
setModalView("mode"); setModalView("mode");
setIsMountMediaDialogOpen(true); navigate("mount");
}} }}
LeadingIcon={LuPlus} LeadingIcon={LuPlus}
/> />

9
ui/src/main.tsx
View File

@ -31,6 +31,7 @@ import { CLOUD_API } from "./ui.config";
import OtherSessionRoute from "./routes/devices.$id.other-session"; import OtherSessionRoute from "./routes/devices.$id.other-session";
import UpdateRoute from "./routes/devices.$id.update"; import UpdateRoute from "./routes/devices.$id.update";
import LocalAuthRoute from "./routes/devices.$id.local-auth"; import LocalAuthRoute from "./routes/devices.$id.local-auth";
import MountRoute from "./routes/devices.$id.mount";
export const isOnDevice = import.meta.env.MODE === "device"; export const isOnDevice = import.meta.env.MODE === "device";
export const isInCloud = !isOnDevice; export const isInCloud = !isOnDevice;
@ -91,6 +92,10 @@ if (isOnDevice) {
path: "local-auth", path: "local-auth",
element: <LocalAuthRoute />, element: <LocalAuthRoute />,
}, },
{
path: "mount",
element: <MountRoute />,
},
], ],
}, },
@ -147,6 +152,10 @@ if (isOnDevice) {
path: "local-auth", path: "local-auth",
element: <LocalAuthRoute />, element: <LocalAuthRoute />,
}, },
{
path: "mount",
element: <MountRoute />,
},
], ],
}, },
{ {

154
ui/src/components/MountMediaDialog.tsx → ui/src/routes/devices.$id.mount.tsx
View File

@ -3,7 +3,6 @@ import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { Button } from "@components/Button"; import { Button } from "@components/Button";
import LogoBlueIcon from "@/assets/logo-blue.svg"; import LogoBlueIcon from "@/assets/logo-blue.svg";
import LogoWhiteIcon from "@/assets/logo-white.svg"; import LogoWhiteIcon from "@/assets/logo-white.svg";
import Modal from "@components/Modal";
import { import {
MountMediaState, MountMediaState,
RemoteVirtualMediaState, RemoteVirtualMediaState,
@ -21,8 +20,8 @@ import {
} from "react-icons/lu"; } from "react-icons/lu";
import { formatters } from "@/utils"; import { formatters } from "@/utils";
import { PlusCircleIcon } from "@heroicons/react/20/solid"; import { PlusCircleIcon } from "@heroicons/react/20/solid";
import AutoHeight from "./AutoHeight"; import AutoHeight from "@components/AutoHeight";
import { InputFieldWithLabel } from "./InputField"; import { InputFieldWithLabel } from "@/components/InputField";
import DebianIcon from "@/assets/debian-icon.png"; import DebianIcon from "@/assets/debian-icon.png";
import UbuntuIcon from "@/assets/ubuntu-icon.png"; import UbuntuIcon from "@/assets/ubuntu-icon.png";
import FedoraIcon from "@/assets/fedora-icon.png"; import FedoraIcon from "@/assets/fedora-icon.png";
@ -33,34 +32,26 @@ import { TrashIcon } from "@heroicons/react/16/solid";
import { useJsonRpc } from "../hooks/useJsonRpc"; import { useJsonRpc } from "../hooks/useJsonRpc";
import { ExclamationTriangleIcon } from "@heroicons/react/20/solid"; import { ExclamationTriangleIcon } from "@heroicons/react/20/solid";
import notifications from "../notifications"; import notifications from "../notifications";
import Fieldset from "./Fieldset"; import Fieldset from "@/components/Fieldset";
import { isOnDevice } from "../main"; import { isOnDevice } from "../main";
import { DEVICE_API } from "@/ui.config"; import { DEVICE_API } from "@/ui.config";
import { useNavigate } from "react-router-dom";
export default function MountMediaModal({ export default function MountRoute() {
open, const navigate = useNavigate();
setOpen, return <Dialog onClose={() => navigate("..")} />;
}: {
open: boolean;
setOpen: (open: boolean) => void;
}) {
return (
<Modal open={open} onClose={() => setOpen(false)}>
<Dialog setOpen={setOpen} />
</Modal>
);
} }
export function Dialog({ setOpen }: { setOpen: (open: boolean) => void }) { export function Dialog({ onClose }: { onClose: () => void }) {
const { const {
modalView, modalView,
setModalView, setModalView,
setLocalFile, setLocalFile,
setIsMountMediaDialogOpen,
setRemoteVirtualMediaState, setRemoteVirtualMediaState,
errorMessage, errorMessage,
setErrorMessage, setErrorMessage,
} = useMountMediaStore(); } = useMountMediaStore();
const navigate = useNavigate();
const [incompleteFileName, setIncompleteFileName] = useState<string | null>(null); const [incompleteFileName, setIncompleteFileName] = useState<string | null>(null);
const [mountInProgress, setMountInProgress] = useState(false); const [mountInProgress, setMountInProgress] = useState(false);
@ -100,7 +91,7 @@ export function Dialog({ setOpen }: { setOpen: (open: boolean) => void }) {
clearMountMediaState(); clearMountMediaState();
syncRemoteVirtualMediaState() syncRemoteVirtualMediaState()
.then(() => { .then(() => {
setIsMountMediaDialogOpen(false); navigate("..");
}) })
.catch(err => { .catch(err => {
triggerError(err instanceof Error ? err.message : String(err)); triggerError(err instanceof Error ? err.message : String(err));
@ -109,7 +100,7 @@ export function Dialog({ setOpen }: { setOpen: (open: boolean) => void }) {
setMountInProgress(false); setMountInProgress(false);
}); });
setIsMountMediaDialogOpen(false); navigate("..");
}); });
} }
@ -123,7 +114,7 @@ export function Dialog({ setOpen }: { setOpen: (open: boolean) => void }) {
clearMountMediaState(); clearMountMediaState();
syncRemoteVirtualMediaState() syncRemoteVirtualMediaState()
.then(() => { .then(() => {
setIsMountMediaDialogOpen(false); false;
}) })
.catch(err => { .catch(err => {
triggerError(err instanceof Error ? err.message : String(err)); triggerError(err instanceof Error ? err.message : String(err));
@ -156,7 +147,7 @@ export function Dialog({ setOpen }: { setOpen: (open: boolean) => void }) {
// We need to keep the local file in the store so that the browser can // We need to keep the local file in the store so that the browser can
// continue to stream the file to the device // continue to stream the file to the device
setLocalFile(file); setLocalFile(file);
setIsMountMediaDialogOpen(false); navigate("..");
}) })
.catch(err => { .catch(err => {
triggerError(err instanceof Error ? err.message : String(err)); triggerError(err instanceof Error ? err.message : String(err));
@ -188,16 +179,16 @@ export function Dialog({ setOpen }: { setOpen: (open: boolean) => void }) {
<img <img
src={LogoBlueIcon} src={LogoBlueIcon}
alt="JetKVM Logo" alt="JetKVM Logo"
className="h-[24px] dark:hidden block" className="block h-[24px] dark:hidden"
/> />
<img <img
src={LogoWhiteIcon} src={LogoWhiteIcon}
alt="JetKVM Logo" alt="JetKVM Logo"
className="h-[24px] dark:block hidden dark:!mt-0" className="hidden h-[24px] dark:!mt-0 dark:block"
/> />
{modalView === "mode" && ( {modalView === "mode" && (
<ModeSelectionView <ModeSelectionView
onClose={() => setOpen(false)} onClose={() => onClose()}
selectedMode={selectedMode} selectedMode={selectedMode}
setSelectedMode={setSelectedMode} setSelectedMode={setSelectedMode}
/> />
@ -261,7 +252,7 @@ export function Dialog({ setOpen }: { setOpen: (open: boolean) => void }) {
<ErrorView <ErrorView
errorMessage={errorMessage} errorMessage={errorMessage}
onClose={() => { onClose={() => {
setOpen(false); onClose();
setErrorMessage(null); setErrorMessage(null);
}} }}
onRetry={() => { onRetry={() => {
@ -291,7 +282,7 @@ function ModeSelectionView({
return ( return (
<div className="w-full space-y-4"> <div className="w-full space-y-4">
<div className="space-y-0 asnimate-fadeIn"> <div className="asnimate-fadeIn space-y-0">
<h2 className="text-lg font-bold leading-tight dark:text-white"> <h2 className="text-lg font-bold leading-tight dark:text-white">
Virtual Media Source Virtual Media Source
</h2> </h2>
@ -345,7 +336,7 @@ function ModeSelectionView({
)} )}
> >
<div <div
className="relative z-50 flex flex-col items-start p-4 select-none" className="relative z-50 flex select-none flex-col items-start p-4"
onClick={() => onClick={() =>
disabled ? null : setSelectedMode(mode as "browser" | "url" | "device") disabled ? null : setSelectedMode(mode as "browser" | "url" | "device")
} }
@ -353,7 +344,7 @@ function ModeSelectionView({
<div> <div>
<Card> <Card>
<div className="p-1"> <div className="p-1">
<Icon className="w-4 h-4 text-blue-700 shrink-0 dark:text-blue-400" /> <Icon className="h-4 w-4 shrink-0 text-blue-700 dark:text-blue-400" />
</div> </div>
</Card> </Card>
</div> </div>
@ -373,7 +364,7 @@ function ModeSelectionView({
value={mode} value={mode}
disabled={disabled} disabled={disabled}
checked={selectedMode === mode} checked={selectedMode === mode}
className="absolute w-4 h-4 text-blue-700 right-4 top-4" className="absolute right-4 top-4 h-4 w-4 text-blue-700"
/> />
</div> </div>
</Card> </Card>
@ -381,13 +372,13 @@ function ModeSelectionView({
))} ))}
</div> </div>
<div <div
className="flex justify-end opacity-0 animate-fadeIn" className="flex animate-fadeIn justify-end opacity-0"
style={{ style={{
animationDuration: "0.7s", animationDuration: "0.7s",
animationDelay: "0.2s", animationDelay: "0.2s",
}} }}
> >
<div className="flex pt-2 gap-x-2"> <div className="flex gap-x-2 pt-2">
<Button size="MD" theme="blank" onClick={onClose} text="Cancel" /> <Button size="MD" theme="blank" onClick={onClose} text="Cancel" />
<Button <Button
size="MD" size="MD"
@ -445,18 +436,18 @@ function BrowserFileView({
className="block cursor-pointer select-none" className="block cursor-pointer select-none"
> >
<div <div
className="opacity-0 group animate-fadeIn" className="group animate-fadeIn opacity-0"
style={{ style={{
animationDuration: "0.7s", animationDuration: "0.7s",
}} }}
> >
<Card className="transition-all duration-300 outline-dashed hover:bg-blue-50/50"> <Card className="outline-dashed transition-all duration-300 hover:bg-blue-50/50">
<div className="w-full px-4 py-12"> <div className="w-full px-4 py-12">
<div className="flex flex-col items-center justify-center h-full text-center"> <div className="flex h-full flex-col items-center justify-center text-center">
{selectedFile ? ( {selectedFile ? (
<> <>
<div className="space-y-1"> <div className="space-y-1">
<LuHardDrive className="w-6 h-6 mx-auto text-blue-700" /> <LuHardDrive className="mx-auto h-6 w-6 text-blue-700" />
<h3 className="text-sm font-semibold leading-none"> <h3 className="text-sm font-semibold leading-none">
{formatters.truncateMiddle(selectedFile.name, 40)} {formatters.truncateMiddle(selectedFile.name, 40)}
</h3> </h3>
@ -467,7 +458,7 @@ function BrowserFileView({
</> </>
) : ( ) : (
<div className="space-y-1"> <div className="space-y-1">
<PlusCircleIcon className="w-6 h-6 mx-auto text-blue-700" /> <PlusCircleIcon className="mx-auto h-6 w-6 text-blue-700" />
<h3 className="text-sm font-semibold leading-none"> <h3 className="text-sm font-semibold leading-none">
Click to select a file Click to select a file
</h3> </h3>
@ -491,7 +482,7 @@ function BrowserFileView({
</div> </div>
<div <div
className="flex items-end justify-between w-full opacity-0 animate-fadeIn" className="flex w-full animate-fadeIn items-end justify-between opacity-0"
style={{ style={{
animationDuration: "0.7s", animationDuration: "0.7s",
animationDelay: "0.1s", animationDelay: "0.1s",
@ -586,7 +577,7 @@ function UrlView({
/> />
<div <div
className="opacity-0 animate-fadeIn" className="animate-fadeIn opacity-0"
style={{ style={{
animationDuration: "0.7s", animationDuration: "0.7s",
}} }}
@ -601,7 +592,7 @@ function UrlView({
/> />
</div> </div>
<div <div
className="flex items-end justify-between w-full opacity-0 animate-fadeIn" className="flex w-full animate-fadeIn items-end justify-between opacity-0"
style={{ style={{
animationDuration: "0.7s", animationDuration: "0.7s",
animationDelay: "0.1s", animationDelay: "0.1s",
@ -627,7 +618,7 @@ function UrlView({
<hr className="border-slate-800/30 dark:border-slate-300/20" /> <hr className="border-slate-800/30 dark:border-slate-300/20" />
<div <div
className="opacity-0 animate-fadeIn" className="animate-fadeIn opacity-0"
style={{ style={{
animationDuration: "0.7s", animationDuration: "0.7s",
animationDelay: "0.2s", animationDelay: "0.2s",
@ -636,7 +627,7 @@ function UrlView({
<h2 className="mb-2 text-sm font-semibold text-black dark:text-white"> <h2 className="mb-2 text-sm font-semibold text-black dark:text-white">
Popular images Popular images
</h2> </h2>
<Card className="w-full divide-y divide-y-slate-800/30 dark:divide-slate-300/20"> <Card className="divide-y-slate-800/30 w-full divide-y dark:divide-slate-300/20">
{popularImages.map((image, index) => ( {popularImages.map((image, index) => (
<div key={index} className="flex items-center justify-between gap-x-4 p-3.5"> <div key={index} className="flex items-center justify-between gap-x-4 p-3.5">
<div className="flex items-center gap-x-4"> <div className="flex items-center gap-x-4">
@ -805,7 +796,7 @@ function DeviceFileView({
description="Select an image to mount from the JetKVM storage" description="Select an image to mount from the JetKVM storage"
/> />
<div <div
className="w-full opacity-0 animate-fadeIn" className="w-full animate-fadeIn opacity-0"
style={{ style={{
animationDuration: "0.7s", animationDuration: "0.7s",
animationDelay: "0.1s", animationDelay: "0.1s",
@ -816,7 +807,7 @@ function DeviceFileView({
<div className="flex items-center justify-center py-8 text-center"> <div className="flex items-center justify-center py-8 text-center">
<div className="space-y-3"> <div className="space-y-3">
<div className="space-y-1"> <div className="space-y-1">
<PlusCircleIcon className="w-6 h-6 mx-auto text-blue-700 dark:text-blue-500" /> <PlusCircleIcon className="mx-auto h-6 w-6 text-blue-700 dark:text-blue-500" />
<h3 className="text-sm font-semibold leading-none text-black dark:text-white"> <h3 className="text-sm font-semibold leading-none text-black dark:text-white">
No images available No images available
</h3> </h3>
@ -835,7 +826,7 @@ function DeviceFileView({
</div> </div>
</div> </div>
) : ( ) : (
<div className="w-full divide-y divide-y-slate-800/30 dark:divide-slate-300/20"> <div className="divide-y-slate-800/30 w-full divide-y dark:divide-slate-300/20">
{currentFiles.map((file, index) => ( {currentFiles.map((file, index) => (
<PreUploadedImageItem <PreUploadedImageItem
key={index} key={index}
@ -888,7 +879,7 @@ function DeviceFileView({
{onStorageFiles.length > 0 ? ( {onStorageFiles.length > 0 ? (
<div <div
className="flex items-end justify-between opacity-0 animate-fadeIn" className="flex animate-fadeIn items-end justify-between opacity-0"
style={{ style={{
animationDuration: "0.7s", animationDuration: "0.7s",
animationDelay: "0.15s", animationDelay: "0.15s",
@ -916,7 +907,7 @@ function DeviceFileView({
</div> </div>
) : ( ) : (
<div <div
className="flex items-end justify-end opacity-0 animate-fadeIn" className="flex animate-fadeIn items-end justify-end opacity-0"
style={{ style={{
animationDuration: "0.7s", animationDuration: "0.7s",
animationDelay: "0.15s", animationDelay: "0.15s",
@ -929,31 +920,39 @@ function DeviceFileView({
)} )}
<hr className="border-slate-800/20 dark:border-slate-300/20" /> <hr className="border-slate-800/20 dark:border-slate-300/20" />
<div <div
className="space-y-2 opacity-0 animate-fadeIn" className="animate-fadeIn space-y-2 opacity-0"
style={{ style={{
animationDuration: "0.7s", animationDuration: "0.7s",
animationDelay: "0.20s", animationDelay: "0.20s",
}} }}
> >
<div className="flex justify-between text-sm"> <div className="flex justify-between text-sm">
<span className="font-medium text-black dark:text-white">Available Storage</span> <span className="font-medium text-black dark:text-white">
<span className="text-slate-700 dark:text-slate-300">{percentageUsed}% used</span> Available Storage
</span>
<span className="text-slate-700 dark:text-slate-300">
{percentageUsed}% used
</span>
</div> </div>
<div className="h-3.5 w-full overflow-hidden rounded-sm bg-slate-200 dark:bg-slate-700"> <div className="h-3.5 w-full overflow-hidden rounded-sm bg-slate-200 dark:bg-slate-700">
<div <div
className="h-full transition-all duration-300 ease-in-out bg-blue-700 rounded-sm dark:bg-blue-500" className="h-full rounded-sm bg-blue-700 transition-all duration-300 ease-in-out dark:bg-blue-500"
style={{ width: `${percentageUsed}%` }} style={{ width: `${percentageUsed}%` }}
></div> ></div>
</div> </div>
<div className="flex justify-between text-sm text-slate-600"> <div className="flex justify-between text-sm text-slate-600">
<span className="text-slate-700 dark:text-slate-300">{formatters.bytes(bytesUsed)} used</span> <span className="text-slate-700 dark:text-slate-300">
<span className="text-slate-700 dark:text-slate-300">{formatters.bytes(bytesFree)} free</span> {formatters.bytes(bytesUsed)} used
</span>
<span className="text-slate-700 dark:text-slate-300">
{formatters.bytes(bytesFree)} free
</span>
</div> </div>
</div> </div>
{onStorageFiles.length > 0 && ( {onStorageFiles.length > 0 && (
<div <div
className="w-full opacity-0 animate-fadeIn" className="w-full animate-fadeIn opacity-0"
style={{ style={{
animationDuration: "0.7s", animationDuration: "0.7s",
animationDelay: "0.25s", animationDelay: "0.25s",
@ -1245,7 +1244,7 @@ function UploadFileView({
} }
/> />
<div <div
className="space-y-2 opacity-0 animate-fadeIn" className="animate-fadeIn space-y-2 opacity-0"
style={{ style={{
animationDuration: "0.7s", animationDuration: "0.7s",
}} }}
@ -1261,17 +1260,18 @@ function UploadFileView({
<div className="group"> <div className="group">
<Card <Card
className={cx("transition-all duration-300", { className={cx("transition-all duration-300", {
"cursor-pointer hover:bg-blue-900/50 dark:hover:bg-blue-900/50": uploadState === "idle", "cursor-pointer hover:bg-blue-900/50 dark:hover:bg-blue-900/50":
uploadState === "idle",
})} })}
> >
<div className="h-[186px] w-full px-4"> <div className="h-[186px] w-full px-4">
<div className="flex flex-col items-center justify-center h-full text-center"> <div className="flex h-full flex-col items-center justify-center text-center">
{uploadState === "idle" && ( {uploadState === "idle" && (
<div className="space-y-1"> <div className="space-y-1">
<div className="inline-block"> <div className="inline-block">
<Card> <Card>
<div className="p-1"> <div className="p-1">
<PlusCircleIcon className="w-4 h-4 text-blue-500 dark:text-blue-400 shrink-0" /> <PlusCircleIcon className="h-4 w-4 shrink-0 text-blue-500 dark:text-blue-400" />
</div> </div>
</Card> </Card>
</div> </div>
@ -1291,11 +1291,11 @@ function UploadFileView({
<div className="inline-block"> <div className="inline-block">
<Card> <Card>
<div className="p-1"> <div className="p-1">
<LuUpload className="w-4 h-4 text-blue-500 dark:text-blue-400 shrink-0" /> <LuUpload className="h-4 w-4 shrink-0 text-blue-500 dark:text-blue-400" />
</div> </div>
</Card> </Card>
</div> </div>
<h3 className="text-lg font-semibold text-black leading-non dark:text-white"> <h3 className="leading-non text-lg font-semibold text-black dark:text-white">
Uploading {formatters.truncateMiddle(uploadedFileName, 30)} Uploading {formatters.truncateMiddle(uploadedFileName, 30)}
</h3> </h3>
<p className="text-xs leading-none text-slate-700 dark:text-slate-300"> <p className="text-xs leading-none text-slate-700 dark:text-slate-300">
@ -1304,7 +1304,7 @@ function UploadFileView({
<div className="w-full space-y-2"> <div className="w-full space-y-2">
<div className="h-3.5 w-full overflow-hidden rounded-full bg-slate-300 dark:bg-slate-700"> <div className="h-3.5 w-full overflow-hidden rounded-full bg-slate-300 dark:bg-slate-700">
<div <div
className="h-3.5 rounded-full bg-blue-700 dark:bg-blue-500 transition-all duration-500 ease-linear" className="h-3.5 rounded-full bg-blue-700 transition-all duration-500 ease-linear dark:bg-blue-500"
style={{ width: `${uploadProgress}%` }} style={{ width: `${uploadProgress}%` }}
></div> ></div>
</div> </div>
@ -1325,7 +1325,7 @@ function UploadFileView({
<div className="inline-block"> <div className="inline-block">
<Card> <Card>
<div className="p-1"> <div className="p-1">
<LuCheck className="w-4 h-4 text-blue-500 dark:text-blue-400 shrink-0" /> <LuCheck className="h-4 w-4 shrink-0 text-blue-500 dark:text-blue-400" />
</div> </div>
</Card> </Card>
</div> </div>
@ -1350,13 +1350,15 @@ function UploadFileView({
className="hidden" className="hidden"
accept=".iso, .img" accept=".iso, .img"
/> />
{fileError && <p className="mt-2 text-sm text-red-600 dark:text-red-400">{fileError}</p>} {fileError && (
<p className="mt-2 text-sm text-red-600 dark:text-red-400">{fileError}</p>
)}
</div> </div>
{/* Display upload error if present */} {/* Display upload error if present */}
{uploadError && ( {uploadError && (
<div <div
className="mt-2 text-sm text-red-600 truncate opacity-0 dark:text-red-400 animate-fadeIn" className="mt-2 animate-fadeIn truncate text-sm text-red-600 opacity-0 dark:text-red-400"
style={{ animationDuration: "0.7s" }} style={{ animationDuration: "0.7s" }}
> >
Error: {uploadError} Error: {uploadError}
@ -1364,13 +1366,13 @@ function UploadFileView({
)} )}
<div <div
className="flex items-end w-full opacity-0 animate-fadeIn" className="flex w-full animate-fadeIn items-end opacity-0"
style={{ style={{
animationDuration: "0.7s", animationDuration: "0.7s",
animationDelay: "0.1s", animationDelay: "0.1s",
}} }}
> >
<div className="flex justify-end w-full space-x-2"> <div className="flex w-full justify-end space-x-2">
{uploadState === "uploading" ? ( {uploadState === "uploading" ? (
<Button <Button
size="MD" size="MD"
@ -1412,7 +1414,7 @@ function ErrorView({
<div className="w-full space-y-4"> <div className="w-full space-y-4">
<div className="space-y-2"> <div className="space-y-2">
<div className="flex items-center space-x-2 text-red-600"> <div className="flex items-center space-x-2 text-red-600">
<ExclamationTriangleIcon className="w-6 h-6" /> <ExclamationTriangleIcon className="h-6 w-6" />
<h2 className="text-lg font-bold leading-tight">Mount Error</h2> <h2 className="text-lg font-bold leading-tight">Mount Error</h2>
</div> </div>
<p className="text-sm leading-snug text-slate-600"> <p className="text-sm leading-snug text-slate-600">
@ -1420,7 +1422,7 @@ function ErrorView({
</p> </p>
</div> </div>
{errorMessage && ( {errorMessage && (
<Card className="p-4 border border-red-200 bg-red-50"> <Card className="border border-red-200 bg-red-50 p-4">
<p className="text-sm font-medium text-red-800">{errorMessage}</p> <p className="text-sm font-medium text-red-800">{errorMessage}</p>
</Card> </Card>
)} )}
@ -1480,12 +1482,12 @@ function PreUploadedImageItem({
<div className="flex items-center gap-x-1 text-slate-600 dark:text-slate-400"> <div className="flex items-center gap-x-1 text-slate-600 dark:text-slate-400">
{formatters.date(new Date(uploadedAt), { month: "short" })} {formatters.date(new Date(uploadedAt), { month: "short" })}
</div> </div>
<div className="mx-1 h-[10px] w-[1px] bg-slate-300 dark:bg-slate-600 text-slate-300"></div> <div className="mx-1 h-[10px] w-[1px] bg-slate-300 text-slate-300 dark:bg-slate-600"></div>
<div className="text-gray-600 dark:text-slate-400">{size}</div> <div className="text-gray-600 dark:text-slate-400">{size}</div>
</div> </div>
</div> </div>
</div> </div>
<div className="relative flex items-center select-none gap-x-3"> <div className="relative flex select-none items-center gap-x-3">
<div <div
className={cx("opacity-0 transition-opacity duration-200", { className={cx("opacity-0 transition-opacity duration-200", {
"w-auto opacity-100": isHovering, "w-auto opacity-100": isHovering,
@ -1509,7 +1511,7 @@ function PreUploadedImageItem({
checked={isSelected} checked={isSelected}
onChange={onSelect} onChange={onSelect}
name={name} name={name}
className="w-3 h-3 text-blue-700 bg-white dark:bg-slate-800 border-slate-800/30 dark:border-slate-300/20 focus:ring-blue-500 disabled:opacity-30" className="h-3 w-3 border-slate-800/30 bg-white text-blue-700 focus:ring-blue-500 disabled:opacity-30 dark:border-slate-300/20 dark:bg-slate-800"
onClick={e => e.stopPropagation()} // Prevent double-firing of onSelect onClick={e => e.stopPropagation()} // Prevent double-firing of onSelect
/> />
) : ( ) : (
@ -1549,7 +1551,7 @@ function UsbModeSelector({
setUsbMode: (mode: RemoteVirtualMediaState["mode"]) => void; setUsbMode: (mode: RemoteVirtualMediaState["mode"]) => void;
}) { }) {
return ( return (
<div className="flex flex-col items-start space-y-1 select-none"> <div className="flex select-none flex-col items-start space-y-1">
<label className="text-sm font-semibold text-black dark:text-white">Mount as</label> <label className="text-sm font-semibold text-black dark:text-white">Mount as</label>
<div className="flex space-x-4"> <div className="flex space-x-4">
<label htmlFor="cdrom" className="flex items-center"> <label htmlFor="cdrom" className="flex items-center">
@ -1559,7 +1561,7 @@ function UsbModeSelector({
name="mountType" name="mountType"
onChange={() => setUsbMode("CDROM")} onChange={() => setUsbMode("CDROM")}
checked={usbMode === "CDROM"} checked={usbMode === "CDROM"}
className="w-3 h-3 text-blue-700 transition-opacity bg-white border-slate-800/30 focus:ring-blue-500 disabled:opacity-30 dark:bg-slate-800" className="h-3 w-3 border-slate-800/30 bg-white text-blue-700 transition-opacity focus:ring-blue-500 disabled:opacity-30 dark:bg-slate-800"
/> />
<span className="ml-2 text-sm font-medium text-slate-900 dark:text-white"> <span className="ml-2 text-sm font-medium text-slate-900 dark:text-white">
CD/DVD CD/DVD
@ -1573,10 +1575,10 @@ function UsbModeSelector({
disabled disabled
checked={usbMode === "Disk"} checked={usbMode === "Disk"}
onChange={() => setUsbMode("Disk")} onChange={() => setUsbMode("Disk")}
className="w-3 h-3 text-blue-700 transition-opacity bg-white border-slate-800/30 focus:ring-blue-500 disabled:opacity-30 dark:bg-slate-800" className="h-3 w-3 border-slate-800/30 bg-white text-blue-700 transition-opacity focus:ring-blue-500 disabled:opacity-30 dark:bg-slate-800"
/> />
<div className="flex flex-col ml-2 gap-y-0"> <div className="ml-2 flex flex-col gap-y-0">
<span className="text-sm font-medium leading-none opacity-50 text-slate-900 dark:text-white"> <span className="text-sm font-medium leading-none text-slate-900 opacity-50 dark:text-white">
Disk Disk
</span> </span>
<div className="text-[10px] text-slate-500 dark:text-slate-400"> <div className="text-[10px] text-slate-500 dark:text-slate-400">