feat: implement mobile app usability improvements

Mobile Navigation:
- Add MobileNav component with bottom tab bar
- Show mobile nav on small screens, hide desktop sidebar
- Add session count badge to Sessions tab
- Add safe area padding for notched devices

Session Management:
- Redesign SessionCard for mobile with action menu
- Add MobileActionSheet for session actions
- Keep primary action prominent

Forms & Dialogs:
- Stack form fields vertically on mobile
- Ensure 44px minimum touch targets
- Update dialogs for 320px viewport

Responsive Layout:
- Add MobilePageHeader with back button
- Reduce page padding on mobile
- Stack multi-column grids vertically

Touch & Interaction:
- Add active states to interactive elements
- Ensure 8px spacing between touch targets

Complex Pages:
- Update Repo Workspace for mobile
- Update Tool Workshop and Config Profiles

Build: TypeScript check passes, production build succeeds

apps/web/src/components/mobile-nav.tsx

@@ -0,0 +1,40 @@
+import { NavLink } from "react-router-dom";
+import { Icon } from "./icon";
+import type { IconName } from "../utils/icons";
+
+interface MobileNavProps {
+  sessionCount?: number;
+}
+
+const MOBILE_NAV_ITEMS: { to: string; label: string; icon: IconName }[] = [
+  { to: "/", label: "Home", icon: "dashboard" },
+  { to: "/projects", label: "Projects", icon: "projects" },
+  { to: "/sessions", label: "Sessions", icon: "terminal" },
+  { to: "/tool-workshop", label: "Tools", icon: "settings" },
+  { to: "/settings", label: "Settings", icon: "settings" },
+];
+
+export const MobileNav: React.FC<MobileNavProps> = ({ sessionCount }) => {
+  return (
+    <nav className="mobile-nav" role="navigation" aria-label="Mobile navigation">
+      {MOBILE_NAV_ITEMS.map((item) => (
+        <NavLink
+          key={item.to}
+          to={item.to}
+          className={({ isActive }) =>
+            `mobile-nav-item ${isActive ? "active" : ""}`
+          }
+          end={item.to === "/"}
+        >
+          <div className="mobile-nav-icon-wrapper">
+            <Icon name={item.icon} size="md" />
+            {item.to === "/sessions" && sessionCount ? (
+              <span className="mobile-nav-badge">{sessionCount}</span>
+            ) : null}
+          </div>
+          <span className="mobile-nav-label">{item.label}</span>
+        </NavLink>
+      ))}
+    </nav>
+  );
+};