From 139e7d0ef5ac5728985d1deedb45d06bb253770b Mon Sep 17 00:00:00 2001
From: BinarySandia04 <aranseraroig@gmail.com>
Date: Thu, 30 Apr 2026 19:39:53 +0200
Subject: [PATCH] Widgets work

---
 backend/src/routes/campaign.js                |  15 +-
 frontend/README.md                            |  19 +
 frontend/app/app.vue                          |  10 +-
 .../{partials => layouts}/ColorPicker.vue     |   0
 .../{partials => layouts}/IconButton.vue      |   0
 .../components/managers/ContentManager.vue    | 265 +------------
 .../components/partials/ContentSidebar.vue    | 354 ++++++++++++++++++
 frontend/app/components/viewer/TopBar.vue     |  22 +-
 .../app/components/viewer/content/Note.vue    |  24 +-
 .../components/viewer/widgets/TableWidget.vue |   3 +
 .../components/viewer/widgets/TestWidget.vue  |  12 +-
 .../windows/CreateCampaignWindow.vue          |   2 +-
 .../windows/partials/FixedBottomButtons.vue   |   2 +-
 frontend/app/services/Campaign.js             |  33 +-
 frontend/app/services/Marker.js               |  44 +++
 frontend/app/services/User.js                 |   3 +-
 16 files changed, 512 insertions(+), 296 deletions(-)
 create mode 100644 frontend/README.md
 rename frontend/app/components/{partials => layouts}/ColorPicker.vue (100%)
 rename frontend/app/components/{partials => layouts}/IconButton.vue (100%)
 create mode 100644 frontend/app/components/partials/ContentSidebar.vue
 create mode 100644 frontend/app/components/viewer/widgets/TableWidget.vue

diff --git a/backend/src/routes/campaign.js b/backend/src/routes/campaign.js
index b435eb7..686a9b2 100644
--- a/backend/src/routes/campaign.js
+++ b/backend/src/routes/campaign.js
@@ -30,4 +30,17 @@ router.get('/list', async (req, res) => {
     }
 });
 
-module.exports = router;
\ No newline at end of file
+router.get('/retrieve/:id', async (req, res) => {
+    try {
+        if (!req.user?.id) return res.status(401).json({ status: "error", msg: "errors.unauthorized" });
+
+        const campaign = await Campaign.findOne({ _id: req.params.id, createdBy: req.user.id });
+        if (!campaign) return res.json({ status: "error", msg: "errors.not-found" });
+
+        res.json({ status: "ok", campaign });
+    } catch (err) {
+        res.json({ status: "error", msg: "errors.internal", err });
+    }
+});
+
+module.exports = router;
diff --git a/frontend/README.md b/frontend/README.md
new file mode 100644
index 0000000..bb74a5c
--- /dev/null
+++ b/frontend/README.md
@@ -0,0 +1,19 @@
+# Frontend
+
+This folder contains the React frontend for Dragonroll, an open-source role-playing game helper.
+
+## Features
+
+- Campaign management with character tracking
+- Player note sharing (markdown)
+- Audio for in-person campaigns
+- Encounter planning
+- Item and spell management
+
+## Files
+
+- `app/` - Application components and services
+- `app/services/` - Frontend services (Campaign, User, Window, etc.)
+- Styling and React components
+
+See the main README for complete information.
diff --git a/frontend/app/app.vue b/frontend/app/app.vue
index 19755c8..157b560 100644
--- a/frontend/app/app.vue
+++ b/frontend/app/app.vue
@@ -7,10 +7,16 @@ import { CreateWindow } from '@/services/Windows'
 import { GetUser, HasAdmin } from './services/User';
 import TooltipManager from './components/managers/TooltipManager.vue';
 import ContextMenuManager from './components/managers/ContextMenuManager.vue';
