feat(snippets): add compact mode (#372)

Author: antonreshetov

src/main/menu/main.ts

@@ -343,6 +343,16 @@ const viewMenu: MenuItemConstructorOptions[] = [
         'main-menu:hide-subfolder-snippets'
       )
     }
+  },
+  {
+    label: i18n.t('menu:view.compactMode'),
+    type: 'checkbox',
+    checked: store.app.get('compactMode'),
+    click: () => {
+      BrowserWindow.getFocusedWindow()?.webContents.send(
+        'main-menu:compact-mode-snippets'
+      )
+    }
   }
 ]
 

src/main/services/i18n/locales/en/menu.json

@@ -50,7 +50,8 @@
       "dateCreated": "Date Created",
       "name": "Name"
     },
-    "hideSubfolderSnippets": "Hide Subfolder Snippets"
+    "hideSubfolderSnippets": "Hide Subfolder Snippets",
+    "compactMode": "Compact Mode"
   },
   "edit": {
     "label": "Edit",

src/main/services/i18n/locales/ru/menu.json

@@ -50,7 +50,8 @@
       "dateCreated": "Дате создания",
       "name": "Имени"
     },
-    "hideSubfolderSnippets": "Скрыть сниппеты в подпапках"
+    "hideSubfolderSnippets": "Скрыть сниппеты в подпапках",
+    "compactMode": "Компактный режим"
   },
   "edit": {
     "label": "Изменить",

src/main/store/module/app.ts

@@ -10,6 +10,7 @@ export default new Store<AppStore>({
     sidebarWidth: 180,
     snippetListWidth: 250,
     sort: 'updatedAt',
-    hideSubfolderSnippets: false
+    hideSubfolderSnippets: false,
+    compactMode: false
   }
 })

src/renderer/App.vue

@@ -86,6 +86,7 @@ const init = async () => {
 
   snippetStore.sort = store.app.get('sort')
   snippetStore.hideSubfolderSnippets = store.app.get('hideSubfolderSnippets')
+  snippetStore.compactMode = store.app.get('compactMode')
 
   if (theme) {
     appStore.setTheme(theme)
@@ -234,6 +235,11 @@ ipc.on('main-menu:hide-subfolder-snippets', () => {
   store.app.set('hideSubfolderSnippets', snippetStore.hideSubfolderSnippets)
 })
 
+ipc.on('main-menu:compact-mode-snippets', () => {
+  snippetStore.compactMode = !snippetStore.compactMode
+  store.app.set('compactMode', snippetStore.compactMode)
+})
+
 ipc.on('main-menu:add-description', async () => {
   await onAddDescription()
 })

src/renderer/components/snippets/SnippetListItem.vue

@@ -5,7 +5,8 @@
     :class="{
       'is-selected': !isFocused && isSelected,
       'is-focused': isFocused,
-      'is-highlighted': isHighlighted || isHighlightedMultiple
+      'is-highlighted': isHighlighted || isHighlightedMultiple,
+      'is-compact': snippetStore.compactMode
     }"
     :draggable="true"
     @click="onClickSnippet"
@@ -15,12 +16,23 @@
   >
     <div class="header">
       <div class="name">
-        <span>
-          {{ name || 'Untitled snippet' }}
-        </span>
+        <div class="name__inner">
+          <span>
+            {{ name || 'Untitled snippet' }}
+          </span>
+          <span
+            v-if="snippetStore.compactMode"
+            class="date"
+          >
+            {{ dateFormat }}
+          </span>
+        </div>
       </div>
     </div>
-    <div class="footer">
+    <div
+      v-if="!snippetStore.compactMode"
+      class="footer"
+    >
       <div class="folder">
         {{ folder || 'Inbox' }}
       </div>
@@ -322,7 +334,7 @@ onUnmounted(() => {
       top: 0px;
       left: 8px;
       right: 8px;
-      bottom: 0px;
+      bottom: 3px;
       border-radius: 5px;
       z-index: 1;
     }
@@ -352,6 +364,14 @@ onUnmounted(() => {
       outline-offset: -2px;
     }
   }
+  &.is-compact {
+    .date {
+      color: var(--color-text-3);
+      font-size: 11px;
+      position: relative;
+      top: 1px;
+    }
+  }
 }
 .name {
   display: table;
@@ -361,10 +381,15 @@ onUnmounted(() => {
   position: relative;
   z-index: 1;
   line-height: 24px;
-  span {
-    display: -webkit-box;
-    -webkit-line-clamp: 1;
-    -webkit-box-orient: vertical;
+  &__inner {
+    display: flex;
+    justify-content: space-between;
+    gap: 4px;
+    span {
+      display: -webkit-box;
+      -webkit-line-clamp: 1;
+      -webkit-box-orient: vertical;
+    }
   }
 }
 .footer {

src/renderer/store/snippets.ts

@@ -28,6 +28,7 @@ export const useSnippetStore = defineStore('snippets', {
     searchQuery: undefined,
     sort: 'updatedAt',
     hideSubfolderSnippets: false,
+    compactMode: false,
     isContextState: false,
     isMarkdownPreview: false,
     isScreenshotPreview: false,

src/shared/types/main/index.d.ts

@@ -46,6 +46,7 @@ type MainMenuAction =
   | 'search'
   | 'sort-snippets'
   | 'hide-subfolder-snippets'
+  | 'compact-mode-snippets'
   | 'font-size-increase'
   | 'font-size-decrease'
   | 'font-size-reset'

src/shared/types/main/store.d.ts

@@ -14,6 +14,7 @@ export interface AppStore {
   snippetListWidth: number
   sort: SnippetsSort
   hideSubfolderSnippets?: boolean
+  compactMode?: boolean
   version?: string
 }
 

src/shared/types/renderer/store/snippets.d.ts

@@ -13,6 +13,7 @@ export interface State {
   searchQuery?: string
   sort: SnippetsSort
   hideSubfolderSnippets: boolean
+  compactMode: boolean
   isContextState: boolean
   isMarkdownPreview: boolean
   isScreenshotPreview: boolean