Migrate to Dexie (#300)

.env.example

@@ -1,4 +1,3 @@
-CYPRESS_BASE_URL=http://127.0.0.1:8888
 FIREBASE_PROJECT_ID=demo-octo
 FIREBASE_TOKEN=fake
 NUXT_PUBLIC_CDN_URL=

.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"
@@ -809,14 +793,6 @@
         "@typescript-eslint/comma-dangle": "warn"
       }
     },
-    {
-      "files": [
-        "test/cypress/support/e2e.ts"
-      ],
-      "rules": {
-        "no-proto": "warn"
-      }
-    },
     {
       "files": [
         "types/types.ts"

.github/workflows/ci.yml

@@ -64,7 +64,6 @@ jobs:
           key: v1-${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
           path: |
             ${{ env.STORE_PATH }}
-            ~/.cache/Cypress
           restore-keys: v1-${{ runner.os }}-pnpm-store-
       - name: Install dependencies
         run: pnpm install --shamefully-hoist
@@ -93,62 +92,11 @@ jobs:
           key: v1-${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
           path: |
             ${{ env.STORE_PATH }}
-            ~/.cache/Cypress
           restore-keys: v1-${{ runner.os }}-pnpm-store-
       - name: Install dependencies
         run: pnpm install --shamefully-hoist
       - name: Run linter
         run: pnpm lint
-  test-e2e-cypress:
-    env:
-      NUXT_PUBLIC_FIREBASE_EMULATOR_AUTH: http://127.0.0.1:32775
-    needs:
-      - install-dependencies
-    runs-on: ubuntu-latest
-    steps:
-      - name: Checkout the repository
-        uses: actions/checkout@v4
-      - name: Install Node
-        uses: actions/setup-node@v4
-        with:
-          node-version: 18
-      - name: Install pnpm
-        uses: pnpm/action-setup@v4
-        with:
-          run_install: false
-      - name: Get pnpm store directory
-        shell: bash
-        run: |
-          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
-      - name: Setup pnpm cache
-        uses: actions/cache@v3
-        with:
-          key: v1-${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
-          path: |
-            ${{ env.STORE_PATH }}
-            ~/.cache/Cypress
-          restore-keys: v1-${{ runner.os }}-pnpm-store-
-      - name: Install dependencies
-        run: pnpm install --shamefully-hoist
-      - uses: cypress-io/github-action@v6.5.0
-        with:
-          build: pnpm build
-          config: baseUrl=http://127.0.0.1:8889
-          install: false
-          start: |
-            pnpm firebase:start
-            pnpm preview
-          wait-on: 'http://127.0.0.1:8889,http://127.0.0.1:32777'
-      - uses: actions/upload-artifact@v3
-        if: failure()
-        with:
-          name: cypress-screenshots
-          path: test/cypress/screenshots
-      - uses: actions/upload-artifact@v3
-        if: failure()
-        with:
-          name: cypress-videos
-          path: test/cypress/videos
   test-e2e-playwright:
     needs:
       - install-dependencies
@@ -174,7 +122,6 @@ jobs:
           key: v1-${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
           path: |
             ${{ env.STORE_PATH }}
-            ~/.cache/Cypress
           restore-keys: v1-${{ runner.os }}-pnpm-store-
       - name: Install dependencies
         run: pnpm install --shamefully-hoist
@@ -211,7 +158,6 @@ jobs:
           key: v1-${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
           path: |
             ${{ env.STORE_PATH }}
-            ~/.cache/Cypress
           restore-keys: v1-${{ runner.os }}-pnpm-store-
       - name: Install dependencies
         run: pnpm install --shamefully-hoist
@@ -242,7 +188,6 @@ jobs:
           key: v1-${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
           path: |
             ${{ env.STORE_PATH }}
-            ~/.cache/Cypress
           restore-keys: v1-${{ runner.os }}-pnpm-store-
       - name: Install dependencies
         run: pnpm install --shamefully-hoist

.gitignore

@@ -21,9 +21,6 @@ firebase/data
 node_modules
 public/manifest.webmanifest
 supabase
-test/cypress/downloads
-test/cypress/screenshots
-test/cypress/videos
 
 # We are not using Zero-Installs.
 # https://yarnpkg.com/getting-started/qa/#which-files-should-be-gitignored

app.vue

@@ -1,5 +1,9 @@
 <script lang="ts">
-import { loadSettings } from '#root/src/store/plugins/caching/settings'
+import { appEventTypes, logEvent } from '/helpers/app'
+import { loadKeybindings } from '/src/store/modules/keybindings'
+import { loadDocs } from '/src/store/plugins/caching/documents'
+import { loadSettings } from '/src/store/plugins/caching/settings'
+import { syncDocs } from '/src/store/plugins/sync'
 
 import 'overlayscrollbars/overlayscrollbars.css'
 
@@ -11,13 +15,19 @@ export default defineComponent({
 
     const isMounted = ref(false)
 
-    onMounted(() => {
+    onMounted(async () => {
       isMounted.value = true
 
+      await loadSettings(store)
+      await loadDocs(store)
+      await loadKeybindings(store)
+
+      syncDocs(store)
+
       // This is used by tests to determine when the app is ready.
       document.body.dataset.isMounted = 'true'
 
-      loadSettings(store)
+      logEvent(appEventTypes.appMounted)
     })
 
     const sizes = computed(() => {

components/AssistantHistoryChat.vue

@@ -1,5 +1,5 @@
 <script lang="ts">
-import { type Chat } from '#helpers/database'
+import { type Chat } from '/src/db'
 
 export default defineComponent({
   props: {

components/AssistantHistoryChatMessage.vue

@@ -1,5 +1,5 @@
 <script lang="ts">
-import { type ChatMessage } from '#helpers/database'
+import { type ChatMessage } from '/src/db'
 
 const trimMessage = (message = '') => {
   return message.length > 200 ? `${message.slice(0, 200)}...` : message

components/CoreInput.vue

@@ -132,6 +132,7 @@ onMounted(() => {
             :value="modelProxy"
             class="unset-all cursor-text block min-h-0 overflow-hidden resize-none placeholder-muted"
             :class="{ 'whitespace-nowrap': !multiline }"
+            data-core-input
             @input="modelProxy = $event.target.value"
             @keypress.enter="handleEnter"
           />

components/DocEditor.vue

@@ -51,7 +51,7 @@ export default defineComponent({
     watch(coreEditor, () => {
       focus()
 
-      // Expose the Ink instance for Cypress.
+      // Expose the Ink instance for tests.
       window.inkMde = coreEditor.value?.instance
     })
 

components/DocList.vue

@@ -152,7 +152,7 @@ export default defineComponent({
         @keypress.enter.prevent="selectDoc(doc.id)"
         @click="selectDoc(doc.id)"
       >
-        <LazyDoc v-bind="doc" :allow-discard="isEditing" class="h-96" />
+        <Doc v-bind="doc" :allow-discard="isEditing" class="h-96" />
         <div v-if="doc.selected" class="flex items-center justify-center rounded absolute inset-0 bg-layer bg-opacity-50">
           <Icon name="CheckCircle" size="3rem" />
         </div>

composables/useChatMessages.ts

@@ -1,4 +1,4 @@
-import { type ChatMessage } from '#helpers/database'
+import { type ChatMessage } from '/src/db'
 
 export const useChatMessage = (id?: Ref<string>) => {
   const { db } = useDatabase()

composables/useChats.ts

@@ -1,4 +1,4 @@
-import { type Chat } from '#helpers/database'
+import { type Chat } from '/src/db'
 
 export const useChat = (id?: Ref<string>) => {
   const { db } = useDatabase()

composables/useDatabase.ts

@@ -2,7 +2,7 @@ import { tryOnScopeDispose } from '@vueuse/core'
 import { type Subscription } from 'rxjs'
 import { liveQuery } from 'dexie'
 import { type Ref, ref } from 'vue'
-import { db } from '#helpers/database'
+import { db } from '/src/db'
 import { isClient } from '#helpers/environment'
 
 export type QueryReturnType<T, I = undefined> = { result: Ref<T | I> }

composables/useRoot.ts

@@ -1,5 +1,4 @@
 import { getAuth } from 'firebase/auth'
-import { useStore } from 'vuex'
 import { appEventTypes, logEvent } from '#helpers/app'
 import { isClient } from '#helpers/environment'
 import { init } from '#root/src/firebase'
@@ -14,15 +13,14 @@ const updateAppHeight = () => {
 
 export const useRoot = () => {
   const { user } = useUser()
-  const store = useStore()
+  const { store } = useVuex()
   const { public: { firebaseDisabled } } = useRuntimeConfig()
 
   useAppearance()
+  useSettings()
   useToasts()
 
   onMounted(() => {
-    logEvent(appEventTypes.appMounted)
-
     if (localStorage.getItem('octo/welcome/v1') === null) {
       store.dispatch('SET_SHOW_WELCOME', true)
     }

composables/useSettings.ts

@@ -0,0 +1,10 @@
+export const buildSettings = () => {
+  const { store } = useVuex()
+  const legacySettings = computed(() => store.state.settings)
+
+  return {
+    legacySettings,
+  }
+}
+
+export const useSettings = () => injectOrProvide('settings', buildSettings)

composables/useSystemInstructions.ts

@@ -1,4 +1,4 @@
-import { type SystemInstruction } from '#helpers/database'
+import { type SystemInstruction } from '/src/db'
 
 export type { SystemInstruction }
 

composables/useWorkspaces.ts

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

helpers/app.ts

@@ -12,7 +12,6 @@ const appReadyWatcher = (appEvent: AppEvent) => {
   if (!isLogged(appEventTypes.appReady)) {
     const readyEventTypes: AppEventType[] = [
       appEventTypes.appMounted,
-      appEventTypes.appSettingsLoaded,
     ]
 
     if (readyEventTypes.includes(appEvent.type)) {
@@ -30,7 +29,6 @@ const appReadyWatcher = (appEvent: AppEvent) => {
 export const appEventTypes = {
   appMounted: 'app_mounted',
   appReady: 'app_ready',
-  appSettingsLoaded: 'app_settings_loaded',
   networkDocLoaded: 'network_doc_loaded',
   networkDocsSynced: 'network_docs_synced',
   userSignedIn: 'user_signed_in',