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:
260
design/notes_view/code.html
Normal file
260
design/notes_view/code.html
Normal file
@@ -0,0 +1,260 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<html class="light" lang="en"><head>
|
||||
<meta charset="utf-8"/>
|
||||
<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
|
||||
<title>Colectivo | Notes</title>
|
||||
<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>
|
||||
body { font-family: 'Inter', sans-serif; }
|
||||
.material-symbols-outlined {
|
||||
font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
|
||||
}
|
||||
.editorial-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||||
gap: 2rem;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body class="bg-surface text-on-surface">
|
||||
<!-- SideNavBar (Desktop) -->
|
||||
<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-10 px-2">
|
||||
<h1 class="text-xl font-semibold tracking-tight text-slate-900 dark:text-slate-50">Colectivo</h1>
|
||||
<p class="text-[13px] text-slate-500 uppercase tracking-widest mt-1">Personal Workspace</p>
|
||||
</div>
|
||||
<button class="mb-8 w-full bg-slate-900 text-slate-50 py-3 rounded-md font-semibold text-sm transition-opacity active:opacity-80">
|
||||
New Entry
|
||||
</button>
|
||||
<nav class="flex-1 space-y-1">
|
||||
<a class="flex items-center gap-3 px-3 py-2 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 rounded-md" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="format_list_bulleted">format_list_bulleted</span>
|
||||
<span class="text-sm">Lists</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2 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 rounded-md" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="check_circle">check_circle</span>
|
||||
<span class="text-sm">Tasks</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2 text-slate-900 dark:text-slate-50 font-semibold border-r-2 border-slate-900 dark:border-slate-50 bg-slate-200/50 dark:bg-slate-800/50 rounded-l-md" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="description">description</span>
|
||||
<span class="text-sm">Notes</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2 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 rounded-md" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="search">search</span>
|
||||
<span class="text-sm">Search</span>
|
||||
</a>
|
||||
</nav>
|
||||
<div class="mt-auto space-y-1">
|
||||
<a class="flex items-center gap-3 px-3 py-2 text-slate-500 dark:text-slate-400 hover:bg-slate-200/50 dark:hover:bg-slate-800/50 transition-colors rounded-md" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="settings">settings</span>
|
||||
<span class="text-sm">Settings</span>
|
||||
</a>
|
||||
<a class="flex items-center gap-3 px-3 py-2 text-slate-500 dark:text-slate-400 hover:bg-slate-200/50 dark:hover:bg-slate-800/50 transition-colors rounded-md" href="#">
|
||||
<span class="material-symbols-outlined" data-icon="help_outline">help_outline</span>
|
||||
<span class="text-sm">Support</span>
|
||||
</a>
|
||||
</div>
|
||||
</aside>
|
||||
<!-- TopNavBar (Main Header) -->
|
||||
<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-2">
|
||||
<span class="text-[13px] font-semibold uppercase tracking-[0.05em] text-slate-500">Workspace /</span>
|
||||
<span class="text-[13px] font-semibold uppercase tracking-[0.05em] text-slate-900">Notes</span>
|
||||
</div>
|
||||
<div class="flex items-center gap-6">
|
||||
<div class="flex items-center gap-4 text-slate-500">
|
||||
<button class="material-symbols-outlined hover:text-slate-900 transition-colors" data-icon="notifications">notifications</button>
|
||||
<button class="material-symbols-outlined hover:text-slate-900 transition-colors" data-icon="apps">apps</button>
|
||||
</div>
|
||||
<div class="w-8 h-8 rounded-full overflow-hidden bg-slate-200">
|
||||
<img alt="User profile" class="w-full h-full object-cover" data-alt="Close up portrait of a professional woman with a minimalist aesthetic and soft natural lighting" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDeJLr9mf2Uv-tRtBivLcWlh01nh3RRobcUz47SyEJxtBOKp7vph1ZGjWa-OtMkmT_drgJbXSNzgdzWe5Se3F_HWzYYH53S2Nr9UjduTJXG6a6lntf_J6TtWPTYsC7DUEdT7X598SOo0qGhzbj4gjsyDYxclnja9LgzF1FJ9SIhMywekoTN54rhSRnUC5e_vJSCbtOidnuj4Jp-ZYJZEHxBmQ1fP3PjDfIwkKupCa4pCYh3iSPo8hVwuxQKOE3208K74h-3y47m2UrM"/>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<!-- Main Content Canvas -->
|
||||
<main class="ml-64 pt-16 min-h-screen">
|
||||
<div class="max-w-6xl mx-auto px-12 py-16">
|
||||
<!-- Category: MEETING NOTES -->
|
||||
<section class="mb-20">
|
||||
<header class="mb-8">
|
||||
<p class="text-[13px] font-semibold uppercase tracking-[0.05em] text-slate-400 mb-1">Category</p>
|
||||
<h2 class="text-20px font-semibold text-slate-900">MEETING NOTES</h2>
|
||||
</header>
|
||||
<div class="editorial-grid">
|
||||
<!-- Note Card -->
|
||||
<div class="group bg-surface-container-lowest p-8 rounded-md transition-all hover:bg-white hover:shadow-sm cursor-pointer border-l-4 border-slate-900">
|
||||
<div class="flex justify-between items-start mb-4">
|
||||
<span class="text-[13px] text-slate-400">Oct 24, 2023</span>
|
||||
<span class="material-symbols-outlined text-slate-300 group-hover:text-slate-900 transition-colors" data-icon="more_horiz">more_horiz</span>
|
||||
</div>
|
||||
<h3 class="text-lg font-bold text-slate-900 mb-3 leading-tight">Q4 Product Roadmap Alignment</h3>
|
||||
<p class="text-slate-600 text-sm leading-relaxed mb-6 line-clamp-3">
|
||||
Discussed the core pillars for the upcoming quarter. Priority remains on user retention through the Monolith UI update. Key stakeholders agreed on the phased rollout strategy...
|
||||
</p>
|
||||
<div class="flex -space-x-2">
|
||||
<img class="w-6 h-6 rounded-full border-2 border-white" data-alt="Portrait of a creative professional in a bright studio environment" src="https://lh3.googleusercontent.com/aida-public/AB6AXuD9sLg2dV3zUC4KSFx-dXTzP14s4q3ooR0PfejwR05ZL9bFtqWZCgIpGaBIh1hMid2ttsQGa8PB4yzgq7cKqfr9ZT168Rp5fytm_okUbAwmRIR31DbfrJI-QxyvdctDirxRGUy2SHio4qsYqAwd31fZzFdkh0vpUWUkUfAyhCHd2OwuDbN75nFbQCnNF5xFIJOblBqB10sJ-n2OBFpgJduvNeVvEZdz_k8vVqEK0iItT_Wx5X4jrDkb-og1n7hxVM0NNAupiRrhaR3J"/>
|
||||
<img class="w-6 h-6 rounded-full border-2 border-white" data-alt="Close up of a smiling woman with glasses in a minimalist workspace" src="https://lh3.googleusercontent.com/aida-public/AB6AXuBc0JqnTvk9r8KjfCKAIvfLb9oDopBHZJlrAsC6nQPI6MvdJAwC-6D1m5Kev48iAY6JVUo_ye0dL6DMgpIQGAMknTIap44lh4bluz-rW8OyGQksfVpdDNOxOzh-kx9NQGRFb1Em617-47dCDeqUdZyw-IbYFNYK39xLOaPvSlGr3QsxbZ7Sn8De0VckFd6DHvrzb1szDjUCuJC-4_jsy6Ot1vRKy-7IIrtZY3rx3nPfQZ-t88Ir4AiWf85cstIU1Y2hIVhEkZP5H4lb"/>
|
||||
<div class="w-6 h-6 rounded-full bg-slate-100 border-2 border-white flex items-center justify-center text-[10px] font-bold text-slate-400">+2</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Note Card -->
|
||||
<div class="group bg-surface-container-low p-8 rounded-md transition-all hover:bg-white hover:shadow-sm cursor-pointer border-l-4 border-transparent hover:border-slate-300">
|
||||
<div class="flex justify-between items-start mb-4">
|
||||
<span class="text-[13px] text-slate-400">Oct 22, 2023</span>
|
||||
<span class="material-symbols-outlined text-slate-300 group-hover:text-slate-900 transition-colors" data-icon="more_horiz">more_horiz</span>
|
||||
</div>
|
||||
<h3 class="text-lg font-bold text-slate-900 mb-3 leading-tight">Sprint Retro: Project Apollo</h3>
|
||||
<p class="text-slate-600 text-sm leading-relaxed mb-6 line-clamp-3">
|
||||
High velocity maintained. Challenges with the animation engine identified. Action item: Sarah to review the CSS transitions by Friday...
|
||||
</p>
|
||||
</div>
|
||||
<!-- Note Card -->
|
||||
<div class="group bg-surface-container-low p-8 rounded-md transition-all hover:bg-white hover:shadow-sm cursor-pointer border-l-4 border-transparent hover:border-slate-300">
|
||||
<div class="flex justify-between items-start mb-4">
|
||||
<span class="text-[13px] text-slate-400">Oct 19, 2023</span>
|
||||
<span class="material-symbols-outlined text-slate-300 group-hover:text-slate-900 transition-colors" data-icon="more_horiz">more_horiz</span>
|
||||
</div>
|
||||
<h3 class="text-lg font-bold text-slate-900 mb-3 leading-tight">Weekly Sync: Marketing</h3>
|
||||
<p class="text-slate-600 text-sm leading-relaxed mb-6 line-clamp-3">
|
||||
Focus on the editorial campaign launching next month. The "Quiet Authority" theme is resonating well with early test groups...
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<!-- Category: PROJECT IDEAS -->
|
||||
<section class="mb-32">
|
||||
<header class="mb-8">
|
||||
<p class="text-[13px] font-semibold uppercase tracking-[0.05em] text-slate-400 mb-1">Category</p>
|
||||
<h2 class="text-20px font-semibold text-slate-900">PROJECT IDEAS</h2>
|
||||
</header>
|
||||
<div class="editorial-grid">
|
||||
<!-- Note Card (Image Accent) -->
|
||||
<div class="group relative bg-surface-container-highest overflow-hidden rounded-md transition-all hover:shadow-lg cursor-pointer">
|
||||
<div class="h-32 w-full overflow-hidden">
|
||||
<img class="w-full h-full object-cover grayscale opacity-40 group-hover:opacity-60 transition-opacity" data-alt="Abstract minimalist architecture with sharp lines and deep shadows on a bright white surface" src="https://lh3.googleusercontent.com/aida-public/AB6AXuDGkG6a0PGOFSzTFXQ4rMKs5pJoaeC4nF-wEEZSqVvpJNoSGj5FyQ9qOEyQM8S6wdSQemIALiSSdAFCckJhNW2JJ0T__fYqH8sfPaz6DRh_71kK5NgYVqDYo0rCR70lrb1WncAjxIjEvM1orv4nKf5BZQ7w9RYQvQeKGKxhU5kIs-kkNc15Mz9KCZ5YcV4gtelc5d4_AJfTok7NK2OnUij815lSL0b7iaxS02vRC1XAmiwqbMKzHFxUsZ8VbhVCnPQTYNfeY9wD48l0"/>
|
||||
</div>
|
||||
<div class="p-8">
|
||||
<div class="flex justify-between items-start mb-4">
|
||||
<span class="text-[13px] text-slate-400">Oct 15, 2023</span>
|
||||
<span class="material-symbols-outlined text-slate-300 group-hover:text-slate-900" data-icon="lightbulb">lightbulb</span>
|
||||
</div>
|
||||
<h3 class="text-lg font-bold text-slate-900 mb-3 leading-tight">Minimalist Portfolio Concept</h3>
|
||||
<p class="text-slate-600 text-sm leading-relaxed line-clamp-2">
|
||||
Experimenting with 0% saturation and extreme negative space for the upcoming creative showcase...
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Note Card -->
|
||||
<div class="group bg-surface-container-low p-8 rounded-md transition-all hover:bg-white hover:shadow-sm cursor-pointer border-l-4 border-transparent hover:border-slate-300">
|
||||
<div class="flex justify-between items-start mb-4">
|
||||
<span class="text-[13px] text-slate-400">Oct 12, 2023</span>
|
||||
<span class="material-symbols-outlined text-slate-300 group-hover:text-slate-900 transition-colors" data-icon="more_horiz">more_horiz</span>
|
||||
</div>
|
||||
<h3 class="text-lg font-bold text-slate-900 mb-3 leading-tight">AI Driven Content Curation</h3>
|
||||
<p class="text-slate-600 text-sm leading-relaxed mb-6 line-clamp-3">
|
||||
Using natural language processing to automatically categorize and tag editorial snippets within the workspace...
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
<!-- Sticky Bottom Input (Monolith Design) -->
|
||||
<div class="fixed bottom-0 right-0 w-[calc(100%-16rem)] p-8 z-50">
|
||||
<div class="max-w-4xl mx-auto">
|
||||
<div class="bg-white/80 dark:bg-slate-900/80 backdrop-blur-xl rounded-xl shadow-[0px_20px_40px_rgba(15,23,42,0.08)] border border-slate-100/50 p-3 flex items-center gap-4">
|
||||
<button class="w-10 h-10 flex items-center justify-center text-slate-400 hover:text-slate-900 transition-colors">
|
||||
<span class="material-symbols-outlined" data-icon="add_circle">add_circle</span>
|
||||
</button>
|
||||
<input class="flex-1 bg-transparent border-none focus:ring-0 text-slate-800 placeholder-slate-400 text-sm py-2" placeholder="Capture a new thought..." type="text"/>
|
||||
<div class="flex items-center gap-2 pr-2">
|
||||
<button class="material-symbols-outlined text-slate-400 hover:text-slate-900 transition-colors p-2" data-icon="tag">tag</button>
|
||||
<button class="material-symbols-outlined text-slate-400 hover:text-slate-900 transition-colors p-2" data-icon="attachment">attachment</button>
|
||||
<button class="bg-slate-900 text-slate-50 px-4 py-2 rounded-md text-xs font-bold uppercase tracking-wider transition-transform active:scale-95 ml-2">
|
||||
Save
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Mobile Navigation Overlay (Suppressed as per rules for desktop focus, but available) -->
|
||||
<div class="md:hidden fixed bottom-0 left-0 right-0 bg-white/90 backdrop-blur-lg px-6 py-4 flex justify-around items-center border-t border-slate-100 z-50">
|
||||
<button class="material-symbols-outlined text-slate-400" data-icon="format_list_bulleted">format_list_bulleted</button>
|
||||
<button class="material-symbols-outlined text-slate-400" data-icon="check_circle">check_circle</button>
|
||||
<button class="material-symbols-outlined text-slate-900" data-icon="description">description</button>
|
||||
<button class="material-symbols-outlined text-slate-400" data-icon="search">search</button>
|
||||
</div>
|
||||
</body></html>
|
||||
BIN
design/notes_view/screen.png
Normal file
BIN
design/notes_view/screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 266 KiB |
Reference in New Issue
Block a user