dsh-obsidian-memo 0.16.3

package/src/client/settings/paths.js

@@ -0,0 +1,131 @@
+/** 仓库字段和库内文件夹下拉，支持历史、浏览和新建。 */
+import { Fragment, React, h } from '../react.js';
+import { isAbsolutePath, joinPath } from '../utils.js';
+
+function vaultRelative(vault, value) {
+  const clean = (path) => String(path || '').split(String.fromCharCode(92)).join('/');
+  let root = clean(vault);
+  while (root.endsWith('/')) root = root.slice(0, -1);
+  const path = clean(value);
+  if (root && path === root) return '.';
+  return root && path.startsWith(root + '/') ? path.slice(root.length + 1) : path;
+}
+
+function VaultFolderPicker({ t, label, value, vaultPath, history, disabled, onChange, onPick, request, placeholder }) {
+  const [open, setOpen] = React.useState(false);
+  const [folders, setFolders] = React.useState([]);
+  const [loading, setLoading] = React.useState(false);
+  const [creating, setCreating] = React.useState(false);
+  const [name, setName] = React.useState('');
+  const [query, setQuery] = React.useState('');
+  const [error, setError] = React.useState('');
+  const [created, setCreated] = React.useState('');
+  const [creatingBusy, setCreatingBusy] = React.useState(false);
+  const wrap = React.useRef(null);
+  const scope = React.useRef({ vaultPath, alive: true });
+  scope.current.vaultPath = vaultPath;
+  React.useEffect(() => {
+    scope.current.alive = true;
+    return () => { scope.current.alive = false; };
+  }, []);
+  const isCurrent = () => scope.current.alive && scope.current.vaultPath === vaultPath;
+  React.useEffect(() => {
+    setOpen(false); setCreating(false); setCreatingBusy(false); setLoading(false); setCreated(''); setError('');
+  }, [vaultPath]);
+  const [menuLayout, setMenuLayout] = React.useState({ up: false, height: 340 });
+  React.useLayoutEffect(() => {
+    if (!open || !wrap.current?.getBoundingClientRect) return undefined;
+    const measure = () => {
+      const rect = wrap.current.getBoundingClientRect();
+      const body = wrap.current.closest('.SN_drawerBody');
+      const bounds = body?.getBoundingClientRect();
+      const top = Math.max(8, bounds?.top || 0);
+      const bottom = Math.min(window.innerHeight - 8, bounds?.bottom || window.innerHeight);
+      const below = bottom - rect.bottom - 6, above = rect.top - top - 6;
+      const up = below < 260 && above > below;
+      setMenuLayout({ up, height: Math.max(80, Math.min(340, up ? above : below)) });
+    };
+    measure();
+    window.addEventListener('resize', measure);
+    return () => window.removeEventListener('resize', measure);
+  }, [open]);
+  const fail = (cause) => setError(cause.message || String(cause));
+  React.useEffect(() => {
+    if (!open) return undefined;
+    const outside = (event) => { if (!wrap.current?.contains(event.target)) setOpen(false); };
+    document.addEventListener('mousedown', outside, true);
+    return () => document.removeEventListener('mousedown', outside, true);
+  }, [open]);
+  React.useEffect(() => {
+    if (!open || !request || !vaultPath) return undefined;
+    let alive = true;
+    setLoading(true); setError(''); setFolders([]);
+    request('listFolders', { vaultPath }).then((result) => { if (alive) setFolders(result.folders || []); })
+      .catch((cause) => { if (alive) fail(cause); }).finally(() => { if (alive) setLoading(false); });
+    return () => { alive = false; };
+  }, [open, vaultPath]);
+  const choose = (path) => { onChange(path); setOpen(false); setQuery(''); setCreating(false); setCreated(''); };
+  const recent = [...new Set((history || []).map((path) => vaultRelative(vaultPath, path)).filter((path) => !isAbsolutePath(path)))];
+  const options = [...new Set(recent.concat(folders))].filter((path) => path.toLowerCase().includes(query.toLowerCase()));
+  return h('div', { className: 'SN_folderPicker', ref: wrap, onKeyDown: (event) => { if (event.key === 'Escape') { event.stopPropagation(); setOpen(false); } } },
+    h('button', { type: 'button', className: 'SN_folderTrigger', disabled: disabled || !vaultPath, title: value || '',
+      'aria-label': label, 'aria-haspopup': 'dialog', 'aria-expanded': open, onClick: () => setOpen(!open) },
+      h('span', null, value ? vaultRelative(vaultPath, value) : placeholder || t('settings.chooseFolder')), h('span', { 'aria-hidden': 'true' }, '⌄')),
+    open ? h('div', { className: 'SN_folderMenu', role: 'dialog', 'aria-label': label, 'data-up': menuLayout.up ? 'true' : 'false', style: { maxHeight: menuLayout.height } },
+      h('button', { type: 'button', className: 'SN_folderOption', disabled: loading, onClick: () => setCreating(!creating) }, '＋ ', t('settings.newFolder')),
+      creating ? h('div', { className: 'SN_folderCreateSection' }, h('form', { className: 'SN_folderCreate', onSubmit: (event) => {
+        event.preventDefault(); if (!name.trim() || loading) return; setLoading(true); setCreatingBusy(true); setError(''); setCreated('');
+        request('createFolder', { vaultPath, path: name.trim() }).then((result) => { if (isCurrent()) { choose(result.path); setCreated(vaultRelative(vaultPath, result.path)); setName(''); } })
+          .catch((cause) => { if (isCurrent()) fail(cause); }).finally(() => { if (isCurrent()) { setLoading(false); setCreatingBusy(false); } });
+      } }, h('input', { className: 'SN_textInput', value: name, autoFocus: true, 'aria-label': t('settings.folderName'),
+        placeholder: t('settings.folderName'), onChange: (event) => setName(event.target.value), disabled: loading }),
+        h('button', { type: 'submit', className: 'SN_ghostBtn SN_smallBtn', disabled: loading || !name.trim() }, t(creatingBusy ? 'settings.creatingFolder' : 'settings.create'))),
+        h('p', { className: 'SN_fieldHint' }, t('settings.newFolderHint')),
+        name.trim() ? h('code', { className: 'SN_configPath' }, t('settings.createAt') + ': ' + joinPath(vaultPath, name.trim())) : null) : null,
+      h('button', { type: 'button', className: 'SN_folderOption', disabled: loading, onClick: () => {
+        Promise.resolve().then(onPick).then((path) => { if (isCurrent()) { if (path) choose(path); else setOpen(false); } })
+          .catch((cause) => { if (isCurrent()) fail(cause); });
+      } }, t('settings.browseFolder')),
+      value ? h('button', { type: 'button', className: 'SN_folderOption', onClick: () => choose('') }, t('settings.clearFolder')) : null,
+      h('input', { className: 'SN_textInput', value: query, 'aria-label': t('settings.searchFolder'), placeholder: t('settings.searchFolder'), onChange: (event) => setQuery(event.target.value) }),
+      loading ? h('p', { className: 'SN_fieldHint', role: 'status' }, t('panel.loading')) : null,
+      error ? h('p', { className: 'SN_settingsError', role: 'alert' }, error) : null,
+      h('div', { className: 'SN_folderOptions' }, options.map((path) => h('button', { key: path, type: 'button', className: 'SN_folderOption',
+        onClick: () => choose(path), title: path }, h('span', null, path === '.' ? t('settings.vaultRoot') : path),
+        recent.includes(path) ? h('small', null, t('settings.recent')) : null))),
+    ) : null,
+    created ? h('p', { className: 'SN_fieldHint SN_folderCreated', role: 'status' }, t('settings.folderCreated', { path: created })) : null);
+}
+
+function SettingsPathField(props) {
+  const {
+    t, label, hint, value, field, disabled, picking,
+    onPatch, onPick, vaultPath, history, request,
+  } = props;
+  return h('div', { className: 'SN_field' },
+    h('span', { className: 'SN_fieldLabel' }, label),
+    field !== 'vaultPath' && vaultPath ? h(VaultFolderPicker, { t, label, value, vaultPath, history, disabled: disabled || picking !== null, request,
+      onChange: (path) => onPatch({ [field]: path }), onPick: () => onPick(field) }) : h(Fragment, null,
+    h('input', {
+      type: 'text',
+      className: 'SN_textInput',
+      value: value || '',
+      spellCheck: false,
+      disabled: disabled,
+      'aria-label': label,
+      onChange: (event) => onPatch({ [field]: event.target.value }),
+    }),
+    h('div', { className: 'SN_pathActions' },
+      h('button', {
+        type: 'button',
+        className: 'SN_ghostBtn SN_smallBtn',
+        disabled: disabled || picking !== null,
+        onClick: () => onPick(field),
+      }, picking === field ? t('settings.picking') : t('settings.pick')),
+    ),
+    ),
+    hint ? h('p', { className: 'SN_fieldHint' }, hint) : null,
+  );
+}
+
+export { vaultRelative, VaultFolderPicker, SettingsPathField };

