feat(new homepage navigation): add section "my notes" to homepage navigation

src/application/i18n/messages/en.json

@@ -100,8 +100,17 @@
       "caption": "Knowledge storage and presentation",
       "button": "New"
     },
+    "sections": {
+      "recents": {
+        "title": "Recents"
+      },
+      "myNotes": {
+        "title": "My notes"
+      }
+    },
+    "navigation": "Navigation",
     "updated": "Updated",
-    "title": "Recents",
+    "title": "Home",
     "authText": "You are not logged in, log in to see your recent notes"
   },
   "error": {

src/application/services/useNoteList.ts

@@ -38,8 +38,9 @@ interface UseNoteListComposableState {
 
 /**
  * Application service for working with the Note list
+ * @param onlyCreatedByUser - if true, returns notes created by the user
  */
-export default function (): UseNoteListComposableState {
+export default function (onlyCreatedByUser = false): UseNoteListComposableState {
   /**
    * NoteList ref
    */
@@ -74,7 +75,7 @@ export default function (): UseNoteListComposableState {
   const load = async (page: number): Promise<NoteList> => {
     isLoading.value = true;
 
-    const list = await noteListService.getNoteList(page);
+    const list = await noteListService.getNoteList(page, onlyCreatedByUser);
 
     isLoading.value = false;
 

src/domain/note.repository.interface.ts

@@ -26,8 +26,9 @@ export default interface NoteRepositoryInterface {
   /**
    * Returns a list of notes
    * @param page - number of pages
+   * @param onlyCreatedByUser - if true, returns notes created by the user
    */
-  getNoteList(page: number): Promise<NoteList>;
+  getNoteList(page: number, onlyCreatedByUser?: boolean): Promise<NoteList>;
 
   /**
    * Creates a new note

src/domain/noteList.service.ts

@@ -23,10 +23,11 @@ export default class NoteListService {
    * Returns note list
    * @todo - move loading images data logic to separate service for optimization
    * @param page - number of current pages
+   * @param onlyCreatedByUser - if true, returns notes created by the user
    * @returns list of notes
    */
-  public async getNoteList(page: number): Promise<NoteList> {
-    const noteList = await this.repository.getNoteList(page);
+  public async getNoteList(page: number, onlyCreatedByUser = false): Promise<NoteList> {
+    const noteList = await this.repository.getNoteList(page, onlyCreatedByUser);
 
     /**
      * Note list with valid image urls in cover

src/infrastructure/note.repository.ts

@@ -62,9 +62,12 @@ export default class NoteRepository implements NoteRepositoryInterface {
   /**
    * Gets note list
    * @param page - number of pages to get
+   * @param onlyCreatedByUser - if true, returns notes created by the user, otherwise returns all notes
    */
-  public async getNoteList(page: number): Promise<NoteList> {
-    return await this.transport.get<NoteList>(`/notes`, { page });
+  public async getNoteList(page: number, onlyCreatedByUser = false): Promise<NoteList> {
+    const endpoint = onlyCreatedByUser ? '/notes/created' : '/notes';
+
+    return await this.transport.get<NoteList>(endpoint, { page });
   }
 
   /**

src/presentation/components/note-list/NoteList.vue

@@ -46,12 +46,23 @@ import { getTitle } from '@/infrastructure/utils/note';
 import { useI18n } from 'vue-i18n';
 import { Card, CardSkeleton, Button } from '@codexteam/ui/vue';
 
+interface Props {
+  /**
+   * If true, returns notes created by the user
+   */
+  onlyCreatedByUser?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  onlyCreatedByUser: false,
+});
+
 const {
   noteList,
   loadMoreNotes,
   hasMoreNotes,
   isLoading,
-} = useNoteList();
+} = useNoteList(props.onlyCreatedByUser);
 const { t } = useI18n();
 
 /**

src/presentation/pages/Home.vue

@@ -1,40 +1,10 @@
 <template>
-  <PageBlock data-dimensions="large">
-    <router-link
-      v-if="user"
-      to="/new"
-    >
+  <PageBlock
+    data-dimensions="large"
+  >
+    <!-- Unauthorized users -->
+    <template v-if="!user">
       <Container>
-        <div :class="$style['container__create-new-note']">
-          <Row
-            :title="t('home.createNewNote.title')"
-            :subtitle="t('home.createNewNote.caption')"
-          >
-            <template #left>
-              <Hammer />
-            </template>
-            <template #right>
-              <Button
-                secondary
-                trailing-icon="ChevronRight"
-              >
-                {{ t('home.createNewNote.button') }}
-              </Button>
-            </template>
-          </Row>
-        </div>
-      </Container>
-    </router-link>
-    <Heading
-      v-if="user"
-      :level="1"
-      :class="$style['page-header']"
-    >
-      {{ $t('home.title') }}
-    </Heading>
-
-    <div v-if="user === null">
-      <Container data-dimensions="large">
         <Row :title="t('home.authText')">
           <template #right>
             <Button
@@ -45,26 +15,102 @@
           </template>
         </Row>
       </Container>
-    </div>
-    <NoteList
-      v-else-if="user !== undefined"
-    />
+    </template>
+
+    <!-- Authorized users - menu -->
+    <template
+      v-if="user"
+      #left
+    >
+      <VerticalMenu
+        class="menu"
+        :items="[verticalMenuItems]"
+      />
+    </template>
+
+    <!-- Authorized users - content -->
+    <template v-if="user">
+      <router-link
+        to="/new"
+      >
+        <Container>
+          <div :class="$style['container__create-new-note']">
+            <Row
+              :title="t('home.createNewNote.title')"
+              :subtitle="t('home.createNewNote.caption')"
+            >
+              <template #left>
+                <Hammer />
+              </template>
+              <template #right>
+                <Button
+                  secondary
+                  trailing-icon="ChevronRight"
+                >
+                  {{ t('home.createNewNote.button') }}
+                </Button>
+              </template>
+            </Row>
+          </div>
+        </Container>
+      </router-link>
+
+      <Heading
+        :level="1"
+        :class="$style['page-header']"
+      >
+        {{ sectionTitle }}
+      </Heading>
+      <NoteList
+        :key="activeMenuItem"
+        :only-created-by-user="tabs[activeMenuItem].onlyCreatedByUser"
+      />
+    </template>
   </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, PageBlock } from '@codexteam/ui/vue';
+import { Container, Row, Button, Heading, PageBlock, VerticalMenu, type VerticalMenuItem } from '@codexteam/ui/vue';
 import Hammer from '../components/pictures/Hammer.vue';
 import NoteList from '@/presentation/components/note-list/NoteList.vue';
 import useAuth from '@/application/services/useAuth';
+import { computed, ref } from 'vue';
 
 const { user } = useAppState();
 const { t } = useI18n();
 const { showGoogleAuthPopup } = useAuth();
 
+const tabs = {
+  recents: {
+    titleKey: 'home.sections.recents.title',
+    onlyCreatedByUser: false,
+  },
+  myNotes: {
+    titleKey: 'home.sections.myNotes.title',
+    onlyCreatedByUser: true,
+  },
+};
+
+type TabId = keyof typeof tabs;
+
+const activeMenuItem = ref<TabId>('recents');
+const sectionTitle = computed(() => t(tabs[activeMenuItem.value].titleKey));
+
+const verticalMenuItems = computed<VerticalMenuItem>(() => ({
+  title: t('home.navigation'),
+  isActive: false,
+  items: (Object.keys(tabs) as TabId[]).map(tabId => ({
+    title: t(tabs[tabId].titleKey),
+    isActive: activeMenuItem.value === tabId,
+    onActivate: () => {
+      activeMenuItem.value = tabId;
+    },
+  })),
+}));
+
 /**
  * Changing the title in the browser
  */
@@ -85,6 +131,6 @@ useHead({
 }
 
 .page-header {
-  padding: var(--spacing-xxl) var(--h-padding) 0;
+  padding-top: var(--spacing-xxl);
 }
 </style>

yarn.lock

@@ -2519,9 +2519,9 @@ __metadata:
   linkType: hard
 
 "caniuse-lite@npm:^1.0.30001587, caniuse-lite@npm:^1.0.30001599":
-  version: 1.0.30001620
-  resolution: "caniuse-lite@npm:1.0.30001620"
-  checksum: 1831e519c29ce6971bc50d56bab196a307fcb4181e7deaa80df314b035b87b3912b8626b4e87adc301d0bfe6a90b99814101b1cb28114b96e720f996f19bdc0d
+  version: 1.0.30001754
+  resolution: "caniuse-lite@npm:1.0.30001754"
+  checksum: f5a956d820c6a4de16d0c22eb6bbbbaec346f502f324523311bbbfe4dd8ed0d69ae6034dd96a2f901156f3e4571606670be01f74c8234ac56ea7820383b6aca0
   languageName: node
   linkType: hard