Mobile nav and drafting setup

assets/css/app.css

@@ -159,6 +159,22 @@ html, body {
 @media (max-width: 640px) {
   .mx-root { grid-template-columns: 1fr; }
   .mx-sidebar { display: none; }
+  /* space for fixed bottom nav */
+  .mx-main { padding-bottom: 72px; }
+  /* hide inline compose on mobile — the overlay handles it */
+  .mx-compose-wrapper { display: none; }
+  /* tighten card spacing */
+  .mx-feed { padding: 0.625rem 0.625rem; gap: 0.5rem; }
+  .mx-tweet { padding: 0.875rem 0.875rem; }
+  /* truncate long email addresses */
+  .mx-tweet-handle {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 180px;
+  }
+  .mx-header { padding: 0.75rem 1rem; }
+  .mx-detail { padding: 0.875rem 1rem; }
 }
 
 /* ── Sidebar ── */
@@ -802,3 +818,144 @@ html, body {
   background: var(--mx-border);
   margin: 4px 0;
 }
+
+/* ─────────────────────────────────────────────────────────────────────────────
+   Mobile bottom navigation bar
+   Only shown at ≤640 px (sidebar is hidden at that breakpoint).
+───────────────────────────────────────────────────────────────────────────── */
+.mx-mobile-nav {
+  display: none;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 50;
+  height: 60px;
+  align-items: center;
+  justify-content: space-around;
+  background: color-mix(in oklch, var(--mx-bg) 92%, transparent);
+  backdrop-filter: blur(16px);
+  -webkit-backdrop-filter: blur(16px);
+  border-top: 1px solid var(--mx-border);
+  /* respect iPhone home indicator */
+  padding-bottom: env(safe-area-inset-bottom, 0px);
+}
+
+@media (max-width: 640px) {
+  .mx-mobile-nav { display: flex; }
+}
+
+.mx-mobile-nav-item {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 3px;
+  color: var(--mx-muted);
+  text-decoration: none;
+  font-size: 0.65rem;
+  font-weight: 500;
+  padding: 0.25rem 0;
+  transition: color 0.15s;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.mx-mobile-nav-item--active { color: var(--mx-accent); }
+
+.mx-mobile-nav-item svg {
+  flex-shrink: 0;
+}
+
+/* Centred compose button — raised pill */
+.mx-mobile-nav-compose {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  background: var(--mx-accent);
+  color: #fff;
+  border: none;
+  cursor: pointer;
+  box-shadow: 0 4px 16px color-mix(in oklch, var(--mx-accent) 55%, transparent);
+  transition: background 0.15s, transform 0.12s, box-shadow 0.15s;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.mx-mobile-nav-compose:hover {
+  background: var(--mx-accent2);
+  box-shadow: 0 6px 20px color-mix(in oklch, var(--mx-accent) 65%, transparent);
+  transform: scale(1.06);
+}
+
+.mx-mobile-nav-compose:active { transform: scale(0.94); }
+
+/* ─────────────────────────────────────────────────────────────────────────────
+   Mobile compose overlay (full-screen drafting page)
+   Hidden on desktop — only the mobile nav can trigger it.
+───────────────────────────────────────────────────────────────────────────── */
+@keyframes mx-overlay-in {
+  from { opacity: 0; transform: translateY(28px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+.mx-compose-overlay {
+  display: none;
+}
+
+@media (max-width: 640px) {
+  .mx-compose-overlay {
+    display: flex;
+    flex-direction: column;
+    position: fixed;
+    inset: 0;
+    z-index: 100;
+    background: var(--mx-bg);
+    animation: mx-overlay-in 0.22s cubic-bezier(0.34, 1.1, 0.64, 1);
+  }
+}
+
+.mx-compose-overlay-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem 1.25rem;
+  border-bottom: 1px solid var(--mx-border);
+  background: color-mix(in oklch, var(--mx-bg) 85%, transparent);
+  backdrop-filter: blur(12px);
+  -webkit-backdrop-filter: blur(12px);
+  position: sticky;
+  top: 0;
+  z-index: 1;
+}
+
+.mx-compose-overlay-title {
+  font-family: 'Instrument Serif', Georgia, serif;
+  font-size: 1.125rem;
+  font-style: italic;
+  letter-spacing: -0.01em;
+  color: var(--mx-fg);
+}
+
+.mx-compose-overlay-cancel {
+  background: none;
+  border: none;
+  color: var(--mx-fg2);
+  font-size: 0.9rem;
+  font-family: inherit;
+  cursor: pointer;
+  padding: 0.25rem 0;
+  min-width: 60px;
+  transition: color 0.15s;
+}
+
+.mx-compose-overlay-cancel:hover { color: var(--mx-fg); }
+
+.mx-compose-overlay-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 1.25rem;
+}

assets/js/index.tsx

@@ -1104,6 +1104,96 @@ function UserDetail({ userId }: { userId: string }) {
   );
 }
 
+// ── Mobile bottom nav ─────────────────────────────────────────────────────────
+
+function MobileNav({
+  page,
+  onCompose,
+}: {
+  page: string;
+  onCompose: () => void;
+}) {
+  const onFeedPage = page === "feed" || page === "tweet";
+  const onUsersPage = page === "users" || page === "user-detail";
+
+  return (
+    <nav className="mx-mobile-nav">
+      <a
+        href="/feed"
+        className={`mx-mobile-nav-item${onFeedPage ? " mx-mobile-nav-item--active" : ""}`}
+      >
+        <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor">
+          <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />
+        </svg>
+        <span>Feed</span>
+      </a>
+
+      <button
+        className="mx-mobile-nav-compose"
+        onClick={onCompose}
+        aria-label="New post"
+      >
+        <svg
+          width="20"
+          height="20"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        >
+          <line x1="12" y1="5" x2="12" y2="19" />
+          <line x1="5" y1="12" x2="19" y2="12" />
+        </svg>
+      </button>
+
+      <a
+        href="/users"
+        className={`mx-mobile-nav-item${onUsersPage ? " mx-mobile-nav-item--active" : ""}`}
+      >
+        <svg width="22" height="22" viewBox="0 0 24 24" fill="currentColor">
+          <path d="M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z" />
+        </svg>
+        <span>Users</span>
+      </a>
+    </nav>
+  );
+}
+
+// ── Mobile compose overlay ─────────────────────────────────────────────────────
+
+function MobileComposePage({
+  email,
+  onClose,
+}: {
+  email: string;
+  onClose: () => void;
+}) {
+  return (
+    <div className="mx-compose-overlay">
+      <div className="mx-compose-overlay-header">
+        <button className="mx-compose-overlay-cancel" onClick={onClose}>
+          Cancel
+        </button>
+        <span className="mx-compose-overlay-title">New Post</span>
+        {/* right spacer keeps title centred */}
+        <div style={{ minWidth: "60px" }} />
+      </div>
+      <div className="mx-compose-overlay-body">
+        {email ? (
+          <ComposeTweet onSuccess={onClose} />
+        ) : (
+          <div className="mx-signin-cta">
+            <p>Sign in to start mixing.</p>
+            <a className="mx-btn-post" href="/register">Sign in</a>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}
+
 function App() {
   const appEl = document.getElementById("app")!;
   const email = appEl.dataset.currentUserEmail ?? "";
@@ -1112,6 +1202,8 @@ function App() {
   const page = appEl.dataset.page ?? "feed";
   const profileUserId = appEl.dataset.userId || null;
 
+  const [mobileCompose, setMobileCompose] = useState(false);
+
   const onFeedPage = page === "feed" || page === "tweet";
   const onUsersPage = page === "users" || page === "user-detail";
 
@@ -1228,6 +1320,17 @@ function App() {
             </div>
           </div>
         </div>
+
+        {/* Mobile-only bottom nav — hidden on desktop via CSS */}
+        <MobileNav page={page} onCompose={() => setMobileCompose(true)} />
+
+        {/* Mobile compose overlay — only visible on mobile via CSS */}
+        {mobileCompose && (
+          <MobileComposePage
+            email={email}
+            onClose={() => setMobileCompose(false)}
+          />
+        )}
       </QueryClientProvider>
     </AuthCtx.Provider>
   );