fixed mobile ui and ux

assets/css/app.css

@@ -152,15 +152,6 @@ html, body {
   margin: 0 auto;
 }
 
-@media (max-width: 960px) {
-  .mx-root { grid-template-columns: 64px 1fr; }
-  .mx-rightbar { display: none; }
-}
-@media (max-width: 640px) {
-  .mx-root { grid-template-columns: 1fr; }
-  .mx-sidebar { display: none; }
-}
-
 /* ── Sidebar ── */
 .mx-sidebar {
   position: sticky;
@@ -802,3 +793,175 @@ 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: 960px) {
+  .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: 960px) {
+  .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;
+}
+
+/* ───────────────────────────────────────────────────────────────────────────────
+   Responsive layout overrides
+   IMPORTANT: these rules must live AFTER all component base rules so that
+   the cascade works correctly (later rule of equal specificity wins).
+─────────────────────────────────────────────────────────────────────────────── */
+
+/* Tablet + mobile (≤ 960 px): single column, no side panels, bottom nav */
+@media (max-width: 960px) {
+  .mx-root         { grid-template-columns: 1fr; }
+  .mx-sidebar      { display: none; }
+  .mx-rightbar     { display: none; }
+  /* room for fixed bottom nav */
+  .mx-main         { padding-bottom: 72px; }
+  /* hide inline compose — the overlay FAB handles it */
+  .mx-compose-wrapper { display: none; }
+}
+
+/* Narrow phones (≤ 640 px): tighten spacing */
+@media (max-width: 640px) {
+  .mx-feed  { padding: 0.625rem; gap: 0.5rem; }
+  .mx-tweet { padding: 0.875rem; }
+  .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; }
+}

