kjdskjk

frontend/app/components/partials/ContentSidebar.vue

@@ -2,63 +2,26 @@
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
 
 import { useCampaignService } from '~/services/Campaign.js';
+import { FetchCampaignNotes, PushNote, TotalNotes } from '~/services/Content';
 import { emitter } from '~/services/Emitter';
 import Server from '~/services/Server';
 
 const { Campaign } = useCampaignService();
-const notes = ref([]);
 const loadingNotes = ref(false);
 const notesError = ref('');
 const sidebarCollapsed = ref(false);
 
+const selectedTool = ref('');
+
 const campaignId = computed(() => {
     return Campaign.value?._id ?? Campaign.value?.id ?? null;
 });
 
 const notesMeta = computed(() => {
-    const count = notes.value.length;
+    const count = TotalNotes.value.length;
     return `${count} ${count === 1 ? 'note' : 'notes'}`;
 });
 
-async function fetchCampaignNotes() {
-    if (!campaignId.value) {
-        notes.value = [];
-        notesError.value = '';
-        return;
-    }
-
-    loadingNotes.value = true;
-    notesError.value = '';
-
-    try {
-        const response = await Server().get('/note/list', {
-            params: {
-                campaign: campaignId.value
-            }
-        });
-
-        if (response.data.status !== 'ok') {
-            notes.value = [];
-            notesError.value = response.data.msg ?? 'Unable to load notes.';
-            return;
-        }
-
-        notes.value = response.data.notes.map((note) => {
-            return {
-                key: note._id,
-                title: note.title,
-                text: note.content ?? '',
-                date: note.date
-            };
-        });
-    } catch (error) {
-        notes.value = [];
-        notesError.value = 'Unable to load notes.';
-    } finally {
-        loadingNotes.value = false;
-    }
-}
-
 function toggleSidebar() {
     sidebarCollapsed.value = !sidebarCollapsed.value;
 }
