feat: add placeholders (#545)

antonreshetov · web-flow · commit 035c59a885bd · 2025-04-12T06:06:34.000+03:00
* feat(ui): add Placeholder component for empty state display

* refactor(ui): replace empty state messages with UiEmptyPlaceholder

* feat(i18n): add empty folders and snippets messages in locales
diff --git a/src/main/i18n/locales/cs_CZ/ui.json b/src/main/i18n/locales/cs_CZ/ui.json
@@ -96,6 +96,8 @@
   },
   "placeholder": {
     "emptyTagList": "Přidejte tagy ke snippetům, aby se zde zobrazily",
+    "emptyFoldersList": "Žádné složky",
+    "emptySnippetsList": "Žádné snippety",
     "search": "Hledat",
     "addTag": "Přidat tag"
   }
diff --git a/src/main/i18n/locales/de_DE/ui.json b/src/main/i18n/locales/de_DE/ui.json
@@ -96,6 +96,8 @@
   },
   "placeholder": {
     "emptyTagList": "Fügen Sie Tags zu Snippets hinzu, um sie hier zu sehen",
+    "emptyFoldersList": "Keine Ordner",
+    "emptySnippetsList": "Keine Snippets",
     "search": "Suchen",
     "addTag": "Tag hinzufügen"
   }
diff --git a/src/main/i18n/locales/el_GR/ui.json b/src/main/i18n/locales/el_GR/ui.json
@@ -96,6 +96,8 @@
   },
   "placeholder": {
     "emptyTagList": "Προσθέστε tags στα snippets για να τα δείτε εδώ",
+    "emptyFoldersList": "Κανένας φάκελος",
+    "emptySnippetsList": "Κανένα απόσπασμα",
     "search": "Αναζήτηση",
     "addTag": "Προσθήκη Tag"
   }
diff --git a/src/main/i18n/locales/en_US/ui.json b/src/main/i18n/locales/en_US/ui.json
@@ -97,6 +97,8 @@
   },
   "placeholder": {
     "emptyTagList": "Add tags to snippets to see them here",
+    "emptyFoldersList": "No Folders",
+    "emptySnippetsList": "No Snippets",
     "search": "Search",
     "addTag": "Add Tag"
   }
diff --git a/src/main/i18n/locales/es_ES/ui.json b/src/main/i18n/locales/es_ES/ui.json
@@ -96,6 +96,8 @@
   },
   "placeholder": {
     "emptyTagList": "Agregue etiquetas a los snippets para verlos aquí",
+    "emptyFoldersList": "Sin carpetas",
+    "emptySnippetsList": "Sin fragmentos",
     "search": "Buscar",
     "addTag": "Agregar Etiqueta"
   }
diff --git a/src/main/i18n/locales/fa_IR/ui.json b/src/main/i18n/locales/fa_IR/ui.json
@@ -96,6 +96,8 @@
   },
   "placeholder": {
     "emptyTagList": "برای مشاهده snippetها در اینجا، به آنها برچسب اضافه کنید",
+    "emptyFoldersList": "بدون پوشه",
+    "emptySnippetsList": "بدون اسنیپت",
     "search": "جستجو",
     "addTag": "افزودن برچسب"
   }
diff --git a/src/main/i18n/locales/fr_FR/ui.json b/src/main/i18n/locales/fr_FR/ui.json
@@ -96,6 +96,8 @@
   },
   "placeholder": {
     "emptyTagList": "Ajoutez des tags aux snippets pour les voir ici",
+    "emptyFoldersList": "Aucun dossier",
+    "emptySnippetsList": "Aucun snippet",
     "search": "Rechercher",
     "addTag": "Ajouter un tag"
   }
diff --git a/src/main/i18n/locales/ja_JP/ui.json b/src/main/i18n/locales/ja_JP/ui.json
@@ -96,6 +96,8 @@
   },
   "placeholder": {
     "emptyTagList": "タグを追加するとここに表示されます",
+    "emptyFoldersList": "フォルダーなし",
+    "emptySnippetsList": "スニペットなし",
     "search": "検索",
     "addTag": "タグを追加"
   }
diff --git a/src/main/i18n/locales/pl_PL/ui.json b/src/main/i18n/locales/pl_PL/ui.json
@@ -96,6 +96,8 @@
   },
   "placeholder": {
     "emptyTagList": "Dodaj tagi do fragmentów, aby zobaczyć je tutaj",
+    "emptyFoldersList": "Brak folderów",
+    "emptySnippetsList": "Brak snippetów",
     "search": "Szukaj",
     "addTag": "Dodaj tag"
   }
diff --git a/src/main/i18n/locales/pt_BR/ui.json b/src/main/i18n/locales/pt_BR/ui.json
@@ -96,6 +96,8 @@
   },
   "placeholder": {
     "emptyTagList": "Adicione tags aos snippets para vê-las aqui",
+    "emptyFoldersList": "Sem pastas",
+    "emptySnippetsList": "Sem snippets",
     "search": "Pesquisar",
     "addTag": "Adicionar Tag"
   }
