From 62d72cec0a555326dcf9849eedf1c4a26f213150 Mon Sep 17 00:00:00 2001
From: Dobrunia Kostrigin <48620984+Dobrunia@users.noreply.github.com>
Date: Sat, 1 Feb 2025 16:52:38 +0300
Subject: [PATCH 1/2] feat(ui): sticky note header

---
 codex-ui/src/styles/z-axis.pcss                        | 1 +
 src/presentation/components/note-header/NoteHeader.vue | 4 ++++
 2 files changed, 5 insertions(+)

diff --git a/codex-ui/src/styles/z-axis.pcss b/codex-ui/src/styles/z-axis.pcss
index c9d26c33..fe597a3a 100644
--- a/codex-ui/src/styles/z-axis.pcss
+++ b/codex-ui/src/styles/z-axis.pcss
@@ -2,4 +2,5 @@
   --z-popover: 3;
   --z-navbar: calc(var(--z-popover) + 1);
   --z-popup: calc(var(--z-navbar) + 1);
+  --z-note-header: var(--z-navbar);
 }
diff --git a/src/presentation/components/note-header/NoteHeader.vue b/src/presentation/components/note-header/NoteHeader.vue
index cb43f4ce..1d26df61 100644
--- a/src/presentation/components/note-header/NoteHeader.vue
+++ b/src/presentation/components/note-header/NoteHeader.vue
@@ -22,6 +22,10 @@
   transition: opacity 100ms;
   justify-content: space-between;
   padding: var(--spacing-s) var(--spacing-m);
