refactor in process

src/app/assets/main.css

@@ -153,7 +153,7 @@ body {
   display: flex;
   flex-flow: column;
 }
-#pageContainer {
+#sheetContainer {
   padding-top: 80px;
 }
 #app > main {
@@ -173,6 +173,7 @@ body {
   box-sizing: border-box;
   user-select: none;
   color: white;
+  font-weight: 500;
 }
 
 /* Links */

src/app/components.d.ts

@@ -15,60 +15,64 @@ declare module 'vue' {
     BaseLoader: typeof import('./../shared/BaseLoader.vue')['default']
     Button: typeof import('./../shared/ui/Button.vue')['default']
     CloseCircle: typeof import('./../shared/icons/CloseCircle.vue')['default']
-    ConfirmDeleteEntityModal: typeof import('./../modules/ConfirmDeleteEntityModal.vue')['default']
-    CreateEntityMenu: typeof import('./../components/CreateEntityMenu.vue')['default']
+    CloseCircleIcon: typeof import('./../shared/icons/CloseCircleIcon.vue')['default']
+    CreateEntityMenu: typeof import('./../components/common/CreateEntityMenu.vue')['default']
     CropIcon: typeof import('./../shared/icons/CropIcon.vue')['default']
-    CropImageModal: typeof import('./../modules/CropImageModal.vue')['default']
+    CropImageModal: typeof import('./../modules/common/CropImageModal.vue')['default']
     DashedIcon: typeof import('./../shared/icons/DashedIcon.vue')['default']
+    DeleteEntityConfirmModal: typeof import('./../modules/common/DeleteEntityConfirmModal.vue')['default']
     Divider: typeof import('./../shared/ui/Divider.vue')['default']
-    DividerItem: typeof import('./../modules/entities/DividerItem.vue')['default']
-    DividerSettings: typeof import('./../components/entities/settings/DividerSettings.vue')['default']
-    DividerSettingsList: typeof import('./../components/entities/settings/lists/DividerSettingsList.vue')['default']
+    DividerEntity: typeof import('./../modules/sheets/entities/items/DividerEntity.vue')['default']
+    DividerSettings: typeof import('./../components/sheets/entities/settings/DividerSettings.vue')['default']
+    DividerSettingsList: typeof import('./../components/sheets/entities/settings/lists/DividerSettingsList.vue')['default']
     DottedIcon: typeof import('./../shared/icons/DottedIcon.vue')['default']
     Drawer: typeof import('./../shared/ui/Drawer.vue')['default']
-    EntitiesList: typeof import('./../modules/entities/EntitiesList.vue')['default']
-    EntityItem: typeof import('./../modules/entities/EntityItem.vue')['default']
-    EntityPositionSettings: typeof import('./../components/entities/settings/EntityPositionSettings.vue')['default']
-    EntityTitle: typeof import('./../components/entities/share/EntityTitle.vue')['default']
+    EntitiesList: typeof import('./../modules/sheets/entities/EntitiesList.vue')['default']
+    EntityItem: typeof import('./../modules/sheets/entities/EntityItem.vue')['default']
+    EntityPositionSettings: typeof import('./../components/sheets/entities/settings/EntityPositionSettings.vue')['default']
+    EntityTitle: typeof import('./../components/sheets/entities/share/EntityTitle.vue')['default']
     ExitIcon: typeof import('./../shared/icons/ExitIcon.vue')['default']
     HamburgerIcon: typeof import('./../shared/icons/HamburgerIcon.vue')['default']
     HomeIcon: typeof import('./../shared/icons/HomeIcon.vue')['default']
     HorizontalLineIcon: typeof import('./../shared/icons/HorizontalLineIcon.vue')['default']
+    ImageEditIcon: typeof import('./../shared/icons/ImageEditIcon.vue')['default']
+    ImageEntity: typeof import('./../modules/sheets/entities/items/ImageEntity.vue')['default']
     ImageIcon: typeof import('./../shared/icons/ImageIcon.vue')['default']
-    ImageItem: typeof import('./../modules/entities/ImageItem.vue')['default']
-    ImageSettings: typeof import('./../components/entities/settings/ImageSettings.vue')['default']
-    ImageSettingsList: typeof import('./../components/entities/settings/lists/ImageSettingsList.vue')['default']
-    LogoAndLabel: typeof import('./../components/LogoAndLabel.vue')['default']
+    ImageSettings: typeof import('./../components/sheets/entities/settings/ImageSettings.vue')['default']
+    ImageSettingsList: typeof import('./../components/sheets/entities/settings/lists/ImageSettingsList.vue')['default']
     MenuDial: typeof import('./../shared/ui/MenuDial.vue')['default']
     Modal: typeof import('./../shared/ui/Modal.vue')['default']
     NavigationIcon: typeof import('./../shared/icons/NavigationIcon.vue')['default']
-    PageBackgroundMenu: typeof import('./../modules/PageBackgroundMenu.vue')['default']
-    PageHeader: typeof import('./../modules/PageHeader.vue')['default']
-    PageMenuButton: typeof import('./../components/PageMenuButton.vue')['default']
+    ParagraphEntity: typeof import('./../modules/sheets/entities/items/ParagraphEntity.vue')['default']
     ParagraphIcon: typeof import('./../shared/icons/ParagraphIcon.vue')['default']
-    ParagraphItem: typeof import('./../modules/entities/ParagraphItem.vue')['default']
-    ParagraphSettings: typeof import('./../components/entities/settings/ParagraphSettings.vue')['default']
-    ParagraphSettingsList: typeof import('./../components/entities/settings/lists/ParagraphSettingsList.vue')['default']
+    ParagraphSettings: typeof import('./../components/sheets/entities/settings/ParagraphSettings.vue')['default']
+    ParagraphSettingsList: typeof import('./../components/sheets/entities/settings/lists/ParagraphSettingsList.vue')['default']
     PlusIcon: typeof import('./../shared/icons/PlusIcon.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     SaveIcon: typeof import('./../shared/icons/SaveIcon.vue')['default']
     SettingsIcon: typeof import('./../shared/icons/SettingsIcon.vue')['default']
+    SheetBackgroundMenu: typeof import('./../modules/sheets/SheetBackgroundMenu.vue')['default']
+    SheetHeader: typeof import('./../modules/sheets/SheetHeader.vue')['default']
     SheetPage: typeof import('./../pages/[uuid]/SheetPage.vue')['default']
-    SidebarMenuContent: typeof import('./../modules/SidebarMenuContent.vue')['default']
+    SheetPageContent: typeof import('./../modules/sheets/SheetPageContent.vue')['default']
+    SheetTelegramSection: typeof import('./../modules/sheets/SheetTelegramSection.vue')['default']
+    SidebarMenu: typeof import('./../modules/common/SidebarMenu.vue')['default']
+    SidebarMenuButton: typeof import('./../components/common/SidebarMenuButton.vue')['default']
     SignIn: typeof import('./../pages/authorization/signIn.vue')['default']
     SignUp: typeof import('./../pages/authorization/signUp.vue')['default']
     Slider: typeof import('./../shared/ui/Slider.vue')['default']
     SolidIcon: typeof import('./../shared/icons/SolidIcon.vue')['default']
     TableIcon: typeof import('./../shared/icons/TableIcon.vue')['default']
-    TelegramSection: typeof import('./../modules/TelegramSection.vue')['default']
-    TextFontMenu: typeof import('./../components/entities/share/TextFontMenu.vue')['default']
-    TextPositionMenu: typeof import('./../components/entities/text/TextPositionMenu.vue')['default']
-    TextStateMenu: typeof import('./../components/entities/text/TextStateMenu.vue')['default']
+    TextFontMenu: typeof import('@/components/sheets/entities/share/TextFontMenu.vue')['default']
+    TextPositionMenu: typeof import('@/components/sheets/entities/text/TextPositionMenu.vue')['default']
+    TextStateMenu: typeof import('@/components/sheets/entities/text/TextStateMenu.vue')['default']
     ToggleButton: typeof import('./../shared/ui/ToggleButton.vue')['default']
     ToggleSwitch: typeof import('./../shared/ui/ToggleSwitch.vue')['default']
     TrashIcon: typeof import('./../shared/icons/TrashIcon.vue')['default']
     Tree: typeof import('./../shared/ui/Tree.vue')['default']
+    TriangleOpenIcon: typeof import('./../shared/ui/icons/TriangleOpenIcon.vue')['default']
+    UploadIcon: typeof import('./../shared/icons/UploadIcon.vue')['default']
     VerticalArrowsIcon: typeof import('./../shared/icons/VerticalArrowsIcon.vue')['default']
   }
 }

