Migrate workspaces to Dexie

.eslintrc-todo.json

@@ -553,14 +553,6 @@
         "unused-imports/no-unused-vars": "warn"
       }
     },
-    {
-      "files": [
-        "src/store/modules/contexts.js"
-      ],
-      "rules": {
-        "@typescript-eslint/space-before-function-paren": "warn"
-      }
-    },
     {
       "files": [
         "src/store/modules/documents.js"
@@ -604,14 +596,6 @@
         "@typescript-eslint/comma-dangle": "warn"
       }
     },
-    {
-      "files": [
-        "src/store/plugins/caching/contexts.js"
-      ],
-      "rules": {
-        "no-case-declarations": "warn"
-      }
-    },
     {
       "files": [
         "src/store/plugins/caching/documents.js"

composables/useWorkspaces.ts

@@ -0,0 +1,21 @@
+import { cloneDeep } from 'lodash-es'
+import type { Workspace } from '../src/db/databases/legacy'
+
+export const useWorkspaces = () => {
+  const { db } = useDatabase()
+  const { result: workspaces } = useQuery(() => db.workspaces.orderBy('name').toArray(), [])
+
+  const addWorkspace = async (workspace: Workspace) => {
+    return db.workspaces.add(cloneDeep(workspace))
+  }
+
+  const destroyWorkspace = async (id: string) => {
+    return db.workspaces.delete(id)
+  }
+
+  return {
+    addWorkspace,
+    destroyWorkspace,
+    workspaces,
+  }
+}

package.json

@@ -66,6 +66,7 @@
     "@tailwindcss/typography": "^0.5.10",
     "@types/culori": "^2.0.4",
     "@types/file-saver": "^2.0.7",
+    "@types/lodash-es": "^4.17.12",
     "@types/mime-types": "^2.1.4",
     "@types/node": "^18.19.4",
     "@types/remarkable": "^2.0.8",
@@ -84,6 +85,7 @@
     "eslint-generate-todo": "^0.2.0",
     "firebase-tools": "^13.3.1",
     "happy-dom": "^12.10.3",
+    "lodash-es": "^4.17.21",
     "micromark": "^3.1.0",
     "npm-run-all": "^4.1.5",
     "nuxt": "^3.9.0",

pages/menu.vue

@@ -1,11 +1,12 @@
 <script lang="ts" setup>
 import { nanoid } from 'nanoid'
-import CoreLink from '#root/components/CoreLink.vue'
-import ModKKey from '#root/components/ModKKey.vue'
-import TagLink from '#root/components/TagLink.vue'
-import { DEACTIVATE_CONTEXT, SET_CONTEXT_TAGS } from '#root/src/store/actions'
-import { useFiles } from '#root/src/stores/useFiles'
-import { AsyncIterable } from '#root/src/utils/iterables'
+import CoreLink from '/components/CoreLink.vue'
+import ModKKey from '/components/ModKKey.vue'
+import TagLink from '/components/TagLink.vue'
+import { useWorkspaces } from '/composables/useWorkspaces'
+import { DEACTIVATE_CONTEXT, SET_CONTEXT_TAGS } from '/src/store/actions'
+import { useFiles } from '/src/stores/useFiles'
+import { AsyncIterable } from '/src/utils/iterables'
 
 const { user } = useUser()
 const { store } = useVuex()
@@ -19,7 +20,7 @@ const mediumPlus = computed(() => mq.value.mdPlus)
 const experimentalFeaturesEnabled = computed(() => store.state.settings.experimental)
 const context = computed(() => store.state.context)
 const contextTags = computed(() => [...context.value.tags].sort())
-const contexts = computed(() => store.getters.sortedContexts)
+const { workspaces } = useWorkspaces()
 const tags = computed(() => store.getters.tags)
 
 const clearContext = () => {
@@ -200,8 +201,8 @@ const trackCta = () => {
             <TagLink v-for="tag in contextTags" :key="tag" :tag="tag" class="sidebar-link" />
           </div>
         </DashPanel>
-        <DashPanel v-if="contexts.length" class="flex flex-col bg-layer" collapsed label="Workspaces">
-          <button v-for="workspace in contexts" :key="workspace.id" class="sidebar-link w-full" @click="setContext(workspace)">
+        <DashPanel v-if="workspaces.length" class="flex flex-col bg-layer" collapsed label="Workspaces">
+          <button v-for="workspace in workspaces" :key="workspace.id" class="sidebar-link w-full" @click="setContext(workspace)">
             <Icon name="Workspace" />
             <span class="action flex flex-grow items-stretch justify-between ml-2">
               <span>{{ workspace.name }}</span>

pages/workspaces.vue

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
 import { nanoid } from 'nanoid'
-import CoreButton from '#root/components/CoreButton.vue'
-import Tag from '#root/components/Tag.vue'
-import { ADD_CONTEXT, REMOVE_CONTEXT } from '#root/src/store/modules/contexts'
+import CoreButton from '/components/CoreButton.vue'
+import Tag from '/components/Tag.vue'
+import { useWorkspaces } from '/composables/useWorkspaces'
 
 const query = ref('')
 const selectedTags = ref<string[]>([])
@@ -15,22 +15,16 @@ const filteredTags = computed(() => {
   })
 })
 
-const workspaces = computed(() => {
-  return store.getters.sortedContexts
-})
+const { addWorkspace, destroyWorkspace, workspaces } = useWorkspaces()
 
 useHead({ title: 'Workspaces' })
 
 const isTagSelected = (tag: string) => {
   return selectedTags.value.includes(tag)
 }
 
-const removeWorkspace = (workspace: any) => {
-  store.commit(REMOVE_CONTEXT, workspace)
-}
-
-const saveWorkspace = () => {
-  store.commit(ADD_CONTEXT, {
+const saveWorkspace = async () => {
+  await addWorkspace({
     id: nanoid(),
     name: workspaceName.value,
     tags: selectedTags.value,
@@ -69,7 +63,7 @@ onUnmounted(() => {
             <div class="flex items-center flex-wrap gap-2">
               <Tag v-for="tag in workspace.tags" :key="tag" class="p-2 rounded border border-layer">{{ tag }}</Tag>
             </div>
-            <CoreButton class="absolute top-4 right-4" @click="removeWorkspace(workspace)">
+            <CoreButton class="absolute top-4 right-4" @click="destroyWorkspace(workspace.id)">
               <Icon name="Trash" />
             </CoreButton>
           </CoreCard>

src/store.js

@@ -3,14 +3,12 @@ import { isClient } from '#helpers/environment'
 
 // modules
 import authModule from '#root/src/store/modules/auth'
-import contextsModule from '#root/src/store/modules/contexts'
 import documentsModule from '#root/src/store/modules/documents'
 import keybindingsModule from '#root/src/store/modules/keybindings'
 import settingsModule from '#root/src/store/modules/settings'
 import syncModule from '#root/src/store/modules/sync'
 
 // plugins
-import contextsCachingPlugin from '#root/src/store/plugins/caching/contexts'
 import documentsCachingPlugin from '#root/src/store/plugins/caching/documents'
 import keybindingsPlugin from '#root/src/store/plugins/keybindings'
 import settingsCachingPlugin from '#root/src/store/plugins/caching/settings'
@@ -170,14 +168,12 @@ export const store = createStore({
   },
   modules: {
     auth: authModule,
-    contexts: contextsModule,
     documents: documentsModule,
     keybindings: keybindingsModule,
     settings: settingsModule,
     sync: syncModule,
   },
   plugins: [
-    contextsCachingPlugin,
     documentsCachingPlugin,
     keybindingsPlugin,
     settingsCachingPlugin,

src/store/modules/keybindings.js

@@ -31,7 +31,7 @@ const makeListener = (keybinding, callback, context) => {
 const makeListeners = (context) => {
   return [
     makeListener('a', () => goTo('/account'), context),
-    makeListener('c', () => goTo('/contexts'), context),
+    makeListener('c', () => goTo('/workspaces'), context),
     makeListener('d', () => goTo('/docs/f/discarded'), context),
     makeListener('e', () => goTo('/force-graph'), context),
     makeListener('n', () => goTo('/docs/new'), context),