feat: flip card transition

frontend/src/app/recollections/FlippingCardView.tsx

@@ -0,0 +1,35 @@
+/**
+ * Flipping card container: Logos on the front, Flux on the back.
+ * Uses CSS 3D transform for a performant flip animation when switching via the menubar.
+ */
+
+import React from 'react'
+import { useLocation, useParams } from 'react-router-dom'
+import { LogosPage } from './logos/LogosPage'
+import { FluxRoute } from './flux/FluxRoute'
+
+export function FlippingCardView() {
+  const { pathname } = useLocation()
+  const { recollectionId } = useParams<{ recollectionId: string }>()
+  const isFlux = pathname.endsWith('/flux')
+
+  return (
+    <div
+      className="recollection-flip-container"
+      style={{ perspective: '1200px' }}
+    >
+      <div
+        className="recollection-flip-card"
+        data-flipped={isFlux}
+        aria-hidden={false}
+      >
+        <div className="recollection-flip-face recollection-flip-face-front">
+          <LogosPage />
+        </div>
+        <div className="recollection-flip-face recollection-flip-face-back">
+          {recollectionId && <FluxRoute />}
+        </div>
+      </div>
+    </div>
+  )
+}