From e5c87a8ee66fc0018b2cfb583d50c19a90fb231c Mon Sep 17 00:00:00 2001 From: asepharyana Date: Sun, 5 Jul 2026 03:53:56 +0700 Subject: [PATCH] Refactor image grid empty state, enhance header styles, and update ChannelRef struct - Changed the empty state message in ImageGrid to use a dedicated class for styling. - Adjusted padding and border-radius for the "Guild Watcher" label in the header for better aesthetics. - Introduced a new class for the status indicator dot and linked its visibility to the connection state. - Updated ChannelRef struct to include optional fields for thread_id and thread_name with appropriate serialization settings. --- services/frontend/frontend/src/app.css | 611 ++++++++++++------ .../messages/components/image_grid.rs | 2 +- .../frontend/frontend/src/layout/header.rs | 6 +- services/frontend/shared-types/src/message.rs | 4 + 4 files changed, 405 insertions(+), 218 deletions(-) diff --git a/services/frontend/frontend/src/app.css b/services/frontend/frontend/src/app.css index 9107951..443fe8d 100644 --- a/services/frontend/frontend/src/app.css +++ b/services/frontend/frontend/src/app.css @@ -1,60 +1,79 @@ +/* ── IMPHNEN Design System ────────────────────────────── * + * Brand: Approachable Modernism * + * Primary: #23a1eb | Secondary: #1877f2 | Tertiary: #5865f2 * + * Font: Poppins (300–800) * + * Rounded: sm=4px, md=8px, lg=16px, xl=24px, full=9999px * + * Spacing unit: 8px * + * ─────────────────────────────────────────────────────── */ + /* ── Design Tokens ────────────────────────────────────── */ :root { - /* Brand */ - --color-primary: #6366f1; - --color-primary-hover: #818cf8; - --color-primary-muted: rgba(99, 102, 241, 0.12); - --color-secondary: #a78bfa; - --color-accent: #22d3ee; + /* Brand — Primary */ + --color-primary: #23a1eb; + --color-primary-hover: #1a8fd9; + --color-primary-active: #0877c1; + --color-primary-muted: rgba(35, 161, 235, 0.12); - /* Surfaces — dark-first: these are the defaults */ - --surface-base: #0b0d15; - --surface-raised: #131620; - --surface-overlay: #1a1e2d; - --surface-border: rgba(255, 255, 255, 0.06); - --surface-hover: rgba(255, 255, 255, 0.04); - --surface-glass: rgba(19, 22, 32, 0.72); + /* Brand — Secondary (Facebook) */ + --color-secondary: #1877f2; + --color-secondary-muted: rgba(24, 119, 242, 0.12); + + /* Brand — Tertiary (Discord) */ + --color-tertiary: #5865f2; + --color-accent: #5865f2; + --color-accent-muted: rgba(88, 101, 242, 0.12); + + /* Surfaces — light-dominant (spec: clean, bright) */ + --surface-base: #ffffff; + --surface-raised: #ffffff; + --surface-overlay: #f5f5f5; + --surface-container-low: #f0f0f0; + --surface-container: #e8e8e8; + --surface-border: rgba(0, 0, 0, 0.08); + --surface-hover: rgba(0, 0, 0, 0.03); + --surface-glass: rgba(255, 255, 255, 0.85); /* Text */ - --text-primary: #e8edf5; - --text-secondary: #8b95a6; - --text-tertiary: #5b6577; - --text-inverse: #0b0d15; + --text-primary: #1a1a1a; + --text-secondary: #666666; + --text-tertiary: #999999; + --text-inverse: #ffffff; /* Semantic */ --color-success: #10b981; --color-warning: #f59e0b; - --color-error: #ef4444; - --color-info: #3b82f6; - --color-destructive: #ef4444; + --color-error: #e4405f; + --color-info: #23a1eb; + --color-destructive: #e4405f; /* AI status colors */ - --color-ai-flagged: #ef4444; + --color-ai-flagged: #e4405f; --color-ai-clean: #10b981; --color-ai-warn: #f59e0b; - --color-ai-pending: #5b6577; - --color-ai-processing: #6366f1; + --color-ai-pending: #999999; + --color-ai-processing: #23a1eb; --color-ai-error: #dc2626; --color-ai-deleted: #6b7280; - /* Shadows */ - --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3); - --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3); - --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.35); - --shadow-xl: 0 12px 40px rgba(0, 0, 0, 0.4); + /* Shadows — spec elevation stack */ + --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06); + --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08); + --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.12); + --shadow-xl: 0 16px 40px rgba(0, 0, 0, 0.12); /* Glows */ - --glow-primary: 0 0 24px rgba(99, 102, 241, 0.25); - --glow-error: 0 0 24px rgba(239, 68, 68, 0.2); + --glow-primary: 0 0 20px rgba(35, 161, 235, 0.15); + --glow-error: 0 0 20px rgba(228, 64, 95, 0.12); + --glow-success: 0 0 20px rgba(16, 185, 129, 0.12); - /* Radii */ - --radius-sm: 6px; + /* Radii — spec: sm=0.25rem, DEFAULT=0.5rem, md=0.75rem, lg=1rem, xl=1.5rem */ + --radius-sm: 4px; --radius-md: 8px; - --radius-lg: 12px; - --radius-xl: 16px; + --radius-lg: 16px; + --radius-xl: 24px; --radius-full: 9999px; - /* Spacing scale (4px base) */ + /* Spacing — 8px unit scale (spec: unit=8px, xs=4px, sm=12px, md=24px, lg=40px, xl=64px) */ --px: 1px; --space-0: 0px; --space-1: 4px; @@ -73,7 +92,7 @@ --sidebar-collapsed-width: 64px; --header-height: 56px; - /* Transitions */ + /* Transitions — spec: 150ms cubic-bezier(0.4, 0, 0.2, 1) */ --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1); --transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1); --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1); @@ -86,26 +105,49 @@ --z-toast: 70; } -[data-theme="light"] { - --surface-base: #f8fafc; - --surface-raised: #ffffff; - --surface-overlay: #f1f5f9; - --surface-border: rgba(0, 0, 0, 0.08); - --surface-hover: rgba(0, 0, 0, 0.03); - --surface-glass: rgba(248, 250, 252, 0.82); +/* ── Dark Theme ─────────────────────────────────────────── */ +[data-theme="dark"] { + --color-primary: #54a2ff; + --color-primary-hover: #7ab7ff; + --color-primary-active: #3d8eff; + --color-primary-muted: rgba(84, 162, 255, 0.15); - --text-primary: #0f172a; - --text-secondary: #475569; - --text-tertiary: #94a3b8; - --text-inverse: #ffffff; + --color-secondary: #4a8cff; + --color-secondary-muted: rgba(74, 140, 255, 0.15); - --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.04); - --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06); - --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.08); - --shadow-xl: 0 12px 40px rgba(0, 0, 0, 0.1); + --color-tertiary: #7b86f5; + --color-accent: #7b86f5; + --color-accent-muted: rgba(123, 134, 245, 0.15); - --glow-primary: 0 0 24px rgba(99, 102, 241, 0.12); - --glow-error: 0 0 24px rgba(239, 68, 68, 0.1); + /* Surfaces — dark inversion */ + --surface-base: #0d1117; + --surface-raised: #161b22; + --surface-overlay: #1c2333; + --surface-container-low: #21283a; + --surface-container: #2d3548; + --surface-border: rgba(255, 255, 255, 0.06); + --surface-hover: rgba(255, 255, 255, 0.04); + --surface-glass: rgba(13, 17, 23, 0.82); + + /* Text */ + --text-primary: #e6edf5; + --text-secondary: #8b95a6; + --text-tertiary: #5b6577; + --text-inverse: #0d1117; + + /* Shadows — deeper for dark */ + --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); + --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.35); + --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.4); + --shadow-xl: 0 16px 40px rgba(0, 0, 0, 0.45); + + --glow-primary: 0 0 24px rgba(84, 162, 255, 0.2); + --glow-error: 0 0 24px rgba(228, 64, 95, 0.18); + --glow-success: 0 0 24px rgba(16, 185, 129, 0.18); + + /* Errors stay vibrant in dark */ + --color-error: #f05273; + --color-destructive: #f05273; } /* ── Base ─────────────────────────────────────────────── */ @@ -122,7 +164,7 @@ html { } body { - font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; + font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; line-height: 1.6; min-height: 100vh; overflow-x: hidden; @@ -139,7 +181,7 @@ svg { display: inline-block; vertical-align: middle; } ::-webkit-scrollbar-thumb { background: var(--color-primary); border-radius: var(--radius-full); } /* ================================================================ - UTILITY CLASSES (Tailwind-compatible naming — kept from migration) + UTILITY CLASSES (Tailwind-compatible naming) ================================================================ */ /* Display */ @@ -290,10 +332,12 @@ svg { display: inline-block; vertical-align: middle; } .border-r { border-right: var(--px) solid var(--surface-border); } .border-l-3 { border-left-width: 3px; } .border-destructive { border-color: var(--color-error); } -.border-border\/30 { border-color: rgba(255,255,255,0.03); } +.border-border\/30 { border-color: rgba(0, 0, 0, 0.03); } .border-border { border-color: var(--surface-border); } .border-primary { border-color: var(--color-primary); } +[data-theme="dark"] .border-border\/30 { border-color: rgba(255, 255, 255, 0.03); } + /* Border radius */ .rounded-sm { border-radius: var(--radius-sm); } .rounded { border-radius: var(--radius-md); } @@ -305,7 +349,8 @@ svg { display: inline-block; vertical-align: middle; } /* Ring */ .ring-2 { box-shadow: 0 0 0 2px var(--surface-base), 0 0 0 4px var(--color-primary); } -.ring-primary\/30 { box-shadow: 0 0 0 2px var(--surface-base), 0 0 0 4px rgba(99, 102, 241, 0.3); } +.ring-primary\/30 { box-shadow: 0 0 0 2px var(--surface-base), 0 0 0 4px rgba(35, 161, 235, 0.3); } +[data-theme="dark"] .ring-primary\/30 { box-shadow: 0 0 0 2px var(--surface-base), 0 0 0 4px rgba(84, 162, 255, 0.3); } /* Text alignment */ .text-left { text-align: left; } @@ -316,12 +361,12 @@ svg { display: inline-block; vertical-align: middle; } .break-words { word-break: break-word; } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } -/* Text size */ +/* Text size — using Poppins scale */ .text-\[10px\] { font-size: 10px; } .text-xs { font-size: 0.75rem; line-height: 1rem; } .text-sm { font-size: 0.875rem; line-height: 1.25rem; } .text-base { font-size: 1rem; line-height: 1.5rem; } -.text-lg { font-size: 1.125rem; line-height: 1.5rem; } +.text-lg { font-size: 1.125rem; line-height: 1.75rem; } .text-xl { font-size: 1.25rem; line-height: 1.75rem; } .text-2xl { font-size: 1.5rem; line-height: 2rem; } .text-3xl { font-size: 1.875rem; line-height: 2.25rem; } @@ -349,22 +394,29 @@ svg { display: inline-block; vertical-align: middle; } .text-warning { color: var(--color-warning); } .text-inverse { color: var(--text-inverse); } -/* Backgrounds */ +/* Backgrounds — updated for light-first */ .bg-surface { background: var(--surface-raised); } -.bg-surface\/50 { background: rgba(19, 22, 32, 0.5); } -.bg-surface\/60 { background: rgba(19, 22, 32, 0.6); } -.bg-surface\/80 { background: rgba(19, 22, 32, 0.8); } +.bg-surface\/50 { background: rgba(255, 255, 255, 0.5); } +.bg-surface\/60 { background: rgba(255, 255, 255, 0.6); } +.bg-surface\/80 { background: rgba(255, 255, 255, 0.8); } .bg-overlay { background: var(--surface-overlay); } .bg-base { background: var(--surface-base); } .bg-primary { background: var(--color-primary); } -.bg-primary\/5 { background: rgba(99, 102, 241, 0.05); } -.bg-primary\/10 { background: rgba(99, 102, 241, 0.1); } +.bg-primary\/5 { background: rgba(35, 161, 235, 0.05); } +.bg-primary\/10 { background: rgba(35, 161, 235, 0.1); } .bg-success\/5 { background: rgba(16, 185, 129, 0.05); } .bg-warning\/5 { background: rgba(245, 158, 11, 0.05); } -.bg-error\/5 { background: rgba(239, 68, 68, 0.05); } +.bg-error\/5 { background: rgba(228, 64, 95, 0.05); } .bg-black { background: #000; } .bg-transparent { background: transparent; } +[data-theme="dark"] .bg-surface\/50 { background: rgba(22, 27, 34, 0.5); } +[data-theme="dark"] .bg-surface\/60 { background: rgba(22, 27, 34, 0.6); } +[data-theme="dark"] .bg-surface\/80 { background: rgba(22, 27, 34, 0.8); } +[data-theme="dark"] .bg-primary\/5 { background: rgba(84, 162, 255, 0.05); } +[data-theme="dark"] .bg-primary\/10 { background: rgba(84, 162, 255, 0.1); } +[data-theme="dark"] .bg-error\/5 { background: rgba(240, 82, 115, 0.05); } + /* Opacity */ .opacity-0 { opacity: 0; } .opacity-50 { opacity: 0.5; } @@ -399,77 +451,122 @@ svg { display: inline-block; vertical-align: middle; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* ================================================================ - BUTTON + BUTTON — spec: button-primary / button-secondary / etc. + padding: 12px 24px | height: 44px | rounded-lg (16px) + font: label-md (14px/600/0.02em) | transition: 150ms ================================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); - padding: 0.5rem 1rem; - border: var(--px) solid transparent; - border-radius: var(--radius-md); + padding: 12px 24px; + height: 44px; + border: 1px solid transparent; + border-radius: var(--radius-lg); font-family: inherit; - font-size: 0.875rem; - font-weight: 500; - line-height: 1.25rem; + font-size: 14px; + font-weight: 600; + line-height: 20px; + letter-spacing: 0.02em; cursor: pointer; transition: all var(--transition-fast); white-space: nowrap; user-select: none; + -webkit-tap-highlight-color: transparent; } +.btn:active:not(:disabled) { transform: scale(0.97); } .btn:disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; } + +/* Primary — spec: bg #23a1eb, text white */ .btn-primary { background: var(--color-primary); color: white; } .btn-primary:hover:not(:disabled) { background: var(--color-primary-hover); box-shadow: var(--glow-primary); } -.btn-secondary { background: var(--surface-overlay); color: var(--text-primary); border-color: var(--surface-border); } -.btn-secondary:hover:not(:disabled) { background: var(--surface-overlay); border-color: var(--color-primary); } +.btn-primary:active:not(:disabled) { background: var(--color-primary-active); } + +/* Secondary — spec: transparent bg, text primary, border outline */ +.btn-secondary { background: transparent; color: var(--color-primary); border-color: #cccccc; } +.btn-secondary:hover:not(:disabled) { background: var(--surface-container-low); border-color: var(--color-primary); color: var(--color-primary); } +.btn-secondary:active:not(:disabled) { background: var(--surface-container); } + +/* Destructive */ .btn-destructive { background: var(--color-error); color: white; } -.btn-destructive:hover:not(:disabled) { background: #dc2626; box-shadow: var(--glow-error); } +.btn-destructive:hover:not(:disabled) { background: #d63856; box-shadow: var(--glow-error); } +.btn-destructive:active:not(:disabled) { background: #c22f4d; } + +/* Outline */ .btn-outline { background: transparent; border-color: var(--surface-border); color: var(--text-secondary); } -.btn-outline:hover:not(:disabled) { background: var(--surface-hover); border-color: var(--color-primary); color: var(--text-primary); } -.btn-ghost { background: transparent; color: var(--text-secondary); border: none; } +.btn-outline:hover:not(:disabled) { background: var(--surface-hover); border-color: var(--color-primary); color: var(--color-primary); } + +/* Ghost */ +.btn-ghost { background: transparent; color: var(--text-secondary); border: none; height: auto; padding: 0.5rem 0.75rem; } .btn-ghost:hover:not(:disabled) { background: var(--surface-hover); color: var(--text-primary); } -.btn-sm { padding: 0.25rem 0.625rem; font-size: 0.75rem; border-radius: var(--radius-sm); } -.btn-lg { padding: 0.75rem 1.5rem; font-size: 1rem; } + +/* Tertiary — like ghost but with primary color text */ +.btn-tertiary { background: transparent; color: var(--color-primary); border: none; height: auto; padding: 0.5rem 0.75rem; } +.btn-tertiary:hover:not(:disabled) { background: var(--color-primary-muted); } + +/* Link — inline link style */ +.btn-link { background: transparent; color: var(--color-primary); border: none; height: auto; padding: 0; font-weight: 500; letter-spacing: normal; } +.btn-link:hover:not(:disabled) { text-decoration: underline; } + +/* Sizes */ +.btn-sm { padding: 8px 16px; height: 36px; font-size: 12px; line-height: 16px; border-radius: var(--radius-md); letter-spacing: 0.03em; } +.btn-lg { padding: 14px 28px; height: 48px; font-size: 16px; border-radius: var(--radius-lg); } + +/* Icon buttons */ +.btn-icon { width: 44px; height: 44px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-lg); font-size: 1.25rem; } +.btn-icon-sm { width: 36px; height: 36px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--radius-md); font-size: 1rem; } /* ================================================================ - BADGE + BADGE — spec: primary-container bg, on-primary-container text + rounded-full | padding: 4px 12px | label-sm (12px/500/0.03em) | inline-flex ================================================================ */ .badge { display: inline-flex; align-items: center; - padding: 0.0625rem 0.5rem; + padding: 4px 12px; border-radius: var(--radius-full); - font-size: 0.6875rem; + font-size: 12px; font-weight: 500; - line-height: 1.25rem; - background: var(--surface-overlay); + line-height: 16px; + letter-spacing: 0.03em; + background: var(--surface-container); color: var(--text-secondary); - border: var(--px) solid transparent; + border: none; } -.badge-primary { background: rgba(99, 102, 241, 0.12); color: var(--color-primary); } -.badge-success { background: rgba(16, 185, 129, 0.12); color: var(--color-success); } -.badge-warning { background: rgba(245, 158, 11, 0.12); color: var(--color-warning); } -.badge-destructive { background: rgba(239, 68, 68, 0.12); color: var(--color-error); } -.badge-outline { background: transparent; border-color: var(--surface-border); color: var(--text-tertiary); } -.badge-info { background: rgba(59, 130, 246, 0.12); color: var(--color-info); } -.badge-secondary { background: var(--surface-overlay); color: var(--text-secondary); } +.badge-primary { background: rgba(35, 161, 235, 0.12); color: #0d4a7a; } +.badge-success { background: rgba(16, 185, 129, 0.12); color: #065f46; } +.badge-warning { background: rgba(245, 158, 11, 0.12); color: #92400e; } +.badge-destructive { background: rgba(228, 64, 95, 0.12); color: #7a1a2e; } +.badge-outline { background: transparent; border: 1px solid var(--surface-border); color: var(--text-tertiary); } +.badge-info { background: rgba(35, 161, 235, 0.12); color: #0d4a7a; } +.badge-secondary { background: rgba(24, 119, 242, 0.12); color: #003d99; } + +[data-theme="dark"] .badge-primary { background: rgba(84, 162, 255, 0.15); color: #bce1fb; } +[data-theme="dark"] .badge-success { background: rgba(16, 185, 129, 0.15); color: #a7f3d0; } +[data-theme="dark"] .badge-warning { background: rgba(245, 158, 11, 0.15); color: #fde68a; } +[data-theme="dark"] .badge-destructive { background: rgba(240, 82, 115, 0.15); color: #fecdd3; } +[data-theme="dark"] .badge-info { background: rgba(84, 162, 255, 0.15); color: #bce1fb; } +[data-theme="dark"] .badge-secondary { background: rgba(74, 140, 255, 0.15); color: #cce0ff; } /* ================================================================ - CARD + CARD — spec: rounded-xl (24px) | padding md (24px) | border + bg surface | shadow-sm | transition ================================================================ */ .card { background: var(--surface-raised); - border: var(--px) solid var(--surface-border); - border-radius: var(--radius-lg); + border: 1px solid #cccccc; + border-radius: var(--radius-xl); overflow: hidden; - transition: box-shadow var(--transition-fast); + box-shadow: var(--shadow-sm); + transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1); } .card:hover { + border-color: var(--color-primary); box-shadow: var(--shadow-md); } .card-header { - padding: var(--space-4) var(--space-5); + padding: var(--space-4) var(--space-6); border-bottom: var(--px) solid var(--surface-border); } .card-title { @@ -482,61 +579,65 @@ svg { display: inline-block; vertical-align: middle; } color: var(--text-secondary); margin-top: var(--space-1); } -.card-content { padding: var(--space-5); } +.card-content { padding: var(--space-6); } .card-footer { - padding: var(--space-4) var(--space-5); + padding: var(--space-4) var(--space-6); border-top: var(--px) solid var(--surface-border); } /* ================================================================ - INPUT + INPUT FIELD — spec: bg surface-container-low, border outline-variant + rounded DEFAULT (8px) | padding sm (12px) | body-md (16px/400/0.01em) + focus: border primary + ring ================================================================ */ .input { display: block; width: 100%; - padding: 0.5rem 0.75rem; - background: var(--surface-overlay); - border: var(--px) solid var(--surface-border); + padding: var(--space-3); + background: var(--surface-container-low); + border: 1px solid #cccccc; border-radius: var(--radius-md); color: var(--text-primary); font-family: inherit; - font-size: 0.875rem; - line-height: 1.25rem; - transition: all var(--transition-fast); + font-size: 16px; + font-weight: 400; + line-height: 24px; + letter-spacing: 0.01em; + transition: border-color var(--transition-fast); outline: none; } .input::placeholder { color: var(--text-tertiary); } -.input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15); } -.input[aria-invalid="true"], .input-error { border-color: var(--color-error); box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15); } +.input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(35, 161, 235, 0.1); } +.input[aria-invalid="true"], .input-error { border-color: var(--color-error); box-shadow: 0 0 0 3px rgba(228, 64, 95, 0.1); } -/* Select */ +/* Select dropdown */ .select { display: block; width: 100%; - padding: 0.5rem 2rem 0.5rem 0.75rem; - background: var(--surface-overlay); - border: var(--px) solid var(--surface-border); + padding: var(--space-3) 2rem var(--space-3) var(--space-3); + background: var(--surface-container-low); + border: 1px solid #cccccc; border-radius: var(--radius-md); color: var(--text-primary); font-family: inherit; font-size: 0.875rem; cursor: pointer; - transition: all var(--transition-fast); + transition: border-color var(--transition-fast); outline: none; appearance: none; - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235b6577' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999999' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); background-repeat: no-repeat; - background-position: right 0.5rem center; + background-position: right 0.75rem center; } -.select:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15); } +.select:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(35, 161, 235, 0.1); } /* ================================================================ SKELETON ================================================================ */ .skeleton { - background: linear-gradient(90deg, var(--surface-overlay) 25%, var(--surface-hover) 50%, var(--surface-overlay) 75%); + background: linear-gradient(110deg, var(--surface-container-low) 30%, var(--surface-hover) 50%, var(--surface-container-low) 70%); background-size: 200% 100%; - animation: shimmer 1.5s ease-in-out infinite; + animation: shimmer 1.8s ease-in-out infinite; border-radius: var(--radius-md); } .skeleton-circular { border-radius: 50%; } @@ -551,19 +652,19 @@ svg { display: inline-block; vertical-align: middle; } .tabs { display: flex; flex-direction: column; } .tab-list { display: flex; - gap: var(--space-1); - padding: var(--space-1); - background: var(--surface-overlay); + gap: 2px; + padding: 4px; + background: var(--surface-container-low); border-radius: var(--radius-lg); } .tab-trigger { - padding: 0.375rem 0.875rem; + padding: 8px 16px; background: transparent; border: none; border-radius: var(--radius-md); color: var(--text-secondary); font-family: inherit; - font-size: 0.8125rem; + font-size: 14px; font-weight: 500; cursor: pointer; transition: all var(--transition-fast); @@ -572,6 +673,7 @@ svg { display: inline-block; vertical-align: middle; } .tab-trigger.active, .tab-trigger[aria-selected="true"] { background: var(--surface-raised); color: var(--text-primary); + font-weight: 600; box-shadow: var(--shadow-sm); } .tab-content { padding-top: var(--space-4); } @@ -596,7 +698,7 @@ svg { display: inline-block; vertical-align: middle; } align-items: center; justify-content: space-between; gap: var(--space-4); - padding: 0 var(--space-5); + padding: 0 var(--space-6); background: var(--surface-glass); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); @@ -605,17 +707,21 @@ svg { display: inline-block; vertical-align: middle; } z-index: var(--z-header); } -.app-brand { display: flex; align-items: baseline; gap: var(--space-3); } +.app-brand { display: flex; align-items: center; gap: var(--space-3); } .app-brand-mark { - font-weight: 800; + font-weight: 700; font-size: 1.125rem; - background: linear-gradient(135deg, var(--color-primary), var(--color-accent)); - -webkit-background-clip: text; - -webkit-text-fill-color: transparent; - background-clip: text; + color: var(--color-primary); letter-spacing: -0.02em; } -.app-brand-subtitle { color: var(--text-tertiary); font-size: 0.8125rem; } +.app-brand-subtitle { + color: var(--text-tertiary); + font-size: 0.75rem; + font-weight: 500; + padding: 2px 8px; + background: var(--surface-container-low); + border-radius: var(--radius-full); +} .app-main { flex: 1; @@ -638,54 +744,78 @@ svg { display: inline-block; vertical-align: middle; } min-width: 0; overflow-y: auto; padding: var(--space-6); + animation: content-enter 400ms cubic-bezier(0.16, 1, 0.3, 1) both; } +/* Child panels inside app-content get staggered entrance */ +.app-content > * { animation: card-in 400ms cubic-bezier(0.16, 1, 0.3, 1) both; } +.app-content > :nth-child(1) { animation-delay: 30ms; } +.app-content > :nth-child(2) { animation-delay: 60ms; } +.app-content > :nth-child(3) { animation-delay: 90ms; } +/* ── Theme Toggle (spec: ghost button style) ───── */ .theme-toggle { - width: 2.25rem; - height: 2.25rem; - border: var(--px) solid var(--surface-border); + width: 44px; + height: 44px; + border: 1px solid #cccccc; border-radius: var(--radius-lg); - background: var(--surface-overlay); + background: transparent; color: var(--text-tertiary); cursor: pointer; - font-size: 1rem; + font-size: 1.25rem; transition: all var(--transition-fast); + -webkit-tap-highlight-color: transparent; } .theme-toggle:hover { color: var(--color-primary); border-color: var(--color-primary); box-shadow: var(--glow-primary); } +.theme-toggle:active { transform: scale(0.92); } -/* ── Sidebar Button ───────────────────────────── */ +/* ── Sidebar Navigation (spec: nav-link style) ─── */ .sidebar-btn { display: flex; align-items: center; width: 100%; justify-content: flex-start; - padding: 0.5rem 1rem; + padding: 8px 12px; border: none; border-radius: var(--radius-md); background: transparent; - color: var(--text-secondary); + color: var(--text-primary); font-family: inherit; - font-size: 0.875rem; + font-size: 14px; font-weight: 500; + line-height: 20px; + letter-spacing: 0.02em; cursor: pointer; transition: all var(--transition-fast); + position: relative; } .sidebar-btn:hover { background: var(--surface-hover); - color: var(--text-primary); + color: var(--color-primary); } .sidebar-btn.is-active { - background: var(--surface-overlay); + background: var(--surface-container-low); color: var(--color-primary); font-weight: 600; } +.sidebar-btn.is-active::after { + content: ''; + position: absolute; + left: 0; + top: 50%; + transform: translateY(-50%); + width: 3px; + height: 20px; + border-radius: var(--radius-full); + background: var(--color-primary); + animation: indicator-grow 200ms cubic-bezier(0.16, 1, 0.3, 1) both; +} /* ── Status Badge ─────────────────────────────── */ .status-badge { display: inline-flex; align-items: center; gap: var(--space-1); - padding: 0.125rem 0.5rem; + padding: 2px 8px; border-radius: var(--radius-full); font-size: 0.6875rem; font-weight: 500; @@ -697,21 +827,24 @@ svg { display: inline-block; vertical-align: middle; } border-radius: 50%; flex-shrink: 0; } -.status-badge-flagged { background: rgba(239, 68, 68, 0.1); color: var(--color-ai-flagged); } -.status-badge-flagged::before { background: var(--color-ai-flagged); box-shadow: 0 0 6px rgba(239, 68, 68, 0.5); } +.status-badge-flagged { background: rgba(228, 64, 95, 0.1); color: var(--color-ai-flagged); } +.status-badge-flagged::before { background: var(--color-ai-flagged); box-shadow: 0 0 6px rgba(228, 64, 95, 0.5); } .status-badge-clean { background: rgba(16, 185, 129, 0.1); color: var(--color-ai-clean); } .status-badge-clean::before { background: var(--color-ai-clean); } .status-badge-warn { background: rgba(245, 158, 11, 0.1); color: var(--color-ai-warn); } .status-badge-warn::before { background: var(--color-ai-warn); } -.status-badge-pending { background: rgba(91, 101, 119, 0.1); color: var(--color-ai-pending); } +.status-badge-pending { background: rgba(153, 153, 153, 0.1); color: var(--color-ai-pending); } .status-badge-pending::before { background: var(--color-ai-pending); } -.status-badge-processing { background: rgba(99, 102, 241, 0.1); color: var(--color-ai-processing); } +.status-badge-processing { background: rgba(35, 161, 235, 0.1); color: var(--color-ai-processing); } .status-badge-processing::before { background: var(--color-ai-processing); animation: pulse-dot 1.5s ease-in-out infinite; } .status-badge-error { background: rgba(220, 38, 38, 0.1); color: var(--color-ai-error); } .status-badge-error::before { background: var(--color-ai-error); } @keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } } +[data-theme="dark"] .status-badge-pending { background: rgba(91, 101, 119, 0.15); } +[data-theme="dark"] .status-badge-processing { background: rgba(84, 162, 255, 0.15); } + /* ================================================================ MESSAGES PANEL ================================================================ */ @@ -747,7 +880,8 @@ svg { display: inline-block; vertical-align: middle; } transition: all var(--transition-fast); font-family: inherit; } -.filter-chip:hover { color: var(--text-secondary); background: var(--surface-overlay); } +.filter-chip:hover { color: var(--text-secondary); background: var(--surface-container-low); } +.filter-chip:active { transform: scale(0.95); } .filter-chip.active { background: var(--color-primary); color: white; } .active { background: var(--color-primary); color: white; } @@ -760,7 +894,7 @@ svg { display: inline-block; vertical-align: middle; } transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } .message-card:hover { - border-color: rgba(99, 102, 241, 0.15); + border-color: rgba(35, 161, 235, 0.15); box-shadow: var(--shadow-sm); } @@ -823,7 +957,7 @@ svg { display: inline-block; vertical-align: middle; } .toast-success { border-left: 3px solid var(--color-success); } .toast-error { border-left: 3px solid var(--color-error); } .toast-warning { border-left: 3px solid var(--color-warning); } -.toast-info { border-left: 3px solid var(--color-info); } +.toast-info { border-left: 3px solid var(--color-primary); } .toast-close { margin-left: auto; background: none; border: none; color: var(--text-tertiary); cursor: pointer; padding: 0.25rem; } /* ================================================================ @@ -832,7 +966,7 @@ svg { display: inline-block; vertical-align: middle; } .modal-overlay { position: fixed; inset: 0; - background: rgba(0, 0, 0, 0.6); + background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(4px); display: flex; align-items: center; @@ -898,12 +1032,50 @@ svg { display: inline-block; vertical-align: middle; } @keyframes scale-in { from { opacity: 0; transform: scale(0.95); } to { opacity: 1; transform: scale(1); } } @keyframes slide-in-right { from { opacity: 0; transform: translateX(100%); } to { opacity: 1; transform: translateX(0); } } @keyframes bar-pulse { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(0.6); } } -@keyframes glow-pulse { 0%, 100% { box-shadow: var(--glow-primary); } 50% { box-shadow: 0 0 30px rgba(99, 102, 241, 0.4); } } +@keyframes glow-pulse { 0%, 100% { box-shadow: var(--glow-primary); } 50% { box-shadow: 0 0 30px rgba(35, 161, 235, 0.3); } } .animate-fade-in { animation: fade-in var(--transition-normal) ease-out; } .animate-fade-in-up { animation: fade-in-up var(--transition-normal) ease-out; } .animate-scale-in { animation: scale-in var(--transition-normal) ease-out; } .animate-slide-in-right { animation: slide-in-right var(--transition-normal) ease-out; } +.animate-content-enter { animation: content-enter 400ms cubic-bezier(0.16, 1, 0.3, 1) both; } +.animate-float { animation: float 3s ease-in-out infinite; } +.animate-stagger-1 { animation-delay: 50ms; } +.animate-stagger-2 { animation-delay: 100ms; } +.animate-stagger-3 { animation-delay: 150ms; } +.animate-stagger-4 { animation-delay: 200ms; } + +@keyframes content-enter { + from { opacity: 0; transform: translateY(12px); } + to { opacity: 1; transform: translateY(0); } +} +@keyframes float { + 0%, 100% { transform: translateY(0); } + 50% { transform: translateY(-6px); } +} +@keyframes indicator-grow { + from { height: 0; opacity: 0; } + to { height: 20px; opacity: 1; } +} +@keyframes pulse-connecting { + 0%, 100% { opacity: 1; transform: scale(1); } + 50% { opacity: 0.4; transform: scale(0.8); } +} +@keyframes rotate-in { + from { transform: rotate(-90deg); opacity: 0; } + to { transform: rotate(0); opacity: 1; } +} +@keyframes orb-drift { + 0% { transform: translate(0, 0); } + 25% { transform: translate(30px, -20px); } + 50% { transform: translate(-20px, 10px); } + 75% { transform: translate(10px, -30px); } + 100% { transform: translate(0, 0); } +} +@keyframes card-in { + from { opacity: 0; transform: translateY(16px); } + to { opacity: 1; transform: translateY(0); } +} /* Reduced motion */ @media (prefers-reduced-motion: reduce) { @@ -918,10 +1090,10 @@ svg { display: inline-block; vertical-align: middle; } PARTICLE BACKGROUND ================================================================ */ .particle-bg { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; } -.particle-orb { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.08; } -.particle-orb:nth-child(1) { width: 500px; height: 500px; top: -100px; right: -100px; background: var(--color-primary); } -.particle-orb:nth-child(2) { width: 400px; height: 400px; bottom: -100px; left: -100px; background: var(--color-accent); } -.particle-orb:nth-child(3) { width: 300px; height: 300px; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--color-secondary); } +.particle-orb { position: absolute; border-radius: 50%; filter: blur(80px); } +.particle-orb:nth-child(1) { width: 500px; height: 500px; top: -100px; right: -100px; background: var(--color-primary); opacity: 0.08; animation: orb-drift 20s ease-in-out infinite; } +.particle-orb:nth-child(2) { width: 400px; height: 400px; bottom: -100px; left: -100px; background: var(--color-tertiary); opacity: 0.08; animation: orb-drift 25s ease-in-out infinite reverse; } +.particle-orb:nth-child(3) { width: 300px; height: 300px; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--color-accent); opacity: 0.08; animation: orb-drift 30s ease-in-out infinite; animation-delay: -5s; } @media (max-width: 768px) { .particle-bg { display: none; } } /* ================================================================ @@ -948,10 +1120,11 @@ svg { display: inline-block; vertical-align: middle; } .dashboard-panel { display: flex; flex-direction: column; gap: var(--space-6); } .dashboard-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); } .dashboard-stats-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); } -.dashboard-metric-card { padding: var(--space-4); overflow: hidden; } +.dashboard-metric-card { padding: var(--space-5); overflow: hidden; } +.dashboard-metric-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } .dashboard-metric-content { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); } -.dashboard-metric-label { color: var(--text-secondary); font-size: 0.75rem; font-weight: 500; } -.dashboard-metric-value { margin-top: var(--space-1); font-size: 1.5rem; font-weight: 700; letter-spacing: -0.025em; } +.dashboard-metric-label { color: var(--text-secondary); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.02em; } +.dashboard-metric-value { margin-top: var(--space-1); font-size: 1.5rem; font-weight: 700; letter-spacing: -0.025em; color: var(--text-primary); } .dashboard-metric-icon { display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border-radius: var(--radius-lg); font-size: 1.25rem; } .dashboard-wide-card { grid-column: span 2; } .dashboard-top-channels, .dashboard-summary-list { display: flex; flex-direction: column; gap: var(--space-2); } @@ -962,21 +1135,21 @@ svg { display: inline-block; vertical-align: middle; } gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); - background: var(--surface-overlay); + background: var(--surface-container-low); color: var(--text-secondary); font-size: 0.875rem; } .dashboard-moderation-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); } -.dashboard-queue-card { padding: var(--space-4); border: var(--px) solid var(--surface-border); border-radius: var(--radius-lg); background: var(--surface-overlay); text-align: center; } -.dashboard-queue-value { font-size: 1.5rem; font-weight: 700; } +.dashboard-queue-card { padding: var(--space-4); border: 1px solid var(--surface-border); border-radius: var(--radius-lg); background: var(--surface-container-low); text-align: center; } +.dashboard-queue-value { font-size: 1.5rem; font-weight: 700; color: var(--text-primary); } .dashboard-queue-label { margin-top: var(--space-1); color: var(--text-secondary); font-size: 0.75rem; } .dashboard-list-card { overflow: hidden; } .dashboard-list-toolbar { margin-bottom: var(--space-4); } -.dashboard-summary-row { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3); border: var(--px) solid var(--surface-border); border-radius: var(--radius-lg); background: var(--surface-raised); transition: background var(--transition-fast), border-color var(--transition-fast); } -.dashboard-summary-row:hover { border-color: var(--color-primary); background: var(--surface-overlay); } -.dashboard-summary-avatar { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 2.5rem; height: 2.5rem; border-radius: var(--radius-full); background: var(--surface-overlay); color: var(--text-secondary); font-weight: 700; overflow: hidden; } +.dashboard-summary-row { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3); border: 1px solid var(--surface-border); border-radius: var(--radius-lg); background: var(--surface-raised); transition: background var(--transition-fast), border-color var(--transition-fast); } +.dashboard-summary-row:hover { border-color: var(--color-primary); background: var(--surface-container-low); } +.dashboard-summary-avatar { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 2.5rem; height: 2.5rem; border-radius: var(--radius-full); background: var(--surface-container); color: var(--text-secondary); font-weight: 700; overflow: hidden; } .dashboard-summary-avatar-img { width: 100%; height: 100%; object-fit: cover; } -.dashboard-channel-avatar { color: var(--color-primary); background: rgba(99, 102, 241, 0.1); } +.dashboard-channel-avatar { color: var(--color-primary); background: rgba(35, 161, 235, 0.1); } .dashboard-summary-main { min-width: 0; flex: 1; } .dashboard-summary-title { color: var(--text-primary); font-size: 0.875rem; font-weight: 600; } .dashboard-summary-text { margin-top: var(--space-1); color: var(--text-secondary); font-size: 0.8125rem; line-height: 1.45; } @@ -990,12 +1163,13 @@ svg { display: inline-block; vertical-align: middle; } .mascot-launcher { width: 3.5rem; height: 3.5rem; border: none; border-radius: var(--radius-full); - background: linear-gradient(135deg, var(--color-primary), #4f46e5); + background: var(--color-primary); color: white; box-shadow: var(--shadow-xl), var(--glow-primary); cursor: pointer; font-size: 1.5rem; transition: transform var(--transition-fast); + animation: float 3s ease-in-out infinite; } -.mascot-launcher:hover { transform: translateY(-2px) scale(1.05); } +.mascot-launcher:hover { transform: translateY(-2px) scale(1.05); animation: none; } .mascot-panel { width: min(24rem, calc(100vw - 2rem)); height: min(32.5rem, calc(100vh - 7rem)); @@ -1009,40 +1183,43 @@ svg { display: inline-block; vertical-align: middle; } .mascot-header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3); - background: linear-gradient(135deg, var(--color-primary), #4f46e5); + background: var(--color-primary); color: white; flex-shrink: 0; } .mascot-header-icon { display: flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border-radius: var(--radius-md); background: rgba(255,255,255,0.15); } -.mascot-title { font-size: 0.875rem; font-weight: 700; line-height: 1.15; } +.mascot-title { font-size: 0.875rem; font-weight: 700; line-height: 1.15; letter-spacing: 0.02em; } .mascot-subtitle { margin-top: 0.125rem; font-size: 0.6875rem; opacity: 0.7; } .mascot-icon-button { width: 1.75rem; height: 1.75rem; border: none; border-radius: var(--radius-md); background: transparent; color: white; cursor: pointer; } .mascot-icon-button:hover { background: rgba(255,255,255,0.15); } .mascot-messages { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); } .mascot-message-row { display: flex; gap: var(--space-2); } .mascot-message-row.user { justify-content: flex-end; } -.mascot-avatar { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 1.5rem; height: 1.5rem; border-radius: var(--radius-full); background: var(--surface-overlay); font-size: 0.875rem; } +.mascot-avatar { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 1.5rem; height: 1.5rem; border-radius: var(--radius-full); background: var(--surface-container-low); font-size: 0.875rem; } .mascot-bubble { max-width: 17.5rem; padding: var(--space-2) var(--space-3); border-radius: var(--radius-xl); font-size: 0.875rem; line-height: 1.5; overflow-wrap: anywhere; } .mascot-bubble.user { color: white; background: var(--color-primary); border-bottom-right-radius: var(--radius-sm); } -.mascot-bubble.mascot { color: var(--text-primary); background: var(--surface-overlay); border-bottom-left-radius: var(--radius-sm); } +.mascot-bubble.mascot { color: var(--text-primary); background: var(--surface-container-low); border-bottom-left-radius: var(--radius-sm); } .mascot-bubble.typing { display: flex; gap: 0.25rem; padding-top: 0.7rem; padding-bottom: 0.7rem; } .mascot-bubble.typing span { width: 0.4rem; height: 0.4rem; border-radius: var(--radius-full); background: var(--text-tertiary); animation: notification-pulse 0.8s infinite; } .mascot-bubble.typing span:nth-child(2) { animation-delay: 0.1s; } .mascot-bubble.typing span:nth-child(3) { animation-delay: 0.2s; } @keyframes notification-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } } .mascot-form { display: flex; gap: var(--space-2); padding: var(--space-3); border-top: var(--px) solid var(--surface-border); } -.mascot-input { flex: 1; min-width: 0; border: var(--px) solid var(--surface-border); border-radius: var(--radius-lg); padding: var(--space-2) var(--space-3); background: var(--surface-overlay); color: var(--text-primary); font-size: 0.875rem; } -.mascot-input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.14); } +.mascot-input { flex: 1; min-width: 0; border: 1px solid #cccccc; border-radius: var(--radius-lg); padding: var(--space-2) var(--space-3); background: var(--surface-container-low); color: var(--text-primary); font-size: 0.875rem; } +.mascot-input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(35, 161, 235, 0.1); } .mascot-send { width: 2.25rem; border: none; border-radius: var(--radius-lg); background: var(--color-primary); color: white; cursor: pointer; } .mascot-send:disabled, .mascot-input:disabled { cursor: not-allowed; opacity: 0.55; } /* ================================================================ TONE HELPERS ================================================================ */ -.tone-primary { background: rgba(99, 102, 241, 0.1); color: var(--color-primary); } +.tone-primary { background: rgba(35, 161, 235, 0.1); color: var(--color-primary); } .tone-success { background: rgba(16, 185, 129, 0.1); color: var(--color-success); } -.tone-error { background: rgba(239, 68, 68, 0.1); color: var(--color-error); } +.tone-error { background: rgba(228, 64, 95, 0.1); color: var(--color-error); } .tone-warning { background: rgba(245, 158, 11, 0.1); color: var(--color-warning); } -.tone-info { background: rgba(59, 130, 246, 0.1); color: var(--color-info); } +.tone-info { background: rgba(35, 161, 235, 0.1); color: var(--color-primary); } + +[data-theme="dark"] .tone-primary { background: rgba(84, 162, 255, 0.12); color: #7ab7ff; } +[data-theme="dark"] .tone-info { background: rgba(84, 162, 255, 0.12); color: #7ab7ff; } /* ================================================================ RESPONSIVE @@ -1076,16 +1253,17 @@ svg { display: inline-block; vertical-align: middle; } } /* ================================================================ - v2 — CLEAN SEMANTIC COMPONENT CLASSES (replaces utility classes) + v2 — CLEAN SEMANTIC COMPONENT CLASSES ================================================================ */ -/* ── Message Panel Layout ─────────────────────────── */ +/* ── Panel Card ──────────────────────────────── */ .panel-card { background: var(--surface-raised); - border: var(--px) solid var(--surface-border); + border: 1px solid #cccccc; border-radius: var(--radius-lg); + box-shadow: var(--shadow-sm); overflow: hidden; - transition: box-shadow var(--transition-fast); + transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1); } .panel-card:hover { box-shadow: var(--shadow-md); } .panel-card-head { @@ -1103,7 +1281,7 @@ svg { display: inline-block; vertical-align: middle; } margin-top: var(--space-1); } -/* ── Stats Bar ────────────────────────────────────── */ +/* ── Stats Bar ────────────────────────────────── */ .stats-bar { display: flex; flex-wrap: wrap; @@ -1111,7 +1289,7 @@ svg { display: inline-block; vertical-align: middle; } gap: var(--space-1); } -/* ── Search Area ──────────────────────────────────── */ +/* ── Search Area ──────────────────────────────── */ .search-bar { display: flex; flex-wrap: wrap; @@ -1126,9 +1304,9 @@ svg { display: inline-block; vertical-align: middle; } .search-input { width: 100%; padding: 0.5rem 0.75rem 0.5rem 2.25rem; - background: var(--surface-overlay); - border: var(--px) solid var(--surface-border); - border-radius: 9999px; + background: var(--surface-container-low); + border: 1px solid #cccccc; + border-radius: var(--radius-full); color: var(--text-primary); font-family: inherit; font-size: 0.875rem; @@ -1136,7 +1314,7 @@ svg { display: inline-block; vertical-align: middle; } outline: none; } .search-input::placeholder { color: var(--text-tertiary); } -.search-input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15); } +.search-input:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(35, 161, 235, 0.1); } .search-icon { position: absolute; left: 0.75rem; @@ -1146,7 +1324,7 @@ svg { display: inline-block; vertical-align: middle; } pointer-events: none; } -/* ── Filter Chips ─────────────────────────────────── */ +/* ── Filter Chips ─────────────────────────────── */ .filter-group { display: flex; align-items: center; @@ -1165,18 +1343,18 @@ svg { display: inline-block; vertical-align: middle; } transition: all var(--transition-fast); font-family: inherit; } -.filter-chip-v2:hover { color: var(--text-secondary); background: var(--surface-overlay); } +.filter-chip-v2:hover { color: var(--text-secondary); background: var(--surface-container-low); } .filter-chip-v2.is-active { background: var(--color-primary); color: white; } -/* ── Message Cards ───────────────────────────────── */ +/* ── Message Cards (v2) ──────────────────────── */ .msg-card { background: var(--surface-raised); border: var(--px) solid var(--surface-border); border-radius: var(--radius-lg); overflow: hidden; - transition: border-color var(--transition-fast), box-shadow var(--transition-fast); + transition: all var(--transition-fast); } -.msg-card:hover { border-color: rgba(99, 102, 241, 0.15); box-shadow: var(--shadow-sm); } +.msg-card:hover { border-color: rgba(35, 161, 235, 0.15); box-shadow: var(--shadow-sm); transform: translateY(-1px); } .msg-card.is-deleted { opacity: 0.6; border-color: var(--color-error); } .msg-card-inner { @@ -1191,7 +1369,7 @@ svg { display: inline-block; vertical-align: middle; } flex-shrink: 0; border-radius: 50%; object-fit: cover; - box-shadow: 0 0 0 2px var(--surface-raised), 0 0 0 4px rgba(99, 102, 241, 0.3); + box-shadow: 0 0 0 2px var(--surface-raised), 0 0 0 4px rgba(35, 161, 235, 0.2); } .msg-card-body { @@ -1218,8 +1396,8 @@ svg { display: inline-block; vertical-align: middle; } gap: var(--space-1); font-size: 0.75rem; color: var(--text-tertiary); - background: var(--surface-overlay); - padding: 0.0625rem 0.5rem; + background: var(--surface-container-low); + padding: 1px 8px; border-radius: var(--radius-full); } .msg-card-channel::before { @@ -1239,10 +1417,10 @@ svg { display: inline-block; vertical-align: middle; } .msg-card-messages.separated > * + * { margin-top: 0.625rem; padding-top: 0.625rem; - border-top: var(--px) solid rgba(255,255,255,0.03); + border-top: var(--px) solid var(--surface-border); } -/* ── Message Rows ────────────────────────────────── */ +/* ── Message Rows ────────────────────────────── */ .msg-row { padding: var(--space-3) 0; border-bottom: var(--px) solid var(--surface-border); @@ -1296,7 +1474,7 @@ svg { display: inline-block; vertical-align: middle; } } .msg-row-body.is-deleted { opacity: 0.6; color: var(--text-secondary); } -/* ── Media in messages ───────────────────────────── */ +/* ── Media in messages ───────────────────────── */ .msg-media-row { display: flex; flex-wrap: wrap; @@ -1370,7 +1548,7 @@ svg { display: inline-block; vertical-align: middle; } width: 64px; } -/* ── AI / Categories ─────────────────────────────── */ +/* ── AI / Categories ─────────────────────────── */ .msg-cats { display: flex; flex-wrap: wrap; @@ -1385,7 +1563,7 @@ svg { display: inline-block; vertical-align: middle; } font-size: 0.75rem; border-left: 3px solid; } -.msg-analysis.flagged { background: rgba(239, 68, 68, 0.05); border-color: var(--color-ai-flagged); } +.msg-analysis.flagged { background: rgba(228, 64, 95, 0.05); border-color: var(--color-ai-flagged); } .msg-analysis.clean { background: rgba(16, 185, 129, 0.05); border-color: var(--color-ai-clean); } .msg-analysis-row { @@ -1429,7 +1607,7 @@ svg { display: inline-block; vertical-align: middle; } opacity: 0.7; } -/* ─── Skeleton v2 ────────────────────────────────── */ +/* ─── Skeleton v2 ────────────────────────────── */ .msg-skel { display: flex; gap: var(--space-3); @@ -1439,7 +1617,7 @@ svg { display: inline-block; vertical-align: middle; } width: 40px; height: 40px; border-radius: 50%; - background: linear-gradient(90deg, var(--surface-overlay) 25%, var(--surface-hover) 50%, var(--surface-overlay) 75%); + background: linear-gradient(90deg, var(--surface-container-low) 25%, var(--surface-hover) 50%, var(--surface-container-low) 75%); background-size: 200% 100%; animation: shimmer 1.5s ease-in-out infinite; flex-shrink: 0; @@ -1453,7 +1631,7 @@ svg { display: inline-block; vertical-align: middle; } } .msg-skel-line { height: 20px; - background: linear-gradient(90deg, var(--surface-overlay) 25%, var(--surface-hover) 50%, var(--surface-overlay) 75%); + background: linear-gradient(90deg, var(--surface-container-low) 25%, var(--surface-hover) 50%, var(--surface-container-low) 75%); background-size: 200% 100%; animation: shimmer 1.5s ease-in-out infinite; border-radius: var(--radius-md); @@ -1466,12 +1644,12 @@ svg { display: inline-block; vertical-align: middle; } .msg-skel-badge { height: 24px; border-radius: 9999px; - background: linear-gradient(90deg, var(--surface-overlay) 25%, var(--surface-hover) 50%, var(--surface-overlay) 75%); + background: linear-gradient(90deg, var(--surface-container-low) 25%, var(--surface-hover) 50%, var(--surface-container-low) 75%); background-size: 200% 100%; animation: shimmer 1.5s ease-in-out infinite; } -/* ── Feed ─────────────────────────────────────────── */ +/* ── Feed ─────────────────────────────────────── */ .feed-wrap { display: flex; flex-direction: column; @@ -1504,7 +1682,7 @@ svg { display: inline-block; vertical-align: middle; } } .feed-load-btn { } -/* ── Auth Modal ──────────────────────────────────── */ +/* ── Auth Modal ──────────────────────────────── */ .auth-box { width: 380px; text-align: center; @@ -1533,18 +1711,18 @@ svg { display: inline-block; vertical-align: middle; } color: var(--color-error); } -/* ── Search Results ──────────────────────────────── */ +/* ── Search Results ──────────────────────────── */ .search-count { font-size: 0.875rem; color: var(--text-secondary); } -/* ── Spinner icon (inline) ───────────────────────── */ +/* ── Spinner icon (inline) ───────────────────── */ .icon-spin { animation: spin 1s linear infinite; } -/* ── Deemphasized text ──────────────────────────── */ +/* ── Deemphasized text ──────────────────────── */ .text-dim { color: var(--text-tertiary); opacity: 0.6; } /* ================================================================ @@ -1552,7 +1730,7 @@ svg { display: inline-block; vertical-align: middle; } ================================================================ */ .live-body { display: flex; flex-direction: column; gap: var(--space-6); } .live-head { display: flex; align-items: center; justify-content: space-between; } -.live-title { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.025em; } +.live-title { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.025em; color: var(--text-primary); } .live-desc { font-size: 0.875rem; color: var(--text-secondary); margin-top: var(--space-1); } .live-grid { display: grid; gap: var(--space-6); } .live-grid-3 { grid-template-columns: repeat(3, 1fr); } @@ -1570,7 +1748,7 @@ svg { display: inline-block; vertical-align: middle; } .scrn-actions { display: flex; gap: var(--space-2); } .scrn-status { display: inline-block; - padding: 0.125rem 0.5rem; + padding: 2px 8px; border-radius: var(--radius-sm); font-size: 0.75rem; color: var(--color-success); @@ -1620,9 +1798,9 @@ svg { display: inline-block; vertical-align: middle; } padding: var(--space-3); border-radius: var(--radius-md); border: var(--px) solid var(--surface-border); - transition: background var(--transition-fast), border-color var(--transition-fast); + transition: all var(--transition-fast); } -.rec-item:hover { background: var(--surface-hover); border-color: var(--color-primary); } +.rec-item:hover { background: var(--surface-hover); border-color: var(--color-primary); transform: translateX(2px); } .rec-info { flex: 1; min-width: 0; } .rec-name { font-size: 0.875rem; font-weight: 500; } .rec-meta { display: flex; align-items: center; gap: var(--space-2); font-size: 0.75rem; color: var(--text-secondary); margin-top: var(--space-1); } @@ -1638,7 +1816,7 @@ svg { display: inline-block; vertical-align: middle; } /* ── Dashboard Panel ───────────────────────────── */ .dash-panel { display: flex; flex-direction: column; gap: var(--space-6); } .dash-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); } -.dash-title { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.025em; } +.dash-title { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.025em; color: var(--text-primary); } .dash-desc { font-size: 0.875rem; color: var(--text-secondary); margin-top: var(--space-1); } /* ── Image Grid ────────────────────────────────── */ @@ -1648,6 +1826,9 @@ svg { display: inline-block; vertical-align: middle; } .head-left { display: flex; align-items: center; gap: var(--space-2); } .head-right { display: flex; align-items: center; gap: var(--space-4); margin-left: auto; } .head-status { display: flex; align-items: center; gap: var(--space-1); font-size: 0.75rem; color: var(--text-secondary); } +/* Pulse the WS status dot when connecting — applied inline via JS sets style */ +.head-status-dot { width: 8px; height: 8px; border-radius: 50%; transition: background var(--transition-fast); } +.head-status-dot.is-connecting { animation: pulse-connecting 1s ease-in-out infinite; } /* ── Mascot ────────────────────────────────────── */ .mascot-controls { display: flex; align-items: center; gap: var(--space-2); } diff --git a/services/frontend/frontend/src/features/messages/components/image_grid.rs b/services/frontend/frontend/src/features/messages/components/image_grid.rs index 144a58e..09fbd39 100644 --- a/services/frontend/frontend/src/features/messages/components/image_grid.rs +++ b/services/frontend/frontend/src/features/messages/components/image_grid.rs @@ -56,7 +56,7 @@ pub fn ImageGrid(messages: Vec) -> impl IntoView { if urls.is_empty() { return view! { -
+
"No images found"
} diff --git a/services/frontend/frontend/src/layout/header.rs b/services/frontend/frontend/src/layout/header.rs index b5ff5a1..9fef97d 100644 --- a/services/frontend/frontend/src/layout/header.rs +++ b/services/frontend/frontend/src/layout/header.rs @@ -20,6 +20,7 @@ pub fn Header() -> impl IntoView { WsStatus::Disconnected => "var(--text-tertiary)", WsStatus::Error(_) => "var(--color-error)", }); + let is_connecting = Memo::new(move |_| matches!(ws_status.get(), WsStatus::Connecting)); view! {
"IMPHNEN" - + "Guild Watcher"
@@ -45,7 +46,8 @@ pub fn Header() -> impl IntoView {
{move || indicator_text_memo.get()} diff --git a/services/frontend/shared-types/src/message.rs b/services/frontend/shared-types/src/message.rs index bef0804..a363d75 100644 --- a/services/frontend/shared-types/src/message.rs +++ b/services/frontend/shared-types/src/message.rs @@ -131,12 +131,16 @@ impl<'de> Deserialize<'de> for EmbedMedia { } #[derive(Debug, Clone, Serialize, Deserialize, PartialEq)] +#[serde(rename_all = "camelCase")] pub struct ChannelRef { pub channel_id: String, + #[serde(default)] #[serde(skip_serializing_if = "Option::is_none")] pub channel_name: Option, + #[serde(default)] #[serde(skip_serializing_if = "Option::is_none")] pub thread_id: Option, + #[serde(default)] #[serde(skip_serializing_if = "Option::is_none")] pub thread_name: Option, }