saving device name to settings store

added UI elements

config.go

@@ -25,6 +25,7 @@ type Config struct {
 	WakeOnLanDevices     []WakeOnLanDevice `json:"wake_on_lan_devices"`
 	EdidString           string            `json:"hdmi_edid_string"`
 	ActiveExtension      string            `json:"active_extension"`
+	DeviceName           string            `json:"device_name"`
 	DisplayMaxBrightness int               `json:"display_max_brightness"`
 	DisplayDimAfterSec   int               `json:"display_dim_after_sec"`
 	DisplayOffAfterSec   int               `json:"display_off_after_sec"`
@@ -36,9 +37,11 @@ var defaultConfig = &Config{
 	CloudURL:             "https://api.jetkvm.com",
 	AutoUpdateEnabled:    true, // Set a default value
 	ActiveExtension:      "",
+	DeviceName:           "JetKVM",
 	DisplayMaxBrightness: 64,
 	DisplayDimAfterSec:   120,  // 2 minutes
 	DisplayOffAfterSec:   1800, // 30 minutes
+
 }
 
 var (

jsonrpc.go

@@ -293,6 +293,24 @@ type SSHKeyState struct {
 	SSHKey string `json:"sshKey"`
 }
 
+func rpcGetDeviceName() (string, error) {
+	LoadConfig()
+	return config.DeviceName, nil
+}
+
+func rpcSetDeviceName(deviceName string) error {
+	LoadConfig()
+	config.DeviceName = deviceName
+
+	err := SaveConfig()
+	if err != nil {
+		return fmt.Errorf("failed to save device name: %w", err)
+	}
+
+	log.Printf("[jsonrpc.go:rpcSetDeviceName] device name set to %s", deviceName)
+	return nil
+}
+
 func rpcGetDevModeState() (DevModeState, error) {
 	devModeEnabled := false
 	if _, err := os.Stat(devModeFile); err != nil {
@@ -755,6 +773,8 @@ var rpcHandlers = map[string]RPCHandler{
 	"setDevChannelState":     {Func: rpcSetDevChannelState, Params: []string{"enabled"}},
 	"getUpdateStatus":        {Func: rpcGetUpdateStatus},
 	"tryUpdate":              {Func: rpcTryUpdate},
+	"getDeviceName":          {Func: rpcGetDeviceName},
+	"setDeviceName":          {Func: rpcSetDeviceName, Params: []string{"deviceName"}},
 	"getDevModeState":        {Func: rpcGetDevModeState},
 	"setDevModeState":        {Func: rpcSetDevModeState, Params: []string{"enabled"}},
 	"getSSHKeyState":         {Func: rpcGetSSHKeyState},

ui/src/components/sidebar/settings.tsx

@@ -19,6 +19,7 @@ import PointingFinger from "@/assets/pointing-finger.svg";
 import MouseIcon from "@/assets/mouse-icon.svg";
 import { useJsonRpc } from "@/hooks/useJsonRpc";
 import { SelectMenuBasic } from "../SelectMenuBasic";
+import { InputFieldWithLabel } from "@components/InputField";
 import { SystemVersionInfo } from "@components/UpdateDialog";
 import notifications from "@/notifications";
 import api from "../../api";
@@ -28,6 +29,7 @@ import { useRevalidator } from "react-router-dom";
 import { ShieldCheckIcon } from "@heroicons/react/20/solid";
 import { CLOUD_APP, SIGNAL_API } from "@/ui.config";
 
+
 export function SettingsItem({
   title,
   description,
@@ -97,6 +99,7 @@ export default function SettingsSidebar() {
   const hideCursor = useSettingsStore(state => state.isCursorHidden);
   const setHideCursor = useSettingsStore(state => state.setCursorVisibility);
   const setDeveloperMode = useSettingsStore(state => state.setDeveloperMode);
+  const setDeviceName = useSettingsStore(state => state.setDeviceName);
   const setBacklightSettings = useSettingsStore(state => state.setBacklightSettings);
 
   const [currentVersions, setCurrentVersions] = useState<{
@@ -173,6 +176,18 @@ export default function SettingsSidebar() {
     });
   };
 
+  const handleDeviceNameChange = (deviceName: string) => {
+    send("setDeviceName", { deviceName }, resp => {
+      if ("error" in resp) {
+        notifications.error(
+          `Failed to set device name: ${resp.error.data || "Unknown error"}`,
+        );
+        return;
+      }
+      setDeviceName(deviceName);
+    });
+  };
+
   const handleDevChannelChange = (enabled: boolean) => {
     send("setDevChannelState", { enabled }, resp => {
       if ("error" in resp) {
@@ -339,6 +354,12 @@ export default function SettingsSidebar() {
       setBacklightSettings(result);
     })
 
+    send("getDeviceName", {}, resp => {
+      if ("error" in resp) return;
+      const result = resp.result as { deviceName: string };
+      setDeviceName(result.deviceName);
+    });
+
     send("getDevModeState", {}, resp => {
       if ("error" in resp) return;
       const result = resp.result as { enabled: boolean };
@@ -833,6 +854,15 @@ export default function SettingsSidebar() {
             }}
           />
         </SettingsItem>
+        <SettingsItem title="Device Name" description="Set your device name">
+          <InputFieldWithLabel
+            required
+            label="Device Name"
+            placeholder="Enter Device Name"
+            defaultValue={settings.deviceName}
+            onChange={e => handleDeviceNameChange(e.target.value)}
+          />
+        </SettingsItem>
         <div className="h-[1px] w-full bg-slate-800/10 dark:bg-slate-300/20" />
         <div className="pb-2 space-y-4">
           <SectionHeader

ui/src/hooks/stores.ts

@@ -278,6 +278,9 @@ interface SettingsState {
   developerMode: boolean;
   setDeveloperMode: (enabled: boolean) => void;
 
+  deviceName: string;
+  setDeviceName: (deviceName: string) => void;
+
   backlightSettings: BacklightSettings;
   setBacklightSettings: (settings: BacklightSettings) => void;
 }
@@ -298,6 +301,9 @@ export const useSettingsStore = create(
       developerMode: false,
       setDeveloperMode: enabled => set({ developerMode: enabled }),
 
+      deviceName: "JetKVM",
+      setDeviceName: deviceName => set({ deviceName: deviceName }),
+
       backlightSettings: {
         max_brightness: 100,
         dim_after: 10000,