From e64e29d773d53a39c063ffde5e999912c4b5893f Mon Sep 17 00:00:00 2001
From: dtoro <d.toro.v@pm.me>
Date: Mon, 16 Mar 2026 00:35:05 +0100
Subject: [PATCH] feat: switcher

---
 .../app/recollections/RecollectionLayout.tsx  |  4 +-
 .../app/recollections/RecollectionMenubar.tsx |  2 +
 .../RecollectionViewSwitcher.tsx              | 55 ++++++++++++-------
 3 files changed, 38 insertions(+), 23 deletions(-)

diff --git a/frontend/src/app/recollections/RecollectionLayout.tsx b/frontend/src/app/recollections/RecollectionLayout.tsx
index 5549503..bbbe184 100644
--- a/frontend/src/app/recollections/RecollectionLayout.tsx
+++ b/frontend/src/app/recollections/RecollectionLayout.tsx
@@ -9,7 +9,6 @@ import { RecollectionMenubarProvider } from './RecollectionMenubarContext'
 import { RecollectionActionsProvider } from './RecollectionActionsContext'
 import { RecollectionTitleContent } from './RecollectionTitleContent'
 import { RecollectionMenubar } from './RecollectionMenubar'
-import { RecollectionViewSwitcher } from './RecollectionViewSwitcher'
 import { FlippingCardView } from './FlippingCardView'
 
 export function RecollectionLayout() {
@@ -38,12 +37,11 @@ export function RecollectionLayout() {
     <RecollectionMenubarProvider>
       <RecollectionActionsProvider>
         <RecollectionTitleContent />
-        <div className="relative flex min-h-0 flex-1 flex-col">
+        <div className="flex min-h-0 flex-1 flex-col">
           <RecollectionMenubar />
           <div className="flex min-h-0 flex-1 flex-col overflow-hidden">
             <FlippingCardView />
           </div>
-          <RecollectionViewSwitcher />
         </div>
       </RecollectionActionsProvider>
     </RecollectionMenubarProvider>
diff --git a/frontend/src/app/recollections/RecollectionMenubar.tsx b/frontend/src/app/recollections/RecollectionMenubar.tsx
index 4ef31e0..74ecb71 100644
--- a/frontend/src/app/recollections/RecollectionMenubar.tsx
+++ b/frontend/src/app/recollections/RecollectionMenubar.tsx
@@ -8,6 +8,7 @@ import { usePlatform } from '@/app/kosmos/KosmosContext'
 import { ArrowLeft } from 'lucide-react'
 import { useRecollectionMenubar } from './RecollectionMenubarContext'
 import { RecollectionEditViewMenus } from './RecollectionEditViewMenus'
+import { RecollectionViewSwitcher } from './RecollectionViewSwitcher'
 
 export function RecollectionMenubar() {
   const { recollectionId } = useParams<{ recollectionId: string }>()
@@ -34,6 +35,7 @@ export function RecollectionMenubar() {
       <div className="flex min-w-0 flex-1 items-center gap-1 overflow-visible">
         <RecollectionEditViewMenus />
       </div>
+      <RecollectionViewSwitcher />
     </div>
   )
 }
diff --git a/frontend/src/app/recollections/RecollectionViewSwitcher.tsx b/frontend/src/app/recollections/RecollectionViewSwitcher.tsx
index d5cfc5d..e22f4ae 100644
--- a/frontend/src/app/recollections/RecollectionViewSwitcher.tsx
+++ b/frontend/src/app/recollections/RecollectionViewSwitcher.tsx
@@ -1,14 +1,12 @@
 /**
- * Elevator-style view switcher: circular button moves between top (Logos) and bottom (Flux).
- * Click toggles; shortcut and tooltip on hover.
+ * Circular view switcher: icon and title use the same vertical elevator-style animation.
+ * Click toggles; tooltip includes shortcut.
  */
 
 import React, { useCallback, useEffect } from 'react'
 import { useLocation, useNavigate, useParams } from 'react-router-dom'
-import { usePlatform } from '@/app/kosmos/KosmosContext'
 import { FluxIcon, LogosIcon } from '@/lib/icons'
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip'
-import { Kbd } from '@/components/ui/kbd'
 
 const VIEW_TOGGLE_KEYS = { key: 'v', shiftKey: true }
 
@@ -21,7 +19,7 @@ function shortcutLabel() {
   if (typeof navigator !== 'undefined' && /Mac|iPod|iPhone|iPad/.test(navigator.platform)) {
     return '⌘⇧V'
   }
-  return 'Ctrl+⇧+V'
+  return 'Ctrl+Shift+V'
 }
 
 export function RecollectionViewSwitcher() {
@@ -50,12 +48,13 @@ export function RecollectionViewSwitcher() {
 
   if (!base) return null
 
+  const shortcut = shortcutLabel()
   const tooltipText = isFlux
-    ? `Switch to Logos`
-    : `Switch to Flux`
+    ? `Flux · Switch to Logos (${shortcut})`
+    : `Logos · Switch to Flux (${shortcut})`
 
   return (
-    <div className="absolute left-1/2 top-[18px] z-10 flex -translate-x-1/2 -translate-y-1/2 items-center gap-2">
+    <div className="flex shrink-0 items-center gap-2">
       <TooltipProvider delayDuration={300}>
         <Tooltip>
           <TooltipTrigger asChild>
@@ -63,26 +62,42 @@ export function RecollectionViewSwitcher() {
               type="button"
               onClick={toggle}
               aria-label={isFlux ? 'Switch to Logos' : 'Switch to Flux'}
-              className="flex items-center gap-2 rounded-full border border-border/60 bg-background shadow-md transition-colors hover:bg-accent hover:text-accent-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              className="h-7 w-7 shrink-0 overflow-hidden rounded-full border border-border/60 bg-background shadow-md transition-colors hover:bg-accent hover:text-accent-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-ring"
             >
-              <div className="relative h-14 w-8 rounded-full bg-muted/50 p-0.5">
-                <span
-                  className="absolute left-1/2 flex h-6 w-6 -translate-x-1/2 items-center justify-center rounded-full border bg-background shadow-sm transition-[top] duration-200 ease-out"
-                  style={{ top: isFlux ? 28 : 4 }}
+              <div className="h-full w-full overflow-hidden">
+                <div
+                  className="flex w-full flex-col transition-transform duration-200 ease-out"
+                  style={{
+                    height: '200%',
+                    transform: isFlux ? 'translateY(-50%)' : 'translateY(0)',
+                  }}
                 >
-                  {isFlux ? (
-                    <FluxIcon className="size-3.5 text-muted-foreground" />
-                  ) : (
-                    <LogosIcon className="size-3.5 text-muted-foreground" />
-                  )}
-                </span>
+                  <div className="flex h-9 w-full items-center justify-center">
+                    <LogosIcon className="size-3.5 shrink-0 text-muted-foreground" />
+                  </div>
+                  <div className="flex h-9 w-full items-center justify-center">
+                    <FluxIcon className="size-3.5 shrink-0 text-muted-foreground" />
+                  </div>
+                </div>
               </div>
             </button>
           </TooltipTrigger>
           <TooltipContent side="bottom">{tooltipText}</TooltipContent>
         </Tooltip>
       </TooltipProvider>
-      <Kbd className="text-[10px]">{shortcutLabel()}</Kbd>
+      <div className="h-9 min-w-[3.5rem] overflow-hidden">
+        <div
+          className="flex w-full flex-col transition-transform duration-200 ease-out"
+          style={{ transform: isFlux ? 'translateY(-50%)' : 'translateY(0)' }}
+        >
+          <span className="flex h-9 flex-shrink-0 items-center text-sm font-medium text-foreground">
+            Logos
+          </span>
+          <span className="flex h-9 flex-shrink-0 items-center text-sm font-medium text-foreground">
+            Flux
+          </span>
+        </div>
+      </div>
     </div>
   )
 }