Merge branch 'main' of https://github.com/codex-team/notes.web into fix/note-title-composer

Author: devnull-1337

.github/workflows/npm-publish.yml

@@ -0,0 +1,60 @@
+name: Publish CodeX UI to NPM
+
+on:
+  push:
+    branches:
+      - main
+    paths:
+      - '@codexteam/ui/**'
+
+jobs:
+  publish-ui:
+    name: Publish @codexteam/ui package
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3
+
+      - name: Setup Node.js from .nvmrc
+        uses: actions/setup-node@v3
+        with:
+          node-version-file: '.nvmrc'
+
+      - name: Install dependencies
+        working-directory: '@codexteam/ui'
+        run: yarn install
+
+      - name: Build package
+        working-directory: '@codexteam/ui'
+        run: yarn build
+
+      - name: Publish package to npm
+        working-directory: '@codexteam/ui'
+        run: yarn publish --access=public
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
+
+  notify:
+    name: Notify in CodexBot
+    needs: publish-ui
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v3
+
+      - name: Get UI package info
+        id: ui-package
+        uses: codex-team/action-nodejs-package-info@v1
+        with:
+          package_json_path: '@codexteam/ui/package.json'
+
+      - name: Send a message
+        uses: codex-team/action-codexbot-notify@v1
+        with:
+          webhook: ${{ secrets.CODEX_BOT_WEBHOOK_HAWK }}
+          message: |
+            [${{ steps.ui-package.outputs.name }}](${{ steps.ui-package.outputs.npmjs-link }}) v${{ steps.ui-package.outputs.version }} was published
+          parse_mode: markdown
+          disable_web_page_preview: true

src/application/services/useNote.ts

@@ -72,6 +72,11 @@ interface UseNoteComposableState {
    */
   unlinkParent: () => Promise<void>;
 
+  /**
+   * Returns an array of note parents for the current note.
+   */
+  noteParents: Ref<Note[]>;
+
   /**
    * Defines if user can edit note
    */
@@ -165,6 +170,12 @@ export default function (options: UseNoteComposableOptions): UseNoteComposableSt
    */
   const parentNote = ref<Note | undefined>(undefined);
 
+  /**
+   * Note parents of the actual note
+   *
+   * Actual note by default
+   */
+  const noteParents = ref<Note[]>([]);
   /**
    * Note hierarchy
    *
@@ -194,6 +205,7 @@ export default function (options: UseNoteComposableOptions): UseNoteComposableSt
       canEdit.value = response.accessRights.canEdit;
       noteTools.value = response.tools;
       parentNote.value = response.parentNote;
+      noteParents.value = response.parents;
       void getNoteHierarchy(id);
     } catch (error) {
       deleteOpenedPageByUrl(route.path);
@@ -399,6 +411,7 @@ export default function (options: UseNoteComposableOptions): UseNoteComposableSt
     resolveToolsByContent,
     save,
     unlinkParent,
+    noteParents,
     parentNote,
     noteHierarchy,
   };

src/domain/entities/NoteDTO.ts

@@ -25,4 +25,9 @@ export interface NoteDTO {
    * Editor tools
    */
   tools: EditorTool[];
+
+  /**
+   * Note parents
+   */
+  parents: Note[];
 }

src/infrastructure/transport/notes-api/types/GetNoteResponsePayload.ts

@@ -10,4 +10,5 @@ export type GetNoteResponsePayload = {
   accessRights: NoteAccessRights;
   parentNote: Note | undefined;
   tools: EditorTool[];
+  parents: Note[];
 };

src/presentation/components/breadcrumbs/BreadCrumbs.vue

@@ -0,0 +1,50 @@
+<template>
+  <RouterLink
+    v-for="(parent, index) in displayedParents"
+    :key="index"
+    :to="{ path: parent.id ? `/note/${parent.id}` : '' }"
+    class="breadcrumb"
+  >
+    {{ parent.content ? getTitle(parent.content) : '...' }}
+    <Icon
+      v-if="index < displayedParents.length - 1"
+      name="ChevronRight"
+    />
+  </RouterLink>
+</template>
+
+<script setup lang="ts">
+
+import { getTitle } from '@/infrastructure/utils/note.ts';
+import { RouterLink } from 'vue-router';
+import { computed } from 'vue';
+import { Note } from '@/domain/entities/Note.ts';
+import { Icon } from '@codexteam/ui/vue';
+
+const props = defineProps<{
+  noteParents: Note[];
+}>();
+/**
+ * Note parents hierarchy
+ * If there are more than 3, only the closest & the furthest ones are shown
+ */
+const displayedParents = computed(() => {
+  if (props.noteParents.length > 3) {
+    return [
+      props.noteParents[0],
+      { id: '',
+        content: null },
+      props.noteParents[props.noteParents.length - 1],
+    ];
+  }
+
+  return props.noteParents;
+});
+</script>
+
+<style scoped>
+.breadcrumb {
+  display: inline-flex;
+  align-items: center;
+}
+</style>

