feat: resizable layout (#19)

Author: antonreshetov

package.json

@@ -40,6 +40,7 @@
     "electron-store": "^8.0.1",
     "fs-extra": "^10.0.1",
     "highlight.js": "^11.5.1",
+    "interactjs": "^1.10.11",
     "lowdb": "^3.0.0",
     "markdown-it": "^12.3.2",
     "markdown-it-link-attributes": "^4.0.0",

src/main/store/module/app.ts

@@ -6,6 +6,8 @@ export default new Store<AppStore>({
   cwd: 'v2',
 
   defaults: {
-    bounds: {}
+    bounds: {},
+    sidebarWidth: 180,
+    snippetListWidth: 250
   }
 })

src/renderer/App.vue

@@ -36,6 +36,9 @@ const init = () => {
     store.preferences.get('editor')
   )
   if (isValid) appStore.editor = store.preferences.get('editor')
+
+  appStore.sizes.sidebar = store.app.get('sidebarWidth')
+  appStore.sizes.snippetList = store.app.get('snippetListWidth')
 }
 
 const setTheme = (theme: string) => {

src/renderer/components/editor/TheEditor.vue

@@ -213,10 +213,6 @@ watch(
   }
 )
 
-appStore.$subscribe(mutation => {
-  console.log(mutation)
-})
-
 window.addEventListener('resize', () => {
   forceRefresh.value = Math.random()
 })

src/renderer/components/sidebar/TheSidebar.vue

@@ -1,5 +1,8 @@
 <template>
-  <div class="sidebar">
+  <div
+    ref="sidebarRef"
+    class="sidebar"
+  >
     <SidebarList
       v-model="activeTab"
       :tabs="tabs"
@@ -70,14 +73,14 @@
       </AppTree>
     </SidebarList>
     <div
-      ref="gutter"
+      ref="gutterRef"
       class="gutter-line"
     />
   </div>
 </template>
 
 <script setup lang="ts">
-import { computed, ref, watch } from 'vue'
+import { computed, onMounted, ref, watch } from 'vue'
 import type {
   SidebarSystemFolder,
   SystemFolderAlias,
@@ -91,15 +94,20 @@ import Trash from '~icons/unicons/trash'
 import LabelAlt from '~icons/unicons/label-alt'
 import { useFolderStore } from '@/store/folders'
 import { useSnippetStore } from '@/store/snippets'
-import { ipc, track } from '@/electron'
+import { ipc, store, track } from '@/electron'
 import { useTagStore } from '@/store/tags'
 import { emitter } from '@/composable'
+import interact from 'interactjs'
+import { useAppStore } from '@/store/app'
 
 const folderStore = useFolderStore()
 const snippetStore = useSnippetStore()
 const tagStore = useTagStore()
+const appStore = useAppStore()
 
 const treeRef = ref()
+const sidebarRef = ref()
+const gutterRef = ref()
 
 const systemFolders = computed(() => {
   const folders = folderStore.system.map(i => {
@@ -178,6 +186,21 @@ const onDragEnter = (id: string) => {
   folderStore.hoveredId = id
 }
 
+onMounted(() => {
+  interact(sidebarRef.value).resizable({
+    allowFrom: gutterRef.value,
+    onmove: e => {
+      const { pageX } = e
+      const minWidth = 100
+
+      if (pageX < minWidth) return
+      const width = Math.floor(pageX)
+      appStore.sizes.sidebar = width
+      store.app.set('sidebarWidth', width)
+    }
+  })
+})
+
 watch(
   () => folderStore.hoveredId,
   v => {

src/renderer/components/snippets/SnippetList.vue

@@ -7,7 +7,7 @@
       <SnippetListHeader />
     </div>
     <div
-      ref="listRef"
+      ref="bodyRef"
       class="body"
     >
       <PerfectScrollbar>
@@ -23,25 +23,48 @@
         />
       </PerfectScrollbar>
     </div>
+    <div
+      ref="gutterRef"
+      class="gutter-line"
+    />
   </div>
 </template>
 
 <script setup lang="ts">
 import { emitter } from '@/composable'
 import { useAppStore } from '@/store/app'
 import { useSnippetStore } from '@/store/snippets'
-import { ref, watch } from 'vue'
+import { onMounted, ref, watch } from 'vue'
+import interact from 'interactjs'
+import { store } from '@/electron'
 
 const snippetStore = useSnippetStore()
 const appStore = useAppStore()
 
-const listRef = ref<HTMLElement>()
+const listRef = ref()
+const bodyRef = ref<HTMLElement>()
+const gutterRef = ref()
 
 const setScrollPosition = (offset: number) => {
-  const ps = listRef.value?.querySelector<HTMLElement>('.ps')
+  const ps = bodyRef.value?.querySelector<HTMLElement>('.ps')
   if (ps) ps.scrollTop = offset
 }
 
+onMounted(() => {
+  interact(listRef.value).resizable({
+    allowFrom: gutterRef.value,
+    onmove: e => {
+      const { pageX } = e
+      const minWidth = appStore.sizes.sidebar + 100
+      const width = Math.floor(pageX - appStore.sizes.sidebar)
+
+      if (pageX < minWidth) return
+      appStore.sizes.snippetList = width
+      store.app.set('snippetListWidth', width)
+    }
+  })
+})
+
 watch(
   () => appStore.isInit,
   () => {
@@ -59,6 +82,7 @@ emitter.on('folder:click', () => {
 
 <style lang="scss" scoped>
 .snippet-list {
+  position: relative;
   border-right: 1px solid var(--color-border);
   display: grid;
   grid-template-rows: 50px 1fr 10px;

src/renderer/components/snippets/SnippetListHeader.vue

@@ -68,6 +68,7 @@ const onReset = () => {
   padding: 0 var(--spacing-sm);
   position: relative;
   top: var(--title-bar-height-offset);
+  width: 100%;
   input {
     outline: none;
     border: none;

src/renderer/store/app.ts

@@ -18,6 +18,8 @@ export const useAppStore = defineStore('app', {
     showTags: true,
     sizes: {
       titlebar: 15,
+      sidebar: 180,
+      snippetList: 250,
       editor: {
         titleHeight: 34,
         fragmentsHeight: 25,

src/renderer/views/Main.vue

@@ -12,12 +12,16 @@ import { useFolderStore } from '@/store/folders'
 import { useSnippetStore } from '@/store/snippets'
 import { useTagStore } from '@/store/tags'
 import { useAppStore } from '@/store/app'
+import { computed } from 'vue'
 
 const folderStore = useFolderStore()
 const snippetStore = useSnippetStore()
 const tagStore = useTagStore()
 const appStore = useAppStore()
 
+const sidebarWidth = computed(() => appStore.sizes.sidebar + 'px')
+const snippetListWidth = computed(() => appStore.sizes.snippetList + 'px')
+
 const init = async () => {
   const storedFolderId = store.app.get('selectedFolderId')
   const storedFolderAlias = store.app.get('selectedFolderAlias')
@@ -62,7 +66,7 @@ track('main')
   height: 100vh;
   background-color: var(--color-bg);
   overflow: hidden;
-  grid-template-columns: var(--sidebar-width) var(--snippets-list-width) 1fr;
+  grid-template-columns: v-bind(sidebarWidth) v-bind(snippetListWidth) 1fr;
 }
 .update-available {
   position: absolute;

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

@@ -4,6 +4,8 @@ export interface AppStore {
   selectedFolderAlias?: string
   selectedFolderIds?: string[]
   selectedSnippetId?: string
+  sidebarWidth: number
+  snippetListWidth: number
 }
 
 interface Editor {