Global Import in the menu; mobile drawer nav

- Add a top-level "Import" entry to the sidebar and a global /import page, so
  you can start a tree from a GEDCOM without first creating an empty one. The
  import flow now picks its destination (new tree, or an existing one) — the
  tree-scoped page reuses the same <GedcomImport> with a fixed destination and
  keeps Export.
- Extract the sidebar chrome into <AppShell> and give small screens a working
  menu: a hamburger opens the full sidebar as a slide-in drawer (it was just a
  logo + "Trees" link before). Used by both /trees and /import.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

frontend/app/trees/layout.tsx

@@ -1,28 +1,5 @@
-import Link from "next/link";
-
-import { AppSidebar } from "@/components/app-sidebar";
+import { AppShell } from "@/components/app-shell";
 
 export default function TreesLayout({ children }: { children: React.ReactNode }) {
-  return (
-    <div className="flex min-h-screen">
-      <aside className="sticky top-0 hidden h-screen w-64 shrink-0 border-r border-[var(--border)] bg-[var(--surface)] md:flex md:flex-col">
-        <AppSidebar />
-      </aside>
-
-      <div className="flex min-w-0 flex-1 flex-col">
-        {/* Compact bar for small screens (full sidebar is md+). */}
-        <div className="flex items-center justify-between border-b border-[var(--border)] bg-[var(--surface)] px-4 py-3 md:hidden">
-          <Link href="/" aria-label="Provenance — home">
-            {/* eslint-disable-next-line @next/next/no-img-element */}
-            <img src="/provenance-logo-plain.svg" alt="Provenance" className="h-6 w-auto" />
-          </Link>
-          <Link href="/trees" className="text-sm text-bronze">
-            Trees
-          </Link>
-        </div>
-
-        <div className="mx-auto w-full max-w-4xl px-6 py-10 md:px-10">{children}</div>
-      </div>
-    </div>
-  );
+  return <AppShell>{children}</AppShell>;
 }