refactor(app): general improvements

packages/better-write-app/src/components/page/dashboard/DashboardData.vue

@@ -12,16 +12,16 @@
         AUTH?.account?.user?.user_metadata?.avatar_url ||
         AUTH?.account.user?.user_metadata.name
       "
-      class="flex items-center flex-1 px-5"
+      class="flex gap-5 flex-wrap items-center flex-1 px-5"
     >
       <img
-        class="rounded-full w-60"
+        class="rounded-full w-20 md:w-60"
         alt="Avatar"
         :src="AUTH?.account?.user?.user_metadata?.avatar_url"
       />
       <div
         v-if="AUTH?.account.user?.user_metadata.name"
-        class="flex p-10 flex-col items-center justify-center"
+        class="flex flex-col items-center justify-center"
       >
         <p class="font-poppins font-bold text-lg lg:text-xl">
           {{ AUTH?.account.user?.user_metadata.name }}

packages/better-write-app/src/components/page/dashboard/DashboardProjects.vue

@@ -57,17 +57,12 @@
 </template>
 
 <script setup lang="ts">
-  import { useProjectStore } from '@/store/project'
   import { useSupabase } from '@/use/storage/supabase'
-  import { useUtils } from '@/use/utils'
   import { ProjectObject } from 'better-write-types'
   import { onMounted, ref } from 'vue'
   import { useI18n } from 'vue-i18n'
 
-  const PROJECT = useProjectStore()
-
   const supabase = useSupabase()
-  const utils = useUtils()
   const { t } = useI18n()
 
   const projects = ref<ProjectObject[]>([])

packages/better-write-app/src/components/page/editor/generator/pdf/configuration/block/PDFConfigurationHeadingOne.vue

@@ -34,7 +34,7 @@
       <InputSelect
         v-model="pdf.headingOne.alignment"
         class="flex-1"
-        :arr="useDefines().pdf().alignment()"
+        :arr="defines.pdf().alignment()"
       />
     </GeneratorItem>
     <GeneratorItem :title="t('editor.pdf.custom.generics.characterSpacing')">

packages/better-write-app/src/components/page/editor/generator/pdf/configuration/block/PDFConfigurationHeadingThree.vue

@@ -34,7 +34,7 @@
       <InputSelect
         v-model="pdf.headingThree.alignment"
         class="flex-1"
-        :arr="useDefines().pdf().alignment()"
+        :arr="defines.pdf().alignment()"
       />
     </GeneratorItem>
     <GeneratorItem :title="t('editor.pdf.custom.generics.characterSpacing')">

packages/better-write-app/src/components/page/editor/generator/pdf/configuration/block/PDFConfigurationHeadingTwo.vue

@@ -34,7 +34,7 @@
       <InputSelect
         v-model="pdf.headingTwo.alignment"
         class="flex-1"
-        :arr="useDefines().pdf().alignment()"
+        :arr="defines.pdf().alignment()"
       />
     </GeneratorItem>
     <GeneratorItem :title="t('editor.pdf.custom.generics.characterSpacing')">

packages/better-write-app/src/components/page/editor/generator/pdf/configuration/block/PDFConfigurationLineBreak.vue

@@ -30,17 +30,14 @@
 
 <script setup lang="ts">
   import { usePDFStore } from '@/store/pdf'
-  import { useDefines } from '@/use/defines'
   import { computed } from 'vue'
   import { useI18n } from 'vue-i18n'
 
   const { t } = useI18n()
-  const defines = useDefines()
 
   const PDF = usePDFStore()
 
   const pdf = computed(() => PDF.styles)