src/presentation/pages/Note.vue

@@ -4,13 +4,18 @@
       :style="{ '--opacity': id && note ? 1 : 0 }"
     >
       <template #left>
-        {{
-          note && 'updatedAt' in note && note.updatedAt
-            ? t('note.lastEdit') + ' ' + getTimeFromNow(note.updatedAt)
-            : t('note.lastEdit') + ' ' + 'a few seconds ago'
-        }}
+        <BreadCrumbs
+          :note-parents="noteParents"
+        />
       </template>
       <template #right>
+        <div class="last_edit">
+          {{
+            note && 'updatedAt' in note && note.updatedAt
+              ? t('note.lastEdit') + ' ' + getTimeFromNow(note.updatedAt)
+              : t('note.lastEdit') + ' ' + 'a few seconds ago'
+          }}
+        </div>
         <!-- @todo when user clicks on + button to add new note the user should see the previous note heirarchy -->
         <Button
           v-if="canEdit"
@@ -60,18 +65,19 @@
 
 <script lang="ts" setup>
 import { computed, ref, toRef, watch } from 'vue';
-import { Button, Editor, type VerticalMenuItem, VerticalMenu, PageBlock } from '@codexteam/ui/vue';
+import { Button, Editor, PageBlock, VerticalMenu, type VerticalMenuItem } from '@codexteam/ui/vue';
 import useNote from '@/application/services/useNote';
 import { useRoute, useRouter } from 'vue-router';
 import { NoteContent } from '@/domain/entities/Note';
 import { useHead } from 'unhead';
 import { useI18n } from 'vue-i18n';
-import { getTimeFromNow } from '@/infrastructure/utils/date';
 import { makeElementScreenshot } from '@/infrastructure/utils/screenshot';
 import useNoteSettings from '@/application/services/useNoteSettings';
 import { useNoteEditor } from '@/application/services/useNoteEditor';
 import NoteHeader from '@/presentation/components/note-header/NoteHeader.vue';
+import BreadCrumbs from '@/presentation/components/breadcrumbs/BreadCrumbs.vue';
 import { NoteHierarchy } from '@/domain/entities/NoteHierarchy';
+import { getTimeFromNow } from '@/infrastructure/utils/date.ts';
 
 const { t } = useI18n();
 
@@ -93,7 +99,7 @@ const props = defineProps<{
 
 const noteId = toRef(props, 'id');
 
-const { note, noteTools, save, noteTitle, canEdit, noteHierarchy } = useNote({
+const { note, noteTools, save, noteTitle, canEdit, noteParents, noteHierarchy } = useNote({
   id: noteId,
 });
 
@@ -164,7 +170,7 @@ async function noteChanged(data: NoteContent): Promise<void> {
       });
     }
     if (updatedNoteCover !== null && props.id !== null) {
-      updateCover(props.id, updatedNoteCover);
+      await updateCover(props.id, updatedNoteCover);
     }
   }
 }
@@ -173,6 +179,7 @@ async function noteChanged(data: NoteContent): Promise<void> {
  * Recursively transform the note hierarchy into a VerticalMenuItem
  *
  * @param noteHierarchyObj - note hierarchy data
+ * @param currentNoteTitle - actual title of note
  * @returns menuItem  - VerticalMenuItem
  */
 
@@ -186,16 +193,14 @@ function transformNoteHierarchy(noteHierarchyObj: NoteHierarchy | null, currentN
   }
 
   // Transform the current note into a VerticalMenuItem
-  const menuItem: VerticalMenuItem = {
+  return {
     title: noteHierarchyObj?.noteTitle || 'Untitled',
     isActive: route.path === `/note/${noteHierarchyObj.noteId}`,
     items: noteHierarchyObj.childNotes ? noteHierarchyObj.childNotes.map(child => transformNoteHierarchy(child, currentNoteTitle)) : undefined,
     onActivate: () => {
       void router.push(`/note/${noteHierarchyObj.noteId}`);
     },
   };
-
-  return menuItem;
 }
 
 const verticalMenuItems = computed<VerticalMenuItem>(() => {
@@ -231,4 +236,9 @@ watch(noteTitle, () => {
   height: fit-content;
   width: auto;
 }
+
+.last_edit {
+  color: var(--base--text-secondary);
+  padding-right: var(--h-padding);
+}
 </style>