chihlasm/resolutionflow
1
0
Fork 0
Code Issues 23 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

feat: implement monochrome design system across entire frontend

Browse Source 
Migrate all 84 frontend files from the old themed/colored design to a
monochrome glass-morphism design system. Pure black backgrounds, white
text with opacity levels, glass-card components with backdrop-blur, and
functional color reserved for status indicators only.

Foundation: remap CSS variables to monochrome, simplify Tailwind config,
remove theme toggle, convert brand logo/wordmark to white. Pages: all
14 pages updated. Components: all common, library, session, step-library,
tree-editor, tree-preview, admin, and subscription components converted.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
chihlasm
2026-02-09 21:41:29 -05:00
parent 1381aaae99
commit f4ce1595d6
88 changed files with 2976 additions and 1596 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
frontend/src/components/library/AddToFolderMenu.tsx
View File

@@ -89,8 +89,8 @@ export function AddToFolderMenu({ treeId, onFolderCreated }: AddToFolderMenuProp
setIsOpen(!isOpen)
}}
className={cn(
'rounded-md border border-input p-1.5 text-muted-foreground',
'hover:bg-accent hover:text-accent-foreground'
'rounded-md border border-white/10 p-1.5 text-white/60',
'hover:bg-white/10 hover:text-white'
)}
title="Add to folder"
>
@@ -100,14 +100,14 @@ export function AddToFolderMenu({ treeId, onFolderCreated }: AddToFolderMenuProp
{isOpen && (
<div
className={cn(
'absolute right-0 top-full z-20 mt-1 w-48 rounded-md border border-input',
'bg-popover py-1 shadow-lg'
'absolute right-0 top-full z-20 mt-1 w-48 rounded-md border border-white/10',
'bg-black/90 backdrop-blur-sm py-1 shadow-lg'
)}
>
{isLoading ? (
<div className="px-3 py-2 text-sm text-muted-foreground">Loading...</div>
<div className="px-3 py-2 text-sm text-white/40">Loading...</div>
) : folders.length === 0 ? (
<div className="px-3 py-2 text-sm text-muted-foreground">No folders yet</div>
<div className="px-3 py-2 text-sm text-white/40">No folders yet</div>
) : (
folders.map((folder) => (
<button
@@ -116,7 +116,7 @@ export function AddToFolderMenu({ treeId, onFolderCreated }: AddToFolderMenuProp
e.stopPropagation()
toggleFolder(folder.id)
}}
className="flex w-full items-center gap-2 px-3 py-1.5 text-sm hover:bg-accent"
className="flex w-full items-center gap-2 px-3 py-1.5 text-sm text-white/70 hover:bg-white/[0.06] hover:text-white"
>
<div
className="h-3 w-3 rounded-sm"
@@ -124,13 +124,13 @@ export function AddToFolderMenu({ treeId, onFolderCreated }: AddToFolderMenuProp
/>
<span className="flex-1 truncate text-left">{folder.name}</span>
{treeFolderIds.has(folder.id) && (
<Check className="h-4 w-4 text-primary" />
<Check className="h-4 w-4 text-white" />
)}
</button>
))
)}
<div className="border-t border-input my-1" />
<div className="border-t border-white/10 my-1" />
<button
onClick={(e) => {
@@ -138,7 +138,7 @@ export function AddToFolderMenu({ treeId, onFolderCreated }: AddToFolderMenuProp
setIsOpen(false)
onFolderCreated?.()
}}
className="flex w-full items-center gap-2 px-3 py-1.5 text-sm text-primary hover:bg-accent"
className="flex w-full items-center gap-2 px-3 py-1.5 text-sm text-white/70 hover:bg-white/[0.06] hover:text-white"
>
<Plus className="h-4 w-4" />
Create new folder

36
frontend/src/components/library/FolderEditModal.tsx
View File

@@ -174,15 +174,15 @@ export function FolderEditModal({
return (
<div className="fixed inset-0 z-50 flex items-center justify-center">
{/* Backdrop */}
<div className="absolute inset-0 bg-background/80 backdrop-blur-sm" onClick={onClose} />
<div className="absolute inset-0 bg-black/80 backdrop-blur-sm" onClick={onClose} />
{/* Modal */}
<div className="relative z-10 w-full max-w-md rounded-lg border border-border bg-card p-6 shadow-lg">
<div className="relative z-10 w-full max-w-md glass-card rounded-2xl p-6 shadow-lg">
<div className="mb-4 flex items-center justify-between">
<h2 className="text-lg font-semibold text-card-foreground">
<h2 className="text-lg font-semibold text-white">
{isEditMode ? 'Edit Folder' : initialParentId ? 'Create Subfolder' : 'Create Folder'}
</h2>
<button onClick={onClose} className="rounded-md p-1 hover:bg-accent">
<button onClick={onClose} className="rounded-md p-1 text-white/40 hover:bg-white/[0.06] hover:text-white">
<X className="h-5 w-5" />
</button>
</div>
@@ -190,7 +190,7 @@ export function FolderEditModal({
<form onSubmit={handleSubmit}>
{/* Name input */}
<div className="mb-4">
<label htmlFor="folder-name" className="block text-sm font-medium text-foreground">
<label htmlFor="folder-name" className="block text-sm font-medium text-white">
Name
</label>
<input
@@ -201,9 +201,9 @@ export function FolderEditModal({
placeholder="e.g., Citrix Issues"
className={cn(
'mt-1 block w-full rounded-md border px-3 py-2 text-sm',
'bg-background text-foreground placeholder:text-muted-foreground',
'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary',
'border-input'
'bg-black/50 text-white placeholder:text-white/40',
'focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20',
'border-white/10'
)}
autoFocus
/>
@@ -211,7 +211,7 @@ export function FolderEditModal({
{/* Parent folder dropdown */}
<div className="mb-4">
<label htmlFor="folder-parent" className="block text-sm font-medium text-foreground">
<label htmlFor="folder-parent" className="block text-sm font-medium text-white">
Parent Folder
</label>
<select
@@ -220,9 +220,9 @@ export function FolderEditModal({
onChange={(e) => setParentId(e.target.value || null)}
className={cn(
'mt-1 block w-full rounded-md border px-3 py-2 text-sm',
'bg-background text-foreground',
'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary',
'border-input'
'bg-black/50 text-white',
'focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20',
'border-white/10'
)}
>
<option value="">None (root level)</option>
@@ -232,14 +232,14 @@ export function FolderEditModal({
</option>
))}
</select>
<p className="mt-1 text-xs text-muted-foreground">
<p className="mt-1 text-xs text-white/40">
Folders can be nested up to 3 levels deep.
</p>
</div>
{/* Color picker */}
<div className="mb-6">
<label className="block text-sm font-medium text-foreground">Color</label>
<label className="block text-sm font-medium text-white">Color</label>
<div className="mt-2 flex flex-wrap gap-2">
{FOLDER_COLORS.map((c) => (
<button
@@ -248,7 +248,7 @@ export function FolderEditModal({
onClick={() => setColor(c)}
className={cn(
'h-8 w-8 rounded-full transition-transform',
color === c && 'ring-2 ring-offset-2 ring-offset-background ring-primary scale-110'
color === c && 'ring-2 ring-offset-2 ring-offset-black ring-white/50 scale-110'
)}
style={{ backgroundColor: c }}
title={c}
@@ -262,7 +262,7 @@ export function FolderEditModal({
<button
type="button"
onClick={onClose}
className={cn('rounded-md border border-input px-4 py-2 text-sm', 'hover:bg-accent')}
className={cn('rounded-md border border-white/10 px-4 py-2 text-sm text-white/60', 'hover:bg-white/10 hover:text-white')}
>
Cancel
</button>
@@ -270,8 +270,8 @@ export function FolderEditModal({
type="submit"
disabled={isSubmitting}
className={cn(
'rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground',
'hover:bg-primary/90',
'rounded-md bg-white px-4 py-2 text-sm font-medium text-black',
'hover:bg-white/90',
'disabled:opacity-50'
)}
>

48
frontend/src/components/library/FolderSidebar.tsx
View File

@@ -113,8 +113,8 @@ function FolderItem({
onClick={() => onFolderSelect(folder.id)}
className={cn(
'flex w-full items-center gap-1 rounded-md py-1.5 text-sm',
'transition-colors hover:bg-accent',
selectedFolderId === folder.id && 'bg-accent font-medium'
'transition-colors hover:bg-white/[0.06]',
selectedFolderId === folder.id && 'bg-white/10 text-white font-medium'
)}
style={{ paddingLeft: `${8 + depth * 16}px`, paddingRight: '8px' }}
>
@@ -125,7 +125,7 @@ function FolderItem({
e.stopPropagation()
onToggleExpand(folder.id)
}}
className="shrink-0 p-0.5 hover:bg-accent rounded"
className="shrink-0 p-0.5 hover:bg-white/[0.06] rounded"
>
{isExpanded ? (
<ChevronDown className="h-3 w-3" />
@@ -138,7 +138,7 @@ function FolderItem({
)}
<Folder className="h-4 w-4 shrink-0" style={{ color: folder.color }} />
<span className="flex-1 truncate text-left">{folder.name}</span>
<span className="text-xs text-muted-foreground group-hover:hidden">{folder.tree_count}</span>
<span className="text-xs text-white/40 group-hover:hidden">{folder.tree_count}</span>
</button>
{/* Folder menu button - replaces tree count on hover */}
@@ -150,7 +150,7 @@ function FolderItem({
className={cn(
'absolute right-1 top-1/2 -translate-y-1/2 rounded p-1',
'hidden group-hover:block',
'hover:bg-accent'
'hover:bg-white/[0.06]'
)}
>
<MoreVertical className="h-3 w-3" />
@@ -160,8 +160,8 @@ function FolderItem({
{menuOpenId === folder.id && (
<div
className={cn(
'absolute right-0 top-full z-10 mt-1 w-40 rounded-md border border-input',
'bg-popover py-1 shadow-lg'
'absolute right-0 top-full z-10 mt-1 w-40 rounded-md border border-white/10',
'bg-black/90 backdrop-blur-sm py-1 shadow-lg'
)}
>
<button
@@ -170,7 +170,7 @@ function FolderItem({
onEditFolder(folder)
onMenuToggle(null)
}}
className="flex w-full items-center gap-2 px-3 py-1.5 text-sm hover:bg-accent"
className="flex w-full items-center gap-2 px-3 py-1.5 text-sm text-white/70 hover:bg-white/[0.06] hover:text-white"
>
<Pencil className="h-3 w-3" />
Edit
@@ -182,7 +182,7 @@ function FolderItem({
onAddSubfolder(folder.id)
onMenuToggle(null)
}}
className="flex w-full items-center gap-2 px-3 py-1.5 text-sm hover:bg-accent"
className="flex w-full items-center gap-2 px-3 py-1.5 text-sm text-white/70 hover:bg-white/[0.06] hover:text-white"
>
<FolderPlus className="h-3 w-3" />
Add Subfolder
@@ -194,7 +194,7 @@ function FolderItem({
onDeleteFolder(folder.id, hasSubfolders)
onMenuToggle(null)
}}
className="flex w-full items-center gap-2 px-3 py-1.5 text-sm text-destructive hover:bg-accent"
className="flex w-full items-center gap-2 px-3 py-1.5 text-sm text-red-400 hover:bg-red-400/10"
>
<Trash2 className="h-3 w-3" />
Delete
@@ -356,13 +356,13 @@ export function FolderSidebar({
{/* Mobile backdrop */}
{mobileOpen && (
<div
className="fixed inset-0 z-40 bg-background/80 backdrop-blur-sm md:hidden"
className="fixed inset-0 z-40 bg-black/80 backdrop-blur-sm md:hidden"
onClick={onMobileClose}
aria-hidden="true"
/>
)}
<div className={cn(
'w-56 shrink-0 border-r border-border bg-card',
'w-56 shrink-0 border-r border-white/[0.06] bg-transparent',
'hidden md:block',
mobileOpen && 'fixed inset-y-0 left-0 z-50 block animate-slide-in-left md:relative md:animate-none'
)}>
@@ -370,10 +370,10 @@ export function FolderSidebar({
{/* Mobile close button */}
{mobileOpen && (
<div className="mb-3 flex items-center justify-between md:hidden">
<span className="text-sm font-medium text-card-foreground">Folders</span>
<span className="text-sm font-medium text-white">Folders</span>
<button
onClick={onMobileClose}
className="rounded-md p-1.5 text-muted-foreground hover:bg-accent"
className="rounded-md p-1.5 text-white/40 hover:bg-white/[0.06]"
aria-label="Close folders"
>
<X className="h-4 w-4" />
@@ -382,7 +382,7 @@ export function FolderSidebar({
)}
<button
onClick={() => setIsExpanded(!isExpanded)}
className="flex w-full items-center gap-2 text-sm font-medium text-card-foreground"
className="flex w-full items-center gap-2 text-sm font-medium text-white"
>
{isExpanded ? (
<ChevronDown className="h-4 w-4" />
@@ -399,8 +399,8 @@ export function FolderSidebar({
onClick={() => onFolderSelect(null)}
className={cn(
'flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-sm',
'transition-colors hover:bg-accent',
selectedFolderId === null && 'bg-accent font-medium'
'transition-colors hover:bg-white/[0.06]',
selectedFolderId === null && 'bg-white/10 text-white font-medium'
)}
>
<Folder className="h-4 w-4" />
@@ -409,7 +409,7 @@ export function FolderSidebar({
{/* Loading state */}
{isLoading ? (
<div className="px-2 py-1.5 text-sm text-muted-foreground">Loading...</div>
<div className="px-2 py-1.5 text-sm text-white/40">Loading...</div>
) : (
<>
{/* User folders (hierarchical) */}
@@ -439,7 +439,7 @@ export function FolderSidebar({
onClick={() => onCreateFolder(null)}
className={cn(
'flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-sm',
'text-muted-foreground transition-colors hover:bg-accent hover:text-foreground'
'text-white/50 transition-colors hover:bg-white/[0.06] hover:text-white'
)}
>
<Plus className="h-4 w-4" />
@@ -454,8 +454,8 @@ export function FolderSidebar({
{contextMenu && (
<div
className={cn(
'fixed z-50 w-44 rounded-md border border-input',
'bg-popover py-1 shadow-lg'
'fixed z-50 w-44 rounded-md border border-white/10',
'bg-black/90 backdrop-blur-sm py-1 shadow-lg'
)}
style={{ left: contextMenu.x, top: contextMenu.y }}
onClick={(e) => e.stopPropagation()}
@@ -465,7 +465,7 @@ export function FolderSidebar({
onEditFolder(contextMenu.folder)
closeContextMenu()
}}
className="flex w-full items-center gap-2 px-3 py-1.5 text-sm hover:bg-accent"
className="flex w-full items-center gap-2 px-3 py-1.5 text-sm text-white/70 hover:bg-white/[0.06] hover:text-white"
>
<Pencil className="h-3 w-3" />
Edit
@@ -476,7 +476,7 @@ export function FolderSidebar({
handleAddSubfolder(contextMenu.folder.id)
closeContextMenu()
}}
className="flex w-full items-center gap-2 px-3 py-1.5 text-sm hover:bg-accent"
className="flex w-full items-center gap-2 px-3 py-1.5 text-sm text-white/70 hover:bg-white/[0.06] hover:text-white"
>
<FolderPlus className="h-3 w-3" />
Add Subfolder
@@ -487,7 +487,7 @@ export function FolderSidebar({
handleDeleteFolder(contextMenu.folder.id, contextMenu.folder.children.length > 0)
closeContextMenu()
}}
className="flex w-full items-center gap-2 px-3 py-1.5 text-sm text-destructive hover:bg-accent"
className="flex w-full items-center gap-2 px-3 py-1.5 text-sm text-red-400 hover:bg-red-400/10"
>
<Trash2 className="h-3 w-3" />
Delete

54
frontend/src/components/library/ShareTreeModal.tsx
View File

@@ -114,18 +114,18 @@ export function ShareTreeModal({ tree, isOpen, onClose }: ShareTreeModalProps) {
<div className="fixed inset-0 z-50 flex items-center justify-center">
{/* Backdrop */}
<div
className="absolute inset-0 bg-background/80 backdrop-blur-sm"
className="absolute inset-0 bg-black/80 backdrop-blur-sm"
onClick={onClose}
/>
{/* Modal */}
<div className="relative w-full max-w-lg rounded-lg border border-border bg-card shadow-lg">
<div className="relative w-full max-w-lg glass-card rounded-2xl shadow-lg">
{/* Header */}
<div className="flex items-center justify-between border-b border-border px-6 py-4">
<h2 className="text-lg font-semibold text-card-foreground">Share Tree</h2>
<div className="flex items-center justify-between border-b border-white/[0.06] px-6 py-4">
<h2 className="text-lg font-semibold text-white">Share Tree</h2>
<button
onClick={onClose}
className="rounded-md p-1 text-muted-foreground hover:bg-accent hover:text-accent-foreground"
className="rounded-md p-1 text-white/40 hover:bg-white/[0.06] hover:text-white"
>
<X className="h-5 w-5" />
</button>
@@ -135,9 +135,9 @@ export function ShareTreeModal({ tree, isOpen, onClose }: ShareTreeModalProps) {
<div className="px-6 py-4 space-y-6">
{/* Tree Info */}
<div>
<h3 className="font-medium text-card-foreground">{tree.name}</h3>
<h3 className="font-medium text-white">{tree.name}</h3>
{tree.description && (
<p className="mt-1 text-sm text-muted-foreground line-clamp-2">
<p className="mt-1 text-sm text-white/70 line-clamp-2">
{tree.description}
</p>
)}
@@ -145,7 +145,7 @@ export function ShareTreeModal({ tree, isOpen, onClose }: ShareTreeModalProps) {
{/* Visibility Settings */}
<div>
<label className="mb-2 block text-sm font-medium text-card-foreground">
<label className="mb-2 block text-sm font-medium text-white">
Visibility
</label>
<div className="space-y-2">
@@ -156,19 +156,19 @@ export function ShareTreeModal({ tree, isOpen, onClose }: ShareTreeModalProps) {
className={cn(
'flex w-full items-center gap-3 rounded-md border px-4 py-3 text-left transition-colors',
visibility === level
? 'border-primary bg-primary/5 text-card-foreground'
: 'border-border bg-background text-muted-foreground hover:border-primary/50 hover:bg-accent'
? 'border-white/20 bg-white/10 text-white'
: 'border-white/[0.06] bg-transparent text-white/50 hover:border-white/20 hover:bg-white/[0.06]'
)}
>
{getVisibilityIcon(level)}
<div className="flex-1">
<div className="text-sm font-medium capitalize">{level}</div>
<div className="text-xs text-muted-foreground">
<div className="text-xs text-white/40">
{getVisibilityDescription(level)}
</div>
</div>
{visibility === level && (
<div className="h-2 w-2 rounded-full bg-primary" />
<div className="h-2 w-2 rounded-full bg-white" />
)}
</button>
))}
@@ -178,7 +178,7 @@ export function ShareTreeModal({ tree, isOpen, onClose }: ShareTreeModalProps) {
{/* Share Link Generation */}
{visibility !== 'private' && (
<div>
<label className="mb-2 block text-sm font-medium text-card-foreground">
<label className="mb-2 block text-sm font-medium text-white">
Share Link
</label>
@@ -189,11 +189,11 @@ export function ShareTreeModal({ tree, isOpen, onClose }: ShareTreeModalProps) {
id="allow-forking"
checked={allowForking}
onChange={(e) => setAllowForking(e.target.checked)}
className="h-4 w-4 rounded border-input text-primary focus:ring-2 focus:ring-primary focus:ring-offset-2"
className="h-4 w-4 rounded border-white/10 bg-black/50 text-white focus:ring-2 focus:ring-white/20 focus:ring-offset-2 focus:ring-offset-black"
/>
<label
htmlFor="allow-forking"
className="text-sm text-muted-foreground cursor-pointer"
className="text-sm text-white/70 cursor-pointer"
>
Allow recipients to fork this tree
</label>
@@ -205,8 +205,8 @@ export function ShareTreeModal({ tree, isOpen, onClose }: ShareTreeModalProps) {
onClick={handleGenerateLink}
disabled={isGenerating}
className={cn(
'w-full rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground',
'hover:bg-primary/90 disabled:opacity-50 disabled:cursor-not-allowed'
'w-full rounded-md bg-white px-4 py-2 text-sm font-medium text-black',
'hover:bg-white/90 disabled:opacity-50 disabled:cursor-not-allowed'
)}
>
{isGenerating ? 'Generating...' : 'Generate Share Link'}
@@ -216,20 +216,20 @@ export function ShareTreeModal({ tree, isOpen, onClose }: ShareTreeModalProps) {
{/* Active Share Link */}
{activeShare && (
<div className="space-y-2">
<div className="flex items-center gap-2 rounded-md border border-border bg-background p-3">
<div className="flex items-center gap-2 rounded-md border border-white/10 bg-black/50 p-3">
<input
type="text"
value={activeShare.share_url}
readOnly
className="flex-1 bg-transparent text-sm text-foreground outline-none"
className="flex-1 bg-transparent text-sm text-white outline-none"
/>
<button
onClick={handleCopyLink}
className={cn(
'flex items-center gap-2 rounded-md border border-input px-3 py-1.5 text-sm font-medium transition-colors',
'flex items-center gap-2 rounded-md border border-white/10 px-3 py-1.5 text-sm font-medium transition-colors',
copied
? 'border-green-500 bg-green-500/10 text-green-600'
: 'text-muted-foreground hover:bg-accent hover:text-accent-foreground'
? 'border-green-500 bg-green-500/10 text-green-400'
: 'text-white/60 hover:bg-white/10 hover:text-white'
)}
>
{copied ? (
@@ -245,13 +245,13 @@ export function ShareTreeModal({ tree, isOpen, onClose }: ShareTreeModalProps) {
)}
</button>
</div>
<p className="text-xs text-muted-foreground">
<p className="text-xs text-white/40">
{activeShare.allow_forking
? 'Recipients can fork this tree'
: 'Forking disabled for this share'}
</p>
{shares.length > 1 && (
<p className="text-xs text-muted-foreground">
<p className="text-xs text-white/40">
{shares.length} active share links
</p>
)}
@@ -262,12 +262,12 @@ export function ShareTreeModal({ tree, isOpen, onClose }: ShareTreeModalProps) {
</div>
{/* Footer */}
<div className="flex justify-end gap-3 border-t border-border px-6 py-4">
<div className="flex justify-end gap-3 border-t border-white/[0.06] px-6 py-4">
<button
onClick={onClose}
className={cn(
'rounded-md border border-input px-4 py-2 text-sm font-medium text-muted-foreground',
'hover:bg-accent hover:text-accent-foreground'
'rounded-md border border-white/10 px-4 py-2 text-sm font-medium text-white/60',
'hover:bg-white/10 hover:text-white'
)}
>
Close

6
frontend/src/components/library/SortDropdown.tsx
View File

@@ -21,7 +21,7 @@ const sortOptions: { value: SortBy; label: string }[] = [
export function SortDropdown({ value, onChange, className }: SortDropdownProps) {
return (
<div className={cn('relative inline-flex items-center', className)}>
<span className="mr-2 flex items-center gap-1.5 text-sm text-muted-foreground">
<span className="mr-2 flex items-center gap-1.5 text-sm text-white/40">
<ArrowUpDown className="h-4 w-4" />
<span className="hidden sm:inline">Sort:</span>
</span>
@@ -29,8 +29,8 @@ export function SortDropdown({ value, onChange, className }: SortDropdownProps)
value={value}
onChange={(e) => onChange(e.target.value as SortBy)}
className={cn(
'rounded-md border border-input bg-background px-3 py-1.5 text-sm',
'text-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary'
'rounded-md border border-white/10 bg-black/50 px-3 py-1.5 text-sm',
'text-white focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20'
)}
>
{sortOptions.map((option) => (

32
frontend/src/components/library/TreeGridView.tsx
View File

@@ -30,13 +30,13 @@ export function TreeGridView({
{trees.map((tree) => (
<div
key={tree.id}
className="rounded-lg border border-border bg-card p-4 shadow-sm transition-all hover:-translate-y-0.5 hover:border-primary/30 hover:shadow-md sm:p-6"
className="glass-card rounded-2xl p-4 transition-all hover:-translate-y-0.5 hover:border-white/20 hover:shadow-md sm:p-6"
>
<div className="mb-2 flex items-start justify-between gap-2">
<div className="flex items-center gap-2">
<h3 className="font-semibold text-card-foreground">{tree.name}</h3>
<h3 className="font-semibold text-white">{tree.name}</h3>
{tree.status === 'draft' && (
<span className="inline-flex items-center gap-1 rounded-full bg-yellow-100 px-2 py-0.5 text-xs font-medium text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400">
<span className="inline-flex items-center gap-1 rounded-full bg-yellow-400/10 px-2 py-0.5 text-xs font-medium text-yellow-400">
<FileText className="h-3 w-3" />
Draft
</span>
@@ -45,21 +45,21 @@ export function TreeGridView({
<div className="flex items-center gap-2">
{tree.is_public ? (
<span title="Public tree">
<Globe className="h-4 w-4 text-muted-foreground" />
<Globe className="h-4 w-4 text-white/40" />
</span>
) : (
<span title="Private tree">
<Lock className="h-4 w-4 text-muted-foreground" />
<Lock className="h-4 w-4 text-white/40" />
</span>
)}
{tree.category_info && (
<span className="rounded-full bg-secondary px-2 py-0.5 text-xs text-secondary-foreground">
<span className="rounded-full bg-white/10 px-2 py-0.5 text-xs text-white/70">
{tree.category_info.name}
</span>
)}
</div>
</div>
<p className="mb-3 text-sm text-muted-foreground line-clamp-2">
<p className="mb-3 text-sm text-white/70 line-clamp-2">
{tree.description || 'No description available'}
</p>
@@ -71,7 +71,7 @@ export function TreeGridView({
)}
<div className="flex items-center justify-between">
<span className="text-xs text-muted-foreground">
<span className="text-xs text-white/40">
v{tree.version} · {tree.usage_count} uses
</span>
<div className="flex items-center gap-2">
@@ -81,8 +81,8 @@ export function TreeGridView({
type="button"
onClick={() => onForkTree(tree.id)}
className={cn(
'rounded-md border border-input p-2 text-muted-foreground',
'hover:bg-accent hover:text-accent-foreground'
'rounded-md border border-white/10 p-2 text-white/60',
'hover:bg-white/10 hover:text-white'
)}
title="Fork tree"
>
@@ -93,8 +93,8 @@ export function TreeGridView({
<Link
to={`/trees/${tree.id}/edit`}
className={cn(
'rounded-md border border-input p-2 text-muted-foreground',
'hover:bg-accent hover:text-accent-foreground'
'rounded-md border border-white/10 p-2 text-white/60',
'hover:bg-white/10 hover:text-white'
)}
title="Edit tree"
>
@@ -106,8 +106,8 @@ export function TreeGridView({
type="button"
onClick={() => onDeleteTree(tree)}
className={cn(
'rounded-md border border-input p-1.5 text-muted-foreground',
'hover:bg-destructive/10 hover:text-destructive'
'rounded-md border border-white/10 p-1.5 text-white/60',
'hover:bg-red-400/10 hover:text-red-400'
)}
title="Delete tree"
>
@@ -118,8 +118,8 @@ export function TreeGridView({
type="button"
onClick={() => onStartSession(tree.id)}
className={cn(
'rounded-md bg-primary px-3 py-2 text-sm font-medium text-primary-foreground',
'hover:bg-primary/90'
'rounded-md bg-white px-3 py-2 text-sm font-medium text-black',
'hover:bg-white/90'
)}
>
Start Session

28
frontend/src/components/library/TreeListView.tsx
View File

@@ -29,29 +29,29 @@ export function TreeListView({
{trees.map((tree) => (
<div
key={tree.id}
className="flex items-center gap-4 rounded-lg border border-border bg-card p-4 transition-all hover:border-primary/30 hover:shadow-sm"
className="flex items-center gap-4 glass-card rounded-2xl p-4 transition-all hover:border-white/20 hover:shadow-sm"
>
{/* Left: Name and Description */}
<div className="flex-1 min-w-0">
<div className="flex items-center gap-2 mb-1">
<h3 className="font-semibold text-card-foreground truncate">{tree.name}</h3>
<h3 className="font-semibold text-white truncate">{tree.name}</h3>
{tree.status === 'draft' && (
<span className="inline-flex items-center gap-1 rounded-full bg-yellow-100 px-2 py-0.5 text-xs font-medium text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400 flex-shrink-0">
<span className="inline-flex items-center gap-1 rounded-full bg-yellow-400/10 px-2 py-0.5 text-xs font-medium text-yellow-400 flex-shrink-0">
<FileText className="h-3 w-3" />
Draft
</span>
)}
{tree.is_public ? (
<span title="Public tree">
<Globe className="h-3.5 w-3.5 text-muted-foreground flex-shrink-0" />
<Globe className="h-3.5 w-3.5 text-white/40 flex-shrink-0" />
</span>
) : (
<span title="Private tree">
<Lock className="h-3.5 w-3.5 text-muted-foreground flex-shrink-0" />
<Lock className="h-3.5 w-3.5 text-white/40 flex-shrink-0" />
</span>
)}
</div>
<p className="text-sm text-muted-foreground truncate">
<p className="text-sm text-white/70 truncate">
{tree.description || 'No description available'}
</p>
</div>
@@ -59,7 +59,7 @@ export function TreeListView({
{/* Center: Category and Tags */}
<div className="hidden lg:flex items-center gap-2 min-w-0" style={{ maxWidth: '300px' }}>
{tree.category_info && (
<span className="rounded-full bg-secondary px-2 py-0.5 text-xs text-secondary-foreground whitespace-nowrap">
<span className="rounded-full bg-white/10 px-2 py-0.5 text-xs text-white/70 whitespace-nowrap">
{tree.category_info.name}
</span>
)}
@@ -72,7 +72,7 @@ export function TreeListView({
{/* Right: Metadata and Actions */}
<div className="flex items-center gap-3 flex-shrink-0">
<div className="hidden sm:flex flex-col items-end text-xs text-muted-foreground">
<div className="hidden sm:flex flex-col items-end text-xs text-white/40">
<span>v{tree.version}</span>
<span>{tree.usage_count} uses</span>
</div>
@@ -84,8 +84,8 @@ export function TreeListView({
type="button"
onClick={() => onForkTree(tree.id)}
className={cn(
'rounded-md border border-input p-1.5 text-muted-foreground',
'hover:bg-accent hover:text-accent-foreground'
'rounded-md border border-white/10 p-1.5 text-white/60',
'hover:bg-white/10 hover:text-white'
)}
title="Fork tree"
>
@@ -96,8 +96,8 @@ export function TreeListView({
<Link
to={`/trees/${tree.id}/edit`}
className={cn(
'rounded-md border border-input p-1.5 text-muted-foreground',
'hover:bg-accent hover:text-accent-foreground'
'rounded-md border border-white/10 p-1.5 text-white/60',
'hover:bg-white/10 hover:text-white'
)}
title="Edit tree"
>
@@ -108,8 +108,8 @@ export function TreeListView({
type="button"
onClick={() => onStartSession(tree.id)}
className={cn(
'rounded-md bg-primary px-3 py-1.5 text-sm font-medium text-primary-foreground',
'hover:bg-primary/90 whitespace-nowrap'
'rounded-md bg-white px-3 py-1.5 text-sm font-medium text-black',
'hover:bg-white/90 whitespace-nowrap'
)}
>
Start

56
frontend/src/components/library/TreeTableView.tsx
View File

@@ -69,12 +69,12 @@ export function TreeTableView({
}
return (
<div className="overflow-x-auto rounded-lg border border-border">
<div className="overflow-x-auto rounded-2xl border border-white/[0.06]">
<table className="w-full">
<thead className="bg-muted/50 sticky top-0 z-10">
<tr className="border-b border-border">
<thead className="bg-white/[0.02] sticky top-0 z-10">
<tr className="border-b border-white/[0.06]">
<th
className="px-4 py-3 text-left text-sm font-medium text-muted-foreground cursor-pointer hover:text-foreground"
className="px-4 py-3 text-left text-sm font-medium text-white/50 cursor-pointer hover:text-white"
onClick={() => handleSort('name')}
>
<div className="flex items-center gap-1">
@@ -82,11 +82,11 @@ export function TreeTableView({
{getSortIcon('name')}
</div>
</th>
<th className="hidden md:table-cell px-4 py-3 text-left text-sm font-medium text-muted-foreground">
<th className="hidden md:table-cell px-4 py-3 text-left text-sm font-medium text-white/50">
Description
</th>
<th
className="hidden lg:table-cell px-4 py-3 text-left text-sm font-medium text-muted-foreground cursor-pointer hover:text-foreground"
className="hidden lg:table-cell px-4 py-3 text-left text-sm font-medium text-white/50 cursor-pointer hover:text-white"
onClick={() => handleSort('category')}
>
<div className="flex items-center gap-1">
@@ -94,11 +94,11 @@ export function TreeTableView({
{getSortIcon('category')}
</div>
</th>
<th className="hidden xl:table-cell px-4 py-3 text-left text-sm font-medium text-muted-foreground">
<th className="hidden xl:table-cell px-4 py-3 text-left text-sm font-medium text-white/50">
Tags
</th>
<th
className="hidden sm:table-cell px-4 py-3 text-center text-sm font-medium text-muted-foreground cursor-pointer hover:text-foreground"
className="hidden sm:table-cell px-4 py-3 text-center text-sm font-medium text-white/50 cursor-pointer hover:text-white"
onClick={() => handleSort('version')}
>
<div className="flex items-center justify-center gap-1">
@@ -107,7 +107,7 @@ export function TreeTableView({
</div>
</th>
<th
className="hidden sm:table-cell px-4 py-3 text-center text-sm font-medium text-muted-foreground cursor-pointer hover:text-foreground"
className="hidden sm:table-cell px-4 py-3 text-center text-sm font-medium text-white/50 cursor-pointer hover:text-white"
onClick={() => handleSort('usage')}
>
<div className="flex items-center justify-center gap-1">
@@ -116,7 +116,7 @@ export function TreeTableView({
</div>
</th>
<th
className="hidden md:table-cell px-4 py-3 text-left text-sm font-medium text-muted-foreground cursor-pointer hover:text-foreground"
className="hidden md:table-cell px-4 py-3 text-left text-sm font-medium text-white/50 cursor-pointer hover:text-white"
onClick={() => handleSort('updated')}
>
<div className="flex items-center gap-1">
@@ -124,44 +124,44 @@ export function TreeTableView({
{getSortIcon('updated')}
</div>
</th>
<th className="px-4 py-3 text-right text-sm font-medium text-muted-foreground">
<th className="px-4 py-3 text-right text-sm font-medium text-white/50">
Actions
</th>
</tr>
</thead>
<tbody className="bg-card">
<tbody className="bg-transparent">
{trees.map((tree) => (
<tr key={tree.id} className="border-b border-border last:border-0 hover:bg-accent/50">
<tr key={tree.id} className="border-b border-white/[0.06] last:border-0 hover:bg-white/[0.04]">
<td className="px-4 py-3">
<div className="flex items-center gap-2">
<span className="font-medium text-card-foreground truncate max-w-[200px]">
<span className="font-medium text-white truncate max-w-[200px]">
{tree.name}
</span>
{tree.status === 'draft' && (
<span className="inline-flex items-center gap-1 rounded-full bg-yellow-100 px-2 py-0.5 text-xs font-medium text-yellow-800 dark:bg-yellow-900/30 dark:text-yellow-400 flex-shrink-0">
<span className="inline-flex items-center gap-1 rounded-full bg-yellow-400/10 px-2 py-0.5 text-xs font-medium text-yellow-400 flex-shrink-0">
<FileText className="h-3 w-3" />
Draft
</span>
)}
{tree.is_public ? (
<span title="Public tree">
<Globe className="h-3.5 w-3.5 text-muted-foreground flex-shrink-0" />
<Globe className="h-3.5 w-3.5 text-white/40 flex-shrink-0" />
</span>
) : (
<span title="Private tree">
<Lock className="h-3.5 w-3.5 text-muted-foreground flex-shrink-0" />
<Lock className="h-3.5 w-3.5 text-white/40 flex-shrink-0" />
</span>
)}
</div>
</td>
<td className="hidden md:table-cell px-4 py-3 text-sm text-muted-foreground">
<td className="hidden md:table-cell px-4 py-3 text-sm text-white/70">
<span className="truncate block max-w-[250px]">
{tree.description || 'No description'}
</span>
</td>
<td className="hidden lg:table-cell px-4 py-3">
{tree.category_info && (
<span className="inline-block rounded-full bg-secondary px-2 py-0.5 text-xs text-secondary-foreground">
<span className="inline-block rounded-full bg-white/10 px-2 py-0.5 text-xs text-white/70">
{tree.category_info.name}
</span>
)}
@@ -171,13 +171,13 @@ export function TreeTableView({
<TagBadges tags={tree.tags} maxVisible={2} onTagClick={onTagClick} />
)}
</td>
<td className="hidden sm:table-cell px-4 py-3 text-center text-sm text-muted-foreground">
<td className="hidden sm:table-cell px-4 py-3 text-center text-sm text-white/70">
v{tree.version}
</td>
<td className="hidden sm:table-cell px-4 py-3 text-center text-sm text-muted-foreground">
<td className="hidden sm:table-cell px-4 py-3 text-center text-sm text-white/70">
{tree.usage_count}
</td>
<td className="hidden md:table-cell px-4 py-3 text-sm text-muted-foreground">
<td className="hidden md:table-cell px-4 py-3 text-sm text-white/70">
{formatDate(tree.updated_at)}
</td>
<td className="px-4 py-3">
@@ -188,8 +188,8 @@ export function TreeTableView({
type="button"
onClick={() => onForkTree(tree.id)}
className={cn(
'rounded-md border border-input p-1.5 text-muted-foreground',
'hover:bg-accent hover:text-accent-foreground'
'rounded-md border border-white/10 p-1.5 text-white/60',
'hover:bg-white/10 hover:text-white'
)}
title="Fork tree"
>
@@ -200,8 +200,8 @@ export function TreeTableView({
<Link
to={`/trees/${tree.id}/edit`}
className={cn(
'rounded-md border border-input p-1.5 text-muted-foreground',
'hover:bg-accent hover:text-accent-foreground'
'rounded-md border border-white/10 p-1.5 text-white/60',
'hover:bg-white/10 hover:text-white'
)}
title="Edit tree"
>
@@ -212,8 +212,8 @@ export function TreeTableView({
type="button"
onClick={() => onStartSession(tree.id)}
className={cn(
'rounded-md bg-primary px-3 py-1.5 text-xs font-medium text-primary-foreground',
'hover:bg-primary/90 whitespace-nowrap'
'rounded-md bg-white px-3 py-1.5 text-xs font-medium text-black',
'hover:bg-white/90 whitespace-nowrap'
)}
>
Start

14
frontend/src/components/library/ViewToggle.tsx
View File

@@ -11,15 +11,15 @@ interface ViewToggleProps {
export function ViewToggle({ view, onChange, className }: ViewToggleProps) {
return (
<div className={cn('flex items-center gap-1 rounded-md border border-input p-1', className)}>
<div className={cn('flex items-center gap-1 rounded-md border border-white/10 p-1', className)}>
<button
type="button"
onClick={() => onChange('grid')}
className={cn(
'rounded p-1.5 transition-colors',
view === 'grid'
? 'bg-primary text-primary-foreground'
: 'text-muted-foreground hover:bg-accent hover:text-accent-foreground'
? 'bg-white/10 text-white border-white/20'
: 'text-white/50 hover:bg-white/[0.06] hover:text-white'
)}
title="Grid view"
>
@@ -31,8 +31,8 @@ export function ViewToggle({ view, onChange, className }: ViewToggleProps) {
className={cn(
'rounded p-1.5 transition-colors',
view === 'list'
? 'bg-primary text-primary-foreground'
: 'text-muted-foreground hover:bg-accent hover:text-accent-foreground'
? 'bg-white/10 text-white border-white/20'
: 'text-white/50 hover:bg-white/[0.06] hover:text-white'
)}
title="List view"
>
@@ -44,8 +44,8 @@ export function ViewToggle({ view, onChange, className }: ViewToggleProps) {
className={cn(
'rounded p-1.5 transition-colors',
view === 'table'
? 'bg-primary text-primary-foreground'
: 'text-muted-foreground hover:bg-accent hover:text-accent-foreground'
? 'bg-white/10 text-white border-white/20'
: 'text-white/50 hover:bg-white/[0.06] hover:text-white'
)}
title="Table view"
>