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

cleanup settings menu

This commit is contained in:
Andrew Davis 2025-03-30 22:40:39 +10:00
parent 452e7827c3
commit 2766f50dce
No known key found for this signature in database
GPG Key ID: 30AB5B89A109D044
1 changed files with 58 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
ui/src/routes/devices.$id.settings.macros.tsx
View File

@ -1,5 +1,5 @@
import { useState, useEffect, useRef, useCallback } from "react";
import { LuPlus, LuTrash, LuSave, LuX, LuPenLine, LuLoader, LuGripVertical, LuInfo } from "react-icons/lu";
import { LuPlus, LuTrash, LuX, LuPenLine, LuLoader, LuGripVertical, LuInfo } from "react-icons/lu";
import { Combobox, ComboboxInput, ComboboxOption, ComboboxOptions } from "@headlessui/react";
import { KeySequence, useMacrosStore } from "../hooks/stores";
@ -8,6 +8,7 @@ import { Button } from "../components/Button";
import { keys, modifiers } from "../keyboardMappings";
import { useJsonRpc } from "../hooks/useJsonRpc";
import notifications from "../notifications";
import { SettingsItem } from "../routes/devices.$id.settings";
const DEFAULT_DELAY = 50;
@ -956,26 +957,22 @@ export default function SettingsMacrosRoute() {
)}
<div className="flex items-center justify-between mb-4">
<div className="flex items-center gap-4">
<div className="text-sm text-slate-600 dark:text-slate-400">
<span className={macros.length >= MAX_TOTAL_MACROS ? "font-semibold text-amber-600 dark:text-amber-400" : ""}>
Macros: {macros.length}/{MAX_TOTAL_MACROS}
</span>
{macros.length >= MAX_TOTAL_MACROS && (
<span className="ml-2 text-xs text-amber-600 dark:text-amber-400">(maximum reached)</span>
)}
</div>
<SettingsItem
title="Macros"
description={`${macros.length}/${MAX_TOTAL_MACROS}`}
>
<div className="flex items-center gap-2">
{!showAddMacro && (
<Button
size="XS"
size="SM"
theme="primary"
text={isMaxMacrosReached ? `Max (${MAX_TOTAL_MACROS})` : "Add New"}
LeadingIcon={LuPlus}
text={isMaxMacrosReached ? `Max Reached` : "Add New Macro"}
onClick={() => setShowAddMacro(true)}
disabled={isMaxMacrosReached}
/>
)}
</div>
</SettingsItem>
</div>
{loading && (
@ -1127,6 +1124,14 @@ export default function SettingsMacrosRoute() {
/>
</div>
) : (
<div className="flex gap-x-2">
<Button
size="SM"
theme="primary"
text={isSaving ? "Saving..." : "Save Macro"}
onClick={handleAddMacro}
disabled={isSaving}
/>
<Button
size="SM"
theme="light"
@ -1141,15 +1146,8 @@ export default function SettingsMacrosRoute() {
}
}}
/>
</div>
)}
<Button
size="SM"
theme="primary"
text={isSaving ? "Saving..." : "Save Macro"}
LeadingIcon={isSaving ? LuLoader : LuSave}
onClick={handleAddMacro}
disabled={isSaving}
/>
</div>
</div>
</div>
@ -1157,7 +1155,6 @@ export default function SettingsMacrosRoute() {
)}
{macros.length > 0 && (
<div className="space-y-2">
<h3 className="text-sm font-medium text-slate-900 dark:text-white">Saved Macros</h3>
{macros.length === 0 ? (
<p className="text-center text-sm text-slate-500 dark:text-slate-400 py-4">
@ -1284,6 +1281,14 @@ export default function SettingsMacrosRoute() {
</div>
<div className="mt-4 flex items-center justify-between border-t border-slate-200 pt-4 dark:border-slate-700">
<div className="flex gap-x-2">
<Button
size="SM"
theme="primary"
text={isUpdating ? "Saving..." : "Save Changes"}
onClick={handleUpdateMacro}
disabled={isUpdating}
/>
<Button
size="SM"
theme="light"
@ -1294,14 +1299,7 @@ export default function SettingsMacrosRoute() {
setErrors({});
}}
/>
<Button
size="SM"
theme="primary"
text={isUpdating ? "Saving..." : "Save Changes"}
LeadingIcon={isUpdating ? LuLoader : LuSave}
onClick={handleUpdateMacro}
disabled={isUpdating}
/>
</div>
</div>
</div>
</div>