From 75667dec2fcfb7aee49a02f2915fa59c1328a1e4 Mon Sep 17 00:00:00 2001
From: malyusgun <malyugind20@gmail.com>
Date: Wed, 28 Aug 2024 17:03:36 +0500
Subject: [PATCH] refactor code

---
 src/app/App.vue                               |  36 +++--
 src/app/assets/main.css                       |  20 +++
 src/app/interfaces/entities.ts                |  24 ++--
 src/app/interfaces/environment.ts             |  22 +--
 src/components/CreateEntityMenu.vue           |  38 +++---
 .../image}/ImagePositionMenu.vue              | 129 +++++++-----------
 .../image}/ImageSizeMenu.vue                  |  80 ++---------
 .../image}/ImageStateMenu.vue                 |   9 +-
 src/components/entities/share/EntityTitle.vue |  33 +++++
 .../share}/TextFontMenu.vue                   |   2 +-
 .../text}/TextPositionMenu.vue                | 129 ++++++++----------
 .../text}/TextStateMenu.vue                   |   0
 src/modules/BaseSidebarMenu.vue               |  25 ++--
 src/modules/CropImageModal.vue                |  23 ++--
 src/modules/EntitiesList.vue                  |  26 ++++
 src/modules/PageBackgroundMenu.vue            |  32 +++++
 src/modules/entities/TextItem.vue             | 108 ++-------------
 src/modules/entities/menu/ImageMenu.vue       | 104 ++++++++++++++
 src/modules/entities/menu/TextMenu.vue        |  63 +++++++++
 src/output.css                                |  32 ++++-
 src/shared/BaseLoader.vue                     |  26 ++++
 21 files changed, 557 insertions(+), 404 deletions(-)
 rename src/components/{editEntityMenu => entities/image}/ImagePositionMenu.vue (60%)
 rename src/components/{editEntityMenu => entities/image}/ImageSizeMenu.vue (59%)
 rename src/components/{editEntityMenu => entities/image}/ImageStateMenu.vue (92%)
 create mode 100644 src/components/entities/share/EntityTitle.vue
 rename src/components/{editEntityMenu => entities/share}/TextFontMenu.vue (100%)
 rename src/components/{editEntityMenu => entities/text}/TextPositionMenu.vue (51%)
 rename src/components/{editEntityMenu => entities/text}/TextStateMenu.vue (100%)
 create mode 100644 src/modules/EntitiesList.vue
 create mode 100644 src/modules/PageBackgroundMenu.vue
 create mode 100644 src/modules/entities/menu/ImageMenu.vue
 create mode 100644 src/modules/entities/menu/TextMenu.vue
 create mode 100644 src/shared/BaseLoader.vue

diff --git a/src/app/App.vue b/src/app/App.vue
index 4198cd4..c5176ee 100644
--- a/src/app/App.vue
+++ b/src/app/App.vue
@@ -5,21 +5,27 @@ const visible = ref<boolean>(false);
 </script>
 
 <template>
-  <router-view />
-  <div class="fixed top-0 left-0 z-50">
-    <Button
-      @click.prevent="visible = !visible"
-      label="Menu"
-      iconPos="top"
-      icon="pi pi-bars"
-      severity="secondary"
-    />
-  </div>
-  <Drawer v-model:visible="visible">
-    <template #container="{ closeCallback }">
-      <BaseSidebarMenu @closeCallback="closeCallback" class="relative z-50" />
-    </template>
-  </Drawer>
+  <Suspense>
+    <div>
+      <router-view />
+      <div class="fixed top-0 left-0 z-50">
+        <Button
+          label="Menu"
+          iconPos="top"
+          icon="pi pi-bars"
+          severity="contrast"
+          size="small"
+          @click.prevent="visible = !visible"
+        />
+      </div>
+      <Drawer v-model:visible="visible">
+        <template #container="{ closeCallback }">
+          <BaseSidebarMenu class="relative z-50" @closeCallback="closeCallback" />
+        </template>
+      </Drawer>
+    </div>
+    <template #fallback><BaseLoader /></template>
+  </Suspense>
 </template>
 
 <style scoped></style>