@@ -89,7 +52,7 @@ async function createNote() {
 
 
 function openNote(note) {
-    emitter.emit('push-note', note);
+    PushNote(note);
 }
 
 function handleNoteCreated(note) {
@@ -109,14 +72,16 @@ function handleNoteCreated(note) {
         date: note.date
     };
 
-    notes.value = notes.value.filter((currentNote) => {
+    TotalNotes.value = TotalNotes.value.filter((currentNote) => {
         return currentNote.key !== createdNote.key;
     });
-    notes.value.unshift(createdNote);
+    TotalNotes.value.unshift(createdNote);
     openNote(createdNote);
 }
 
 onMounted(() => {
+    selectedTool.value = 'notes'; 
+    FetchCampaignNotes();
     emitter.on('note-created', handleNoteCreated);
 });
 
@@ -125,13 +90,13 @@ onUnmounted(() => {
 });
 
 watch(Campaign, () => {
-    fetchCampaignNotes();
+    FetchCampaignNotes();
 }, { immediate: true });
 </script>
 
 <template>
     <div class="sidebar-shell">
-        <nav class="sidebar-actions" aria-label="Campaign tools">
+        <nav class="sidebar-tools" aria-label="Campaign tools">
             <button
                 class="sidebar-action"
                 type="button"
@@ -149,6 +114,23 @@ watch(Campaign, () => {
                 >
             </button>
 
+            <button
+                class="sidebar-action"
+                type="button"
+                @click="selectedTool = 'notes'"
+                :class="{ active: selectedTool === 'notes' }"
+            >
+                <img
+                    class="sidebar-action-icon"
+                    :src="'/icons/iconoir/regular/bookmark-book.svg'"
+                    alt=""
+                    aria-hidden="true"
+                >
+            </button>
+        </nav>
+
+        <aside class="notes-sidebar" :class="{ collapsed: sidebarCollapsed }">
+            <div class="sidebar-actions">
                 <button
                     class="sidebar-action"
                     type="button"
@@ -170,9 +152,8 @@ watch(Campaign, () => {
                 >
                     <img class="sidebar-action-icon" src="/icons/iconoir/regular/refresh.svg" alt="" aria-hidden="true">
                 </button>
-        </nav>
+            </div>
 
-        <aside class="notes-sidebar" :class="{ collapsed: sidebarCollapsed }">
             <div class="sidebar-header">
                 <div class="sidebar-copy">
                     <span class="sidebar-eyebrow">Campaign</span>
@@ -190,13 +171,13 @@ watch(Campaign, () => {
                     {{ notesError }}
                 </div>
 
-                <div v-else-if="notes.length === 0" class="sidebar-state">
+                <div v-else-if="TotalNotes.length === 0" class="sidebar-state">
                     No notes in this campaign yet.
                 </div>
 
                 <template v-else>
                     <button
-                        v-for="note in notes"
+                        v-for="note in TotalNotes"
                         :key="note.key"
                         type="button"
                         class="note-link"
@@ -217,7 +198,7 @@ watch(Campaign, () => {
     display: flex;
 }
 
-.sidebar-actions {
+.sidebar-tools {
     width: 32px;
     min-width: 32px;
     padding: 8px 6px;
@@ -229,6 +210,11 @@ watch(Campaign, () => {
     gap: 4px;
 }
 
+.sidebar-actions {
+    display: flex;
+    justify-content: center;
+}
+
 .sidebar-action {
     width: 34px;
     height: 34px;
@@ -242,10 +228,18 @@ watch(Campaign, () => {
     align-items: center;
     justify-content: center;
     cursor: pointer;
+
+    
+    &.active {
+        background-color: var(--color-selected);
+    }
 }
 
 .sidebar-action:hover {
     background: var(--color-button-hover);
+    &.active {
+        background-color: var(--color-selected);
+    }
 }
 
 .sidebar-action:disabled {

frontend/app/components/viewer/TopBar.vue

@@ -10,32 +10,6 @@ const campaignName = computed(() => {
     return Campaign.value?.name ?? 'Campaign';
 });
 
-async function createNote() {
-    if (!Campaign.value) {
-        return;
-    }
-
-    const campaignId = Campaign.value?._id 
-
-    try {
-        const response = await Server().post('/note/create', {
-            title: 'New note',
-            content: content.value,
-            campaign: campaignId
-        });
-
-        if (response.data.status !== 'ok') {
-            return;
-        }
-
-        emitter.emit('note-created', response.data.note);
-    } catch (err) {
-        error.value = 'Unable to create note.';
-    } finally {
-        isSaving.value = false;
-    }
-}
-
 function exitToMainMenu() {
     SetCampaign(null);
     SetShowContent(false);
@@ -60,10 +34,6 @@ function exitToMainMenu() {
                 <img class="top-bar-button-icon" src="/icons/iconoir/regular/nav-arrow-left.svg" alt="" aria-hidden="true">
                 <span>Main Menu</span>
             </button>
-            <button class="note-button sound-click" type="button" @click="createNote" :disabled="!Campaign">
-                <img class="note-button-icon" src="/icons/iconoir/regular/plus.svg" alt="" aria-hidden="true">
-                <span>New Note</span>
-            </button>
         </div>
     </div>
 </template>

frontend/app/components/viewer/content/Note.vue

@@ -1,11 +1,8 @@
 <script setup>
 import { onMounted, onUnmounted, ref, createApp } from 'vue';
-import ToastManager from '~/components/managers/ToastManager.vue';
-import { emitter } from '~/services/Emitter';
 import { GetWidget, ParseMarkdown } from '~/services/Marker';
 import Server from '~/services/Server';
-import { DisplayToast } from '~/services/Toaster';
+import { DeleteNote, FetchCampaignNotes } from '~/services/Content';
-import TestWidget from '../widgets/TestWidget.vue';
 
 // import { GetNote, GetContent } from '@/services/Content';
 const props = defineProps(['text', 'title', 'noteKey']);
@@ -15,12 +12,11 @@ const sourceText = ref(''); // Original markdown source, used for editing
 const displayText = ref(''); // Compiled HTML from markdown
 
 const editingMode = ref(false);
-const editableTitle = ref(null);
 const title = ref(props.title);
 const displayTitle = ref('');
 
 function closeNote(){
-    emitter.emit('delete-note', props.noteKey);
+  DeleteNote(props.noteKey);
 }
 
 const compiledMarkdown = computed(() => {
@@ -29,7 +25,7 @@ const compiledMarkdown = computed(() => {
 
 function mountComponents() {
   // Should no need more
-  const widget_types = ['display', 'inline'];
+  const widget_types = ['display', 'inline', 'link'];
   widget_types.forEach((widget_type) => {
     const nodes = document.querySelectorAll('.vue-component-' + widget_type);
     nodes.forEach(el => {
@@ -96,6 +92,7 @@ function SaveNote(){
             return;
         }
         // DisplayToast('green', "Note saved successfully.", 500);
+        FetchCampaignNotes();
     }).catch((error) => {
         // Handle error (e.g., show a notification)
     });
@@ -149,6 +146,7 @@ function setupCallout() {
 
 const editTitle = (e) => {
   title.value = e.target.innerText;
+  SaveNote();
 }
 
 </script>

frontend/app/components/viewer/content/NoteContainer.vue

@@ -1,19 +1,23 @@
 <script setup>
-import { onMounted, onUnmounted, ref } from 'vue';
+import { ref } from 'vue';
 import Note from './Note.vue';
-import { emitter } from '~/services/Emitter';
+import { CurrentNotes, TotalNotes } from '~/services/Content';
-
-let noteData = ref([]);
 
 const noteContainer = ref(null);
 
+const computedCurrentNotes = computed(() => {
+    return CurrentNotes.value
+    .map(key => TotalNotes.value.find(note => note.key === key))
+    .filter(Boolean);
+})
+
 function calculateContainerWidth(){
     let dom = noteContainer.value;
     if (!dom) {
         return;
     }
 
-    dom.style.width = noteData.value.length * 701 + "px";
+    dom.style.width = CurrentNotes.value.length * 701 + "px";
     
     setTimeout(() => {
         for(let i = 0; i < dom.children.length; i++){
@@ -25,42 +29,14 @@ function calculateContainerWidth(){
     }, 0);
 }
 
-function pushNote(note){
+watch(CurrentNotes, calculateContainerWidth);
-    noteData.value = noteData.value.filter((currentNote) => {
-        return currentNote.key !== note.key;
-    });
-    noteData.value.push(note);
-    calculateContainerWidth();
-}
-
-function handlePushNote(note) {
-    pushNote(note);
-}
-
-function handleDeleteNote(key) {
-    noteData.value = noteData.value.filter((note) => {
-        return note.key !== key;
-    });
-    calculateContainerWidth();
-}
-
-// Moure aixo
-onMounted(() => {
-    emitter.on("push-note", handlePushNote);
-    emitter.on("delete-note", handleDeleteNote);
-});
-
-onUnmounted(() => {
-    emitter.off("push-note", handlePushNote);
-    emitter.off("delete-note", handleDeleteNote);
-});
 
 </script>
 
 <template>
 <div class="note-scrolling-container" id="note-scrolling-container">
     <div class="note-container" ref="noteContainer" >
-        <Note v-for="element in noteData" :key="element.key" :text="element.text" :title="element.title" :noteKey="element.key"></Note>
+        <Note v-for="element in computedCurrentNotes" :key="element.key" :text="element.text" :title="element.title" :noteKey="element.key"></Note>
     </div>
 </div>
 </template>

frontend/app/components/viewer/widgets/link/NoteLink.vue

@@ -0,0 +1,25 @@
+<script setup>
+import { computed } from 'vue'
+import { PushNote, GetNoteByName } from '~/services/Content';
+
+const props = defineProps(['content'])
+
+const parts = computed(() => props.content?.split('|') ?? [])
+
+const href = computed(() => parts.value[0] || '')
+const text = computed(() => parts.value[1] || parts.value[0] || '')
+
+
+function handleClick() {
+  // your custom logic here
+  PushNote(GetNoteByName(href.value));
+}
+
+
+</script>
+
+<template>
+  <a href="#" @click.prevent="handleClick">
+    {{ text }}
+  </a>
+</template>

frontend/app/services/Content.js

@@ -1,12 +1,76 @@
 import { ref } from 'vue';
+import { useCampaignService } from '~/services/Campaign.js';
+import Server from './Server';
 
 const ShowContent = ref(false);
 
+const TotalNotes = ref([]); // Full note data
+const CurrentNotes = ref([]); // Current opened note keys
+
 function SetShowContent(value) {
     ShowContent.value = value;
 }
 
+function PushNote(note){
+    CurrentNotes.value = CurrentNotes.value.filter((currentNote) => {
+        return currentNote.key !== note.key;
+    });
+    CurrentNotes.value.push(note.key);
+}
+
+function DeleteNote(key){
+    CurrentNotes.value = CurrentNotes.value.filter((k) => {
+        return k !== key;
+    });
+}
+
+async function FetchCampaignNotes() {
+    // First we get campaign info
+    const { Campaign } = useCampaignService();
+    const campaignId = Campaign.value?._id ?? Campaign.value?.id ?? null;
+
+    if (!campaignId) {
+        TotalNotes.value = [];
+        return;
+    }
+
+    try {
+        const response = await Server().get('/note/list', {
+            params: {
+                campaign: campaignId
+            }
+        });
+        
+        if (response.data.status !== 'ok') {
+            // TODO: ERROR
+            return;
+        }
+        TotalNotes.value = response.data.notes.map((note) => {
+            return {
+                key: note._id,
+                title: note.title,
+                text: note.content ?? '',
+                date: note.date
+            };
+        });
+    } catch (error) {
+        // TODO: ERROR
+        console.error(error);
+        return;
+    }
+}
+
+function GetNoteByName(name){
+    return TotalNotes.value.find(note => note.title == name);
+}
+
 export {
     ShowContent,
-    SetShowContent
+    SetShowContent,
+    CurrentNotes,
+    FetchCampaignNotes,
+    TotalNotes,
+    PushNote,
+    DeleteNote,
+    GetNoteByName
 }

frontend/app/services/Marker.js

@@ -5,12 +5,16 @@ const widget_map = {
   },
   display: {
     roll: () => import("~/components/viewer/widgets/display/RollWidgetDisplay.vue"),
+  },
+  link: {
+    link: () => import("~/components/viewer/widgets/link/NoteLink.vue")
   }
 };
 
 const componentCache = {
   inline: {},
-  display: {}
+  display: {},
+  link: {}
 }
 
 const GetWidget = (type, name) => {
@@ -94,7 +98,7 @@ const linkExtension = {
   },
 
   renderer(token) {
-    return `<span class="vue-link" data-href="${token.link}"></span>`;
+    return `<span class="vue-component-link" data-component="link" data-content="${token.link}"></span>`;
   },
 };
 

frontend/app/services/StatusBar.js

@@ -0,0 +1,3 @@
+import { ref } from 'vue';
+
+const statusMessage = ref("")