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, keyboardLayout]);
+  }, [rpcDataChannel?.readyState, send, setDisableVideoFocusTrap, setPasteMode]);
 
   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 text using keyboard layout: {layouts[keyboardLayout]}
+                    Sending key codes 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: "KeyY", shift: true },
+  Y: { key: "KeyZ", shift: true },
-  Z: { key: "KeyZ", shift: true },
+  Z: { key: "KeyY", 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: "KeyY" },
+  y: { key: "KeyZ" },
-  z: { key: "KeyZ" },
+  z: { key: "KeyY" },
   "§": { key: "Backquote" },
   "½": { key: "Backquote", shift: true }, 
   1: { key: "Digit1" },

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

@@ -6,6 +6,7 @@ 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";
@@ -51,23 +52,25 @@ export default function SettingsKeyboardRoute() {
       />
 
       <div className="space-y-4">
-        { /* this menu item could be renamed to plain "Keyboard layout" in the future, when also the virtual keyboard layout mappings are being implemented */ }
+        <FeatureFlag minAppVersion="0.4.0" name="Paste text">
-        <SettingsItem
+	  { /* this menu item could be renamed to plain "Keyboard layout" in the future, when also the virtual keyboard layout mappings are being implemented */ }
-          title="Paste text"
+          <SettingsItem
-          description="Keyboard layout of target operating system"
+            title="Paste text"
-        >
+            description="Keyboard layout of target operating system"
-          <SelectMenuBasic
+          >
-            size="SM"
+            <SelectMenuBasic
-            label=""
+              size="SM"
-            fullWidth
+              label=""
-            value={keyboardLayout}
+              fullWidth
-            onChange={onKeyboardLayoutChange}
+              value={keyboardLayout}
-            options={layoutOptions}
+              onChange={onKeyboardLayoutChange}
-          />
+              options={layoutOptions}
-        </SettingsItem>
+            />
-        <p className="text-xs text-slate-600 dark:text-slate-400">
+          </SettingsItem>
-          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 className="text-xs text-slate-600 dark:text-slate-400">
-        </p>
+	    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>
+        </FeatureFlag>
       </div>
     </div>
   );

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

@@ -20,7 +20,6 @@ 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";
 
@@ -157,19 +156,17 @@ export default function SettingsRoute() {
                     </div>
                   </NavLink>
                 </div>
-                <FeatureFlag minAppVersion="0.4.0" name="Paste text">
+                <div className="shrink-0">
-                  <div className="shrink-0">
+                  <NavLink
-                    <NavLink
+                    to="keyboard"
-                      to="keyboard"
+                    className={({ isActive }) => (isActive ? "active" : "")}
-                      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">
-                      <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" />
-                        <LuKeyboard className="h-4 w-4 shrink-0" />
+                      <h1>Keyboard</h1>
-                        <h1>Keyboard</h1>
+                    </div>
-                      </div>
+                  </NavLink>
-                    </NavLink>
+                </div>
-                  </div>
-                </FeatureFlag>
                 <div className="shrink-0">
                   <NavLink
                     to="video"