From f316e051a30269098e22e085d6ef17366de63bc6 Mon Sep 17 00:00:00 2001
From: malyusgun <malyugind20@gmail.com>
Date: Fri, 30 Aug 2024 17:31:56 +0500
Subject: [PATCH 1/2] add Divider entity and start to change settings sidebar
 of entities

---
 src/app/components.d.ts                       |   7 +-
 src/app/helpers/images.ts                     |   4 +-
 src/app/interfaces/entities.ts                |   7 +
 src/app/interfaces/environment.ts             |   2 +
 src/app/stores/websocket.ts                   |   6 +-
 src/components/CreateEntityMenu.vue           |  26 ++-
 .../entities/image/ImagePositionMenu.vue      |  10 +-
 .../entities/image/ImageStateMenu.vue         |   7 +-
 src/components/entities/share/EntityTitle.vue |   2 +-
 .../entities/share/TextFontMenu.vue           |   4 +-
 .../entities/text/TextPositionMenu.vue        |  10 +-
 src/modules/PageBackgroundMenu.vue            |   2 +-
 src/modules/entities/DividerItem.vue          |  24 +++
 src/modules/{ => entities}/EntitiesList.vue   |   0
 src/modules/{ => entities}/EntityItem.vue     |   6 +-
 src/modules/entities/ImageItem.vue            |  29 +++-
 src/modules/entities/TextItem.vue             |  18 +-
 src/modules/entities/menu/DividerMenu.vue     | 156 ++++++++++++++++++
 src/modules/entities/menu/ImageMenu.vue       |   4 +-
 src/modules/entities/menu/TextMenu.vue        |   4 +-
 src/output.css                                |  58 +++++++
 src/shared/BaseDivider.vue                    |  10 +-
 vue/Knob.vue                                  |  22 +--
 23 files changed, 360 insertions(+), 58 deletions(-)
 create mode 100644 src/modules/entities/DividerItem.vue
 rename src/modules/{ => entities}/EntitiesList.vue (100%)
 rename src/modules/{ => entities}/EntityItem.vue (76%)
 create mode 100644 src/modules/entities/menu/DividerMenu.vue

