fix(snippets): multiple select (#373)

Author: antonreshetov

src/renderer/components/snippets/SnippetListItem.vue

@@ -3,7 +3,7 @@
     ref="itemRef"
     class="item"
     :class="{
-      'is-selected': !isFocused && isSelected,
+      'is-selected': isSelected,
       'is-focused': isFocused,
       'is-highlighted': isHighlighted || isHighlightedMultiple,
       'is-compact': snippetStore.compactMode
@@ -101,16 +101,16 @@ onClickOutside(itemRef, () => {
 
 const onClickSnippet = (e: MouseEvent) => {
   if (e.shiftKey) {
-    if (snippetStore.selectedIndex < props.index) {
-      snippetStore.selectedMultiple = snippetStore.snippets.slice(
-        snippetStore.selectedIndex,
-        props.index + 1
-      )
-    } else {
-      snippetStore.selectedMultiple = snippetStore.snippets.slice(
+    if (snippetStore.selectedIndex > props.index) {
+      snippetStore.selectedMultiple = snippetStore.snippetsByFilter.slice(
         props.index,
         snippetStore.selectedIndex + 1
       )
+    } else {
+      snippetStore.selectedMultiple = snippetStore.snippetsByFilter.slice(
+        snippetStore.selectedIndex,
+        props.index + 1
+      )
     }
     snippetStore.selected = undefined
     isFocused.value = false
@@ -341,11 +341,11 @@ onUnmounted(() => {
   }
   &.is-focused {
     &::before {
-      background-color: var(--color-primary);
+      background-color: var(--color-primary) !important;
     }
     .name,
     .footer {
-      color: #fff;
+      color: #fff !important;
     }
   }
   &.is-selected {

src/renderer/store/snippets.ts

@@ -36,7 +36,7 @@ export const useSnippetStore = defineStore('snippets', {
   }),
 
   getters: {
-    snippetsByFilter: state => {
+    snippetsByFilter: (state): SnippetWithFolder[] => {
       const folderStore = useFolderStore()
 
       if (folderStore.selectedAlias) {
@@ -53,8 +53,11 @@ export const useSnippetStore = defineStore('snippets', {
     },
     selectedId: state => state.selected?.id,
     selectedIds: state => state.selectedMultiple.map(i => i.id),
-    selectedIndex: state =>
-      state.snippets.findIndex(i => i.id === state.selected?.id),
+    selectedIndex () {
+      // @ts-expect-error
+      // FIXME: Разобраться с типами
+      return this.snippetsByFilter.findIndex(i => i.id === this.selected?.id)
+    },
     currentContent: state =>
       state.selected?.content?.[state.fragment]?.value || undefined,
     currentLanguage: state =>