kjdskjk

.gitea/workflows/deploy.yml

@@ -13,9 +13,32 @@ jobs:
       - name: Checkout
         uses: actions/checkout@v4
 
+      - name: Install dependencies
+        run: |
+          apt-get update -y && apt-get install -y openssh-client
+          apt-get install -y git
+
+      - name: Setup SSH inside container
+        run: |
+          rm -rf ~/.ssh
+          mkdir -p ~/.ssh
+          echo "${{ secrets.DEPLOY_KEY }}" | tr -d '\r' > ~/.ssh/id_rsa
+          chmod 600 ~/.ssh/id_rsa
+
+          # Add the container host to known_hosts
+          ssh-keyscan -H ${{ secrets.DEPLOY_HOST }} >> ~/.ssh/known_hosts
+
+      - name: Log in to registry
+        run: |
+          echo "${{ secrets.REGISTRY_PASSWORD }}" | docker login git.aranroig.com -u "${{ secrets.REGISTRY_USER }}" --password-stdin
+
       - name: Build frontend
         run: |
-          docker build -t git.aranroig.com/${{ secrets.REGISTRY_USER }}/dragonroll-frontend:latest ./frontend
+          docker build -t git.aranroig.com/${{ secrets.REGISTRY_USER }}/dragonroll-frontend:latest \
+          --build-arg NUXT_PUBLIC_GIT_COMMIT=$(git rev-parse --short HEAD) \
+          --build-arg NUXT_PUBLIC_GIT_TAG=$(git describe --tags --abbrev=0) \
+          --build-arg NUXT_PUBLIC_GIT_BRANCH=$(git rev-parse --abbrev-ref HEAD) \
+          ./frontend
           docker push git.aranroig.com/${{ secrets.REGISTRY_USER }}/dragonroll-frontend:latest
 
       - name: Build backend
@@ -23,17 +46,17 @@ jobs:
           docker build -t git.aranroig.com/${{ secrets.REGISTRY_USER }}/dragonroll-backend:latest ./backend
           docker push git.aranroig.com/${{ secrets.REGISTRY_USER }}/dragonroll-backend:latest
 
-      # - name: Copy files
-      #  run: |
-      #    scp docker-compose.yml deploy@${{ secrets.DEPLOY_HOST}}:/var/www/app/
-      #    scp nginx.conf deploy@${{ secrets.DEPLOY_HOST }}:/var/www/app/nginx.conf
+      - name: Copy files
+        run: |
+          scp docker-compose.yml deploy@${{ secrets.DEPLOY_HOST}}:/var/www/app/
+          scp nginx.conf deploy@${{ secrets.DEPLOY_HOST }}:/var/www/app/nginx.conf
 
-      #- name: Deploy
-      #  run: |
-      #    ssh deploy@${{ secrets.DEPLOY_HOST }} << 'EOF'
-      #      echo "${{ secrets.REGISTRY_PASSWORD }}" | docker login git.aranroig.com -u "${{ secrets.REGISTRY_USER }}" --password-stdin
-      #      cd /var/www/app/
-      #      docker-compose pull
-      #      docker-compose up -d
-      #    EOF
+      - name: Deploy
+        run: |
+          ssh deploy@${{ secrets.DEPLOY_HOST }} << 'EOF'
+            echo "${{ secrets.REGISTRY_PASSWORD }}" | docker login git.aranroig.com -u "${{ secrets.REGISTRY_USER }}" --password-stdin
+            cd /var/www/app/
+            docker compose pull
+            docker compose up -d
+          EOF
 

backend/src/index.js