diff --git a/src/main/i18n/locales/ro_RO/ui.json b/src/main/i18n/locales/ro_RO/ui.json
@@ -96,6 +96,8 @@
   },
   "placeholder": {
     "emptyTagList": "Adăugați tags la snippets pentru a le vedea aici",
+    "emptyFoldersList": "Fără foldere",
+    "emptySnippetsList": "Fără fragmente",
     "search": "Caută",
     "addTag": "Adaugă Tag"
   }
diff --git a/src/main/i18n/locales/ru_RU/ui.json b/src/main/i18n/locales/ru_RU/ui.json
@@ -96,6 +96,8 @@
   },
   "placeholder": {
     "emptyTagList": "Добавьте теги к сниппетам, чтобы увидеть их здесь",
+    "emptyFoldersList": "Нет папок",
+    "emptySnippetsList": "Нет сниппетов",
     "search": "Поиск",
     "addTag": "Добавить тег"
   }
diff --git a/src/main/i18n/locales/tr_TR/ui.json b/src/main/i18n/locales/tr_TR/ui.json
@@ -96,6 +96,8 @@
   },
   "placeholder": {
     "emptyTagList": "Burada görmek için snippet'lere etiket ekleyin",
+    "emptyFoldersList": "Klasör yok",
+    "emptySnippetsList": "Snippet yok",
     "search": "Ara",
     "addTag": "Etiket Ekle"
   }
diff --git a/src/main/i18n/locales/uk_UA/ui.json b/src/main/i18n/locales/uk_UA/ui.json
@@ -96,6 +96,8 @@
   },
   "placeholder": {
     "emptyTagList": "Додайте теги до сніпетів, щоб побачити їх тут",
+    "emptyFoldersList": "Немає папок",
+    "emptySnippetsList": "Немає сніппетів",
     "search": "Пошук",
     "addTag": "Додати тег"
   }
diff --git a/src/main/i18n/locales/zh_CN/ui.json b/src/main/i18n/locales/zh_CN/ui.json
@@ -96,6 +96,8 @@
   },
   "placeholder": {
     "emptyTagList": "在代码片段中添加标签以在此处查看",
+    "emptyFoldersList": "没有文件夹",
+    "emptySnippetsList": "没有代码片段",
     "search": "搜索",
     "addTag": "添加标签"
   }
diff --git a/src/main/i18n/locales/zh_HK/ui.json b/src/main/i18n/locales/zh_HK/ui.json
@@ -96,6 +96,8 @@
   },
   "placeholder": {
     "emptyTagList": "在程式碼片段中添加標籤以在此處查看",
+    "emptyFoldersList": "沒有資料夾",
+    "emptySnippetsList": "沒有程式碼片段",
     "search": "搜索",
     "addTag": "添加標籤"
   }
diff --git a/src/main/i18n/locales/zh_TW/ui.json b/src/main/i18n/locales/zh_TW/ui.json
@@ -96,6 +96,8 @@
   },
   "placeholder": {
     "emptyTagList": "在程式碼片段中添加標籤以在此處查看",
+    "emptyFoldersList": "沒有資料夾",
+    "emptySnippetsList": "沒有程式碼片段",
     "search": "搜尋",
     "addTag": "添加標籤"
   }