-  const fontFamily = computed(() => PDF.fonts)
 
   const onMainImageLoad = (e: any) => {
     PDF.styles.lineBreak.image.data = e

packages/better-write-app/src/components/page/editor/generator/pdf/configuration/content/PDFConfigurationEncryption.vue

@@ -81,15 +81,10 @@
 <script setup lang="ts">
   import { usePDFStore } from '@/store/pdf'
   import { useProjectStore } from '@/store/project'
-  import { useDefines } from '@/use/defines'
-  import { computed } from 'vue'
   import { useI18n } from 'vue-i18n'
 
   const { t } = useI18n()
-  const defines = useDefines()
 
   const PDF = usePDFStore()
   const PROJECT = useProjectStore()
-
-  const pdf = computed(() => PDF.styles)
 </script>

packages/better-write-app/src/components/page/editor/generator/pdf/generate/PDFGenerate.vue

@@ -4,12 +4,12 @@
       ref="main"
       :style="style"
       :class="[!mobile ? 'fixed' : '']"
-      class="flex z-20 flex-col p-10 bg-rgba-blur bg-theme-background-1 wb-text overflow-x-auto rounded shadow-2xl wb-scroll"
+      class="flex w-full sm:w-auto sm:h-auto h-screen z-100 flex-col p-10 bg-rgba-blur bg-theme-background-1 wb-text overflow-x-auto rounded shadow-2xl wb-scroll"
     >
       <div class="flex justify-between w-full">
         <p class="text-2xl font-bold">PDF</p>
         <div @click="onClose">
-          <IconClose class="wb-icon w-6 h-6" />
+          <IconClose class="wb-icon w-7 h-7" />
         </div>
       </div>
       <div id="pdf-preview-div" ref="preview"></div>

packages/better-write-app/src/components/page/editor/header/items/EditorBaseHeaderLogin.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="cursor-pointer" @click.prevent.stop="onDashboard">
+  <div class="cursor-pointer" @click.prevent.stop="supabase.toDashboard()">
     <div
       :class="[mobile ? 'w-40' : 'w-auto']"
       class="flex items-center px-3 font-poppins py-2 sm:py-1 mr-2 bg-black-opacity border-theme-border-1 wb-text rounded-full"
@@ -61,19 +61,13 @@
   import { UseImage } from '@vueuse/components'
   import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
   import { computed } from 'vue'
-  import { useRouter } from 'vue-router'
 
   const AUTH = useAuthStore()
   const user = computed(() => AUTH.account.user)
 
   const env = useEnv()
-  const router = useRouter()
   const supabase = useSupabase()
 
   const breakpoints = useBreakpoints(breakpointsTailwind)
   const mobile = breakpoints.greater('sm')
-
-  const onDashboard = () => {
-    router.push('/dashboard')
-  }
 </script>

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

@@ -90,7 +90,6 @@
   import { useSupabase } from '@/use/storage/supabase'
   import { useAuthStore } from '@/store/auth'
   import { useRouter } from 'vue-router'
-  import { useStorage } from '@/use/storage/storage'
 
   const ABSOLUTE = useAbsoluteStore()
   const PROJECT = useProjectStore()
@@ -101,7 +100,6 @@
   const env = useEnv()
   const local = useLocalStorage()
   const { t } = useI18n()
-  const storage = useStorage()
   const router = useRouter()
 
   const onSaveProject = () => {

packages/better-write-app/src/components/page/editor/project/corrector/EditorProjectCorrector.vue

@@ -3,7 +3,8 @@
     <div
       ref="corrector"
       :style="style"
-      class="fixed bg-rgba-blur !font-raleway flex flex-col w-3/4 md:w-1/2 h-3/4 bg-theme-background-1 wb-text rounded shadow-2xl p-5 overflow-y-auto wb-scroll"
+      :class="[!mobile ? 'fixed' : '']"
+      class="bg-rgba-blur !font-raleway flex flex-col w-full md:w-1/2 h-screen md:h-3/4 bg-theme-background-1 wb-text rounded shadow-2xl p-5 overflow-y-auto wb-scroll"
     >
       <EditorAbsoluteHeader
         class="pl-5"
@@ -95,7 +96,12 @@
 <script setup lang="ts">
   import { useAbsoluteStore } from '@/store/absolute'
   import { useAddonsStore } from '@/store/addons'
-  import { onClickOutside, useDraggable } from '@vueuse/core'
+  import {
+    onClickOutside,
+    useDraggable,
+    breakpointsTailwind,
+    useBreakpoints,
+  } from '@vueuse/core'
   import { ref } from 'vue'
   import { useI18n } from 'vue-i18n'
   import { AddonsCorrectorOption } from 'better-write-types'
@@ -106,6 +112,8 @@
 
   const convertor = useCorrector()
   const { t } = useI18n()
+  const breakpoints = useBreakpoints(breakpointsTailwind)
+  const mobile = breakpoints.isSmaller('lg')
 
   const corrector = ref<HTMLElement | null>(null)
   const set = ref<AddonsCorrectorOption>(ADDONS.corrector.options[0])

packages/better-write-app/src/components/page/editor/tools/EditorToolsFinder.vue

@@ -42,7 +42,7 @@
   import { ref, onMounted } from 'vue'
   import { useI18n } from 'vue-i18n'
   import { useAbsoluteStore } from '@/store/absolute'
-  import { onClickOutside, useDraggable } from '@vueuse/core'
+  import { useDraggable } from '@vueuse/core'
   import { useExternalsStore } from '@/store/externals'
   import { useFinder } from '@/use/tools/finder'
 

packages/better-write-app/src/use/annotations.ts

@@ -4,12 +4,16 @@ import {
   ProjectStateAnnotationFolder,
 } from 'better-write-types'
 import { useI18n } from 'vue-i18n'
+import { useGraph } from '@/use/graph'
 
 export const useAnnotations = () => {
   const plugin = usePlugin()
   const { t } = useI18n()
+  const graph = useGraph()
 
   const onStart = (file: ProjectStateAnnotationFile) => {
+    graph.utils().mobile()
+
     plugin.emit('plugin-annotations-start', file)
   }
 

packages/better-write-app/src/use/storage/supabase.ts

@@ -1,6 +1,7 @@
 import { useAbsoluteStore } from '@/store/absolute'
 import { useAuthStore } from '@/store/auth'
 import { createClient } from '@supabase/supabase-js'
+import { useOnline } from '@vueuse/core'
 import {
   ProjectObject,
   Maybe,
@@ -14,7 +15,6 @@ import { useEnv } from '../env'
 import { useFormat } from '../format'
 import { useProject } from '../project'
 import { useUtils } from '../utils'
-import { useLocalStorage } from './local'
 import { useStorage } from './storage'
 
 const supabaseUrl = import.meta.env.VITE_SUPABASE_URL
@@ -26,16 +26,26 @@ export const useSupabase = () => {
   const AUTH = useAuthStore()
   const ABSOLUTE = useAbsoluteStore()
 
+  const online = useOnline()
   const toast = useToast()
   const { t } = useI18n()
   const env = useEnv()
   const storage = useStorage()
   const project = useProject()
-  const plugin = useLocalStorage()
   const router = useRouter()
   const format = useFormat()
   const utils = useUtils()
 
+  const toDashboard = () => {
+    if (!online.value) {
+      toast.error(t('toast.generics.onlyOnline'))
+
+      return
+    }
+
+    router.push('/dashboard')
+  }
+
   const loginWithEmailAndPassword = (
     { email, password }: { email: string; password: string },
     notification: boolean = true
@@ -288,6 +298,7 @@ export const useSupabase = () => {
   }
 
   return {
+    toDashboard,
     loginWithEmailAndPassword,
     login,
     out,

packages/better-write-languages/src/en-US/toast.ts

@@ -13,10 +13,10 @@ export default {
     successChanged: 'Changed Successfully!',
     successRestarted: 'Successfully Restarted!',
     successRemoved: 'Successfully Removed!',
+    onlyOnline: 'You are without internet access to access this feature!',
   },
   pdf: {
-    error:
-      'Could not generate the pdf. As of now, Better Write does not support PDF generation without internet access.',
+    error: 'Could not generate the pdf.',
     configuration: {
       save: 'Configurações salvas com sucesso!',
     },

packages/better-write-languages/src/pt-BR/toast.ts

@@ -13,10 +13,11 @@ export default {
     successChanged: 'Alterado com Sucesso!',
     successRestarted: 'Reiniciado com Sucesso!',
     successRemoved: 'Removido com Sucesso!',
+    onlyOnline:
+      'Voce está sem acesso à internet para conseguir acessar este recurso!',
   },
   pdf: {
-    error:
-      'Não foi possível gerar o pdf. Até o momento, Better Write não suporta a geração de PDF sem acesso á internet.',
+    error: 'Não foi possível gerar o pdf.',
     configuration: {
       save: 'Configurações salvas com sucesso!',
     },