+import { useCampaignService } from './services/Campaign';
+
+const { RestoreCampaign } = useCampaignService();
 
 async function start(){
   if(GetUser()){
-    CreateWindow('main_menu');
+    const restoredCampaign = await RestoreCampaign();
+    if (!restoredCampaign) {
+      CreateWindow('main_menu');
+    }
     return;
   }
 
@@ -56,4 +62,4 @@ onMounted(() => {
   width: 100%;
   height: 100vh;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/frontend/app/components/partials/ColorPicker.vue b/frontend/app/components/layouts/ColorPicker.vue
similarity index 100%
rename from frontend/app/components/partials/ColorPicker.vue
rename to frontend/app/components/layouts/ColorPicker.vue
diff --git a/frontend/app/components/partials/IconButton.vue b/frontend/app/components/layouts/IconButton.vue
similarity index 100%
rename from frontend/app/components/partials/IconButton.vue
rename to frontend/app/components/layouts/IconButton.vue
diff --git a/frontend/app/components/managers/ContentManager.vue b/frontend/app/components/managers/ContentManager.vue
index e2d3067..4959c0d 100644
--- a/frontend/app/components/managers/ContentManager.vue
+++ b/frontend/app/components/managers/ContentManager.vue
@@ -1,115 +1,17 @@
 <script setup>
-import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
+import { 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';
+import ContentSidebar from '../partials/ContentSidebar.vue';
 
 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>
 
@@ -117,55 +19,7 @@ watch(Campaign, () => {
     <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">
-                        <!-- Aqui posar buttons -->
-                    </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>
-
+            <ContentSidebar></ContentSidebar>
             <Content></Content>
         </div>
         <StatusBar></StatusBar>
@@ -184,117 +38,4 @@ watch(Campaign, () => {
     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>
diff --git a/frontend/app/components/partials/ContentSidebar.vue b/frontend/app/components/partials/ContentSidebar.vue
new file mode 100644
index 0000000..243f32c
--- /dev/null
+++ b/frontend/app/components/partials/ContentSidebar.vue
@@ -0,0 +1,354 @@
+<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>
diff --git a/frontend/app/components/viewer/TopBar.vue b/frontend/app/components/viewer/TopBar.vue
index 544cbf7..a67d97b 100644
--- a/frontend/app/components/viewer/TopBar.vue
+++ b/frontend/app/components/viewer/TopBar.vue
@@ -2,8 +2,9 @@
 import TopSearchBar from './topbar/TopSearchBar.vue';
 import { useCampaignService } from '~/services/Campaign';
 import { CreateWindow } from '~/services/Windows';
+import { SetShowContent } from '~/services/Content';
 
-const { Campaign } = useCampaignService();
+const { Campaign, SetCampaign } = useCampaignService();
 
 const campaignName = computed(() => {
     return Campaign.value?.name ?? 'Campaign';
@@ -17,6 +18,12 @@ function openCreateNoteWindow() {
     CreateWindow('create_note');
 }
 
+function exitToMainMenu() {
+    SetCampaign(null);
+    SetShowContent(false);
+    CreateWindow('main_menu');
+}
+
 </script>
 
 <template>
@@ -31,6 +38,10 @@ function openCreateNoteWindow() {
             <TopSearchBar></TopSearchBar>
         </div>
         <div class="right">
+            <button class="top-bar-button sound-click" type="button" @click="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="openCreateNoteWindow" :disabled="!Campaign">
                 <img class="note-button-icon" src="/icons/iconoir/regular/plus.svg" alt="" aria-hidden="true">
                 <span>New Note</span>
@@ -50,11 +61,11 @@ function openCreateNoteWindow() {
 }
 
 .logo {
-    height: 36px;
-    width: 36px;
+    height: 32px;
+    width: 32px;
     position: absolute;
     top: 0px;
-    left: 8px;
+    left: 6px;
 }
 
 .left, .right {
@@ -65,6 +76,7 @@ function openCreateNoteWindow() {
     display: flex;
     justify-content: flex-end;
     align-items: center;
+    gap: 8px;
     padding-right: 10px;
 }
 
@@ -75,6 +87,7 @@ function openCreateNoteWindow() {
     font-weight: bold;
 }
 
+.top-bar-button,
 .note-button {
     height: 30px;
     padding: 0 12px;
@@ -92,6 +105,7 @@ function openCreateNoteWindow() {
     cursor: not-allowed;
 }
 
+.top-bar-button-icon,
 .note-button-icon {
     width: 16px;
     height: 16px;
diff --git a/frontend/app/components/viewer/content/Note.vue b/frontend/app/components/viewer/content/Note.vue
index cd4cc19..e681e7b 100644
--- a/frontend/app/components/viewer/content/Note.vue
+++ b/frontend/app/components/viewer/content/Note.vue
@@ -1,8 +1,8 @@
 <script setup>
-import { marked } from 'marked';
 import { onMounted, onUnmounted, ref, createApp } from 'vue';
 import ToastManager from '~/components/managers/ToastManager.vue';
 import { emitter } from '~/services/Emitter';
+import { ParseMarkdown } from '~/services/Marker';
 import Server from '~/services/Server';
 import { DisplayToast } from '~/services/Toaster';
 import TestWidget from '../widgets/TestWidget.vue';
@@ -20,33 +20,15 @@ function closeNote(){
     emitter.emit('delete-note', props.noteKey);
 }
 
-//  MARKED
-
-const renderer = new marked.Renderer();
-
-renderer.paragraph = (token) => {
-  const text = token.text || '';
-
-  if (text.startsWith(':::my-component')) {
-    return `<div class="vue-component" data-component="TestWidget"></div>`;
-  }
-
-  return `<p>${text}</p>`;
-};
-
-marked.setOptions({
-  renderer: renderer,
-});
-
 const compiledMarkdown = computed(() => {
-    return marked.parse(sourceText.value);
+    return ParseMarkdown(sourceText.value);
 });
 
 function mountComponents() {
   const nodes = document.querySelectorAll('.vue-component');
 
   nodes.forEach(el => {
-    const app = createApp(TestWidget, { /* props */ });
+    const app = createApp(TestWidget, { content: el.dataset.content });
     app.mount(el);
     console.log("Mounted a component")
   });
diff --git a/frontend/app/components/viewer/widgets/TableWidget.vue b/frontend/app/components/viewer/widgets/TableWidget.vue
new file mode 100644
index 0000000..af9fa97
--- /dev/null
+++ b/frontend/app/components/viewer/widgets/TableWidget.vue
@@ -0,0 +1,3 @@
+<template>
+
+</template>
\ No newline at end of file
diff --git a/frontend/app/components/viewer/widgets/TestWidget.vue b/frontend/app/components/viewer/widgets/TestWidget.vue
index 56f05a6..f215c03 100644
--- a/frontend/app/components/viewer/widgets/TestWidget.vue
+++ b/frontend/app/components/viewer/widgets/TestWidget.vue
@@ -1,3 +1,13 @@
+<script setup>
+const props = defineProps(['content']);
+
+const name = ref('');
+
+onMounted(() => {
+    name.value = props.content || 'No content';
+});
+</script>
+
 <template>
-<h2>This is a test widget</h2>
+<h2>This is a {{name}} widget</h2>
 </template>
\ No newline at end of file
diff --git a/frontend/app/components/windows/CreateCampaignWindow.vue b/frontend/app/components/windows/CreateCampaignWindow.vue
index d5abbfd..8072212 100644
--- a/frontend/app/components/windows/CreateCampaignWindow.vue
+++ b/frontend/app/components/windows/CreateCampaignWindow.vue
@@ -3,7 +3,7 @@ import { onMounted, ref } from 'vue';
 import { SetupHandle, SetSize, ResetPosition, Top, ClearWindow } from '@/services/Windows';
 
 import WindowHandle from './partials/WindowHandle.vue';
-import ColorPicker from '../partials/ColorPicker.vue';
+import ColorPicker from '../layouts/ColorPicker.vue';
 import Server from '~/services/Server';
 import { DisplayToast } from '~/services/Toaster';
 
diff --git a/frontend/app/components/windows/partials/FixedBottomButtons.vue b/frontend/app/components/windows/partials/FixedBottomButtons.vue
index acad718..cac05c4 100644
--- a/frontend/app/components/windows/partials/FixedBottomButtons.vue
+++ b/frontend/app/components/windows/partials/FixedBottomButtons.vue
@@ -1,5 +1,5 @@
 <script setup>
-import IconButton from '~/components/partials/IconButton.vue';
+import IconButton from '~/components/layouts/IconButton.vue';
 
 const props = defineProps(['plus', 'edit', 'view', 'remove']);
 
diff --git a/frontend/app/services/Campaign.js b/frontend/app/services/Campaign.js
index bd1a8d1..e6b5500 100644
--- a/frontend/app/services/Campaign.js
+++ b/frontend/app/services/Campaign.js
@@ -1,12 +1,41 @@
+import Server from './Server';
+
+const SELECTED_CAMPAIGN_KEY = 'selectedCampaignId';
+
 export const useCampaignService = () => {
   const Campaign = useState('campaign', () => null)
 
   const SetCampaign = (data) => {
     Campaign.value = data;
+    if (data?._id) {
+      localStorage.setItem(SELECTED_CAMPAIGN_KEY, data._id);
+    } else {
+      localStorage.removeItem(SELECTED_CAMPAIGN_KEY);
+    }
+  }
+
+  const RestoreCampaign = async () => {
+    const campaignId = localStorage.getItem(SELECTED_CAMPAIGN_KEY);
+    if (!campaignId) return false;
+
+    try {
+      const response = await Server().get(`/campaign/retrieve/${campaignId}`);
+      if (response.data.status !== 'ok') {
+        SetCampaign(null);
+        return false;
+      }
+
+      SetCampaign(response.data.campaign);
+      return true;
+    } catch (error) {
+      SetCampaign(null);
+      return false;
+    }
   }
 
   return {
     Campaign,
-    SetCampaign
+    SetCampaign,
+    RestoreCampaign
   }
-}
\ No newline at end of file
+}
diff --git a/frontend/app/services/Marker.js b/frontend/app/services/Marker.js
index e69de29..6bfea80 100644
--- a/frontend/app/services/Marker.js
+++ b/frontend/app/services/Marker.js
@@ -0,0 +1,44 @@
+import { Marked } from "marked";
+
+const marker = new Marked();
+
+// optional: use a shared marked instance inside renderer
+const renderMarkdown = (text) => marker.parse(text);
+
+const WidgetMap = {
+    test: () => import("~/components/viewer/widgets/TestWidget.vue"),
+    table: () => import("~/components/viewer/widgets/TableWidget.vue"),
+};
+
+const extension = {
+  name: "something",
+  level: "block",
+
+  tokenizer(src) {
+    const rule = /^@(\w+)\n([\s\S]+?)\n@end/;
+    const match = rule.exec(src);
+
+    if (!match) return;
+
+    return {
+      type: "something",
+      raw: match[0],
+      name: match[1],
+      text: match[2],
+    };
+  },
+
+  renderer(token) {
+    return `<div class="vue-component" data-component="${token.name}" data-content="${token.text}"></div>`;
+  },
+};
+
+marker.use({
+  extensions: [extension],
+});
+
+function ParseMarkdown(source) {
+  return marker.parse(source || "");
+}
+
+export { ParseMarkdown, WidgetMap };
\ No newline at end of file
diff --git a/frontend/app/services/User.js b/frontend/app/services/User.js
index 1ba3a39..6b24ce0 100644
--- a/frontend/app/services/User.js
+++ b/frontend/app/services/User.js
@@ -64,6 +64,7 @@ function LoadUser(){
 
 function LogoutUser(){
     localStorage.removeItem("token");
+    localStorage.removeItem("selectedCampaignId");
     UserStatus.value = 0;
 }
 
@@ -77,4 +78,4 @@ export {
     HasAdmin,
     GetUserSetting,
     SetUserSetting
-}
\ No newline at end of file
+}