assets/js/index.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, useContext, useState, useRef, useEffect } from "react";
+import React, { createContext, useContext, useState, useRef, useEffect, useSyncExternalStore } from "react";
 import { createRoot } from "react-dom/client";
 import { createPortal } from "react-dom";
 import {
@@ -53,10 +53,44 @@ type Tweet = {
 
 const AuthCtx = createContext({ email: "", userId: "" });
 
+// ── Responsive helper ─────────────────────────────────────────────────────────
+// Returns true when the viewport is wider than 960 px (desktop layout).
+// Uses useSyncExternalStore so it re-renders on resize without a manual
+// useEffect + useState dance.
+
+const DESKTOP_MQ = typeof window !== "undefined"
+  ? window.matchMedia("(min-width: 961px)")
+  : null;
+
+function subscribe(cb: () => void) {
+  DESKTOP_MQ?.addEventListener("change", cb);
+  return () => DESKTOP_MQ?.removeEventListener("change", cb);
+}
+
+function useIsDesktop(): boolean {
+  return useSyncExternalStore(
+    subscribe,
+    () => DESKTOP_MQ?.matches ?? true,
+    () => true, // SSR snapshot (never actually used here)
+  );
+}
+
 // ── Helpers ────────────────────────────────────────────────────────────────────
 
-function timeAgo(): string {
-  return "just now";
+function timeAgo(insertedAt?: string | null): string {
+  if (!insertedAt) return "just now";
+  const now = Date.now();
+  const then = new Date(insertedAt).getTime();
+  const diffSec = Math.floor((now - then) / 1000);
+  if (diffSec < 5) return "just now";
+  if (diffSec < 60) return `${diffSec}s`;
+  const diffMin = Math.floor(diffSec / 60);
+  if (diffMin < 60) return `${diffMin}m`;
+  const diffHr = Math.floor(diffMin / 60);
+  if (diffHr < 24) return `${diffHr}h`;
+  const diffDay = Math.floor(diffHr / 24);
+  if (diffDay < 7) return `${diffDay}d`;
+  return new Date(insertedAt).toLocaleDateString(undefined, { month: "short", day: "numeric" });
 }
 
 function getAssetHost(): string {
@@ -501,7 +535,7 @@ function TweetCard({ tweet }: { tweet: Tweet }) {
         <div className="mx-tweet-header">
           <span className="mx-tweet-handle">{tweet.userEmail ?? "@mixer"}</span>
           <span className="mx-tweet-dot">·</span>
-          <span className="mx-tweet-time">{timeAgo()}</span>
+          <span className="mx-tweet-time" title={tweet.insertedAt ? new Date(tweet.insertedAt).toLocaleString() : undefined}>{timeAgo(tweet.insertedAt)}</span>
           {canModify && (
             <div className="mx-tweet-actions">
               <button
@@ -1092,6 +1126,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 ?? "";
@@ -1100,6 +1224,9 @@ function App() {
   const page = appEl.dataset.page ?? "feed";
   const profileUserId = appEl.dataset.userId || null;
 
+  const [mobileCompose, setMobileCompose] = useState(false);
+  const isDesktop = useIsDesktop();
+
   const onFeedPage = page === "feed" || page === "tweet";
   const onUsersPage = page === "users" || page === "user-detail";
 
@@ -1163,59 +1290,74 @@ function App() {
     <AuthCtx.Provider value={{ email, userId }}>
       <QueryClientProvider client={queryClient}>
         <div className="mx-root">
-          <aside className="mx-sidebar">
-            <div className="mx-logo">
-              <span className="mx-logo-icon">⬡</span>
-              <span className="mx-logo-text">Mixer</span>
-            </div>
-            <nav className="mx-nav">
-              <a className={`mx-nav-item${onFeedPage ? " mx-nav-active" : ""}`} href="/feed">
-                <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
-                  <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />
-                </svg>
-                Feed
-              </a>
-              <a className={`mx-nav-item${onUsersPage ? " mx-nav-active" : ""}`} href="/users">
-                <svg width="18" height="18" 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>
-                Users
-              </a>
-            </nav>
-            <div className="mx-sidebar-footer">
-              {email ? (
-                <>
-                  <span className="mx-version" style={{ color: "var(--mx-fg2)" }}>{email}</span>
-                  <a className="mx-auth-link" href="/sign-out">Sign out</a>
-                </>
-              ) : (
-                <>
-                  <a className="mx-auth-link" href="/register">Create account</a>
-                  <a className="mx-auth-link" href="/sign-in">Sign in</a>
-                </>
-              )}
-              <span className="mx-version">v0.1.0</span>
-            </div>
-          </aside>
+          {isDesktop && (
+            <aside className="mx-sidebar">
+              <div className="mx-logo">
+                <span className="mx-logo-icon">⬡</span>
+                <span className="mx-logo-text">Mixer</span>
+              </div>
+              <nav className="mx-nav">
+                <a className={`mx-nav-item${onFeedPage ? " mx-nav-active" : ""}`} href="/feed">
+                  <svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
+                    <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z" />
+                  </svg>
+                  Feed
+                </a>
+                <a className={`mx-nav-item${onUsersPage ? " mx-nav-active" : ""}`} href="/users">
+                  <svg width="18" height="18" 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>
+                  Users
+                </a>
+              </nav>
+              <div className="mx-sidebar-footer">
+                {email ? (
+                  <>
+                    <span className="mx-version" style={{ color: "var(--mx-fg2)" }}>{email}</span>
+                    <a className="mx-auth-link" href="/sign-out">Sign out</a>
+                  </>
+                ) : (
+                  <>
+                    <a className="mx-auth-link" href="/register">Create account</a>
+                    <a className="mx-auth-link" href="/sign-in">Sign in</a>
+                  </>
+                )}
+                <span className="mx-version">v0.1.0</span>
+              </div>
+            </aside>
+          )}
 
           <main className="mx-main">
             {renderMain()}
           </main>
 
-          <div className="mx-rightbar">
-            <div className="mx-info-card">
-              <h3 className="mx-info-title">About Mixer</h3>
-              <p className="mx-info-body">
-                A minimal social feed built with Ash Framework, Phoenix, and React.
-              </p>
-              <div className="mx-stack">
-                {["Ash 3", "Phoenix 1.8", "AshTypescript", "React 19"].map((s) => (
-                  <span key={s} className="mx-tag">{s}</span>
-                ))}
+          {isDesktop && (
+            <div className="mx-rightbar">
+              <div className="mx-info-card">
+                <h3 className="mx-info-title">About Mixer</h3>
+                <p className="mx-info-body">
+                  A minimal social feed built with Ash Framework, Phoenix, and React.
+                </p>
+                <div className="mx-stack">
+                  {["Ash 3", "Phoenix 1.8", "AshTypescript", "React 19"].map((s) => (
+                    <span key={s} className="mx-tag">{s}</span>
+                  ))}
+                </div>
               </div>
             </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>
   );

test/mixer_web/controllers/page_controller_test.exs

@@ -10,7 +10,9 @@ defmodule MixerWeb.PageControllerTest do
           email: "test@example.com",
           password: "Password1!",
           password_confirmation: "Password1!"
-        }, authorize?: false)
+        },
+        authorize?: false
+      )
       |> Ash.create!()
 
     conn =