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

refactor: migrate common components to new design system

Browse Source 
Migrate 15 components from monochrome glass-card design to purple gradient
accent design system tokens (bg-card, border-border, text-foreground,
bg-gradient-brand, etc.)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
chihlasm
2026-02-15 21:07:49 -05:00
parent 61c310f3ca
commit e3edbc64f2
15 changed files with 244 additions and 244 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/src/components/common/ActionMenu.tsx
View File

@@ -53,8 +53,8 @@ export function ActionMenu({ actions, align = 'right' }: ActionMenuProps) {
<button <button
onClick={() => setIsOpen(!isOpen)} onClick={() => setIsOpen(!isOpen)}
className={cn( className={cn(
'rounded-md border border-white/10 p-2 text-white/60', 'rounded-md border border-border p-2 text-muted-foreground',
'hover:bg-white/10 hover:text-white' 'hover:bg-accent hover:text-foreground'
)} )}
aria-label="Actions" aria-label="Actions"
> >
@@ -64,7 +64,7 @@ export function ActionMenu({ actions, align = 'right' }: ActionMenuProps) {
{isOpen && ( {isOpen && (
<div <div
className={cn( className={cn(
'absolute z-50 mt-1 min-w-[180px] glass-card rounded-lg p-1', 'absolute z-50 mt-1 min-w-[180px] bg-card border border-border rounded-lg p-1',
align === 'right' ? 'right-0' : 'left-0' align === 'right' ? 'right-0' : 'left-0'
)} )}
> >
@@ -80,8 +80,8 @@ export function ActionMenu({ actions, align = 'right' }: ActionMenuProps) {
action.disabled action.disabled
? 'cursor-not-allowed opacity-40' ? 'cursor-not-allowed opacity-40'
: action.variant === 'destructive' : action.variant === 'destructive'
? 'text-red-400 hover:bg-white/10 hover:text-red-300' ? 'text-red-400 hover:bg-accent hover:text-red-300'
: 'text-white/70 hover:bg-white/10 hover:text-white' : 'text-muted-foreground hover:bg-accent hover:text-foreground'
)} )}
> >
{Icon && <Icon className="h-4 w-4" />} {Icon && <Icon className="h-4 w-4" />}

8
frontend/src/components/common/ConfirmDialog.tsx
View File

@@ -34,8 +34,8 @@ export function ConfirmDialog({
onClick={onClose} onClick={onClose}
disabled={isLoading} disabled={isLoading}
className={cn( className={cn(
'rounded-xl border border-white/10 px-4 py-2 text-sm font-medium', 'rounded-xl border border-border px-4 py-2 text-sm font-medium',
'text-white/60 hover:bg-white/10 hover:text-white', 'text-muted-foreground hover:bg-accent hover:text-foreground',
'disabled:opacity-50 disabled:cursor-not-allowed' 'disabled:opacity-50 disabled:cursor-not-allowed'
)} )}
> >
@@ -49,7 +49,7 @@ export function ConfirmDialog({
'disabled:opacity-50 disabled:cursor-not-allowed', 'disabled:opacity-50 disabled:cursor-not-allowed',
confirmVariant === 'destructive' confirmVariant === 'destructive'
? 'bg-red-400/10 text-red-400 hover:bg-red-400/20 border border-red-400/20' ? 'bg-red-400/10 text-red-400 hover:bg-red-400/20 border border-red-400/20'
: 'bg-white text-black hover:bg-white/90' : 'bg-gradient-brand text-white shadow-lg shadow-primary/20 hover:opacity-90'
)} )}
> >
{isLoading ? 'Processing...' : confirmLabel} {isLoading ? 'Processing...' : confirmLabel}
@@ -57,7 +57,7 @@ export function ConfirmDialog({
</div> </div>
} }
> >
<p className="text-sm text-white/70">{message}</p> <p className="text-sm text-muted-foreground">{message}</p>
</Modal> </Modal>
) )
} }

8
frontend/src/components/common/ErrorBoundary.tsx
View File

