feat: dropbox storage

packages/app/.env.local.example

@@ -15,6 +15,9 @@ VITE_GOOGLE_FONTS_MAX_FONTS=
 VITE_SUPABASE_URL=
 VITE_SUPABASE_ANON_KEY=
 
+// Dropbox SDK
+VITE_DROPBOX_APP_KEY=
+
 // Sentry
 VITE_SENTRY_DSN=
 

packages/app/package.json

@@ -77,6 +77,7 @@
     "destr": "1.2.2",
     "docx": "7.5.0",
     "drauu": "0.3.2",
+    "dropbox": "10.34.0",
     "file-saver": "2.0.5",
     "floating-vue": "2.0.0-beta.20",
     "hast": "1.0.0",
@@ -155,6 +156,7 @@
         "@vueuse/components",
         "@milkdown/utils",
         "docx",
+        "dropbox",
         "es5-ext/global",
         "file-saver",
         "jiti",

packages/app/src/components/icons/IconDropbox.vue

@@ -0,0 +1,3 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="1.18em" height="1em" viewBox="0 0 256 218"><path fill="#0061FF" d="M63.995 0L0 40.771l63.995 40.772L128 40.771zM192 0l-64 40.775l64 40.775l64.001-40.775zM0 122.321l63.995 40.772L128 122.321L63.995 81.55zM192 81.55l-64 40.775l64 40.774l64-40.774zM64 176.771l64.005 40.772L192 176.771L128.005 136z"></path></svg>
+</template>

packages/app/src/components/page/editor/header/items/EditorBaseHeaderProject.vue

@@ -35,6 +35,15 @@
         :text="t('editor.bar.supabase.save')"
         @action="onSaveProjectSupabase"
       />
+      <EditorHeaderItem
+        v-if="PROJECT.name !== env.projectEmpty() && AUTH.account.dropboxAccessToken"
+        :text="t('editor.bar.dropbox.save')"
+        @action="dropbox.save"
+      >
+      <template #icon>
+        <IconDropbox class="w-6 h-6 mr-2" />
+      </template>
+      </EditorHeaderItem>
       <EditorHeaderItemDiv v-if="PROJECT.name !== env.projectEmpty()" />
       <EditorHeaderItem
         v-if="
@@ -77,6 +86,7 @@
   import { useLocalStorage } from '@/use/storage/local'
   import { useSupabase } from '@/use/storage/supabase'
   import { useAuthStore } from '@/store/auth'
+  import { useDropbox } from '@/use/storage/dropbox'
 
   const ABSOLUTE = useAbsoluteStore()
   const PROJECT = useProjectStore()
@@ -86,6 +96,7 @@
   const project = useProject()
   const env = useEnv()
   const local = useLocalStorage()
+  const dropbox = useDropbox()
   const { t } = useI18n()
 
   const onSaveProject = () => {

packages/app/src/components/page/editor/main/render/history/EditorBaseRenderHistory.vue

@@ -1,5 +1,5 @@
 <template>
-  <section v-if="HISTORY.bar.length !== 0" class="flex z-50 wb-text items-center bg-theme-background-opacity-1 justify-between w-full">
+  <section v-if="HISTORY.bar.length !== 0 && PROJECT.type !== 'blank'" class="flex z-50 wb-text items-center bg-theme-background-opacity-1 justify-between w-full">
     <button v-for="(item, index) in HISTORY.bar" :key="index" :class="[HISTORY.barActive === item.id ? 'bg-theme-background-2' : 'hover:bg-theme-background-opacity-1']" class="flex-1 font-bold flex justify-around items-center font-raleway min-w-12 h-10 md:(h-9)" @click.prevent.stop="history.onLoad(item)">
       <div class="flex gap-2 truncate pl-2">
         <CustomIcon v-if="item.customIcon" :icon="item.customIcon" />
@@ -17,9 +17,11 @@
 
 <script setup lang="ts">
 import { useHistoryStore } from '@/store/history';
+import { useProjectStore } from '@/store/project';
 import { useHistory } from '@/use/history'
 
 const HISTORY = useHistoryStore()
+const PROJECT = useProjectStore()
 
 const history = useHistory()
 </script>

packages/app/src/components/page/editor/vault/EditorVaultDropbox.vue

@@ -0,0 +1,23 @@
+<template>
+  <div v-if="!AUTH.account.dropboxAccessToken" class="flex px-2 py-1 mb-5 cursor-pointer bg-theme-background-2 justify-between items-center w-full wb-text" @click.prevent.stop="dropbox.connect">
+    <button>
+      <IconDropbox class="w-7 h-7" />
+    </button>
+    <p class="font-poppins font-bold">Conectar</p>
+  </div>
+  <div v-else class="flex px-2 py-1 mb-5 cursor-pointer bg-theme-background-2 justify-between items-center w-full wb-text" @click.prevent.stop="dropbox.load">
+    <button>
+      <IconDropbox class="w-7 h-7" />
+    </button>
+    <p class="font-poppins font-bold">Carregar</p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useAuthStore } from '@/store/auth';
+import { useDropbox } from '@/use/storage/dropbox';
+
+const AUTH = useAuthStore()
+
+const dropbox = useDropbox()
+</script>

packages/app/src/components/page/editor/vault/EditorVaultList.vue

@@ -2,6 +2,40 @@
   <div
     class="flex flex-col justify-start items-stretch gap-2 bg-black-opacity p-5 max-h-100 wb-scroll overflow-y-auto"
   >
