From 5a21ac47ebe17fea49955b12aa8511345b007c83 Mon Sep 17 00:00:00 2001
From: archipelago <archipelago@localhost>
Date: Tue, 14 Jul 2026 06:42:08 -0400
Subject: [PATCH] =?UTF-8?q?fix(ui):=20standard=20tab=20+=20toggle=20stylin?=
 =?UTF-8?q?g=20=E2=80=94=20Federation=20view=20tabs,=20WLAN=20switch?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Federation List/Map tabs now use the Home mode-switcher tablist
  (full-width on mobile, shrink-wrapped on desktop, proper tablist a11y)
- Network Interfaces WLAN adapter toggle replaced with the shared
  ToggleSwitch used by AI data access in Settings; ToggleSwitch gains
  optional disabled/ariaLabel props (non-breaking)

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 neode-ui/src/components/ToggleSwitch.vue |  6 +++++-
 neode-ui/src/views/Federation.vue        | 10 ++++++----
 neode-ui/src/views/Server.vue            | 15 +++++----------
 3 files changed, 16 insertions(+), 15 deletions(-)

diff --git a/neode-ui/src/components/ToggleSwitch.vue b/neode-ui/src/components/ToggleSwitch.vue
index 74199f5c..a743fdf7 100644
--- a/neode-ui/src/components/ToggleSwitch.vue
+++ b/neode-ui/src/components/ToggleSwitch.vue
@@ -3,10 +3,12 @@
     type="button"
     role="switch"
     :aria-checked="modelValue"
+    :aria-label="ariaLabel"
+    :disabled="disabled"
     tabindex="-1"
     data-controller-ignore
     class="w-10 h-6 rounded-full shrink-0 transition-colors relative"
-    :class="modelValue ? 'bg-orange-500' : 'bg-white/15'"
+    :class="[modelValue ? 'bg-orange-500' : 'bg-white/15', disabled ? 'opacity-40 cursor-not-allowed' : '']"
     @click="$emit('update:modelValue', !modelValue)"
   >
     <div
@@ -19,6 +21,8 @@
 <script setup lang="ts">
 defineProps<{
   modelValue: boolean
+  disabled?: boolean
+  ariaLabel?: string
 }>()
 
 defineEmits<{
diff --git a/neode-ui/src/views/Federation.vue b/neode-ui/src/views/Federation.vue
index c7d0af6d..f96a215f 100644
--- a/neode-ui/src/views/Federation.vue
+++ b/neode-ui/src/views/Federation.vue
@@ -15,13 +15,15 @@
       @rotate="rotateDid"
     />
 
-    <!-- View Tabs -->
-    <div v-if="nodes.length > 0" class="flex gap-1 mb-6 p-1 bg-black/20 rounded-lg w-fit">
+    <!-- View Tabs (same style as Home Dashboard/Setup tabs; full-width on mobile) -->
+    <div v-if="nodes.length > 0" role="tablist" class="mode-switcher mb-6 w-full md:w-auto">
       <button
         v-for="tab in viewTabs"
         :key="tab.id"
-        class="px-4 py-2 rounded text-sm font-medium transition-colors"
-        :class="activeView === tab.id ? 'bg-white/10 text-white border-b-2 border-orange-400' : 'text-white/50 hover:text-white/70'"
+        class="mode-switcher-btn"
+        role="tab"
+        :aria-selected="activeView === tab.id"
+        :class="{ 'mode-switcher-btn-active': activeView === tab.id }"
         @click="setView(tab.id)"
       >
         {{ tab.label }}
diff --git a/neode-ui/src/views/Server.vue b/neode-ui/src/views/Server.vue
index ace11b22..32adf94b 100644
--- a/neode-ui/src/views/Server.vue
+++ b/neode-ui/src/views/Server.vue
@@ -259,19 +259,13 @@
                 <p v-if="iface.ipv4.length > 0" class="text-sm text-white/80">{{ iface.ipv4[0] }}</p>
                 <p v-else class="text-sm text-white/40">No IP</p>
               </div>
-              <button
+              <ToggleSwitch
                 v-if="iface.type === 'wifi'"
+                :model-value="iface.state === 'up'"
                 :disabled="togglingWifiRadio"
-                class="relative w-11 h-6 rounded-full transition-colors flex-shrink-0"
-                :class="[iface.state === 'up' ? 'bg-green-500/60' : 'bg-white/15', togglingWifiRadio ? 'opacity-40 cursor-not-allowed' : '']"
                 :aria-label="iface.state === 'up' ? 'Turn off wifi adapter' : 'Turn on wifi adapter'"
-                @click="toggleWifiRadio(iface)"
-              >
-                <span
-                  class="absolute top-0.5 w-5 h-5 rounded-full bg-white transition-transform"
-                  :class="iface.state === 'up' ? 'translate-x-5' : 'translate-x-0.5'"
-                ></span>
-              </button>
+                @update:model-value="toggleWifiRadio(iface)"
+              />
             </div>
           </div>
           <p v-if="physicalInterfaces.length === 0" class="text-sm text-white/50 text-center py-4">No physical interfaces detected</p>
@@ -413,6 +407,7 @@ import QuickActionsCard from './server/QuickActionsCard.vue'
 import TorServicesCard from './server/TorServicesCard.vue'
 import ServerModals from './server/ServerModals.vue'
 import FipsNetworkCard from './server/FipsNetworkCard.vue'
+import ToggleSwitch from '@/components/ToggleSwitch.vue'
 import type { TorServiceInfo } from './server/TorServicesCard.vue'
 
 const appStore = useAppStore()