frontmatter in skills files

2026-02-18 01:23:22 +00:00
parent 030cf9fbd3
commit c2660cd125
16 changed files with 959 additions and 506 deletions
@@ -1,9 +1,8 @@
 import { useState, useRef, useEffect, type KeyboardEvent } from 'react';
-import { useNavigate, Link } from 'react-router';
+import { useNavigate } from 'react-router';
 import {
  Send,
  ChevronDown,
-  ChevronUp,
  Check,
  Paperclip,
  Link as LinkIcon,
@@ -14,9 +13,8 @@ import {
 } from 'lucide-react';
 import { toast } from 'sonner';
 import { useClient } from 'hooks/useClient';
-import { useUserState } from '@/state/useUserState';
 import { Button } from '@/components/ui/button';
-import { Card } from '@/components/Card';
+import { Widget } from '@/components/Widget';
 import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogDescription } from '@/components/ui/dialog';
 import {
  DropdownMenu,
@@ -39,7 +37,6 @@ export const ChatLauncher = () => {
  const [model, setModel] = useState<string | null>(settings.chat.defaultModel);
  const [input, setInput] = useState('');
  const [attachments, setAttachments] = useState<Attachment[]>([]);
-  const [collapsed, setCollapsed] = useUserState('widget:chatLauncher:collapsed', true);
  const [urlDialogOpen, setUrlDialogOpen] = useState(false);
  const [urlInput, setUrlInput] = useState('');
  const textareaRef = useRef<HTMLTextAreaElement | null>(null);
@@ -153,172 +150,154 @@ export const ChatLauncher = () => {
  }, [input]);

  return (
-    <div className="w-full">
-      <Card className="overflow-hidden">
-        <div className={`flex items-center justify-between px-4 pt-3 ${collapsed ? 'pb-3' : 'pb-1'}`}>
-          <Link
-            to="/chat/new"
-            className="text-xs font-semibold text-duck-dark/60 uppercase tracking-wide hover:underline"
-          >
-            Start Chat
-          </Link>
-          <button
-            onClick={() => setCollapsed((c) => !c)}
-            className="text-duck-dark/40 hover:text-duck-dark/70 cursor-pointer transition-colors"
-          >
-            {collapsed ? <ChevronDown className="h-4 w-4" /> : <ChevronUp className="h-4 w-4" />}
-          </button>
-        </div>
-        {!collapsed && (
-          <>
-            <div className="p-4 pb-2 pt-1">
-              {attachments.length > 0 && (
-                <div className="mb-2 flex flex-wrap gap-1.5">
-                  {attachments.map((a, i) => (
-                    <span
-                      key={i}
-                      className="relative inline-flex items-center gap-1 px-2 py-1 text-xs bg-duck-teal/10 text-duck-teal rounded-md max-w-[240px] group"
-                    >
-                      {a.loading ? (
-                        <Loader2 className="h-3 w-3 shrink-0 animate-spin" />
-                      ) : a.type === 'image' && a.dataUrl ? (
-                        <img src={a.dataUrl} alt={a.filename} className="h-8 w-8 shrink-0 rounded object-cover" />
-                      ) : a.type === 'image' ? (
-                        <Image className="h-3 w-3 shrink-0" />
-                      ) : (
-                        <LinkIcon className="h-3 w-3 shrink-0" />
-                      )}
-                      <span className="truncate">
-                        {a.type === 'image' ? a.filename : a.loading ? a.url : a.title || a.url}
-                      </span>
-                      <button
-                        type="button"
-                        onClick={() => setAttachments((prev) => prev.filter((_, j) => j !== i))}
-                        className="shrink-0 hover:text-duck-dark cursor-pointer"
-                      >
-                        <X className="h-3 w-3" />
-                      </button>
-                    </span>
-                  ))}
-                </div>
-              )}
-              <div className="flex items-end gap-2">
-                <DropdownMenu>
-                  <DropdownMenuTrigger asChild>
-                    <button
-                      type="button"
-                      className="shrink-0 h-10 w-10 flex items-center justify-center rounded-lg text-duck-dark/40 hover:text-duck-dark/70 hover:bg-duck-dark/5 transition-colors cursor-pointer"
-                    >
-                      <Paperclip className="h-4 w-4" />
-                    </button>
-                  </DropdownMenuTrigger>
-                  <DropdownMenuContent side="top" align="start" className="z-[600]">
-                    <DropdownMenuItem className="cursor-pointer" onSelect={() => imageInputRef.current?.click()}>
-                      <Image className="mr-2 h-4 w-4" />
-                      Image
-                    </DropdownMenuItem>
-                    <DropdownMenuItem className="cursor-pointer">
-                      <FileText className="mr-2 h-4 w-4" />
-                      Text File
-                    </DropdownMenuItem>
-                    <DropdownMenuItem className="cursor-pointer">
-                      <FileText className="mr-2 h-4 w-4" />
-                      PDF
-                    </DropdownMenuItem>
-                    <DropdownMenuItem className="cursor-pointer" onSelect={() => setUrlDialogOpen(true)}>
-                      <LinkIcon className="mr-2 h-4 w-4" />
-                      Webpage URL
-                    </DropdownMenuItem>
-                  </DropdownMenuContent>
-                </DropdownMenu>
-                <input
-                  ref={imageInputRef}
-                  type="file"
-                  accept="image/*"
-                  className="hidden"
-                  onChange={(ev) => {
-                    const file = ev.target.files?.[0];
-                    if (file) handleAttachImage(file);
-                    ev.target.value = '';
-                  }}
-                />
-                <textarea
-                  ref={textareaRef}
-                  value={input}
-                  onChange={(ev) => setInput(ev.target.value)}
-                  onKeyDown={handleKeyDown}
-                  onPaste={(ev) => {
-                    const items = ev.clipboardData?.items;
-                    if (!items) return;
-                    for (const item of Array.from(items)) {
-                      if (item.type.startsWith('image/')) {
-                        ev.preventDefault();
-                        const file = item.getAsFile();
-                        if (file) handleAttachImage(file);
-                        return;
-                      }
-                    }
-                  }}
-                  placeholder="What do you want to work on now?"
-                  rows={1}
-                  className="flex-1 resize-none bg-transparent px-2 py-2 text-duck-dark placeholder:text-duck-dark/30 focus:outline-none text-lg"
-                />
-                <Button
-                  onClick={handleSubmit}
-                  disabled={!input.trim()}
-                  size="icon"
-                  className="shrink-0 h-10 w-10 bg-duck-teal hover:bg-duck-teal/90 cursor-pointer disabled:opacity-40"
+    <>
+      <Widget title="Start Chat">
+        <div className="p-4 pb-2 pt-1">
+          {attachments.length > 0 && (
+            <div className="mb-2 flex flex-wrap gap-1.5">
+              {attachments.map((a, i) => (
+                <span
+                  key={i}
+                  className="relative inline-flex items-center gap-1 px-2 py-1 text-xs bg-duck-teal/10 text-duck-teal rounded-md max-w-[240px] group"
                >
-                  <Send className="h-4 w-4" />
-                </Button>
-              </div>
-            </div>
-
-            <div className="flex items-center justify-between px-4 pb-3">
-              <div className="flex items-center gap-1 rounded-lg bg-duck-dark/5 p-1">
-                {(['claude', 'opencode'] as const).map((value) => (
+                  {a.loading ? (
+                    <Loader2 className="h-3 w-3 shrink-0 animate-spin" />
+                  ) : a.type === 'image' && a.dataUrl ? (
+                    <img src={a.dataUrl} alt={a.filename} className="h-8 w-8 shrink-0 rounded object-cover" />
+                  ) : a.type === 'image' ? (
+                    <Image className="h-3 w-3 shrink-0" />
+                  ) : (
+                    <LinkIcon className="h-3 w-3 shrink-0" />
+                  )}
+                  <span className="truncate">
+                    {a.type === 'image' ? a.filename : a.loading ? a.url : a.title || a.url}
+                  </span>
                  <button
-                    key={value}
-                    onClick={() => {
-                      setProvider(value);
-                      setModel(null);
-                    }}
-                    className={`rounded-md px-3 py-1 text-xs font-medium transition-colors cursor-pointer ${
-                      provider === value
-                        ? 'bg-white text-duck-dark shadow-sm'
-                        : 'text-duck-dark/50 hover:text-duck-dark/70'
-                    }`}
+                    type="button"
+                    onClick={() => setAttachments((prev) => prev.filter((_, j) => j !== i))}
+                    className="shrink-0 hover:text-duck-dark cursor-pointer"
                  >
-                    {value === 'claude' ? 'Claude' : 'OpenCode'}
+                    <X className="h-3 w-3" />
                  </button>
-                ))}
-              </div>
-
-              {models.length > 0 && (
-                <DropdownMenu>
-                  <DropdownMenuTrigger asChild>
-                    <button className="flex items-center gap-1 text-xs text-duck-dark/50 hover:text-duck-dark/70 cursor-pointer transition-colors">
-                      {models.find((m) => m.id === (model ?? models[0]?.id))?.name ?? models[0]?.name}
-                      <ChevronDown className="h-3 w-3" />
-                    </button>
-                  </DropdownMenuTrigger>
-                  <DropdownMenuContent align="end" className="z-[600] max-h-64 overflow-y-auto">
-                    {models.map((m) => (
-                      <DropdownMenuItem key={m.id} onClick={() => setModel(m.id)} className="cursor-pointer">
-                        <Check
-                          className={`mr-2 h-3 w-3 ${(model ?? models[0]?.id) === m.id ? 'opacity-100' : 'opacity-0'}`}
-                        />
-                        <span className="font-bold">{m.name}</span>
-                        {m.provider && <span className="text-duck-dark/50 ml-1">({m.provider})</span>}
-                      </DropdownMenuItem>
-                    ))}
-                  </DropdownMenuContent>
-                </DropdownMenu>
-              )}
+                </span>
+              ))}
            </div>
-          </>
-        )}
-      </Card>
+          )}
+          <div className="flex items-end gap-2">
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <button
+                  type="button"
+                  className="shrink-0 h-10 w-10 flex items-center justify-center rounded-lg text-duck-dark/40 hover:text-duck-dark/70 hover:bg-duck-dark/5 transition-colors cursor-pointer"
+                >
+                  <Paperclip className="h-4 w-4" />
+                </button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent side="top" align="start" className="z-[600]">
+                <DropdownMenuItem className="cursor-pointer" onSelect={() => imageInputRef.current?.click()}>
+                  <Image className="mr-2 h-4 w-4" />
+                  Image
+                </DropdownMenuItem>
+                <DropdownMenuItem className="cursor-pointer">
+                  <FileText className="mr-2 h-4 w-4" />
+                  Text File
+                </DropdownMenuItem>
+                <DropdownMenuItem className="cursor-pointer">
+                  <FileText className="mr-2 h-4 w-4" />
+                  PDF
+                </DropdownMenuItem>
+                <DropdownMenuItem className="cursor-pointer" onSelect={() => setUrlDialogOpen(true)}>
+                  <LinkIcon className="mr-2 h-4 w-4" />
+                  Webpage URL
+                </DropdownMenuItem>
+              </DropdownMenuContent>
+            </DropdownMenu>
+            <input
+              ref={imageInputRef}
+              type="file"
+              accept="image/*"
+              className="hidden"
+              onChange={(ev) => {
+                const file = ev.target.files?.[0];
+                if (file) handleAttachImage(file);
+                ev.target.value = '';
+              }}
+            />
+            <textarea
+              ref={textareaRef}
+              value={input}
+              onChange={(ev) => setInput(ev.target.value)}
+              onKeyDown={handleKeyDown}
+              onPaste={(ev) => {
+                const items = ev.clipboardData?.items;
+                if (!items) return;
+                for (const item of Array.from(items)) {
+                  if (item.type.startsWith('image/')) {
+                    ev.preventDefault();
+                    const file = item.getAsFile();
+                    if (file) handleAttachImage(file);
+                    return;
+                  }
+                }
+              }}
+              placeholder="What do you want to work on now?"
+              rows={1}
+              className="flex-1 resize-none bg-transparent px-2 py-2 text-duck-dark placeholder:text-duck-dark/30 focus:outline-none text-lg"
+            />
+            <Button
+              onClick={handleSubmit}
+              disabled={!input.trim()}
+              size="icon"
+              className="shrink-0 h-10 w-10 bg-duck-teal hover:bg-duck-teal/90 cursor-pointer disabled:opacity-40"
+            >
+              <Send className="h-4 w-4" />
+            </Button>
+          </div>
+        </div>
+
+        <div className="flex items-center justify-between px-4 pb-3">
+          <div className="flex items-center gap-1 rounded-lg bg-duck-dark/5 p-1">
+            {(['claude', 'opencode'] as const).map((value) => (
+              <button
+                key={value}
+                onClick={() => {
+                  setProvider(value);
+                  setModel(null);
+                }}
+                className={`rounded-md px-3 py-1 text-xs font-medium transition-colors cursor-pointer ${
+                  provider === value
+                    ? 'bg-white text-duck-dark shadow-sm'
+                    : 'text-duck-dark/50 hover:text-duck-dark/70'
+                }`}
+              >
+                {value === 'claude' ? 'Claude' : 'OpenCode'}
+              </button>
+            ))}
+          </div>
+
+          {models.length > 0 && (
+            <DropdownMenu>
+              <DropdownMenuTrigger asChild>
+                <button className="flex items-center gap-1 text-xs text-duck-dark/50 hover:text-duck-dark/70 cursor-pointer transition-colors">
+                  {models.find((m) => m.id === (model ?? models[0]?.id))?.name ?? models[0]?.name}
+                  <ChevronDown className="h-3 w-3" />
+                </button>
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end" className="z-[600] max-h-64 overflow-y-auto">
+                {models.map((m) => (
+                  <DropdownMenuItem key={m.id} onClick={() => setModel(m.id)} className="cursor-pointer">
+                    <Check
+                      className={`mr-2 h-3 w-3 ${(model ?? models[0]?.id) === m.id ? 'opacity-100' : 'opacity-0'}`}
+                    />
+                    <span className="font-bold">{m.name}</span>
+                    {m.provider && <span className="text-duck-dark/50 ml-1">({m.provider})</span>}
+                  </DropdownMenuItem>
+                ))}
+              </DropdownMenuContent>
+            </DropdownMenu>
+          )}
+        </div>
+      </Widget>

      <Dialog open={urlDialogOpen} onOpenChange={setUrlDialogOpen}>
        <DialogContent className="sm:max-w-md z-[700]">
@@ -351,6 +330,6 @@ export const ChatLauncher = () => {
          </div>
        </DialogContent>
      </Dialog>
-    </div>
+    </>
  );
 };
@@ -1,19 +1,26 @@
+import { Workspace, createWorkspaceDefaults } from '@/components/Workspace';
+import { useUserState } from '@/state/useUserState';
 import { ChatLauncher } from './ChatLauncher';
 import { FileBrowserWidget as FileBrowser } from '@/Screens/Dashboard/Files';
 import { ChatHistoryWidget as ChatHistory } from '@/Screens/Dashboard/ChatHistory';
 import { Catalog } from 'sounds';

+const WIDGET_IDS = ['chat-launcher', 'file-browser', 'chat-history', 'sound-library'] as const;
+const DEFAULTS = createWorkspaceDefaults([...WIDGET_IDS]);
+
 export const HomeScreen = () => {
+  const [state, setState] = useUserState('home-layout', DEFAULTS);
+
  return (
-    <div className="flex flex-col md:flex-row gap-4 md:gap-8 h-full p-4 pt-6 md:p-8 md:pt-12 overflow-y-auto">
-      <div className="flex flex-col gap-8 flex-1 min-w-0">
-        <ChatLauncher />
-        <FileBrowser />
-      </div>
-      <div className="flex flex-col gap-8 flex-1 min-w-0">
-        <ChatHistory />
-        <Catalog />
-      </div>
-    </div>
+    <Workspace
+      widgets={{
+        'chat-launcher': <ChatLauncher />,
+        'file-browser': <FileBrowser />,
+        'chat-history': <ChatHistory />,
+        'sound-library': <Catalog />,
+      }}
+      state={state}
+      onChange={setState}
+    />
  );
 };