+    <EditorVaultDropbox v-if="VAULT.dropboxFiles.length === 0" />
+    <div
+      v-for="(file, index) in VAULT.dropboxFiles"
+      :key="index"
+      class="flex flex-col w-full flex-wrap justify-start md:justify-between items-center bg-theme-editor-dashboard-background-main wb-text rounded my-1 shadow-binset transition-shadow hover:shadow-xl"
+    >
+      <div class="flex items-center justify-start p-1 bg-black-opacity w-full">
+        <div class="flex gap-2 items-center">
+          <div>
+            <IconDropbox class="w-7 h-7" />
+          </div>
+          <h2 class="text-sm font-bold">
+            {{ t('editor.bar.dropbox.title') }}
+          </h2>
+        </div>
+      </div>
+      <div class="flex flex-col justify-between w-full p-2">
+        <h2 class="text-sm font-bold text-center">{{ file.name }}</h2>
+        <div class="flex justify-end flex-1 mt-5 items-center w-full">
+          <div>
+            <IconDelete
+              class="wb-icon w-8 h-8 lg:(w-6 h-6)"
+              @click.prevent.stop="dropbox.deleteProject(file)"
+            />
+          </div>
+          <div>
+            <IconEnter
+              class="wb-icon w-8 h-8 lg:(w-6 h-6)"
+              @click.prevent.stop="dropbox.loadProject(file)"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
     <Spinner v-if="!isFetched" :width="80" :height="80" />
     <div
       v-for="({ document }, index) in projects"
@@ -67,13 +101,15 @@
 
 <script setup lang="ts">
   import { useVaultStore } from '@/store/vault'
+import { useDropbox } from '@/use/storage/dropbox'
   import { useSupabase } from '@/use/storage/supabase'
   import { ProjectDocument, ID } from 'better-write-types'
   import { onMounted, ref } from 'vue'
   import { useI18n } from 'vue-i18n'
 
   const VAULT = useVaultStore()
 
+  const dropbox = useDropbox()
   const supabase = useSupabase()
   const { t } = useI18n()
 

packages/app/src/store/auth.ts

@@ -8,6 +8,7 @@ export const useAuthStore = defineStore('auth', {
         user: null,
         project_id_activity: null,
         multiplayer: { client: null, connect: null },
+        dropboxAccessToken: null,
       },
     }
   },

packages/app/src/store/project.ts

@@ -27,6 +27,7 @@ export const useProjectStore = defineStore('project', {
       base: 'chapter',
       type: 'creative',
       totalPagesCreated: 0,
+      externalProvider: undefined,
       main: {},
       summary: {},
       chapters: [],
@@ -88,6 +89,7 @@ export const useProjectStore = defineStore('project', {
         payload.type === 'only-annotations' ? 'annotations' : 'chapter'
       this.subject = payload.subject
       this.pageLoaded = payload.pageLoaded
+      this.externalProvider = payload.externalProvider
       this.scrollLoaded = payload.scrollLoaded
       this.offsetLoaded = payload.offsetLoaded
       this.totalPagesCreated = payload.totalPagesCreated

packages/app/src/store/vault.ts

@@ -1,9 +1,14 @@
-import { ProjectDocument } from 'better-write-types'
+import { ProjectDocument, ProjectObject } from 'better-write-types'
+import { files } from 'dropbox'
 import { defineStore } from 'pinia'
 
 export const useVaultStore = defineStore('vault', {
-  state: (): { documents?: ProjectDocument[] } => {
+  state: (): {
+    dropboxFiles: files.FileMetadataReference[]
+    documents?: ProjectDocument[]
+  } => {
     return {
+      dropboxFiles: [],
       documents: undefined,
     }
   },

packages/app/src/use/env.ts

@@ -17,6 +17,10 @@ export const useEnv = () => {
     return import.meta.env.VITE_PROJECT_EMPTY
   }
 
+  const dropboxKey = (): string => {
+    return import.meta.env.VITE_DROPBOX_APP_KEY
+  }
+
   const projectLocalStorage = () => {
     return import.meta.env.VITE_LOCAL_STORAGE
   }
@@ -87,6 +91,7 @@ export const useEnv = () => {
     production,
     getSentryDsn,
     getProdUrl,
+    dropboxKey,
     getCorrectLocalUrl,
     storageLimitSaver,
     emptyLine,

packages/app/src/use/initializer/db.ts

@@ -6,7 +6,7 @@ export const useDBInitializer = () => {
 
   const init = async () => {
     const { data } = await s.auth.getSession()
-
+    
     AUTH.account.user = data.session?.user ?? null
 
     s.auth.onAuthStateChange((_, session) => {

packages/app/src/use/initializer/plugin.ts

@@ -41,6 +41,7 @@ import * as VUEUSE_CORE from '@vueuse/core'
 import * as VUEUSE_HEAD from '@vueuse/head'
 import * as VUEUSE_SOUND from '@vueuse/sound'
 import { useGlobalStore } from '@/store/global'
+import { useDropbox } from '../storage/dropbox'
 
 export const usePluginInitializer = () => {
   const core = useCore()
@@ -90,6 +91,7 @@ export const usePluginInitializer = () => {
         characters: useCharacters(),
         supabase: s,
         router: VUEROUTER.useRouter(),
+        dropbox: useDropbox(),
         vuerouter: VUEROUTER,
         vueuse: {
           core: VUEUSE_CORE,