feat(ui): integrate layout page block component

codex-ui/src/vue/layout/page-block/PageBlock.vue

@@ -63,6 +63,7 @@ defineProps({
     &--stretched {
       max-width: 100%;
       flex: 2;
+      overflow: hidden;
     }
   }
 

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';

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';

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';
 

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';

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();

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 {

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();

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);