Add to useCallback dependencies

ui/src/components/popovers/PasteModal.tsx

@@ -44,7 +44,7 @@ export default function PasteModal() {
       if ("error" in resp) return;
       setKeyboardLayout(resp.result as string);
     });
-  }, []);
+  }, [send, setKeyboardLayout]);
 
   const onCancelPasteMode = useCallback(() => {
     setPasteMode(false);
@@ -98,7 +98,7 @@ export default function PasteModal() {
       console.error(error);
       notifications.error("Failed to paste text");
     }
-  }, [rpcDataChannel?.readyState, send, setDisableVideoFocusTrap, setPasteMode]);
+  }, [rpcDataChannel?.readyState, send, setDisableVideoFocusTrap, setPasteMode, keyboardLayout]);
 
   useEffect(() => {
     if (TextAreaRef.current) {
@@ -169,7 +169,7 @@ export default function PasteModal() {
                 </div>
 		<div className="space-y-4">
                   <p className="text-xs text-slate-600 dark:text-slate-400">
-                    Sending key codes using keyboard layout {layouts[keyboardLayout]}
+                    Sending text using keyboard layout: {layouts[keyboardLayout]}
                   </p>
 		</div>
               </div>

ui/src/keyboardLayouts/sv_SE.ts

@@ -56,8 +56,8 @@ export const chars = {
   V: { key: "KeyV", shift: true },
   W: { key: "KeyW", shift: true },
   X: { key: "KeyX", shift: true },
-  Y: { key: "KeyZ", shift: true },
+  Y: { key: "KeyY", shift: true },
-  Z: { key: "KeyY", shift: true },
+  Z: { key: "KeyZ", shift: true },
   a: { key: "KeyA" },
   "á": { key: "KeyA", accentKey: keyAcute },
   "â": { key: "KeyA", accentKey: keyHat },
@@ -106,8 +106,8 @@ export const chars = {
   v: { key: "KeyV" },
   w: { key: "KeyW" },
   x: { key: "KeyX" },
-  y: { key: "KeyZ" },
+  y: { key: "KeyY" },
-  z: { key: "KeyY" },
+  z: { key: "KeyZ" },
   "§": { key: "Backquote" },
   "½": { key: "Backquote", shift: true }, 
   1: { key: "Digit1" },

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

@@ -6,7 +6,6 @@ import notifications from "@/notifications";
 import { SettingsPageHeader } from "@components/SettingsPageheader";
 import { layouts } from "@/keyboardLayouts";
 
-import { FeatureFlag } from "../components/FeatureFlag";
 import { SelectMenuBasic } from "../components/SelectMenuBasic";
 
 import { SettingsItem } from "./devices.$id.settings";
@@ -52,25 +51,23 @@ export default function SettingsKeyboardRoute() {
       />
 
       <div className="space-y-4">
-        <FeatureFlag minAppVersion="0.4.0" name="Paste text">
+        { /* this menu item could be renamed to plain "Keyboard layout" in the future, when also the virtual keyboard layout mappings are being implemented */ }
-	  { /* this menu item could be renamed to plain "Keyboard layout" in the future, when also the virtual keyboard layout mappings are being implemented */ }
+        <SettingsItem
-          <SettingsItem
+          title="Paste text"
-            title="Paste text"
+          description="Keyboard layout of target operating system"
-            description="Keyboard layout of target operating system"
+        >
-          >
+          <SelectMenuBasic
-            <SelectMenuBasic
+            size="SM"
-              size="SM"
+            label=""
-              label=""
+            fullWidth
-              fullWidth
+            value={keyboardLayout}
-              value={keyboardLayout}
+            onChange={onKeyboardLayoutChange}
-              onChange={onKeyboardLayoutChange}
+            options={layoutOptions}
-              options={layoutOptions}
+          />
-            />
+        </SettingsItem>
-          </SettingsItem>
+        <p className="text-xs text-slate-600 dark:text-slate-400">
-	  <p className="text-xs text-slate-600 dark:text-slate-400">
+          Pasting text sends individual key strokes to the target device. The keyboard layout determines which key codes are being sent. Ensure that the keyboard layout in JetKVM matches the settings in the operating system.
-	    Pasting text sends individual key strokes to the target device. The keyboard layout determines which key codes are being sent. Ensure that the keyboard layout in JetKVM matches the settings in the operating system.
+        </p>
-          </p>
-        </FeatureFlag>
       </div>
     </div>
   );

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

@@ -20,6 +20,7 @@ import { LinkButton } from "@/components/Button";
 import LoadingSpinner from "@/components/LoadingSpinner";
 import { useUiStore } from "@/hooks/stores";
 import useKeyboard from "@/hooks/useKeyboard";
+import { FeatureFlag } from "../components/FeatureFlag";
 
 import { cx } from "../cva.config";
 
@@ -156,17 +157,19 @@ export default function SettingsRoute() {
                     </div>
                   </NavLink>
                 </div>
-                <div className="shrink-0">
+                <FeatureFlag minAppVersion="0.4.0" name="Paste text">
-                  <NavLink
+                  <div className="shrink-0">
-                    to="keyboard"
+                    <NavLink
-                    className={({ isActive }) => (isActive ? "active" : "")}
+                      to="keyboard"
-                  >
+                      className={({ isActive }) => (isActive ? "active" : "")}
-                    <div className="flex items-center gap-x-2 rounded-md px-2.5 py-2.5 text-sm transition-colors hover:bg-slate-100 dark:hover:bg-slate-700 [.active_&]:bg-blue-50 [.active_&]:!text-blue-700 md:[.active_&]:bg-transparent dark:[.active_&]:bg-blue-900 dark:[.active_&]:!text-blue-200 dark:md:[.active_&]:bg-transparent">
+                    >
-                      <LuKeyboard className="h-4 w-4 shrink-0" />
+                      <div className="flex items-center gap-x-2 rounded-md px-2.5 py-2.5 text-sm transition-colors hover:bg-slate-100 dark:hover:bg-slate-700 [.active_&]:bg-blue-50 [.active_&]:!text-blue-700 md:[.active_&]:bg-transparent dark:[.active_&]:bg-blue-900 dark:[.active_&]:!text-blue-200 dark:md:[.active_&]:bg-transparent">
-                      <h1>Keyboard</h1>
+                        <LuKeyboard className="h-4 w-4 shrink-0" />
-                    </div>
+                        <h1>Keyboard</h1>
-                  </NavLink>
+                      </div>
-                </div>
+                    </NavLink>
+                  </div>
+                </FeatureFlag>
                 <div className="shrink-0">
                   <NavLink
                     to="video"