@@ -37,19 +37,19 @@ export class ErrorBoundary extends Component<Props, State> {
<h2 className="mb-2 text-xl font-semibold text-red-400"> <h2 className="mb-2 text-xl font-semibold text-red-400">
Something went wrong Something went wrong
</h2> </h2>
<p className="mb-4 text-white/70"> <p className="mb-4 text-muted-foreground">
An unexpected error occurred. Please try refreshing the page. An unexpected error occurred. Please try refreshing the page.
</p> </p>
{this.state.error && ( {this.state.error && (
<pre className="mb-4 overflow-auto rounded-xl bg-white/5 border border-white/[0.06] p-3 text-left text-xs text-red-400"> <pre className="mb-4 overflow-auto rounded-xl bg-white/5 border border-border p-3 text-left text-xs text-red-400">
{this.state.error.message} {this.state.error.message}
</pre> </pre>
)} )}
<button <button
onClick={() => window.location.reload()} onClick={() => window.location.reload()}
className={cn( className={cn(
'rounded-xl bg-white px-4 py-2 text-sm font-medium text-black', 'rounded-xl bg-gradient-brand px-4 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20',
'hover:bg-white/90' 'hover:opacity-90'
)} )}
> >
Refresh Page Refresh Page

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

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

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

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

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

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

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

@@ -30,12 +30,12 @@ export function TreeListView({
{trees.map((tree) => ( {trees.map((tree) => (
<div <div
key={tree.id} key={tree.id}
className="flex items-center gap-4 glass-card rounded-2xl p-4 transition-all hover:border-white/20 hover:shadow-sm" className="flex items-center gap-4 bg-card border border-border rounded-2xl p-4 transition-all hover:border-primary/30 hover:shadow-sm"
> >
{/* Left: Name and Description */} {/* Left: Name and Description */}
<div className="flex-1 min-w-0"> <div className="flex-1 min-w-0">
<div className="flex items-center gap-2 mb-1"> <div className="flex items-center gap-2 mb-1">
<h3 className="font-semibold text-white truncate">{tree.name}</h3> <h3 className="font-semibold text-foreground truncate">{tree.name}</h3>
{tree.status === 'draft' && ( {tree.status === 'draft' && (
<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"> <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" /> <FileText className="h-3 w-3" />
@@ -44,15 +44,15 @@ export function TreeListView({
)} )}
{tree.is_public ? ( {tree.is_public ? (
<span title="Public tree"> <span title="Public tree">
<Globe className="h-3.5 w-3.5 text-white/40 flex-shrink-0" /> <Globe className="h-3.5 w-3.5 text-muted-foreground flex-shrink-0" />
</span> </span>
) : ( ) : (
<span title="Private tree"> <span title="Private tree">
<Lock className="h-3.5 w-3.5 text-white/40 flex-shrink-0" /> <Lock className="h-3.5 w-3.5 text-muted-foreground flex-shrink-0" />
</span> </span>
)} )}
</div> </div>
<p className="text-sm text-white/70 truncate"> <p className="text-sm text-muted-foreground truncate">
{tree.description || 'No description available'} {tree.description || 'No description available'}
</p> </p>
</div> </div>
@@ -60,7 +60,7 @@ export function TreeListView({
{/* Center: Category and Tags */} {/* Center: Category and Tags */}
<div className="hidden lg:flex items-center gap-2 min-w-0" style={{ maxWidth: '300px' }}> <div className="hidden lg:flex items-center gap-2 min-w-0" style={{ maxWidth: '300px' }}>
{tree.category_info && ( {tree.category_info && (
<span className="rounded-full bg-white/10 px-2 py-0.5 text-xs text-white/70 whitespace-nowrap"> <span className="rounded-full bg-accent px-2 py-0.5 text-xs text-muted-foreground whitespace-nowrap">
{tree.category_info.name} {tree.category_info.name}
</span> </span>
)} )}
@@ -73,7 +73,7 @@ export function TreeListView({
{/* Right: Metadata and Actions */} {/* Right: Metadata and Actions */}
<div className="flex items-center gap-3 flex-shrink-0"> <div className="flex items-center gap-3 flex-shrink-0">
<div className="hidden sm:flex flex-col items-end text-xs text-white/40"> <div className="hidden sm:flex flex-col items-end text-xs text-muted-foreground">
<span>v{tree.version}</span> <span>v{tree.version}</span>
<span>{tree.usage_count} uses</span> <span>{tree.usage_count} uses</span>
</div> </div>
@@ -85,8 +85,8 @@ export function TreeListView({
type="button" type="button"
onClick={() => onForkTree(tree.id)} onClick={() => onForkTree(tree.id)}
className={cn( className={cn(
'rounded-md border border-white/10 p-1.5 text-white/60', 'rounded-md border border-border p-1.5 text-muted-foreground',
'hover:bg-white/10 hover:text-white' 'hover:bg-accent hover:text-foreground'
)} )}
title="Fork tree" title="Fork tree"
aria-label="Fork tree" aria-label="Fork tree"
@@ -99,8 +99,8 @@ export function TreeListView({
<Link <Link
to={`/trees/${tree.id}/edit`} to={`/trees/${tree.id}/edit`}
className={cn( className={cn(
'rounded-md border border-white/10 p-1.5 text-white/60', 'rounded-md border border-border p-1.5 text-muted-foreground',
'hover:bg-white/10 hover:text-white' 'hover:bg-accent hover:text-foreground'
)} )}
title="Edit tree" title="Edit tree"
aria-label="Edit tree" aria-label="Edit tree"
@@ -111,7 +111,7 @@ export function TreeListView({
type="button" type="button"
onClick={() => onDeleteTree(tree)} onClick={() => onDeleteTree(tree)}
className={cn( className={cn(
'rounded-md border border-white/10 p-1.5 text-white/60', 'rounded-md border border-border p-1.5 text-muted-foreground',
'hover:bg-red-500/20 hover:text-red-400' 'hover:bg-red-500/20 hover:text-red-400'
)} )}
title="Delete tree" title="Delete tree"
@@ -125,8 +125,8 @@ export function TreeListView({
type="button" type="button"
onClick={() => onStartSession(tree.id, tree.tree_type)} onClick={() => onStartSession(tree.id, tree.tree_type)}
className={cn( className={cn(
'rounded-md bg-white px-3 py-1.5 text-sm font-medium text-black', 'rounded-md bg-gradient-brand px-3 py-1.5 text-sm font-medium text-white shadow-lg shadow-primary/20',
'hover:bg-white/90 whitespace-nowrap' 'hover:opacity-90 whitespace-nowrap'
)} )}
> >
Start Start

46
frontend/src/components/session/SaveSessionAsTreeModal.tsx
View File

@@ -34,21 +34,21 @@ export function SaveSessionAsTreeModal({
return ( return (
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm"> <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm">
<div className="glass-card w-full max-w-lg rounded-2xl p-6 shadow-lg"> <div className="bg-card border border-border w-full max-w-lg rounded-2xl p-6 shadow-lg">
{/* Header */} {/* Header */}
<div className="mb-4 flex items-center justify-between"> <div className="mb-4 flex items-center justify-between">
<h2 className="text-lg font-semibold text-white">Save Session as Tree</h2> <h2 className="text-lg font-semibold text-foreground">Save Session as Tree</h2>
<button <button
onClick={onClose} onClick={onClose}
disabled={isSaving} disabled={isSaving}
className="rounded-full p-1 text-white/40 hover:bg-white/10 hover:text-white disabled:opacity-50" className="rounded-full p-1 text-muted-foreground hover:bg-accent hover:text-foreground disabled:opacity-50"
> >
<X className="h-5 w-5" /> <X className="h-5 w-5" />
</button> </button>
</div> </div>
{/* Info */} {/* Info */}
<p className="mb-4 text-sm text-white/70"> <p className="mb-4 text-sm text-muted-foreground">
Create a new tree from this session's path. The tree will be linked to the original tree as a fork. Create a new tree from this session's path. The tree will be linked to the original tree as a fork.
</p> </p>
@@ -56,8 +56,8 @@ export function SaveSessionAsTreeModal({
<form onSubmit={handleSubmit} className="space-y-4"> <form onSubmit={handleSubmit} className="space-y-4">
{/* Tree Name */} {/* Tree Name */}
<div> <div>
<label htmlFor="treeName" className="mb-1 block text-sm font-medium text-white"> <label htmlFor="treeName" className="mb-1 block text-sm font-medium text-foreground">
Tree Name <span className="text-white/40">(optional)</span> Tree Name <span className="text-muted-foreground">(optional)</span>
</label> </label>
<input <input
id="treeName" id="treeName"
@@ -68,9 +68,9 @@ export function SaveSessionAsTreeModal({
disabled={isSaving} disabled={isSaving}
maxLength={255} maxLength={255}
className={cn( className={cn(
'w-full rounded-md border border-white/10 bg-black/50 px-3 py-2 text-sm text-white', 'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
'placeholder:text-white/40', 'placeholder:text-muted-foreground',
'focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20', 'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20',
'disabled:opacity-50' 'disabled:opacity-50'
)} )}
/> />
@@ -78,8 +78,8 @@ export function SaveSessionAsTreeModal({
{/* Description */} {/* Description */}
<div> <div>
<label htmlFor="description" className="mb-1 block text-sm font-medium text-white"> <label htmlFor="description" className="mb-1 block text-sm font-medium text-foreground">
Description <span className="text-white/40">(optional)</span> Description <span className="text-muted-foreground">(optional)</span>
</label> </label>
<textarea <textarea
id="description" id="description"
@@ -89,9 +89,9 @@ export function SaveSessionAsTreeModal({
disabled={isSaving} disabled={isSaving}
rows={3} rows={3}
className={cn( className={cn(
'w-full rounded-md border border-white/10 bg-black/50 px-3 py-2 text-sm text-white', 'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
'placeholder:text-white/40', 'placeholder:text-muted-foreground',
'focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20', 'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20',
'disabled:opacity-50' 'disabled:opacity-50'
)} )}
/> />
@@ -99,7 +99,7 @@ export function SaveSessionAsTreeModal({
{/* Status */} {/* Status */}
<div> <div>
<label className="mb-2 block text-sm font-medium text-white">Status</label> <label className="mb-2 block text-sm font-medium text-foreground">Status</label>
<div className="flex gap-4"> <div className="flex gap-4">
<label className="flex cursor-pointer items-center gap-2"> <label className="flex cursor-pointer items-center gap-2">
<input <input
@@ -109,9 +109,9 @@ export function SaveSessionAsTreeModal({
checked={status === 'draft'} checked={status === 'draft'}
onChange={() => setStatus('draft')} onChange={() => setStatus('draft')}
disabled={isSaving} disabled={isSaving}
className="h-4 w-4 border-white/10 text-white focus:ring-2 focus:ring-white/20 focus:ring-offset-0" className="h-4 w-4 border-border text-foreground focus:ring-2 focus:ring-primary/20 focus:ring-offset-0"
/> />
<span className="text-sm text-white">Draft</span> <span className="text-sm text-foreground">Draft</span>
</label> </label>
<label className="flex cursor-pointer items-center gap-2"> <label className="flex cursor-pointer items-center gap-2">
<input <input
@@ -121,9 +121,9 @@ export function SaveSessionAsTreeModal({
checked={status === 'published'} checked={status === 'published'}
onChange={() => setStatus('published')} onChange={() => setStatus('published')}
disabled={isSaving} disabled={isSaving}
className="h-4 w-4 border-white/10 text-white focus:ring-2 focus:ring-white/20 focus:ring-offset-0" className="h-4 w-4 border-border text-foreground focus:ring-2 focus:ring-primary/20 focus:ring-offset-0"
/> />
<span className="text-sm text-white">Published</span> <span className="text-sm text-foreground">Published</span>
</label> </label>
</div> </div>
</div> </div>
@@ -135,8 +135,8 @@ export function SaveSessionAsTreeModal({
onClick={onClose} onClick={onClose}
disabled={isSaving} disabled={isSaving}
className={cn( className={cn(
'rounded-md border border-white/10 px-4 py-2 text-sm font-medium text-white/60', 'rounded-md border border-border px-4 py-2 text-sm font-medium text-muted-foreground',
'hover:bg-white/10 hover:text-white disabled:opacity-50' 'hover:bg-accent hover:text-foreground disabled:opacity-50'
)} )}
> >
Cancel Cancel
@@ -145,8 +145,8 @@ export function SaveSessionAsTreeModal({
type="submit" type="submit"
disabled={isSaving} disabled={isSaving}
className={cn( className={cn(
'rounded-md bg-white px-4 py-2 text-sm font-medium text-black', 'rounded-md bg-gradient-brand px-4 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20',
'hover:bg-white/90 disabled:opacity-50' 'hover:opacity-90 disabled:opacity-50'
)} )}
> >
{isSaving ? 'Saving...' : 'Save as Tree'} {isSaving ? 'Saving...' : 'Save as Tree'}

74
frontend/src/components/session/SessionFilters.tsx
View File

@@ -93,32 +93,32 @@ export function SessionFilters({ filters, onChange, onClear, trees }: SessionFil
<div className="flex flex-col gap-3 sm:flex-row"> <div className="flex flex-col gap-3 sm:flex-row">
{/* Ticket Number Search */} {/* Ticket Number Search */}
<div className="relative flex-1"> <div className="relative flex-1">
<Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-white/40" /> <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
<input <input
type="text" type="text"
placeholder="Search by ticket number..." placeholder="Search by ticket number..."
value={filters.ticketNumber} value={filters.ticketNumber}
onChange={(e) => handleFilterChange('ticketNumber', e.target.value)} onChange={(e) => handleFilterChange('ticketNumber', e.target.value)}
className={cn( className={cn(
'w-full rounded-md border border-white/10 bg-black/50 py-2 pl-9 pr-3', 'w-full rounded-md border border-border bg-card py-2 pl-9 pr-3',
'text-white placeholder:text-white/40', 'text-foreground placeholder:text-muted-foreground',
'focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20' 'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20'
)} )}
/> />
</div> </div>
{/* Client Name Search */} {/* Client Name Search */}
<div className="relative flex-1"> <div className="relative flex-1">
<Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-white/40" /> <Search className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
<input <input
type="text" type="text"
placeholder="Search by client name..." placeholder="Search by client name..."
value={filters.clientName} value={filters.clientName}
onChange={(e) => handleFilterChange('clientName', e.target.value)} onChange={(e) => handleFilterChange('clientName', e.target.value)}
className={cn( className={cn(
'w-full rounded-md border border-white/10 bg-black/50 py-2 pl-9 pr-3', 'w-full rounded-md border border-border bg-card py-2 pl-9 pr-3',
'text-white placeholder:text-white/40', 'text-foreground placeholder:text-muted-foreground',
'focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20' 'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20'
)} )}
/> />
</div> </div>
@@ -128,8 +128,8 @@ export function SessionFilters({ filters, onChange, onClear, trees }: SessionFil
value={filters.treeName} value={filters.treeName}
onChange={(e) => handleFilterChange('treeName', e.target.value)} onChange={(e) => handleFilterChange('treeName', e.target.value)}
className={cn( className={cn(
'rounded-md border border-white/10 bg-black/50 px-3 py-2', 'rounded-md border border-border bg-card px-3 py-2',
'text-white focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20', 'text-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20',
'sm:min-w-[200px]' 'sm:min-w-[200px]'
)} )}
> >
@@ -148,19 +148,19 @@ export function SessionFilters({ filters, onChange, onClear, trees }: SessionFil
<button <button
onClick={() => setShowDatePicker(!showDatePicker)} onClick={() => setShowDatePicker(!showDatePicker)}
className={cn( className={cn(
'flex w-full items-center gap-2 rounded-md border border-white/10 bg-black/50 px-3 py-2 text-sm', 'flex w-full items-center gap-2 rounded-md border border-border bg-card px-3 py-2 text-sm',
'text-white hover:bg-white/10', 'text-foreground hover:bg-accent',
filters.dateRange?.from && 'border-white/30' filters.dateRange?.from && 'border-primary/30'
)} )}
> >
<Calendar className="h-4 w-4 text-white/40" /> <Calendar className="h-4 w-4 text-muted-foreground" />
<span className={cn(!filters.dateRange?.from && 'text-white/40')}> <span className={cn(!filters.dateRange?.from && 'text-muted-foreground')}>
{formatDateRange(filters.dateRange)} {formatDateRange(filters.dateRange)}
</span> </span>
</button> </button>
{showDatePicker && ( {showDatePicker && (
<div className="absolute left-0 top-full z-50 mt-2 rounded-lg border border-white/[0.06] bg-[#0a0a0a] p-4 shadow-lg"> <div className="absolute left-0 top-full z-50 mt-2 rounded-lg border border-border bg-[#0a0a0a] p-4 shadow-lg">
{/* Date Type Toggle */} {/* Date Type Toggle */}
<div className="mb-3 flex gap-2"> <div className="mb-3 flex gap-2">
<button <button
@@ -168,8 +168,8 @@ export function SessionFilters({ filters, onChange, onClear, trees }: SessionFil
className={cn( className={cn(
'flex-1 rounded-md px-3 py-1.5 text-sm font-medium transition-colors', 'flex-1 rounded-md px-3 py-1.5 text-sm font-medium transition-colors',
filters.dateType === 'started' filters.dateType === 'started'
? 'bg-white text-black' ? 'bg-gradient-brand text-white shadow-lg shadow-primary/20'
: 'border border-white/10 text-white/60 hover:bg-white/10 hover:text-white' : 'border border-border text-muted-foreground hover:bg-accent hover:text-foreground'
)} )}
> >
Started Started
@@ -179,8 +179,8 @@ export function SessionFilters({ filters, onChange, onClear, trees }: SessionFil
className={cn( className={cn(
'flex-1 rounded-md px-3 py-1.5 text-sm font-medium transition-colors', 'flex-1 rounded-md px-3 py-1.5 text-sm font-medium transition-colors',
filters.dateType === 'completed' filters.dateType === 'completed'
? 'bg-white text-black' ? 'bg-gradient-brand text-white shadow-lg shadow-primary/20'
: 'border border-white/10 text-white/60 hover:bg-white/10 hover:text-white' : 'border border-border text-muted-foreground hover:bg-accent hover:text-foreground'
)} )}
> >
Completed Completed
@@ -194,8 +194,8 @@ export function SessionFilters({ filters, onChange, onClear, trees }: SessionFil
key={preset.value} key={preset.value}
onClick={() => applyDatePreset(preset.value)} onClick={() => applyDatePreset(preset.value)}
className={cn( className={cn(
'rounded-md bg-white/10 px-3 py-1.5 text-sm font-medium text-white/70', 'rounded-md bg-accent px-3 py-1.5 text-sm font-medium text-muted-foreground',
'hover:bg-white/20 hover:text-white' 'hover:bg-accent/80 hover:text-foreground'
)} )}
> >
{preset.label} {preset.label}
@@ -227,8 +227,8 @@ export function SessionFilters({ filters, onChange, onClear, trees }: SessionFil
setShowDatePicker(false) setShowDatePicker(false)
}} }}
className={cn( className={cn(
'flex-1 rounded-md bg-white px-3 py-1.5 text-sm font-medium text-black', 'flex-1 rounded-md bg-gradient-brand px-3 py-1.5 text-sm font-medium text-white shadow-lg shadow-primary/20',
'hover:bg-white/90' 'hover:opacity-90'
)} )}
> >
Apply Apply
@@ -236,8 +236,8 @@ export function SessionFilters({ filters, onChange, onClear, trees }: SessionFil
<button <button
onClick={() => setShowDatePicker(false)} onClick={() => setShowDatePicker(false)}
className={cn( className={cn(
'rounded-md border border-white/10 px-3 py-1.5 text-sm font-medium text-white/60', 'rounded-md border border-border px-3 py-1.5 text-sm font-medium text-muted-foreground',
'hover:bg-white/10 hover:text-white' 'hover:bg-accent hover:text-foreground'
)} )}
> >
Cancel Cancel
@@ -252,8 +252,8 @@ export function SessionFilters({ filters, onChange, onClear, trees }: SessionFil
<button <button
onClick={onClear} onClick={onClear}
className={cn( className={cn(
'flex items-center gap-2 rounded-md border border-white/10 px-3 py-2 text-sm font-medium', 'flex items-center gap-2 rounded-md border border-border px-3 py-2 text-sm font-medium',
'text-white/60 hover:bg-white/10 hover:text-white' 'text-muted-foreground hover:bg-accent hover:text-foreground'
)} )}
> >
<Filter className="h-4 w-4" /> <Filter className="h-4 w-4" />
@@ -265,46 +265,46 @@ export function SessionFilters({ filters, onChange, onClear, trees }: SessionFil
{/* Active Filter Chips */} {/* Active Filter Chips */}
{hasActiveFilters && ( {hasActiveFilters && (
<div className="flex flex-wrap items-center gap-2"> <div className="flex flex-wrap items-center gap-2">
<span className="text-sm text-white/40">Active filters:</span> <span className="text-sm text-muted-foreground">Active filters:</span>
{filters.ticketNumber && ( {filters.ticketNumber && (
<span className="inline-flex items-center gap-1 rounded-full bg-white/10 px-3 py-1 text-sm text-white/70"> <span className="inline-flex items-center gap-1 rounded-full bg-accent px-3 py-1 text-sm text-muted-foreground">
Ticket: {filters.ticketNumber} Ticket: {filters.ticketNumber}
<button <button
onClick={() => handleFilterChange('ticketNumber', '')} onClick={() => handleFilterChange('ticketNumber', '')}
className="rounded-full p-0.5 hover:bg-white/20" className="rounded-full p-0.5 hover:bg-accent/80"
> >
<X className="h-3 w-3" /> <X className="h-3 w-3" />
</button> </button>
</span> </span>
)} )}
{filters.clientName && ( {filters.clientName && (
<span className="inline-flex items-center gap-1 rounded-full bg-white/10 px-3 py-1 text-sm text-white/70"> <span className="inline-flex items-center gap-1 rounded-full bg-accent px-3 py-1 text-sm text-muted-foreground">
Client: {filters.clientName} Client: {filters.clientName}
<button <button
onClick={() => handleFilterChange('clientName', '')} onClick={() => handleFilterChange('clientName', '')}
className="rounded-full p-0.5 hover:bg-white/20" className="rounded-full p-0.5 hover:bg-accent/80"
> >
<X className="h-3 w-3" /> <X className="h-3 w-3" />
</button> </button>
</span> </span>
)} )}
{filters.treeName && ( {filters.treeName && (
<span className="inline-flex items-center gap-1 rounded-full bg-white/10 px-3 py-1 text-sm text-white/70"> <span className="inline-flex items-center gap-1 rounded-full bg-accent px-3 py-1 text-sm text-muted-foreground">
Tree: {filters.treeName} Tree: {filters.treeName}
<button <button
onClick={() => handleFilterChange('treeName', '')} onClick={() => handleFilterChange('treeName', '')}
className="rounded-full p-0.5 hover:bg-white/20" className="rounded-full p-0.5 hover:bg-accent/80"
> >
<X className="h-3 w-3" /> <X className="h-3 w-3" />
</button> </button>
</span> </span>
)} )}
{filters.dateRange?.from && ( {filters.dateRange?.from && (
<span className="inline-flex items-center gap-1 rounded-full bg-white/10 px-3 py-1 text-sm text-white/70"> <span className="inline-flex items-center gap-1 rounded-full bg-accent px-3 py-1 text-sm text-muted-foreground">
{formatDateRange(filters.dateRange)} ({filters.dateType}) {formatDateRange(filters.dateRange)} ({filters.dateType})
<button <button
onClick={clearDateRange} onClick={clearDateRange}
className="rounded-full p-0.5 hover:bg-white/20" className="rounded-full p-0.5 hover:bg-accent/80"
> >
<X className="h-3 w-3" /> <X className="h-3 w-3" />
</button> </button>

46
frontend/src/components/session/SessionTimeline.tsx
View File

@@ -53,7 +53,7 @@ export function SessionTimeline({
if (treeType === 'procedural') { if (treeType === 'procedural') {
return ( return (
<div className="mb-8"> <div className="mb-8">
<h2 className="mb-4 text-lg font-semibold text-white">Procedure Steps</h2> <h2 className="mb-4 text-lg font-semibold text-foreground">Procedure Steps</h2>
<div className="space-y-2"> <div className="space-y-2">
{decisions.map((decision, index) => { {decisions.map((decision, index) => {
const isCompleted = decision.answer === 'completed' const isCompleted = decision.answer === 'completed'
@@ -61,31 +61,31 @@ export function SessionTimeline({
<div <div
key={index} key={index}
className={cn( className={cn(
'glass-card rounded-xl p-4', 'bg-card border border-border rounded-xl p-4',
isCompleted && 'border-l-2 border-emerald-400/50' isCompleted && 'border-l-2 border-emerald-400/50'
)} )}
> >
<div className="flex items-start gap-3"> <div className="flex items-start gap-3">
<span className={cn( <span className={cn(
'mt-0.5 flex h-6 w-6 shrink-0 items-center justify-center rounded-full text-xs font-medium', 'mt-0.5 flex h-6 w-6 shrink-0 items-center justify-center rounded-full text-xs font-medium',
isCompleted ? 'bg-emerald-400/10 text-emerald-400' : 'bg-white/10 text-white/50' isCompleted ? 'bg-emerald-400/10 text-emerald-400' : 'bg-accent text-muted-foreground'
)}> )}>
{isCompleted ? '\u2713' : index + 1} {isCompleted ? '\u2713' : index + 1}
</span> </span>
<div className="min-w-0 flex-1"> <div className="min-w-0 flex-1">
<p className="font-medium text-white">{decision.question || 'Step'}</p> <p className="font-medium text-foreground">{decision.question || 'Step'}</p>
{decision.notes && ( {decision.notes && (
<p className="mt-1.5 rounded bg-white/5 p-2 text-sm text-white/40"> <p className="mt-1.5 rounded bg-white/5 p-2 text-sm text-muted-foreground">
Notes: {decision.notes} Notes: {decision.notes}
</p> </p>
)} )}
{decision.command_output && ( {decision.command_output && (
<p className="mt-1 text-sm text-white/40"> <p className="mt-1 text-sm text-muted-foreground">
Verification: {decision.command_output} Verification: {decision.command_output}
</p> </p>
)} )}
{decision.duration_seconds != null && ( {decision.duration_seconds != null && (
<p className="mt-1 text-xs text-white/30"> <p className="mt-1 text-xs text-muted-foreground">
Duration: {formatDuration(decision.duration_seconds)} Duration: {formatDuration(decision.duration_seconds)}
</p> </p>
)} )}
@@ -94,7 +94,7 @@ export function SessionTimeline({
<button <button
onClick={() => handleCopyStep(decision, index)} onClick={() => handleCopyStep(decision, index)}
title="Copy step to clipboard" title="Copy step to clipboard"
className="rounded p-1 text-white/30 hover:bg-white/10 hover:text-white" className="rounded p-1 text-muted-foreground hover:bg-accent hover:text-foreground"
> >
{copiedStepIndex === index ? ( {copiedStepIndex === index ? (
<Check className="h-4 w-4 text-emerald-400" /> <Check className="h-4 w-4 text-emerald-400" />
@@ -123,52 +123,52 @@ export function SessionTimeline({
// Default: troubleshooting decision timeline // Default: troubleshooting decision timeline
return ( return (
<div className="mb-8"> <div className="mb-8">
<h2 className="mb-4 text-lg font-semibold text-white">Decision Timeline</h2> <h2 className="mb-4 text-lg font-semibold text-foreground">Decision Timeline</h2>
<div className="space-y-4"> <div className="space-y-4">
<div className="flex items-center gap-3 text-sm"> <div className="flex items-center gap-3 text-sm">
<span className="h-3 w-3 rounded-full bg-white" /> <span className="h-3 w-3 rounded-full bg-foreground" />
<span className="text-white/40"> <span className="text-muted-foreground">
Session started: {formatDate(startedAt)} Session started: {formatDate(startedAt)}
</span> </span>
</div> </div>
{decisions.map((decision, index) => ( {decisions.map((decision, index) => (
<div key={index} className="ml-1 border-l-2 border-white/[0.06] pl-6"> <div key={index} className="ml-1 border-l-2 border-border pl-6">
<div className="relative"> <div className="relative">
<span className="absolute -left-[1.625rem] top-1 h-2 w-2 rounded-full bg-white/20" /> <span className="absolute -left-[1.625rem] top-1 h-2 w-2 rounded-full bg-muted-foreground" />
<div className="glass-card rounded-xl p-4"> <div className="bg-card border border-border rounded-xl p-4">
<div className="flex items-start justify-between gap-2"> <div className="flex items-start justify-between gap-2">
<div className="flex-1"> <div className="flex-1">
{decision.question && ( {decision.question && (
<p className="font-medium text-white">{decision.question}</p> <p className="font-medium text-foreground">{decision.question}</p>
)} )}
{decision.answer && ( {decision.answer && (
<p className="mt-1 text-sm text-white">Answer: {decision.answer}</p> <p className="mt-1 text-sm text-foreground">Answer: {decision.answer}</p>
)} )}
{decision.action_performed && ( {decision.action_performed && (
<p className="mt-1 text-sm text-white/40"> <p className="mt-1 text-sm text-muted-foreground">
Action: {decision.action_performed} Action: {decision.action_performed}
</p> </p>
)} )}
{decision.notes && ( {decision.notes && (
<p className="mt-2 rounded bg-white/5 p-2 text-sm text-white/40"> <p className="mt-2 rounded bg-white/5 p-2 text-sm text-muted-foreground">
Notes: {decision.notes} Notes: {decision.notes}
</p> </p>
)} )}
{decision.command_output && ( {decision.command_output && (
<div className="mt-2"> <div className="mt-2">
<p className="mb-1 text-xs font-medium text-white/50">Command Output</p> <p className="mb-1 text-xs font-medium text-muted-foreground">Command Output</p>
<pre className="overflow-x-auto rounded bg-white/5 p-2 text-xs font-mono text-white/60 whitespace-pre-wrap"> <pre className="overflow-x-auto rounded bg-white/5 p-2 text-xs font-mono text-muted-foreground whitespace-pre-wrap">
{decision.command_output} {decision.command_output}
</pre> </pre>
</div> </div>
)} )}
{decision.duration_seconds != null && ( {decision.duration_seconds != null && (
<p className="mt-2 text-xs text-white/50"> <p className="mt-2 text-xs text-muted-foreground">
Duration: {formatDuration(decision.duration_seconds)} Duration: {formatDuration(decision.duration_seconds)}
</p> </p>
)} )}
<p className="mt-2 text-xs text-white/40"> <p className="mt-2 text-xs text-muted-foreground">
{formatDate(decision.timestamp)} {formatDate(decision.timestamp)}
</p> </p>
</div> </div>
@@ -176,7 +176,7 @@ export function SessionTimeline({
<button <button
onClick={() => handleCopyStep(decision, index)} onClick={() => handleCopyStep(decision, index)}
title="Copy step to clipboard" title="Copy step to clipboard"
className="rounded p-1 text-white/30 hover:bg-white/10 hover:text-white" className="rounded p-1 text-muted-foreground hover:bg-accent hover:text-foreground"
> >
{copiedStepIndex === index ? ( {copiedStepIndex === index ? (
<Check className="h-4 w-4 text-emerald-400" /> <Check className="h-4 w-4 text-emerald-400" />

16
frontend/src/components/session/SharedSessionTreePreview.tsx
View File

@@ -7,11 +7,11 @@ interface SharedSessionTreePreviewProps {
} }
const nodeTypeColors: Record<string, string> = { const nodeTypeColors: Record<string, string> = {
root: 'bg-white', root: 'bg-foreground',
decision: 'bg-blue-400', decision: 'bg-blue-400',
action: 'bg-yellow-400', action: 'bg-yellow-400',
solution: 'bg-emerald-400', solution: 'bg-emerald-400',
information: 'bg-white/50', information: 'bg-muted-foreground',
} }
function getNodeTitle(node: Record<string, unknown>): string { function getNodeTitle(node: Record<string, unknown>): string {
@@ -36,7 +36,7 @@ function TreeNode({
const nodeType = (node.node_type as string) || 'decision' const nodeType = (node.node_type as string) || 'decision'
const isInPath = pathTaken.includes(nodeId) const isInPath = pathTaken.includes(nodeId)
const children = (node.children as Record<string, unknown>[]) || [] const children = (node.children as Record<string, unknown>[]) || []
const colorClass = nodeTypeColors[nodeType] || 'bg-white/50' const colorClass = nodeTypeColors[nodeType] || 'bg-muted-foreground'
return ( return (
<> <>
@@ -44,8 +44,8 @@ function TreeNode({
className={cn( className={cn(
'flex items-center gap-2 px-3 py-1.5 text-sm', 'flex items-center gap-2 px-3 py-1.5 text-sm',
isInPath isInPath
? 'rounded-md border-l-2 border-white/40 bg-white/10 font-medium text-white' ? 'rounded-md border-l-2 border-muted-foreground bg-accent font-medium text-foreground'
: 'text-white/30' : 'text-muted-foreground'
)} )}
style={{ paddingLeft: `${depth * 16 + 12}px` }} style={{ paddingLeft: `${depth * 16 + 12}px` }}
> >
@@ -75,9 +75,9 @@ export function SharedSessionTreePreview({
} }
return ( return (
<div className="glass-card rounded-2xl"> <div className="bg-card border border-border rounded-2xl">
<div className="sticky top-0 z-10 rounded-t-2xl border-b border-white/[0.06] bg-black/80 px-6 py-4 backdrop-blur"> <div className="sticky top-0 z-10 rounded-t-2xl border-b border-border bg-black/80 px-6 py-4 backdrop-blur">
<h3 className="text-sm font-semibold text-white">Tree Structure</h3> <h3 className="text-sm font-semibold text-foreground">Tree Structure</h3>
</div> </div>
<div className="max-h-[600px] overflow-y-auto py-2"> <div className="max-h-[600px] overflow-y-auto py-2">
<TreeNode node={treeStructure as unknown as Record<string, unknown>} depth={0} pathTaken={pathTaken} /> <TreeNode node={treeStructure as unknown as Record<string, unknown>} depth={0} pathTaken={pathTaken} />

46
frontend/src/components/session/StepRatingModal.tsx
View File

@@ -78,19 +78,19 @@ export function StepRatingModal({
return ( return (
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm p-4"> <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm p-4">
<div className="glass-card w-full max-w-2xl max-h-[90vh] flex flex-col rounded-2xl shadow-lg"> <div className="bg-card border border-border w-full max-w-2xl max-h-[90vh] flex flex-col rounded-2xl shadow-lg">
{/* Header */} {/* Header */}
<div className="flex items-center justify-between border-b border-white/[0.06] px-6 py-4"> <div className="flex items-center justify-between border-b border-border px-6 py-4">
<div> <div>
<h2 className="text-lg font-semibold text-white">Rate Your Experience</h2> <h2 className="text-lg font-semibold text-foreground">Rate Your Experience</h2>
<p className="mt-1 text-sm text-white/70"> <p className="mt-1 text-sm text-muted-foreground">
Help others by rating the steps you used ({librarySteps.length} step{librarySteps.length !== 1 ? 's' : ''}) Help others by rating the steps you used ({librarySteps.length} step{librarySteps.length !== 1 ? 's' : ''})
</p> </p>
</div> </div>
<button <button
onClick={onClose} onClick={onClose}
disabled={isSaving} disabled={isSaving}
className="rounded-full p-1 text-white/40 hover:bg-white/10 hover:text-white disabled:opacity-50" className="rounded-full p-1 text-muted-foreground hover:bg-accent hover:text-foreground disabled:opacity-50"
> >
<X className="h-5 w-5" /> <X className="h-5 w-5" />
</button> </button>
@@ -102,14 +102,14 @@ export function StepRatingModal({
{librarySteps.map((step) => { {librarySteps.map((step) => {
const rating = getRating(step.id) const rating = getRating(step.id)
return ( return (
<div key={step.id} className="rounded-lg border border-white/[0.06] bg-[#0a0a0a] p-4"> <div key={step.id} className="rounded-lg border border-border bg-[#0a0a0a] p-4">
{/* Step Title */} {/* Step Title */}
<h3 className="font-medium text-white">{step.title}</h3> <h3 className="font-medium text-foreground">{step.title}</h3>
<p className="mt-1 text-sm text-white/40 capitalize">{step.step_type}</p> <p className="mt-1 text-sm text-muted-foreground capitalize">{step.step_type}</p>
{/* Star Rating */} {/* Star Rating */}
<div className="mt-3"> <div className="mt-3">
<label className="mb-1 block text-sm font-medium text-white"> <label className="mb-1 block text-sm font-medium text-foreground">
Rating Rating
</label> </label>
<StarRating <StarRating
@@ -121,7 +121,7 @@ export function StepRatingModal({
{/* Was this helpful? */} {/* Was this helpful? */}
<div className="mt-3"> <div className="mt-3">
<label className="mb-2 block text-sm font-medium text-white"> <label className="mb-2 block text-sm font-medium text-foreground">
Was this helpful? Was this helpful?
</label> </label>
<div className="flex gap-2"> <div className="flex gap-2">
@@ -133,7 +133,7 @@ export function StepRatingModal({
'flex items-center gap-2 rounded-md border px-4 py-2 text-sm font-medium transition-colors', 'flex items-center gap-2 rounded-md border px-4 py-2 text-sm font-medium transition-colors',
rating?.helpful === true rating?.helpful === true
? 'border-emerald-400/20 bg-emerald-400/10 text-emerald-400' ? 'border-emerald-400/20 bg-emerald-400/10 text-emerald-400'
: 'border-white/10 text-white/60 hover:bg-white/10 hover:text-white', : 'border-border text-muted-foreground hover:bg-accent hover:text-foreground',
'disabled:opacity-50' 'disabled:opacity-50'
)} )}
> >
@@ -148,7 +148,7 @@ export function StepRatingModal({
'flex items-center gap-2 rounded-md border px-4 py-2 text-sm font-medium transition-colors', 'flex items-center gap-2 rounded-md border px-4 py-2 text-sm font-medium transition-colors',
rating?.helpful === false rating?.helpful === false
? 'border-red-400/20 bg-red-400/10 text-red-400' ? 'border-red-400/20 bg-red-400/10 text-red-400'
: 'border-white/10 text-white/60 hover:bg-white/10 hover:text-white', : 'border-border text-muted-foreground hover:bg-accent hover:text-foreground',
'disabled:opacity-50' 'disabled:opacity-50'
)} )}
> >
@@ -160,8 +160,8 @@ export function StepRatingModal({
{/* Optional Review */} {/* Optional Review */}
<div className="mt-3"> <div className="mt-3">
<label htmlFor={`review-${step.id}`} className="mb-1 block text-sm font-medium text-white"> <label htmlFor={`review-${step.id}`} className="mb-1 block text-sm font-medium text-foreground">
Review <span className="text-white/40">(optional)</span> Review <span className="text-muted-foreground">(optional)</span>
</label> </label>
<textarea <textarea
id={`review-${step.id}`} id={`review-${step.id}`}
@@ -172,13 +172,13 @@ export function StepRatingModal({
rows={2} rows={2}
placeholder="Share your experience with this step..." placeholder="Share your experience with this step..."
className={cn( className={cn(
'w-full rounded-md border border-white/10 bg-black/50 px-3 py-2 text-sm text-white', 'w-full rounded-md border border-border bg-card px-3 py-2 text-sm text-foreground',
'placeholder:text-white/40', 'placeholder:text-muted-foreground',
'focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20', 'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20',
'disabled:opacity-50' 'disabled:opacity-50'
)} )}
/> />
<p className="mt-1 text-xs text-white/40 text-right"> <p className="mt-1 text-xs text-muted-foreground text-right">
{rating?.review?.length || 0}/500 {rating?.review?.length || 0}/500
</p> </p>
</div> </div>
@@ -189,14 +189,14 @@ export function StepRatingModal({
</div> </div>
{/* Footer */} {/* Footer */}
<div className="flex justify-end gap-2 border-t border-white/[0.06] px-6 py-4"> <div className="flex justify-end gap-2 border-t border-border px-6 py-4">
<button <button
type="button" type="button"
onClick={onClose} onClick={onClose}
disabled={isSaving} disabled={isSaving}
className={cn( className={cn(
'rounded-md border border-white/10 px-4 py-2 text-sm font-medium text-white/60', 'rounded-md border border-border px-4 py-2 text-sm font-medium text-muted-foreground',
'hover:bg-white/10 hover:text-white disabled:opacity-50' 'hover:bg-accent hover:text-foreground disabled:opacity-50'
)} )}
> >
Skip Skip
@@ -206,8 +206,8 @@ export function StepRatingModal({
onClick={handleSubmit} onClick={handleSubmit}
disabled={isSaving} disabled={isSaving}
className={cn( className={cn(
'rounded-md bg-white px-4 py-2 text-sm font-medium text-black', 'rounded-md bg-gradient-brand px-4 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20',
'hover:bg-white/90 disabled:opacity-50' 'hover:opacity-90 disabled:opacity-50'
)} )}
> >
{isSaving ? 'Submitting...' : 'Submit Ratings'} {isSaving ? 'Submitting...' : 'Submit Ratings'}

20
frontend/src/components/session/VariablePromptModal.tsx
View File

@@ -22,14 +22,14 @@ export function VariablePromptModal({ prompt, onSubmit, onCancel }: VariableProm
return ( return (
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm"> <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/80 backdrop-blur-sm">
<div className="glass-card w-full max-w-md rounded-2xl p-6 shadow-lg"> <div className="bg-card border border-border w-full max-w-md rounded-2xl p-6 shadow-lg">
<h2 className="mb-1 text-lg font-semibold text-white">Input Required</h2> <h2 className="mb-1 text-lg font-semibold text-foreground">Input Required</h2>
<p className="mb-4 text-sm text-white/40"> <p className="mb-4 text-sm text-muted-foreground">
This step requires you to provide a value. This step requires you to provide a value.
</p> </p>
<form onSubmit={handleSubmit}> <form onSubmit={handleSubmit}>
<label className="mb-2 block text-sm font-medium text-white/70"> <label className="mb-2 block text-sm font-medium text-muted-foreground">
{prompt} {prompt}
</label> </label>
<input <input
@@ -39,8 +39,8 @@ export function VariablePromptModal({ prompt, onSubmit, onCancel }: VariableProm
placeholder="Enter value..." placeholder="Enter value..."
autoFocus autoFocus
className={cn( className={cn(
'w-full rounded-lg border border-white/10 bg-black/50 px-3 py-2 text-sm text-white', 'w-full rounded-lg border border-border bg-card px-3 py-2 text-sm text-foreground',
'placeholder:text-white/30 focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20' 'placeholder:text-muted-foreground focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20'
)} )}
/> />
@@ -49,8 +49,8 @@ export function VariablePromptModal({ prompt, onSubmit, onCancel }: VariableProm
type="submit" type="submit"
disabled={!value.trim()} disabled={!value.trim()}
className={cn( className={cn(
'flex-1 rounded-lg bg-white px-4 py-2 text-sm font-medium text-black', 'flex-1 rounded-lg bg-gradient-brand px-4 py-2 text-sm font-medium text-white shadow-lg shadow-primary/20',
'hover:bg-white/90 disabled:opacity-50 disabled:cursor-not-allowed' 'hover:opacity-90 disabled:opacity-50 disabled:cursor-not-allowed'
)} )}
> >
Continue Continue
@@ -59,8 +59,8 @@ export function VariablePromptModal({ prompt, onSubmit, onCancel }: VariableProm
type="button" type="button"
onClick={onCancel} onClick={onCancel}
className={cn( className={cn(
'rounded-lg border border-white/10 px-4 py-2 text-sm font-medium text-white/60', 'rounded-lg border border-border px-4 py-2 text-sm font-medium text-muted-foreground',
'hover:bg-white/10 hover:text-white' 'hover:bg-accent hover:text-foreground'
)} )}
> >
Skip Skip

30
frontend/src/components/tree-editor/NodePicker.tsx
View File

@@ -11,9 +11,9 @@ const CREATE_SOLUTION = `${CREATE_PREFIX}solution__`
// Unicode symbols for node types (works in select options) // Unicode symbols for node types (works in select options)
const NODE_TYPE_SYMBOLS: Record<NodeType, string> = { const NODE_TYPE_SYMBOLS: Record<NodeType, string> = {
decision: 'ⓘ', // Information/question symbol decision: '\u24D8', // Information/question symbol
action: '⚡', // Lightning bolt for action action: '\u26A1', // Lightning bolt for action
solution: '✓' // Checkmark for solution solution: '\u2713' // Checkmark for solution
} }
// Node type labels for UI // Node type labels for UI
@@ -139,7 +139,7 @@ export function NodePicker({
return ( return (
<div className={className}> <div className={className}>
{label && ( {label && (
<label className="mb-1 block text-sm font-medium text-white"> <label className="mb-1 block text-sm font-medium text-foreground">
{label} {label}
</label> </label>
)} )}
@@ -147,8 +147,8 @@ export function NodePicker({
{/* Inline node creation UI */} {/* Inline node creation UI */}
{creatingNodeType ? ( {creatingNodeType ? (
<div className="space-y-2"> <div className="space-y-2">
<div className="flex items-center gap-2 rounded-md border border-white/20 bg-white/[0.04] p-2"> <div className="flex items-center gap-2 rounded-md border border-border bg-accent/50 p-2">
<span className="text-xs font-medium text-white"> <span className="text-xs font-medium text-foreground">
New {NODE_TYPE_LABELS[creatingNodeType]}: New {NODE_TYPE_LABELS[creatingNodeType]}:
</span> </span>
<input <input
@@ -159,9 +159,9 @@ export function NodePicker({
onKeyDown={handleKeyDown} onKeyDown={handleKeyDown}
placeholder={creatingNodeType === 'decision' ? 'Enter question...' : 'Enter title...'} placeholder={creatingNodeType === 'decision' ? 'Enter question...' : 'Enter title...'}
className={cn( className={cn(
'flex-1 rounded-md border border-white/10 px-2 py-1 text-sm', 'flex-1 rounded-md border border-border px-2 py-1 text-sm',
'bg-black/50 text-white placeholder:text-white/40', 'bg-card text-foreground placeholder:text-muted-foreground',
'focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20' 'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20'
)} )}
/> />
</div> </div>
@@ -169,7 +169,7 @@ export function NodePicker({
<button <button
type="button" type="button"
onClick={handleCancelCreate} onClick={handleCancelCreate}
className="flex-1 rounded-md border border-white/10 px-3 py-1.5 text-xs font-medium text-white/60 hover:bg-white/10 hover:text-white" className="flex-1 rounded-md border border-border px-3 py-1.5 text-xs font-medium text-muted-foreground hover:bg-accent hover:text-foreground"
> >
Cancel Cancel
</button> </button>
@@ -179,7 +179,7 @@ export function NodePicker({
disabled={!newNodeTitle.trim()} disabled={!newNodeTitle.trim()}
className={cn( className={cn(
'flex-1 rounded-md px-3 py-1.5 text-xs font-medium', 'flex-1 rounded-md px-3 py-1.5 text-xs font-medium',
'bg-white text-black hover:bg-white/90', 'bg-gradient-brand text-white shadow-lg shadow-primary/20 hover:opacity-90',
'disabled:opacity-50 disabled:cursor-not-allowed' 'disabled:opacity-50 disabled:cursor-not-allowed'
)} )}
> >
@@ -194,9 +194,9 @@ export function NodePicker({
onChange={(e) => handleChange(e.target.value)} onChange={(e) => handleChange(e.target.value)}
className={cn( className={cn(
'block w-full rounded-md border px-3 py-2 text-sm', 'block w-full rounded-md border px-3 py-2 text-sm',
'bg-black/50 text-white', 'bg-card text-foreground',
'focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20', 'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20',
error ? 'border-red-400' : 'border-white/10' error ? 'border-red-400' : 'border-border'
)} )}
> >
<option value="">{placeholder}</option> <option value="">{placeholder}</option>
@@ -242,7 +242,7 @@ export function NodePicker({
{/* Show what's selected */} {/* Show what's selected */}
{value && selectedNode && ( {value && selectedNode && (
<p className="mt-1 text-xs text-white/40"> <p className="mt-1 text-xs text-muted-foreground">
→ {selectedNode.label} → {selectedNode.label}
</p> </p>
)} )}

46
frontend/src/components/tree-editor/TreeMetadataForm.tsx
View File

@@ -56,12 +56,12 @@ export function TreeMetadataForm() {
) )
return ( return (
<div className="space-y-4 glass-card rounded-2xl p-4"> <div className="space-y-4 bg-card border border-border rounded-2xl p-4">
<h2 className="text-sm font-semibold text-white">Tree Details</h2> <h2 className="text-sm font-semibold text-foreground">Tree Details</h2>
{/* Name */} {/* Name */}
<div> <div>
<label htmlFor="tree-name" className="block text-sm font-medium text-white"> <label htmlFor="tree-name" className="block text-sm font-medium text-foreground">
Name <span className="text-red-400">*</span> Name <span className="text-red-400">*</span>
</label> </label>
<input <input
@@ -72,9 +72,9 @@ export function TreeMetadataForm() {
placeholder="e.g., VDA Registration Troubleshooting" placeholder="e.g., VDA Registration Troubleshooting"
className={cn( className={cn(
'mt-1 block w-full rounded-md border px-3 py-2 text-sm', 'mt-1 block w-full rounded-md border px-3 py-2 text-sm',
'bg-black/50 text-white placeholder:text-white/40', 'bg-card text-foreground placeholder:text-muted-foreground',
'focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20', 'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20',
nameError ? 'border-red-400' : 'border-white/10' nameError ? 'border-red-400' : 'border-border'
)} )}
/> />
{nameError && <p className="mt-1 text-xs text-red-400">{nameError.message}</p>} {nameError && <p className="mt-1 text-xs text-red-400">{nameError.message}</p>}
@@ -82,7 +82,7 @@ export function TreeMetadataForm() {
{/* Description */} {/* Description */}
<div> <div>
<label htmlFor="tree-description" className="block text-sm font-medium text-white"> <label htmlFor="tree-description" className="block text-sm font-medium text-foreground">
Description Description
</label> </label>
<textarea <textarea
@@ -92,16 +92,16 @@ export function TreeMetadataForm() {
placeholder="Brief description of what this tree troubleshoots..." placeholder="Brief description of what this tree troubleshoots..."
rows={2} rows={2}
className={cn( className={cn(
'mt-1 block w-full rounded-md border border-white/10 px-3 py-2 text-sm', 'mt-1 block w-full rounded-md border border-border px-3 py-2 text-sm',
'bg-black/50 text-white placeholder:text-white/40', 'bg-card text-foreground placeholder:text-muted-foreground',
'focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20' 'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20'
)} )}
/> />
</div> </div>
{/* Category */} {/* Category */}
<div> <div>
<label htmlFor="tree-category" className="block text-sm font-medium text-white"> <label htmlFor="tree-category" className="block text-sm font-medium text-foreground">
Category Category
</label> </label>
{!customCategory ? ( {!customCategory ? (
@@ -110,9 +110,9 @@ export function TreeMetadataForm() {
value={categoryId || ''} value={categoryId || ''}
onChange={(e) => handleCategoryChange(e.target.value)} onChange={(e) => handleCategoryChange(e.target.value)}
className={cn( className={cn(
'mt-1 block w-full rounded-md border border-white/10 px-3 py-2 text-sm', 'mt-1 block w-full rounded-md border border-border px-3 py-2 text-sm',
'bg-black/50 text-white', 'bg-card text-foreground',
'focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20' 'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20'
)} )}
> >
<option value="">No category</option> <option value="">No category</option>
@@ -132,9 +132,9 @@ export function TreeMetadataForm() {
onChange={(e) => setCategory(e.target.value)} onChange={(e) => setCategory(e.target.value)}
placeholder="Enter new category" placeholder="Enter new category"
className={cn( className={cn(
'block flex-1 rounded-md border border-white/10 px-3 py-2 text-sm', 'block flex-1 rounded-md border border-border px-3 py-2 text-sm',
'bg-black/50 text-white placeholder:text-white/40', 'bg-card text-foreground placeholder:text-muted-foreground',
'focus:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20' 'focus:border-primary focus:outline-none focus:ring-1 focus:ring-primary/20'
)} )}
autoFocus autoFocus
/> />
@@ -144,7 +144,7 @@ export function TreeMetadataForm() {
setCategory('') setCategory('')
setCategoryId(null) setCategoryId(null)
}} }}
className="rounded-md border border-white/10 px-3 py-2 text-sm text-white/60 hover:bg-white/10 hover:text-white" className="rounded-md border border-border px-3 py-2 text-sm text-muted-foreground hover:bg-accent hover:text-foreground"
> >
Cancel Cancel
</button> </button>
@@ -154,7 +154,7 @@ export function TreeMetadataForm() {
{/* Tags */} {/* Tags */}
<div> <div>
<label className="block text-sm font-medium text-white">Tags</label> <label className="block text-sm font-medium text-foreground">Tags</label>
<div className="mt-1"> <div className="mt-1">
<TagInput tags={tags} onChange={setTags} maxTags={10} placeholder="Add tags..." /> <TagInput tags={tags} onChange={setTags} maxTags={10} placeholder="Add tags..." />
</div> </div>
@@ -162,13 +162,13 @@ export function TreeMetadataForm() {
{/* Visibility */} {/* Visibility */}
<div> <div>
<label className="block text-sm font-medium text-white">Visibility</label> <label className="block text-sm font-medium text-foreground">Visibility</label>
<div className="mt-2 flex gap-4"> <div className="mt-2 flex gap-4">
<label <label
className={cn( className={cn(
'flex cursor-pointer items-center gap-2 rounded-md border px-4 py-2', 'flex cursor-pointer items-center gap-2 rounded-md border px-4 py-2',
'transition-colors', 'transition-colors',
!isPublic ? 'border-white/30 bg-white/10 text-white' : 'border-white/10 text-white/60 hover:bg-white/[0.06]' !isPublic ? 'border-primary/30 bg-accent text-foreground' : 'border-border text-muted-foreground hover:bg-accent/50'
)} )}
> >
<input <input
@@ -185,7 +185,7 @@ export function TreeMetadataForm() {
className={cn( className={cn(
'flex cursor-pointer items-center gap-2 rounded-md border px-4 py-2', 'flex cursor-pointer items-center gap-2 rounded-md border px-4 py-2',
'transition-colors', 'transition-colors',
isPublic ? 'border-white/30 bg-white/10 text-white' : 'border-white/10 text-white/60 hover:bg-white/[0.06]' isPublic ? 'border-primary/30 bg-accent text-foreground' : 'border-border text-muted-foreground hover:bg-accent/50'
)} )}
> >
<input <input
@@ -199,7 +199,7 @@ export function TreeMetadataForm() {
<span className="text-sm">Public</span> <span className="text-sm">Public</span>
</label> </label>
</div> </div>
<p className="mt-1 text-xs text-white/40"> <p className="mt-1 text-xs text-muted-foreground">
{isPublic {isPublic
? 'Anyone can view this tree' ? 'Anyone can view this tree'
: 'Only you and your team can view this tree'} : 'Only you and your team can view this tree'}