feat: feedback pages

frontend/src/components/note/NoteDetail.vue

@@ -12,21 +12,8 @@
         </PText>
       </div>
 
-      <div
-        v-if="note.access_level.can_edit"
-        class="flex flex-col items-center gap-4 md:mt-2 md:flex-row"
-      >
-        <PIconButton
-          class="shrink-0"
-          :icon="PeyEditIcon"
-          type="button"
-          @click="navigateTo({ name: 'note-edit' })"
-        />
-
-        <NoteDeleteButton
-          :note-id="note.uuid"
-          @success="navigateTo({ name: 'notes' })"
-        />
+      <div class="flex flex-col items-center gap-4 md:mt-2 md:flex-row">
+        <slot name="actions" />
       </div>
     </div>
 
@@ -106,25 +93,17 @@
       </div>
     </div>
 
-    <div v-if="linkedNotes?.length" class="mt-8">
+    <div v-if="note.linked_notes.length" class="mt-8">
       <PHeading :lvl="4" responsive>
         {{ t('note.relatedNotes') }}
       </PHeading>
 
       <div class="mt-4 flex flex-wrap gap-2">
-        <NuxtLink
-          v-for="linkedNote in linkedNotes"
-          :key="linkedNote.uuid"
-          class="*:cursor-pointer"
-          :to="linkedNote.to"
-        >
-          <PChip
-            color="primary"
-            :icon="PeyLinkIcon"
-            :label="linkedNote.title"
-            size="small"
-          />
-        </NuxtLink>
+        <NoteLinkChip
+          v-for="linkedNoteId in note.linked_notes"
+          :key="linkedNoteId"
+          :note-id="linkedNoteId"
+        />
       </div>
     </div>
 
@@ -139,57 +118,22 @@
     </div>
 
     <div class="mt-8">
-      <NoteFeedbacks :note="note" />
+      <NoteFeedback :note="note" />
     </div>
   </div>
 </template>
 
 <script lang="ts" setup>
-import { PChip, PHeading, PIconButton, PText, PTooltip } from '@pey/core';
-import { PeyEditIcon, PeyLinkIcon } from '@pey/icons';
+import { PChip, PHeading, PText, PTooltip } from '@pey/core';
 
 const props = defineProps<{ note: Note }>();
 
 const { t } = useI18n();
 const { data: users } = useGetUsers();
-const { data: myNotes } = useGetNotes();
-const { data: mentionedNotes } = useGetNotes({ retrieveMentions: true });
 
 const mentionedUsers = computed(() =>
   users.value?.filter(({ email }) =>
     props.note.mentioned_users.includes(email),
   ),
 );
-const linkedNotes = computed(() => [
-  ...(myNotes.value
-    ?.filter(({ uuid }) => props.note.linked_notes.includes(uuid))
-    .map((note) => ({
-      ...note,
-      to:
-        note.type === NOTE_TYPE.template
-          ? {
-              name: 'template',
-              params: { id: note.uuid },
-            }
-          : {
-              name: 'note',
-              params: {
-                type: NOTE_TYPE_ROUTE_PARAM[note.type],
-                id: note.uuid,
-              },
-            },
-    })) || []),
-  ...(mentionedNotes.value
-    ?.filter(({ uuid }) => props.note.linked_notes.includes(uuid))
-    .map((note) => ({
-      ...note,
-      to: {
-        name: 'note',
-        params: {
-          type: '-',
-          id: note.uuid,
-        },
-      },
-    })) || []),
-]);
 </script>

frontend/src/components/note/NoteLinkChip.vue

@@ -0,0 +1,47 @@
+<template>
+  <NuxtLink v-if="note" class="*:cursor-pointer" :to="noteLinkTo">
+    <PChip
+      color="primary"
+      :icon="PeyLinkIcon"
+      :label="note.title"
+      size="small"
+    />
+  </NuxtLink>
+</template>
+
+<script lang="ts" setup>
+import { PChip } from '@pey/core';
+import { PeyLinkIcon } from '@pey/icons';
+
+const props = defineProps<{ noteId: string }>();
+
+const { data: note } = useGetNote({ id: props.noteId });
+
+const noteLinkTo = computed(() => {
+  if (!note.value) {
+    return undefined;
+  }
+
+  if (note.value.type === NOTE_TYPE.template) {
+    return {
+      name: 'template',
+      params: { id: note.value.uuid },
+    };
+  }
+
+  if (note.value.type === NOTE_TYPE.message) {
+    return {
+      name: 'feedback',
+      params: { type: note.value.feedbackType, id: note.value.uuid },
+    };
+  }
+
+  return {
+    name: 'note',
+    params: {
+      type: NOTE_TYPE_ROUTE_PARAM[note.value.type],
+      id: note.value.uuid,
+    },
+  };
+});
+</script>