From b26b757d8013b99ed06a317911203ea20fdd9e41 Mon Sep 17 00:00:00 2001 From: mirivlad Date: Wed, 3 Jun 2026 02:29:11 +0800 Subject: [PATCH] GUI: fix sidebar icons and create modal with template selection - Add TemplateIcon.svelte with SVG icons for folder/project/client/document/recipe - TreeNode.svelte: render type-based icon before each node label - Create modal: show template selection cards (translate titles via t()) - Context menu: use TemplateIcon + translated template names - i18n (ru/en): add template.* translation keys - Fix white capsule issue: tree-toggle arrow at 10px rendered oddly without icon presence; replaced with proper SVG icons --- frontend/src/App.svelte | 35 ++++++++++++++++++++---- frontend/src/TreeNode.svelte | 29 ++++++++++++++++++++ frontend/src/lib/TemplateIcon.svelte | 40 ++++++++++++++++++++++++++++ frontend/src/lib/i18n/locales/en.js | 9 +++++++ frontend/src/lib/i18n/locales/ru.js | 6 +++++ 5 files changed, 114 insertions(+), 5 deletions(-) create mode 100644 frontend/src/lib/TemplateIcon.svelte diff --git a/frontend/src/App.svelte b/frontend/src/App.svelte index 741e967..5c5e7a4 100644 --- a/frontend/src/App.svelte +++ b/frontend/src/App.svelte @@ -4,6 +4,7 @@ import FilePreviewModal from './lib/FilePreviewModal.svelte' import ConfirmModal from './lib/ConfirmModal.svelte' import TreeNode from './TreeNode.svelte' + import TemplateIcon from './lib/TemplateIcon.svelte' import { onMount, onDestroy } from 'svelte' import { canPreviewFile, needsBase64Preview, needsTextPreview } from './lib/fileUtils.js' import { t } from './lib/i18n' @@ -1491,10 +1492,27 @@ {#if showCreateNode}
-

{createWithTemplate ? createWithTemplate.title : (createInNode ? t('nav.createInside') : t('case.new'))}

+

{createInNode ? t('nav.createInside') : t('case.new')}

{#if createInNode}
{t('nav.createInside')} «{createInNode.title}»
{/if} +
+ +
+ + {#each enabledTemplates as tpl} + + {/each} +
+
- {#if contextMenu.node} + {#if contextMenu.node}
{t('common.create')}
- {#each (enabledTemplates.length > 0 ? enabledTemplates : [{ id: '', title: t('template.optionNone'), icon: '' }]) as tpl} + {#each (enabledTemplates.length > 0 ? enabledTemplates : [{ id: '', title: 'template.optionNone', icon: 'folder' }]) as tpl} {/each}
@@ -1734,7 +1753,7 @@ .context-menu-backdrop { position: fixed; inset: 0; z-index: 200; } .context-menu { position: fixed; background: #1a1a28; border: 1px solid #2a2a3c; border-radius: 8px; padding: 4px; min-width: 180px; box-shadow: 0 8px 24px rgba(0,0,0,0.4); } .context-menu-section { padding: 6px 12px; font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; color: #666; } -.context-menu-item { display: block; width: 100%; padding: 6px 12px; border: none; background: none; color: #ccc; font-size: 13px; text-align: left; cursor: pointer; border-radius: 4px; font-family: inherit; } +.context-menu-item { display: flex; width: 100%; padding: 6px 12px; border: none; background: none; color: #ccc; font-size: 13px; text-align: left; cursor: pointer; border-radius: 4px; font-family: inherit; align-items: center; gap: 6px; } .context-menu-item:hover { background: #222233; color: #fff; } .context-menu-item.danger { color: #ff6b6b; } .context-menu-item.danger:hover { background: #3a2222; color: #ff6b6b; } @@ -1881,6 +1900,12 @@ .rename-error { color: #ff6b6b; font-size: 12px; margin-top: 4px; } +/* Template cards */ +.template-cards { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; } +.template-card { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border: 1px solid #2a2a3c; background: #13131f; color: #ccc; border-radius: 8px; cursor: pointer; font-size: 13px; font-family: inherit; } +.template-card:hover { background: #1e1e30; border-color: #3a3a5c; } +.template-card.selected { background: #2a2a50; border-color: #6366f1; color: #e4e4ef; } + /* Today Dashboard */ .today-dashboard { padding: 24px; overflow-y: auto; flex: 1; } .today-header { display: flex; align-items: baseline; gap: 12px; margin-bottom: 16px; } diff --git a/frontend/src/TreeNode.svelte b/frontend/src/TreeNode.svelte index c6d0848..b088e4a 100644 --- a/frontend/src/TreeNode.svelte +++ b/frontend/src/TreeNode.svelte @@ -1,4 +1,6 @@ {#each nodes as node} @@ -21,6 +34,7 @@ {/if} + onSelect && onSelect(node)} on:contextmenu|preventDefault={(e) => e.stopPropagation()}> {node.title} @@ -31,3 +45,18 @@ {onSelect} {onToggle} {onContextMenu} /> {/if} {/each} + + diff --git a/frontend/src/lib/TemplateIcon.svelte b/frontend/src/lib/TemplateIcon.svelte new file mode 100644 index 0000000..e3b9f7a --- /dev/null +++ b/frontend/src/lib/TemplateIcon.svelte @@ -0,0 +1,40 @@ + + + + {#if kind === 'folder'} + + {:else if kind === 'project'} + + + + + {:else if kind === 'client'} + + + {:else if kind === 'document'} + + + + + {:else if kind === 'recipe'} + + + + + + {:else if kind === 'note'} + + + {:else if kind === 'file'} + + + {:else} + + + + {/if} + diff --git a/frontend/src/lib/i18n/locales/en.js b/frontend/src/lib/i18n/locales/en.js index f7ecdc0..63c8fce 100644 --- a/frontend/src/lib/i18n/locales/en.js +++ b/frontend/src/lib/i18n/locales/en.js @@ -80,6 +80,15 @@ export default { 'sync.notConnected': 'Not connected', 'sync.disabled': 'Disabled', + 'template.optionNone': 'No template', + 'template.optional': 'Template (optional)', + 'template.folder': 'Folder', + 'template.project': 'Project', + 'template.client': 'Client', + 'template.document': 'Document', + 'template.recipe': 'Recipe', + 'template.select': 'Select template', + 'error.generic': 'An error occurred', 'error.invalidCredentials': 'Invalid username or password', } diff --git a/frontend/src/lib/i18n/locales/ru.js b/frontend/src/lib/i18n/locales/ru.js index 23e6246..c087fde 100644 --- a/frontend/src/lib/i18n/locales/ru.js +++ b/frontend/src/lib/i18n/locales/ru.js @@ -216,6 +216,12 @@ export default { 'template.optionNone': 'Без шаблона', 'template.optional': 'Шаблон (опционально)', + 'template.folder': 'Папка', + 'template.project': 'Проект', + 'template.client': 'Клиент', + 'template.document': 'Документ', + 'template.recipe': 'Рецепт', + 'template.select': 'Выберите шаблон', 'mime.jpeg': 'Изображение JPEG', 'mime.png': 'Изображение PNG',