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] 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