src/app/helpers/index.ts → src/app/helpers/entities.ts

 import { useInterfaceStore } from '@/app/stores/interface';
 import { useDataStore } from '@/app/stores/data';
 import { useWebsocketStore } from '@/app/stores/websocket';
-import type { IEntity, TTheme } from '@/app/interfaces/environment';
+import type { IEntity } from '@/app/interfaces/environment';
 import { checkIsImage } from '@/app/helpers/images';
 import { useFilesWebsocketStore } from '@/app/stores/filesWebsocket';
 import cookies from '@/app/plugins/Cookie';
 
-export const fetchForEntities = (page_uuid: string) => {
+export const fetchForEntities = (sheet_uuid: string) => {
   const dataStore = useDataStore();
   const interfaceStore = useInterfaceStore();
   const websocketStore = useWebsocketStore();
@@ -14,12 +14,12 @@ export const fetchForEntities = (page_uuid: string) => {
   const filesBuffer = filesWebsocketStore.filesBuffer;
   if (filesBuffer.length) {
     filesBuffer[0] = new Blob([filesBuffer[0].data], { type: 'image/jpeg' });
-    interfaceStore.setPageBackgroundFromDB(URL.createObjectURL(filesBuffer[0]));
+    interfaceStore.setSheetBackgroundFromDB(URL.createObjectURL(filesBuffer[0]));
   }
   if (!dataStore.entities.length) {
     const getEntitiesData = {
-      event: 'getPageEntities',
-      body: { page_uuid }
+      event: 'getSheetEntities',
+      body: { sheet_uuid }
     };
     websocketStore.sendData(getEntitiesData);
   }
@@ -28,7 +28,7 @@ export const fetchForEntities = (page_uuid: string) => {
 
 export const createEntity = (newEntity: IEntity) => {
   const websocketStore = useWebsocketStore();
-  const page_uuid = cookies.get('current_page_uuid');
+  const sheet_uuid = cookies.get('current_sheet_uuid');
   if (newEntity.image_buffer) {
     websocketStore.setFileData(newEntity);
     const filesWebsocketStore = useFilesWebsocketStore();
@@ -36,7 +36,7 @@ export const createEntity = (newEntity: IEntity) => {
   }
   const data = {
     event: 'createEntity',
-    body: { ...newEntity, page_uuid }
+    body: { ...newEntity, sheet_uuid }
   };
   websocketStore.sendData(data);
 };
@@ -51,24 +51,15 @@ export const editEntity = (newState: IEntity) => {
   websocketStore.sendData(data);
 };
 
-export const sendReturnOriginalSize = (newState: IEntity) => {
-  const websocketStore = useWebsocketStore();
-  const data = {
-    event: 'returnOriginalImageSize',
-    body: { ...newState }
-  };
-  websocketStore.sendData(data);
-};
-
 export const deleteEntity = (entityUuid: string) => {
   const dataStore = useDataStore();
   const websocketStore = useWebsocketStore();
-  const page_uuid = cookies.get('current_page_uuid');
+  const sheet_uuid = cookies.get('current_sheet_uuid');
   const entities = dataStore.entities;
   const entityToDelete = entities.find((entity) => entity.entity_uuid === entityUuid);
   const data = {
     event: 'deleteEntity',
-    body: { ...entityToDelete, page_uuid }
+    body: { ...entityToDelete, sheet_uuid }
   };
   websocketStore.sendData(data);
 };
@@ -90,126 +81,3 @@ export const changeEntitiesOrder = (entityUuid: string, direction: 'up' | 'down'
   };
   websocketStore.sendData(data);
 };
-
-export const convertThemeToColorWhiteDefault = (theme: string | undefined) => {
-  if (!theme) return '#ffffff';
-  switch (theme) {
-    case 'white':
-      return '#ffffff';
-    case 'slate':
-      return '#64748b';
-    case 'blue':
-      return '#3b82f6';
-    case 'sky':
-      return '#0ea5e9';
-    case 'teal':
-      return '#14b8a6';
-    case 'lime':
-      return '#84cc16';
-    case 'green':
-      return '#22c55e';
-    case 'yellow':
-      return '#eab308';
-    case 'amber':
-      return '#f59e0b';
-    case 'orange':
-      return '#f97316';
-    case 'pink':
-      return '#ec4899';
-    case 'fuchsia':
-      return '#d946ef';
-    case 'purple':
-      return '#a855f7';
-    case 'indigo':
-      return '#6366f1';
-    case 'rose':
-      return '#f43f5e';
-    case 'red':
-      return '#ef4444';
-    case 'black':
-      return '#000000';
-  }
-  return '#ffffff';
-};
-
-export const convert800ThemeToColorGrayDefault = (theme: string | undefined) => {
-  if (!theme) return '#9294a1';
-  switch (theme) {
-    case 'white':
-      return '#ffffff';
-    case 'slate':
-      return '#1e293b';
-    case 'blue':
-      return '#1e40af';
-    case 'sky':
-      return '#075985';
-    case 'teal':
-      return '#115e59';
-    case 'lime':
-      return '#3f6212';
-    case 'green':
-      return '#166534';
-    case 'yellow':
-      return '#854d0e';
-    case 'amber':
-      return '#92400e';
-    case 'orange':
-      return '#9a3412';
-    case 'pink':
-      return '#9d174d';
-    case 'fuchsia':
-      return '#86198f';
-    case 'purple':
-      return '#6b21a8';
-    case 'indigo':
-      return '#3730a3';
-    case 'rose':
-      return '#9f1239';
-    case 'red':
-      return '#991b1b';
-    case 'black':
-      return '#000000';
-  }
-  return '#9294a1';
-};
-
-export const convertThemeToColorBlackDefault = (theme: string | undefined) => {
-  if (!theme) return '#000000';
-  switch (theme) {
-    case 'white':
-      return '#ffffff';
-    case 'slate':
-      return '#64748b';
-    case 'blue':
-      return '#3b82f6';
-    case 'sky':
-      return '#0ea5e9';
-    case 'teal':
-      return '#14b8a6';
-    case 'lime':
-      return '#84cc16';
-    case 'green':
-      return '#22c55e';
-    case 'yellow':
-      return '#eab308';
-    case 'amber':
-      return '#f59e0b';
-    case 'orange':
-      return '#f97316';
-    case 'pink':
-      return '#ec4899';
-    case 'fuchsia':
-      return '#d946ef';
-    case 'purple':
-      return '#a855f7';
-    case 'indigo':
-      return '#6366f1';
-    case 'rose':
-      return '#f43f5e';
-    case 'red':
-      return '#ef4444';
-    case 'black':
-      return '#000000';
-  }
-  return '#000000';
-};

src/app/helpers/images.ts

@@ -3,11 +3,55 @@ import { useFilesWebsocketStore } from '@/app/stores/filesWebsocket';
 import type { IImage } from '@/app/interfaces/entities';
 import { useWebsocketStore } from '@/app/stores/websocket';
 import { useInterfaceStore } from '@/app/stores/interface';
-import { imageScaleOptions } from '@/components/entities/settings/lists/constants/options';
+import { imageScaleOptions } from '@/components/sheets/entities/settings/lists/constants/options';
+import type { IImageMainInfo } from '@/app/interfaces';
 
-export const setDefaultPageBackground = () => {
+export const calcImageWidth = (fileWidth: number, windowWidth: number) => {
+  let imageWidth = Math.ceil((fileWidth / (windowWidth - 128)) * 100);
+  if (imageWidth > 100) {
+    imageWidth = 100;
+  }
+  if (imageWidth < 5) {
+    imageWidth = 5;
+  }
+  return imageWidth;
+};
+
+export const sendReturnOriginalSize = (newState: IEntity) => {
+  const websocketStore = useWebsocketStore();
+  const data = {
+    event: 'returnOriginalImageSize',
+    body: { ...newState }
+  };
+  websocketStore.sendData(data);
+};
+
+export const uploadImage = ($event) => {
+  const target = $event.target as HTMLInputElement;
+  const image = new Image();
+  const file = target.files![0];
+  image.src = URL.createObjectURL(file);
+  return image;
+};
+
+export const backgroundImageOnLoad = (image, windowWidth: number) => {
+  const backgroundImageInfo = {
+    image_url: '',
+    image_width: 0,
+    file_width: 0,
+    file_height: 0
+  };
+  const imageWidth = calcImageWidth(image.width, windowWidth);
+  backgroundImageInfo.image_url = image.src;
+  backgroundImageInfo.image_width = imageWidth;
+  backgroundImageInfo.file_width = image.width;
+  backgroundImageInfo.file_height = image.height;
+  return backgroundImageInfo;
+};
+
+export const setDefaultSheetBackground = () => {
   const interfaceStore = useInterfaceStore();
-  interfaceStore.resetPageBackground();
+  interfaceStore.resetSheetBackground();
 };
 
 export const addUrlsToImageEntities = (entities: IEntity[]) => {
@@ -46,17 +90,6 @@ export const checkIsImage = (entity: IEntity) => {
   return entityToReturn;
 };
 
-export const calcImageWidth = (fileWidth: number, windowWidth: number) => {
-  let imageWidth = Math.ceil((fileWidth / (windowWidth - 128)) * 100);
-  if (imageWidth > 100) {
-    imageWidth = 100;
-  }
-  if (imageWidth < 5) {
-    imageWidth = 5;
-  }
-  return imageWidth;
-};
-
 export const sendCropImage = async (newUrl: string, entity: IImage) => {
   const filesWebsocketStore = useFilesWebsocketStore();
   filesWebsocketStore.saveImageUrl(newUrl);

src/app/interfaces/entities.ts

@@ -11,10 +11,10 @@ export interface ITable extends IEntity {
   }[];
 }
 export interface ITableColumn {
-  column_uuid: string;
+  column_uuid?: string;
   name: string;
   type: ITableColumnTypes;
-  data: never;
+  data?: never;
 }
 type ITableColumnTypes =
   | 'text'

src/app/interfaces/environment.ts

 import type { ITableColumn } from '@/app/interfaces/entities';
 
-export interface IPageInfo {
-  page_uuid: string;
-  page_title: string;
-  page_icon: string;
-  page_navigation_order: string;
+export interface ISheetInfo {
+  sheet_uuid: string;
+  sheet_title: string;
+  sheet_icon: string;
+  sheet_navigation_order: string;
   entities?: {
     entity_uuid: string;
     entity_type: 'divider' | 'paragraph' | 'image' | 'table';
@@ -12,7 +12,7 @@ export interface IPageInfo {
 }
 
 export interface IEntity {
-  entity_uuid: string;
+  entity_uuid?: string;
   entity_user?: string;
   user_nick_name?: string;
   entity_order?: number;
@@ -24,7 +24,7 @@ export interface IEntity {
   font_size?: string | null;
   paragraph_size?: string | null;
   text_position?: string | null;
-  image_buffer?: string;
+  image_buffer?: string | ArrayBuffer;
   image_url_initial?: string;
   image_width_initial?: number;
   file_width_initial?: number;

src/app/stores/authorization.ts

@@ -23,7 +23,7 @@ export const useAuthorizationStore = defineStore('authorizationStore', () => {
     userNickName.value = '';
     userData.value = null;
     cookies.remove('user_uuid');
-    cookies.remove('current_page_uuid');
+    cookies.remove('current_sheet_uuid');
     cookies.remove('home_uuid');
     cookies.remove('favorite_color');
     router.push('/signUp');

src/app/stores/data.ts

 import { defineStore } from 'pinia';
-import type { IEntity, IPageInfo } from '@/app/interfaces/environment';
+import type { IEntity, ISheetInfo } from '@/app/interfaces/environment';
 import cookies from '@/app/plugins/Cookie';
 
 export const useDataStore = defineStore('dataStore', () => {
@@ -36,22 +36,22 @@ export const useDataStore = defineStore('dataStore', () => {
     }
   ]);
 
-  const pagesData = ref<IPageInfo[]>([]);
-  const currentPage = computed<IPageInfo>(() =>
-    pagesData.value.find((page) => page.page_uuid === cookies.get('current_page_uuid'))
+  const sheetsData = ref<ISheetInfo[]>([]);
+  const currentSheet = computed<ISheetInfo>(() =>
+    sheetsData.value.find((sheet) => sheet.sheet_uuid === cookies.get('current_sheet_uuid'))
   );
   const entities = ref<IEntity[]>([]);
-  function setCurrentPageUuid(uuid: string) {
-    cookies.set('current_page_uuid', uuid);
+  function setCurrentSheetUuid(uuid: string) {
+    cookies.set('current_sheet_uuid', uuid);
   }
-  function setCurrentPageData(data: IPageInfo) {
-    currentPage.value = data;
+  function setCurrentSheetData(data: ISheetInfo) {
+    // currentSheet.value = data;
   }
-  function setPagesData(data: IPageInfo[]) {
-    pagesData.value = data;
+  function setSheetsData(data: ISheetInfo[]) {
+    sheetsData.value = data;
   }
-  function addPageData(data: IPageInfo) {
-    pagesData.value.push(data);
+  function addSheetData(data: ISheetInfo) {
+    sheetsData.value.push(data);
   }
   function editEntities(newState: IEntity[]) {
     entities.value = newState.sort(
@@ -61,12 +61,12 @@ export const useDataStore = defineStore('dataStore', () => {
   return {
     sheets,
     entities,
-    pagesData,
-    currentPage,
-    setCurrentPageUuid,
-    setCurrentPageData,
-    setPagesData,
-    addPageData,
+    sheetsData,
+    currentSheet,
+    setCurrentSheetUuid,
+    setCurrentSheetData,
+    setSheetsData,
+    addSheetData,
     editEntities
   };
 });

src/app/stores/interface.ts

@@ -5,31 +5,31 @@ export const useInterfaceStore = defineStore('interfaceStore', () => {
   const websocketStore = useWebsocketStore();
 
   const isDarkMode = ref<boolean>(true);
-  const defaultPageBackground = ref<string>(
+  const defaultSheetBackground = ref<string>(
     'https://t3.ftcdn.net/jpg/05/01/28/98/360_F_501289843_4ITbthNCydFQGgJmoZe4IQKchItBubqZ.jpg'
   );
-  const pageBackground = ref<string>(defaultPageBackground.value);
+  const sheetBackground = ref<string>(defaultSheetBackground.value);
   const isFetchedForBackground = ref<boolean>(false);
 
   function setIsFetchedForBackground() {
     isFetchedForBackground.value = true;
   }
-  function resetPageBackground() {
-    pageBackground.value = defaultPageBackground.value;
+  function resetSheetBackground() {
+    sheetBackground.value = defaultSheetBackground.value;
     const data = {
-      event: 'deletePageBackground'
+      event: 'deleteSheetBackground'
     };
     websocketStore.sendData(data);
   }
-  function editPageBackground(newUrl: string) {
-    pageBackground.value = newUrl;
+  function editSheetBackground(newUrl: string) {
+    sheetBackground.value = newUrl;
     const image = new Image();
     image.src = newUrl;
     image.onload = async () => {
       const response = await fetch(newUrl);
       const blob = await response.blob();
       const data = {
-        event: 'editPageBackground',
+        event: 'editSheetBackground',
         body: {
           background_url: newUrl,
           extension: blob.type
@@ -38,20 +38,20 @@ export const useInterfaceStore = defineStore('interfaceStore', () => {
       websocketStore.sendData(data);
     };
   }
-  function setPageBackgroundFromDB(url: string | null) {
+  function setSheetBackgroundFromDB(url: string | null) {
     if (!url) {
       return;
     }
-    pageBackground.value = url;
+    sheetBackground.value = url;
   }
   return {
     isDarkMode,
-    pageBackground,
-    defaultPageBackground,
+    sheetBackground,
+    defaultSheetBackground,
     isFetchedForBackground,
     setIsFetchedForBackground,
-    resetPageBackground,
-    editPageBackground,
-    setPageBackgroundFromDB
+    resetSheetBackground,
+    editSheetBackground,
+    setSheetBackgroundFromDB
   };
 });

src/app/stores/websocket.ts

@@ -6,7 +6,7 @@ import { addUrlsToImageEntities } from '@/app/helpers/images';
 import { useFilesWebsocketStore } from '@/app/stores/filesWebsocket';
 import { useAuthorizationStore } from '@/app/stores/authorization';
 import cookies from '@/app/plugins/Cookie';
-import { editEntity } from '@/app/helpers';
+import { editEntity } from '@/app/helpers/entities';
 
 export const useWebsocketStore = defineStore('websocketStore', () => {
   const dataStore = useDataStore();
@@ -39,14 +39,14 @@ export const useWebsocketStore = defineStore('websocketStore', () => {
           }
         };
         sendData(getUserData);
-        const pageUuid = cookies.get('current_page_uuid');
-        const getPageData = {
-          event: 'getPage',
+        const sheetUuid = cookies.get('current_sheet_uuid');
+        const getSheetData = {
+          event: 'getSheet',
           body: {
-            page_uuid: pageUuid
+            sheet_uuid: sheetUuid
           }
         };
-        sendData(getPageData);
+        sendData(getSheetData);
       }
       if (initialDataToSend.value) socket.value.send(JSON.stringify(initialDataToSend.value));
     };
@@ -57,11 +57,11 @@ export const useWebsocketStore = defineStore('websocketStore', () => {
         // create
         case 'createUser': {
           cookies.set('user_uuid', response.data.user_uuid);
-          const pagesUuid = response.data.pages_uuid;
-          const homePageUuid = pagesUuid[0];
+          const sheetsUuid = response.data.sheets_uuid;
+          const homeSheetUuid = sheetsUuid[0];
           const userSettings = response.data.settings;
           cookies.set('favorite_color', userSettings.favorite_color);
-          cookies.set('home_uuid', homePageUuid);
+          cookies.set('home_uuid', homeSheetUuid);
           const getUserData = {
             event: 'getUser',
             body: {
@@ -69,18 +69,18 @@ export const useWebsocketStore = defineStore('websocketStore', () => {
             }
           };
           sendData(getUserData);
-          const getPageData = {
-            event: 'getPage',
+          const getSheetData = {
+            event: 'getSheet',
             body: {
-              page_uuid: homePageUuid
+              sheet_uuid: homeSheetUuid
             }
           };
-          sendData(getPageData);
-          await router.push(`/${homePageUuid}`);
+          sendData(getSheetData);
+          await router.push(`/${homeSheetUuid}`);
           break;
         }
-        case 'createPage': {
-          dataStore.addPageData(response.data);
+        case 'createSheet': {
+          dataStore.addSheetData(response.data);
           break;
         }
         case 'createEntity': {
@@ -96,12 +96,12 @@ export const useWebsocketStore = defineStore('websocketStore', () => {
         }
         case 'createImageEntity': {
           if (!file.value) break;
-          const page_uuid = cookies.get('current_page_uuid');
+          const sheet_uuid = cookies.get('current_sheet_uuid');
           const data = {
             event: 'createEntity',
             body: {
               ...file.value,
-              page_uuid
+              sheet_uuid
             }
           };
           file.value = null;
@@ -112,15 +112,15 @@ export const useWebsocketStore = defineStore('websocketStore', () => {
         case 'getUser': {
           authorizationStore.setUserNickName(response.data.nick_name);
           authorizationStore.setUserData(response.data);
-          dataStore.setPagesData(response.data.pages_uuid);
+          dataStore.setSheetsData(response.data.sheets_uuid);
           break;
         }
-        case 'getPage': {
-          dataStore.setCurrentPageUuid(response.data.page_uuid);
-          dataStore.setCurrentPageData(response.data);
+        case 'getSheet': {
+          dataStore.setCurrentSheetUuid(response.data.sheet_uuid);
+          // dataStore.setCurrentSheetData(response.data);
           break;
         }
-        case 'getPageEntities': {
+        case 'getSheetEntities': {
           const newState = response.data;
           if (imageEntitiesCount.value && filesBufferLength.value === imageEntitiesCount.value) {
             const entitiesAddedUrls = addUrlsToImageEntities(newState);
@@ -130,12 +130,12 @@ export const useWebsocketStore = defineStore('websocketStore', () => {
           }
           break;
         }
-        case 'getPageBackground': {
+        case 'getSheetBackground': {
           const blob = new Blob([response.data.setting_value.data], {
             type: `image/jpeg`
           });
           const url = URL.createObjectURL(blob);
-          interfaceStore.setPageBackgroundFromDB(url);
+          interfaceStore.setSheetBackgroundFromDB(url);
           break;
         }
         // update

src/components/LogoAndLabel.vue

-<script setup lang="ts"></script>
-
-<template>
-  <section class="inline-flex items-center gap-10">
-    <img
-      src="@/app/assets/ShelfNote.svg"
-      alt="ShelfNote logo"
-      class="bg-white size-12 rounded-full"
-    />
-    <span class="font-semibold text-2xl text-primary">ShelfNote</span>
-  </section>
-</template>
-
-<style scoped></style>

src/components/CreateEntityMenu.vue → src/components/common/CreateEntityMenu.vue

@@ -5,8 +5,7 @@ import { useFilesWebsocketStore } from '@/app/stores/filesWebsocket';
 import { useDataStore } from '@/app/stores/data';
 import cookies from '@/app/plugins/Cookie';
 import { calcImageWidth } from '@/app/helpers/images';
-
-const emit = defineEmits(['createEntity']);
+import { createEntity } from '@/app/helpers/entities';
 
 const { open: uploadFile, onChange } = useFileDialog({
   accept: 'image/*',
@@ -39,7 +38,7 @@ const addImage = async (files: FileList) => {
       image.width *= coefficient;
     }
     const imageWidth = calcImageWidth(image.width, windowWidth.value);
-    emit('createEntity', {
+    createEntity({
       entity_type: 'image',
       entity_order: entitiesCount.value + 1,
       image_buffer: buffer,
@@ -70,7 +69,7 @@ const speedDialItems = ref([
     textStyle: 'bold',
     theme: 'blue',
     onClick: () => {
-      emit('createEntity', {
+      createEntity({
         entity_type: 'divider',
         entity_order: entitiesCount.value + 1,
         divider_height: 1,
@@ -83,7 +82,7 @@ const speedDialItems = ref([
     textStyle: 'bold',
     theme: 'green',
     onClick: () => {
-      emit('createEntity', {
+      createEntity({
         entity_type: 'paragraph',
         entity_order: entitiesCount.value + 1,
         text: '',
@@ -104,7 +103,7 @@ const speedDialItems = ref([
     textStyle: 'bold',
     theme: 'red',
     onClick: () => {
-      emit('createEntity', {
+      createEntity({
         entity_type: 'table',
         entity_order: entitiesCount.value + 1,
         table_columns: [

src/components/PageMenuButton.vue → src/components/common/SidebarMenuButton.vue

@@ -3,7 +3,7 @@ const emit = defineEmits(['openMenu']);
 </script>
 
 <template>
-  <div class="fixed top-0 left-0 z-20">
+  <div class="fixed z-20">
     <button
       class="px-4 py-2 text-white font-bold hover:bg-slate-800 transition-all rounded-md flex flex-col items-center justify-center gap-1.5"
       @click.prevent="emit('openMenu')"

src/components/entities/settings/DividerSettings.vue → src/components/sheets/entities/settings/DividerSettings.vue

 <script setup lang="ts">
-import { convertThemeToColorWhiteDefault, deleteEntity } from '@/app/helpers';
+import { convertThemeToColorWhiteDefault } from '@/app/helpers';
+import { deleteEntity } from '@/app/helpers/entities';
 import type { IDivider } from '@/app/interfaces/entities';
 import type { TTheme } from '@/app/interfaces/environment';
 import cookies from '@/app/plugins/Cookie';

src/components/entities/settings/EntityPositionSettings.vue → src/components/sheets/entities/settings/EntityPositionSettings.vue

 <script setup lang="ts">
-import { changeEntitiesOrder } from '@/app/helpers';
+import { changeEntitiesOrder } from '@/app/helpers/entities';
 import cookies from '@/app/plugins/Cookie';
 
 interface Props {

src/components/entities/settings/ImageSettings.vue → src/components/sheets/entities/settings/ImageSettings.vue

 <script setup lang="ts">
 import type { IImage } from '@/app/interfaces/entities';
-import { convertThemeToColorWhiteDefault, deleteEntity, editEntity } from '@/app/helpers';
+import { convertThemeToColorWhiteDefault } from '@/app/helpers';
+import { deleteEntity, editEntity } from '@/app/helpers/entities';
+
 import type { TTheme } from '@/app/interfaces/environment';
 import cookies from '@/app/plugins/Cookie';
 import { sendCropImage } from '@/app/helpers/images';
@@ -121,7 +123,7 @@ const openCropImageModal = () => (isModalCropImage.value = true);
       v-model:imageInfo="newEntityData"
       @cropImage="cropImage"
     />
-    <ConfirmDeleteEntityModal
+    <DeleteEntityConfirmModal
       v-model:isModalToDeleteEntity="isModalToDeleteImage"
       @deleteEntity="deleteImage"
       @toggleConfirmDeleteEntityModal="toggleConfirmDeleteImageModal"

src/components/entities/settings/ParagraphSettings.vue → src/components/sheets/entities/settings/ParagraphSettings.vue

 <script setup lang="ts">
-import { convertThemeToColorWhiteDefault, deleteEntity, editEntity } from '@/app/helpers';
+import { convertThemeToColorWhiteDefault } from '@/app/helpers';
+import { deleteEntity, editEntity } from '@/app/helpers/entities';
 import type { IParagraph } from '@/app/interfaces/entities';
 import type { TTheme } from '@/app/interfaces/environment';
 import cookies from '@/app/plugins/Cookie';