+  position: sticky;
+  top: var(--layout-navbar-height);
+  background-color: var(--base--bg-primary);
+  z-index: var(--z-note-header);
 
   &__left {
     color: var(--base--text-secondary);

From 2fa2d1cbb4aa87277f59b87888bf91e92ce79def Mon Sep 17 00:00:00 2001
From: Dobrunia Kostrigin <48620984+Dobrunia@users.noreply.github.com>
Date: Sun, 26 Jan 2025 12:11:23 +0300
Subject: [PATCH 2/2] Merge pull request #290 from
 codex-team/implement/layout-page-block-component

feat(ui): integrate layout page block component
---
 codex-ui/dev/pages/layout/Navbar.vue          |  8 ++--
 codex-ui/src/vue/components/tabbar/Tab.vue    |  3 +-
 .../src/vue/layout/page-block/PageBlock.vue   |  2 +
 src/application/services/useLayout.ts         | 46 -------------------
 src/presentation/layouts/Fullpage.vue         | 15 ------
 src/presentation/layouts/Layout.vue           | 15 ------
 src/presentation/layouts/ThreeColsLayout.vue  | 42 -----------------
 src/presentation/pages/History.vue            |  7 ++-
 src/presentation/pages/HistoryVersion.vue     | 14 +++---
 src/presentation/pages/Home.vue               |  8 ++--
 src/presentation/pages/NoteSettings.vue       |  7 ++-
 src/presentation/pages/Settings.vue           |  7 ++-
 .../pages/marketplace/AddTool.vue             |  1 -
 .../pages/marketplace/MarketplacePage.vue     |  9 ++--
 .../pages/marketplace/MarketplaceTools.vue    |  1 -
 15 files changed, 30 insertions(+), 155 deletions(-)
 delete mode 100644 src/application/services/useLayout.ts
 delete mode 100644 src/presentation/layouts/Fullpage.vue
 delete mode 100644 src/presentation/layouts/Layout.vue
 delete mode 100644 src/presentation/layouts/ThreeColsLayout.vue

diff --git a/codex-ui/dev/pages/layout/Navbar.vue b/codex-ui/dev/pages/layout/Navbar.vue
index 136500ed..f11b6d0d 100644
--- a/codex-ui/dev/pages/layout/Navbar.vue
+++ b/codex-ui/dev/pages/layout/Navbar.vue
@@ -15,17 +15,15 @@ import { Navbar } from '../../../src/vue';
 
 <style scoped>
 .navbar-wrapper {
-  width: 600px;
-  min-height: 400px;
+  height: 800px;
   position: relative;
   background-color: var(--base--bg-secondary);
   border-radius: var(--radius-m);
   border: 1px solid var(--base--border);
 
   .navbar {
-      z-index: 1;
-      top: var(--layout-navbar-height);
-      border-radius: var(--radius-m) var(--radius-m) 0 0;
+    top: var(--layout-navbar-height);
+    border-radius: var(--radius-m) var(--radius-m) 0 0;
   }
 }
 </style>
diff --git a/codex-ui/src/vue/components/tabbar/Tab.vue b/codex-ui/src/vue/components/tabbar/Tab.vue
index 4c9683e2..28952bc3 100644
--- a/codex-ui/src/vue/components/tabbar/Tab.vue
+++ b/codex-ui/src/vue/components/tabbar/Tab.vue
@@ -73,9 +73,8 @@ withDefaults(
   display: inline-block;
   min-width: var(--min-width);
   text-decoration: none;
-
   max-width: max-content;
-
+  user-select: none;
   flex: 1;
   flex-shrink: 1;
 
diff --git a/codex-ui/src/vue/layout/page-block/PageBlock.vue b/codex-ui/src/vue/layout/page-block/PageBlock.vue
index 6a7b5d80..2dda4bb5 100644
--- a/codex-ui/src/vue/layout/page-block/PageBlock.vue
+++ b/codex-ui/src/vue/layout/page-block/PageBlock.vue
@@ -57,6 +57,8 @@ defineProps({
 
   &__content {
     max-width: var(--layout-content-width);
+    flex-grow: 1;
+    min-width: 0;
     padding: var(--spacing-xxl) var(--spacing-ml);
     box-sizing: border-box;
 
diff --git a/src/application/services/useLayout.ts b/src/application/services/useLayout.ts
deleted file mode 100644
index 118ce7b4..00000000
--- a/src/application/services/useLayout.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-import { shallowRef, type ShallowRef, type Component, watch } from 'vue';
-import { useRoute } from 'vue-router';
-import Default from '@/presentation/layouts/ThreeColsLayout.vue';
-import Fullpage from '@/presentation/layouts/Fullpage.vue';
-
-/**
- * Layouts available in application.
- *
- * Layout — is page wrapper. You can use it to create different layouts for different pages, e.g.: multiple sidebars, etc.
- */
-export const layouts = {
-  /**
-   * Standard layout with Centered container
-   */
-  default: Default,
-
-  /**
-   * Fullpage layout without container
-   */
-  fullpage: Fullpage,
-};
-
-/**
- * useLayout hook is setting current Layout
- * @returns Layout template was got by meta
- */
-export default function (): ShallowRef<Component> {
-  const layout = shallowRef(layouts.default);
-  const route = useRoute();
-
-  /**
-   * Watch route meta and set layout
-   */
-  watch(
-    () => route.meta.layout,
-    (layoutName) => {
-      if (layoutName !== undefined && layoutName in layouts) {
-        layout.value = layouts[layoutName];
-      } else {
-        layout.value = layouts.default;
-      }
-    }
-  );
-
-  return layout;
-}
diff --git a/src/presentation/layouts/Fullpage.vue b/src/presentation/layouts/Fullpage.vue
deleted file mode 100644
index ba754061..00000000
--- a/src/presentation/layouts/Fullpage.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<template>
-  <div :class="$style.fullpage">
-    <slot />
-  </div>
-</template>
-
-<script setup lang="ts"></script>
-
-<style module>
-.fullpage {
-  width: 100%;
-  min-height: 100%;
-  display: grid;
-}
-</style>
diff --git a/src/presentation/layouts/Layout.vue b/src/presentation/layouts/Layout.vue
deleted file mode 100644
index 416b262e..00000000
--- a/src/presentation/layouts/Layout.vue
+++ /dev/null
@@ -1,15 +0,0 @@
-<template>
-  <component :is="layout">
-    <slot name="block-left" />
-    <slot />
-    <slot name="block-right" />
-  </component>
-</template>
-
-<script lang="ts" setup>
-import useLayout from '@/application/services/useLayout';
-
-const layout = useLayout();
-</script>
-
-<style lang="postcss"></style>
diff --git a/src/presentation/layouts/ThreeColsLayout.vue b/src/presentation/layouts/ThreeColsLayout.vue
deleted file mode 100644
index 2efbee53..00000000
--- a/src/presentation/layouts/ThreeColsLayout.vue
+++ /dev/null
@@ -1,42 +0,0 @@
-<template>
-  <div class="center-container">
-    <div class="block-left">
-      <slot
-        name="left-col"
-      />
-    </div>
-    <div class="main-content">
-      <slot />
-    </div>
-    <div class="block-right">
-      <slot
-        name="right-col"
-      />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts"></script>
-
-<style scoped>
-.center-container {
-  display: flex;
-  flex-direction: row;
-  padding: var(--spacing-xxl) var(--spacing-ml);
-  gap: var(--spacing-ml);
-  width: 100%;
-  justify-content: center;
-  margin: 0 auto;
-}
-
-.main-content {
-  width: var(--layout-content-width);
-  padding: 0 var(--spacing-ml);
-  box-sizing: content-box;
-}
-
-.block-left, .block-right{
-  width: var(--layout-sidebar-width);
-  padding: 0 var(--spacing-ml);
-}
-</style>
diff --git a/src/presentation/pages/History.vue b/src/presentation/pages/History.vue
index aba71bfd..46739304 100644
--- a/src/presentation/pages/History.vue
+++ b/src/presentation/pages/History.vue
@@ -1,5 +1,5 @@
 <template>
-  <ThreeColsLayout data-dimensions="large">
+  <PageBlock data-dimensions="large">
     <div :class="$style['history']">
       <div :class="$style['history__page-header']">
         <Heading
@@ -47,12 +47,11 @@
         </Container>
       </div>
     </div>
-  </ThreeColsLayout>
+  </PageBlock>
 </template>
 
 <script setup lang="ts">
-import { Heading, Container, Row, Avatar, Button } from 'codex-ui/vue';
-import ThreeColsLayout from '../layouts/ThreeColsLayout.vue';
+import { Heading, Container, Row, Avatar, Button, PageBlock } from 'codex-ui/vue';
 import useNoteHistory from '@/application/services/useNoteHistory';
 import useNavbar from '@/application/services/useNavbar';
 import useNote from '@/application/services/useNote';
diff --git a/src/presentation/pages/HistoryVersion.vue b/src/presentation/pages/HistoryVersion.vue
index ac3fa65f..2b61dc9c 100644
--- a/src/presentation/pages/HistoryVersion.vue
+++ b/src/presentation/pages/HistoryVersion.vue
@@ -34,17 +34,19 @@
         </Button>
       </template>
     </NoteHeader>
-    <Editor
-      v-if="isEditorReady"
-      ref="editor"
-      v-bind="editorConfig"
-    />
+    <PageBlock>
+      <Editor
+        v-if="isEditorReady"
+        ref="editor"
+        v-bind="editorConfig"
+      />
+    </PageBlock>
   </div>
 </template>
 
 <script lang="ts" setup>
 import { ref, toRef, watch } from 'vue';
-import { Editor, Button, Avatar } from 'codex-ui/vue';
+import { Editor, Button, Avatar, PageBlock } from 'codex-ui/vue';
 import NoteHeader from '@/presentation/components/note-header/NoteHeader.vue';
 import useHistory from '@/application/services/useNoteHistory';
 import { useNoteEditor } from '@/application/services/useNoteEditor';
diff --git a/src/presentation/pages/Home.vue b/src/presentation/pages/Home.vue
index 12b279be..6db44127 100644
--- a/src/presentation/pages/Home.vue
+++ b/src/presentation/pages/Home.vue
@@ -1,5 +1,5 @@
 <template>
-  <ThreeColsLayout data-dimensions="large">
+  <PageBlock data-dimensions="large">
     <router-link
       v-if="user"
       to="/new"
@@ -49,17 +49,15 @@
     <NoteList
       v-else-if="user !== undefined"
     />
-  </ThreeColsLayout>
+  </PageBlock>
 </template>
 
 <script setup lang="ts">
 import { useHead } from 'unhead';
 import { useI18n } from 'vue-i18n';
 import { useAppState } from '@/application/services/useAppState';
-import { Container, Row, Button, Heading } from 'codex-ui/vue';
+import { Container, Row, Button, Heading, PageBlock } from 'codex-ui/vue';
 import Hammer from '../components/pictures/Hammer.vue';
-
-import ThreeColsLayout from '@/presentation/layouts/ThreeColsLayout.vue';
 import NoteList from '@/presentation/components/note-list/NoteList.vue';
 import useAuth from '@/application/services/useAuth';
 
diff --git a/src/presentation/pages/NoteSettings.vue b/src/presentation/pages/NoteSettings.vue
index 9f8c92d7..ba9ec1ca 100644
--- a/src/presentation/pages/NoteSettings.vue
+++ b/src/presentation/pages/NoteSettings.vue
@@ -1,5 +1,5 @@
 <template>
-  <ThreeColsLayout data-dimensions="large">
+  <PageBlock data-dimensions="large">
     <div
       v-if="noteSettings"
       class="note-settings"
@@ -93,7 +93,7 @@
     <div v-else>
       Loading...
     </div>
-  </ThreeColsLayout>
+  </PageBlock>
 </template>
 
 <script lang="ts" setup>
@@ -105,8 +105,7 @@ import { useI18n } from 'vue-i18n';
 import { computed, ref, onMounted, watch } from 'vue';
 import { useDebounceFn } from '@vueuse/core';
 import Team from '@/presentation/components/team/Team.vue';
-import { Section, Row, Switch, Button, Heading, Fieldset, Input, Card } from 'codex-ui/vue';
-import ThreeColsLayout from '@/presentation/layouts/ThreeColsLayout.vue';
+import { Section, Row, Switch, Button, Heading, Fieldset, Input, Card, PageBlock } from 'codex-ui/vue';
 import { getTitle } from '@/infrastructure/utils/note';
 import { getTimeFromNow } from '@/infrastructure/utils/date';
 import InviteLink from '@/presentation/components/noteSettings/InviteLink.vue';
diff --git a/src/presentation/pages/Settings.vue b/src/presentation/pages/Settings.vue
index c1a0c05c..731524af 100644
--- a/src/presentation/pages/Settings.vue
+++ b/src/presentation/pages/Settings.vue
@@ -1,5 +1,5 @@
 <template>
-  <ThreeColsLayout data-dimensions="large">
+  <PageBlock data-dimensions="large">
     <div :class="$style['page-header']">
       <Heading :level="1">
         {{ t('userSettings.title') }}
@@ -157,12 +157,12 @@
         </div>
       </Fieldset>
     </div>
-  </ThreeColsLayout>
+  </PageBlock>
 </template>
 
 <script lang="ts" setup>
 import { useI18n } from 'vue-i18n';
-import { Button, Fieldset, Section, Row, Heading, Card, useTheme, Theme, ColorScheme, ThemePreview, Icon, LightColorShemeIcon, DarkColorShemeIcon, Container, Input } from 'codex-ui/vue';
+import { Button, Fieldset, Section, Row, Heading, Card, useTheme, Theme, ColorScheme, ThemePreview, Icon, LightColorShemeIcon, DarkColorShemeIcon, Container, Input, PageBlock } from 'codex-ui/vue';
 import { Hammer } from '@/presentation/components/pictures';
 import { useRouter } from 'vue-router';
 import useAuth from '@/application/services/useAuth';
@@ -171,7 +171,6 @@ import { useAppState } from '@/application/services/useAppState';
 import { useHead } from 'unhead';
 import { ref } from 'vue';
 import useNavbar from '@/application/services/useNavbar';
-import ThreeColsLayout from '@/presentation/layouts/ThreeColsLayout.vue';
 
 const { user, userEditorTools } = useAppState();
 const { t } = useI18n();
diff --git a/src/presentation/pages/marketplace/AddTool.vue b/src/presentation/pages/marketplace/AddTool.vue
index 392bfa7f..cb1d114e 100644
--- a/src/presentation/pages/marketplace/AddTool.vue
+++ b/src/presentation/pages/marketplace/AddTool.vue
@@ -167,7 +167,6 @@ async function setCover(event: Event) {
   display: flex;
   flex-direction: column;
   gap: var(--spacing-xxl);
-  width: var(--layout-content-width);
 }
 
 .add-tool-button {
diff --git a/src/presentation/pages/marketplace/MarketplacePage.vue b/src/presentation/pages/marketplace/MarketplacePage.vue
index b4b7e38f..cb27bbf7 100644
--- a/src/presentation/pages/marketplace/MarketplacePage.vue
+++ b/src/presentation/pages/marketplace/MarketplacePage.vue
@@ -1,6 +1,6 @@
 <template>
-  <ThreeColsLayout>
-    <template #left-col>
+  <PageBlock>
+    <template #left>
       <VerticalMenu
         class="menu"
         :items="verticalMenuItems"
@@ -9,13 +9,12 @@
     <template #default>
       <router-view />
     </template>
-  </ThreeColsLayout>
+  </PageBlock>
 </template>
 
 <script lang="ts" setup>
-import { VerticalMenu, type VerticalMenuItem } from 'codex-ui/vue';
+import { VerticalMenu, type VerticalMenuItem, PageBlock } from 'codex-ui/vue';
 import { computed, Ref } from 'vue';
-import ThreeColsLayout from '@/presentation/layouts/ThreeColsLayout.vue';
 import { useRoute, useRouter } from 'vue-router';
 
 const route = useRoute();
diff --git a/src/presentation/pages/marketplace/MarketplaceTools.vue b/src/presentation/pages/marketplace/MarketplaceTools.vue
index d46c638b..786b39cb 100644
--- a/src/presentation/pages/marketplace/MarketplaceTools.vue
+++ b/src/presentation/pages/marketplace/MarketplaceTools.vue
@@ -42,7 +42,6 @@ const { tools } = useMarketplace();
   display: flex;
   flex-direction: column;
   gap: var(--spacing-xxl);
-  width: var(--layout-content-width);
 
   &__subheader {
     margin-bottom: var(--spacing-l);