From 9d5e96af192a0e74fa0f8ccdce176c2b145f2796 Mon Sep 17 00:00:00 2001
From: Dorian <dorian@Dorians-MacBook-Air.local>
Date: Tue, 21 Jul 2026 22:08:24 +0100
Subject: [PATCH] feat(ui): one-click display-mode buttons in the app-session
 bar (desktop)

Replace the display-mode dropdown with three inline buttons (right panel /
over whole app / fullscreen) so switching iframe modes is a single click.
Active mode is highlighted orange. Mobile keeps its own bar untouched.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 neode-ui/src/views/AppSession.vue             | 33 ++-----
 .../src/views/appSession/AppSessionHeader.vue | 97 +++++--------------
 2 files changed, 32 insertions(+), 98 deletions(-)

diff --git a/neode-ui/src/views/AppSession.vue b/neode-ui/src/views/AppSession.vue
index e1ee9078..e96d6709 100644
--- a/neode-ui/src/views/AppSession.vue
+++ b/neode-ui/src/views/AppSession.vue
@@ -546,35 +546,14 @@ onBeforeUnmount(() => {
   opacity: 0.5;
 }
 
-/* Mode dropdown */
-.mode-option {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  width: 100%;
-  padding: 10px 14px;
-  font-size: 13px;
-  color: rgba(255, 255, 255, 0.7);
-  transition: all 0.15s ease;
-  text-align: left;
-}
-.mode-option:hover {
-  background: rgba(255, 255, 255, 0.08);
-  color: white;
-}
-.mode-option-active {
+/* Active display-mode button in the header bar */
+.app-session-btn-active {
   color: #fb923c;
-  background: rgba(251, 146, 60, 0.08);
+  background: rgba(251, 146, 60, 0.12);
 }
-
-.menu-fade-enter-active,
-.menu-fade-leave-active {
-  transition: opacity 0.15s ease, transform 0.15s ease;
-}
-.menu-fade-enter-from,
-.menu-fade-leave-to {
-  opacity: 0;
-  transform: translateY(-4px);
+.app-session-btn-active:hover {
+  color: #fb923c;
+  background: rgba(251, 146, 60, 0.18);
 }
 
 .content-fade-enter-active,
diff --git a/neode-ui/src/views/appSession/AppSessionHeader.vue b/neode-ui/src/views/appSession/AppSessionHeader.vue
index 478af545..e050f1d3 100644
--- a/neode-ui/src/views/appSession/AppSessionHeader.vue
+++ b/neode-ui/src/views/appSession/AppSessionHeader.vue
@@ -22,63 +22,41 @@
       </svg>
     </button>
 
-    <!-- Display mode selector -->
-    <div class="relative" ref="modeMenuRef">
+    <!-- Display mode: one-click switch -->
+    <div class="flex items-center gap-0.5">
       <button
         class="app-session-btn"
-        aria-label="Display mode"
-        title="Display mode"
-        @click="showModeMenu = !showModeMenu"
+        :class="{ 'app-session-btn-active': displayMode === 'panel' }"
+        aria-label="Right panel"
+        title="Right panel"
+        @click="$emit('setMode', 'panel')"
       >
-        <!-- Panel icon -->
-        <svg v-if="displayMode === 'panel'" class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v18m12-18H3a1 1 0 00-1 1v16a1 1 0 001 1h18a1 1 0 001-1V4a1 1 0 00-1-1z" />
         </svg>
-        <!-- Overlay icon -->
-        <svg v-else-if="displayMode === 'overlay'" class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      </button>
+      <button
+        class="app-session-btn"
+        :class="{ 'app-session-btn-active': displayMode === 'overlay' }"
+        aria-label="Over whole app"
+        title="Over whole app"
+        @click="$emit('setMode', 'overlay')"
+      >
+        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 5a1 1 0 011-1h14a1 1 0 011 1v14a1 1 0 01-1 1H5a1 1 0 01-1-1V5z" />
         </svg>
-        <!-- Fullscreen icon -->
-        <svg v-else class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+      </button>
+      <button
+        class="app-session-btn"
+        :class="{ 'app-session-btn-active': displayMode === 'fullscreen' }"
+        aria-label="Open fullscreen"
+        title="Open fullscreen"
+        @click="$emit('setMode', 'fullscreen')"
+      >
+        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
           <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5v-4m0 4h-4m4 0l-5-5" />
         </svg>
       </button>
-
-      <!-- Dropdown -->
-      <Transition name="menu-fade">
-        <div v-if="showModeMenu" class="absolute right-0 top-full mt-1 w-48 bg-black/90 border border-white/10 rounded-lg backdrop-blur-xl shadow-2xl overflow-hidden z-50">
-          <button
-            class="mode-option"
-            :class="{ 'mode-option-active': displayMode === 'panel' }"
-            @click="selectMode('panel')"
-          >
-            <svg class="w-4 h-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v18m12-18H3a1 1 0 00-1 1v16a1 1 0 001 1h18a1 1 0 001-1V4a1 1 0 00-1-1z" />
-            </svg>
-            <span>Right panel</span>
-          </button>
-          <button
-            class="mode-option"
-            :class="{ 'mode-option-active': displayMode === 'overlay' }"
-            @click="selectMode('overlay')"
-          >
-            <svg class="w-4 h-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 5a1 1 0 011-1h14a1 1 0 011 1v14a1 1 0 01-1 1H5a1 1 0 01-1-1V5z" />
-            </svg>
-            <span>Over whole app</span>
-          </button>
-          <button
-            class="mode-option"
-            :class="{ 'mode-option-active': displayMode === 'fullscreen' }"
-            @click="selectMode('fullscreen')"
-          >
-            <svg class="w-4 h-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5v-4m0 4h-4m4 0l-5-5" />
-            </svg>
-            <span>Open fullscreen</span>
-          </button>
-        </div>
-      </Transition>
     </div>
 
     <button class="app-session-btn" aria-label="Open in new tab" title="Open in new tab" @click="$emit('openNewTab')">
@@ -98,7 +76,6 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onBeforeUnmount } from 'vue'
 import type { DisplayMode } from './appSessionConfig'
 
 defineProps<{
@@ -107,7 +84,7 @@ defineProps<{
   displayMode: DisplayMode
 }>()
 
-const emit = defineEmits<{
+defineEmits<{
   goBack: []
   goForward: []
   refresh: []
@@ -115,26 +92,4 @@ const emit = defineEmits<{
   close: []
   setMode: [mode: DisplayMode]
 }>()
-
-const showModeMenu = ref(false)
-const modeMenuRef = ref<HTMLElement | null>(null)
-
-function selectMode(mode: DisplayMode) {
-  showModeMenu.value = false
-  emit('setMode', mode)
-}
-
-function onClickOutside(e: MouseEvent) {
-  if (showModeMenu.value && modeMenuRef.value && !modeMenuRef.value.contains(e.target as Node)) {
-    showModeMenu.value = false
-  }
-}
-
-onMounted(() => {
-  document.addEventListener('click', onClickOutside)
-})
-
-onBeforeUnmount(() => {
-  document.removeEventListener('click', onClickOutside)
-})
 </script>