package/src/client/settings/settings-drawer.js

@@ -0,0 +1,244 @@
+/** 设置页标签与字段组合；官方页面和面板共用。 */
+import { CloseIcon } from '../components/icons.js';
+import { Fragment, React, h } from '../react.js';
+import { AiBudgetRow } from './ai-budget-row.js';
+import { ConfigFileSettings } from './config-file.js';
+import { ImageProcessingSettings } from './image-processing.js';
+import { SettingsPathField, VaultFolderPicker } from './paths.js';
+import { StyleSelect } from './style-select.js';
+import { TrashSettings } from './trash.js';
+import { baseName, resolvedPath } from '../utils.js';
+
+function SettingsDrawer(props) {
+  const {
+    t, draft, picking, saving, onPatch, onPick, onRemoveArchive, onPatchEmoji, onRemoveEmoji, onAddEmoji,
+    onSave, onCancel, request, inline, onConfigSettings,
+  } = props;
+  const [tab, setTab] = React.useState(props.initialTab || 'folders');
+  const [activeEmoji, setActiveEmoji] = React.useState(null);
+  const previousCount = React.useRef(draft?.emojis?.length || 0);
+  const emojis = Array.isArray(draft?.emojis) ? draft.emojis : [];
+  React.useEffect(() => {
+    if (emojis.length > previousCount.current) setActiveEmoji(emojis[emojis.length - 1]?.id);
+    previousCount.current = emojis.length;
+  }, [emojis.length]);
+  React.useEffect(() => { if (props.initialTab) setTab(props.initialTab); }, [props.initialTab]);
+  if (!draft) return null;
+  const archiveTargets = Array.isArray(draft.archiveTargets) ? draft.archiveTargets : [];
+  const emojiIndex = Math.max(0, emojis.findIndex((item) => item.id === activeEmoji));
+  const folderProps = { vaultPath: draft.vaultPath, history: draft.folderHistory, request };
+  const disabled = Boolean(saving);
+
+  return h(Fragment, null,
+    !inline ? h('div', { className: 'SN_scrim', role: 'presentation', onClick: saving ? undefined : onCancel }) : null,
+    h('aside', {
+      className: inline ? 'SN_inlineSettings' : 'SN_drawer',
+      role: inline ? undefined : 'dialog',
+      'aria-modal': inline ? undefined : 'true',
+      'aria-label': t('settings.title'),
+    },
+      h('div', { className: 'SN_drawerHead' },
+        h('h2', { className: 'SN_drawerTitle' }, t('settings.title')),
+        h('button', {
+          type: 'button',
+          className: 'SN_iconBtn',
+          onClick: onCancel,
+          disabled: disabled,
+          'aria-label': t('settings.close'),
+          title: t('settings.close'),
+        }, h(CloseIcon, null)),
+      ),
+      h('div', { className: 'SN_settingsTabs', role: 'tablist', 'aria-label': t('settings.title') },
+        ['folders', 'ai', 'images', 'config'].map((id) => h('button', { key: id, type: 'button', role: 'tab', className: 'SN_settingsTab',
+          'aria-selected': tab === id, onClick: () => setTab(id) }, t('settings.tab.' + id)))),
+      h('div', { className: 'SN_drawerBody' },
+        h('div', { className: 'SN_drawerSection', hidden: tab !== 'folders', 'data-settings-tab': 'folders' },
+          h(SettingsPathField, { ...folderProps,
+            t: t,
+            label: t('settings.vault'),
+            hint: t('settings.vaultHint'),
+            value: draft.vaultPath,
+            field: 'vaultPath',
+            disabled: disabled,
+            picking: picking,
+            onPatch: onPatch,
+            onPick: onPick,
+          }),
+          h(SettingsPathField, { ...folderProps,
+            t: t,
+            label: t('settings.notes'),
+            hint: t('settings.notesHint'),
+            value: draft.notesDir,
+            field: 'notesDir',
+            disabled: disabled,
+            picking: picking,
+            onPatch: onPatch,
+            onPick: onPick,
+          }),
+        ),
+        h('div', { className: 'SN_drawerSection', hidden: tab !== 'folders', 'data-settings-tab': 'folders' },
+          h(SettingsPathField, { ...folderProps,
+            t: t,
+            label: t('settings.project'),
+            hint: t('settings.projectHint'),
+            value: draft.projectDir,
+            field: 'projectDir',
+            disabled: disabled,
+            picking: picking,
+            onPatch: onPatch,
+            onPick: onPick,
+          }),
+        ),
+        h('label', { className: 'SN_imageSettingToggle', hidden: tab !== 'folders' },
+          h('input', { type: 'checkbox', disabled, checked: draft.includeSubfolders !== false,
+            onChange: (event) => onPatch({ includeSubfolders: event.target.checked }) }), t('settings.includeSubfolders')),
+        h('div', { className: 'SN_drawerSection', hidden: tab !== 'folders', 'data-settings-tab': 'folders' },
+          h('div', { className: 'SN_drawerSectionHead' },
+            h('h3', { className: 'SN_drawerSectionTitle' }, t('settings.archive')),
+          ),
+          h('p', { className: 'SN_drawerSectionHint' }, t('settings.archiveHint')),
+          archiveTargets.length === 0
+            ? null
+            : h('div', { className: 'SN_targetList' },
+              archiveTargets.map((target, index) => h('div', { key: target.id || index, className: 'SN_targetRow' },
+                h(VaultFolderPicker, { t, ...folderProps, label: t('settings.archive'), value: target.path, disabled,
+                    onChange: (path) => path ? onPatch({ archiveTargets: archiveTargets.map((item, position) => position === index ? { ...item, path, label: baseName(path) } : item) }) : onRemoveArchive(index),
+                  onPick: () => request('pickDirectory', { vaultPath: draft.vaultPath }).then((result) => result.path) }),
+                h('button', {
+                  type: 'button',
+                  className: 'SN_removeBtn',
+                  disabled: disabled,
+                  'aria-label': t('settings.remove'),
+                  title: t('settings.remove'),
+                  onClick: () => onRemoveArchive(index),
+                }, '×'),
+              )),
+            ),
+          h(VaultFolderPicker, { t, ...folderProps, label: t('settings.addArchive'), placeholder: t('settings.addArchive'), value: '', disabled,
+            onChange: (path) => { if (path && !archiveTargets.some((item) => resolvedPath(draft.vaultPath, item.path) === resolvedPath(draft.vaultPath, path))) onPatch({ archiveTargets: archiveTargets.concat({ id: 'archive-' + Date.now().toString(36), label: baseName(path), path }) }); },
+            onPick: () => request('pickDirectory', { vaultPath: draft.vaultPath }).then((result) => result.path) }),
+        ),
+        h('div', { hidden: tab !== 'images', 'data-settings-tab': 'images' }, h(ImageProcessingSettings, { t, value: draft.imageCompression, disabled, onChange: (imageCompression) => onPatch({ imageCompression }) },
+          h(SettingsPathField, { ...folderProps,
+            t, label: t('settings.attachmentDir'), hint: t('settings.attachmentDirHint'),
+            value: draft.attachmentDir, field: 'attachmentDir', disabled, picking, onPatch, onPick,
+          }))),
+        h('div', { className: 'SN_drawerSection', hidden: tab !== 'ai', 'data-settings-tab': 'ai' },
+          h('div', { className: 'SN_drawerSectionHead' },
+            h('h3', { className: 'SN_drawerSectionTitle' }, t('settings.emoji')),
+          ),
+          h('p', { className: 'SN_drawerSectionHint' }, t('settings.emojiHint')),
+          h('div', { className: 'SN_emojiTabs', role: 'tablist', 'aria-label': t('settings.emoji') },
+            h('div', { className: 'SN_emojiTabScroll' }, emojis.map((item, index) => h('button', { key: item.id, type: 'button', role: 'tab',
+              'aria-selected': emojiIndex === index, 'aria-label': item.label || item.emoji, title: item.label,
+              className: 'SN_emojiTab', disabled, onClick: () => setActiveEmoji(item.id) }, item.emoji))),
+            h('button', { type: 'button', className: 'SN_emojiTab SN_emojiAdd', disabled: disabled || emojis.length >= 12,
+              onClick: onAddEmoji, 'aria-label': t('settings.addEmoji'), title: t('settings.addEmoji') }, '＋')),
+          emojis.map((emoji, index) => h('div', { key: emoji.id || index, className: 'SN_emojiGroup', hidden: index !== emojiIndex },
+            h('div', { className: 'SN_emojiTop' },
+              h('input', {
+                type: 'text',
+                className: 'SN_emojiInput',
+                value: emoji.emoji || '',
+                disabled: disabled,
+                'aria-label': t('settings.emoji'),
+                placeholder: t('settings.emojiPlaceholder'),
+                onChange: (event) => onPatchEmoji(index, { emoji: event.target.value }),
+              }),
+              h('input', {
+                type: 'text',
+                className: 'SN_labelInput',
+                value: emoji.label || '',
+                disabled: disabled,
+                'aria-label': t('settings.labelPlaceholder'),
+                placeholder: t('settings.labelPlaceholder'),
+                onChange: (event) => onPatchEmoji(index, { label: event.target.value }),
+              }),
+              // 0.13.8：callout 样式按钮与 emoji / 名称同排（和 emoji 输入同高），点开菜单打勾。
+              h(StyleSelect, {
+                t: t,
+                value: emoji.callout || 'note',
+                disabled: disabled,
+                onChange: (callout) => onPatchEmoji(index, { callout: callout }),
+              }),
+              h('button', {
+                type: 'button',
+                className: 'SN_removeBtn',
+                disabled: disabled || emojis.length <= 1,
+                'aria-label': t('settings.remove'),
+                title: t('settings.remove'),
+                onClick: () => onRemoveEmoji(index),
+              }, '×'),
+            ),
+            h('div', { className: 'SN_emojiMain' },
+              h('textarea', {
+                className: 'SN_textArea',
+                rows: 7,
+                value: emoji.prompt || '',
+                disabled: disabled,
+                'aria-label': t('settings.promptPlaceholder'),
+                placeholder: t('settings.promptPlaceholder'),
+                onChange: (event) => onPatchEmoji(index, { prompt: event.target.value }),
+              }),
+            ),
+            // 0.13：这枚 emoji 的 AI 预算（低/中/高/自定义）。
+            h(AiBudgetRow, {
+              t: t,
+              ai: emoji.ai,
+              disabled: disabled,
+              onChange: (ai) => onPatchEmoji(index, { ai: ai }),
+            }),
+          )),
+
+        ),
+        h('div', { className: 'SN_drawerSection', hidden: tab !== 'ai', 'data-settings-tab': 'ai' },
+          h('div', { className: 'SN_drawerSectionHead' },
+            h('h3', { className: 'SN_drawerSectionTitle' }, t('settings.projectPrompt')),
+          ),
+          h('details', { className: 'SN_projectSettings' }, h('summary', null, t('settings.projectPromptHint')),
+          h('p', { className: 'SN_drawerSectionHint' }, t('settings.projectPromptHint')),
+          h('textarea', {
+            className: 'SN_textArea',
+            rows: 6,
+            value: draft.projectPrompt || '',
+            disabled: disabled,
+            'aria-label': t('settings.projectPrompt'),
+            onChange: (event) => onPatch({ projectPrompt: event.target.value }),
+          }),
+          h('p', { className: 'SN_fieldHint' }, t('settings.aiProjectHint')),
+          // 0.13：开档（项目文档）自己的 AI 预算。
+          h(AiBudgetRow, {
+            t: t,
+            ai: draft.projectAi,
+            disabled: disabled,
+            onChange: (ai) => onPatch({ projectAi: ai }),
+          }),
+          ),
+        ),
+
+        h('div', { className: 'SN_settingsPage', hidden: tab !== 'config', 'data-settings-tab': 'config' },
+          h(ConfigFileSettings, { t, config: draft.configFile, disabled, request, onSettings: onConfigSettings }),
+          h(TrashSettings, { t, request, disabled: disabled || !draft.vaultPath }),
+          h('section', { className: 'SN_drawerSection SN_about', 'aria-label': t('settings.about') },
+            h('a', { href: 'https://github.com/cavenzhong/dsh-obsidian-memo', target: '_blank', rel: 'noopener noreferrer' }, 'GitHub'),
+            h('p', null, t('settings.author')))),
+      ),
+      h('div', { className: 'SN_drawerFoot' },
+        h('button', {
+          type: 'button',
+          className: 'SN_ghostBtn',
+          disabled: disabled,
+          onClick: onCancel,
+        }, t('settings.cancel')),
+        h('button', {
+          type: 'button',
+          className: 'SN_primaryBtn',
+          disabled: disabled,
+          onClick: onSave,
+        }, saving ? t('settings.saving') : t('settings.save')),
+      ),
+    ),
+  );
+}
+
+export { SettingsDrawer };

