Fix workspace creation, reveal sync dir, and don't update timestamps on sync/import

src-web/components/core/Dropdown.tsx

@@ -20,7 +20,7 @@ import React, {
   useRef,
   useState,
 } from 'react';
-import {useClickAway, useKey, useWindowSize} from 'react-use';
+import { useClickAway, useKey, useWindowSize } from 'react-use';
 import type { HotkeyAction } from '../../hooks/useHotKey';
 import { useHotKey } from '../../hooks/useHotKey';
 import { useStateWithDeps } from '../../hooks/useStateWithDeps';
@@ -45,7 +45,7 @@ export type DropdownItemDefault = {
   keepOpen?: boolean;
   hotKeyAction?: HotkeyAction;
   hotKeyLabelOnly?: boolean;
-  variant?: 'default' | 'danger' | 'notify';
+  color?: 'default' | 'danger' | 'info' | 'warning' | 'notice';
   disabled?: boolean;
   hidden?: boolean;
   leftSlot?: ReactNode;
@@ -558,8 +558,10 @@ function MenuItem({ className, focused, onFocus, item, onSelect, ...props }: Men
         'h-xs', // More compact
         'min-w-[8rem] outline-none px-2 mx-1.5 flex whitespace-nowrap',
         'focus:bg-surface-highlight focus:text rounded',
-        item.variant === 'danger' && '!text-danger',
-        item.variant === 'notify' && '!text-primary',
+        item.color === 'danger' && '!text-danger',
+        item.color === 'warning' && '!text-warning',
+        item.color === 'notice' && '!text-notice',
+        item.color === 'info' && '!text-info',
       )}
       {...props}
     >

src-web/components/core/Icon.tsx

@@ -42,9 +42,10 @@ const icons = {
   filter: lucide.FilterIcon,
   flask: lucide.FlaskConicalIcon,
   folder: lucide.FolderIcon,
-  folder_sync: lucide.FolderSyncIcon,
   folder_input: lucide.FolderInputIcon,
+  folder_open: lucide.FolderOpenIcon,
   folder_output: lucide.FolderOutputIcon,
+  folder_sync: lucide.FolderSyncIcon,
   git_branch: lucide.GitBranchIcon,
   git_commit: lucide.GitCommitIcon,
   git_commit_vertical: lucide.GitCommitVerticalIcon,

src-web/components/core/KeyValueRow.tsx

@@ -22,14 +22,18 @@ export function KeyValueRows({ children }: Props) {
 
 interface KeyValueRowProps {
   label: ReactNode;
-  value: ReactNode;
+  children: ReactNode;
+  rightSlot?: ReactNode;
+  leftSlot?: ReactNode;
   labelClassName?: string;
   labelColor?: 'secondary' | 'primary' | 'info';
 }
 
 export function KeyValueRow({
   label,
-  value,
+  children,
+  rightSlot,
+  leftSlot,
   labelColor = 'secondary',
   labelClassName,
 }: KeyValueRowProps) {
@@ -47,7 +51,11 @@ export function KeyValueRow({
         <span className="select-text cursor-text">{label}</span>
       </td>
       <td className="select-none py-0.5 break-all align-top max-w-[15rem]">
-        <div className="select-text cursor-text max-h-[5rem] overflow-y-auto">{value}</div>
+        <div className="select-text cursor-text max-h-[5rem] overflow-y-auto grid grid-cols-[auto_minmax(0,1fr)_auto]">
+          {leftSlot ?? <span aria-hidden />}
+          {children}
+          {rightSlot ? <div className="ml-1.5">{rightSlot}</div> : <span aria-hidden />}
+        </div>
       </td>
     </>
   );

src-web/components/core/PairEditor.tsx

@@ -344,7 +344,7 @@ function PairEditorRow({
         key: 'delete',
         label: 'Delete',
         onSelect: handleDelete,
-        variant: 'danger',
+        color: 'danger',
       },
     ],
     [handleDelete],