feat: artifacts

frontend/src/app/recollections/layout/RecollectionMenubar.tsx

@@ -22,8 +22,8 @@ export function RecollectionMenubar() {
   ) : null
 
   return (
-    <div className="flex h-9 w-full shrink-0 items-center justify-between gap-2 overflow-visible border-b border-border/40 bg-background px-2">
-      <div className="flex min-w-0 flex-1 items-center gap-2 overflow-hidden">
+    <div className="relative flex h-9 w-full shrink-0 items-center gap-2 overflow-visible border-b border-border/40 bg-background px-2">
+      <div className="flex items-center gap-2">
         <Link
           to="/recollections"
           aria-label="Back to recollections"
@@ -31,12 +31,14 @@ export function RecollectionMenubar() {
         >
           <ArrowLeft className="size-4" />
         </Link>
-        <div className="flex min-w-0 shrink-0 items-center gap-1.5">
-          {titleContent ?? defaultTitle}
-        </div>
         <RecollectionViewSwitcher />
       </div>
-      <div className="flex shrink-0 items-center gap-2 pl-2">
+      <div className="pointer-events-none absolute left-1/2 top-1/2 flex min-w-0 -translate-x-1/2 -translate-y-1/2 items-center justify-center">
+        <div className="pointer-events-auto flex min-w-0 items-center gap-1.5">
+          {titleContent ?? defaultTitle}
+        </div>
+      </div>
+      <div className="ml-auto flex shrink-0 items-center gap-2 pl-2">
         <RecollectionFileMenu />
         <RecollectionEditViewMenus />
       </div>