style(editor): reactivity inserts and headers

packages/better-write-app/src/components/editor/entity/default/EditorEntityDefaultInput.vue

@@ -31,7 +31,7 @@
       "
       :style="{
         minHeight: '24px',
-        whiteSpace: 'break-spaces',
+        whiteSpace: 'pre-line',
         paddingBottom: last ? '5rem' : '',
         textIndent: props.entity.type === 'paragraph' ? '2rem' : 0,
       }"

packages/better-write-app/src/components/editor/generate/EditorGenerateContainer.vue

@@ -66,7 +66,7 @@
   const props = defineProps<{
     title: string
     close: () => void
-    reverse: () => void
+    reverse?: () => void
   }>()
 
   const container = ref(null)

packages/better-write-app/src/components/editor/header/EditorHeaderBar.vue

@@ -10,7 +10,7 @@
         duration: 150,
       },
     }"
-    class="absolute shadow-xl rounded top-9 flex flex-col w-48 md:w-52 lg:w-72 z-40 bg-theme-editor-header-list-background"
+    class="absolute shadow-xl rounded top-11 md:top-9 flex flex-col w-48 md:w-52 lg:w-72 z-40 bg-theme-editor-header-list-background"
   >
     <slot />
   </div>

packages/better-write-app/src/components/editor/main/EditorBaseHeader.vue

@@ -4,18 +4,18 @@
     :initial="{ opacity: 0 }"
     :enter="{ opacity: 1 }"
     :delay="100"
-    class="flex h-12 justify-between items-center w-full bg-theme-editor-background hover:bg-theme-editor-background-hover active:bg-theme-editor-background-active z-30 shadow-lg"
+    class="flex h-12 justify-between items-center w-full z-30 shadow-lg bg-theme-editor-background hover:bg-theme-editor-background-hover active:bg-theme-editor-background-active"
   >
-    <div class="flex items-center justify-between">
+    <div class="flex gap-1 sm:gap-2 lg:gap-5 items-center justify-start">
       <Logo :back="false" :width="19" />
-      <EditorBaseHeaderAside />
-      <EditorBaseHeaderProject />
-      <EditorBaseHeaderCreate />
-      <EditorBaseHeaderChapters />
-      <EditorBaseHeaderExternals />
+      <div class="flex items-center justify-between">
+        <EditorBaseHeaderProject />
+        <EditorBaseHeaderCreate />
+        <EditorBaseHeaderChapters />
+        <EditorBaseHeaderExternals />
+      </div>
     </div>
     <div class="flex items-center gap-2">
-      <EditorBaseHeaderOnline />
       <EditorBaseHeaderLogin />
     </div>
   </header>

packages/better-write-app/src/components/editor/project/creative/drafts/EditorPagesDrafts.vue

@@ -15,23 +15,21 @@
       class="flex flex-col md:flex-row h-auto md:h-editor w-full mt-10 bg-theme-editor-creative-drafts-container-background shadow-xl"
     >
       <div
-        class="flex border-b md:border-b-0 md:border-solid md:border-r border-theme-editor-creative-drafts-container-borders bg-theme-editor-creative-drafts-container-list-background hover:bg-theme-editor-creative-drafts-container-list-background-hover active:bg-theme-editor-creative-drafts-container-list-background-active overflow-y-auto flex-col w-full md:w-72"
+        class="flex flex-col overflow-y-auto bg-theme-editor-creative-drafts-container-list-background hover:bg-theme-editor-creative-drafts-container-list-background-hover active:bg-theme-editor-creative-drafts-container-list-background-active w-full md:w-72"
       >
-        <div
-          class="flex border-b md:border-solid border-theme-editor-creative-drafts-container-borders items-center justify-center p-5 font-poppins h-20 font-semibold text-lg"
+        <h2
+          class="flex items-center justify-center p-5 font-poppins h-20 font-semibold text-lg"
         >
           {{ t('editor.drafts.chapters') }}
-        </div>
-        <div
+        </h2>
+        <p
           v-for="(element, index) in PROJECT.pages"
           :key="index"