package/src/client/settings/style-select.js

@@ -0,0 +1,58 @@
+/** callout 样式选择菜单。 */
+import { React, h } from '../react.js';
+import { CALLOUT_IDS } from './callouts.js';
+
+function StyleSelect(props) {
+  const { t, value, disabled, onChange } = props;
+  const [open, setOpen] = React.useState(false);
+  const wrapRef = React.useRef(null);
+  React.useEffect(() => {
+    if (!open) return undefined;
+    const onPointerDown = (event) => {
+      const target = event.target;
+      if (wrapRef.current && target && wrapRef.current.contains(target)) return;
+      setOpen(false);
+    };
+    document.addEventListener('mousedown', onPointerDown, true);
+    return () => document.removeEventListener('mousedown', onPointerDown, true);
+  }, [open]);
+  const current = CALLOUT_IDS.indexOf(value) >= 0 ? value : 'note';
+  const labelFor = (id) => t('settings.calloutValue', { style: t('callout.' + id) });
+  return h('div', { className: 'SN_styleWrap', ref: wrapRef },
+    h('button', {
+      type: 'button',
+      className: 'SN_styleBtn',
+      disabled: disabled,
+      'aria-haspopup': 'menu',
+      'aria-expanded': open ? 'true' : 'false',
+      'aria-label': t('settings.callout'),
+      title: labelFor(current),
+      onClick: () => setOpen((flag) => !flag),
+    }, h('span', { className: 'SN_styleText' }, labelFor(current))),
+    open
+      ? h('div', {
+        className: 'SN_styleMenu',
+        role: 'menu',
+        'aria-label': t('settings.callout'),
+      },
+        CALLOUT_IDS.map((id) => h('button', {
+          key: id,
+          type: 'button',
+          className: 'SN_styleItem',
+          role: 'menuitemradio',
+          'aria-checked': id === current ? 'true' : 'false',
+          'data-active': id === current ? 'true' : 'false',
+          onClick: () => {
+            onChange(id);
+            setOpen(false);
+          },
+        },
+          h('span', { className: 'SN_styleCheck', 'aria-hidden': 'true' }, id === current ? '✓' : ''),
+          h('span', null, labelFor(id)),
+        )),
+      )
+      : null,
+  );
+}
+
+export { StyleSelect };

