feat: mobile UI overhaul — iPhone-style app grid, icon-only tab bar, fullscreen app sessions

- Add AppIconGrid: 4-column swipeable icon grid with page dots for My Apps on mobile
- Tab bar: remove text labels, square icon-only buttons (w-14 h-14), doubled padding
- Hide tab bar and top context tabs when app session is open
- App session header hidden on mobile, replaced with floating glass close button
- App sessions now render fullscreen on mobile without nav chrome

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Dorian
2026-03-30 21:03:00 +01:00
co-authored by Claude Opus 4.6
parent afda9897f1
commit 76585656a7
6 changed files with 357 additions and 15 deletions
@@ -1,5 +1,5 @@
<template>
<div class="sticky top-0 z-10 flex items-center gap-3 border-b border-white/10 px-4 py-3 bg-black/60 backdrop-blur-md md:bg-transparent md:backdrop-blur-none">
<div class="sticky top-0 z-10 hidden md:flex items-center gap-3 border-b border-white/10 px-4 py-3 bg-black/60 backdrop-blur-md md:bg-transparent md:backdrop-blur-none">
<!-- Back / Forward navigation -->
<div class="flex items-center gap-0.5">
<button class="app-session-btn" aria-label="Back" title="Go back" @click="$emit('goBack')">