diff --git a/src/renderer/components/editor/Editor.vue b/src/renderer/components/editor/Editor.vue
@@ -229,18 +229,17 @@ async function format() {
 
 ipc.on('main-menu:format', format)
 
-// если isShowMarkdown или !isEmpty && selectedSnippetIds.length <= 1
 const isShowHeader = computed(() => {
   return (
     isShowMarkdown.value
-    || (!isEmpty.value && selectedSnippetIds.value.length <= 1)
+    || (!isEmpty.value && selectedSnippetIds.value.length === 1)
   )
 })
-// если !isShowMarkdown или !isEmpty && selectedSnippetIds.length <= 1
 const isShowEditor = computed(() => {
   return (
     !isShowMarkdown.value
-    && (!isEmpty.value || selectedSnippetIds.value.length > 1)
+    && !isEmpty.value
+    && selectedSnippetIds.value.length === 1
   )
 })
 
@@ -263,18 +262,21 @@ onMounted(() => {
     <EditorMarkdown v-if="isShowMarkdown" />
     <EditorFooter v-if="isShowEditor" />
     <div
-      v-if="isEmpty"
+      v-if="isEmpty || selectedSnippetIds.length > 1"
       class="row-span-full flex items-center justify-center"
     >
-      {{ i18n.t("snippet.noSelected") }}
-    </div>
-    <div
-      v-if="selectedSnippetIds.length > 1"
-      class="row-span-full flex items-center justify-center"
-    >
-      {{
-        i18n.t("snippet.selectedMultiple", { count: selectedSnippetIds.length })
-      }}
+      <UiEmptyPlaceholder
+        v-if="isEmpty"
+        :text="i18n.t('snippet.noSelected')"
+      />
+      <UiEmptyPlaceholder
+        v-if="!isEmpty && selectedSnippetIds.length > 1"
+        :text="
+          i18n.t('snippet.selectedMultiple', {
+            count: selectedSnippetIds.length,
+          })
+        "
+      />
     </div>
   </div>
 </template>
diff --git a/src/renderer/components/sidebar/library/Library.vue b/src/renderer/components/sidebar/library/Library.vue
@@ -193,13 +193,18 @@ function onResizeTagList(val: number[]) {
     </div>
     <SplitterPanel as-child>
       <Tree
-        v-if="folders"
+        v-if="folders?.length"
         v-model="folders"
         class="px-0.5 pb-1"
         @click-node="onFolderClick"
         @toggle-node="onFolderToggle"
         @drag-node="onFolderDrag"
       />
+
+      <UiEmptyPlaceholder
+        v-else
+        :text="i18n.t('placeholder.emptyFoldersList')"
+      />
     </SplitterPanel>
     <SplitterResizeHandle class="relative cursor-none">
       <UiGutter orientation="horizontal" />
diff --git a/src/renderer/components/sidebar/tags/Tags.vue b/src/renderer/components/sidebar/tags/Tags.vue
@@ -3,7 +3,7 @@ import * as ContextMenu from '@/components/ui/shadcn/context-menu'
 import { useApp, useDialog, useSnippets, useTags } from '@/composables'
 import { i18n } from '@/electron'
 
-const { tags, getTags, deleteTag, isLoading } = useTags()
+const { tags, getTags, deleteTag } = useTags()
 const { highlightedTagId, state } = useApp()
 const {
   getSnippets,
@@ -92,10 +92,8 @@ function onUpdateContextMenu(bool: boolean) {
       </ContextMenu.Content>
     </ContextMenu.Root>
   </PerfectScrollbar>
-  <div
-    v-else-if="!isLoading"
-    class="text-text-muted flex h-full items-center justify-center text-center"
-  >
-    {{ i18n.t("placeholder.emptyTagList") }}
-  </div>
+  <UiEmptyPlaceholder
+    v-else
+    :text="i18n.t('placeholder.emptyTagList')"
+  />
 </template>
diff --git a/src/renderer/components/snippet/List.vue b/src/renderer/components/snippet/List.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { PerfectScrollbarExpose } from 'vue3-perfect-scrollbar'
 import { useApp, useGutter, useSnippets } from '@/composables'
-import { store } from '@/electron'
+import { i18n, store } from '@/electron'
 import { APP_DEFAULTS } from '~/main/store/constants'
 
 const listRef = ref<HTMLElement>()
@@ -43,7 +43,10 @@ watch(displayedSnippets, () => {
     <div>
       <SnippetHeader />
     </div>
-    <PerfectScrollbar ref="scrollbarRef">
+    <PerfectScrollbar
+      v-if="displayedSnippets?.length"
+      ref="scrollbarRef"
+    >
       <div class="flex-grow overflow-y-auto px-2">
         <SnippetItem
           v-for="snippet in displayedSnippets"
@@ -52,6 +55,10 @@ watch(displayedSnippets, () => {
         />
       </div>
     </PerfectScrollbar>
+    <UiEmptyPlaceholder
+      v-else
+      :text="i18n.t('placeholder.emptySnippetsList')"
+    />
     <UiGutter ref="gutterRef" />
   </div>
 </template>
diff --git a/src/renderer/components/ui/empty/Placeholder.vue b/src/renderer/components/ui/empty/Placeholder.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+interface Props {
+  text: string
+}
+
+defineProps<Props>()
+</script>
+
+<template>
+  <div
+    class="text-text-muted flex h-full items-center justify-center text-center"
+  >
+    {{ text }}
+  </div>
+</template>

Original file line number	Diff line number	Diff line change
`@@ -96,6 +96,8 @@`
`96`	`96`	`},`
`97`	`97`	`"placeholder": {`
`98`	`98`	`"emptyTagList": "Přidejte tagy ke snippetům, aby se zde zobrazily",`
	`99`	`+ "emptyFoldersList": "Žádné složky",`
	`100`	`+ "emptySnippetsList": "Žádné snippety",`
`99`	`101`	`"search": "Hledat",`
`100`	`102`	`"addTag": "Přidat tag"`
`101`	`103`	`}`
Original file line number	Diff line number	Diff line change
`@@ -97,6 +97,8 @@`
`97`	`97`	`},`
`98`	`98`	`"placeholder": {`
`99`	`99`	`"emptyTagList": "Add tags to snippets to see them here",`
	`100`	`+ "emptyFoldersList": "No Folders",`
	`101`	`+ "emptySnippetsList": "No Snippets",`
`100`	`102`	`"search": "Search",`
`101`	`103`	`"addTag": "Add Tag"`
`102`	`104`	`}`