docs(fase-5): plan mobile UX rewrite ("Monolith Editorial")
- Add plan/fase-5-mobile-ux.md with 7-chunk breakdown:
5.0 mobile tests (Playwright mobile-shell/masthead/swipe-delete + Vitest helpers)
5.1 responsive shell (MobileTopBar + BottomTabBar + MobileDrawer)
5.2 ScreenMasthead + px-4/md:px-6 pass
5.3 /lists mobile cards
5.4 /lists/[id] rows + red-zone swipe-delete
5.5 undoQueue store + UndoToast
5.6 scrollable frequency chips
5.7 tasks/notes/search shell + masthead
5.Z verify 211 + new M-series green
- Explicit gap analysis vs. current app + deliberate exclusions
(no priority badges, no voice search, no fake meta like "Dairy · Weekly")
- Index design/ directory: Stitch mockups per screen (mobile + desktop variants),
plus the "Monolith Editorial" DESIGN.md directing tonal shifts, masthead
typography, glassmorphism, and the no-line rule
- Relocate DESIGN.md under design/slate_collective/DESIGN.md (old entry point) —
the current design direction lives at design/DESIGN.md
- Reference design/ from CLAUDE.md + add Fase 5 to README phase index
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
282
design/search_page/code.html
Normal file
282
design/search_page/code.html
Normal file
@@ -0,0 +1,282 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="light" lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;700;800&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/>
|
||||
<script id="tailwind-config">
|
||||
tailwind.config = {
|
||||
darkMode: "class",
|
||||
theme: {
|
||||
extend: {
|
||||
"colors": {
|
||||
"on-background": "#191c1e",
|
||||
"on-primary": "#dae2fd",
|
||||
"surface-dim": "#d8dadc",
|
||||
"surface-container-lowest": "#ffffff",
|
||||
"surface-container-low": "#f2f4f6",
|
||||
"on-primary-container": "#ffffff",
|
||||
"inverse-on-surface": "#eff1f3",
|
||||
"tertiary": "#7d000f",
|
||||
"secondary-fixed-dim": "#9cacc5",
|
||||
"secondary-container": "#c5d6f0",
|
||||
"secondary": "#505f76",
|
||||
"on-primary-fixed": "#ffffff",
|
||||
"on-secondary": "#ffffff",
|
||||
"on-secondary-fixed-variant": "#2d3c51",
|
||||
"on-secondary-container": "#0b1c30",
|
||||
"surface-variant": "#e0e3e5",
|
||||
"surface-bright": "#f7f9fb",
|
||||
"outline-variant": "#c6c6c6",
|
||||
"on-tertiary-fixed-variant": "#ffdad7",
|
||||
"surface-container": "#eceef0",
|
||||
"on-surface-variant": "#474747",
|
||||
"primary-fixed": "#565e74",
|
||||
"on-tertiary": "#ffdad7",
|
||||
"on-error": "#ffffff",
|
||||
"primary-container": "#333b50",
|
||||
"inverse-surface": "#2d3133",
|
||||
"surface-container-highest": "#e0e3e5",
|
||||
"surface-container-high": "#e6e8ea",
|
||||
"secondary-fixed": "#b7c8e1",
|
||||
"tertiary-container": "#da3437",
|
||||
"tertiary-fixed": "#b91a24",
|
||||
"on-tertiary-fixed": "#ffffff",
|
||||
"tertiary-fixed-dim": "#930013",
|
||||
"surface-tint": "#565e74",
|
||||
"inverse-primary": "#bec6e0",
|
||||
"on-surface": "#191c1e",
|
||||
"error": "#ba1a1a",
|
||||
"on-tertiary-container": "#ffffff",
|
||||
"surface": "#f7f9fb",
|
||||
"error-container": "#ffdad6",
|
||||
"primary-fixed-dim": "#3f465c",
|
||||
"on-secondary-fixed": "#0b1c30",
|
||||
"background": "#f7f9fb",
|
||||
"on-primary-fixed-variant": "#dae2fd",
|
||||
"outline": "#777777",
|
||||
"on-error-container": "#410002",
|
||||
"primary": "#000000"
|
||||
},
|
||||
"borderRadius": {
|
||||
"DEFAULT": "0.125rem",
|
||||
"lg": "0.25rem",
|
||||
"xl": "0.5rem",
|
||||
"full": "0.75rem"
|
||||
},
|
||||
"fontFamily": {
|
||||
"headline": ["Inter"],
|
||||
"body": ["Inter"],
|
||||
"label": ["Inter"]
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
body { font-family: 'Inter', sans-serif; }
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-surface text-on-surface antialiased">
|
||||
<!-- SideNavBar Shell -->
|
||||
<aside class="h-screen w-64 fixed left-0 top-0 bg-slate-50 dark:bg-slate-900 flex flex-col py-8 px-4 z-50">
|
||||
<div class="mb-12">
|
||||
<h1 class="text-xl font-semibold tracking-tight text-slate-900 dark:text-slate-50">Colectivo</h1>
|
||||
<p class="text-[13px] font-normal text-slate-500">Personal Workspace</p>
|
||||
</div>
|
||||
<button class="mb-8 bg-slate-900 text-slate-50 py-3 px-4 rounded-md text-sm font-semibold flex items-center justify-center gap-2 hover:opacity-80 transition-opacity">
|
||||
<span class="material-symbols-outlined text-[18px]">add</span>
|
||||
New Entry
|
||||
</button>
|
||||
<nav class="flex-1 space-y-1">
|
||||
<!-- Navigation Items -->
|
||||
<a class="flex items-center gap-3 py-2 px-3 text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200 hover:bg-slate-200/50 dark:hover:bg-slate-800/50 transition-colors" href="#">
|
||||
<span class="material-symbols-outlined">format_list_bulleted</span>
|
||||
<span class="text-[14px]">Lists</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 py-2 px-3 text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200 hover:bg-slate-200/50 dark:hover:bg-slate-800/50 transition-colors" href="#">
|
||||
<span class="material-symbols-outlined">check_circle</span>
|
||||
<span class="text-[14px]">Tasks</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 py-2 px-3 text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200 hover:bg-slate-200/50 dark:hover:bg-slate-800/50 transition-colors" href="#">
|
||||
<span class="material-symbols-outlined">description</span>
|
||||
<span class="text-[14px]">Notes</span>
|
||||
</a>
|
||||
<!-- Active Search Tab -->
|
||||
<a class="flex items-center gap-3 py-2 px-3 text-slate-900 dark:text-slate-50 font-semibold border-r-2 border-slate-900 dark:border-slate-50 hover:bg-slate-200/50 dark:hover:bg-slate-800/50 transition-colors" href="#">
|
||||
<span class="material-symbols-outlined">search</span>
|
||||
<span class="text-[14px]">Search</span>
|
||||
</a>
|
||||
</nav>
|
||||
<div class="pt-8 border-t border-slate-100 dark:border-slate-800 space-y-1">
|
||||
<a class="flex items-center gap-3 py-2 px-3 text-slate-500 hover:text-slate-700 transition-colors" href="#">
|
||||
<span class="material-symbols-outlined text-[18px]">settings</span>
|
||||
<span class="text-[14px]">Settings</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 py-2 px-3 text-slate-500 hover:text-slate-700 transition-colors" href="#">
|
||||
<span class="material-symbols-outlined text-[18px]">help_outline</span>
|
||||
<span class="text-[14px]">Support</span>
|
||||
</a>
|
||||
</div>
|
||||
</aside>
|
||||
<!-- TopNavBar Shell -->
|
||||
<header class="fixed top-0 right-0 w-[calc(100%-16rem)] h-16 bg-white/80 dark:bg-slate-950/80 backdrop-blur-md flex justify-between items-center px-8 z-40 border-b border-slate-100 dark:border-slate-800">
|
||||
<div class="flex items-center gap-4">
|
||||
<span class="text-[13px] font-semibold uppercase tracking-[0.05em] text-slate-400">Directory</span>
|
||||
<span class="material-symbols-outlined text-slate-300">chevron_right</span>
|
||||
<span class="text-[13px] font-semibold uppercase tracking-[0.05em] text-slate-900 dark:text-slate-50">Search Results</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-6">
|
||||
<button class="material-symbols-outlined text-slate-500 hover:text-slate-900 transition-transform active:scale-100 scale-95">notifications</button>
|
||||
<button class="material-symbols-outlined text-slate-500 hover:text-slate-900 transition-transform active:scale-100 scale-95">apps</button>
|
||||
<div class="w-8 h-8 rounded-full bg-slate-200 overflow-hidden">
|
||||
<img alt="User profile" class="w-full h-full object-cover" data-alt="close-up portrait of a professional individual with soft studio lighting and a clean neutral background" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAcqS49711lkA9-XFrP3HUPslSllhGhqgehHEIzoCZqvdYl7MUCu7FTXtaRly-jBzL4SBzO3ab7s1nYmPYi1X6hKW6vUNmXCSwzYsnOs-YLpxy9WL77RIoLI9VYGDpqosuVQbMOoXab7TwhgwUK1E9qBt76fFGqJgaTmdcc_odpIv3lWTt-vggwrjbzS0pgE94E_IMH9vP11nmoB3PlJjhhGDJvwnPmCBVeqxK4y6bl4MwDunbP6vmvDetMK06CYl0UGavsEL8dfr3C"/>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Main Content Canvas -->
|
||||
<main class="ml-64 pt-16 min-h-screen">
|
||||
<div class="max-w-5xl mx-auto px-8 py-12">
|
||||
<!-- Hero Search Input -->
|
||||
<div class="mb-16">
|
||||
<div class="relative group">
|
||||
<span class="absolute left-0 top-1/2 -translate-y-1/2 material-symbols-outlined text-slate-400 text-3xl">search</span>
|
||||
<input class="w-full bg-transparent border-none border-b-2 border-slate-100 focus:ring-0 focus:border-slate-900 text-5xl font-semibold tracking-tight text-slate-900 dark:text-slate-50 pl-12 py-4 transition-colors" placeholder="Search anything..." type="text" value="Design"/>
|
||||
</div>
|
||||
<div class="mt-4 flex gap-3">
|
||||
<span class="px-3 py-1 bg-slate-900 text-slate-50 rounded-full text-xs font-medium">All Results</span>
|
||||
<span class="px-3 py-1 bg-surface-container-low text-slate-500 rounded-full text-xs font-medium hover:bg-slate-200 transition-colors cursor-pointer">Last 7 Days</span>
|
||||
<span class="px-3 py-1 bg-surface-container-low text-slate-500 rounded-full text-xs font-medium hover:bg-slate-200 transition-colors cursor-pointer">Attachments</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Bento Content Grid -->
|
||||
<div class="grid grid-cols-12 gap-6">
|
||||
<!-- Notes Section (Editorial Highlight) -->
|
||||
<div class="col-span-12 lg:col-span-8 space-y-6">
|
||||
<div class="flex flex-col gap-1 mb-2">
|
||||
<span class="text-[13px] font-semibold uppercase tracking-[0.05em] text-slate-400">Notes</span>
|
||||
<h2 class="text-2xl font-semibold text-slate-900">Design thoughts</h2>
|
||||
</div>
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<!-- Note Card 1 -->
|
||||
<div class="group bg-surface-container-low p-6 rounded-md hover:bg-surface-container-high transition-colors cursor-pointer">
|
||||
<div class="flex justify-between items-start mb-4">
|
||||
<span class="material-symbols-outlined text-slate-400">description</span>
|
||||
<span class="text-xs text-slate-400">2h ago</span>
|
||||
</div>
|
||||
<h3 class="text-lg font-semibold text-slate-900 mb-2">Interface Heuristics</h3>
|
||||
<p class="text-sm text-slate-600 leading-relaxed mb-4">Exploring the relationship between negative space and cognitive load in minimalist editorial layouts...</p>
|
||||
<div class="flex -space-x-2">
|
||||
<div class="w-6 h-6 rounded-full border-2 border-surface bg-slate-300 overflow-hidden">
|
||||
<img alt="Avatar" data-alt="closeup of person's face in soft daylight" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDGQZuvNWbAKwkoR3TeHoXXUQxjsuGC75wJ3XxAq2S26zsnQqG7HQczIoZsLyA4y_DjfddhyH1Xx2OJDe3SjcR5-UeJ1pLHNEkHG9aR5ZIfXTrJPZxiCRqg1UCp5gEOzPnb702V8KSj62_ON5ggI-aI5HAXGkUVU5yIiuT_olVsczd-6hZr9ES6ixR31Rx76JoNEc1YpjzqoYg7029LBCWPO6kMhZQCFQcUtuOdkOTImFsaLKB09K4ANvRoq5QuBNHP2HBR82BxnClX"/>
|
||||
</div>
|
||||
<div class="w-6 h-6 rounded-full border-2 border-surface bg-slate-400 overflow-hidden">
|
||||
<img alt="Avatar" data-alt="professional woman portrait in modern office setting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuC8DPH9HKbmLvYvJT49yJAMJxKRjjhQUWtFcSWRuQ5sKOBdkI_z7lWLX2NQALQNzwwfb3Uv8hcj74tPE9KL2XkxpTtQwnMfLn-4nih5ArfJMXGx-xtFDTNnPmd8OaOebl1d4Tk41PIqNskKQ_HV28G9I2BN2tyTp7THlZa5k4yUJ_vOwt_WqrcuuWwVikhQAXF-nZVy_ThSfXBtpfjj0ZY1UVpVi1YS3rwy8WLH61J7crj7Ao_e6MohDtvMB1PsWd0BPaO0oJ7Ljj8x"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Note Card 2 -->
|
||||
<div class="group bg-surface-container-low p-6 rounded-md hover:bg-surface-container-high transition-colors cursor-pointer">
|
||||
<div class="flex justify-between items-start mb-4">
|
||||
<span class="material-symbols-outlined text-slate-400">description</span>
|
||||
<span class="text-xs text-slate-400">Yesterday</span>
|
||||
</div>
|
||||
<h3 class="text-lg font-semibold text-slate-900 mb-2">Monolith System</h3>
|
||||
<p class="text-sm text-slate-600 leading-relaxed mb-4">Core principles for the new design system focusing on slate palettes and glassmorphism anchors...</p>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="px-2 py-0.5 bg-slate-200 text-slate-600 rounded text-[10px] font-bold uppercase">System</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Visual Search Result -->
|
||||
<div class="relative h-64 w-full rounded-md overflow-hidden group">
|
||||
<div class="absolute inset-0 bg-slate-900/40 group-hover:bg-slate-900/20 transition-colors duration-500 z-10"></div>
|
||||
<img alt="Design inspiration" class="w-full h-full object-cover scale-105 group-hover:scale-100 transition-transform duration-700" data-alt="minimalist architecture interior with clean white walls concrete floors and dramatic sunlight casting sharp shadows" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAqyPQcg_4qsjEiUWQmrDC_aYKzOS6Rh-FalQPpkM7tZMPiQtXHmbTNucxCBBj4A-d61Reg2m_tl4htElpo_SElfSnDVWyqczXkKfbZuTrWdk6HKUyE0fs4t7Fw0qsaSqBfYck8f3PVxqiYY51uqkeYv7CjY449NLgCZ8i4BEOOkzScLC2lemT8HeuWETEzy7KPIlCfzlrfuc2lDA4tS4Ecwxr0nHVVgYh-GCsS3C3FD04JLBGgyLb8f9bZffw34ATsJwAT9atfATxs"/>
|
||||
<div class="absolute bottom-6 left-6 z-20">
|
||||
<span class="text-[11px] font-bold uppercase tracking-widest text-white/70 mb-1 block">Visual Inspiration</span>
|
||||
<h3 class="text-2xl font-bold text-white tracking-tight">Editorial Spatial Study</h3>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Right Column: Tasks & Lists -->
|
||||
<div class="col-span-12 lg:col-span-4 space-y-12">
|
||||
<!-- Tasks Section -->
|
||||
<section>
|
||||
<div class="flex flex-col gap-1 mb-6">
|
||||
<span class="text-[13px] font-semibold uppercase tracking-[0.05em] text-slate-400">Tasks</span>
|
||||
<h2 class="text-xl font-semibold text-slate-900">Active Items</h2>
|
||||
</div>
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-center gap-4 py-3 group cursor-pointer border-b border-transparent hover:border-slate-100 transition-all">
|
||||
<span class="material-symbols-outlined text-slate-400 group-hover:text-slate-900 transition-colors">check_box</span>
|
||||
<div class="flex-1">
|
||||
<p class="text-sm font-medium text-slate-900">Fix navigation bug</p>
|
||||
<p class="text-xs text-slate-500">Colectivo Mobile App</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center gap-4 py-3 group cursor-pointer border-b border-transparent hover:border-slate-100 transition-all">
|
||||
<span class="material-symbols-outlined text-slate-400 group-hover:text-slate-900 transition-colors">check_box_outline_blank</span>
|
||||
<div class="flex-1">
|
||||
<p class="text-sm font-medium text-slate-900">Finalize search UI</p>
|
||||
<p class="text-xs text-slate-500">Workspace V2</p>
|
||||
</div>
|
||||
<span class="text-[10px] font-bold text-red-500 uppercase">High</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Lists Section -->
|
||||
<section>
|
||||
<div class="flex flex-col gap-1 mb-6">
|
||||
<span class="text-[13px] font-semibold uppercase tracking-[0.05em] text-slate-400">Lists</span>
|
||||
<h2 class="text-xl font-semibold text-slate-900">Collections</h2>
|
||||
</div>
|
||||
<div class="space-y-3">
|
||||
<div class="p-4 bg-surface-container-low rounded-md flex items-center justify-between hover:bg-slate-200/50 transition-colors cursor-pointer">
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="material-symbols-outlined text-slate-900">shopping_cart</span>
|
||||
<span class="text-sm font-semibold">Grocery list</span>
|
||||
</div>
|
||||
<span class="text-xs font-medium text-slate-400">12 items</span>
|
||||
</div>
|
||||
<div class="p-4 bg-surface-container-low rounded-md flex items-center justify-between hover:bg-slate-200/50 transition-colors cursor-pointer">
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="material-symbols-outlined text-slate-900">bookmarks</span>
|
||||
<span class="text-sm font-semibold">Reading list</span>
|
||||
</div>
|
||||
<span class="text-xs font-medium text-slate-400">4 items</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Quick Action Card -->
|
||||
<div class="p-8 bg-slate-900 rounded-md text-slate-50">
|
||||
<span class="material-symbols-outlined text-4xl mb-4 text-slate-400">bolt</span>
|
||||
<h4 class="text-lg font-bold mb-2">Search Insights</h4>
|
||||
<p class="text-sm text-slate-400 mb-6 leading-relaxed">Search is indexing 452 items across your workspace. Use keyboard shortcuts to browse faster.</p>
|
||||
<div class="flex items-center gap-2">
|
||||
<span class="px-2 py-1 bg-slate-800 rounded text-[10px] font-mono border border-slate-700">CMD</span>
|
||||
<span class="px-2 py-1 bg-slate-800 rounded text-[10px] font-mono border border-slate-700">K</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<!-- Glassmorphic Search Bottom Anchor -->
|
||||
<div class="fixed bottom-8 left-1/2 -translate-x-1/2 w-full max-w-lg px-6 z-50">
|
||||
<div class="bg-white/80 dark:bg-slate-900/80 backdrop-blur-xl rounded-full p-2 shadow-[0px_20px_40px_rgba(15,23,42,0.08)] flex items-center gap-2">
|
||||
<div class="flex-1 flex items-center px-4 gap-3">
|
||||
<span class="material-symbols-outlined text-slate-400">auto_awesome</span>
|
||||
<span class="text-sm text-slate-500">Ask AI about your workspace...</span>
|
||||
</div>
|
||||
<button class="bg-slate-900 text-white w-10 h-10 rounded-full flex items-center justify-center hover:opacity-90 transition-opacity">
|
||||
<span class="material-symbols-outlined text-[20px]">arrow_forward</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</body></html>
|
||||
BIN
design/search_page/screen.png
Normal file
BIN
design/search_page/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 344 KiB |
Reference in New Issue
Block a user