-          class="text-center shadow cursor-pointer h-24 hover:bg-black-opacity text-lg w-full p-2 font-bold"
+          class="flex items-center justify-center py-10 w-full truncate shadow cursor-pointer hover:bg-black-opacity text-lg w-full font-bold"
           @click="onClickAside(element)"
         >
-          <p class="relative top-6 truncate">
-            {{ element.entities[0]?.raw || element.title }}
-          </p>
-        </div>
+          {{ element.entities[0]?.raw || element.title }}
+        </p>
       </div>
       <div
         class="flex border-b md:border-b-0 md:border-solid border-r-0 md:border-r border-theme-editor-creative-drafts-container-borders flex-col flex-1 w-auto p-5 overflow-y-auto"

packages/better-write-app/src/components/editor/project/creative/drafts/EditorPagesDraftsItem.vue

@@ -13,7 +13,7 @@
       @focusout="edit = false"
       @click="emit('info')"
     >
-      {{ props.page.title }}
+      {{ props.page.entities[0]?.raw }}
     </div>
     <div class="flex items-center">
       <HeroIcon

packages/better-write-app/src/components/editor/utils/Logo.vue

@@ -4,8 +4,7 @@
     class="flex bg-theme-aside-logo-background justify-around md:justify-between items-center w-full p-2"
   >
     <img
-      class="object-contain"
-      :class="[!s.auth.user() ? 'cursor-pointer' : '']"
+      class="object-contain cursor-pointer"
       :width="props.width"
       alt="Better Write Logo"
       :src="path"
@@ -53,8 +52,6 @@
   })
 
   const onClick = () => {
-    if (s.auth.user()) return
-
     local.onSaveProject().then(() => {
       props.back ? router.back() : router.push('/')
     })

packages/better-write-app/src/pages/Editor.vue

@@ -3,9 +3,9 @@
     class="flex flex-col w-full bg-theme-editor-full-background hover:bg-theme-editor-full-background-hover active:bg-theme-editor-full-background-active"
   >
     <EditorBaseHeader />
-    <section class="flex flex-col md:flex-row">
+    <section class="flex flex-col md:flex-row w-full">
       <EditorAside />
-      <main class="flex justify-center flex-1">
+      <main class="flex justify-center w-full">
         <EditorBase />
       </main>
     </section>

packages/better-write-app/windi.config.ts

@@ -24,7 +24,7 @@ export default defineConfig({
     'wb-configuration-reserve': 'flex flex-row-reverse md:flex-row gap-5 font-bold text-base text-theme-text-2 justify-between items-center w-full px-2 py-2',
     'wb-configuration-input-text': 'bg-theme-editor-material-background px-2 shadow-lg w-full md:w-60',
     'wb-indent': 'indent-8',
-    'wb-header-button': 'wb-text mx-0.5 md:mx-3'
+    'wb-header-button': 'wb-text mx-0.5 md:mx-2'
   },
   theme: {
     fontFamily: {

packages/better-write-plugin-theme/css/themes/betterwrite-harmonic.css

@@ -4,7 +4,7 @@
   --theme-black: #000000;
   --theme-white: #ffffff;
   --theme-background-1: #b6ceeb;
-  --theme-background-2: rgba(222, 237, 255, 0.3);
+  --theme-background-2: rgba(222, 237, 255, 0.5);
   --theme-background-3: #deedff;
   --theme-background-4: #b6ceeb;
   --theme-background-opacity-1: rgba(0, 0, 0, 0.15);
@@ -14,9 +14,9 @@
   --theme-border-absolute-1: #ffffff;
   --theme-border-absolute-2: #111827;
   --theme-border-commands-1: #000000;
-  --theme-aside-background: rgba(222, 237, 255, 0.3);
-  --theme-aside-background-hover: rgba(222, 237, 255, 0.5);
-  --theme-aside-background-active: rgba(222, 237, 255, 0.3);
+  --theme-aside-background: #b6ceeb;
+  --theme-aside-background-hover: #b6ceeb;
+  --theme-aside-background-active: #b6ceeb;
   --theme-aside-logo-background: none;
   --theme-aside-logo-text: #6a819e;
   --theme-aside-graph-lines: #6a819e;