sepehr/Momento
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: architectural grid editor fullPage + slash commands + doc info panel + AI title

Browse Source
This commit is contained in:
Antigravity
2026-05-07 22:29:02 +00:00
parent 0d8252aec0
commit e458b63115
126 changed files with 7652 additions and 1110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

162
stitch_momento_settings_redesign/DESIGN.md Normal file
View File

@@ -0,0 +1,162 @@
---
name: Memento Light
colors:
surface: '#f7f9ff'
surface-dim: '#d7dae0'
surface-bright: '#f7f9ff'
surface-container-lowest: '#ffffff'
surface-container-low: '#f1f4fa'
surface-container: '#ebeef4'
surface-container-high: '#e5e8ee'
surface-container-highest: '#dfe3e8'
on-surface: '#181c20'
on-surface-variant: '#3f4850'
inverse-surface: '#2d3135'
inverse-on-surface: '#eef1f7'
outline: '#707881'
outline-variant: '#bfc7d2'
surface-tint: '#006398'
primary: '#006194'
on-primary: '#ffffff'
primary-container: '#007bb9'
on-primary-container: '#fdfcff'
inverse-primary: '#93ccff'
secondary: '#5c5f60'
on-secondary: '#ffffff'
secondary-container: '#dee0e2'
on-secondary-container: '#606365'
tertiary: '#894d00'
on-tertiary: '#ffffff'
tertiary-container: '#ac6200'
on-tertiary-container: '#fffbff'
error: '#ba1a1a'
on-error: '#ffffff'
error-container: '#ffdad6'
on-error-container: '#93000a'
primary-fixed: '#cce5ff'
primary-fixed-dim: '#93ccff'
on-primary-fixed: '#001d31'
on-primary-fixed-variant: '#004b73'
secondary-fixed: '#e1e2e4'
secondary-fixed-dim: '#c5c6c8'
on-secondary-fixed: '#191c1e'
on-secondary-fixed-variant: '#444749'
tertiary-fixed: '#ffdcc0'
tertiary-fixed-dim: '#ffb875'
on-tertiary-fixed: '#2d1600'
on-tertiary-fixed-variant: '#6b3b00'
background: '#f7f9ff'
on-background: '#181c20'
surface-variant: '#dfe3e8'
typography:
display-lg:
fontFamily: Inter
fontSize: 32px
fontWeight: '700'
lineHeight: '1.2'
letterSpacing: -0.02em
display-md:
fontFamily: Inter
fontSize: 24px
fontWeight: '600'
lineHeight: '1.3'
letterSpacing: -0.01em
headline:
fontFamily: Inter
fontSize: 20px
fontWeight: '600'
lineHeight: '1.4'
body-lg:
fontFamily: Inter
fontSize: 16px
fontWeight: '400'
lineHeight: '1.6'
body-sm:
fontFamily: Inter
fontSize: 14px
fontWeight: '400'
lineHeight: '1.5'
label-md:
fontFamily: Inter
fontSize: 14px
fontWeight: '500'
lineHeight: '1.2'
label-sm:
fontFamily: Inter
fontSize: 12px
fontWeight: '600'
lineHeight: '1.2'
letterSpacing: 0.05em
rounded:
sm: 0.25rem
DEFAULT: 0.5rem
md: 0.75rem
lg: 1rem
xl: 1.5rem
full: 9999px
spacing:
base: 8px
xs: 4px
sm: 8px
md: 16px
lg: 24px
xl: 32px
gutter: 16px
margin: 24px
---
## Brand & Style
This design system is engineered for high-performance productivity, emphasizing clarity, cognitive ease, and professional reliability. The brand personality is "The Quiet Assistant"—unobtrusive, organized, and precise. It targets professionals who require a distraction-free environment to manage complex workflows.
The visual style is **Corporate / Modern** with a strong leaning toward **Minimalism**. It prioritizes a high signal-to-noise ratio by using a restrained color palette, purposeful whitespace, and a flat design language. Depth is communicated through subtle tonal changes rather than heavy ornamentation, ensuring the interface feels lightweight and responsive.
## Colors
The palette is anchored in a cool-toned neutral base to reduce eye strain during long working sessions. The primary blue is used strategically for action intent and active states, providing a clear visual thread for navigation.
- **Foundations:** The background uses a crisp off-white, while the sidebar utilizes a slightly deeper grey to provide structural anchoring without the need for heavy borders.
- **Typography:** Headings utilize a deep slate for maximum legibility, while secondary information is pushed back using a muted grey-blue.
- **Accents:** The primary blue is the sole carrier of "active" meaning, ensuring that user attention is never fragmented by competing colors.
## Typography
This design system exclusively utilizes **Inter** for its utilitarian and highly readable characteristics at small sizes. The typographic scale is optimized for information density and hierarchy.
- **Hierarchy:** Bold weights are reserved for structural headings to anchor the page layout.
- **Readability:** Body text uses a generous line height (1.6) to facilitate the scanning of long lists or notes.
- **Utility:** Labels and metadata use a slightly smaller, medium-weight font to distinguish them from interactive text elements.
## Layout & Spacing
The layout is built on a strict **8px grid system**, ensuring every element is mathematically aligned and harmonious.
- **Grid Model:** A 12-column fluid grid is used for main content areas, allowing for flexible dashboard layouts.
- **Sidebar:** The sidebar is fixed at a width of 260px, creating a consistent navigation anchor on the left.
- **Rhythm:** Standardized padding of 16px (md) is used for container interiors, while 24px (lg) margins are used to separate major layout blocks.
## Elevation & Depth
This design system adopts a "Flat-Plus" approach. Depth is not used for realism but as a functional tool to indicate interactivity and containment.
- **Tonal Layering:** The primary method of separation is the use of the Sidebar color (#f4f5f7) against the Main Background (#f8fafc).
- **Subtle Shadows:** Shadows are extremely restrained, used only on floating elements like dropdowns and modals. Use a low-blur, low-opacity shadow: `0 1px 3px rgba(30, 41, 59, 0.08)`.
- **Ghost Outlines:** Containers and inputs use a 1px border (#cbd5e1) to define boundaries without adding visual weight.
## Shapes
The shape language is professional and approachable, moving away from sharp industrial corners toward softer, organic geometry.
- **Global Radius:** A standard 8px (0.5rem) radius is applied to cards, buttons, and input fields to maintain a consistent "Soft" appearance.
- **Interactive Pill:** Navigation items and tags utilize a full "pill" radius (100px) to distinguish them from static containers and emphasize their touch/click-friendly nature.
## Components
Consistency across components ensures the user can predict behavior through visual cues.
- **Buttons:** Primary buttons use the primary blue with white text. Secondary buttons use a white background with a subtle border and muted text.
- **Navigation Items:** When active, navigation items in the sidebar use a pill-shaped background in the primary blue (at 10-15% opacity) with a solid blue text or icon.
- **Inputs:** Use an 8px radius with the border color. On focus, the border shifts to the primary blue with a subtle 2px outer glow of the same color at 20% opacity.
- **Cards:** Cards should be flat with a 1px border. Use a white background to lift them slightly from the background color.
- **Chips/Badges:** Small pill shapes with medium font-weight labels, used for status indicators or category tags.
- **Lists:** Row items should have a subtle hover state using the sidebar color to provide clear feedback during interaction.

263
stitch_momento_settings_redesign/code.html Normal file
View File

@@ -0,0 +1,263 @@
<!DOCTYPE html>
<html class="light" lang="fr"><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;500;600;700&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
<script id="tailwind-config">
tailwind.config = {
darkMode: "class",
theme: {
extend: {
"colors": {
"on-error": "#ffffff",
"secondary": "#5c5f60",
"on-primary-fixed-variant": "#004b73",
"secondary-fixed-dim": "#c5c6c8",
"surface": "#f7f9ff",
"on-surface-variant": "#3f4850",
"secondary-container": "#dee0e2",
"primary-container": "#007bb9",
"on-tertiary": "#ffffff",
"on-secondary": "#ffffff",
"surface-container": "#ebeef4",
"on-primary-fixed": "#001d31",
"tertiary-fixed-dim": "#ffb875",
"tertiary": "#894d00",
"surface-dim": "#d7dae0",
"secondary-fixed": "#e1e2e4",
"on-background": "#181c20",
"primary-fixed-dim": "#93ccff",
"tertiary-fixed": "#ffdcc0",
"error-container": "#ffdad6",
"on-primary-container": "#fdfcff",
"primary-fixed": "#cce5ff",
"surface-tint": "#006398",
"tertiary-container": "#ac6200",
"outline-variant": "#bfc7d2",
"on-tertiary-fixed": "#2d1600",
"on-secondary-fixed-variant": "#444749",
"on-surface": "#181c20",
"surface-container-highest": "#dfe3e8",
"primary": "#006194",
"surface-container-low": "#f1f4fa",
"on-secondary-container": "#606365",
"surface-bright": "#f7f9ff",
"error": "#ba1a1a",
"on-tertiary-fixed-variant": "#6b3b00",
"outline": "#707881",
"on-primary": "#ffffff",
"on-error-container": "#93000a",
"inverse-primary": "#93ccff",
"on-tertiary-container": "#fffbff",
"inverse-on-surface": "#eef1f7",
"surface-container-high": "#e5e8ee",
"surface-container-lowest": "#ffffff",
"on-secondary-fixed": "#191c1e",
"inverse-surface": "#2d3135",
"surface-variant": "#dfe3e8",
"background": "#f7f9ff"
},
"borderRadius": {
"DEFAULT": "0.25rem",
"lg": "0.5rem",
"xl": "0.75rem",
"full": "9999px"
},
"spacing": {
"lg": "24px",
"gutter": "16px",
"base": "8px",
"xl": "32px",
"sm": "8px",
"margin": "24px",
"md": "16px",
"xs": "4px"
},
"fontFamily": {
"body-lg": ["Inter"],
"body-sm": ["Inter"],
"display-md": ["Inter"],
"headline": ["Inter"],
"label-sm": ["Inter"],
"label-md": ["Inter"],
"display-lg": ["Inter"]
},
"fontSize": {
"body-lg": ["16px", {"lineHeight": "1.6", "fontWeight": "400"}],
"body-sm": ["14px", {"lineHeight": "1.5", "fontWeight": "400"}],
"display-md": ["24px", {"lineHeight": "1.3", "letterSpacing": "-0.01em", "fontWeight": "600"}],
"headline": ["20px", {"lineHeight": "1.4", "fontWeight": "600"}],
"label-sm": ["12px", {"lineHeight": "1.2", "letterSpacing": "0.05em", "fontWeight": "600"}],
"label-md": ["14px", {"lineHeight": "1.2", "fontWeight": "500"}],
"display-lg": ["32px", {"lineHeight": "1.2", "letterSpacing": "-0.02em", "fontWeight": "700"}]
}
},
},
}
</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-bright text-on-surface antialiased overflow-hidden">
<!-- SideNavBar Component -->
<aside class="fixed left-0 top-0 h-full w-[260px] border-r border-slate-200 bg-slate-100 flex flex-col p-4 gap-2">
<div class="flex items-center gap-3 px-2 mb-8 mt-2">
<div class="w-8 h-8 bg-primary rounded-lg flex items-center justify-center">
<span class="material-symbols-outlined text-white text-xl" data-icon="description">description</span>
</div>
<div>
<h1 class="text-lg font-bold text-slate-900">Memento</h1>
<p class="text-[11px] font-medium text-slate-500 uppercase tracking-wider">Productivity Tool</p>
</div>
</div>
<nav class="flex-1 space-y-1">
<a class="flex items-center gap-3 px-3 py-2 text-slate-600 hover:bg-slate-200 rounded-lg transition-colors font-medium text-sm" href="#">
<span class="material-symbols-outlined" data-icon="description">description</span>
Notes
</a>
<a class="flex items-center gap-3 px-3 py-2 text-slate-600 hover:bg-slate-200 rounded-lg transition-colors font-medium text-sm" href="#">
<span class="material-symbols-outlined" data-icon="folder">folder</span>
Carnets
</a>
<a class="flex items-center gap-3 px-3 py-2 text-slate-600 hover:bg-slate-200 rounded-lg transition-colors font-medium text-sm" href="#">
<span class="material-symbols-outlined" data-icon="notifications">notifications</span>
Rappels
</a>
<a class="flex items-center gap-3 px-3 py-2 text-slate-600 hover:bg-slate-200 rounded-lg transition-colors font-medium text-sm" href="#">
<span class="material-symbols-outlined" data-icon="archive">archive</span>
Archives
</a>
<a class="flex items-center gap-3 px-3 py-2 text-slate-600 hover:bg-slate-200 rounded-lg transition-colors font-medium text-sm" href="#">
<span class="material-symbols-outlined" data-icon="delete">delete</span>
Corbeille
</a>
</nav>
<!-- Settings at bottom - Highlighting as active per request -->
<div class="mt-auto pt-4 border-t border-slate-200 space-y-1">
<a class="flex items-center gap-3 px-3 py-2 bg-sky-500/10 text-sky-600 rounded-lg font-medium text-sm transition-colors" href="#">
<span class="material-symbols-outlined" data-icon="settings" style="font-variation-settings: 'FILL' 1;">settings</span>
Paramètres
</a>
<a class="flex items-center gap-3 px-3 py-2 text-slate-600 hover:bg-slate-200 rounded-lg transition-colors font-medium text-sm" href="#">
<span class="material-symbols-outlined" data-icon="help">help</span>
Aide &amp; Support
</a>
</div>
</aside>
<!-- TopNavBar & Main Canvas Content -->
<main class="ml-[260px] h-screen overflow-y-auto bg-[#f8fafc]">
<!-- TopNavBar Cluster -->
<header class="flex items-center justify-start gap-8 px-8 py-4 w-full bg-slate-50 border-b border-slate-200">
<a class="text-sky-600 border-b-2 border-sky-600 pb-2 font-semibold text-sm tracking-tight transition-colors" href="#">Général</a>
<a class="text-slate-500 hover:text-slate-900 pb-2 font-medium text-sm tracking-tight transition-colors" href="#">IA</a>
<a class="text-slate-500 hover:text-slate-900 pb-2 font-medium text-sm tracking-tight transition-colors" href="#">Apparence</a>
<a class="text-slate-500 hover:text-slate-900 pb-2 font-medium text-sm tracking-tight transition-colors" href="#">Profil</a>
<a class="text-slate-500 hover:text-slate-900 pb-2 font-medium text-sm tracking-tight transition-colors" href="#">Données</a>
<a class="text-slate-500 hover:text-slate-900 pb-2 font-medium text-sm tracking-tight transition-colors" href="#">MCP</a>
<a class="text-slate-500 hover:text-slate-900 pb-2 font-medium text-sm tracking-tight transition-colors" href="#">À propos</a>
<div class="ml-auto flex items-center gap-4">
<button class="p-2 text-slate-400 hover:text-slate-600 transition-colors">
<span class="material-symbols-outlined" data-icon="search">search</span>
</button>
<div class="h-8 w-8 rounded-full overflow-hidden border border-slate-200">
<img alt="Avatar User" data-alt="A professional headshot of a young professional in a minimalist setting. Soft natural lighting from the side illuminates a friendly expression. The background is a clean, neutral white wall, matching the high-end minimalist corporate aesthetic of the Memento app. High resolution, crisp details, soft shadows." src="https://lh3.googleusercontent.com/aida-public/AB6AXuBqslXyYOxl-BplqBb3yy4GzYH0Rq5q3ZYVY6ecx8bfM0Z7MUZk9sVN_49ciSeCHu77DeV3L3sGJucBVJ7DwqeJwWCaHpakyV1AyWiNfYyaJUtoYQ5QJ2sIcckq2p9AHdau6O3W9uBzbQFnaqLKn4W0ept-1Uwzs3jfnZNUUaFKEhtMzOWi6oBrVGFeLKzOnF-sPiWNIqSdNoAJ6XCzUjxvgnwzhR9bClX_QkTOC8kTjL2HqhtFrID_Fy22EZ5C4MHRcCv5-sfsiGo"/>
</div>
</div>
</header>
<!-- Main Content Grid -->
<div class="p-lg max-w-6xl mx-auto space-y-8">
<!-- Title Section -->
<section class="flex flex-col gap-1">
<h2 class="font-display-lg text-slate-800">Paramètres</h2>
<p class="font-body-sm text-slate-500">Gérez vos préférences générales et la configuration de votre espace de travail.</p>
</section>
<!-- Bento Grid for Settings Cards -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-lg">
<!-- Card 1: Langue -->
<article class="bg-white rounded-lg border border-slate-200 p-lg shadow-[0_4px_6px_-1px_rgba(0,0,0,0.05)] flex flex-col gap-md">
<div class="flex items-center gap-4">
<div class="w-10 h-10 rounded-full bg-sky-50 flex items-center justify-center text-sky-600">
<span class="material-symbols-outlined" data-icon="language">language</span>
</div>
<div>
<h3 class="font-headline text-slate-800">Langue</h3>
<p class="font-body-sm text-slate-500">Choisissez la langue de l'interface</p>
</div>
</div>
<div class="mt-4 relative">
<select class="w-full h-11 px-4 bg-slate-50 border border-slate-200 rounded-lg text-slate-700 font-body-sm focus:ring-2 focus:ring-sky-600/20 focus:border-sky-600 outline-none appearance-none cursor-pointer">
<option value="auto">Auto</option>
<option value="fr">Français</option>
<option value="en">English</option>
</select>
<div class="absolute right-4 top-1/2 -translate-y-1/2 pointer-events-none text-slate-400">
<span class="material-symbols-outlined" data-icon="expand_more">expand_more</span>
</div>
</div>
</article>
<!-- Card 2: Notifications -->
<article class="bg-white rounded-lg border border-slate-200 p-lg shadow-[0_4px_6px_-1px_rgba(0,0,0,0.05)] flex flex-col gap-md">
<div class="flex items-center gap-4">
<div class="w-10 h-10 rounded-full bg-sky-50 flex items-center justify-center text-sky-600">
<span class="material-symbols-outlined" data-icon="notifications_active">notifications_active</span>
</div>
<div>
<h3 class="font-headline text-slate-800">Notifications</h3>
<p class="font-body-sm text-slate-500">Configurez vos alertes et récapitulatifs</p>
</div>
</div>
<div class="mt-2 space-y-6">
<!-- Toggle Row 1 -->
<div class="flex items-center justify-between">
<div class="flex flex-col">
<span class="font-label-md text-slate-700">Notifications email</span>
<span class="font-body-sm text-slate-500">Recevez un récapitulatif par email</span>
</div>
<button class="relative inline-flex h-6 w-11 items-center rounded-full bg-slate-200 transition-colors focus:outline-none">
<span class="inline-block h-4 w-4 transform rounded-full bg-white transition-transform translate-x-1"></span>
</button>
</div>
<!-- Toggle Row 2 -->
<div class="flex items-center justify-between">
<div class="flex flex-col">
<span class="font-label-md text-slate-700">Notifications bureau</span>
<span class="font-body-sm text-slate-500">Alertes en temps réel</span>
</div>
<button class="relative inline-flex h-6 w-11 items-center rounded-full bg-slate-200 transition-colors focus:outline-none">
<span class="inline-block h-4 w-4 transform rounded-full bg-white transition-transform translate-x-1"></span>
</button>
</div>
</div>
</article>
<!-- Asymmetric Detail: Security Insight (Bonus High-End UI Element) -->
<article class="md:col-span-2 bg-gradient-to-br from-white to-slate-50 rounded-lg border border-slate-200 p-lg flex items-center gap-8 relative overflow-hidden group">
<div class="z-10 flex-1">
<h3 class="font-headline text-slate-800 mb-2">Sécurité du compte</h3>
<p class="font-body-sm text-slate-500 max-w-xl">Votre compte est actuellement sécurisé par authentification standard. Pour une protection maximale de vos carnets, nous recommandons l'activation de la double authentification.</p>
<div class="mt-6 flex gap-4">
<button class="bg-primary text-white font-label-md py-2.5 px-6 rounded-lg hover:bg-primary-container transition-all shadow-sm">
Activer 2FA
</button>
<button class="bg-transparent border border-slate-200 text-slate-600 font-label-md py-2.5 px-6 rounded-lg hover:bg-white hover:border-slate-300 transition-all">
Journal de connexion
</button>
</div>
</div>
<div class="hidden lg:block relative w-48 h-48 opacity-10 group-hover:opacity-20 transition-opacity">
<span class="material-symbols-outlined text-[180px] absolute -bottom-10 -right-10 text-primary" data-icon="security">security</span>
</div>
</article>
</div>
</div>
</main>
</body></html>

BIN
stitch_momento_settings_redesign/screen.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 251 KiB