f4ce1595d6
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>
230 lines
8.9 KiB
TypeScript
230 lines
8.9 KiB
TypeScript
import { useState } from 'react'
|
|
import { Link } from 'react-router-dom'
|
|
import { Pencil, Globe, Lock, ChevronUp, ChevronDown, GitBranch, FileText } from 'lucide-react'
|
|
import type { TreeListItem } from '@/types'
|
|
import { TagBadges } from '@/components/common/TagBadges'
|
|
import { AddToFolderMenu } from './AddToFolderMenu'
|
|
import { cn } from '@/lib/utils'
|
|
import { usePermissions } from '@/hooks/usePermissions'
|
|
|
|
interface TreeTableViewProps {
|
|
trees: TreeListItem[]
|
|
onStartSession: (treeId: string) => void
|
|
onTagClick: (tag: string) => void
|
|
onFolderCreated: (parentId?: string | null) => void
|
|
onDeleteTree: (tree: TreeListItem) => void
|
|
onSortChange?: (sortBy: string) => void
|
|
onForkTree?: (treeId: string) => void
|
|
}
|
|
|
|
type SortColumn = 'name' | 'category' | 'version' | 'usage' | 'updated'
|
|
|
|
export function TreeTableView({
|
|
trees,
|
|
onStartSession,
|
|
onTagClick,
|
|
onFolderCreated,
|
|
onSortChange,
|
|
onForkTree,
|
|
}: TreeTableViewProps) {
|
|
const { canEditTree } = usePermissions()
|
|
const [sortColumn, setSortColumn] = useState<SortColumn | null>(null)
|
|
const [sortDirection, setSortDirection] = useState<'asc' | 'desc'>('asc')
|
|
|
|
const handleSort = (column: SortColumn) => {
|
|
const newDirection =
|
|
sortColumn === column && sortDirection === 'asc' ? 'desc' : 'asc'
|
|
setSortColumn(column)
|
|
setSortDirection(newDirection)
|
|
|
|
// Map to API sort values
|
|
const sortMap: Record<string, string> = {
|
|
name_asc: 'name',
|
|
name_desc: 'name_desc',
|
|
usage_asc: 'usage_count',
|
|
usage_desc: 'usage_count',
|
|
updated_asc: 'updated_at',
|
|
updated_desc: 'updated_at',
|
|
version_asc: 'version',
|
|
version_desc: 'version',
|
|
}
|
|
|
|
const sortKey = `${column}_${newDirection}`
|
|
const apiSort = sortMap[sortKey] || 'usage_count'
|
|
onSortChange?.(apiSort)
|
|
}
|
|
|
|
const getSortIcon = (column: SortColumn) => {
|
|
if (sortColumn !== column) return null
|
|
return sortDirection === 'asc' ? (
|
|
<ChevronUp className="h-3.5 w-3.5" />
|
|
) : (
|
|
<ChevronDown className="h-3.5 w-3.5" />
|
|
)
|
|
}
|
|
|
|
const formatDate = (dateString: string) => {
|
|
const date = new Date(dateString)
|
|
return date.toLocaleDateString(undefined, { month: 'short', day: 'numeric', year: 'numeric' })
|
|
}
|
|
|
|
return (
|
|
<div className="overflow-x-auto rounded-2xl border border-white/[0.06]">
|
|
<table className="w-full">
|
|
<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-white/50 cursor-pointer hover:text-white"
|
|
onClick={() => handleSort('name')}
|
|
>
|
|
<div className="flex items-center gap-1">
|
|
Name
|
|
{getSortIcon('name')}
|
|
</div>
|
|
</th>
|
|
<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-white/50 cursor-pointer hover:text-white"
|
|
onClick={() => handleSort('category')}
|
|
>
|
|
<div className="flex items-center gap-1">
|
|
Category
|
|
{getSortIcon('category')}
|
|
</div>
|
|
</th>
|
|
<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-white/50 cursor-pointer hover:text-white"
|
|
onClick={() => handleSort('version')}
|
|
>
|
|
<div className="flex items-center justify-center gap-1">
|
|
Ver.
|
|
{getSortIcon('version')}
|
|
</div>
|
|
</th>
|
|
<th
|
|
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">
|
|
Uses
|
|
{getSortIcon('usage')}
|
|
</div>
|
|
</th>
|
|
<th
|
|
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">
|
|
Updated
|
|
{getSortIcon('updated')}
|
|
</div>
|
|
</th>
|
|
<th className="px-4 py-3 text-right text-sm font-medium text-white/50">
|
|
Actions
|
|
</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="bg-transparent">
|
|
{trees.map((tree) => (
|
|
<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-white truncate max-w-[200px]">
|
|
{tree.name}
|
|
</span>
|
|
{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">
|
|
<FileText className="h-3 w-3" />
|
|
Draft
|
|
</span>
|
|
)}
|
|
{tree.is_public ? (
|
|
<span title="Public tree">
|
|
<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-white/40 flex-shrink-0" />
|
|
</span>
|
|
)}
|
|
</div>
|
|
</td>
|
|
<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-white/10 px-2 py-0.5 text-xs text-white/70">
|
|
{tree.category_info.name}
|
|
</span>
|
|
)}
|
|
</td>
|
|
<td className="hidden xl:table-cell px-4 py-3">
|
|
{tree.tags && tree.tags.length > 0 && (
|
|
<TagBadges tags={tree.tags} maxVisible={2} onTagClick={onTagClick} />
|
|
)}
|
|
</td>
|
|
<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-white/70">
|
|
{tree.usage_count}
|
|
</td>
|
|
<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">
|
|
<div className="flex items-center justify-end gap-2">
|
|
<AddToFolderMenu treeId={tree.id} onFolderCreated={onFolderCreated} />
|
|
{onForkTree && (
|
|
<button
|
|
type="button"
|
|
onClick={() => onForkTree(tree.id)}
|
|
className={cn(
|
|
'rounded-md border border-white/10 p-1.5 text-white/60',
|
|
'hover:bg-white/10 hover:text-white'
|
|
)}
|
|
title="Fork tree"
|
|
>
|
|
<GitBranch className="h-3.5 w-3.5" />
|
|
</button>
|
|
)}
|
|
{canEditTree({ author_id: tree.author_id, account_id: tree.account_id }) && (
|
|
<Link
|
|
to={`/trees/${tree.id}/edit`}
|
|
className={cn(
|
|
'rounded-md border border-white/10 p-1.5 text-white/60',
|
|
'hover:bg-white/10 hover:text-white'
|
|
)}
|
|
title="Edit tree"
|
|
>
|
|
<Pencil className="h-3.5 w-3.5" />
|
|
</Link>
|
|
)}
|
|
<button
|
|
type="button"
|
|
onClick={() => onStartSession(tree.id)}
|
|
className={cn(
|
|
'rounded-md bg-white px-3 py-1.5 text-xs font-medium text-black',
|
|
'hover:bg-white/90 whitespace-nowrap'
|
|
)}
|
|
>
|
|
Start
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
)
|
|
}
|