diff --git a/src/app/components.d.ts b/src/app/components.d.ts
index 053d351..2bef6d0 100644
--- a/src/app/components.d.ts
+++ b/src/app/components.d.ts
@@ -17,9 +17,11 @@ declare module 'vue' {
     CropImageModal: typeof import('./../modules/CropImageModal.vue')['default']
     Dialog: typeof import('primevue/dialog')['default']
     Divider: typeof import('primevue/divider')['default']
+    DividerItem: typeof import('./../modules/entities/DividerItem.vue')['default']
+    DividerMenu: typeof import('./../modules/entities/menu/DividerMenu.vue')['default']
     Drawer: typeof import('primevue/drawer')['default']
-    EntitiesList: typeof import('./../modules/EntitiesList.vue')['default']
-    EntityItem: typeof import('./../modules/EntityItem.vue')['default']
+    EntitiesList: typeof import('./../modules/entities/EntitiesList.vue')['default']
+    EntityItem: typeof import('./../modules/entities/EntityItem.vue')['default']
     EntityTitle: typeof import('./../components/entities/share/EntityTitle.vue')['default']
     HomePage: typeof import('./../pages/HomePage.vue')['default']
     ImageItem: typeof import('./../modules/entities/ImageItem.vue')['default']
@@ -40,6 +42,7 @@ declare module 'vue' {
     TextMenu: typeof import('./../modules/entities/menu/TextMenu.vue')['default']
     TextPositionMenu: typeof import('./../components/entities/text/TextPositionMenu.vue')['default']
     TextStateMenu: typeof import('./../components/entities/text/TextStateMenu.vue')['default']
+    ToggleSwitch: typeof import('primevue/toggleswitch')['default']
     Tree: typeof import('primevue/tree')['default']
     UserInfoHeaderWithSettings: typeof import('./../components/UserInfoHeaderWithSettings.vue')['default']
   }
diff --git a/src/app/helpers/images.ts b/src/app/helpers/images.ts
index 2372f5f..a32ed3d 100644
--- a/src/app/helpers/images.ts
+++ b/src/app/helpers/images.ts
@@ -8,7 +8,7 @@ export const addUrlsToImageEntities = (entities: IEntity[]) => {
   const filesBuffer = filesWebsocketStore.filesBuffer;
   let index = 0;
   const entitiesToReturn = entities.map((entity: IEntity) => {
-    if (!entity.image_width) return entity;
+    if (!entity?.image_width) return entity;
     if (entity.imageUrl) return entity;
     if (filesWebsocketStore.imageUrl) {
       // редактирование сущности изображения
@@ -26,7 +26,7 @@ export const addUrlsToImageEntities = (entities: IEntity[]) => {
 };
 
 export const checkIsImage = (entity: IEntity) => {
-  if (!entity.image_width) {
+  if (!entity?.image_width) {
     return entity;
   }
   const entityToReturn = { ...entity };
diff --git a/src/app/interfaces/entities.ts b/src/app/interfaces/entities.ts
index 0767db1..b367311 100644
--- a/src/app/interfaces/entities.ts
+++ b/src/app/interfaces/entities.ts
@@ -26,6 +26,13 @@ type ITableColumnTypes =
   | 'rating'
   | 'knob';
 
+export interface IDivider extends IEntity {
+  entity_type: 'divider';
+  entity_uuid: string;
+  divider_height: number;
+  divider_type: 'solid' | 'dashed' | 'dotted';
+}
+
 export interface IText extends IEntity {
   entity_type: 'text';
   entity_uuid: string;
diff --git a/src/app/interfaces/environment.ts b/src/app/interfaces/environment.ts
index c0a1f38..e307c3d 100644
--- a/src/app/interfaces/environment.ts
+++ b/src/app/interfaces/environment.ts
@@ -13,6 +13,8 @@ export interface IEntity {
   user_nick_name?: string;
   entity_order?: number;
   entity_type: string;
+  divider_height?: number;
+  divider_type?: 'solid' | 'dashed' | 'dotted';
   title?: string | null;
   text?: string | null;
   font_size?: string | null;
diff --git a/src/app/stores/websocket.ts b/src/app/stores/websocket.ts
index 6638f7c..6135d33 100644
--- a/src/app/stores/websocket.ts
+++ b/src/app/stores/websocket.ts
@@ -13,7 +13,7 @@ export const useWebsocketStore = defineStore('websocketStore', () => {
   const filesBufferLength = computed(() => filesWebsocketStore.filesBuffer.length);
   const homeEntities = computed(() => dataStore.homeEntities);
   const imageEntitiesCount = computed(
-    () => homeEntities.value.filter((entity) => entity.image_width).length
+    () => homeEntities.value.filter((entity) => entity?.image_width).length
   );
 
   const socket = ref();
@@ -50,7 +50,7 @@ export const useWebsocketStore = defineStore('websocketStore', () => {
         }
         case 'createHomeEntity': {
           const entities = [...homeEntities.value];
-          if (response.data.image_width) {
+          if (response.data?.image_width) {
             response.data.imageUrl = filesWebsocketStore.imageUrl;
             filesWebsocketStore.cleanImageUrl();
           }
@@ -74,7 +74,7 @@ export const useWebsocketStore = defineStore('websocketStore', () => {
           let entities = [...homeEntities.value];
           entities = entities.map((entity: IEntity) => {
             if (entity.entity_uuid !== response.data.entity_uuid) return entity;
-            if (response.data.image_width) {
+            if (response.data?.image_width) {
               response.data.imageUrl = filesWebsocketStore.imageUrl;
               filesWebsocketStore.cleanImageUrl();
             }
diff --git a/src/components/CreateEntityMenu.vue b/src/components/CreateEntityMenu.vue
index 60176cd..6c5db93 100644
--- a/src/components/CreateEntityMenu.vue
+++ b/src/components/CreateEntityMenu.vue
@@ -50,6 +50,18 @@ onChange((files) => {
 });
 
 const speedDialItems = ref([
+  {
+    label: 'Divider',
+    icon: 'pi pi-pause',
+    command: () => {
+      emit('createEntity', {
+        entity_type: 'divider',
+        entity_uuid: uuidv4(),
+        divider_height: 1,
+        divider_type: 'solid'
+      });
+    }
+  },
   {
     label: 'Text',
     icon: 'pi pi-pencil',
@@ -108,7 +120,19 @@ const speedDialItems = ref([
         class="flex flex-col items-center justify-between -translate-8 gap-2 p-2 border rounded border-surface-200 dark:border-surface-700 w-20 cursor-pointer"
         @click="toggleCallback"
       >
-        <span :class="item.icon" />
+        <span v-show="item.label !== 'Divider'" :class="item.icon" />
+        <svg
+          v-show="item.label === 'Divider'"
+          fill="#fff"
+          width="20px"
+          height="20px"
+          viewBox="0 0 24 24"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M3.293,20.707a1,1,0,0,1,0-1.414l16-16a1,1,0,1,1,1.414,1.414l-16,16A1,1,0,0,1,3.293,20.707Z"
+          />
+        </svg>
         <span>
           {{ item.label }}
         </span>
diff --git a/src/components/entities/image/ImagePositionMenu.vue b/src/components/entities/image/ImagePositionMenu.vue
index 2630506..8a7e919 100644
--- a/src/components/entities/image/ImagePositionMenu.vue
+++ b/src/components/entities/image/ImagePositionMenu.vue
@@ -19,8 +19,10 @@ 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 entityIndex = computed(() =>
+  homeEntities.value.findIndex(
+    (entity: IEntity) => entity.entity_uuid === props.entityData.entity_uuid
+  )
 );
 
 const speedDialMove = computed(() => {
@@ -75,14 +77,14 @@ const speedDialMove = computed(() => {
     case 'right':
       state.push(left, center);
   }
-  if (entityIndex !== 0) {
+  if (entityIndex.value !== 0) {
     state.push({
       label: 'Up',
       icon: 'pi pi-arrow-up',
       command: () => changeOrderHomeEntity(props.entityData.entity_uuid, 'up')
     });
   }
-  if (entityIndex !== homeEntities.value.length - 1) {
+  if (entityIndex.value !== homeEntities.value.length - 1) {
     state.push({
       label: 'Down',
       icon: 'pi pi-arrow-down',
diff --git a/src/components/entities/image/ImageStateMenu.vue b/src/components/entities/image/ImageStateMenu.vue
index a7ea583..d77a75a 100644
--- a/src/components/entities/image/ImageStateMenu.vue
+++ b/src/components/entities/image/ImageStateMenu.vue
@@ -65,12 +65,7 @@ const speedDialState = computed(() => {
 
 <template>
   <div class="relative z-50">
-    <SpeedDial
-      :model="speedDialState"
-      direction="right"
-      pt:root:class="speedDialRoot w-4"
-      class="absolute"
-    >
+    <SpeedDial :model="speedDialState" direction="right" pt:root:class="speedDialRoot w-4">
       <template #button="{ toggleCallback }">
         <button
           class="border p-6 size-10 rounded-full bg-blue-500 flex items-center justify-center"
diff --git a/src/components/entities/share/EntityTitle.vue b/src/components/entities/share/EntityTitle.vue
index 039ca1f..fccd97c 100644
--- a/src/components/entities/share/EntityTitle.vue
+++ b/src/components/entities/share/EntityTitle.vue
@@ -20,7 +20,7 @@ const title = useVModel(props, 'title', emit);
     placeholder="Enter title..."
     :style="`font-size: ${+entityData.font_size + 10}px`"
     :class="[
-      'w-full mb-4 font-bold pl-2',
+      'w-full my-4 font-bold pl-2',
       {
         'text-center': entityData.entity_title_position === 'center',
         'text-end': entityData.entity_title_position === 'right'
diff --git a/src/components/entities/share/TextFontMenu.vue b/src/components/entities/share/TextFontMenu.vue
index b3f4f06..24cfbbe 100644
--- a/src/components/entities/share/TextFontMenu.vue
+++ b/src/components/entities/share/TextFontMenu.vue
@@ -39,7 +39,7 @@ const speedDialSizeFont = computed(() => {
 </script>
 
 <template>
-  <div class="h-12">
+  <div>
     <SpeedDial
       v-if="speedDialSizeFont.length"
       :model="speedDialSizeFont"
@@ -61,7 +61,7 @@ const speedDialSizeFont = computed(() => {
       <template #item="{ item, toggleCallback }">
         <div
           :class="[
-            ' text-md font-semibold bg-opacity-70 items-center justify-between -translate-y-4 p-4 border rounded-md border-surface-200 dark:border-surface-700 cursor-pointer',
+            'w-20 text-md font-semibold bg-opacity-70 items-center justify-between -translate-y-4 p-4 border rounded-md border-surface-200 dark:border-surface-700 cursor-pointer',
             {
               'bg-violet-500': item.label === 'Extra large',
               'bg-red-500': item.label === 'Large',
diff --git a/src/components/entities/text/TextPositionMenu.vue b/src/components/entities/text/TextPositionMenu.vue
index 5e12383..21195d7 100644
--- a/src/components/entities/text/TextPositionMenu.vue
+++ b/src/components/entities/text/TextPositionMenu.vue
@@ -15,8 +15,10 @@ 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 entityIndex = computed(() =>
+  homeEntities.value.findIndex(
+    (entity: IEntity) => entity.entity_uuid === props.entityData.entity_uuid
+  )
 );
 
 const speedDialMove = computed(() => {
@@ -72,14 +74,14 @@ const speedDialMove = computed(() => {
       state.push(left, center);
   }
   if (homeEntities.value.length > 1) {
-    if (entityIndex !== 0) {
+    if (entityIndex.value !== 0) {
       state.push({
         label: 'Up',
         icon: 'pi pi-arrow-up',
         command: () => changeOrderHomeEntity(props.entityData.entity_uuid, 'up')
       });
     }
-    if (entityIndex !== homeEntities.value.length - 1) {
+    if (entityIndex.value !== homeEntities.value.length - 1) {
       state.push({
         label: 'Down',
         icon: 'pi pi-arrow-down',
diff --git a/src/modules/PageBackgroundMenu.vue b/src/modules/PageBackgroundMenu.vue
index 4b24601..e018c78 100644
--- a/src/modules/PageBackgroundMenu.vue
+++ b/src/modules/PageBackgroundMenu.vue
@@ -16,7 +16,7 @@ const emit = defineEmits(['uploadFile', 'setDefaultBackground']);
       title="Change image"
       accept="image/*"
       style="padding-right: 135px; margin-right: -135px"
-      class="w-2py-2 -my-2 pl-2 -ml-2 opacity-0"
+      class="w-2 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>
diff --git a/src/modules/entities/DividerItem.vue b/src/modules/entities/DividerItem.vue
new file mode 100644
index 0000000..00767a4
--- /dev/null
+++ b/src/modules/entities/DividerItem.vue
@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { IDivider } from '@/app/interfaces/entities';
+
+interface Props {
+  entityData: IDivider;
+}
+defineProps<Props>();
+</script>
+
+<template>
+  <section class="entityContainer relative px-16 py-6">
+    <BaseDivider :type="entityData.divider_type" :height="entityData.divider_height" />
+    <DividerMenu :entityData="entityData" />
+  </section>
+</template>
+
+<style>
+.entityContainer .speedDial {
+  opacity: 0;
+}
+.entityContainer:hover .speedDial {
+  opacity: 100;
+}
+</style>
diff --git a/src/modules/EntitiesList.vue b/src/modules/entities/EntitiesList.vue
similarity index 100%
rename from src/modules/EntitiesList.vue
rename to src/modules/entities/EntitiesList.vue
diff --git a/src/modules/EntityItem.vue b/src/modules/entities/EntityItem.vue
similarity index 76%
rename from src/modules/EntityItem.vue
rename to src/modules/entities/EntityItem.vue
index 335914c..9c4a611 100644
--- a/src/modules/EntityItem.vue
+++ b/src/modules/entities/EntityItem.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { IEntity } from '@/app/interfaces/environment';
 import { useVModel } from '@vueuse/core';
-import type { IImage, IText } from '@/app/interfaces/entities';
+import type { IDivider, IImage, IText } from '@/app/interfaces/entities';
 interface Props {
   entity: IEntity;
 }
@@ -12,11 +12,9 @@ const entity = useVModel(props, 'entity', emit);
 
 <template>
   <div>
+    <DividerItem v-if="entity.entity_type === 'divider'" v-model:entityData="entity as IDivider" />
     <TextItem v-if="entity.entity_type === 'text'" :entityData="entity as IText" />
     <ImageItem v-if="entity.entity_type === 'image'" v-model:entityData="entity as IImage" />
-    <div class="px-16">
-      <BaseDivider />
-    </div>
   </div>
 </template>
 
diff --git a/src/modules/entities/ImageItem.vue b/src/modules/entities/ImageItem.vue
index 5cce255..09632f8 100644
--- a/src/modules/entities/ImageItem.vue
+++ b/src/modules/entities/ImageItem.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useVModel, useWindowSize } from '@vueuse/core';
+import { useElementSize, useVModel, useWindowSize } from '@vueuse/core';
 import type { IImage } from '@/app/interfaces/entities';
 import { editEntity } from '@/app/helpers';
 import { cropImage } from '@/app/helpers/images';
@@ -12,6 +12,7 @@ const emit = defineEmits(['update:entityData']);
 const entityData = useVModel(props, 'entityData', emit);
 
 const isModalCropImage = ref<boolean>(false);
+const isEditMode = ref<boolean>(false);
 const { width: windowWidth } = useWindowSize();
 
 const textContainerWidth = computed(() => {
@@ -45,9 +46,10 @@ const openCropImageModal = () => (isModalCropImage.value = true);
 </script>
 
 <template>
-  <div
+  <section
+    ref="container"
     :class="[
-      'entityContainer relative flex py-8 px-16',
+      'entityContainer relative flex py-2 px-16 transition-all',
       {
         'justify-start': entityData.entity_position === 'left',
         'justify-center': entityData.entity_position === 'center',
@@ -105,12 +107,27 @@ const openCropImageModal = () => (isModalCropImage.value = true);
           />
         </div>
       </div>
-      <ImageMenu v-model:entityData="entityData" @openCropImageModal="openCropImageModal" />
+      <div class="speedDial absolute left-2 top-0">
+        <span>Edit mode</span>
+        <ToggleSwitch v-model="isEditMode" />
+      </div>
+      <ImageMenu
+        v-show="isEditMode"
+        v-model:entityData="entityData"
+        @openCropImageModal="openCropImageModal"
+      />
     </div>
-  </div>
+  </section>
 </template>
 
-<style>
+<style scoped>
+.entityContainer {
+  min-height: min-content;
+  transition: all 0.2s ease;
+}
+.entityContainer:hover {
+  min-height: 180px;
+}
 .entityContainer .speedDial {
   opacity: 0;
 }
diff --git a/src/modules/entities/TextItem.vue b/src/modules/entities/TextItem.vue
index b8f4c92..f6e82f8 100644
--- a/src/modules/entities/TextItem.vue
+++ b/src/modules/entities/TextItem.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useTextareaAutosize } from '@vueuse/core';
+import { useElementSize, useTextareaAutosize } from '@vueuse/core';
 import type { IText } from '@/app/interfaces/entities';
 import { editEntity } from '@/app/helpers';
 
@@ -8,6 +8,7 @@ interface Props {
 }
 const props = defineProps<Props>();
 const entityData = ref(props.entityData);
+const container = ref();
 
 const editTitle = () => {
   editEntity({ ...entityData.value, title: entityData.value.title });
@@ -17,12 +18,14 @@ const editText = () => {
 };
 
 const { textarea, triggerResize } = useTextareaAutosize({ styleProp: 'minHeight' });
+const { height: containerHeight } = useElementSize(container);
 </script>
 
 <template>
-  <div
+  <section
+    ref="container"
     :class="[
-      'entityContainer relative flex py-8 px-16',
+      'entityContainer relative flex px-16',
       {
         'justify-start': entityData.entity_position === 'left',
         'justify-center': entityData.entity_position === 'center',
@@ -50,15 +53,16 @@ const { textarea, triggerResize } = useTextareaAutosize({ styleProp: 'minHeight'
           class="w-full indent-5 leading-normal resize-none outline-0"
           :style="`font-size: ${entityData.font_size}px;`"
           placeholder="Enter text..."
-          rows="3"
+          rows="1"
           spellcheck="false"
           @change="editText"
           @input="triggerResize"
         />
       </div>
+      <div v-if="containerHeight < 145" class="aggregate transition-all h-0"></div>
       <TextMenu v-model:entityData="entityData" />
     </div>
-  </div>
+  </section>
 </template>
 
 <style>
@@ -68,6 +72,10 @@ const { textarea, triggerResize } = useTextareaAutosize({ styleProp: 'minHeight'
 .entityContainer:hover .speedDial {
   opacity: 100;
 }
+.entityContainer:hover .aggregate {
+  height: 100px;
+  transition: all 0.2s ease-in-out;
+}
 input::placeholder {
   font-weight: 400;
 }
diff --git a/src/modules/entities/menu/DividerMenu.vue b/src/modules/entities/menu/DividerMenu.vue
new file mode 100644
index 0000000..68acef4
--- /dev/null
+++ b/src/modules/entities/menu/DividerMenu.vue
@@ -0,0 +1,156 @@
+<script setup lang="ts">
+import { deleteEntity, editEntity } from '@/app/helpers';
+import type { IDivider } from '@/app/interfaces/entities';
+import { useVModel } from '@vueuse/core';
+
+interface Props {
+  entityData: IDivider;
+}
+const props = defineProps<Props>();
+const emit = defineEmits(['update:entityData']);
+const entityData = useVModel(props, 'entityData', emit);
+
+const changeHeight = (height: number) => {
+  entityData.value.divider_height = height;
+  editEntity({ ...entityData.value, divider_height: height });
+};
+const changeType = (type: 'solid' | 'dashed' | 'dotted') => {
+  entityData.value.divider_type = type;
+  editEntity({ ...entityData.value, divider_type: type });
+};
+const speedDialSettings = computed(() => {
+  const state = [];
+  const solid = {
+    label: 'Solid',
+    command: () => changeType('solid')
+  };
+  const dashed = {
+    label: 'Dashed',
+    command: () => changeType('dashed')
+  };
+  const dotted = {
+    label: 'Dotted',
+    command: () => changeType('dotted')
+  };
+  if (props.entityData?.divider_type === 'solid') {
+    state.push(dashed, dotted);
+  } else if (props.entityData?.divider_type === 'dashed') {
+    state.push(solid, dotted);
+  } else {
+    state.push(solid, dashed);
+  }
+  const smallHeight = {
+    label: 'Small',
+    command: () => changeHeight(1)
+  };
+  const mediumHeight = {
+    label: 'Medium',
+    command: () => changeHeight(2)
+  };
+  const largeHeight = {
+    label: 'Large',
+    command: () => changeHeight(4)
+  };
+  const extraLargeHeight = {
+    label: 'Extra large',
+    command: () => changeHeight(8)
+  };
+  if (props.entityData?.divider_height === 1) {
+    state.push(mediumHeight, largeHeight, extraLargeHeight);
+  } else if (props.entityData?.divider_height === 2) {
+    state.push(smallHeight, largeHeight, extraLargeHeight);
+  } else if (props.entityData?.divider_height === 4) {
+    state.push(smallHeight, mediumHeight, extraLargeHeight);
+  } else {
+    state.push(smallHeight, mediumHeight, largeHeight);
+  }
+  state.push({
+    label: 'Delete',
+    icon: 'pi pi-trash',
+    command: () => deleteEntity(props.entityData.entity_uuid)
+  });
+  return state;
+});
+</script>
+
+<template>
+  <div class="speedDial absolute left-2 top-0 transition-all select-none">
+    <div class="relative z-50">
+      <SpeedDial :model="speedDialSettings" direction="right" pt:root:class="speedDialRoot size-12">
+        <template #button="{ toggleCallback }">
+          <button
+            class="border p-6 size-10 rounded-full bg-blue-500 flex items-center justify-center"
+            @click="toggleCallback"
+          >
+            <i class="pi pi-cog"></i>
+          </button>
+        </template>
+        <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',
+              {
+                'text-red-400 font-semibold': item?.icon?.includes('trash'),
+                'bg-violet-500': item.label === 'Extra large',
+                'bg-red-500': item.label === 'Large',
+                'bg-yellow-500': item.label === 'Medium',
+                'bg-green-500': item.label === 'Small'
+              }
+            ]"
+            @click="toggleCallback"
+          >
+            <span :class="item?.icon" />
+            <span v-show="item.label === 'Solid'"
+              ><svg
+                fill="#fff"
+                width="20px"
+                height="20px"
+                viewBox="0 0 24 24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path d="M23 13H1v-2h22z" />
+                <path fill="none" d="M0 0h24v24H0z" /></svg
+            ></span>
+            <span v-show="item.label === 'Dashed'">
+              <svg
+                fill="#fff"
+                width="20px"
+                height="20px"
+                viewBox="0 0 15 15"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  fill-rule="evenodd"
+                  clip-rule="evenodd"
+                  d="M0 7.5C0 7.22386 0.223858 7 0.5 7H3C3.27614 7 3.5 7.22386 3.5 7.5C3.5 7.77614 3.27614 8 3 8H0.5C0.223858 8 0 7.77614 0 7.5ZM5.75 7.5C5.75 7.22386 5.97386 7 6.25 7H8.75C9.02614 7 9.25 7.22386 9.25 7.5C9.25 7.77614 9.02614 8 8.75 8H6.25C5.97386 8 5.75 7.77614 5.75 7.5ZM12 7C11.7239 7 11.5 7.22386 11.5 7.5C11.5 7.77614 11.7239 8 12 8H14.5C14.7761 8 15 7.77614 15 7.5C15 7.22386 14.7761 7 14.5 7H12Z"
+                  fill="#fff"
+                />
+              </svg>
+            </span>
+            <span v-show="item.label === 'Dotted'">
+              <svg
+                fill="#fff"
+                width="20px"
+                height="20px"
+                viewBox="0 0 15 15"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  fill-rule="evenodd"
+                  clip-rule="evenodd"
+                  d="M1.5 6.625C1.01675 6.625 0.625 7.01675 0.625 7.5C0.625 7.98325 1.01675 8.375 1.5 8.375C1.98325 8.375 2.375 7.98325 2.375 7.5C2.375 7.01675 1.98325 6.625 1.5 6.625ZM5.5 6.625C5.01675 6.625 4.625 7.01675 4.625 7.5C4.625 7.98325 5.01675 8.375 5.5 8.375C5.98325 8.375 6.375 7.98325 6.375 7.5C6.375 7.01675 5.98325 6.625 5.5 6.625ZM9.5 6.625C9.01675 6.625 8.625 7.01675 8.625 7.5C8.625 7.98325 9.01675 8.375 9.5 8.375C9.98325 8.375 10.375 7.98325 10.375 7.5C10.375 7.01675 9.98325 6.625 9.5 6.625ZM12.625 7.5C12.625 7.01675 13.0168 6.625 13.5 6.625C13.9832 6.625 14.375 7.01675 14.375 7.5C14.375 7.98325 13.9832 8.375 13.5 8.375C13.0168 8.375 12.625 7.98325 12.625 7.5Z"
+                  fill="#fff"
+                />
+              </svg>
+            </span>
+            <span class="text-center">
+              {{ item.label }}
+            </span>
+          </div>
+        </template>
+      </SpeedDial>
+    </div>
+  </div>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/entities/menu/ImageMenu.vue b/src/modules/entities/menu/ImageMenu.vue
index fdfd6ab..6aaab3c 100644
--- a/src/modules/entities/menu/ImageMenu.vue
+++ b/src/modules/entities/menu/ImageMenu.vue
@@ -83,13 +83,13 @@ const changeFontSize = (newSize: '16' | '20' | '24' | '40' | '64') => {
   </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"
+    class="speedDial h-12 absolute left-2 top-0 translate-y-full 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"
+    class="speedDial absolute left-2 top-0 translate-y-24 transition-all select-none"
   >
     <ImagePositionMenu
       :entityData="entityData"
diff --git a/src/modules/entities/menu/TextMenu.vue b/src/modules/entities/menu/TextMenu.vue
index a795a9d..49cad98 100644
--- a/src/modules/entities/menu/TextMenu.vue
+++ b/src/modules/entities/menu/TextMenu.vue
@@ -47,10 +47,10 @@ const editParagraphWidth = (widthMode: 'full' | 'half') => {
       @removeTitle="removeTitle"
     />
   </div>
-  <div class="speedDial h-12 absolute left-2 top-1/2 -translate-y-1/2 transition-all select-none">
+  <div class="speedDial h-12 absolute left-2 top-0 translate-y-full transition-all select-none">
     <TextFontMenu :entityData="entityData" @changeFontSize="changeFontSize" />
   </div>
-  <div class="speedDial absolute left-2 bottom-0 transition-all select-none">
+  <div class="speedDial absolute left-2 top-0 translate-y-24 transition-all select-none">
     <TextPositionMenu
       :entityData="entityData"
       @editPosition="editPosition"
diff --git a/src/output.css b/src/output.css
index f2b3003..ca8b5b9 100644
--- a/src/output.css
+++ b/src/output.css
@@ -652,6 +652,10 @@ video {
   top: 0.5rem;
 }
 
+.left-12 {
+  left: 3rem;
+}
+
 .z-50 {
   z-index: 50;
 }
@@ -682,6 +686,11 @@ video {
   margin-right: auto;
 }
 
+.my-4 {
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+}
+
 .-mb-2 {
   margin-bottom: -0.5rem;
 }
@@ -746,6 +755,10 @@ video {
   display: table;
 }
 
+.hidden {
+  display: none;
+}
+
 .size-10 {
   width: 2.5rem;
   height: 2.5rem;
@@ -766,6 +779,11 @@ video {
   height: 2rem;
 }
 
+.size-4 {
+  width: 1rem;
+  height: 1rem;
+}
+
 .h-12 {
   height: 3rem;
 }
@@ -790,6 +808,18 @@ video {
   height: 5rem;
 }
 
+.h-24 {
+  height: 6rem;
+}
+
+.h-28 {
+  height: 7rem;
+}
+
+.h-0 {
+  height: 0px;
+}
+
 .max-h-\[700px\] {
   max-height: 700px;
 }
@@ -854,6 +884,16 @@ video {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
 
+.translate-y-24 {
+  --tw-translate-y: 6rem;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
+.translate-y-full {
+  --tw-translate-y: 100%;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+}
+
 .transform {
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
 }
@@ -1094,6 +1134,16 @@ video {
   padding-bottom: 2rem;
 }
 
+.py-16 {
+  padding-top: 4rem;
+  padding-bottom: 4rem;
+}
+
+.py-6 {
+  padding-top: 1.5rem;
+  padding-bottom: 1.5rem;
+}
+
 .pl-0 {
   padding-left: 0px;
 }
@@ -1233,6 +1283,14 @@ video {
   transition-duration: 150ms;
 }
 
+.transition {
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
+  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
 .duration-300 {
   transition-duration: 300ms;
 }
diff --git a/src/shared/BaseDivider.vue b/src/shared/BaseDivider.vue
index 8b560d7..4c9e782 100644
--- a/src/shared/BaseDivider.vue
+++ b/src/shared/BaseDivider.vue
@@ -1,7 +1,13 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+interface Props {
+  height?: number;
+  type?: 'solid' | 'dashed' | 'dotted';
+}
+defineProps<Props>();
+</script>
 
 <template>
-  <div style="height: 1px" class="w-full bg-gray-600"></div>
+  <div :style="`border-bottom: ${height || 1}px ${type || 'solid'} #6b7280`" class="w-full"></div>
 </template>
 
 <style scoped></style>
diff --git a/vue/Knob.vue b/vue/Knob.vue
index ca3e9c0..526fef4 100644
--- a/vue/Knob.vue
+++ b/vue/Knob.vue
@@ -22,18 +22,18 @@ const knobTheme = computed(() => {
 <template>
   <div class="card flex justify-center">
     <Knob
-        v-model="sliderValue"
-        :valueColor="knobTheme"
-        rangeColor="black"
-        :textColor="knobTheme"
-        step="1"
-        min="0"
-        max="10"
-        size="50"
-        readonly
-        :pt:text="{ style: 'font-weight: bold; font-size: 28px' }"
+      v-model="sliderValue"
+      :valueColor="knobTheme"
+      rangeColor="black"
+      :textColor="knobTheme"
+      step="1"
+      min="0"
+      max="10"
+      size="50"
+      readonly
+      :pt:text="{ style: 'font-weight: bold; font-size: 28px' }"
     />
-    <Slider min="1" max="10" v-model="sliderValue" class="w-112" />
+    <Slider v-model="sliderValue" min="1" max="10" class="w-112" />
   </div>
 </template>
 
-- 
GitLab


From c2bf5973a69636509ffeb9c24d5ce560c7e3b0c8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=94=D0=BC=D0=B8=D1=82=D1=80=D0=B8=D0=B9=20=D0=9C=D0=B0?=
 =?UTF-8?q?=D0=BB=D1=8E=D0=B3=D0=B8=D0=BD?= <d.malygin@iqdev.digital>
Date: Sat, 31 Aug 2024 22:19:22 +0500
Subject: [PATCH 2/2] finished with divider and fix some issues

---
 src/app/components.d.ts                       |   5 +-
 src/app/helpers/index.ts                      |   8 +-
 src/app/main.ts                               |  26 ++-
 src/app/stores/data.ts                        |   1 +
 src/app/stores/websocket.ts                   |   4 +-
 src/components/CreateEntityMenu.vue           |  10 +-
 src/components/entities/share/EntityTitle.vue |   6 +-
 .../entities/share/TextFontMenu.vue           |   2 +-
 src/modules/PageHeader.vue                    |  26 +++
 src/modules/TelegramSection.vue               |  25 +++
 src/modules/entities/DividerItem.vue          |   3 +-
 src/modules/entities/EntitiesList.vue         |   2 +
 src/modules/entities/EntityItem.vue           |  19 +-
 src/modules/entities/ImageItem.vue            |  39 ++--
 src/modules/entities/TextItem.vue             |  44 ++++-
 src/modules/entities/menu/DividerMenu.vue     |  26 ++-
 src/modules/entities/menu/ImageMenu.vue       |  35 ++--
 src/output.css                                | 176 +++---------------
 src/pages/HomePage.vue                        |  32 +---
 19 files changed, 250 insertions(+), 239 deletions(-)
 create mode 100644 src/modules/PageHeader.vue
 create mode 100644 src/modules/TelegramSection.vue

diff --git a/src/app/components.d.ts b/src/app/components.d.ts
index 2bef6d0..df56529 100644
--- a/src/app/components.d.ts
+++ b/src/app/components.d.ts
@@ -30,13 +30,14 @@ declare module 'vue' {
     ImageSizeMenu: typeof import('./../components/entities/image/ImageSizeMenu.vue')['default']
     ImageStateMenu: typeof import('./../components/entities/image/ImageStateMenu.vue')['default']
     LogoAndLabel: typeof import('./../components/LogoAndLabel.vue')['default']
+    page: typeof import('./../modules/Home page.vue')['default']
     PageBackgroundMenu: typeof import('./../modules/PageBackgroundMenu.vue')['default']
+    PageHeader: typeof import('./../modules/PageHeader.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     SheetPage: typeof import('./../pages/[uuid]/SheetPage.vue')['default']
     SpeedDial: typeof import('primevue/speeddial')['default']
-    Splitter: typeof import('primevue/splitter')['default']
-    SplitterPanel: typeof import('primevue/splitterpanel')['default']
+    TelegramSection: typeof import('./../modules/TelegramSection.vue')['default']
     TextFontMenu: typeof import('./../components/entities/share/TextFontMenu.vue')['default']
     TextItem: typeof import('./../modules/entities/TextItem.vue')['default']
     TextMenu: typeof import('./../modules/entities/menu/TextMenu.vue')['default']
diff --git a/src/app/helpers/index.ts b/src/app/helpers/index.ts
index 252d449..5bb4a9d 100644
--- a/src/app/helpers/index.ts
+++ b/src/app/helpers/index.ts
@@ -120,25 +120,25 @@ export const getImageSpeedDialSizeBiggerLabelsToRemove = (entity: IImage) => {
   }
   if (
     initialImageWidth >= 960 ||
-    initialImageHeight >= 960 ||
+    initialImageHeight >= 560 ||
     (initialImageWidth >= 640 && entity.text_position)
   ) {
     elementsLabelsToRemove.push('x1.25');
     if (
       initialImageWidth >= 800 ||
-      initialImageHeight >= 800 ||
+      initialImageHeight >= 467 ||
       (initialImageWidth >= 533 && entity.text_position)
     ) {
       elementsLabelsToRemove.push('x1.5');
       if (
         initialImageWidth >= 685 ||
-        initialImageHeight >= 685 ||
+        initialImageHeight >= 400 ||
         (initialImageWidth >= 457 && entity.text_position)
       ) {
         elementsLabelsToRemove.push('x1.75');
         if (
           initialImageWidth >= 600 ||
-          initialImageHeight >= 600 ||
+          initialImageHeight >= 350 ||
           (initialImageWidth >= 400 && entity.text_position)
         ) {
           elementsLabelsToRemove.push('x2');
diff --git a/src/app/main.ts b/src/app/main.ts
index b61cec8..dd3a5c7 100644
--- a/src/app/main.ts
+++ b/src/app/main.ts
@@ -6,14 +6,34 @@ import PrimeVue from 'primevue/config';
 import App from './App.vue';
 import router from './router';
 import Aura from '@primevue/themes/aura';
+import { definePreset } from '@primevue/themes';
 
 const app = createApp(App);
-
+const theme = 'sky';
+const MyPreset = definePreset(Aura, {
+  semantic: {
+    primary: {
+      50: `{${theme}.50}`,
+      100: `{${theme}.100}`,
+      200: `{${theme}.200}`,
+      300: `{${theme}.300}`,
+      400: `{${theme}.400}`,
+      500: `{${theme}.500}`,
+      600: `{${theme}.600}`,
+      700: `{${theme}.700}`,
+      800: `{${theme}.800}`,
+      900: `{${theme}.900}`,
+      950: `{${theme}.950}`
+    }
+  }
+});
 app
   .use(PrimeVue, {
     theme: {
-      preset: Aura,
-      options: {}
+      preset: MyPreset,
+      options: {
+        // darkModeSelector: '.darkModeToggle'
+      }
     }
   })
   .use(createPinia())
diff --git a/src/app/stores/data.ts b/src/app/stores/data.ts
index c19d389..0e3b2e9 100644
--- a/src/app/stores/data.ts
+++ b/src/app/stores/data.ts
@@ -57,6 +57,7 @@ export const useDataStore = defineStore('dataStore', () => {
 
   function editHomeEntities(newState: IEntity) {
     homeEntities.value = newState;
+    console.log('homeEntities.value', homeEntities.value);
   }
 
   function setHomeEntities(entities: IEntity[]) {
diff --git a/src/app/stores/websocket.ts b/src/app/stores/websocket.ts
index 6135d33..1cc5d24 100644
--- a/src/app/stores/websocket.ts
+++ b/src/app/stores/websocket.ts
@@ -122,7 +122,9 @@ export const useWebsocketStore = defineStore('websocketStore', () => {
 
   watch([filesBufferLength, homeEntities], () => {
     if (
-      (homeEntities.value.length && filesBufferLength.value === imageEntitiesCount.value) ||
+      (homeEntities.value.length &&
+        filesBufferLength.value === imageEntitiesCount.value &&
+        imageEntitiesCount.value) ||
       (isInitialAddUrlsToImageEntitiesFinished.value && filesBufferLength.value)
     ) {
       const entitiesAddedUrls = addUrlsToImageEntities(homeEntities.value);
diff --git a/src/components/CreateEntityMenu.vue b/src/components/CreateEntityMenu.vue
index 6c5db93..e8a6993 100644
--- a/src/components/CreateEntityMenu.vue
+++ b/src/components/CreateEntityMenu.vue
@@ -27,10 +27,16 @@ const addImage = async (files: FileList) => {
     const buffer = await blob.arrayBuffer();
     const { width: windowWidth } = useWindowSize();
     const maxWidth = windowWidth.value - 128;
+    const maxHeight = 700;
     if (image.width > maxWidth) {
-      image.height = Math.floor(maxWidth / image.width) * image.height;
+      image.height = Math.floor((maxWidth / image.width) * image.height);
       image.width = maxWidth;
     }
+    if (image.height > maxHeight) {
+      image.width = Math.floor((maxHeight / image.height) * image.width);
+      console.log('image.width', image.width);
+      image.height = maxHeight;
+    }
     emit('createEntity', {
       entity_type: 'image',
       entity_uuid: imageUuid,
@@ -112,7 +118,7 @@ const speedDialItems = ref([
   <SpeedDial
     :model="speedDialItems"
     direction="right"
-    :button-props="{ severity: 'info', rounded: true }"
+    :button-props="{ severity: 'primary', rounded: true }"
     style="position: absolute; left: 5%; top: 0"
   >
     <template #item="{ item, toggleCallback }">
diff --git a/src/components/entities/share/EntityTitle.vue b/src/components/entities/share/EntityTitle.vue
index fccd97c..7296c31 100644
--- a/src/components/entities/share/EntityTitle.vue
+++ b/src/components/entities/share/EntityTitle.vue
@@ -5,6 +5,7 @@ import { useVModel } from '@vueuse/core';
 interface Props {
   title?: string | null;
   entityData: IEntity;
+  isEditMode: boolean;
 }
 const props = defineProps<Props>();
 const emit = defineEmits(['update:title', 'editTitle']);
@@ -20,10 +21,11 @@ const title = useVModel(props, 'title', emit);
     placeholder="Enter title..."
     :style="`font-size: ${+entityData.font_size + 10}px`"
     :class="[
-      'w-full my-4 font-bold pl-2',
+      'w-full mb-4 font-bold pl-2',
       {
         'text-center': entityData.entity_title_position === 'center',
-        'text-end': entityData.entity_title_position === 'right'
+        'text-end': entityData.entity_title_position === 'right',
+        'pointer-events-none': !isEditMode
       }
     ]"
     @change="$emit('editTitle')"
diff --git a/src/components/entities/share/TextFontMenu.vue b/src/components/entities/share/TextFontMenu.vue
index 24cfbbe..a75bb2c 100644
--- a/src/components/entities/share/TextFontMenu.vue
+++ b/src/components/entities/share/TextFontMenu.vue
@@ -61,7 +61,7 @@ const speedDialSizeFont = computed(() => {
       <template #item="{ item, toggleCallback }">
         <div
           :class="[
-            'w-20 text-md font-semibold bg-opacity-70 items-center justify-between -translate-y-4 p-4 border rounded-md border-surface-200 dark:border-surface-700 cursor-pointer',
+            'text-md font-semibold bg-opacity-70 -translate-y-4 p-4 border rounded-md border-surface-200 dark:border-surface-700 cursor-pointer',
             {
               'bg-violet-500': item.label === 'Extra large',
               'bg-red-500': item.label === 'Large',
diff --git a/src/modules/PageHeader.vue b/src/modules/PageHeader.vue
new file mode 100644
index 0000000..a6655c6
--- /dev/null
+++ b/src/modules/PageHeader.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { useVModel } from '@vueuse/core';
+
+interface Props {
+  title: string;
+  isEditMode: boolean;
+}
+const props = defineProps<Props>();
+const emit = defineEmits(['update:isEditMode']);
+const isEditMode = useVModel(props, 'isEditMode', emit);
+</script>
+
+<template>
+  <header class="fixed z-50 w-full bg-black">
+    <h1 class="text-center text-5xl font-semibold py-4">{{ title }}</h1>
+    <button
+      class="absolute right-6 top-6 -my-2 py-2 flex items-center justify-center gap-2"
+      @click.prevent="isEditMode = !isEditMode"
+    >
+      <span class="font-medium">Edit mode</span>
+      <ToggleSwitch v-model="isEditMode" />
+    </button>
+  </header>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/TelegramSection.vue b/src/modules/TelegramSection.vue
new file mode 100644
index 0000000..6ad34c6
--- /dev/null
+++ b/src/modules/TelegramSection.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts"></script>
+
+<template>
+  <section
+    class="telegramContainer fixed z-50 bottom-8 right-8 cursor-pointer border-3 border-solid border-white rounded-full transition-all duration-300"
+  >
+    <p
+      class="telegramText absolute w-96 h-20 p-4 text-white font-medium bg-black bg-opacity-70 rounded-full transition-all duration-300 pointer-events-none"
+    >
+      Хотите написать жалобу, есть пожелания или вопросы? Напишите нам!
+    </p>
+    <a href="https://t.me/shelfNoteBot" target="_blank">
+      <div
+        class="size-14 rounded-full"
+        style="
+          background-image: url('/Telegram.png');
+          background-size: contain;
+          background-color: white;
+        "
+      ></div>
+    </a>
+  </section>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/entities/DividerItem.vue b/src/modules/entities/DividerItem.vue
index 00767a4..cd1ee2a 100644
--- a/src/modules/entities/DividerItem.vue
+++ b/src/modules/entities/DividerItem.vue
@@ -3,6 +3,7 @@ import type { IDivider } from '@/app/interfaces/entities';
 
 interface Props {
   entityData: IDivider;
+  isEditMode: boolean;
 }
 defineProps<Props>();
 </script>
@@ -10,7 +11,7 @@ defineProps<Props>();
 <template>
   <section class="entityContainer relative px-16 py-6">
     <BaseDivider :type="entityData.divider_type" :height="entityData.divider_height" />
-    <DividerMenu :entityData="entityData" />
+    <DividerMenu v-if="isEditMode" :entityData="entityData" />
   </section>
 </template>
 
diff --git a/src/modules/entities/EntitiesList.vue b/src/modules/entities/EntitiesList.vue
index 0dd6065..0742400 100644
--- a/src/modules/entities/EntitiesList.vue
+++ b/src/modules/entities/EntitiesList.vue
@@ -3,6 +3,7 @@ import type { IEntity } from '@/app/interfaces/environment';
 
 interface Props {
   entities: IEntity[];
+  isEditMode: boolean;
 }
 defineProps<Props>();
 const emit = defineEmits(['createEntity']);
@@ -17,6 +18,7 @@ const createEntity = (entity: IEntity) => {
     v-for="entitiesItem of entities"
     :key="entitiesItem.entity_uuid"
     :entity="entitiesItem"
+    :isEditMode="isEditMode"
   />
   <div class="relative mt-2">
     <CreateEntityMenu @createEntity="createEntity" />
diff --git a/src/modules/entities/EntityItem.vue b/src/modules/entities/EntityItem.vue
index 9c4a611..e464930 100644
--- a/src/modules/entities/EntityItem.vue
+++ b/src/modules/entities/EntityItem.vue
@@ -4,6 +4,7 @@ import { useVModel } from '@vueuse/core';
 import type { IDivider, IImage, IText } from '@/app/interfaces/entities';
 interface Props {
   entity: IEntity;
+  isEditMode: boolean;
 }
 const props = defineProps<Props>();
 const emit = defineEmits(['update:entityData']);
@@ -12,9 +13,21 @@ const entity = useVModel(props, 'entity', emit);
 
 <template>
   <div>
-    <DividerItem v-if="entity.entity_type === 'divider'" v-model:entityData="entity as IDivider" />
-    <TextItem v-if="entity.entity_type === 'text'" :entityData="entity as IText" />
-    <ImageItem v-if="entity.entity_type === 'image'" v-model:entityData="entity as IImage" />
+    <DividerItem
+      v-if="entity.entity_type === 'divider'"
+      v-model:entityData="entity as IDivider"
+      :isEditMode="isEditMode"
+    />
+    <TextItem
+      v-if="entity.entity_type === 'text'"
+      :entityData="entity as IText"
+      :isEditMode="isEditMode"
+    />
+    <ImageItem
+      v-if="entity.entity_type === 'image'"
+      v-model:entityData="entity as IImage"
+      :isEditMode="isEditMode"
+    />
   </div>
 </template>
 
diff --git a/src/modules/entities/ImageItem.vue b/src/modules/entities/ImageItem.vue
index 09632f8..1d5fb07 100644
--- a/src/modules/entities/ImageItem.vue
+++ b/src/modules/entities/ImageItem.vue
@@ -1,18 +1,18 @@
 <script setup lang="ts">
-import { useElementSize, useVModel, useWindowSize } from '@vueuse/core';
+import { useVModel, useWindowSize } from '@vueuse/core';
 import type { IImage } from '@/app/interfaces/entities';
 import { editEntity } from '@/app/helpers';
 import { cropImage } from '@/app/helpers/images';
 
 interface Props {
   entityData: IImage;
+  isEditMode: boolean;
 }
 const props = defineProps<Props>();
 const emit = defineEmits(['update:entityData']);
 const entityData = useVModel(props, 'entityData', emit);
 
 const isModalCropImage = ref<boolean>(false);
-const isEditMode = ref<boolean>(false);
 const { width: windowWidth } = useWindowSize();
 
 const textContainerWidth = computed(() => {
@@ -49,7 +49,7 @@ const openCropImageModal = () => (isModalCropImage.value = true);
   <section
     ref="container"
     :class="[
-      'entityContainer relative flex py-2 px-16 transition-all',
+      'entityContainer relative flex px-16 transition-all',
       {
         'justify-start': entityData.entity_position === 'left',
         'justify-center': entityData.entity_position === 'center',
@@ -66,6 +66,7 @@ const openCropImageModal = () => (isModalCropImage.value = true);
       <EntityTitle
         v-model:title="entityData.title"
         :entityData="entityData"
+        :isEditMode="isEditMode"
         @editTitle="editTitle"
       />
       <div style="gap: 32px" class="flex" :style="`height: ${entityData.image_height}px`">
@@ -87,7 +88,7 @@ const openCropImageModal = () => (isModalCropImage.value = true);
             class="object-contain order-1"
           />
           <div class="speedDialSize absolute left-0 top-0 transition-all select-none">
-            <ImageSizeMenu :entityData="entityData" @scaleImage="scaleImage" />
+            <ImageSizeMenu v-if="isEditMode" :entityData="entityData" @scaleImage="scaleImage" />
           </div>
         </div>
         <div
@@ -98,7 +99,12 @@ const openCropImageModal = () => (isModalCropImage.value = true);
           <textarea
             ref="textarea"
             v-model="entityData.text"
-            class="w-full indent-5 leading-normal overflow-auto resize-none outline-0 order-2"
+            :class="[
+              'w-full indent-5 leading-normal overflow-auto resize-none outline-0 order-2',
+              {
+                'pointer-events-none': !isEditMode
+              }
+            ]"
             placeholder="Enter text..."
             rows="7"
             :style="`font-size: ${entityData.font_size}px; height: ${entityData.image_height}px;`"
@@ -107,26 +113,29 @@ const openCropImageModal = () => (isModalCropImage.value = true);
           />
         </div>
       </div>
-      <div class="speedDial absolute left-2 top-0">
-        <span>Edit mode</span>
-        <ToggleSwitch v-model="isEditMode" />
-      </div>
       <ImageMenu
-        v-show="isEditMode"
+        v-if="isEditMode"
         v-model:entityData="entityData"
         @openCropImageModal="openCropImageModal"
       />
+      <div
+        v-if="!entityData?.title && entityData.image_height < 137"
+        class="aggregateHigh h-0 transition-all"
+      ></div>
+      <div
+        v-if="!entityData?.title && entityData.image_height >= 137 && entityData.image_height < 167"
+        class="aggregateShort h-0 transition-all"
+      ></div>
     </div>
   </section>
 </template>
 
 <style scoped>
-.entityContainer {
-  min-height: min-content;
-  transition: all 0.2s ease;
+.entityContainer:hover .aggregateHigh {
+  height: 65px;
 }
-.entityContainer:hover {
-  min-height: 180px;
+.entityContainer:hover .aggregateShort {
+  height: 30px;
 }
 .entityContainer .speedDial {
   opacity: 0;
diff --git a/src/modules/entities/TextItem.vue b/src/modules/entities/TextItem.vue
index f6e82f8..7abd470 100644
--- a/src/modules/entities/TextItem.vue
+++ b/src/modules/entities/TextItem.vue
@@ -5,6 +5,7 @@ import { editEntity } from '@/app/helpers';
 
 interface Props {
   entityData: IText;
+  isEditMode: boolean;
 }
 const props = defineProps<Props>();
 const entityData = ref(props.entityData);
@@ -18,12 +19,11 @@ const editText = () => {
 };
 
 const { textarea, triggerResize } = useTextareaAutosize({ styleProp: 'minHeight' });
-const { height: containerHeight } = useElementSize(container);
+const { height: textareaHeight } = useElementSize(textarea);
 </script>
 
 <template>
   <section
-    ref="container"
     :class="[
       'entityContainer relative flex px-16',
       {
@@ -44,13 +44,19 @@ const { height: containerHeight } = useElementSize(container);
       <EntityTitle
         v-model:title="entityData.title"
         :entityData="entityData"
+        :isEditMode="isEditMode"
         @editTitle="editTitle"
       />
       <div class="relative leading-none">
         <textarea
           ref="textarea"
           v-model="entityData.text"
-          class="w-full indent-5 leading-normal resize-none outline-0"
+          :class="[
+            'w-full indent-5 leading-normal resize-none outline-0',
+            {
+              'pointer-events-none': !isEditMode
+            }
+          ]"
           :style="`font-size: ${entityData.font_size}px;`"
           placeholder="Enter text..."
           rows="1"
@@ -59,8 +65,25 @@ const { height: containerHeight } = useElementSize(container);
           @input="triggerResize"
         />
       </div>
-      <div v-if="containerHeight < 145" class="aggregate transition-all h-0"></div>
-      <TextMenu v-model:entityData="entityData" />
+      <div
+        v-if="!entityData?.title && textareaHeight < 87 && isEditMode"
+        class="aggregateHigh transition-all h-0"
+      ></div>
+      <div
+        v-if="
+          (!entityData?.title && textareaHeight >= 87 && textareaHeight < 132 && isEditMode) ||
+          (entityData?.title && textareaHeight < 65 && isEditMode)
+        "
+        class="aggregateMedium transition-all h-0"
+      ></div>
+      <div
+        v-if="
+          (!entityData?.title && textareaHeight >= 132 && textareaHeight < 167 && isEditMode) ||
+          (entityData?.title && textareaHeight >= 65 && textareaHeight < 100 && isEditMode)
+        "
+        class="aggregateShort transition-all h-0"
+      ></div>
+      <TextMenu v-if="isEditMode" v-model:entityData="entityData" />
     </div>
   </section>
 </template>
@@ -72,9 +95,14 @@ const { height: containerHeight } = useElementSize(container);
 .entityContainer:hover .speedDial {
   opacity: 100;
 }
-.entityContainer:hover .aggregate {
-  height: 100px;
-  transition: all 0.2s ease-in-out;
+.entityContainer:hover .aggregateHigh {
+  height: 140px;
+}
+.entityContainer:hover .aggregateMedium {
+  height: 80px;
+}
+.entityContainer:hover .aggregateShort {
+  height: 35px;
 }
 input::placeholder {
   font-weight: 400;
diff --git a/src/modules/entities/menu/DividerMenu.vue b/src/modules/entities/menu/DividerMenu.vue
index 68acef4..212355d 100644
--- a/src/modules/entities/menu/DividerMenu.vue
+++ b/src/modules/entities/menu/DividerMenu.vue
@@ -1,7 +1,9 @@
 <script setup lang="ts">
-import { deleteEntity, editEntity } from '@/app/helpers';
+import { changeOrderHomeEntity, deleteEntity, editEntity } from '@/app/helpers';
 import type { IDivider } from '@/app/interfaces/entities';
 import { useVModel } from '@vueuse/core';
+import type { IEntity } from '@/app/interfaces/environment';
+import { useDataStore } from '@/app/stores/data';
 
 interface Props {
   entityData: IDivider;
@@ -10,6 +12,14 @@ const props = defineProps<Props>();
 const emit = defineEmits(['update:entityData']);
 const entityData = useVModel(props, 'entityData', emit);
 
+const dataStore = useDataStore();
+const homeEntities = computed(() => dataStore.homeEntities);
+const entityIndex = computed(() =>
+  homeEntities.value.findIndex(
+    (entity: IEntity) => entity.entity_uuid === props.entityData.entity_uuid
+  )
+);
+
 const changeHeight = (height: number) => {
   entityData.value.divider_height = height;
   editEntity({ ...entityData.value, divider_height: height });
@@ -64,6 +74,20 @@ const speedDialSettings = computed(() => {
   } else {
     state.push(smallHeight, mediumHeight, largeHeight);
   }
+  if (entityIndex.value !== 0) {
+    state.push({
+      label: 'Up',
+      icon: 'pi pi-arrow-up',
+      command: () => changeOrderHomeEntity(props.entityData.entity_uuid, 'up')
+    });
+  }
+  if (entityIndex.value !== homeEntities.value.length - 1) {
+    state.push({
+      label: 'Down',
+      icon: 'pi pi-arrow-down',
+      command: () => changeOrderHomeEntity(props.entityData.entity_uuid, 'down')
+    });
+  }
   state.push({
     label: 'Delete',
     icon: 'pi pi-trash',
diff --git a/src/modules/entities/menu/ImageMenu.vue b/src/modules/entities/menu/ImageMenu.vue
index 6aaab3c..3343ecb 100644
--- a/src/modules/entities/menu/ImageMenu.vue
+++ b/src/modules/entities/menu/ImageMenu.vue
@@ -70,9 +70,10 @@ const changeFontSize = (newSize: '16' | '20' | '24' | '40' | '64') => {
 </script>
 
 <template>
-  <div class="speedDial absolute left-2 top-0 transition-all select-none">
+  <section style="height: 146px" class="speedDial absolute left-2 top-0 transition-all select-none">
     <ImageStateMenu
       :entityData="entityData"
+      class="h-12"
       @deleteEntity="deleteEntity"
       @addTitle="addTitle"
       @removeTitle="removeTitle"
@@ -80,25 +81,19 @@ const changeFontSize = (newSize: '16' | '20' | '24' | '40' | '64') => {
       @removeText="removeText"
       @openCropImageModal="$emit('openCropImageModal')"
     />
-  </div>
-  <div
-    v-if="entityData?.text || entityData?.title"
-    class="speedDial h-12 absolute left-2 top-0 translate-y-full transition-all select-none"
-  >
-    <TextFontMenu :entityData="entityData" @changeFontSize="changeFontSize" />
-  </div>
-  <div
-    v-if="homeEntities.length > 1"
-    class="speedDial absolute left-2 top-0 translate-y-24 transition-all select-none"
-  >
-    <ImagePositionMenu
-      :entityData="entityData"
-      @editPosition="editPosition"
-      @editTitlePosition="editTitlePosition"
-      @editTextPosition="editTextPosition"
-      @editParagraphWidth="editParagraphWidth"
-    />
-  </div>
+    <div v-if="entityData?.text || entityData?.title">
+      <TextFontMenu :entityData="entityData" class="h-12" @changeFontSize="changeFontSize" />
+    </div>
+    <div v-if="homeEntities.length > 1">
+      <ImagePositionMenu
+        :entityData="entityData"
+        @editPosition="editPosition"
+        @editTitlePosition="editTitlePosition"
+        @editTextPosition="editTextPosition"
+        @editParagraphWidth="editParagraphWidth"
+      />
+    </div>
+  </section>
 </template>
 
 <style scoped></style>
diff --git a/src/output.css b/src/output.css
index ca8b5b9..23f9de3 100644
--- a/src/output.css
+++ b/src/output.css
@@ -1,5 +1,5 @@
 /*
-! tailwindcss v3.4.7 | MIT License | https://tailwindcss.com
+! tailwindcss v3.4.10 | MIT License | https://tailwindcss.com
 */
 
 /*
@@ -612,10 +612,6 @@ video {
   position: relative;
 }
 
-.bottom-0 {
-  bottom: 0px;
-}
-
 .bottom-8 {
   bottom: 2rem;
 }
@@ -632,6 +628,10 @@ video {
   right: 0.5rem;
 }
 
+.right-6 {
+  right: 1.5rem;
+}
+
 .right-8 {
   right: 2rem;
 }
@@ -640,10 +640,6 @@ video {
   top: 0px;
 }
 
-.top-1\/2 {
-  top: 50%;
-}
-
 .top-16 {
   top: 4rem;
 }
@@ -652,8 +648,8 @@ video {
   top: 0.5rem;
 }
 
-.left-12 {
-  left: 3rem;
+.top-6 {
+  top: 1.5rem;
 }
 
 .z-50 {
@@ -686,9 +682,9 @@ video {
   margin-right: auto;
 }
 
-.my-4 {
-  margin-top: 1rem;
-  margin-bottom: 1rem;
+.-mx-2 {
+  margin-left: -0.5rem;
+  margin-right: -0.5rem;
 }
 
 .-mb-2 {
@@ -699,10 +695,6 @@ video {
   margin-left: -0.5rem;
 }
 
-.-mr-\[135px\] {
-  margin-right: -135px;
-}
-
 .mb-4 {
   margin-bottom: 1rem;
 }
@@ -715,10 +707,6 @@ video {
   margin-left: 0px;
 }
 
-.ml-\[58px\] {
-  margin-left: 58px;
-}
-
 .ml-auto {
   margin-left: auto;
 }
@@ -755,10 +743,6 @@ video {
   display: table;
 }
 
-.hidden {
-  display: none;
-}
-
 .size-10 {
   width: 2.5rem;
   height: 2.5rem;
@@ -779,57 +763,20 @@ video {
   height: 2rem;
 }
 
-.size-4 {
-  width: 1rem;
-  height: 1rem;
+.h-0 {
+  height: 0px;
 }
 
 .h-12 {
   height: 3rem;
 }
 
-.h-4 {
-  height: 1rem;
-}
-
-.h-\[1px\] {
-  height: 1px;
-}
-
-.h-full {
-  height: 100%;
-}
-
-.h-16 {
-  height: 4rem;
-}
-
 .h-20 {
   height: 5rem;
 }
 
-.h-24 {
-  height: 6rem;
-}
-
-.h-28 {
-  height: 7rem;
-}
-
-.h-0 {
-  height: 0px;
-}
-
-.max-h-\[700px\] {
-  max-height: 700px;
-}
-
-.min-h-\[100px\] {
-  min-height: 100px;
-}
-
-.min-h-\[200px\] {
-  min-height: 200px;
+.h-full {
+  height: 100%;
 }
 
 .w-1\/2 {
@@ -860,15 +807,6 @@ video {
   width: 100%;
 }
 
-.min-w-\[100px\] {
-  min-width: 100px;
-}
-
-.-translate-y-1\/2 {
-  --tw-translate-y: -50%;
-  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
 .-translate-y-2 {
   --tw-translate-y: -0.5rem;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -906,10 +844,6 @@ video {
   cursor: pointer;
 }
 
-.cursor-none {
-  cursor: none;
-}
-
 .select-none {
   -webkit-user-select: none;
      -moz-user-select: none;
@@ -956,10 +890,6 @@ video {
   gap: 1rem;
 }
 
-.gap-\[32px\] {
-  gap: 32px;
-}
-
 .overflow-auto {
   overflow: auto;
 }
@@ -1036,11 +966,6 @@ video {
   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));
-}
-
 .bg-green-500 {
   --tw-bg-opacity: 1;
   background-color: rgb(34 197 94 / var(--tw-bg-opacity));
@@ -1076,10 +1001,6 @@ video {
   background-color: rgb(234 179 8 / var(--tw-bg-opacity));
 }
 
-.bg-opacity-50 {
-  --tw-bg-opacity: 0.5;
-}
-
 .bg-opacity-70 {
   --tw-bg-opacity: 0.7;
 }
@@ -1088,10 +1009,6 @@ video {
   --tw-bg-opacity: 0.8;
 }
 
-.bg-opacity-90 {
-  --tw-bg-opacity: 0.9;
-}
-
 .object-contain {
   -o-object-fit: contain;
      object-fit: contain;
@@ -1129,21 +1046,16 @@ video {
   padding-bottom: 1rem;
 }
 
-.py-8 {
-  padding-top: 2rem;
-  padding-bottom: 2rem;
-}
-
-.py-16 {
-  padding-top: 4rem;
-  padding-bottom: 4rem;
-}
-
 .py-6 {
   padding-top: 1.5rem;
   padding-bottom: 1.5rem;
 }
 
+.px-2 {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+
 .pl-0 {
   padding-left: 0px;
 }
@@ -1156,10 +1068,6 @@ video {
   padding-right: 0.5rem;
 }
 
-.pr-\[135px\] {
-  padding-right: 135px;
-}
-
 .pt-4 {
   padding-top: 1rem;
 }
@@ -1205,14 +1113,14 @@ video {
   font-weight: 700;
 }
 
-.font-semibold {
-  font-weight: 600;
-}
-
 .font-medium {
   font-weight: 500;
 }
 
+.font-semibold {
+  font-weight: 600;
+}
+
 .leading-none {
   line-height: 1;
 }
@@ -1241,21 +1149,6 @@ video {
   color: rgb(59 130 246 / var(--tw-text-opacity));
 }
 
-.text-blue-300 {
-  --tw-text-opacity: 1;
-  color: rgb(147 197 253 / var(--tw-text-opacity));
-}
-
-.text-blue-400 {
-  --tw-text-opacity: 1;
-  color: rgb(96 165 250 / var(--tw-text-opacity));
-}
-
-.text-sky-400 {
-  --tw-text-opacity: 1;
-  color: rgb(56 189 248 / var(--tw-text-opacity));
-}
-
 .opacity-0 {
   opacity: 0;
 }
@@ -1268,11 +1161,6 @@ video {
   outline-width: 0px;
 }
 
-.brightness-100 {
-  --tw-brightness: brightness(1);
-  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-}
-
 .filter {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
@@ -1283,14 +1171,6 @@ video {
   transition-duration: 150ms;
 }
 
-.transition {
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 150ms;
-}
-
 .duration-300 {
   transition-duration: 300ms;
 }
@@ -1302,14 +1182,4 @@ video {
 .hover\:text-gray-300:hover {
   --tw-text-opacity: 1;
   color: rgb(209 213 219 / var(--tw-text-opacity));
-}
-
-.hover\:brightness-75:hover {
-  --tw-brightness: brightness(.75);
-  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-}
-
-.hover\:brightness-100:hover {
-  --tw-brightness: brightness(1);
-  filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
\ No newline at end of file
diff --git a/src/pages/HomePage.vue b/src/pages/HomePage.vue
index 007992a..31626c4 100644
--- a/src/pages/HomePage.vue
+++ b/src/pages/HomePage.vue
@@ -6,6 +6,7 @@ import { useWebsocketStore } from '@/app/stores/websocket';
 import type { IEntity } from '@/app/interfaces/environment';
 import type { IImageMainInfo } from '@/app/interfaces/index.ts';
 import { createHomeEntity, fetchForHomeEntities, setDefaultHomeBackground } from '@/app/helpers';
+import TelegramSection from '@/modules/TelegramSection.vue';
 
 const dataStore = useDataStore();
 const interfaceStore = useInterfaceStore();
@@ -17,6 +18,7 @@ const backgroundUrl = computed<string>(() => interfaceStore.homeBackground);
 const defaultBackgroundUrl = computed<string>(() => interfaceStore.defaultHomeBackground);
 const isFetchedForBackground = computed(() => interfaceStore.isFetchedForBackground);
 
+const isEditMode = ref<boolean>();
 const isModalUploadFile = ref<boolean>(false);
 const backgroundImageInfo = ref<IImageMainInfo>({
   imageUrl: backgroundUrl.value,
@@ -63,28 +65,8 @@ const saveImage = (finalImageUrl: string) => {
 </script>
 
 <template>
-  <header>
-    <h1 class="text-center text-5xl font-bold py-4">Home page</h1>
-    <section
-      class="telegramContainer fixed z-50 bottom-8 right-8 cursor-pointer border-3 border-solid border-white rounded-full transition-all duration-300"
-    >
-      <p
-        class="telegramText absolute w-96 h-20 p-4 text-white font-medium bg-black bg-opacity-70 rounded-full transition-all duration-300 pointer-events-none"
-      >
-        Хотите написать жалобу, есть пожелания или вопросы? Напишите нам!
-      </p>
-      <a href="https://t.me/shelfNoteBot" target="_blank">
-        <div
-          class="size-14 rounded-full"
-          style="
-            background-image: url('/Telegram.png');
-            background-size: contain;
-            background-color: white;
-          "
-        ></div>
-      </a>
-    </section>
-  </header>
+  <PageHeader v-model:isEditMode="isEditMode" :title="'Home page'" />
+  <TelegramSection />
   <CropImageModal
     v-model:isVisible="isModalUploadFile"
     v-model:imageInfo="backgroundImageInfo"
@@ -102,7 +84,11 @@ const saveImage = (finalImageUrl: string) => {
     <article class="flex items-start justify-center">
       <Suspense>
         <div ref="entitiesContainer" class="w-full pt-4">
-          <EntitiesList :entities="entities" @createEntity="createEntity" />
+          <EntitiesList
+            :entities="entities"
+            :isEditMode="isEditMode"
+            @createEntity="createEntity"
+          />
         </div>
         <template #fallback><BaseLoader /></template
       ></Suspense>
-- 
GitLab