feat: flip card transition

frontend/src/app/recollections/RecollectionMenubar.tsx

@@ -3,7 +3,7 @@
  */
 
 import React from 'react'
-import { Link, NavLink, useParams } from 'react-router-dom'
+import { Link, NavLink, useParams, useLocation } from 'react-router-dom'
 import { usePlatform } from '@/app/kosmos/KosmosContext'
 import { ArrowLeft } from 'lucide-react'
 import { FluxIcon, LogosIcon } from '@/lib/icons'
@@ -11,14 +11,17 @@ import { useRecollectionMenubar } from './RecollectionMenubarContext'
 
 export function RecollectionMenubar() {
   const { recollectionId } = useParams<{ recollectionId: string }>()
+  const { pathname } = useLocation()
   const { recollections } = usePlatform()
   const { customContent } = useRecollectionMenubar()
 
+  const isFlux = pathname.endsWith('/flux')
   const recollection = recollectionId ? recollections.find((p) => p.id === recollectionId) : null
   const base = recollectionId ? `/recollections/${recollectionId}` : ''
   const defaultMiddle = recollection ? (
     <span className="truncate text-sm font-medium text-muted-foreground">{recollection.name}</span>
   ) : null
+  const middleContent = isFlux ? (customContent ?? defaultMiddle) : defaultMiddle
 
   return (
     <div className="flex h-9 w-full shrink-0 items-center gap-2 border-b border-border/40 bg-background px-2">
@@ -30,7 +33,7 @@ export function RecollectionMenubar() {
         <ArrowLeft className="size-4" />
       </Link>
       <div className="flex min-w-0 flex-1 items-center">
-        {customContent ?? defaultMiddle}
+        {middleContent}
       </div>
       {base && (
         <nav className="flex shrink-0 items-center gap-0.5" aria-label="Recollection pages">