From 1460fc5ac213f0e664bac645f22a0a4dad1ebd65 Mon Sep 17 00:00:00 2001
From: Daniel Lorch <dlorch@gmail.com>
Date: Wed, 21 May 2025 14:37:38 +0000
Subject: [PATCH] Move FeatureFlag to navigation

---
 .../routes/devices.$id.settings.keyboard.tsx  | 37 +++++++++----------
 ui/src/routes/devices.$id.settings.tsx        | 25 +++++++------
 2 files changed, 31 insertions(+), 31 deletions(-)

diff --git a/ui/src/routes/devices.$id.settings.keyboard.tsx b/ui/src/routes/devices.$id.settings.keyboard.tsx
index a299049..9ec1f07 100644
--- a/ui/src/routes/devices.$id.settings.keyboard.tsx
+++ b/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 */ }
-          <SettingsItem
-            title="Paste text"
-            description="Keyboard layout of target operating system"
-          >
-            <SelectMenuBasic
-              size="SM"
-              label=""
-              fullWidth
-              value={keyboardLayout}
-              onChange={onKeyboardLayoutChange}
-              options={layoutOptions}
-            />
-          </SettingsItem>
-	  <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.
-          </p>
-        </FeatureFlag>
+        { /* this menu item could be renamed to plain "Keyboard layout" in the future, when also the virtual keyboard layout mappings are being implemented */ }
+        <SettingsItem
+          title="Paste text"
+          description="Keyboard layout of target operating system"
+        >
+          <SelectMenuBasic
+            size="SM"
+            label=""
+            fullWidth
+            value={keyboardLayout}
+            onChange={onKeyboardLayoutChange}
+            options={layoutOptions}
+          />
+        </SettingsItem>
+        <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.
+        </p>
       </div>
     </div>
   );
diff --git a/ui/src/routes/devices.$id.settings.tsx b/ui/src/routes/devices.$id.settings.tsx
index 05c3c9d..929712c 100644
--- a/ui/src/routes/devices.$id.settings.tsx
+++ b/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">
-                  <NavLink
-                    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" />
-                      <h1>Keyboard</h1>
-                    </div>
-                  </NavLink>
-                </div>
+                <FeatureFlag minAppVersion="0.4.0" name="Paste text">
+                  <div className="shrink-0">
+                    <NavLink
+                      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" />
+                        <h1>Keyboard</h1>
+                      </div>
+                    </NavLink>
+                  </div>
+                </FeatureFlag>
                 <div className="shrink-0">
                   <NavLink
                     to="video"