@@ -7,6 +7,7 @@ const path = require('path');
 const dotenv = require('dotenv');
 
 if(process.env.NODE_ENV) {
+  console.log(`.env.${process.env.NODE_ENV}`);
   dotenv.config({
     path: `.env.${process.env.NODE_ENV}`
   });
@@ -20,7 +21,7 @@ const connectDB = require("./db");
 
 // PUBLIC
 const uploadDir = path.join(__dirname, 'uploads');
-app.use('/public', express.static(uploadDir));
+app.use('/api/public', express.static(uploadDir));
 
 // JSON LIMIT EXPRESS
 app.use(express.json({ limit: '50mb' }));
@@ -45,14 +46,15 @@ app.use(cors({
 }));
 
 // ROUTES (NO AUTH)
-app.use('/user', require('./routes/user'));
+app.use('/api/user', require('./routes/user'));
 
 // AUTH
 checkAuth = passport.authenticate('jwt', { session: false });
 app.use(checkAuth);
 
 // ROUTES WITH AUTH
-app.use('/campaign', require('./routes/campaign'));
+app.use('/api/campaign', require('./routes/campaign'));
+app.use('/api/note', require('./routes/note'));
 /*
 app.use('/campaign', require('./routes/campaign'));
 app.use('/maps', require('./routes/map'));

backend/src/models/Note.js

@@ -0,0 +1,15 @@
+const mongoose = require('mongoose');
+const Schema = mongoose.Schema;
+
+const NoteSchema = new Schema({
+    title: { type: String },
+    content: { type: String },
+    campaign: {
+        type: Schema.Types.ObjectId,
+        ref: 'Campaign',
+        required: true
+    },
+    date: { type: Date, default: Date.now }
+});
+
+module.exports = mongoose.model('Note', NoteSchema);

backend/src/routes/campaign.js

@@ -30,4 +30,17 @@ router.get('/list', async (req, res) => {
     }
 });
 
-module.exports = router;
+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;

backend/src/routes/note.js

@@ -0,0 +1,86 @@
+const express = require('express');
+const router = express.Router();
+
+const Campaign = require("../models/Campaign");
+const Note = require("../models/Note");
+
+async function userOwnsCampaign(campaignId, userId) {
+    const campaign = await Campaign.findOne({ _id: campaignId, createdBy: userId }).lean();
+    return Boolean(campaign);
+}
+
+router.get('/list', async (req, res) => {
+    try {
+        const { campaign } = req.query;
+        if (!campaign) return res.json({ status: "error", msg: "errors.missing-data" });
+
+        const hasAccess = await userOwnsCampaign(campaign, req.user.id);
+        if (!hasAccess) return res.json({ status: "error", msg: "unauthorized" });
+
+        const notes = await Note.find({ campaign })
+            .select('_id title content date campaign')
+            .sort({ date: -1 })
+            .lean();
+
+        res.json({ status: "ok", notes });
+    } catch (err) {
+        console.error(err);
+        res.json({ status: "error", msg: "errors.internal" });
+    }
+});
+
+router.post('/create', async (req, res) => {
+    try {
+        const { title, content, campaign } = req.body;
+        const hasAccess = await userOwnsCampaign(campaign, req.user.id);
+        if (!hasAccess) return res.json({ status: "error", msg: "unauthorized" });
+
+        const newNote = new Note({
+            title,
+            content,
+            campaign
+        });
+        await newNote.save();
+        res.json({ status: "ok", note: newNote });
+    } catch (err) {
+        console.error(err);
+        res.json({ status: "error", msg: "errors.internal" });
+    }
+});
+
+router.post('/update', async (req, res) => {
+    try {
+        const { id, title, content } = req.body;
+        const note = await Note.findById(id);
+        if (!note) return res.json({ status: "error", msg: "errors.notfound" });
+        const hasAccess = await userOwnsCampaign(note.campaign, req.user.id);
+        if (!hasAccess) return res.json({ status: "error", msg: "unauthorized" });
+
+        if(title) note.title = title;
+        note.content = content;
+        note.date = Date.now();
+        await note.save();
+        res.json({ status: "ok", note });
+    } catch (err) {
+        console.error(err);
+        res.json({ status: "error", msg: "errors.internal" });
+    }
+});
+
+router.post('/delete', async (req, res) => {
+    try {
+        const { id } = req.body;
+        const note = await Note.findById(id);
+        if (!note) return res.json({ status: "error", msg: "errors.notfound" });
+        const hasAccess = await userOwnsCampaign(note.campaign, req.user.id);
+        if (!hasAccess) return res.json({ status: "error", msg: "unauthorized" });
+
+        await note.remove();
+        res.json({ status: "ok" });
+    } catch (err) {
+        console.error(err);
+        res.json({ status: "error", msg: "errors.internal" });
+    }
+});
+
+module.exports = router;

docker-compose.yml

@@ -0,0 +1,21 @@
+version: "3.9"
+
+services:
+  nginx:
+    image: nginx:latest
+    ports:
+      - "3000:80"
+    volumes:
+      - ./nginx.conf:/etc/nginx/nginx.conf:ro
+    depends_on:
+      - frontend
+      - backend
+    restart: always
+
+  frontend:
+    image: git.aranroig.com/syndria98/dragonroll-frontend:latest
+    restart: always
+
+  backend:
+    image: git.aranroig.com/syndria98/dragonroll-backend:latest
+    restart: always

frontend/.env.production

@@ -0,0 +1 @@
+NUXT_PUBLIC_API_BASE_URL=https://dragonroll.aranroig.com/api

frontend/.gitignore

@@ -21,4 +21,4 @@ logs
 # Local env files
 .env
 .env.*
-!.env.example
+!.env.production

frontend/Dockerfile

@@ -1,6 +1,14 @@
 # ---------- Build Stage ----------
 FROM node:20-alpine AS builder
 
+ARG NUXT_PUBLIC_GIT_COMMIT
+ARG NUXT_PUBLIC_GIT_TAG
+ARG NUXT_PUBLIC_GIT_BRANCH
+
+ENV NUXT_PUBLIC_GIT_COMMIT=$NUXT_PUBLIC_GIT_COMMIT
+ENV NUXT_PUBLIC_GIT_TAG=$NUXT_PUBLIC_GIT_TAG
+ENV NUXT_PUBLIC_GIT_BRANCH=$NUXT_PUBLIC_GIT_BRANCH
+
 WORKDIR /app
 
 # Copy package files

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.

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>
+</style>

frontend/app/assets/css/colors.scss

@@ -19,6 +19,8 @@ $themes: (
 
         toast-background: #202020,
 
+        note-border: #202324,
+
         hover: #21262d,
         selected: #4a4a4b,
         border-color: #819796,
@@ -29,6 +31,7 @@ $themes: (
 
         red: #e06c75,
         green: #98c379,
+        gray: #cccccc,
 
         icon-invert: 100%
     ),
@@ -49,6 +52,8 @@ $themes: (
 
         toast-background: #f0f0f0,
 
+        note-border: #e0e0e0,
+
         border-color: #e0e0e0,
         border: #f0f0f0,
         hover: #e9e9e9,
@@ -59,6 +64,7 @@ $themes: (
 
         red: #e06c75,
         green: #98c379,
+        gray: #cccccc,
 
         icon-invert: 0%
     )

frontend/app/components/managers/ContentManager.vue

@@ -1,18 +1,41 @@
 <script setup>
+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 ContentSidebar from '../partials/ContentSidebar.vue';
+
+const { Campaign } = useCampaignService();
+
+watch(Campaign, () => {
+    if(Campaign.value) ShowContent.value = true;
+}, { immediate: true });
 </script>
 
 <template>
-    <div v-show="ShowContent">
+    <div v-show="ShowContent" class="content-manager">
         <TopBar></TopBar>
-        <Content></Content>
+        <div class="content-layout">
+            <ContentSidebar></ContentSidebar>
+            <Content></Content>
+        </div>
         <StatusBar></StatusBar>
     </div>
 </template>
 
 <style scoped>
-</style>
+.content-manager {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
+.content-layout {
+    min-height: 0;
+    flex: 1;
+    display: flex;
+}
+</style>

frontend/app/components/partials/CampaignEntry.vue

@@ -3,6 +3,9 @@
 import { onMounted, ref } from 'vue';
 
 import { AddSound } from '../../services/Sound';
+import { useCampaignService } from '~/services/Campaign';
+import { ClearWindow } from '~/services/Windows';
+const { SetCampaign } = useCampaignService();
 
 const props = defineProps(['data']);
 const data = props.data;
@@ -21,8 +24,8 @@ onMounted(() => {
 });
 
 function ViewCampaign(){
-    // ConnectToCampaign(data);
-    // DisplayCampaign(data);
+    SetCampaign(data);
+    ClearWindow({type: "main_menu"});
 }
 </script>
 

frontend/app/components/partials/ContentSidebar.vue

@@ -0,0 +1,364 @@
+<script setup>
+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 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 = TotalNotes.value.length;
+    return `${count} ${count === 1 ? 'note' : 'notes'}`;
+});
+
+function toggleSidebar() {
+    sidebarCollapsed.value = !sidebarCollapsed.value;
+}
+
+async function createNote() {
+    if (!Campaign.value) {
+        return;
+    }
+
+    const campaignId = Campaign.value?._id 
+
+    try {
+        const response = await Server().post('/note/create', {
+            title: 'New note',
+            content: "",
+            campaign: campaignId
+        });
+
+        if (response.data.status !== 'ok') {
+            return;
+        }
+
+        emitter.emit('note-created', response.data.note);
+    } catch (err) {
+        console.log(err);
+    }
+}
+
+
+function openNote(note) {
+    PushNote(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
+    };
+
+    TotalNotes.value = TotalNotes.value.filter((currentNote) => {
+        return currentNote.key !== createdNote.key;
+    });
+    TotalNotes.value.unshift(createdNote);
+    openNote(createdNote);
+}
+
+onMounted(() => {
+    selectedTool.value = 'notes'; 
+    FetchCampaignNotes();
+    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-tools" 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="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"
+                    @click="createNote"
+                    :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>
+            </div>
+
+            <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="TotalNotes.length === 0" class="sidebar-state">
+                    No notes in this campaign yet.
+                </div>
+
+                <template v-else>
+                    <button
+                        v-for="note in TotalNotes"
+                        :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-tools {
+    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-actions {
+    display: flex;
+    justify-content: center;
+}
+
+.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;
+
+    
+    &.active {
+        background-color: var(--color-selected);
+    }
+}
+
+.sidebar-action:hover {
+    background: var(--color-button-hover);
+    &.active {
+        background-color: var(--color-selected);
+    }
+}
+
+.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>

frontend/app/components/partials/EditUserPartial.vue

@@ -2,10 +2,9 @@
 import { onMounted, ref } from 'vue';
 import { GetUser, LogoutUser } from '@/services/User'
 
-import Server from '@/services/Server'
+import Server, { getBaseUrl } from '@/services/Server'
 
 import { CreateWindow, CreateChildWindow, ClearWindow, GetFirstWindowId } from '../../services/Windows';
-import { backendUrl } from '../../services/BackendURL';
 import Spinner from './Spinner.vue';
 const loadedIcon = ref(false);
 
@@ -21,7 +20,7 @@ function retrieveAvatar(){
     Server().get('/user/retrieve-avatar?username=' + GetUser().username)
     .then((response) => {
         if(response.data.image){
-            const imgUrl = backendUrl + "public/" + response.data.image;
+            const imgUrl = getBaseUrl() + "/public/" + response.data.image;
 
             // Wait for the image to fully load
             const img = new Image();

frontend/app/components/viewer/TopBar.vue

@@ -1,17 +1,40 @@
 <script setup>
 import TopSearchBar from './topbar/TopSearchBar.vue';
+import { useCampaignService } from '~/services/Campaign';
+import { CreateWindow } from '~/services/Windows';
+import { SetShowContent } from '~/services/Content';
+
+const { Campaign, SetCampaign } = useCampaignService();
+
+const campaignName = computed(() => {
+    return Campaign.value?.name ?? 'Campaign';
+});
+
+function exitToMainMenu() {
+    SetCampaign(null);
+    SetShowContent(false);
+    CreateWindow('main_menu');
+}
 
 </script>
 
 <template>
     <div class="top-bar">
         <div class="left">
-            <span class="top-bar-title"></span>
+            <span class="top-bar-title">
+                <img src="/img/logo.png" alt="Dragonroll Logo" class="logo">
+                <span>{{ campaignName }}</span>
+            </span>
         </div>
         <div class="center">
             <TopSearchBar></TopSearchBar>
         </div>
-        <div class="right"></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>
+        </div>
     </div>
 </template>
 
@@ -25,17 +48,54 @@ import TopSearchBar from './topbar/TopSearchBar.vue';
     display: flex;
 }
 
+.logo {
+    height: 32px;
+    width: 32px;
+    position: absolute;
+    top: 0px;
+    left: 6px;
+}
+
 .left, .right {
     flex: 1;
 }
 
 .right {
-    text-align: right;
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    gap: 8px;
+    padding-right: 10px;
 }
 
 .top-bar-title {
     padding: 10px;
     display: flex;
+    margin-left: 48px;
     font-weight: bold;
 }
-</style>
+
+.top-bar-button,
+.note-button {
+    height: 30px;
+    padding: 0 12px;
+    border: 1px solid var(--color-border);
+    border-radius: 8px;
+    background: var(--color-background-soft);
+    display: inline-flex;
+    align-items: center;
+    gap: 8px;
+    cursor: pointer;
+}
+
+.note-button:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}
+
+.top-bar-button-icon,
+.note-button-icon {
+    width: 16px;
+    height: 16px;
+}
+</style>

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

@@ -1,16 +1,13 @@
 <script setup>
 import NoteContainer from './NoteContainer.vue';
 
-const emitter = useEmitter();
-
-function hideSearch(){
-  emitter.emit("hide-search-container");
-}
 </script>
 
 <template>
-<div class="content" v-on:click="hideSearch">
-  <NoteContainer></NoteContainer>  
+<div class="content">
+  <NoteContainer>
+
+  </NoteContainer>  
   <!-- PowerMod -->
 </div>
 </template>
@@ -18,6 +15,7 @@ function hideSearch(){
 <style scoped>
 .content {
   flex-grow: 1;
+  min-width: 0; /* 👈 important */
   display: flex;
   justify-content: center;
   align-items: center;

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

@@ -1,56 +1,101 @@
 <script setup>
-import { onMounted, ref } from 'vue';
+import { onMounted, onUnmounted, ref, createApp } from 'vue';
+import { GetWidget, ParseMarkdown } from '~/services/Marker';
+import Server from '~/services/Server';
+import { DeleteNote, FetchCampaignNotes } from '~/services/Content';
 
 // import { GetNote, GetContent } from '@/services/Content';
 const props = defineProps(['text', 'title', 'noteKey']);
+const noteContent = ref(null); // Markdown text
 
-const noteContent = ref(null);
+const sourceText = ref(''); // Original markdown source, used for editing
+const displayText = ref(''); // Compiled HTML from markdown
 
-const emitter = useEmitter();
-
-function gotoNote(){
-    // emitter.emit('goto-note', props.noteKey);
-}
+const editingMode = ref(false);
+const title = ref(props.title);
+const displayTitle = ref('');
 
 function closeNote(){
-    // emitter.emit('delete-note', props.noteKey);
+  DeleteNote(props.noteKey);
 }
 
-
-/*
-onMounted(() => {
-    let content = GetContent();
-    let elements = noteContent.value.getElementsByTagName('a');
-    for(let i = 0, len = elements.length; i < len; i++) {
-        let link = elements[i].pathname.split('/').slice(1).join('');
-        link = decodeURIComponent(link);
-        if(content[link] !== undefined){
-            elements[i].onclick = function (event) {
-                event.preventDefault();
-                
-                GetNote(link, (result) => {
-                    emitter.emit("push-note", {key: link, text: "<h1>" + result.title + "</h1>" + result.html, title: result.title});
-                });
-                return false;
-            }
-        } else {
-            elements[i].classList.add("error-link");
-            elements[i].onclick = function (event) {
-                event.preventDefault();
-                return false;
-            }
-        }
-    }
-
-    setTimeout(() => setupCallout(), 0);
+const compiledMarkdown = computed(() => {
+    return ParseMarkdown(sourceText.value);
 });
 
-function closeNote(){
-    emitter.emit('delete-note', props.noteKey);
+function mountComponents() {
+  // Should no need more
+  const widget_types = ['display', 'inline', 'link'];
+  widget_types.forEach((widget_type) => {
+    const nodes = document.querySelectorAll('.vue-component-' + widget_type);
+    nodes.forEach(el => {
+      const app = createApp(GetWidget(widget_type, el.dataset.component), { content: el.dataset.content });
+      app.mount(el);
+    });
+  });
+}
+/// 
+
+function update(){
+    displayText.value = compiledMarkdown.value;
+    setTimeout(() => {
+      setupCallout()
+      mountComponents();
+    }, 0);
 }
 
-function gotoNote(){
-    // emitter.emit('goto-note', props.noteKey);
+watch(sourceText, (newText) => {
+    // update();
+});
+
+onMounted(() => {
+    sourceText.value = props.text;
+    title.value = props.title;
+    displayTitle.value = props.title;
+    // window.addEventListener('keydown', handleKeydown);
+    setTimeout(() => setupCallout(), 0);
+    update();
+});
+
+onUnmounted(() => {
+  // window.removeEventListener('keydown', handleKeydown);
+});
+
+function handleKeydown(e) {
+  // Check for Ctrl + E (or Cmd + E on Mac)
+  if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 'e') {
+    e.preventDefault(); // prevent browser default behavior
+    editingMode.value = !editingMode.value;
+    if(!editingMode.value){
+       update();
+       SaveNote(); // Save when switching to display mode
+    }
+    return;
+  }
+
+  if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === 's') {
+    e.preventDefault(); // prevent browser default behavior
+    // Save the note (you can emit an event or call a method here)
+    SaveNote();
+    return;
+  }
+}
+
+function SaveNote(){
+    Server().post('/note/update', {
+        id: props.noteKey,
+        content: sourceText.value,
+        title: title.value,
+    }).then((response) => {
+        if(response.data.status !== 'ok'){
+            // Handle error (e.g., show a notification)
+            return;
+        }
+        // DisplayToast('green', "Note saved successfully.", 500);
+        FetchCampaignNotes();
+    }).catch((error) => {
+        // Handle error (e.g., show a notification)
+    });
 }
 
 function toggleCallout() {
@@ -78,6 +123,10 @@ function toggleCallout() {
 }
 
 function setupCallout() {
+  if (!noteContent.value) {
+    return;
+  }
+
   const collapsible = noteContent.value.getElementsByClassName(
     `callout is-collapsible`,
   );
@@ -93,21 +142,30 @@ function setupCallout() {
     }
   }
 }
-*/
 
 
+const editTitle = (e) => {
+  title.value = e.target.innerText;
+  SaveNote();
+}
+
 </script>
 
 <template>
-<div class="note">
-    <div class="note-stunt" v-on:click="gotoNote">
+<div class="note" @keydown="handleKeydown" tabindex="0">
+    <div class="note-stunt">
         <div class="close-button" v-on:click="closeNote">
             <img class="icon" src="/icons/Pixelarticons/white/close.svg" alt="My Happy SVG"/>
         </div>
         <span>{{ title }}</span>
     </div>
     <div class="note-content-container">
-        <div class="note-content" ref="noteContent" v-html="text"></div>
+        <textarea v-model="sourceText" class="full-editor" v-if="editingMode"></textarea>
+        <div v-else class="note-content" ref="noteContent">
+          <h1 contenteditable="true" ref="editableTitle" @input="editTitle">{{ displayTitle }}</h1>
+          <div ref="noteContent" v-html="displayText"></div>
+        </div>
+        
     </div>
 </div>
 </template>
@@ -124,6 +182,22 @@ function setupCallout() {
     user-select: none;
 }
 
+.full-editor {
+width: 100%;    
+  height: 100%;
+  box-sizing: border-box;
+
+  border: none;
+  outline: none;
+  resize: none;
+
+  padding: 20px;
+  font-size: 16px;
+  font-family: monospace; /* optional, gives document/editor feel */
+
+    padding-bottom: 400px; /* Small bottom margin */
+}
+
 .close-button {
     height: 20px;
     width: 20px;
@@ -131,6 +205,7 @@ function setupCallout() {
     display: flex;
     justify-content: center;
     cursor: pointer;
+    filter: invert(var(--color-icon-invert));
 }
 
 .note {
@@ -138,34 +213,32 @@ function setupCallout() {
     max-width: 700px;
     overflow-y: auto;
 
-    border-color: var(--note-border-color);
+    border-color: var(--color-note-border);
     border-width: 0px;
     border-right-width: 1px;
     border-style: solid;
     display: flex;
 
-    background-color: var(--background-color);
+    background-color: var(--color-background);
     position: sticky;
     top: 0px;
 }
 
 /* Contingut de cada nota */
 .note-content {
-    padding-bottom: 60px;
+    padding-bottom: 400px;
     overflow-y: auto;
+    max-width: 600px;
+    padding: 20px;
 }
 
 .note-content-container {
-    margin: 20px;
+    width: 100%;
+}
+
+.note-content :deep(img) {
+  max-width: 100%;
+  height: auto;
+  display: block; /* optional: avoids inline spacing issues */
 }
 </style>
-
-<style>
-.note-content > h1 {
-    text-align: center;
-}
-
-.note-content  .katex-display {
-    max-width: 600px;
-}
-</style>

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

@@ -1,15 +1,23 @@
 <script setup>
-import { ref, onMounted } from 'vue';
+import { ref } from 'vue';
 import Note from './Note.vue';
-import { emitter } from '~/services/Emitter';
-
-let noteData = ref([]);
+import { CurrentNotes, TotalNotes } from '~/services/Content';
 
 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;
-    dom.style.width = noteData.value.length * 701 + "px";
+    if (!dom) {
+        return;
+    }
+
+    dom.style.width = CurrentNotes.value.length * 701 + "px";
     
     setTimeout(() => {
         for(let i = 0; i < dom.children.length; i++){
@@ -21,28 +29,14 @@ function calculateContainerWidth(){
     }, 0);
 }
 
-function pushNote(note){
-    noteData.value.push(note);
-    calculateContainerWidth();
-}
-
-emitter.on("push-note", (note) => {
-    pushNote(note);
-})
-
-emitter.on("delete-note", (key) => {
-    noteData.value = noteData.value.filter((note) => {
-        return note.key !== key;
-    });
-    calculateContainerWidth();
-});
+watch(CurrentNotes, calculateContainerWidth);
 
 </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>
@@ -59,10 +53,9 @@ emitter.on("delete-note", (key) => {
     display: flex;
     height: 100%;
     margin: 0;
-    height: 100%;
     background-color: var(--color-background);
 }
 </style>
 
 <style>
-</style>
+</style>

frontend/app/components/viewer/widgets/TableWidget.vue

@@ -0,0 +1,3 @@
+<template>
+
+</template>

frontend/app/components/viewer/widgets/TestWidget.vue

@@ -0,0 +1,13 @@
+<script setup>
+const props = defineProps(['content']);
+
+const name = ref('');
+
+onMounted(() => {
+    name.value = props.content || 'No content';
+});
+</script>
+
+<template>
+<h2>This is a {{name}} widget</h2>
+</template>

frontend/app/components/viewer/widgets/display/RollWidgetDisplay.vue

@@ -0,0 +1,177 @@
+<script setup>
+const props = defineProps(['content']);
+
+import { parse } from '~/services/widgets/DiceParser';
+import { AddSound } from '~/services/Sound';
+
+const container = ref(null);
+const resultText = ref("");
+const steps = ref(null);
+const stepsHtml = ref("");
+
+const rollDice = () => {
+    const result = parse(props.content);
+    resultText.value = result.total;
+    stepsHtml.value = result.steps.map(renderStep).join('');
+};
+
+const renderStep = (s) => {
+    if (s.type === 'op') {
+        const label = s.op === '*' ? '×' : s.op === '/' ? '÷' : s.op;
+        return `<span class="step-op">${label}</span>`;
+    }
+
+    if (s.type === 'const') {
+        return `<span class="step-const">${s.value}</span>`;
+    }
+
+    if (s.type === 'dice') {
+        const { entry } = s;
+        const { rawRolls, kept, sides, mod, value } = entry;
+
+        const keptCopy = [...kept];
+        const tagged = rawRolls.map(v => {
+            const i = keptCopy.indexOf(v);
+            if (i !== -1) { keptCopy.splice(i, 1); return { v, kept: true }; }
+            return { v, kept: false };
+        });
+
+        let html = '';
+
+        tagged.forEach(({ v, kept }) => {
+            const isMax = v === sides, isMin = v === 1;
+            const cls = !kept    ? 'roll-val dropped'
+                      : isMax    ? 'roll-val max-val'
+                      : isMin    ? 'roll-val min-val'
+                      :            'roll-val kept';
+            html += `<span class="${cls}">${v}</span>`;
+        });
+
+        if (kept.length < rawRolls.length || kept.length > 1) {
+            html += `<span class="step-sum">=${value}</span>`;
+        }
+
+        return html;
+    }
+
+    return '';
+};
+
+onMounted(() => {
+    AddSound(container.value);
+});
+</script>
+
+<template>
+    <div class="roll-widget" ref="container">
+        <div class="roll-widget-body">
+            <span class="result-text">{{ resultText || '-' }}</span>
+            <button class="btn-primary roll-btn sound-click" @click="rollDice">
+                <span class="dice-content">
+                    <!-- Dice icon (SVG) -->
+                    <img class="icon" src="/icons/iconoir/regular/dice-three.svg" draggable="false">
+                </span>
+            </button>
+        </div>
+        <div class="roll-widget-results">
+            <span class="formula">{{ "[" + props.content + "]" }}</span>
+            <div class="steps" v-html="stepsHtml"></div>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.steps {
+    margin-left: 8px;
+    height: 22px;
+    > {
+        font-size: 12px;
+    }
+}
+.steps :deep(.roll-val){
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    min-width: 18px;
+    padding: 1px 2px;
+    border-radius: 3px;
+    margin: 2px;
+    font-size: 12px;
+    border: 1px solid; 
+}
+.steps :deep(.roll-val.kept){
+    background: rgba(93,184,122,0.12);
+    border-color: #4a8c5c;
+    color: #a8d4b4;
+}
+
+.steps :deep(.roll-val.dropped) {
+    background: transparent;
+    border-color: var(--color-border);
+    color: var(--color-text-tertiary);
+    text-decoration: line-through;
+}
+
+.steps :deep(.roll-val.max-val) {
+    background: rgba(93,184,122,0.2);
+    border-color: #5db87a;
+    color: #5db87a;
+}
+
+.steps :deep(.roll-val.min-val) {
+    background: rgba(201,95,95,0.12);
+    border-color: #c95f5f;
+    color: #c95f5f;
+}
+
+.steps :deep(.step-op)         { color: var(--color-text-secondary); padding: 0 4px; font-size: 13px; }
+.steps :deep(.step-const)      { font-size: 13px; color: var(--color-text-primary); padding: 0 2px; }
+.steps :deep(.step-dice-label) { font-size: 11px; color: var(--color-text-tertiary); margin-right: 2px; }
+.steps :deep(.step-sum)        { font-size: 11px; color: var(--color-text-tertiary); margin-left: 2px; }
+.steps :deep(.dice-mod)        { font-style: normal; margin-left: 2px; }
+
+.result-text {
+    font-size: 24px;
+    vertical-align: center;
+}
+
+.roll-widget-body {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+}
+
+.result-text {
+    margin-left: 12px;
+}
+
+.formula {
+    margin-left: 12px;
+    font-family: ui-monospace, monospace;
+    font-size: 12px;
+    color: var(--color-gray);
+}
+
+.roll-widget-results {
+    display: flex;
+    align-items: center;
+    padding-bottom: 10px;
+}
+
+.roll-widget {
+    width: 100%;
+    background-color: var(--color-background-light);
+    display: flex;
+    flex-direction: column;
+    margin-bottom: 8px;
+    border-radius: 6px;
+}
+
+.roll-btn {
+    padding: 8px;
+    margin-right: 8px;
+}
+
+</style>

frontend/app/components/viewer/widgets/inline/RollWidgetInline.vue

@@ -0,0 +1,59 @@
+<script setup>
+const props = defineProps(['content']);
+
+import { parse } from '~/services/widgets/DiceParser';
+import { AddSound } from '~/services/Sound';
+
+const container = ref(null);
+const resultText = ref("");
+
+const rollDice = () => {
+    console.log(props.content);
+    const result = parse(props.content);
+    console.log(result);
+    resultText.value = result.total;
+};
+
+onMounted(() => {
+    AddSound(container.value);
+});
+</script>
+
+<template>
+    <div class="roll-widget" ref="container">
+        <div class="roll-widget-body">
+            <button class="btn-primary btn-inline sound-click" @click="rollDice">
+                <span class="dice-content">
+                    <!-- Dice icon (SVG) -->
+                    <img class="icon" src="/icons/iconoir/regular/dice-three.svg" draggable="false">
+
+                    <!-- Result text -->
+                    <span class="result-text">
+                        {{ resultText || props.content }}
+                    </span>
+                </span>
+            </button>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.roll-widget {
+    display: inline-flex; /* or inline-block */
+    vertical-align: middle; /* keeps it aligned nicely with text */
+}
+
+.btn-inline {
+    padding: 2px 6px;
+}
+
+.dice-content {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+}
+
+.result-text {
+    font-weight: 500;
+}
+</style>

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/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';
 
@@ -12,6 +12,7 @@ const wrapper = ref(null);
 
 const props = defineProps(['data']);
 const data = props.data;
+const loading = ref(false);
 
 let id = data.id;
 
@@ -29,11 +30,13 @@ const colorPicker = ref(null);
 function NewCampaign(){
     const color = colorPicker.value.GetColor();
     console.log(color);
+    loading.value = true;
     Server().post('/campaign/create', {
         name: campaignName.value,
         description: campaignDescription.value,
         color: colorPicker.value.GetColor(),
     }).then((response) => {
+        loading.value = false;
         console.log(response.data);
         DisplayToast('green', $t('campaigns.create.success'), 3000);
         ClearWindow({id});
@@ -63,7 +66,12 @@ function NewCampaign(){
                 </div>
                 <div class="form-actions">
                     <button class="btn-primary sound-click">
-                        {{ $t("general.create") }}
+                        <span v-if="loading">
+                            <Spinner />
+                        </span>
+                        <span v-else>
+                            {{ $t("general.create") }}
+                        </span>
                     </button>
                 </div>
             </form>

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']);
 

frontend/app/plugins/api.ts

@@ -0,0 +1,6 @@
+import { initApi } from '../services/Server';
+
+export default defineNuxtPlugin(() => {
+    const config = useRuntimeConfig();
+    initApi(config.public.apiBaseUrl);
+});

frontend/app/plugins/i18n.ts

@@ -5,7 +5,6 @@ function loadLocaleMessages() {
   const messages: Record<string, any> = {}
 
   for (const path in locales) {
-    console.log(path);
     const matched = path.match(/i18n\/locales\/(\w+)\/(.*)\.json$/)
     if (!matched) continue
 
@@ -18,7 +17,6 @@ function loadLocaleMessages() {
     messages[locale][file] = (locales[path] as any).default
   }
 
-  console.log(messages);
   return messages
 }
 

frontend/app/services/BackendURL.js

@@ -1,11 +0,0 @@
-var backendUrl = ''
-if (import.meta.env.PROD) {
-    backendUrl = 'https://api.aranroig.com/';
-} else {
-    backendUrl = 'http://localhost:5000/'
-}
-
-
-export {
-    backendUrl
-};

frontend/app/services/Campaign.js

@@ -0,0 +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,
+    RestoreCampaign
+  }
+}

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

@@ -0,0 +1,113 @@
+import { Marked } from "marked";
+const widget_map = {
+  inline: {
+    roll: () => import("~/components/viewer/widgets/inline/RollWidgetInline.vue"),
+  },
+  display: {
+    roll: () => import("~/components/viewer/widgets/display/RollWidgetDisplay.vue"),
+  },
+  link: {
+    link: () => import("~/components/viewer/widgets/link/NoteLink.vue")
+  }
+};
+
+const componentCache = {
+  inline: {},
+  display: {},
+  link: {}
+}
+
+const GetWidget = (type, name) => {
+  if (!componentCache[type][name]) {
+    componentCache[type][name] = defineAsyncComponent(
+      widget_map[type][name]
+    )
+  }
+
+  return componentCache[type][name]
+}
+
+
+const marker = new Marked();
+
+const extension = {
+  name: "widget",
+  level: "block",
+
+  tokenizer(src) {
+    const rule = /^@(\w+)\n([\s\S]+?)\n@end/;
+    const match = rule.exec(src);
+
+    if (!match) return;
+
+    return {
+      type: "widget",
+      raw: match[0],
+      name: match[1],
+      text: match[2],
+    };
+  },
+
+  renderer(token) {
+    return `<div class="vue-component-display" data-component="${token.name}" data-content="${token.text}"></div>`;
+  },
+};
+
+const inlineExtension = {
+  name: "widget_inline",
+  level: "inline",
+  start(src) {
+    return src.indexOf("@");
+  },
+
+  tokenizer(src) {
+    const rule = /^@(\w+)\s*\[([^\]]*)\]/;
+    const match = rule.exec(src);
+    if (!match) return;
+
+    return {
+      type: "widget_inline",
+      raw: match[0],
+      name: match[1],
+      text: match[2],
+    };
+  },
+
+  renderer(token) {
+    return `<span class="vue-component-inline" data-component="${token.name}" data-content="${token.text}"></span>`;
+  },
+};
+
+const linkExtension = {
+  name: "link_to",
+  level: "inline",
+  start(src) {
+    return src.indexOf("[[");
+  },
+
+  tokenizer(src) {
+    const rule = /^\[\[([^\n]*)\]\]/;
+    const match = rule.exec(src);
+    if (!match) return;
+
+    return {
+      type: "link_to",
+      raw: match[0],
+      link: match[1],
+    };
+  },
+
+  renderer(token) {
+    return `<span class="vue-component-link" data-component="link" data-content="${token.link}"></span>`;
+  },
+};
+
+marker.use({
+  extensions: [extension, inlineExtension, linkExtension],
+});
+
+function ParseMarkdown(source) {
+  return marker.parse(source || "");
+}
+
+export { ParseMarkdown, GetWidget };

frontend/app/services/Server.js

@@ -1,15 +1,16 @@
 import axios from 'axios';
 
-import { backendUrl } from './BackendURL';
-
 const server = axios.create({
-    baseURL: backendUrl,
+    baseURL: 'http://localhost:5000/api', // fallback only
     headers: {
         "Access-Control-Allow-Origin": "*",
     }
 });
 
-// Attach token dynamically on each request via interceptor
+export const initApi = (baseURL) => {
+    server.defaults.baseURL = baseURL;
+};
+
 server.interceptors.request.use((config) => {
     const token = localStorage.getItem('token');
     if (token) {
@@ -18,4 +19,6 @@ server.interceptors.request.use((config) => {
     return config;
 });
 
-export default () => server;
+export default () => server;
+
+export const getBaseUrl = () => server.defaults.baseURL;

frontend/app/services/StatusBar.js

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

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

frontend/app/services/WindowDefinitions.js

@@ -39,4 +39,4 @@ const defWindows = {
 
 export {
     defWindows
-}
+}

frontend/app/services/widgets/DiceParser.js

@@ -0,0 +1,134 @@
+// DiceParser.js
+
+function roll(sides) {
+  return Math.floor(Math.random() * sides) + 1;
+}
+
+function tokenize(expr) {
+  const re = /(\d*d\d+(?:adv|dis|kh\d+|kl\d+)?|\d+|[+\-*\/()])/gi;
+  const tokens = [];
+  let m;
+  while ((m = re.exec(expr)) !== null) tokens.push(m[0].toLowerCase());
+  return tokens;
+}
+
+function parseDiceToken(tok) {
+  const m = tok.match(/^(\d*)d(\d+)(adv|dis|kh(\d+)|kl(\d+))?$/i);
+  if (!m) return null;
+  const count = parseInt(m[1] || '1');
+  const sides = parseInt(m[2]);
+  const mod = (m[3] || '').toLowerCase();
+  if (count < 1 || count > 1000 || sides < 2 || sides > 10000)
+    throw new Error(`Invalid dice: ${tok}`);
+  return { count, sides, mod };
+}
+
+export function parse(expr) {
+  const tokens = tokenize(expr);
+  if (!tokens.length) throw new Error('Empty expression');
+  let pos = 0;
+
+  const peek = () => tokens[pos];
+  const consume = () => tokens[pos++];
+
+  function parseExpr() { return parseAddSub(); }
+
+  function parseAddSub() {
+    let left = parseMulDiv();
+    while (peek() === '+' || peek() === '-') {
+      const op = consume();
+      const right = parseMulDiv();
+      left = {
+        value: op === '+' ? left.value + right.value : left.value - right.value,
+        steps: [...left.steps, { type: 'op', op }, ...right.steps],
+      };
+    }
+    return left;
+  }
+
+  function parseMulDiv() {
+    let left = parseUnary();
+    while (peek() === '*' || peek() === '/') {
+      const op = consume();
+      const right = parseUnary();
+      if (op === '/' && right.value === 0) throw new Error('Division by zero');
+      left = {
+        value: op === '*' ? left.value * right.value : Math.floor(left.value / right.value),
+        steps: [...left.steps, { type: 'op', op }, ...right.steps],
+      };
+    }
+    return left;
+  }
+
+  function parseUnary() {
+    if (peek() === '-') {
+      consume();
+      const r = parsePrimary();
+      return { value: -r.value, steps: [{ type: 'op', op: '-' }, ...r.steps] };
+    }
+    return parsePrimary();
+  }
+
+  function parsePrimary() {
+    const tok = peek();
+    if (!tok) throw new Error('Unexpected end of expression');
+
+    if (tok === '(') {
+      consume();
+      const inner = parseExpr();
+      if (peek() !== ')') throw new Error('Missing closing )');
+      consume();
+      return {
+        value: inner.value,
+        steps: [{ type: 'op', op: '(' }, ...inner.steps, { type: 'op', op: ')' }],
+      };
+    }
+
+    const diceInfo = parseDiceToken(tok);
+    if (diceInfo) {
+      consume();
+      return rollDice(diceInfo);
+    }
+
+    if (/^\d+$/.test(tok)) {
+      consume();
+      const v = parseInt(tok);
+      return { value: v, steps: [{ type: 'const', value: v }] };
+    }
+
+    throw new Error(`Unexpected token: ${tok}`);
+  }
+
+  function rollDice({ count, sides, mod }) {
+    let rawRolls, kept;
+
+    if (mod === 'adv') {
+      rawRolls = [roll(sides), roll(sides)];
+      kept = [Math.max(...rawRolls)];
+    } else if (mod === 'dis') {
+      rawRolls = [roll(sides), roll(sides)];
+      kept = [Math.min(...rawRolls)];
+    } else if (mod.startsWith('kh')) {
+      const k = parseInt(mod.slice(2));
+      rawRolls = Array.from({ length: count }, () => roll(sides));
+      kept = [...rawRolls].sort((a, b) => b - a).slice(0, k);
+    } else if (mod.startsWith('kl')) {
+      const k = parseInt(mod.slice(2));
+      rawRolls = Array.from({ length: count }, () => roll(sides));
+      kept = [...rawRolls].sort((a, b) => a - b).slice(0, k);
+    } else {
+      rawRolls = Array.from({ length: count }, () => roll(sides));
+      kept = rawRolls.slice();
+    }
+
+    const entry = { sides, rawRolls, kept, mod, value: kept.reduce((a, b) => a + b, 0) };
+    return {
+      value: entry.value,
+      steps: [{ type: 'dice', entry }],
+    };
+  }
+
+  const result = parseExpr();
+  if (pos < tokens.length) throw new Error(`Unexpected token: ${tokens[pos]}`);
+  return { total: result.value, steps: result.steps };
+}

frontend/nuxt.config.ts

@@ -43,7 +43,7 @@ export default defineNuxtConfig({
 
   runtimeConfig: {
     public: {
-      apiBaseUrl: process.env.API_BASE_URL || 'http://localhost:5000/api',
+      apiBaseUrl: process.env.NUXT_PUBLIC_API_BASE_URL || 'http://localhost:5000/api',
       gitCommit: git.commit,
       gitTag: git.tag,
       gitBranch: git.branch,

frontend/package-lock.json

@@ -9,6 +9,7 @@
       "dependencies": {
         "@nuxtjs/i18n": "^10.3.0",
         "axios": "^1.15.2",
+        "marked": "^18.0.2",
         "mitt": "^3.0.1",
         "motion": "^12.38.0",
         "nuxt": "^4.4.2",
@@ -8886,6 +8887,18 @@
         "source-map-js": "^1.2.1"
       }
     },
+    "node_modules/marked": {
+      "version": "18.0.2",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-18.0.2.tgz",
+      "integrity": "sha512-NsmlUYBS/Zg57rgDWMYdnre6OTj4e+qq/JS2ot3KrYLSoHLw+sDu0Nm1ZGpRgYAq6c+b1ekaY5NzVchMCQnzcg==",
+      "license": "MIT",
+      "bin": {
+        "marked": "bin/marked.js"
+      },
+      "engines": {
+        "node": ">= 20"
+      }
+    },
     "node_modules/math-intrinsics": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",

frontend/package.json

@@ -3,7 +3,7 @@
   "type": "module",
   "private": true,
   "scripts": {
-    "build": "nuxt build",
+    "build": "nuxt build --dotenv .env.production",
     "dev": "nuxt dev",
     "generate": "nuxt generate",
     "preview": "nuxt preview",
@@ -12,6 +12,7 @@
   "dependencies": {
     "@nuxtjs/i18n": "^10.3.0",
     "axios": "^1.15.2",
+    "marked": "^18.0.2",
     "mitt": "^3.0.1",
     "motion": "^12.38.0",
     "nuxt": "^4.4.2",