dragonroll/frontend/app/components/partials/ContentSidebar.vue

<script setup>
import { computed, onMounted, onUnmounted, ref, watch } from 'vue';

import { useCampaignService } from '~/services/Campaign.js';
import { emitter } from '~/services/Emitter';
import Server from '~/services/Server';
import { CreateWindow } from '~/services/Windows';

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 notesMeta = computed(() => {
    const count = notes.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;
}

function openCreateNoteWindow() {
    if (!Campaign.value) {
        return;
    }

    CreateWindow('create_note');
}

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

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

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

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

<template>
    <div class="sidebar-shell">
        <nav class="sidebar-actions" aria-label="Campaign tools">
            <button
                class="sidebar-action"
                type="button"
                @click="toggleSidebar"
                :aria-expanded="(!sidebarCollapsed).toString()"
                aria-controls="campaign-notes-list"
                :title="sidebarCollapsed ? 'Expand notes' : 'Collapse notes'"
                :aria-label="sidebarCollapsed ? 'Expand notes' : 'Collapse notes'"
            >
                <img
                    class="sidebar-action-icon"
                    :src="sidebarCollapsed ? '/icons/iconoir/regular/nav-arrow-right.svg' : '/icons/iconoir/regular/nav-arrow-left.svg'"
                    alt=""
                    aria-hidden="true"
                >
            </button>

            <button
                class="sidebar-action"
                type="button"
                @click="openCreateNoteWindow"
                :disabled="!Campaign"
                title="New note"
                aria-label="New note"
            >
                <img class="sidebar-action-icon" src="/icons/iconoir/regular/plus.svg" alt="" aria-hidden="true">
            </button>

            <button
                class="sidebar-action"
                type="button"
                @click="fetchCampaignNotes"
                :disabled="!Campaign || loadingNotes"
                title="Refresh notes"
                aria-label="Refresh notes"
            >
                <img class="sidebar-action-icon" src="/icons/iconoir/regular/refresh.svg" alt="" aria-hidden="true">
            </button>
        </nav>

        <aside class="notes-sidebar" :class="{ collapsed: sidebarCollapsed }">
            <div class="sidebar-header">
                <div class="sidebar-copy">
                    <span class="sidebar-eyebrow">Campaign</span>
                    <strong class="sidebar-title">Notes</strong>
                    <span class="sidebar-meta">{{ notesMeta }}</span>
                </div>
            </div>

            <div 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>
    </div>
</template>

<style scoped>
.sidebar-shell {
    min-height: 0;
    flex-shrink: 0;
    display: flex;
}

.sidebar-actions {
    width: 32px;
    min-width: 32px;
    padding: 8px 6px;
    border-right: 1px solid var(--color-border);
    background-color: var(--color-background-light);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.sidebar-action {
    width: 34px;
    height: 34px;
    margin: 0;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    background: var(--color-background-soft);
    box-shadow: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.sidebar-action:hover {
    background: var(--color-button-hover);
}

.sidebar-action:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

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

.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;
    overflow: hidden;
    transition: width 0.2s ease, min-width 0.2s ease, border-color 0.2s ease;
}

.notes-sidebar.collapsed {
    width: 0;
    min-width: 0;
    border-right-color: transparent;
}

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

.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 {
    width: 280px;
    min-width: 280px;
    box-sizing: border-box;
    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 {
    width: 100%;
    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;
    }

    .sidebar-header,
    .sidebar-list {
        width: 220px;
        min-width: 220px;
    }
}
</style>