mirror of https://github.com/jetkvm/kvm.git
prettifying
This commit is contained in:
Adrian
parent
e9096c36f7
commit
03fd7508de
|
|
@ -5,27 +5,27 @@ import {
|
|||
useUiStore,
|
||||
useUpdateStore,
|
||||
} from "@/hooks/stores";
|
||||
import {Checkbox} from "@components/Checkbox";
|
||||
import {Button, LinkButton} from "@components/Button";
|
||||
import {TextAreaWithLabel} from "@components/TextArea";
|
||||
import {SectionHeader} from "@components/SectionHeader";
|
||||
import {GridCard} from "@components/Card";
|
||||
import {InputFieldWithLabel} from "@components/InputField";
|
||||
import {CheckCircleIcon} from "@heroicons/react/20/solid";
|
||||
import {cx} from "@/cva.config";
|
||||
import React, {useCallback, useEffect, useRef, useState} from "react";
|
||||
import {isOnDevice} from "@/main";
|
||||
import { Checkbox } from "@components/Checkbox";
|
||||
import { Button, LinkButton } from "@components/Button";
|
||||
import { TextAreaWithLabel } from "@components/TextArea";
|
||||
import { SectionHeader } from "@components/SectionHeader";
|
||||
import { GridCard } from "@components/Card";
|
||||
import { InputFieldWithLabel } from "@components/InputField";
|
||||
import { CheckCircleIcon } from "@heroicons/react/20/solid";
|
||||
import { cx } from "@/cva.config";
|
||||
import React, { useCallback, useEffect, useRef, useState } from "react";
|
||||
import { isOnDevice } from "@/main";
|
||||
import PointingFinger from "@/assets/pointing-finger.svg";
|
||||
import MouseIcon from "@/assets/mouse-icon.svg";
|
||||
import {useJsonRpc} from "@/hooks/useJsonRpc";
|
||||
import {SelectMenuBasic} from "../SelectMenuBasic";
|
||||
import {SystemVersionInfo} from "@components/UpdateDialog";
|
||||
import { useJsonRpc } from "@/hooks/useJsonRpc";
|
||||
import { SelectMenuBasic } from "../SelectMenuBasic";
|
||||
import { SystemVersionInfo } from "@components/UpdateDialog";
|
||||
import notifications from "@/notifications";
|
||||
import api from "../../api";
|
||||
import LocalAuthPasswordDialog from "@/components/LocalAuthPasswordDialog";
|
||||
import {LocalDevice} from "@routes/devices.$id";
|
||||
import {useRevalidator} from "react-router-dom";
|
||||
import {ShieldCheckIcon} from "@heroicons/react/20/solid";
|
||||
import { LocalDevice } from "@routes/devices.$id";
|
||||
import { useRevalidator } from "react-router-dom";
|
||||
import { ShieldCheckIcon } from "@heroicons/react/20/solid";
|
||||
|
||||
export function SettingsItem({
|
||||
title,
|
||||
|
|
@ -120,7 +120,7 @@ export default function SettingsSidebar() {
|
|||
|
||||
const handleUsbEmulationToggle = useCallback(
|
||||
(enabled: boolean) => {
|
||||
send("setUsbEmulationState", {enabled: enabled}, resp => {
|
||||
send("setUsbEmulationState", { enabled: enabled }, resp => {
|
||||
if ("error" in resp) {
|
||||
notifications.error(
|
||||
`Failed to ${enabled ? "enable" : "disable"} USB emulation: ${resp.error.data || "Unknown error"}`,
|
||||
|
|
@ -156,7 +156,7 @@ export default function SettingsSidebar() {
|
|||
};
|
||||
|
||||
const handleStreamQualityChange = (factor: string) => {
|
||||
send("setStreamQualityFactor", {factor: Number(factor)}, resp => {
|
||||
send("setStreamQualityFactor", { factor: Number(factor) }, resp => {
|
||||
if ("error" in resp) {
|
||||
notifications.error(
|
||||
`Failed to set stream quality: ${resp.error.data || "Unknown error"}`,
|
||||
|
|
@ -168,7 +168,7 @@ export default function SettingsSidebar() {
|
|||
};
|
||||
|
||||
const handleAutoUpdateChange = (enabled: boolean) => {
|
||||
send("setAutoUpdateState", {enabled}, resp => {
|
||||
send("setAutoUpdateState", { enabled }, resp => {
|
||||
if ("error" in resp) {
|
||||
notifications.error(
|
||||
`Failed to set auto-update: ${resp.error.data || "Unknown error"}`,
|
||||
|
|
@ -180,7 +180,7 @@ export default function SettingsSidebar() {
|
|||
};
|
||||
|
||||
const handleDevChannelChange = (enabled: boolean) => {
|
||||
send("setDevChannelState", {enabled}, resp => {
|
||||
send("setDevChannelState", { enabled }, resp => {
|
||||
if ("error" in resp) {
|
||||
notifications.error(
|
||||
`Failed to set dev channel state: ${resp.error.data || "Unknown error"}`,
|
||||
|
|
@ -192,7 +192,7 @@ export default function SettingsSidebar() {
|
|||
};
|
||||
|
||||
const handleJigglerChange = (enabled: boolean) => {
|
||||
send("setJigglerState", {enabled}, resp => {
|
||||
send("setJigglerState", { enabled }, resp => {
|
||||
if ("error" in resp) {
|
||||
notifications.error(
|
||||
`Failed to set jiggler state: ${resp.error.data || "Unknown error"}`,
|
||||
|
|
@ -204,7 +204,7 @@ export default function SettingsSidebar() {
|
|||
};
|
||||
|
||||
const handleEDIDChange = (newEdid: string) => {
|
||||
send("setEDID", {edid: newEdid}, resp => {
|
||||
send("setEDID", { edid: newEdid }, resp => {
|
||||
if ("error" in resp) {
|
||||
notifications.error(`Failed to set EDID: ${resp.error.data || "Unknown error"}`);
|
||||
return;
|
||||
|
|
@ -216,7 +216,7 @@ export default function SettingsSidebar() {
|
|||
};
|
||||
|
||||
const handleUsbConfigChange = useCallback((usbConfig: object) => {
|
||||
send("setUsbConfig", {usbConfig}, resp => {
|
||||
send("setUsbConfig", { usbConfig }, resp => {
|
||||
if ("error" in resp) {
|
||||
notifications.error(
|
||||
`Failed to update USB Config: ${resp.error.data || "Unknown error"}`,
|
||||
|
|
@ -232,7 +232,7 @@ export default function SettingsSidebar() {
|
|||
|
||||
const handleDevModeChange = useCallback(
|
||||
(developerMode: boolean) => {
|
||||
send("setDevModeState", {enabled: developerMode}, resp => {
|
||||
send("setDevModeState", { enabled: developerMode }, resp => {
|
||||
if ("error" in resp) {
|
||||
notifications.error(
|
||||
`Failed to set dev mode: ${resp.error.data || "Unknown error"}`,
|
||||
|
|
@ -241,7 +241,7 @@ export default function SettingsSidebar() {
|
|||
}
|
||||
setDeveloperMode(developerMode);
|
||||
setTimeout(() => {
|
||||
sidebarRef.current?.scrollTo({top: 5000, behavior: "smooth"});
|
||||
sidebarRef.current?.scrollTo({ top: 5000, behavior: "smooth" });
|
||||
}, 0);
|
||||
});
|
||||
},
|
||||
|
|
@ -249,7 +249,7 @@ export default function SettingsSidebar() {
|
|||
);
|
||||
|
||||
const handleUpdateSSHKey = useCallback(() => {
|
||||
send("setSSHKeyState", {sshKey}, resp => {
|
||||
send("setSSHKeyState", { sshKey }, resp => {
|
||||
if ("error" in resp) {
|
||||
notifications.error(
|
||||
`Failed to update SSH key: ${resp.error.data || "Unknown error"}`,
|
||||
|
|
@ -261,26 +261,26 @@ export default function SettingsSidebar() {
|
|||
}, [send, sshKey]);
|
||||
|
||||
const handleUsbProductIdChange = (productId: string) => {
|
||||
setUsbConfig({...usbConfig, usb_product_id: productId})
|
||||
setUsbConfig({... usbConfig, usb_product_id: productId})
|
||||
};
|
||||
|
||||
const handleUsbVendorIdChange = (vendorId: string) => {
|
||||
setUsbConfig({...usbConfig, usb_vendor_id: vendorId})
|
||||
setUsbConfig({... usbConfig, usb_vendor_id: vendorId})
|
||||
};
|
||||
|
||||
const handleUsbSerialChange = (serialNumber: string) => {
|
||||
setUsbConfig({...usbConfig, usb_serial_number: serialNumber})
|
||||
setUsbConfig({... usbConfig, usb_serial_number: serialNumber})
|
||||
};
|
||||
|
||||
const handleUsbName = (name: string) => {
|
||||
setUsbConfig({...usbConfig, usb_name: name})
|
||||
setUsbConfig({... usbConfig, usb_name: name})
|
||||
};
|
||||
|
||||
const handleUsbManufacturer = (manufacturer: string) => {
|
||||
setUsbConfig({...usbConfig, usb_manufacturer: manufacturer})
|
||||
setUsbConfig({... usbConfig, usb_manufacturer: manufacturer})
|
||||
};
|
||||
|
||||
const {setIsUpdateDialogOpen, setModalView, otaState} = useUpdateStore();
|
||||
const { setIsUpdateDialogOpen, setModalView, otaState } = useUpdateStore();
|
||||
const handleCheckForUpdates = () => {
|
||||
if (otaState.updating) {
|
||||
setModalView("updating");
|
||||
|
|
@ -379,7 +379,7 @@ export default function SettingsSidebar() {
|
|||
}
|
||||
}, []);
|
||||
|
||||
const {setModalView: setLocalAuthModalView} = useLocalAuthModalStore();
|
||||
const { setModalView: setLocalAuthModalView } = useLocalAuthModalStore();
|
||||
const [isLocalAuthDialogOpen, setIsLocalAuthDialogOpen] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
|
|
@ -437,7 +437,7 @@ export default function SettingsSidebar() {
|
|||
onKeyDown={e => e.stopPropagation()}
|
||||
onKeyUp={e => e.stopPropagation()}
|
||||
>
|
||||
<SidebarHeader title="Settings" setSidebarView={setSidebarView}/>
|
||||
<SidebarHeader title="Settings" setSidebarView={setSidebarView} />
|
||||
<div
|
||||
className="h-full px-4 py-2 space-y-4 overflow-y-scroll bg-white dark:bg-slate-900"
|
||||
ref={sidebarRef}
|
||||
|
|
@ -450,7 +450,7 @@ export default function SettingsSidebar() {
|
|||
currentVersions ? (
|
||||
<>
|
||||
App: {currentVersions.appVersion}
|
||||
<br/>
|
||||
<br />
|
||||
System: {currentVersions.systemVersion}
|
||||
</>
|
||||
) : (
|
||||
|
|
@ -467,7 +467,7 @@ export default function SettingsSidebar() {
|
|||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="h-[1px] w-full bg-slate-800/10 dark:bg-slate-300/20"/>
|
||||
<div className="h-[1px] w-full bg-slate-800/10 dark:bg-slate-300/20" />
|
||||
<SectionHeader
|
||||
title="Mouse"
|
||||
description="Customize mouse behavior and interaction settings"
|
||||
|
|
@ -497,7 +497,7 @@ export default function SettingsSidebar() {
|
|||
/>
|
||||
</SettingsItem>
|
||||
<div className="space-y-4">
|
||||
<SettingsItem title="Modes" description="Choose the mouse input mode"/>
|
||||
<SettingsItem title="Modes" description="Choose the mouse input mode" />
|
||||
<div className="flex items-center gap-4">
|
||||
<button
|
||||
className="block group grow"
|
||||
|
|
@ -519,7 +519,7 @@ export default function SettingsSidebar() {
|
|||
Most convenient
|
||||
</p>
|
||||
</div>
|
||||
<CheckCircleIcon className="w-4 h-4 text-blue-700 dark:text-blue-500"/>
|
||||
<CheckCircleIcon className="w-4 h-4 text-blue-700 dark:text-blue-500" />
|
||||
</div>
|
||||
</div>
|
||||
</GridCard>
|
||||
|
|
@ -530,7 +530,7 @@ export default function SettingsSidebar() {
|
|||
>
|
||||
<GridCard>
|
||||
<div className="flex items-center px-4 py-3 gap-x-4">
|
||||
<img className="w-6 shrink-0" src={MouseIcon} alt="Mouse icon"/>
|
||||
<img className="w-6 shrink-0" src={MouseIcon} alt="Mouse icon" />
|
||||
<div className="flex items-center justify-between grow">
|
||||
<div className="text-left">
|
||||
<h3 className="text-sm font-semibold text-black dark:text-white">
|
||||
|
|
@ -548,7 +548,7 @@ export default function SettingsSidebar() {
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="h-[1px] w-full bg-slate-800/10 dark:bg-slate-300/20"/>
|
||||
<div className="h-[1px] w-full bg-slate-800/10 dark:bg-slate-300/20" />
|
||||
<div className="pb-2 space-y-4">
|
||||
<SectionHeader
|
||||
title="Video"
|
||||
|
|
@ -564,9 +564,9 @@ export default function SettingsSidebar() {
|
|||
label=""
|
||||
value={streamQuality}
|
||||
options={[
|
||||
{value: "1", label: "High"},
|
||||
{value: "0.5", label: "Medium"},
|
||||
{value: "0.1", label: "Low"},
|
||||
{ value: "1", label: "High" },
|
||||
{ value: "0.5", label: "Medium" },
|
||||
{ value: "0.1", label: "Low" },
|
||||
]}
|
||||
onChange={e => handleStreamQualityChange(e.target.value)}
|
||||
/>
|
||||
|
|
@ -588,7 +588,7 @@ export default function SettingsSidebar() {
|
|||
handleEDIDChange(e.target.value as string);
|
||||
}
|
||||
}}
|
||||
options={[...edids, {value: "custom", label: "Custom"}]}
|
||||
options={[...edids, { value: "custom", label: "Custom" }]}
|
||||
/>
|
||||
</SettingsItem>
|
||||
{customEdidValue !== null && (
|
||||
|
|
@ -627,7 +627,7 @@ export default function SettingsSidebar() {
|
|||
</div>
|
||||
{isOnDevice && (
|
||||
<>
|
||||
<div className="h-[1px] w-full bg-slate-800/10 dark:bg-slate-300/20"/>
|
||||
<div className="h-[1px] w-full bg-slate-800/10 dark:bg-slate-300/20" />
|
||||
<div className="pb-4 space-y-4">
|
||||
<SectionHeader
|
||||
title="JetKVM Cloud"
|
||||
|
|
@ -636,8 +636,7 @@ export default function SettingsSidebar() {
|
|||
|
||||
<GridCard>
|
||||
<div className="flex items-start p-4 gap-x-4">
|
||||
<ShieldCheckIcon
|
||||
className="w-8 h-8 mt-1 text-blue-600 shrink-0 dark:text-blue-500"/>
|
||||
<ShieldCheckIcon className="w-8 h-8 mt-1 text-blue-600 shrink-0 dark:text-blue-500" />
|
||||
<div className="space-y-3">
|
||||
<div className="space-y-2">
|
||||
<h3 className="text-base font-bold text-slate-900 dark:text-white">
|
||||
|
|
@ -665,7 +664,7 @@ export default function SettingsSidebar() {
|
|||
.
|
||||
</div>
|
||||
</div>
|
||||
<hr className="block w-full dark:border-slate-600"/>
|
||||
<hr className="block w-full dark:border-slate-600" />
|
||||
|
||||
<div>
|
||||
<LinkButton
|
||||
|
|
@ -726,7 +725,7 @@ export default function SettingsSidebar() {
|
|||
</div>
|
||||
</>
|
||||
)}
|
||||
<div className="h-[1px] w-full bg-slate-800/10 dark:bg-slate-300/20"/>
|
||||
<div className="h-[1px] w-full bg-slate-800/10 dark:bg-slate-300/20" />
|
||||
{isOnDevice ? (
|
||||
<>
|
||||
<div className="pb-2 space-y-4">
|
||||
|
|
@ -781,7 +780,7 @@ export default function SettingsSidebar() {
|
|||
)}
|
||||
</div>
|
||||
</div>
|
||||
<div className="h-[1px] w-full bg-slate-800/10 dark:bg-slate-300/20"/>
|
||||
<div className="h-[1px] w-full bg-slate-800/10 dark:bg-slate-300/20" />
|
||||
</>
|
||||
) : null}
|
||||
<div className="pb-2 space-y-4">
|
||||
|
|
@ -815,7 +814,7 @@ export default function SettingsSidebar() {
|
|||
</SettingsItem>
|
||||
</div>
|
||||
</div>
|
||||
<div className="h-[1px] w-full bg-slate-800/10 dark:bg-slate-300/20"/>
|
||||
<div className="h-[1px] w-full bg-slate-800/10 dark:bg-slate-300/20" />
|
||||
|
||||
<SectionHeader
|
||||
title="Appearance"
|
||||
|
|
@ -827,9 +826,9 @@ export default function SettingsSidebar() {
|
|||
label=""
|
||||
value={currentTheme}
|
||||
options={[
|
||||
{value: "system", label: "System"},
|
||||
{value: "light", label: "Light"},
|
||||
{value: "dark", label: "Dark"},
|
||||
{ value: "system", label: "System" },
|
||||
{ value: "light", label: "Light" },
|
||||
{ value: "dark", label: "Dark" },
|
||||
]}
|
||||
onChange={e => {
|
||||
setCurrentTheme(e.target.value);
|
||||
|
|
@ -837,7 +836,7 @@ export default function SettingsSidebar() {
|
|||
}}
|
||||
/>
|
||||
</SettingsItem>
|
||||
<div className="h-[1px] w-full bg-slate-800/10 dark:bg-slate-300/20"/>
|
||||
<div className="h-[1px] w-full bg-slate-800/10 dark:bg-slate-300/20" />
|
||||
<div className="pb-2 space-y-4">
|
||||
<SectionHeader
|
||||
title="Advanced"
|
||||
|
|
@ -915,9 +914,7 @@ export default function SettingsSidebar() {
|
|||
theme="primary"
|
||||
text="Update USB Config"
|
||||
onClick={() => {
|
||||
if (Object.values(usbConfig).every(function (i) {
|
||||
return Boolean(i);
|
||||
})) {
|
||||
if (Object.values(usbConfig).every(function(i) { return Boolean(i); })) {
|
||||
handleUsbConfigChange(usbConfig);
|
||||
notifications.success("Successfully updated USB Config")
|
||||
} else {
|
||||
|
|
|
|||
Loading…
Reference in New Issue