DorianandClaude Opus 4.6
84ccdc7048
- Overhaul content detection: expand all query/response classifiers with broader AI response patterns (news, music, books, TV, places, websites) - Add Nostr detection (isNostrQuery, isNostrLikeResponse) and App detection (isAppQuery, isAppLikeResponse) classifiers - Add bare domain extraction from AI text (e.g. "check out damus.io") - Add Apps tab with curated database of ~30 Nostr + Bitcoin ecosystem apps (clients, wallets, privacy tools, node software, dev tools) - Create AppsGrid + AppDetail components with search, filtering, how-to - Wire app extraction and Nostr detection into useContentPanel - Add PromptIndex badges for Apps and Nostr tabs - Chat UX: dedicated history button, settings modal (memory + advanced), fix collapsed chat v-if/v-else chain bug - Web search: add Brave Search API as primary backend, expand SearXNG pool - iOS HIG: comprehensive mobile UX rules in cursor rules + CLAUDE.md Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
119 lines
3.9 KiB
Plaintext
119 lines
3.9 KiB
Plaintext
---
|
|
description: Design system foundations - glassmorphism from Archy, colors, typography, spacing
|
|
globs: "**/*.vue,**/*.css,**/*.ts"
|
|
alwaysApply: false
|
|
---
|
|
|
|
# Design System
|
|
|
|
All glass morphism, container, and button patterns are ported from the Archy project and must match exactly.
|
|
|
|
## Glass Morphism Hierarchy (from Archy)
|
|
|
|
### Glass Intensity Levels
|
|
| Class | Background | Blur | Use Case |
|
|
|-------|-----------|------|----------|
|
|
| `.glass` | `rgba(0,0,0,0.35)` | 18px | Sidebar, panels, inputs |
|
|
| `.glass-strong` | `rgba(0,0,0,0.35)` | 24px | Headers, message bubbles (user) |
|
|
| `.glass-card` | `rgba(0,0,0,0.65)` | 18px | Primary cards, modals, main containers |
|
|
| `.gradient-card` | gradient white→black | 18px | Feature cards |
|
|
| `.gradient-card-dark` | gradient black→black | 18px | Dark feature cards |
|
|
|
|
All share: `border: 1px solid rgba(255,255,255,0.18)`, `box-shadow: 0 8px 24px rgba(0,0,0,0.45)`.
|
|
|
|
### Button Hierarchy (from Archy)
|
|
| Class | Purpose | Details |
|
|
|-------|---------|---------|
|
|
| `.glass-button` | Default | 48px height, `rgba(0,0,0,0.6)`, blur 18px |
|
|
| `.glass-button-sm` | Compact | Auto height, smaller padding |
|
|
| Ghost | Icon/text actions | `p-2 rounded-lg text-white/70 hover:text-white hover:bg-white/10` |
|
|
|
|
### Inset Highlight
|
|
Signature Archy top-edge glow on focused/active elements:
|
|
```css
|
|
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22);
|
|
```
|
|
|
|
### Gradient Border (CSS mask technique)
|
|
For premium-feel borders on selected cards and active nav:
|
|
```css
|
|
::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: 0;
|
|
border-radius: inherit;
|
|
padding: 2px;
|
|
background: linear-gradient(135deg, rgba(255, 255, 255, 0.3), transparent);
|
|
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
|
|
-webkit-mask-composite: xor;
|
|
mask-composite: exclude;
|
|
pointer-events: none;
|
|
}
|
|
```
|
|
|
|
## Design Tokens
|
|
|
|
### Color Palette
|
|
Semantic color tokens defined by purpose:
|
|
- `primary` — main brand actions (#606060)
|
|
- `accent` — highlight, Bitcoin orange (#F7931A)
|
|
- `success` — positive states (#10B981)
|
|
- `error` — negative states (#EF4444)
|
|
- `warning` — caution states (#F59E0B)
|
|
- `info` — informational (#3B82F6)
|
|
|
|
### Glass Tokens (from Archy Tailwind config)
|
|
- `glass-dark`: `rgba(0, 0, 0, 0.35)`
|
|
- `glass-darker`: `rgba(0, 0, 0, 0.6)`
|
|
- `glass-border`: `rgba(255, 255, 255, 0.18)`
|
|
- `glass-highlight`: `rgba(255, 255, 255, 0.22)`
|
|
|
|
### Shadows
|
|
- `shadow-glass`: `0 8px 24px rgba(0, 0, 0, 0.45)`
|
|
- `shadow-glass-sm`: `0 6px 18px rgba(0, 0, 0, 0.35)`
|
|
- `shadow-glass-inset`: `inset 0 1px 0 rgba(255, 255, 255, 0.22)`
|
|
|
|
### Typography
|
|
- Body font: Inter, system-ui (AIUI default)
|
|
- Mono font: Menlo, Monaco, Courier New
|
|
- Text opacity scale: `text-white/25` (placeholders), `text-white/40` (muted), `text-white/60` (secondary), `text-white/70` (interactive default), `text-white/80` (body), `text-white/90` (emphasis), `text-white/96` (headings), `text-white` (active/selected)
|
|
|
|
### Spacing
|
|
4px grid: `4, 8, 12, 16, 20, 24, 28, 32` px.
|
|
|
|
### Border Radius
|
|
- `rounded-lg` (8px) — buttons, nav items, inputs
|
|
- `rounded-xl` (12px) — toasts, small cards
|
|
- `rounded-2xl` (16px) — main cards, modals
|
|
- `rounded-3xl` (24px) — bottom sheets
|
|
- `rounded-full` — pills, avatars, FABs
|
|
- `1rem` (16px) — `.glass-card` default
|
|
|
|
## Component Patterns
|
|
|
|
### Cards
|
|
Use `.glass-card` with additional padding:
|
|
```html
|
|
<div class="glass-card p-6">Content</div>
|
|
```
|
|
|
|
### Modals
|
|
```html
|
|
<div class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm">
|
|
<div class="glass-card p-6 max-w-md w-full">...</div>
|
|
</div>
|
|
```
|
|
|
|
### Icons
|
|
- SVG, using `currentColor`
|
|
- Sizes: 16px, 20px, 24px, 32px
|
|
- Icon-only buttons: `p-2 rounded-lg` (reaches 44px touch target with 24px icon)
|
|
- Must have `aria-label`
|
|
|
|
## Theme Architecture
|
|
- Base background: `#0a0a0a` (near-black)
|
|
- No separator borders between sidebar/header/content
|
|
- Header, sidebar, root share same visual weight
|
|
- CSS-based themes with reactive Vue state
|
|
- `localStorage` persistence
|