diff --git a/src/app/assets/main.css b/src/app/assets/main.css
index ee3f498..47d862b 100644
--- a/src/app/assets/main.css
+++ b/src/app/assets/main.css
@@ -199,3 +199,23 @@ label {
 legend {
   display: block;
 }
+::-webkit-scrollbar {
+  width: 10px;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+  background: #484848;
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+  border-radius: 5px;
+  background: #0055ff;
+  transition: all 0.5s ease;
+}
+
+/* Handle on hover */
+::-webkit-scrollbar-thumb:hover {
+  background: #0033ff;
+}
diff --git a/src/app/interfaces/entities.ts b/src/app/interfaces/entities.ts
index 956d3fb..0767db1 100644
--- a/src/app/interfaces/entities.ts
+++ b/src/app/interfaces/entities.ts
@@ -3,18 +3,18 @@ import type { IEntity } from '@/app/interfaces/environment';
 export interface ITable extends IEntity {
   entity_type: 'table';
   entity_uuid: string;
-  title?: string;
-  text?: string;
+  title?: string | null;
+  text?: string | null;
   table_columns: ITableColumn[];
   table_data: {
-    [key: string]: any;
+    [key: string]: never;
   }[];
 }
-interface ITableColumn {
+export interface ITableColumn {
   column_uuid: string;
   name: string;
   type: ITableColumnTypes;
-  data: any;
+  data: never;
 }
 type ITableColumnTypes =
   | 'text'
@@ -29,7 +29,7 @@ type ITableColumnTypes =
 export interface IText extends IEntity {
   entity_type: 'text';
   entity_uuid: string;
-  title?: string;
+  title?: string | null;
   text: string;
   font_size?: '16' | '20' | '24' | '40' | '64';
   paragraph_size?: 'full' | 'half';
@@ -40,12 +40,12 @@ export interface IText extends IEntity {
 export interface IImage extends IEntity {
   entity_type: 'image';
   entity_uuid: string;
-  title?: string;
-  text?: string;
-  font_size?: '16' | '20' | '24' | '40' | '64';
-  paragraph_size?: 'full' | 'half';
-  text_position?: 'left' | 'right';
-  image_url: string;
+  title?: string | null;
+  text?: string | null;
+  font_size?: '16' | '20' | '24' | '40' | '64' | null;
+  paragraph_size?: 'full' | 'half' | null;
+  text_position?: 'left' | 'right' | null;
+  imageUrl: string;
   image_width: number;
   image_height: number;
   image_scale: string;
diff --git a/src/app/interfaces/environment.ts b/src/app/interfaces/environment.ts
index e1159fe..c0a1f38 100644
--- a/src/app/interfaces/environment.ts
+++ b/src/app/interfaces/environment.ts
@@ -1,3 +1,5 @@
+import type { ITableColumn } from '@/app/interfaces/entities';
+
 export interface ISheet {
   sheet_uuid: string;
   title: string;
@@ -11,20 +13,22 @@ export interface IEntity {
   user_nick_name?: string;
   entity_order?: number;
   entity_type: string;
-  title?: string;
-  text?: string;
-  font_size?: string;
-  paragraph_size?: string;
-  text_position?: string;
-  image_blob?: string;
-  image_url?: string;
+  title?: string | null;
+  text?: string | null;
+  font_size?: string | null;
+  paragraph_size?: string | null;
+  text_position?: string | null;
+  image_buffer?: string;
+  imageUrl?: string;
   image_width?: number;
   image_height?: number;
   entity_position?: string;
   entity_title_position?: string;
   image_scale?: string;
-  table_columns?: string;
-  table_data?: string;
+  table_columns?: ITableColumn[];
+  table_data?: {
+    [key: string]: never;
+  }[];
 }
 
 export type TThemes =
diff --git a/src/components/CreateEntityMenu.vue b/src/components/CreateEntityMenu.vue
index bd8d27b..60176cd 100644
--- a/src/components/CreateEntityMenu.vue
+++ b/src/components/CreateEntityMenu.vue
@@ -1,40 +1,40 @@
 <script setup lang="ts">
 import { v4 as uuidv4 } from 'uuid';
-import { useFileDialog } from '@vueuse/core';
+import { useFileDialog, useWindowSize } from '@vueuse/core';
+import { useAuthorizationStore } from '@/app/stores/authorization';
+import { useFilesWebsocketStore } from '@/app/stores/filesWebsocket';
 
-const emit = defineEmits(['addEntity']);
+const emit = defineEmits(['createEntity']);
 
 const { open: uploadFile, onChange } = useFileDialog({
   accept: 'image/*',
   reset: true
 });
+const authorizationStore = useAuthorizationStore();
+const userNickName = computed(() => authorizationStore.userNickName);
 
 const addImage = async (files: FileList) => {
   let image = new Image();
   const imageUuid = uuidv4();
-  // const file = files[0];
-  // const reader = new FileReader();
-  // reader.readAsDataURL(file);
-  // const file = new FormData();
   if (!files[0]) return;
-  // const mediaSource = new MediaSource();
-  // const url =
   const url = URL.createObjectURL(files[0]);
   image.src = url;
-  // file.set('file', files[0]);
-  // reader.addEventListener('load', () => {
-  //   image.src = String(reader.result);
-  // });
   image.onload = async () => {
-    console.log('url: ', url);
+    const filesWebsocketStore = useFilesWebsocketStore();
+    filesWebsocketStore.saveImageUrl(url);
     const response = await fetch(url);
     const blob = await response.blob();
     const buffer = await blob.arrayBuffer();
-    console.log('blob: ', blob);
-    emit('addEntity', {
+    const { width: windowWidth } = useWindowSize();
+    const maxWidth = windowWidth.value - 128;
+    if (image.width > maxWidth) {
+      image.height = Math.floor(maxWidth / image.width) * image.height;
+      image.width = maxWidth;
+    }
+    emit('createEntity', {
       entity_type: 'image',
       entity_uuid: imageUuid,
-      image_blob: buffer,
+      image_buffer: buffer,
       entity_position: 'left',
       entity_title_position: 'center',
       image_width: image.width,
@@ -54,7 +54,7 @@ const speedDialItems = ref([
     label: 'Text',
     icon: 'pi pi-pencil',
     command: () => {
-      emit('addEntity', {
+      emit('createEntity', {
         entity_type: 'text',
         entity_uuid: uuidv4(),
         text: '',
@@ -73,7 +73,7 @@ const speedDialItems = ref([
     label: 'Table',
     icon: 'pi pi-table',
     command: () => {
-      emit('addEntity', {
+      emit('createEntity', {
         entity_type: 'table',
         entity_uuid: uuidv4(),
         table_columns: [
@@ -100,7 +100,7 @@ const speedDialItems = ref([
   <SpeedDial
     :model="speedDialItems"
     direction="right"
-    :buttonProps="{ severity: 'info', rounded: true }"
+    :button-props="{ severity: 'info', rounded: true }"
     style="position: absolute; left: 5%; top: 0"
   >
     <template #item="{ item, toggleCallback }">
diff --git a/src/components/editEntityMenu/ImagePositionMenu.vue b/src/components/entities/image/ImagePositionMenu.vue
similarity index 60%
rename from src/components/editEntityMenu/ImagePositionMenu.vue
rename to src/components/entities/image/ImagePositionMenu.vue
index 95dd045..2630506 100644
--- a/src/components/editEntityMenu/ImagePositionMenu.vue
+++ b/src/components/entities/image/ImagePositionMenu.vue
@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { changeOrderHomeEntity } from '@/app/helpers';
-import type { IImage } from '@/app/interfaces/entities';
 import { useDataStore } from '@/app/stores/data';
+import type { IImage } from '@/app/interfaces/entities';
 import type { IEntity } from '@/app/interfaces/environment';
+import { changeOrderHomeEntity } from '@/app/helpers';
 
 interface Props {
   entityData: IImage;
@@ -15,53 +15,66 @@ const emit = defineEmits([
   'editParagraphWidth'
 ]);
 
+const dataStore = useDataStore();
+const homeEntities = computed(() => dataStore.homeEntities);
 const position = computed(() => props.entityData.entity_position);
 const titlePosition = computed(() => props.entityData.entity_title_position);
+const entityIndex = homeEntities.value.findIndex(
+  (entity: IEntity) => entity.entity_uuid === props.entityData.entity_uuid
+);
 
 const speedDialMove = computed(() => {
   let state = [];
+  const left = {
+    label: 'Left',
+    icon: 'pi pi-arrow-left',
+    command: () => emit('editPosition', 'left')
+  };
+  const center = {
+    label: 'Center',
+    icon: 'pi pi-align-center',
+    command: () => emit('editPosition', 'center')
+  };
+  const right = {
+    label: 'Right',
+    icon: 'pi pi-arrow-right',
+    command: () => emit('editPosition', 'right')
+  };
+  const titleLeft = {
+    label: 'Title left',
+    icon: 'pi pi-align-left',
+    command: () => emit('editTitlePosition', 'left')
+  };
+  const titleCenter = {
+    label: 'Title center',
+    icon: 'pi pi-align-center',
+    command: () => emit('editTitlePosition', 'center')
+  };
+  const titleRight = {
+    label: 'Title right',
+    icon: 'pi pi-align-right',
+    command: () => emit('editTitlePosition', 'right')
+  };
+  switch (titlePosition.value) {
+    case 'left':
+      state.push(titleCenter, titleRight);
+      break;
+    case 'center':
+      state.push(titleLeft, titleRight);
+      break;
+    case 'right':
+      state.push(titleLeft, titleCenter);
+  }
   switch (position.value) {
     case 'left':
-      state.push({
-        label: 'Center',
-        icon: 'pi pi-align-center',
-        command: () => emit('editPosition', 'center')
-      });
-      state.push({
-        label: 'Right',
-        icon: 'pi pi-arrow-right',
-        command: () => emit('editPosition', 'right')
-      });
+      state.push(center, right);
       break;
     case 'center':
-      state.push({
-        label: 'Left',
-        icon: 'pi pi-arrow-left',
-        command: () => emit('editPosition', 'left')
-      });
-      state.push({
-        label: 'Right',
-        icon: 'pi pi-arrow-right',
-        command: () => emit('editPosition', 'right')
-      });
+      state.push(left, right);
       break;
     case 'right':
-      state.push({
-        label: 'Left',
-        icon: 'pi pi-arrow-left',
-        command: () => emit('editPosition', 'left')
-      });
-      state.push({
-        label: 'Center',
-        icon: 'pi pi-align-center',
-        command: () => emit('editPosition', 'center')
-      });
+      state.push(left, center);
   }
-  const dataStore = useDataStore();
-  const entities = dataStore.homeEntities;
-  const entityIndex = entities.findIndex(
-    (entity: IEntity) => entity.entity_uuid === props.entityData.entity_uuid
-  );
   if (entityIndex !== 0) {
     state.push({
       label: 'Up',
@@ -69,50 +82,13 @@ const speedDialMove = computed(() => {
       command: () => changeOrderHomeEntity(props.entityData.entity_uuid, 'up')
     });
   }
-  if (entityIndex !== entities.length - 1) {
+  if (entityIndex !== homeEntities.value.length - 1) {
     state.push({
       label: 'Down',
       icon: 'pi pi-arrow-down',
       command: () => changeOrderHomeEntity(props.entityData.entity_uuid, 'down')
     });
   }
-  switch (titlePosition.value) {
-    case 'left':
-      state.push({
-        label: 'Title center',
-        icon: 'pi pi-align-center',
-        command: () => emit('editTitlePosition', 'center')
-      });
-      state.push({
-        label: 'Title right',
-        icon: 'pi pi-align-right',
-        command: () => emit('editTitlePosition', 'right')
-      });
-      break;
-    case 'center':
-      state.push({
-        label: 'Title left',
-        icon: 'pi pi-align-left',
-        command: () => emit('editTitlePosition', 'left')
-      });
-      state.push({
-        label: 'Title right',
-        icon: 'pi pi-align-right',
-        command: () => emit('editTitlePosition', 'right')
-      });
-      break;
-    case 'right':
-      state.push({
-        label: 'Title left',
-        icon: 'pi pi-align-left',
-        command: () => emit('editTitlePosition', 'left')
-      });
-      state.push({
-        label: 'Title center',
-        icon: 'pi pi-align-center',
-        command: () => emit('editTitlePosition', 'center')
-      });
-  }
   if (props.entityData?.text || props.entityData?.text === '') {
     if (props.entityData?.text_position === 'right') {
       state.push({
@@ -163,7 +139,8 @@ const speedDialMove = computed(() => {
       <template #item="{ item, toggleCallback }">
         <div
           :class="[
-            'flex flex-col bg-black bg-opacity-80 items-center justify-between -translate-8 gap-2 p-2 border rounded border-surface-200 dark:border-surface-700 w-20 cursor-pointer',
+            'flex flex-col bg-black bg-opacity-80 items-center justify-between -translate-8 gap-2 p-2 border' +
+              ' rounded border-surface-200 dark:border-surface-700 w-20 cursor-pointer',
             {
               'text-red-400 font-semibold': item?.icon?.includes('trash')
             }
diff --git a/src/components/editEntityMenu/ImageSizeMenu.vue b/src/components/entities/image/ImageSizeMenu.vue
similarity index 59%
rename from src/components/editEntityMenu/ImageSizeMenu.vue
rename to src/components/entities/image/ImageSizeMenu.vue
index 400207f..ddff4c7 100644
--- a/src/components/editEntityMenu/ImageSizeMenu.vue
+++ b/src/components/entities/image/ImageSizeMenu.vue
@@ -1,5 +1,9 @@
 <script setup lang="ts">
 import type { IImage } from '@/app/interfaces/entities';
+import {
+  getImageSpeedDialSizeBiggerLabelsToRemove,
+  getImageSpeedDialSizeSmallerLabelsToRemove
+} from '@/app/helpers';
 
 interface Props {
   entityData: IImage;
@@ -7,7 +11,7 @@ interface Props {
 const props = defineProps<Props>();
 const emit = defineEmits(['scaleImage']);
 
-const speedDialSize = computed(() => {
+const speedDialSizeSmaller = computed(() => {
   let state = [
     {
       label: 'x0.25',
@@ -26,35 +30,11 @@ const speedDialSize = computed(() => {
       command: () => emit('scaleImage', '1')
     }
   ];
-  const initialImageWidth = Math.ceil(props.entityData.image_width / +props.entityData.image_scale);
-  const initialImageHeight = Math.ceil(
-    props.entityData.image_height / +props.entityData.image_scale
-  );
-  if (initialImageWidth <= 400 || initialImageHeight <= 400) {
-    state = state.filter((item) => item.label !== 'x0.25');
-    if (
-      initialImageWidth <= 200 ||
-      initialImageHeight <= 200 ||
-      (initialImageWidth >= 1600 && props.entityData.text_position)
-    ) {
-      state = state.filter((item) => item.label !== 'x0.5');
-      if (
-        initialImageWidth <= 95 ||
-        initialImageHeight <= 95 ||
-        (initialImageWidth >= 1066 && props.entityData.text_position)
-      ) {
-        state = state.filter((item) => item.label !== 'x0.75');
-      }
-    }
-  }
-  if (
-    (initialImageWidth >= 800 && props.entityData.text_position) ||
-    props.entityData.image_width < initialImageWidth
-  ) {
-    state = state.filter((item) => item.label !== 'x1');
-  }
+  const labelsToRemove = getImageSpeedDialSizeSmallerLabelsToRemove(props.entityData);
+  state = state.filter((item) => !~labelsToRemove.indexOf(item.label));
   return state.filter((item) => item.label !== `x${props.entityData.image_scale}`);
 });
+
 const speedDialSizeBigger = computed(() => {
   let state = [
     {
@@ -78,44 +58,8 @@ const speedDialSizeBigger = computed(() => {
       command: () => emit('scaleImage', '2')
     }
   ];
-  const initialImageWidth = Math.ceil(props.entityData.image_width / +props.entityData.image_scale);
-  const initialImageHeight = Math.ceil(
-    props.entityData.image_height / +props.entityData.image_scale
-  );
-  if (
-    (initialImageWidth >= 800 && props.entityData.text_position) ||
-    props.entityData.image_width > initialImageWidth
-  ) {
-    state = state.filter((item) => item.label !== 'x1');
-  }
-  if (
-    initialImageWidth >= 960 ||
-    initialImageHeight >= 960 ||
-    (initialImageWidth >= 640 && props.entityData.text_position)
-  ) {
-    state = state.filter((item) => item.label !== 'x1.25');
-    if (
-      initialImageWidth >= 800 ||
-      initialImageHeight >= 800 ||
-      (initialImageWidth >= 533 && props.entityData.text_position)
-    ) {
-      state = state.filter((item) => item.label !== 'x1.5');
-      if (
-        initialImageWidth >= 685 ||
-        initialImageHeight >= 685 ||
-        (initialImageWidth >= 457 && props.entityData.text_position)
-      ) {
-        state = state.filter((item) => item.label !== 'x1.75');
-        if (
-          initialImageWidth >= 600 ||
-          initialImageHeight >= 600 ||
-          (initialImageWidth >= 400 && props.entityData.text_position)
-        ) {
-          state = state.filter((item) => item.label !== 'x2');
-        }
-      }
-    }
-  }
+  const labelsToRemove = getImageSpeedDialSizeBiggerLabelsToRemove(props.entityData);
+  state = state.filter((item) => !~labelsToRemove.indexOf(item.label));
   return state.filter((item) => item.label !== `x${props.entityData.image_scale}`);
 });
 </script>
@@ -126,8 +70,8 @@ const speedDialSizeBigger = computed(() => {
     :style="`width: ${props.entityData.image_width}px; height: ${props.entityData.image_height}px`"
   >
     <SpeedDial
-      v-if="speedDialSize.length"
-      :model="speedDialSize"
+      v-if="speedDialSizeSmaller.length"
+      :model="speedDialSizeSmaller"
       :radius="70"
       type="semi-circle"
       direction="left"
diff --git a/src/components/editEntityMenu/ImageStateMenu.vue b/src/components/entities/image/ImageStateMenu.vue
similarity index 92%
rename from src/components/editEntityMenu/ImageStateMenu.vue
rename to src/components/entities/image/ImageStateMenu.vue
index 203a6c0..a7ea583 100644
--- a/src/components/editEntityMenu/ImageStateMenu.vue
+++ b/src/components/entities/image/ImageStateMenu.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { deleteEntity } from '@/app/helpers';
 import type { IImage } from '@/app/interfaces/entities';
+import { deleteEntity } from '@/app/helpers';
 
 interface Props {
   entityData: IImage;
@@ -12,7 +12,7 @@ const emit = defineEmits([
   'removeTitle',
   'addText',
   'removeText',
-  'openUploadFileModal'
+  'openCropImageModal'
 ]);
 
 const speedDialState = computed(() => {
@@ -51,7 +51,7 @@ const speedDialState = computed(() => {
     state.push({
       label: 'Crop',
       icon: 'pi pi-expand',
-      command: () => emit('openUploadFileModal')
+      command: () => emit('openCropImageModal')
     });
   }
   state.push({
@@ -82,7 +82,8 @@ const speedDialState = computed(() => {
       <template #item="{ item, toggleCallback }">
         <div
           :class="[
-            ' flex flex-col bg-black bg-opacity-80 items-center justify-between -translate-8 gap-2 p-2 border rounded border-surface-200 dark:border-surface-700 w-20 cursor-pointer',
+            ' flex flex-col bg-black bg-opacity-80 items-center justify-between -translate-8 gap-2 p-2 border rounded' +
+              ' border-surface-200 dark:border-surface-700 w-20 cursor-pointer',
             {
               'text-red-400 font-semibold': item.icon.includes('trash') || item.icon.includes('ban')
             }
diff --git a/src/components/entities/share/EntityTitle.vue b/src/components/entities/share/EntityTitle.vue
new file mode 100644
index 0000000..039ca1f
--- /dev/null
+++ b/src/components/entities/share/EntityTitle.vue
@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import type { IEntity } from '@/app/interfaces/environment';
+import { useVModel } from '@vueuse/core';
+
+interface Props {
+  title?: string | null;
+  entityData: IEntity;
+}
+const props = defineProps<Props>();
+const emit = defineEmits(['update:title', 'editTitle']);
+const title = useVModel(props, 'title', emit);
+</script>
+
+<template>
+  <input
+    v-if="entityData.title || entityData.title === ''"
+    ref="input"
+    v-model="title"
+    type="text"
+    placeholder="Enter title..."
+    :style="`font-size: ${+entityData.font_size + 10}px`"
+    :class="[
+      'w-full mb-4 font-bold pl-2',
+      {
+        'text-center': entityData.entity_title_position === 'center',
+        'text-end': entityData.entity_title_position === 'right'
+      }
+    ]"
+    @change="$emit('editTitle')"
+  />
+</template>
+
+<style scoped></style>
diff --git a/src/components/editEntityMenu/TextFontMenu.vue b/src/components/entities/share/TextFontMenu.vue
similarity index 100%
rename from src/components/editEntityMenu/TextFontMenu.vue
rename to src/components/entities/share/TextFontMenu.vue
index bd05bde..b3f4f06 100644
--- a/src/components/editEntityMenu/TextFontMenu.vue
+++ b/src/components/entities/share/TextFontMenu.vue
@@ -49,8 +49,8 @@ const speedDialSizeFont = computed(() => {
     >
       <template #button="{ toggleCallback }">
         <button
-          @click="toggleCallback"
           class="border p-6 size-10 rounded-full bg-blue-500 flex items-center justify-center"
+          @click="toggleCallback"
         >
           <p>
             <span style="font-size: 1.5rem">T</span><span style="font-size: 1rem">T</span
diff --git a/src/components/editEntityMenu/TextPositionMenu.vue b/src/components/entities/text/TextPositionMenu.vue
similarity index 51%
rename from src/components/editEntityMenu/TextPositionMenu.vue
rename to src/components/entities/text/TextPositionMenu.vue
index 563f2a7..5e12383 100644
--- a/src/components/editEntityMenu/TextPositionMenu.vue
+++ b/src/components/entities/text/TextPositionMenu.vue
@@ -13,100 +13,79 @@ const emit = defineEmits(['editParagraphWidth', 'editPosition', 'editTitlePositi
 const position = computed(() => props.entityData.entity_position);
 const titlePosition = computed(() => props.entityData.entity_title_position);
 
+const dataStore = useDataStore();
+const homeEntities = computed(() => dataStore.homeEntities);
+const entityIndex = homeEntities.value.findIndex(
+  (entity: IEntity) => entity.entity_uuid === props.entityData.entity_uuid
+);
+
 const speedDialMove = computed(() => {
   let state = [];
+  const left = {
+    label: 'Left',
+    icon: 'pi pi-arrow-left',
+    command: () => emit('editPosition', 'left')
+  };
+  const center = {
+    label: 'Center',
+    icon: 'pi pi-align-center',
+    command: () => emit('editPosition', 'center')
+  };
+  const right = {
+    label: 'Right',
+    icon: 'pi pi-arrow-right',
+    command: () => emit('editPosition', 'right')
+  };
+  const titleLeft = {
+    label: 'Title left',
+    icon: 'pi pi-align-left',
+    command: () => emit('editTitlePosition', 'left')
+  };
+  const titleCenter = {
+    label: 'Title center',
+    icon: 'pi pi-align-center',
+    command: () => emit('editTitlePosition', 'center')
+  };
+  const titleRight = {
+    label: 'Title right',
+    icon: 'pi pi-align-right',
+    command: () => emit('editTitlePosition', 'right')
+  };
   switch (titlePosition.value) {
     case 'left':
-      state.push({
-        label: 'Title center',
-        icon: 'pi pi-align-center',
-        command: () => emit('editTitlePosition', 'center')
-      });
-      state.push({
-        label: 'Title right',
-        icon: 'pi pi-align-right',
-        command: () => emit('editTitlePosition', 'right')
-      });
+      state.push(titleCenter, titleRight);
       break;
     case 'center':
-      state.push({
-        label: 'Title left',
-        icon: 'pi pi-align-left',
-        command: () => emit('editTitlePosition', 'left')
-      });
-      state.push({
-        label: 'Title right',
-        icon: 'pi pi-align-right',
-        command: () => emit('editTitlePosition', 'right')
-      });
+      state.push(titleLeft, titleRight);
       break;
     case 'right':
-      state.push({
-        label: 'Title left',
-        icon: 'pi pi-align-left',
-        command: () => emit('editTitlePosition', 'left')
-      });
-      state.push({
-        label: 'Title center',
-        icon: 'pi pi-align-center',
-        command: () => emit('editTitlePosition', 'center')
-      });
+      state.push(titleLeft, titleCenter);
   }
   switch (position.value) {
     case 'left':
-      state.push({
-        label: 'Center',
-        icon: 'pi pi-align-center',
-        command: () => emit('editPosition', 'center')
-      });
-      state.push({
-        label: 'Right',
-        icon: 'pi pi-arrow-right',
-        command: () => emit('editPosition', 'right')
-      });
+      state.push(center, right);
       break;
     case 'center':
-      state.push({
-        label: 'Left',
-        icon: 'pi pi-arrow-left',
-        command: () => emit('editPosition', 'left')
-      });
-      state.push({
-        label: 'Right',
-        icon: 'pi pi-arrow-right',
-        command: () => emit('editPosition', 'right')
-      });
+      state.push(left, right);
       break;
     case 'right':
+      state.push(left, center);
+  }
+  if (homeEntities.value.length > 1) {
+    if (entityIndex !== 0) {
       state.push({
-        label: 'Left',
-        icon: 'pi pi-arrow-left',
-        command: () => emit('editPosition', 'left')
+        label: 'Up',
+        icon: 'pi pi-arrow-up',
+        command: () => changeOrderHomeEntity(props.entityData.entity_uuid, 'up')
       });
+    }
+    if (entityIndex !== homeEntities.value.length - 1) {
       state.push({
-        label: 'Center',
-        icon: 'pi pi-align-center',
-        command: () => emit('editPosition', 'center')
+        label: 'Down',
+        icon: 'pi pi-arrow-down',
+        command: () => changeOrderHomeEntity(props.entityData.entity_uuid, 'down')
       });
-  }
-  const dataStore = useDataStore();
-  const entities = dataStore.homeEntities;
-  const entityIndex = entities.findIndex(
-    (entity: IEntity) => entity.entity_uuid === props.entityData.entity_uuid
-  );
-  if (entityIndex !== 0) {
-    state.push({
-      label: 'Up',
-      icon: 'pi pi-arrow-up',
-      command: () => changeOrderHomeEntity(props.entityData.entity_uuid, 'up')
-    });
-  }
-  if (entityIndex !== entities.length - 1) {
-    state.push({
-      label: 'Down',
-      icon: 'pi pi-arrow-down',
-      command: () => changeOrderHomeEntity(props.entityData.entity_uuid, 'down')
-    });
+    }
   }
   if (props.entityData.paragraph_size === 'full') {
     state = state.filter(
diff --git a/src/components/editEntityMenu/TextStateMenu.vue b/src/components/entities/text/TextStateMenu.vue
similarity index 100%
rename from src/components/editEntityMenu/TextStateMenu.vue
rename to src/components/entities/text/TextStateMenu.vue
diff --git a/src/modules/BaseSidebarMenu.vue b/src/modules/BaseSidebarMenu.vue
index 162f8a5..7d5734f 100644
--- a/src/modules/BaseSidebarMenu.vue
+++ b/src/modules/BaseSidebarMenu.vue
@@ -2,17 +2,11 @@
 import { useDataStore } from '@/app/stores/data';
 
 const route = useRoute();
-const emit = defineEmits(['closeCallback']);
 const dataStore = useDataStore();
-const sheets = ref();
-
-const expandAll = () => {
-  for (let sheet of sheets.value) {
-    expandSheet(sheet);
-  }
+const emit = defineEmits(['closeCallback']);
 
-  expandedKeys.value = { ...expandedKeys.value };
-};
+const sheets = ref();
+const expandedKeys = ref({});
 
 const expandSheet = (sheet) => {
   if (sheet.children && sheet.children.length) {
@@ -23,12 +17,17 @@ const expandSheet = (sheet) => {
     }
   }
 };
+const expandAll = () => {
+  for (let sheet of sheets.value) {
+    expandSheet(sheet);
+  }
+  expandedKeys.value = { ...expandedKeys.value };
+};
+
 onMounted(() => {
   sheets.value = dataStore.sheets;
   expandAll();
 });
-
-const expandedKeys = ref({});
 </script>
 
 <template>
@@ -37,10 +36,10 @@ const expandedKeys = ref({});
       <LogoAndLabel />
       <Button
         severity="contrast"
-        @click="emit('closeCallback')"
         icon="pi pi-times"
         rounded
         outlined
+        @click="emit('closeCallback')"
       ></Button>
     </section>
     <section class="flex items-center justify-between mb-6">
@@ -56,8 +55,8 @@ const expandedKeys = ref({});
         <span v-else><i class="pi pi-home text-gray-400 pr-2"></i>Главное меню</span>
       </div>
       <Tree
-        :value="sheets"
         v-model:expandedKeys="expandedKeys"
+        :value="sheets"
         pt:root:class="pl-0"
         pt:sheetLabel:class="text-white"
       >
diff --git a/src/modules/CropImageModal.vue b/src/modules/CropImageModal.vue
index 81a1def..254573e 100644
--- a/src/modules/CropImageModal.vue
+++ b/src/modules/CropImageModal.vue
@@ -25,13 +25,13 @@ const stageSize = ref({
 
 watch(
   () => isVisible.value,
-  async () => {
-    if (imageInfo.value.image_url && isVisible.value) {
-      imageInstance.src = imageInfo.value.image_url;
+  () => {
+    if (imageInfo.value.imageUrl && isVisible.value) {
+      imageInstance.src = imageInfo.value.imageUrl;
       imageInstance.onload = () => {
         const imageHeight = imageInfo.value.image_height;
         const imageWidth = imageInfo.value.image_width;
-        imageInstance.src = imageInfo.value.image_url;
+        imageInstance.src = imageInfo.value.imageUrl;
         if (imageWidth < (imageHeight * windowWidth.value) / windowHeight.value) {
           imageInstance.onload = () => {
             if (imageHeight < windowHeight.value * 0.75 - 20) {
@@ -77,13 +77,16 @@ const modalWidth = computed(() => {
     return (100 * (stageSize.value.width + 60)) / windowWidth.value;
   } else return 63;
 });
-function onCropperChange({ canvas }) {
+const onCropperChange = async ({ canvas }) => {
+  imageInstance.width = canvas.width;
+  imageInstance.height = canvas.height;
+  console.log('on change size: ', imageInstance.width, imageInstance.height);
   finalImageUrl.value = canvas.toDataURL();
-}
-function submitForm() {
+};
+const submitForm = () => {
   emit('saveImage', finalImageUrl.value, imageInstance.width, imageInstance.height);
   finalImageUrl.value = '';
-}
+};
 </script>
 
 <template>
@@ -111,8 +114,8 @@ function submitForm() {
         </div>
       </template>
       <button
-        @click.prevent="submitForm"
         class="absolute top-0 left-2 -translate-y-full bg-blue-600 p-2 px-4 text-lg font-bold transition-all border-0 border-t-2 border-t-solid border-t-black rounded-t-lg select-none"
+        @click.prevent="submitForm"
       >
         Save image
       </button>
@@ -121,9 +124,9 @@ function submitForm() {
       >
         <Cropper
           :src="imageInstance.src"
-          @change="onCropperChange"
           :minWidth="200"
           :minHeight="200"
+          @change="onCropperChange"
         ></Cropper>
       </div>
     </Dialog>
diff --git a/src/modules/EntitiesList.vue b/src/modules/EntitiesList.vue
new file mode 100644
index 0000000..0dd6065
--- /dev/null
+++ b/src/modules/EntitiesList.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { IEntity } from '@/app/interfaces/environment';
+
+interface Props {
+  entities: IEntity[];
+}
+defineProps<Props>();
+const emit = defineEmits(['createEntity']);
+
+const createEntity = (entity: IEntity) => {
+  emit('createEntity', entity);
+};
+</script>
+
+<template>
+  <EntityItem
+    v-for="entitiesItem of entities"
+    :key="entitiesItem.entity_uuid"
+    :entity="entitiesItem"
+  />
+  <div class="relative mt-2">
+    <CreateEntityMenu @createEntity="createEntity" />
+  </div>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/PageBackgroundMenu.vue b/src/modules/PageBackgroundMenu.vue
new file mode 100644
index 0000000..30bf8f8
--- /dev/null
+++ b/src/modules/PageBackgroundMenu.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+interface Props {
+  isBackgroundDefault: boolean;
+}
+defineProps<Props>();
+const emit = defineEmits(['uploadFile', 'setDefaultBackground']);
+</script>
+
+<template>
+  <div
+    class="changeImageBlock absolute top-2 right-2 bg-black p-2 rounded-md hover:text-gray-300 transition-all select-none"
+  >
+    <input
+      type="file"
+      onclick="this.value = null"
+      title="Change image"
+      accept="image/*"
+      class="w-2 pr-[135px] -mr-[135px] py-2 -my-2 pl-2 -ml-2 opacity-0"
+      @change="$emit('uploadFile', $event)"
+    />
+    <span><i class="pi pi-image mr-2"></i>Change image</span>
+  </div>
+  <button
+    v-if="isBackgroundDefault"
+    class="returnDefaultImageBlock absolute top-16 right-2 bg-blue-600 p-2 transition-all rounded-md border-2 border-solid border-black select-none"
+    @click.prevent="$emit('setDefaultBackground')"
+  >
+    Return default image
+  </button>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/entities/TextItem.vue b/src/modules/entities/TextItem.vue
index 826f055..b8f4c92 100644
--- a/src/modules/entities/TextItem.vue
+++ b/src/modules/entities/TextItem.vue
@@ -1,11 +1,7 @@
 <script setup lang="ts">
-import type { IText } from '@/app/interfaces/entities';
-import { useDataStore } from '@/app/stores/data';
 import { useTextareaAutosize } from '@vueuse/core';
-import { deleteEntity, editEntity } from '@/app/helpers';
-import StateMenu from '@/components/editEntityMenu/TextStateMenu.vue';
-import PositionMenu from '@/components/editEntityMenu/TextPositionMenu.vue';
-import FontMenu from '@/components/editEntityMenu/TextFontMenu.vue';
+import type { IText } from '@/app/interfaces/entities';
+import { editEntity } from '@/app/helpers';
 
 interface Props {
   entityData: IText;
@@ -13,52 +9,14 @@ interface Props {
 const props = defineProps<Props>();
 const entityData = ref(props.entityData);
 
-const addTitle = () => {
-  editEntity(
-    { ...entityData.value, title: 'Title', entity_title_position: 'center' },
-    entityData.value.entity_uuid
-  );
-  entityData.value = { ...entityData.value, title: 'Title', entity_title_position: 'center' };
-};
-
 const editTitle = () => {
-  editEntity({ ...entityData.value, title: entityData.value.title }, entityData.value.entity_uuid);
+  editEntity({ ...entityData.value, title: entityData.value.title });
 };
-
 const editText = () => {
-  editEntity({ ...entityData.value, text: entityData.value.text }, entityData.value.entity_uuid);
-};
-
-const removeTitle = () => {
-  const newState = { ...entityData.value };
-  newState.title = null;
-  editEntity({ ...newState }, entityData.value.entity_uuid);
-  entityData.value = newState;
+  editEntity({ ...entityData.value, text: entityData.value.text });
 };
 
 const { textarea, triggerResize } = useTextareaAutosize({ styleProp: 'minHeight' });
-
-const dataStore = useDataStore();
-const homeEntities = computed(() => dataStore.homeEntities);
-function editPosition(position: 'left' | 'center' | 'right') {
-  entityData.value.entity_position = position;
-  editEntity({ ...entityData.value, entity_position: position }, entityData.value.entity_uuid);
-}
-function editTitlePosition(position: 'left' | 'center' | 'right') {
-  entityData.value.entity_title_position = position;
-  editEntity(
-    { ...entityData.value, entity_title_position: position },
-    entityData.value.entity_uuid
-  );
-}
-function changeFontSize(newSize: '16' | '20' | '24' | '40' | '64') {
-  entityData.value.font_size = newSize;
-  editEntity({ ...entityData.value, font_size: newSize }, entityData.value.entity_uuid);
-}
-function editParagraphWidth(widthMode: 'full' | 'half') {
-  entityData.value.paragraph_size = widthMode;
-  editEntity({ ...entityData.value, paragraph_size: widthMode }, entityData.value.entity_uuid);
-}
 </script>
 
 <template>
@@ -80,21 +38,10 @@ function editParagraphWidth(widthMode: 'full' | 'half') {
         }
       ]"
     >
-      <input
-        ref="input"
-        v-if="entityData.title || entityData.title === ''"
-        type="text"
-        v-model="entityData.title"
-        @change="editTitle"
-        placeholder="Enter title..."
-        :style="`font-size: ${+entityData.font_size + 10}px`"
-        :class="[
-          'w-full mb-4 font-bold text-6xl pl-2',
-          {
-            'text-center': entityData.entity_title_position === 'center',
-            'text-end': entityData.entity_title_position === 'right'
-          }
-        ]"
+      <EntityTitle
+        v-model:title="entityData.title"
+        :entityData="entityData"
+        @editTitle="editTitle"
       />
       <div class="relative leading-none">
         <textarea
@@ -102,50 +49,19 @@ function editParagraphWidth(widthMode: 'full' | 'half') {
           v-model="entityData.text"
           class="w-full indent-5 leading-normal resize-none outline-0"
           :style="`font-size: ${entityData.font_size}px;`"
-          @change="editText"
-          @input="triggerResize"
           placeholder="Enter text..."
           rows="3"
           spellcheck="false"
+          @change="editText"
+          @input="triggerResize"
         />
       </div>
-      <div class="speedDial absolute left-2 top-0 transition-all select-none">
-        <StateMenu
-          :entityData="entityData"
-          @deleteEntity="deleteEntity"
-          @addTitle="addTitle"
-          @removeTitle="removeTitle"
-        />
-      </div>
-      <div
-        class="speedDial h-12 absolute left-2 top-1/2 -translate-y-1/2 transition-all select-none"
-      >
-        <FontMenu :entityData="entityData" @changeFontSize="changeFontSize" />
-      </div>
-      <div
-        v-if="homeEntities.length > 1"
-        class="speedDial absolute left-2 bottom-0 transition-all select-none"
-      >
-        <PositionMenu
-          :entityData="entityData"
-          @editPosition="editPosition"
-          @editTitlePosition="editTitlePosition"
-          @editParagraphWidth="editParagraphWidth"
-        />
-      </div>
+      <TextMenu v-model:entityData="entityData" />
     </div>
   </div>
 </template>
 
-<style scoped>
-textarea {
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-}
-
-textarea::-webkit-scrollbar {
-  display: none;
-}
+<style>
 .entityContainer .speedDial {
   opacity: 0;
 }
diff --git a/src/modules/entities/menu/ImageMenu.vue b/src/modules/entities/menu/ImageMenu.vue
new file mode 100644
index 0000000..fdfd6ab
--- /dev/null
+++ b/src/modules/entities/menu/ImageMenu.vue
@@ -0,0 +1,104 @@
+<script setup lang="ts">
+import { useVModel } from '@vueuse/core';
+import { useDataStore } from '@/app/stores/data';
+import type { IImage } from '@/app/interfaces/entities';
+import { deleteEntity, editEntity } from '@/app/helpers';
+
+interface Props {
+  entityData: IImage;
+}
+const props = defineProps<Props>();
+const emit = defineEmits(['update:entityData', 'openCropImageModal']);
+const entityData = useVModel(props, 'entityData', emit);
+
+const dataStore = useDataStore();
+const homeEntities = computed(() => dataStore.homeEntities);
+
+const addTitle = () => {
+  editEntity({
+    ...entityData.value,
+    title: 'Title',
+    entity_title_position: 'center',
+    font_size: entityData.value.font_size ?? '24'
+  });
+  entityData.value = { ...entityData.value, title: 'Title', entity_title_position: 'center' };
+};
+const removeTitle = () => {
+  const newState = { ...entityData.value };
+  newState.title = null;
+  editEntity({ ...newState });
+  entityData.value = newState;
+};
+const addText = () => {
+  editEntity({
+    ...entityData.value,
+    text: 'Text',
+    text_position: 'right',
+    font_size: entityData.value.font_size ?? '24',
+    paragraph_size: 'full'
+  });
+  entityData.value = { ...entityData.value, text: 'Text' };
+};
+const removeText = () => {
+  const newState = { ...entityData.value };
+  ['text', 'text_position', 'font_size', 'paragraph_size'].forEach((item) => {
+    newState[item] = null;
+  });
+  editEntity({ ...newState });
+  entityData.value = newState;
+};
+const editPosition = (position: 'left' | 'center' | 'right') => {
+  entityData.value.entity_position = position;
+  editEntity({ ...entityData.value, entity_position: position });
+};
+const editTitlePosition = (position: 'left' | 'center' | 'right') => {
+  entityData.value.entity_title_position = position;
+  editEntity({ ...entityData.value, entity_title_position: position });
+};
+const editTextPosition = (position: 'left' | 'right') => {
+  entityData.value.text_position = position;
+  editEntity({ ...entityData.value, text_position: position });
+};
+const editParagraphWidth = (widthMode: 'full' | 'half') => {
+  entityData.value.paragraph_size = widthMode;
+  editEntity({ ...entityData.value, paragraph_size: widthMode });
+};
+const changeFontSize = (newSize: '16' | '20' | '24' | '40' | '64') => {
+  entityData.value.font_size = newSize;
+  editEntity({ ...entityData.value, font_size: newSize });
+};
+</script>
+
+<template>
+  <div class="speedDial absolute left-2 top-0 transition-all select-none">
+    <ImageStateMenu
+      :entityData="entityData"
+      @deleteEntity="deleteEntity"
+      @addTitle="addTitle"
+      @removeTitle="removeTitle"
+      @addText="addText"
+      @removeText="removeText"
+      @openCropImageModal="$emit('openCropImageModal')"
+    />
+  </div>
+  <div
+    v-if="entityData?.text || entityData?.title"
+    class="speedDial h-12 absolute left-2 top-1/2 -translate-y-1/2 transition-all select-none"
+  >
+    <TextFontMenu :entityData="entityData" @changeFontSize="changeFontSize" />
+  </div>
+  <div
+    v-if="homeEntities.length > 1"
+    class="speedDial absolute left-2 bottom-0 transition-all select-none"
+  >
+    <ImagePositionMenu
+      :entityData="entityData"
+      @editPosition="editPosition"
+      @editTitlePosition="editTitlePosition"
+      @editTextPosition="editTextPosition"
+      @editParagraphWidth="editParagraphWidth"
+    />
+  </div>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/entities/menu/TextMenu.vue b/src/modules/entities/menu/TextMenu.vue
new file mode 100644
index 0000000..a795a9d
--- /dev/null
+++ b/src/modules/entities/menu/TextMenu.vue
@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import { deleteEntity, editEntity } from '@/app/helpers';
+import type { IText } from '@/app/interfaces/entities';
+import { useVModel } from '@vueuse/core';
+
+interface Props {
+  entityData: IText;
+}
+const props = defineProps<Props>();
+const emit = defineEmits(['update:entityData']);
+const entityData = useVModel(props, 'entityData', emit);
+
+const addTitle = () => {
+  editEntity({ ...entityData.value, title: 'Title', entity_title_position: 'center' });
+  entityData.value = { ...entityData.value, title: 'Title', entity_title_position: 'center' };
+};
+const removeTitle = () => {
+  const newState = { ...entityData.value };
+  newState.title = null;
+  editEntity({ ...newState });
+  entityData.value = newState;
+};
+const editPosition = (position: 'left' | 'center' | 'right') => {
+  entityData.value.entity_position = position;
+  editEntity({ ...entityData.value, entity_position: position });
+};
+const editTitlePosition = (position: 'left' | 'center' | 'right') => {
+  entityData.value.entity_title_position = position;
+  editEntity({ ...entityData.value, entity_title_position: position });
+};
+const changeFontSize = (newSize: '16' | '20' | '24' | '40' | '64') => {
+  entityData.value.font_size = newSize;
+  editEntity({ ...entityData.value, font_size: newSize });
+};
+const editParagraphWidth = (widthMode: 'full' | 'half') => {
+  entityData.value.paragraph_size = widthMode;
+  editEntity({ ...entityData.value, paragraph_size: widthMode });
+};
+</script>
+
+<template>
+  <div class="speedDial absolute left-2 top-0 transition-all select-none">
+    <TextStateMenu
+      :entityData="entityData"
+      @deleteEntity="deleteEntity"
+      @addTitle="addTitle"
+      @removeTitle="removeTitle"
+    />
+  </div>
+  <div class="speedDial h-12 absolute left-2 top-1/2 -translate-y-1/2 transition-all select-none">
+    <TextFontMenu :entityData="entityData" @changeFontSize="changeFontSize" />
+  </div>
+  <div class="speedDial absolute left-2 bottom-0 transition-all select-none">
+    <TextPositionMenu
+      :entityData="entityData"
+      @editPosition="editPosition"
+      @editTitlePosition="editTitlePosition"
+      @editParagraphWidth="editParagraphWidth"
+    />
+  </div>
+</template>
+
+<style scoped></style>
diff --git a/src/output.css b/src/output.css
index b3632e3..314fe76 100644
--- a/src/output.css
+++ b/src/output.css
@@ -632,10 +632,6 @@ video {
   left: 0.5rem;
 }
 
-.left-20 {
-  left: 5rem;
-}
-
 .right-2 {
   right: 0.5rem;
 }
@@ -760,6 +756,11 @@ video {
   height: 3rem;
 }
 
+.size-8 {
+  width: 2rem;
+  height: 2rem;
+}
+
 .h-12 {
   height: 3rem;
 }
@@ -882,8 +883,12 @@ video {
   gap: 0.5rem;
 }
 
-.gap-8 {
-  gap: 2rem;
+.gap-4 {
+  gap: 1rem;
+}
+
+.gap-\[32px\] {
+  gap: 32px;
 }
 
 .overflow-auto {
@@ -952,6 +957,11 @@ video {
   background-color: rgb(37 99 235 / var(--tw-bg-opacity));
 }
 
+.bg-gray-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
+}
+
 .bg-gray-600 {
   --tw-bg-opacity: 1;
   background-color: rgb(75 85 99 / var(--tw-bg-opacity));
@@ -1037,6 +1047,11 @@ video {
   padding-bottom: 1rem;
 }
 
+.py-6 {
+  padding-top: 1.5rem;
+  padding-bottom: 1.5rem;
+}
+
 .py-8 {
   padding-top: 2rem;
   padding-bottom: 2rem;
@@ -1099,6 +1114,11 @@ video {
   line-height: 1.75rem;
 }
 
+.text-5xl {
+  font-size: 3rem;
+  line-height: 1;
+}
+
 .font-bold {
   font-weight: 700;
 }
diff --git a/src/shared/BaseLoader.vue b/src/shared/BaseLoader.vue
new file mode 100644
index 0000000..3397b5e
--- /dev/null
+++ b/src/shared/BaseLoader.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts"></script>
+
+<template>
+  <div class="loader flex gap-4">
+    <div class="dot size-8 rounded-full bg-gray-100"></div>
+    <div class="dot size-8 rounded-full bg-gray-100"></div>
+    <div class="dot size-8 rounded-full bg-gray-100"></div>
+  </div>
+</template>
+
+<style scoped>
+.loader .dot {
+  animation: bounce 0.5s infinite alternate;
+}
+@keyframes bounce {
+  to {
+    translate: 0 -16px;
+  }
+}
+.loader .dot:nth-child(2) {
+  animation-delay: 100ms;
+}
+.loader .dot:nth-child(3) {
+  animation-delay: 200ms;
+}
+</style>
-- 
GitLab