spool-memory 0.2.3

import { useConfig } from '@/state/config'
import { Card, CardContent } from '@/components/ui/card'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { FolderOpen } from 'lucide-react'

export function ConfigPanel() {
  const cfg = useConfig()

  if (cfg.vaultRoot) {
    return (
      <Card className="border-none bg-muted/40">
        <CardContent className="p-4">
          <div className="flex items-center gap-2 text-xs text-muted-foreground">
            <FolderOpen className="h-3.5 w-3.5" />
            <span className="truncate">{cfg.vaultRoot}</span>
          </div>
        </CardContent>
      </Card>
    )
  }

  return (
    <Card>
      <CardContent className="p-4 space-y-3">
        <div className="grid gap-2">
          <Label htmlFor="vault-root" className="text-sm font-medium">
            知识库路径
          </Label>
          <p className="text-xs text-muted-foreground">
            指向你的 Obsidian vault 根目录
          </p>
          <Input
            id="vault-root"
            value={cfg.vaultRoot}
            placeholder="/Users/you/Documents/KnowledgeVault"
            onChange={(e) => cfg.setVaultRoot(e.target.value)}
          />
        </div>
      </CardContent>
    </Card>
  )
}