package/src/client/settings/trash.js

@@ -0,0 +1,30 @@
+/** 库内回收站管理视图，确认后请求转移到系统回收站。 */
+import { React, h } from '../react.js';
+
+function TrashSettings({ t, request, disabled }) {
+  const [confirm, setConfirm] = React.useState(false);
+  const [busy, setBusy] = React.useState(false);
+  const [message, setMessage] = React.useState('');
+  const [error, setError] = React.useState('');
+  const run = (action) => {
+    if (busy || disabled) return; setBusy(true); setError(''); setMessage('');
+    request('trash', { action, confirm: action === 'empty' }).then((result) => {
+      setConfirm(false); if (action === 'empty') setMessage(t('settings.trashMoved', { count: result.moved }));
+    }).catch((cause) => setError(cause.message || String(cause))).finally(() => setBusy(false));
+  };
+  return h('section', { className: 'SN_drawerSection' },
+    h('h3', { className: 'SN_drawerSectionTitle' }, t('settings.trash')),
+    h('p', { className: 'SN_drawerSectionHint' }, t('settings.trashHint')),
+    h('div', { className: 'SN_pathActions' },
+      h('button', { type: 'button', className: 'SN_ghostBtn', disabled: disabled || busy, onClick: () => run('reveal') }, t('settings.revealTrash')),
+      h('button', { type: 'button', className: 'SN_ghostBtn SN_dangerBtn', disabled: disabled || busy, onClick: () => setConfirm(true) }, t('settings.emptyTrash'))),
+    confirm ? h('div', { className: 'SN_trashConfirm', role: 'alert' },
+      h('p', { className: 'SN_fieldHint' }, t('settings.trashConfirm')),
+      h('div', { className: 'SN_pathActions' },
+        h('button', { type: 'button', className: 'SN_ghostBtn', disabled: busy, onClick: () => setConfirm(false) }, t('settings.cancel')),
+        h('button', { type: 'button', className: 'SN_ghostBtn SN_dangerBtn', disabled: busy, onClick: () => run('empty') }, busy ? t('settings.saving') : t('settings.emptyTrash')))) : null,
+    error ? h('p', { className: 'SN_settingsError', role: 'alert' }, error) : null,
+    message ? h('p', { className: 'SN_fieldHint', role: 'status' }, message) : null);
+}
+
+export { TrashSettings };