Use useSettingsStore

Author: dlorch

ui/src/components/popovers/PasteModal.tsx

@@ -8,7 +8,7 @@ import { GridCard } from "@components/Card";
 import { TextAreaWithLabel } from "@components/TextArea";
 import { SettingsPageHeader } from "@components/SettingsPageheader";
 import { useJsonRpc } from "@/hooks/useJsonRpc";
-import { useHidStore, useRTCStore, useUiStore, useDeviceSettingsStore } from "@/hooks/stores";
+import { useHidStore, useRTCStore, useUiStore, useSettingsStore } from "@/hooks/stores";
 import { keys, modifiers } from "@/keyboardMappings";
 import { layouts, chars } from "@/keyboardLayouts";
 import notifications from "@/notifications";
@@ -34,8 +34,8 @@ export default function PasteModal() {
   const [invalidChars, setInvalidChars] = useState<string[]>([]);
   const close = useClose();
 
-  const keyboardLayout = useDeviceSettingsStore(state => state.keyboardLayout);
-  const setKeyboardLayout = useDeviceSettingsStore(
+  const keyboardLayout = useSettingsStore(state => state.keyboardLayout);
+  const setKeyboardLayout = useSettingsStore(
     state => state.setKeyboardLayout,
   );
 

ui/src/hooks/stores.ts

@@ -302,6 +302,9 @@ interface SettingsState {
 
   backlightSettings: BacklightSettings;
   setBacklightSettings: (settings: BacklightSettings) => void;
+
+  keyboardLayout: string;
+  setKeyboardLayout: (layout: string) => void;
 }
 
 export const useSettingsStore = create(
@@ -330,6 +333,9 @@ export const useSettingsStore = create(
       },
       setBacklightSettings: (settings: BacklightSettings) =>
         set({ backlightSettings: settings }),
+
+      keyboardLayout: "en-US",
+      setKeyboardLayout: layout => set({ keyboardLayout: layout }),
     }),
     {
       name: "settings",
@@ -347,8 +353,6 @@ export interface DeviceSettingsState {
   trackpadThreshold: number;
   scrollSensitivity: "low" | "default" | "high";
   setScrollSensitivity: (sensitivity: DeviceSettingsState["scrollSensitivity"]) => void;
-  keyboardLayout: string;
-  setKeyboardLayout: (layout: string) => void;
 }
 
 export interface RemoteVirtualMediaState {

ui/src/routes/devices.$id.settings.keyboard.tsx

@@ -1,6 +1,6 @@
 import { useCallback, useEffect } from "react";
 
-import { useDeviceSettingsStore } from "@/hooks/stores";
+import { useSettingsStore } from "@/hooks/stores";
 import { useJsonRpc } from "@/hooks/useJsonRpc";
 import notifications from "@/notifications";
 import { SettingsPageHeader } from "@components/SettingsPageheader";
@@ -12,8 +12,8 @@ import { SelectMenuBasic } from "../components/SelectMenuBasic";
 import { SettingsItem } from "./devices.$id.settings";
 
 export default function SettingsKeyboardRoute() {
-  const keyboardLayout = useDeviceSettingsStore(state => state.keyboardLayout);
-  const setKeyboardLayout = useDeviceSettingsStore(
+  const keyboardLayout = useSettingsStore(state => state.keyboardLayout);
+  const setKeyboardLayout = useSettingsStore(
     state => state.setKeyboardLayout,
   );