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

refactor(ui): enhance Modal and network settings components 

- Add stable scrollbar gutter to Modal component
- Refactor custom domain input handling and layout adjustments
This commit is contained in:
Adam Shiervani 2025-05-20 14:23:09 +02:00
parent 68d1e37ecb
commit c2986aa3f1
2 changed files with 22 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
ui/src/components/Modal.tsx
View File

@ -20,7 +20,9 @@ const Modal = React.memo(function Modal({
transition transition
className="fixed inset-0 bg-gray-500/75 transition-opacity data-closed:opacity-0 data-enter:duration-500 data-leave:duration-200 data-enter:ease-out data-leave:ease-in dark:bg-slate-900/90" className="fixed inset-0 bg-gray-500/75 transition-opacity data-closed:opacity-0 data-enter:duration-500 data-leave:duration-200 data-enter:ease-out data-leave:ease-in dark:bg-slate-900/90"
/> />
<div className="fixed inset-0 z-20 w-screen overflow-y-auto"> <div className="fixed inset-0 z-20 w-screen overflow-y-auto" style={{
scrollbarGutter: 'stable'
}}>
{/* TODO: This doesn't work well with other-sessions */} {/* TODO: This doesn't work well with other-sessions */}
<div className="flex min-h-full items-end justify-center p-4 text-center md:items-baseline md:p-4"> <div className="flex min-h-full items-end justify-center p-4 text-center md:items-baseline md:p-4">
<DialogPanel <DialogPanel

39
ui/src/routes/devices.$id.settings.network.tsx
View File

@ -16,7 +16,7 @@ import {
import { useJsonRpc } from "@/hooks/useJsonRpc"; import { useJsonRpc } from "@/hooks/useJsonRpc";
import { Button } from "@components/Button"; import { Button } from "@components/Button";
import { GridCard } from "@components/Card"; import { GridCard } from "@components/Card";
import InputField from "@components/InputField"; import InputField, { InputFieldWithLabel } from "@components/InputField";
import { SelectMenuBasic } from "@/components/SelectMenuBasic"; import { SelectMenuBasic } from "@/components/SelectMenuBasic";
import { SettingsPageHeader } from "@/components/SettingsPageheader"; import { SettingsPageHeader } from "@/components/SettingsPageheader";
import Fieldset from "@/components/Fieldset"; import Fieldset from "@/components/Fieldset";
@ -115,6 +115,14 @@ export default function SettingsNetworkRoute() {
}); });
}, [send]); }, [send]);
const getNetworkState = useCallback(() => {
send("getNetworkState", {}, resp => {
if ("error" in resp) return;
console.log(resp.result);
setNetworkState(resp.result as NetworkState);
});
}, [send, setNetworkState]);
const setNetworkSettingsRemote = useCallback( const setNetworkSettingsRemote = useCallback(
(settings: NetworkSettings) => { (settings: NetworkSettings) => {
setNetworkSettingsLoaded(false); setNetworkSettingsLoaded(false);
@ -130,21 +138,14 @@ export default function SettingsNetworkRoute() {
// We need to update the firstNetworkSettings ref to the new settings so we can use it to determine if the settings have changed // We need to update the firstNetworkSettings ref to the new settings so we can use it to determine if the settings have changed
firstNetworkSettings.current = resp.result as NetworkSettings; firstNetworkSettings.current = resp.result as NetworkSettings;
setNetworkSettings(resp.result as NetworkSettings); setNetworkSettings(resp.result as NetworkSettings);
getNetworkState();
setNetworkSettingsLoaded(true); setNetworkSettingsLoaded(true);
notifications.success("Network settings saved"); notifications.success("Network settings saved");
}); });
}, },
[send], [getNetworkState, send],
); );
const getNetworkState = useCallback(() => {
send("getNetworkState", {}, resp => {
if ("error" in resp) return;
console.log(resp.result);
setNetworkState(resp.result as NetworkState);
});
}, [send, setNetworkState]);
const handleRenewLease = useCallback(() => { const handleRenewLease = useCallback(() => {
send("renewDHCPLease", {}, resp => { send("renewDHCPLease", {}, resp => {
if ("error" in resp) { if ("error" in resp) {
@ -255,7 +256,7 @@ export default function SettingsNetworkRoute() {
</div> </div>
<div className="space-y-4"> <div className="space-y-4">
<div className="space-y-4"> <div className="space-y-1">
<SettingsItem <SettingsItem
title="Domain" title="Domain"
description="Network domain suffix for the device" description="Network domain suffix for the device"
@ -274,19 +275,17 @@ export default function SettingsNetworkRoute() {
</div> </div>
</SettingsItem> </SettingsItem>
{selectedDomainOption === "custom" && ( {selectedDomainOption === "custom" && (
<div className="flex items-center justify-between gap-x-2"> <div className="mt-2 w-1/3 border-l border-slate-800/10 pl-4 dark:border-slate-300/20">
<InputField <InputFieldWithLabel
size="SM" size="SM"
type="text" type="text"
label="Custom Domain"
placeholder="home" placeholder="home"
value={customDomain} value={customDomain}
onChange={e => setCustomDomain(e.target.value)} onChange={e => {
/> setCustomDomain(e.target.value);
<Button handleCustomDomainChange(e.target.value);
size="SM" }}
theme="primary"
text="Set"
onClick={() => handleCustomDomainChange(customDomain)}
/> />
</div> </div>
)} )}