feat(UI): Introduce new UI components for file attachments and related views (#191)
Add file management API and UI components Implement directory listing, search and CRUD operations in desktop backend Expose new Files API on frontend to list, search, and modify files
This commit is contained in:
Bohdan Triapitsyn
committed by
GitHub
GitHub
parent
1f23b63c0b
commit
d97181bcd2
@@ -0,0 +1,357 @@
|
||||
@layer base {
|
||||
:root {
|
||||
color-scheme: light;
|
||||
--oc-safe-area-top: 0px;
|
||||
--oc-safe-area-right: 0px;
|
||||
--oc-safe-area-bottom: 0px;
|
||||
--oc-safe-area-bottom-visual: 0px;
|
||||
--oc-safe-area-left: 0px;
|
||||
--oc-header-height: 56px;
|
||||
--oc-visual-viewport-offset-top: 0px;
|
||||
--oc-keyboard-inset: 0px;
|
||||
--oc-keyboard-avoid-offset: 0px;
|
||||
--oc-keyboard-home-indicator: 0px;
|
||||
--ui-regular-font-weight: 400;
|
||||
--oc-scrollbar-thumb: oklch(0.32 0.03 50 / 0.4);
|
||||
--oc-scrollbar-thumb-hover: oklch(0.32 0.03 50 / 0.6);
|
||||
--padding-scale: 1;
|
||||
|
||||
/* Semantic typography defaults (must match SEMANTIC_TYPOGRAPHY) */
|
||||
--text-markdown: 0.9375rem;
|
||||
--text-code: 0.9063rem;
|
||||
--text-ui-header: 0.9375rem;
|
||||
--text-ui-label: 0.8750rem;
|
||||
--text-meta: 0.875rem;
|
||||
--text-micro: 0.875rem;
|
||||
|
||||
/* Default Light Theme */
|
||||
--background: oklch(0.97 0.02 85); /* Warm sand background */
|
||||
--foreground: oklch(0.25 0.02 40); /* Dark warm text */
|
||||
--card: oklch(0.99 0.01 90); /* Bright sand card */
|
||||
--card-foreground: oklch(0.25 0.02 40); /* Dark warm text */
|
||||
--popover: oklch(0.99 0.01 90); /* Bright sand popover */
|
||||
--popover-foreground: oklch(0.25 0.02 40); /* Dark warm text */
|
||||
--primary: oklch(0.65 0.2 55); /* Primary accent - orange */
|
||||
--primary-foreground: oklch(0.99 0.01 90); /* Light text on primary */
|
||||
--secondary: oklch(0.92 0.02 80); /* Light sand */
|
||||
--secondary-foreground: oklch(0.25 0.02 40); /* Dark warm text */
|
||||
--muted: oklch(0.9 0.015 75); /* Muted sand */
|
||||
--muted-foreground: oklch(0.45 0.02 50); /* Medium warm text */
|
||||
--accent: oklch(0.92 0.02 80); /* Light sand accent */
|
||||
--accent-foreground: oklch(0.25 0.02 40); /* Dark warm text */
|
||||
--destructive: oklch(0.55 0.25 25); /* Warm red */
|
||||
--destructive-foreground: oklch(0.99 0.01 90); /* Light text */
|
||||
--border: oklch(0.85 0.02 70); /* Warm border */
|
||||
--input: oklch(0.88 0.02 75); /* Input background */
|
||||
--ring: oklch(0.65 0.2 55); /* Focus ring color */
|
||||
--radius: 0.625rem;
|
||||
--chart-1: oklch(0.58 0.15 230); /* Blue */
|
||||
--chart-2: oklch(0.58 0.15 145); /* Oasis green */
|
||||
--chart-3: oklch(0.65 0.2 55); /* Orange */
|
||||
--chart-4: oklch(0.55 0.18 30); /* Rose */
|
||||
--chart-5: oklch(0.6 0.16 85); /* Golden sand */
|
||||
--sidebar: oklch(0.95 0.02 80); /* Slightly darker sand */
|
||||
--sidebar-foreground: oklch(0.25 0.02 40); /* Dark warm text */
|
||||
--sidebar-primary: oklch(0.65 0.2 55); /* Primary accent */
|
||||
--sidebar-primary-foreground: oklch(0.99 0.01 90); /* Light text */
|
||||
--sidebar-accent: oklch(0.9 0.02 75); /* Light sand accent */
|
||||
--sidebar-accent-foreground: oklch(0.25 0.02 40); /* Dark warm text */
|
||||
--sidebar-border: oklch(0.85 0.02 70); /* Warm border */
|
||||
--sidebar-ring: oklch(0.65 0.2 55); /* Focus ring */
|
||||
--sidebar-stuck-bg: #DDDDD3; /* Desktop sidebar sticky header background */
|
||||
}
|
||||
|
||||
.dark {
|
||||
/* Default Dark Theme - using OKLCH color space */
|
||||
--background: oklch(0.16 0.01 30); /* #151313 */
|
||||
--foreground: oklch(0.85 0.02 90); /* #cdccc3 */
|
||||
--card: oklch(0.19 0.01 40); /* #1C1B1A */
|
||||
--card-foreground: oklch(0.85 0.02 90); /* #cdccc3 */
|
||||
--popover: oklch(0.24 0.01 40); /* #282726 */
|
||||
--popover-foreground: oklch(0.85 0.02 90); /* #cdccc3 */
|
||||
--primary: oklch(0.77 0.17 85); /* #edb449 - golden sand */
|
||||
--primary-foreground: oklch(0.16 0.01 30); /* #151313 */
|
||||
--secondary: oklch(0.29 0.01 40); /* #343331 */
|
||||
--secondary-foreground: oklch(0.85 0.02 90); /* #cdccc3 */
|
||||
--muted: oklch(0.33 0.01 40); /* #403E3C */
|
||||
--muted-foreground: oklch(0.75 0.02 80); /* #b6b4ab */
|
||||
--accent: oklch(0.29 0.01 40); /* #343331 */
|
||||
--accent-foreground: oklch(0.85 0.02 90); /* #cdccc3 */
|
||||
--destructive: oklch(0.65 0.15 30); /* #d98678 */
|
||||
--destructive-foreground: oklch(0.9 0.02 80); /* #e1dcd0 */
|
||||
--border: oklch(0.31 0.01 35); /* #393836 */
|
||||
--input: oklch(0.33 0.01 40); /* #403E3C */
|
||||
--ring: oklch(0.77 0.17 85); /* #edb449 */
|
||||
--chart-1: oklch(0.68 0.12 230); /* #5aa9d9 - blue */
|
||||
--chart-2: oklch(0.68 0.12 145); /* #81af6c - green */
|
||||
--chart-3: oklch(0.7 0.13 95); /* #c2974d - yellow */
|
||||
--chart-4: oklch(0.65 0.14 45); /* #d8886d - coral */
|
||||
--chart-5: oklch(0.68 0.12 55); /* #d29470 - orange */
|
||||
--sidebar: oklch(0.16 0.01 30); /* #151313 */
|
||||
--sidebar-foreground: oklch(0.85 0.02 90); /* #cdccc3 */
|
||||
--sidebar-primary: oklch(0.77 0.17 85); /* #edb449 */
|
||||
--sidebar-primary-foreground: oklch(0.16 0.01 30); /* #151313 */
|
||||
--sidebar-accent: oklch(0.24 0.01 40); /* #282726 */
|
||||
--sidebar-accent-foreground: oklch(0.85 0.02 90); /* #cdccc3 */
|
||||
--sidebar-border: oklch(0.31 0.01 35); /* #393836 */
|
||||
--sidebar-ring: oklch(0.77 0.17 85); /* #edb449 */
|
||||
--sidebar-stuck-bg: #1F1F1D; /* Desktop sidebar sticky header background */
|
||||
}
|
||||
|
||||
* {
|
||||
border-color: hsl(var(--border));
|
||||
}
|
||||
|
||||
:root * {
|
||||
border-color: rgba(194, 151, 77, 0.2); /* Warm golden sand borders for light mode */
|
||||
}
|
||||
|
||||
.dark * {
|
||||
border-color: rgba(57, 56, 54, 0.5); /* #393836 at 50% opacity */
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: hsl(var(--background));
|
||||
color: hsl(var(--foreground));
|
||||
}
|
||||
|
||||
* {
|
||||
@apply border-border outline-none;
|
||||
}
|
||||
body {
|
||||
@apply bg-background text-foreground;
|
||||
font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif);
|
||||
font-weight: var(--ui-regular-font-weight, 400);
|
||||
}
|
||||
|
||||
.font-sans {
|
||||
font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif) !important;
|
||||
}
|
||||
|
||||
.font-mono,
|
||||
code,
|
||||
pre {
|
||||
font-family: var(--font-mono, ui-monospace, SFMono-Regular, 'Liberation Mono', Menlo, monospace) !important;
|
||||
}
|
||||
|
||||
/* Remove focus rings globally */
|
||||
*:focus {
|
||||
outline: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
*:focus-visible {
|
||||
outline: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@theme inline {
|
||||
--radius-sm: calc(var(--radius) - 4px);
|
||||
--radius-md: calc(var(--radius) - 2px);
|
||||
--radius-lg: var(--radius);
|
||||
--radius-xl: calc(var(--radius) + 4px);
|
||||
|
||||
/* Override Tailwind spacing scale with custom properties that respect --padding-scale */
|
||||
--spacing-0: 0;
|
||||
--spacing-0\.5: calc(0.125rem * var(--padding-scale, 1));
|
||||
--spacing-1: calc(0.25rem * var(--padding-scale, 1));
|
||||
--spacing-1\.5: calc(0.375rem * var(--padding-scale, 1));
|
||||
--spacing-2: calc(0.5rem * var(--padding-scale, 1));
|
||||
--spacing-2\.5: calc(0.625rem * var(--padding-scale, 1));
|
||||
--spacing-3: calc(0.75rem * var(--padding-scale, 1));
|
||||
--spacing-3\.5: calc(0.875rem * var(--padding-scale, 1));
|
||||
--spacing-4: calc(1rem * var(--padding-scale, 1));
|
||||
--spacing-5: calc(1.25rem * var(--padding-scale, 1));
|
||||
--spacing-6: calc(1.5rem * var(--padding-scale, 1));
|
||||
--spacing-7: calc(1.75rem * var(--padding-scale, 1));
|
||||
--spacing-8: calc(2rem * var(--padding-scale, 1));
|
||||
--spacing-9: calc(2.25rem * var(--padding-scale, 1));
|
||||
--spacing-10: calc(2.5rem * var(--padding-scale, 1));
|
||||
--spacing-11: calc(2.75rem * var(--padding-scale, 1));
|
||||
--spacing-12: calc(3rem * var(--padding-scale, 1));
|
||||
--spacing-14: calc(3.5rem * var(--padding-scale, 1));
|
||||
--spacing-16: calc(4rem * var(--padding-scale, 1));
|
||||
--spacing-20: calc(5rem * var(--padding-scale, 1));
|
||||
--spacing-24: calc(6rem * var(--padding-scale, 1));
|
||||
--spacing-28: calc(7rem * var(--padding-scale, 1));
|
||||
--spacing-32: calc(8rem * var(--padding-scale, 1));
|
||||
--spacing-36: calc(9rem * var(--padding-scale, 1));
|
||||
--spacing-40: calc(10rem * var(--padding-scale, 1));
|
||||
--spacing-44: calc(11rem * var(--padding-scale, 1));
|
||||
--spacing-48: calc(12rem * var(--padding-scale, 1));
|
||||
--spacing-52: calc(13rem * var(--padding-scale, 1));
|
||||
--spacing-56: calc(14rem * var(--padding-scale, 1));
|
||||
--spacing-60: calc(15rem * var(--padding-scale, 1));
|
||||
--spacing-64: calc(16rem * var(--padding-scale, 1));
|
||||
--spacing-72: calc(18rem * var(--padding-scale, 1));
|
||||
--spacing-80: calc(20rem * var(--padding-scale, 1));
|
||||
--spacing-96: calc(24rem * var(--padding-scale, 1));
|
||||
|
||||
--color-background: var(--background);
|
||||
--color-foreground: var(--foreground);
|
||||
--color-card: var(--card);
|
||||
--color-card-foreground: var(--card-foreground);
|
||||
--color-popover: var(--popover);
|
||||
--color-popover-foreground: var(--popover-foreground);
|
||||
--color-primary: var(--primary);
|
||||
--color-primary-foreground: var(--primary-foreground);
|
||||
--color-secondary: var(--secondary);
|
||||
--color-secondary-foreground: var(--secondary-foreground);
|
||||
--color-muted: var(--muted);
|
||||
--color-muted-foreground: var(--muted-foreground);
|
||||
--color-accent: var(--accent);
|
||||
--color-accent-foreground: var(--accent-foreground);
|
||||
--color-destructive: var(--destructive);
|
||||
--color-border: var(--border);
|
||||
--color-input: var(--input);
|
||||
--color-ring: var(--ring);
|
||||
--color-chart-1: var(--chart-1);
|
||||
--color-chart-2: var(--chart-2);
|
||||
--color-chart-3: var(--chart-3);
|
||||
--color-chart-4: var(--chart-4);
|
||||
--color-chart-5: var(--chart-5);
|
||||
--color-sidebar: var(--sidebar);
|
||||
--color-sidebar-foreground: var(--sidebar-foreground);
|
||||
--color-status-success: var(--status-success);
|
||||
--color-status-warning: var(--status-warning);
|
||||
--color-status-error: var(--status-error);
|
||||
--color-status-info: var(--status-info);
|
||||
--color-sidebar-primary: var(--sidebar-primary);
|
||||
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
||||
--color-sidebar-accent: var(--sidebar-accent);
|
||||
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
||||
--color-sidebar-border: var(--sidebar-border);
|
||||
--color-sidebar-ring: var(--sidebar-ring);
|
||||
|
||||
/* Markdown typography variables */
|
||||
--markdown-body-font-size: var(--text-markdown);
|
||||
--markdown-body-line-height: var(--markdown-body-line-height);
|
||||
--markdown-h1-font-size: var(--text-markdown);
|
||||
--markdown-h1-line-height: var(--markdown-h1-line-height);
|
||||
--markdown-h2-font-size: var(--text-markdown);
|
||||
--markdown-h2-line-height: var(--markdown-h2-line-height);
|
||||
--markdown-h3-font-size: var(--text-markdown);
|
||||
--markdown-h3-line-height: var(--markdown-h3-line-height);
|
||||
--markdown-h4-font-size: var(--text-markdown);
|
||||
--markdown-h4-line-height: var(--markdown-h4-line-height);
|
||||
--markdown-h5-font-size: var(--text-markdown);
|
||||
--markdown-h5-line-height: var(--markdown-h5-line-height);
|
||||
--markdown-h6-font-size: var(--text-markdown);
|
||||
--markdown-h6-line-height: var(--markdown-h6-line-height);
|
||||
--markdown-list-font-size: var(--text-markdown);
|
||||
--markdown-list-line-height: var(--markdown-list-line-height);
|
||||
--markdown-code-block-font-size: var(--text-code);
|
||||
--markdown-code-block-line-height: var(--markdown-code-block-line-height);
|
||||
|
||||
/* Markdown color variables */
|
||||
--markdown-heading1: var(--markdown-heading1);
|
||||
--markdown-heading2: var(--markdown-heading2);
|
||||
--markdown-heading3: var(--markdown-heading3);
|
||||
--markdown-heading4: var(--markdown-heading4);
|
||||
--markdown-link: var(--markdown-link);
|
||||
--markdown-link-hover: var(--markdown-link-hover);
|
||||
--markdown-list-marker: var(--markdown-list-marker);
|
||||
--markdown-inline-code: var(--markdown-inline-code);
|
||||
--markdown-inline-code-bg: var(--markdown-inline-code-bg);
|
||||
--markdown-blockquote: var(--markdown-blockquote);
|
||||
--markdown-blockquote-border: var(--markdown-blockquote-border);
|
||||
|
||||
/* Markdown spacing defaults */
|
||||
--markdown-paragraph-spacing: 0.35rem;
|
||||
--markdown-heading-primary-top: 0.75rem;
|
||||
--markdown-heading-primary-bottom: 0.35rem;
|
||||
--markdown-heading-secondary-top: 0.6rem;
|
||||
--markdown-heading-secondary-bottom: 0.3rem;
|
||||
--markdown-blockquote-spacing: 0.6rem;
|
||||
--markdown-blockquote-padding: 0.75rem;
|
||||
--markdown-divider-spacing: 0.85rem;
|
||||
--markdown-table-spacing: 0.9rem;
|
||||
--markdown-heading1-size: var(--text-markdown);
|
||||
--markdown-heading2-size: var(--text-markdown);
|
||||
--markdown-heading3-size: var(--text-markdown);
|
||||
--markdown-heading4-size: var(--text-markdown);
|
||||
--markdown-heading5-size: var(--text-markdown);
|
||||
--markdown-heading6-size: var(--text-markdown);
|
||||
--font-sans: "IBM Plex Mono", "JetBrains Mono", "Fira Code", "SFMono-Regular", "Menlo", monospace;
|
||||
--font-heading: var(--font-sans);
|
||||
--font-mono: "IBM Plex Mono", "JetBrains Mono", "Fira Code", "SFMono-Regular", "Menlo", monospace;
|
||||
--font-family-sans: var(--font-sans);
|
||||
--font-family-mono: var(--font-mono);
|
||||
}
|
||||
|
||||
/* Agent color system using theme variables */
|
||||
@layer components {
|
||||
/* Agent color variants - each maps to theme colors */
|
||||
.agent-primary {
|
||||
--agent-color: var(--primary);
|
||||
--agent-color-bg: var(--primary);
|
||||
}
|
||||
|
||||
.agent-info {
|
||||
--agent-color: var(--status-info);
|
||||
--agent-color-bg: var(--status-info);
|
||||
}
|
||||
|
||||
.agent-keyword {
|
||||
--agent-color: var(--syntax-keyword);
|
||||
--agent-color-bg: var(--syntax-keyword);
|
||||
}
|
||||
|
||||
.agent-success {
|
||||
--agent-color: var(--status-success);
|
||||
--agent-color-bg: var(--status-success);
|
||||
}
|
||||
|
||||
.agent-function {
|
||||
--agent-color: var(--syntax-function);
|
||||
--agent-color-bg: var(--syntax-function);
|
||||
}
|
||||
|
||||
.agent-number {
|
||||
--agent-color: var(--syntax-number);
|
||||
--agent-color-bg: var(--syntax-number);
|
||||
}
|
||||
|
||||
.agent-type {
|
||||
--agent-color: var(--syntax-type);
|
||||
--agent-color-bg: var(--syntax-type);
|
||||
}
|
||||
|
||||
.agent-warning {
|
||||
--agent-color: var(--status-warning);
|
||||
--agent-color-bg: var(--status-warning);
|
||||
}
|
||||
|
||||
.agent-variable {
|
||||
--agent-color: var(--syntax-variable);
|
||||
--agent-color-bg: var(--syntax-variable);
|
||||
}
|
||||
|
||||
/* Apply colors with opacity for badges */
|
||||
.agent-badge {
|
||||
background: rgb(from var(--agent-color-bg) r g b / 0.1);
|
||||
border: 1px solid rgb(from var(--agent-color) r g b / 0.2);
|
||||
color: var(--agent-color);
|
||||
}
|
||||
|
||||
.agent-badge:hover {
|
||||
background: rgb(from var(--agent-color-bg) r g b / 0.15);
|
||||
border-color: rgb(from var(--agent-color) r g b / 0.3);
|
||||
}
|
||||
|
||||
/* Agent dot indicator */
|
||||
.agent-dot {
|
||||
background: var(--agent-color);
|
||||
}
|
||||
|
||||
/* Agent list item */
|
||||
.agent-list-item:hover {
|
||||
background: rgb(from var(--agent-color-bg) r g b / 0.05);
|
||||
}
|
||||
|
||||
.agent-list-item.active {
|
||||
background: rgb(from var(--agent-color-bg) r g b / 0.1);
|
||||
border-color: rgb(from var(--agent-color) r g b / 0.2);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user