Filesystem Sync (#142)

src-web/components/core/Editor/Editor.tsx

@@ -4,7 +4,7 @@ import type { EditorStateConfig, Extension } from '@codemirror/state';
 import { Compartment, EditorState } from '@codemirror/state';
 import { keymap, placeholder as placeholderExt, tooltips } from '@codemirror/view';
 import type { EnvironmentVariable } from '@yaakapp-internal/models';
-import type { TemplateFunction } from '@yaakapp-internal/plugin';
+import type { TemplateFunction } from '@yaakapp-internal/plugins';
 import classNames from 'classnames';
 import { EditorView } from 'codemirror';
 import type { MutableRefObject, ReactNode } from 'react';

src-web/components/core/Icon.tsx

@@ -41,6 +41,8 @@ const icons = {
   file_code: lucide.FileCodeIcon,
   filter: lucide.FilterIcon,
   flask: lucide.FlaskConicalIcon,
+  folder: lucide.FolderIcon,
+  folder_sync: lucide.FolderSyncIcon,
   folder_input: lucide.FolderInputIcon,
   folder_output: lucide.FolderOutputIcon,
   git_branch: lucide.GitBranchIcon,

src-web/components/core/Toast.tsx

@@ -1,4 +1,4 @@
-import type { ShowToastRequest } from '@yaakapp-internal/plugin';
+import type { ShowToastRequest } from '@yaakapp-internal/plugins';
 import classNames from 'classnames';
 import { motion } from 'framer-motion';
 import type { ReactNode } from 'react';
@@ -15,7 +15,7 @@ export interface ToastProps {
   onClose: () => void;
   className?: string;
   timeout: number | null;
-  action?: ReactNode;
+  action?: (args: { hide: () => void }) => ReactNode;
   icon?: ShowToastRequest['icon'];
   color?: ShowToastRequest['color'];
 }
@@ -59,15 +59,15 @@ export function Toast({ children, open, onClose, timeout, action, icon, color }:
           `x-theme-toast x-theme-toast--${color}`,
           'pointer-events-auto overflow-hidden',
           'relative pointer-events-auto bg-surface text-text rounded-lg',
-          'border border-border shadow-lg max-w-[30rem]',
+          'border border-border shadow-lg w-[25rem]',
           'grid grid-cols-[1fr_auto]',
         )}
       >
-        <div className="px-3 py-3 flex items-center gap-2">
-          {toastIcon && <Icon icon={toastIcon} className="text-text-subtle" />}
-          <VStack space={2}>
+        <div className="px-3 py-3 flex items-start gap-2 w-full">
+          {toastIcon && <Icon icon={toastIcon} className="mt-1 text-text-subtle" />}
+          <VStack space={2} className="w-full">
             <div>{children}</div>
-            {action}
+            {action?.({ hide: onClose })}
           </VStack>
         </div>