dragonroll/frontend/app/components/managers/ContentManager.vue

<script setup>
import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
import Content from '../viewer/content/Content.vue';
import StatusBar from '../viewer/statusbar/StatusBar.vue';
import TopBar from '../viewer/TopBar.vue';

import { ShowContent } from '../../services/Content.js';
import { useCampaignService } from '~/services/Campaign.js';
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 campaignId = computed(() => {
    return Campaign.value?._id ?? Campaign.value?.id ?? null;
});

const campaignName = computed(() => {
    return Campaign.value?.name ?? 'Campaign';
});

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

function openNote(note) {
    emitter.emit('push-note', note);
}

function handleNoteCreated(note) {
    if (!note) {
        return;
    }

    const noteCampaignId = note.campaign?._id ?? note.campaign ?? null;
    if (campaignId.value && noteCampaignId && noteCampaignId !== campaignId.value) {
        return;
    }

    const createdNote = {
        key: note._id,
        title: note.title,
        text: note.content ?? '',
        date: note.date
    };

    notes.value = notes.value.filter((currentNote) => {
        return currentNote.key !== createdNote.key;
    });
    notes.value.unshift(createdNote);
    openNote(createdNote);
}

function formatNoteDate(date) {
    if (!date) return '';
    return new Date(date).toLocaleDateString();
}

onMounted(() => {
    emitter.on('note-created', handleNoteCreated);
});

onUnmounted(() => {
    emitter.off('note-created', handleNoteCreated);
});

watch(Campaign, () => {
    if(Campaign.value) ShowContent.value = true;
    fetchCampaignNotes();
}, { immediate: true });
</script>

<template>
    <div v-show="ShowContent" class="content-manager">
        <TopBar></TopBar>
        <div class="content-layout">
            <aside class="notes-sidebar" :class="{ collapsed: sidebarCollapsed }">
                <div class="sidebar-header">
                    <button
                        class="sidebar-toggle"
                        type="button"
                        @click="toggleSidebar"
                        :aria-expanded="(!sidebarCollapsed).toString()"
                        aria-controls="campaign-notes-list"
                    >
                        <img
                            class="sidebar-toggle-icon"
                            :src="sidebarCollapsed ? '/icons/iconoir/regular/nav-arrow-right.svg' : '/icons/iconoir/regular/nav-arrow-left.svg'"
                            alt=""
                            aria-hidden="true"
                        >
                    </button>

                    <div v-if="!sidebarCollapsed" class="sidebar-copy">
                        <span class="sidebar-eyebrow">Campaign Notes</span>
                        <strong class="sidebar-title">{{ campaignName }}</strong>
                        <span class="sidebar-meta">{{ notes.length }} note<span v-if="notes.length !== 1">s</span></span>
                    </div>
                </div>

                <div v-if="!sidebarCollapsed" id="campaign-notes-list" class="sidebar-list">
                    <div v-if="loadingNotes" class="sidebar-state">
                        Loading notes...
                    </div>

                    <div v-else-if="notesError" class="sidebar-state error">
                        {{ notesError }}
                    </div>

                    <div v-else-if="notes.length === 0" class="sidebar-state">
                        No notes in this campaign yet.
                    </div>

                    <template v-else>
                        <button
                            v-for="note in notes"
                            :key="note.key"
                            type="button"
                            class="note-link"
                            @click="openNote(note)"
                        >
                            <span class="note-link-title">{{ note.title }}</span>
                        </button>
                    </template>
                </div>
            </aside>

            <Content></Content>
        </div>
        <StatusBar></StatusBar>
    </div>
</template>

<style scoped>
.content-manager {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.content-layout {
    min-height: 0;
    flex: 1;
    display: flex;
}

.notes-sidebar {
    width: 280px;
    min-width: 280px;
    border-right: 1px solid var(--color-border);
    background-color: var(--color-background-light);
    display: flex;
    flex-direction: column;
    transition: width 0.2s ease, min-width 0.2s ease;
}

.notes-sidebar.collapsed {
    width: 54px;
    min-width: 54px;
}

.sidebar-header {
    padding: 12px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    border-bottom: 1px solid var(--color-border);
}

.sidebar-toggle {
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-background-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.sidebar-toggle-icon {
    width: 18px;
    height: 18px;
  filter: invert(var(--color-icon-invert));
}

.sidebar-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.sidebar-eyebrow,
.sidebar-meta {
    font-size: 12px;
    opacity: 0.7;
}

.sidebar-title {
    line-height: 1.2;
    word-break: break-word;
}

.sidebar-list {
    padding: 10px;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.sidebar-state {
    padding: 12px;
    border-radius: 10px;
    background: var(--color-background-soft);
    font-size: 14px;
}

.sidebar-state.error {
    color: #9e2a2b;
}

.note-link {
    padding: 6px;
    margin: 0;
    box-shadow: none;
    border: none;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    cursor: pointer;
    transition: transform 0.15s ease, background-color 0.15s ease;
}

.note-link:hover {
    transform: translateX(2px);
    background: var(--color-background-light);
}

.note-link-title {
    font-weight: 600;
    word-break: break-word;
}

.note-link-date {
    font-size: 12px;
    opacity: 0.7;
}

@media (max-width: 900px) {
    .notes-sidebar {
        width: 220px;
        min-width: 220px;
    }
}
</style>