Good goy

.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,13 +46,16 @@ 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('/api/campaign', require('./routes/campaign'));
+app.use('/api/note', require('./routes/note'));
+app.use('/api/folder', require('./routes/folder'));
 /*
 app.use('/campaign', require('./routes/campaign'));
 app.use('/maps', require('./routes/map'));

backend/src/models/Campaign.js

@@ -0,0 +1,17 @@
+const mongoose = require("mongoose");
+const Schema = mongoose.Schema;
+
+const CampaignSchema = new Schema({
+    name: {type: String, required: true},
+    description: {type: String},
+    color: {type: String},
+    createdBy: {
+        type: Schema.Types.ObjectId,
+        ref: 'User',
+        required: true
+    },
+    date: { type: Date, default: Date.now},
+    settings: { type: Object }
+});
+
+module.exports = mongoose.model('Campaign', CampaignSchema);

backend/src/models/Folder.js

@@ -0,0 +1,18 @@
+const mongoose = require('mongoose');
+const Schema = mongoose.Schema;
+
+const FolderSchema = new Schema({
+    name: { type: String, required: true },
+    campaign: {
+        type: Schema.Types.ObjectId,
+        ref: 'Campaign',
+        required: true
+    },
+    parentFolder: {
+        type: Schema.Types.ObjectId,
+        ref: 'Folder'
+    },
+    date: { type: Date, default: Date.now }
+});
+
+module.exports = mongoose.model('Folder', FolderSchema);

backend/src/models/Note.js

@@ -0,0 +1,19 @@
+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
+    },
+    folder: {
+        type: Schema.Types.ObjectId,
+        ref: 'Folder'
+    },
+    date: { type: Date, default: Date.now }
+});
+
+module.exports = mongoose.model('Note', NoteSchema);

backend/src/routes/campaign.js

@@ -0,0 +1,46 @@
+const express = require('express')
+const router = express.Router();
+
+const Campaign = require("../models/Campaign");
+
+router.post('/create', async (req, res) => {
+    try {
+        const { name, description, color, settings } = req.body;
+        const newCampaign = new Campaign({
+            name,
+            description,
+            color,
+            settings,
+            createdBy: req.user.id
+        });
+        await newCampaign.save();
+        res.json({ status: "ok", campaign: newCampaign });
+    } catch (err) {
+        console.error(err);
+        res.json({ status: "error", msg: "errors.internal" });
+    }
+});
+
+router.get('/list', async (req, res) => {
+    try {
+        const campaigns = await Campaign.find({ createdBy: req.user.id });
+        res.json({ status: "ok", campaigns });
+    } catch (err) {
+        res.json({ status: "error", msg: "errors.internal", err });
+    }
+});
+
+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/folder.js

@@ -0,0 +1,106 @@
+const express = require('express');
+const router = express.Router();
+
+const Campaign = require('../models/Campaign');
+const Folder = require('../models/Folder');
+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 folders = await Folder.find({ campaign })
+            .select('_id name date')
+            .sort({ date: -1 })
+            .lean();
+
+        res.json({ status: 'ok', folders });
+    } catch (err) {
+        console.error(err);
+        res.json({ status: 'error', msg: 'errors.internal' });
+    }
+});
+
+router.post('/create', async (req, res) => {
+    try {
+        const { name, campaign } = req.body;
+        if (!name || !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 newFolder = new Folder({
+            name: name.trim(),
+            campaign
+        });
+        await newFolder.save();
+        res.json({ status: 'ok', folder: newFolder });
+    } catch (err) {
+        console.error(err);
+        res.json({ status: 'error', msg: 'errors.internal' });
+    }
+});
+
+router.post('/delete', async (req, res) => {
+    try {
+        const { id } = req.body;
+        if (!id) return res.json({ status: 'error', msg: 'errors.missing-data' });
+
+        const folder = await Folder.findById(id);
+        if (!folder) return res.json({ status: 'error', msg: 'errors.notfound' });
+
+        const hasAccess = await userOwnsCampaign(folder.campaign, req.user.id);
+        if (!hasAccess) return res.json({ status: 'error', msg: 'unauthorized' });
+
+        async function moveRecursive(folderId) {
+            const subfolders = await Folder.find({ parentFolder: folderId }).select('_id').lean();
+            await Note.updateMany(
+                { folder: folderId },
+                { $set: { folder: null, date: Date.now() } }
+            );
+            await Folder.deleteOne({ _id: folderId });
+            for (const sub of subfolders) {
+                await moveRecursive(sub._id);
+            }
+        }
+
+        await moveRecursive(id);
+
+        res.json({ status: 'ok' });
+    } catch (err) {
+        console.error(err);
+        res.json({ status: 'error', msg: 'errors.internal' });
+    }
+});
+
+router.post('/rename', async (req, res) => {
+    try {
+        const { id, name } = req.body;
+        if (!id || !name) return res.json({ status: 'error', msg: 'errors.missing-data' });
+
+        const folder = await Folder.findById(id);
+        if (!folder) return res.json({ status: 'error', msg: 'errors.notfound' });
+
+        const hasAccess = await userOwnsCampaign(folder.campaign, req.user.id);
+        if (!hasAccess) return res.json({ status: 'error', msg: 'unauthorized' });
+
+        folder.name = name.trim();
+        await folder.save();
+
+        res.json({ status: 'ok', folder });
+    } catch (err) {
+        console.error(err);
+        res.json({ status: 'error', msg: 'errors.internal' });
+    }
+});
+
+module.exports = router;

backend/src/routes/note.js

@@ -0,0 +1,128 @@
+const express = require('express');
+const router = express.Router();
+
+const Campaign = require('../models/Campaign');
+const Note = require('../models/Note');
+const Folder = require('../models/Folder');
+
+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 folders = await Folder.find({ campaign })
+            .select('_id name date')
+            .sort({ date: -1 })
+            .lean();
+
+        const rootNotes = await Note.find({ campaign, folder: null })
+            .select('_id title content date')
+            .sort({ date: -1 })
+            .lean();
+
+        res.json({ status: 'ok', folders, notes: rootNotes });
+    } catch (err) {
+        console.error(err);
+        res.json({ status: 'error', msg: 'errors.internal' });
+    }
+});
+
+router.get('/subfolder/list', async (req, res) => {
+    try {
+        const { campaign, folder } = req.query;
+        if (!campaign || !folder) 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' });
+
+        // Verify folder belongs to campaign
+        const folderDoc = await Folder.findOne({ _id: folder, campaign }).lean();
+        if (!folderDoc) return res.json({ status: 'error', msg: 'errors.notfound' });
+
+        const subfolders = await Folder.find({ campaign, parentFolder: folder })
+            .select('_id name date')
+            .sort({ date: -1 })
+            .lean();
+
+        const notes = await Note.find({ campaign, folder: folder })
+            .select('_id title content date')
+            .sort({ date: -1 })
+            .lean();
+
+        res.json({ status: 'ok', subfolders, notes });
+    } catch (err) {
+        console.error(err);
+        res.json({ status: 'error', msg: 'errors.internal' });
+    }
+});
+
+router.post('/create', async (req, res) => {
+    try {
+        const { title, content, campaign, folder } = req.body;
+        if (!title || !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' });
+
+        let effectiveFolder = null;
+        if (folder) {
+            const folderDoc = await Folder.findOne({ _id: folder, campaign }).lean();
+            if (!folderDoc) return res.json({ status: 'error', msg: 'errors.notfound' });
+            effectiveFolder = folder;
+        }
+
+        const newNote = new Note({ title, content, campaign, folder: effectiveFolder });
+        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, folder } = req.body;
+        if (!id) return res.json({ status: 'error', msg: 'errors.missing-data' });
+
+        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 !== undefined) note.title = title;
+        if (content !== undefined) note.content = content;
+        if (folder !== undefined) note.folder = folder;
+        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;
+        if (!id) return res.json({ status: 'error', msg: 'errors.missing-data' });
+
+        const result = await Note.deleteOne({ _id: id });
+        if (result.deletedCount === 0) return res.json({ status: 'error', msg: 'errors.notfound' });
+
+        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

@@ -1,75 +1,19 @@
-# Nuxt Minimal Starter
+# Frontend
 
-Look at the [Nuxt documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+This folder contains the React frontend for Dragonroll, an open-source role-playing game helper.
 
-## Setup
+## Features
 
-Make sure to install dependencies:
+- Campaign management with character tracking
+- Player note sharing (markdown)
+- Audio for in-person campaigns
+- Encounter planning
+- Item and spell management
 
-```bash
-# npm
-npm install
+## Files
 
-# pnpm
-pnpm install
+- `app/` - Application components and services
+- `app/services/` - Frontend services (Campaign, User, Window, etc.)
+- Styling and React components
 
-# yarn
-yarn install
-
-# bun
-bun install
-```
-
-## Development Server
-
-Start the development server on `http://localhost:3000`:
-
-```bash
-# npm
-npm run dev
-
-# pnpm
-pnpm dev
-
-# yarn
-yarn dev
-
-# bun
-bun run dev
-```
-
-## Production
-
-Build the application for production:
-
-```bash
-# npm
-npm run build
-
-# pnpm
-pnpm build
-
-# yarn
-yarn build
-
-# bun
-bun run build
-```
-
-Locally preview production build:
-
-```bash
-# npm
-npm run preview
-
-# pnpm
-pnpm preview
-
-# yarn
-yarn preview
-
-# bun
-bun run preview
-```
-
-Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
+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()){
+    const restoredCampaign = await RestoreCampaign();
+    if (!restoredCampaign) {
       CreateWindow('main_menu');
+    }
     return;
   }
 

frontend/app/assets/css/colors.scss

@@ -6,6 +6,7 @@ $themes: (
         background-light: #202020,
         background-line: #202324,
         background-fore: #10141f,
+        background-soft: #20202077,
 
         window-handle-background: #191919,
         window-background: #141414,
@@ -17,6 +18,9 @@ $themes: (
         button-active: #202020cc,
 
         toast-background: #202020,
+        tooltip-background: #2a2a2a,
+
+        note-border: #202324,
 
         hover: #21262d,
         selected: #4a4a4b,
@@ -28,8 +32,13 @@ $themes: (
 
         red: #e06c75,
         green: #98c379,
+        gray: #cccccc,
 
-        icon-invert: 100%
+        icon-invert: 100%,
+
+        search-background: #20202077,
+        search-background-container: #202020ee,
+        search-hover: #2a2a2a,
     ),
     light: (
         background: #ffffff,
@@ -47,6 +56,9 @@ $themes: (
         button-active: #d4d4d4,
 
         toast-background: #f0f0f0,
+        tooltip-background: #f5f5f5,
+
+        note-border: #e0e0e0,
 
         border-color: #e0e0e0,
         border: #f0f0f0,
@@ -58,8 +70,13 @@ $themes: (
 
         red: #e06c75,
         green: #98c379,
+        gray: #cccccc,
 
-        icon-invert: 0%
+        icon-invert: 0%,
+
+        search-background: #f0f0f0aa,
+        search-background-container: #ffffffee,
+        search-hover: #e8e8e8,
     )
 );
 

frontend/app/assets/css/main.scss

@@ -106,7 +106,8 @@ textarea {
   background-color: var(--color-background-softer);
   padding: 12px;
   color: var(--color-text);
-  border: none;
+  border-radius: 6px;
+  border: solid 1px var(--color-border);;
 }
 
 input[type=text]:focus, input[type=password]:focus, input[type=email]:focus {

frontend/app/components/layouts/ColorPicker.vue

@@ -0,0 +1,62 @@
+<script setup>
+import { onMounted, ref } from 'vue';
+
+const color = ref("");
+const colorValue = ref(null);
+const colorPicker = ref(null);
+
+const selectedColorCode = ref(null);
+
+onMounted(() => {
+    colorValue.value.addEventListener('click', () => {
+        colorPicker.value.click();
+    })
+    
+    colorPicker.value.addEventListener('input', (event) => {
+        let newColor = event.target.value;
+        colorValue.value.classList.remove('unselected');
+        colorValue.value.style.backgroundColor = newColor;
+        color.value = newColor;
+        selectedColorCode.value.textContent = color.value.toUpperCase();
+    });
+});
+
+let GetColor = () => color.value;
+
+defineExpose({ GetColor });
+</script>
+
+<template>
+    <input type="color" id="colorPicker" ref="colorPicker">
+    <div class="color-value unselected" ref="colorValue">
+        <span class="selected-color-code" ref="selectedColorCode"></span>
+    </div>
+</template>
+
+<style lang="scss">
+#colorPicker {
+    display: none;
+}
+
+.color-value {
+    width: 100px;
+    text-align: center;
+    font-weight: bold;
+    font-size: 16px;
+    height: 20px;
+    border-radius: 10px;
+
+    &.unselected {
+        background-image: linear-gradient(45deg, #808080 25%, transparent 25%), linear-gradient(-45deg, #808080 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #808080 75%), linear-gradient(-45deg, transparent 75%, #808080 75%);
+        background-size: 10px 10px;
+        background-position: 0 0, 0 5px, 5px -5px, -5px 0px;
+    }
+    
+}
+
+.selected-color-code {
+    font-size: 12px;
+    width: 100%;
+    height: 100%;
+}
+</style>

frontend/app/components/layouts/Dropdown.vue

@@ -4,17 +4,16 @@ import { AddContextMenu, HideContextMenu } from '@/services/ContextMenu';
 const props = defineProps(['options', 'onselect', 'selected', 'keyFunc']);
 const options = props.options;
 const selectCallback = props.onselect;
+
 const initialSelect = props.selected;
 const dropdown = ref(null);
-
-const selected = ref(initialSelect);
+const selected = ref(null);
 
 onMounted(() => {
     if(props.keyFunc == undefined) props.keyFunc = (option) => option;
-    else selected.value = props.keyFunc(initialSelect);
+    selected.value = props.keyFunc(initialSelect);
     
     let context = [];
-    if(props.selected == undefined) selected.value = "undefined";
     watch(() => props.selected, () => {
         selected.value = props.keyFunc(props.selected);
     });

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>
+        <div class="content-layout">
+            <ContentSidebar></ContentSidebar>
             <Content></Content>
+        </div>
         <StatusBar></StatusBar>
     </div>
 </template>
 
 <style scoped>
+.content-manager {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+}
+
+.content-layout {
+    min-height: 0;
+    flex: 1;
+    display: flex;
+}
 </style>

frontend/app/components/managers/ContextMenuManager.vue

@@ -34,19 +34,28 @@ onMounted(() => {
     z-index: 214748363;
 
     flex-direction: column;
+    background-color: var(--color-tooltip-background);
+    border: 1px solid var(--color-border);
+    overflow: visible;
 
+    .context-menu-divider {
+        height: 1px;
+        margin: 4px 0;
+        border-top: 1px solid var(--color-border);
+        background-color: transparent;
+        border: none;
+    }
 
     .context-menu-element {
-
         &:last-child {
             border-width: 1px 1px 1px 1px;
         }
         border: solid 1px var(--color-border);
         border-width: 1px 1px 0px 1px;
-        padding: 3px 5px 3px 5px;
+        padding: 6px 10px 6px 8px;
         cursor: default;
         user-select: none;
-        background-color: var(--tooltip-background);
+        background-color: var(--color-tooltip-background);
         transition: background-color 100ms;
         display: flex;
         align-items: center;
@@ -54,19 +63,27 @@ onMounted(() => {
 
         span {
             flex-grow: 1;
-            padding-right: 20px;
+            padding-right: 24px;
             white-space: nowrap;
         }
 
         img {
             filter: invert(1);
-            width: 18px;
-            height: 18px;
+            width: 16px;
+            height: 16px;
         }
 
         &:hover {
             background-color: var(--color-background-softest);
         }
+
+        > .context-menu {
+            display: none !important;
+        }
+
+        &:hover > .context-menu {
+            display: flex !important;
+        }
     }
 }
 </style>

frontend/app/components/managers/WindowManager.vue

@@ -4,13 +4,9 @@ import { windows, getComponent } from '@/services/Windows';
 </script>
 
 <template>
-  <div class="window-container">
   <TransitionGroup name="window" tag="div">
-      <div v-for="win in windows" :key="win.id">
-        <component :is="getComponent(win.type)" :data="win" />
-      </div>
+    <component v-for="win in windows" :key="win.id" :is="getComponent(win.type)" :data="win" />
   </TransitionGroup>
-  </div>
 </template>
 
 
@@ -21,16 +17,18 @@ import { windows, getComponent } from '@/services/Windows';
 }
 .window-enter-from,
 .window-leave-to {
+  transition: all 0.15s ease;
   opacity: 0;
   transform: translateY(15px);
 }
+.window-move {
+  transition: transform 0.15s ease;
+}
 
 .window-wrapper {
     background-color: var(--color-window-background);
 
     /* backdrop-filter: blur(10px); */
-    position: fixed;
-
 
     display: flex;
     flex-direction: column;

frontend/app/components/partials/CampaignEntry.vue

@@ -0,0 +1,85 @@
+<script setup>
+
+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;
+
+const title = ref("");
+
+const container = ref(null);
+
+onMounted(() => {
+    title.value = data.name;
+    if (data.color && container.value) {
+        container.value.style.background = `linear-gradient(90deg, ${data.color}, ${data.color}44)`;
+    }
+
+    AddSound(container.value)
+});
+
+function ViewCampaign(){
+    SetCampaign(data);
+    ClearWindow({type: "main_menu"});
+}
+</script>
+
+
+<template>
+    <div class="campaign-entry-container" ref="container">
+        <div class="main-campaign-entry-container-inner">
+            <img class="campaign-icon" src="/img/def-avatar.jpg" draggable="false">
+            <div class="campaign-info">
+                <b>{{ title }}</b>
+            </div>
+
+            <div class="campaign-user-actions">
+                <button class="btn-primary button-small sound-click" v-on:click.prevent="ViewCampaign">{{ $t('general.open')}}</button>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.button-small {
+    padding: 10px;
+}
+
+.campaign-entry-container {
+    background-color: var(--color-background-softer);
+    width: 100%;
+    user-select: none;
+
+    border-bottom: 1px solid var(--color-border);
+    &:first-child {
+        border-top: 1px solid var(--color-border);
+    }
+}
+
+.main-campaign-entry-container-inner {
+    padding: 10px;
+    display: flex;
+    align-items: center;
+
+    justify-content: center;
+}
+
+.campaign-info {
+    text-align: left;
+    margin-left: 10px;
+}
+
+.campaign-icon {
+    width: 40px;
+    height: 40px;
+}
+
+.campaign-user-actions {
+    margin-left: auto;
+}
+</style>

frontend/app/components/partials/ContentSidebar.vue

@@ -0,0 +1,389 @@
+<script setup>
+import { computed, onMounted, 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';
+import NestedNoteList from './NestedNoteList.vue';
+
+const { Campaign } = useCampaignService();
+const notes = ref([]);
+const folders = ref([]);
+const loadingNotes = ref(false);
+const notesError = ref('');
+const sidebarCollapsed = ref(false);
+const isDragOverSidebar = ref(false);
+const expandedFolderIds = ref([]);
+const nestedNoteListRef = ref(null);
+
+async function handleSidebarDrop(event) {
+    const noteKey = event.dataTransfer.getData('text/plain');
+    if (!noteKey) return;
+    try {
+        await Server().post('/note/update', { id: noteKey, folder: null });
+        fetchCampaignNotes();
+    } catch (e) {}
+}
+
+function toggleExpandedFolder(folderId) {
+    const arr = expandedFolderIds.value;
+    const idx = arr.indexOf(folderId);
+    if (idx !== -1) {
+        arr.splice(idx, 1);
+    } else {
+        arr.push(folderId);
+    }
+}
+
+function isFolderExpanded(folderId) {
+    return expandedFolderIds.value.includes(folderId);
+}
+
+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) => currentNote.key !== createdNote.key);
+    notes.value.unshift(createdNote);
+    openNote(createdNote);
+}
+
+function handleNoteRenamed(data) {
+    const note = notes.value.find(n => n.key === data.key);
+    if (note) {
+        note.title = data.title;
+    }
+    emitter.emit('title-updated', { key: data.key, title: data.title });
+}
+
+const campaignId = computed(() => {
+    return Campaign.value?._id ?? Campaign.value?.id ?? null;
+});
+
+async function fetchCampaignNotes() {
+    if (!campaignId.value) {
+        notes.value = [];
+        folders.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 = [];
+            folders.value = [];
+            notesError.value = response.data.msg ?? 'Unable to load notes.';
+            return;
+        }
+
+        folders.value = response.data.folders.map((folder) => ({
+            _id: folder._id, name: folder.name, date: folder.date
+        }));
+
+        notes.value = response.data.notes.map((note) => {
+            return { key: note._id, title: note.title, text: note.content ?? '', date: note.date };
+        });
+    } catch (error) {
+        notes.value = [];
+        folders.value = [];
+        notesError.value = 'Unable to load notes.';
+    } finally {
+        loadingNotes.value = false;
+    }
+}
+
+async function createNote() {
+    if (!Campaign.value) return;
+
+    const cid = Campaign.value?._id;
+
+    try {
+        const response = await Server().post('/note/create', {
+            title: 'New note',
+            content: '',
+            campaign: cid
+        });
+
+        if (response.data.status !== 'ok') return;
+
+        emitter.emit('note-created', response.data.note);
+    } catch (err) {
+        console.log(err);
+    }
+}
+
+function createFolder() {
+    CreateWindow('new_folder', { campaign: campaignId.value });
+}
+
+function toggleSidebar() {
+    sidebarCollapsed.value = !sidebarCollapsed.value;
+}
+
+const rootNotes = computed(() => notes.value.filter(n => !n._folder));
+
+watch(campaignId, (newVal) => {
+    if (newVal) {
+        fetchCampaignNotes();
+    } else {
+        notes.value = [];
+        folders.value = [];
+        notesError.value = '';
+    }
+});
+
+onMounted(() => {
+    if (campaignId.value) {
+        fetchCampaignNotes();
+    }
+});
+</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="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="createFolder"
+                :disabled="!Campaign"
+                title="New folder"
+                aria-label="New folder"
+            >
+                <img class="sidebar-action-icon" src="/icons/iconoir/regular/folder.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>
+                </div>
+            </div>
+
+          <div class="sidebar-list-drop-wrap" :class="{ 'drag-over': isDragOverSidebar }" id="campaign-notes-list" @dragenter.self="isDragOverSidebar = true" @dragleave.self="isDragOverSidebar = false" @dragover.prevent @drop.stop="handleSidebarDrop">
+                <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="folders.length === 0 && notes.length === 0" class="sidebar-state">
+                     No notes in this campaign yet.
+                 </div>
+
+                 <template v-else>
+                <NestedNoteList ref="nestedNoteListRef"
+                     :parent-folder-id="null"
+                     :folders="folders"
+                     :notes="rootNotes"
+                     :campaign-id="campaignId"
+                     :expanded-folder-ids="expandedFolderIds"
+                     @open-note="openNote"
+                     @reload-notes="fetchCampaignNotes"
+                     @toggle-expanded-folder="toggleExpandedFolder"
+                 />
+                 </template>
+             </div>
+        </aside>
+    </div>
+</template>
+
+<style scoped>
+.sidebar-shell {
+    min-height: 0;
+    display: flex;
+    flex-direction: row;
+}
+
+.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 {
+    min-width: 280px;
+    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-drop-wrap {
+    width: 280px;
+    min-width: 280px;
+    box-sizing: border-box;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    overflow-y: auto;
+    gap: 2px;
+    transition: background-color 0.15s ease;
+    flex: 1;
+    min-height: 0;
+}
+
+.sidebar-list-drop-wrap.drag-over {
+    background: var(--color-button-hover);
+}
+
+.sidebar-state {
+    padding: 12px;
+    border-radius: 10px;
+    background: var(--color-background-soft);
+    font-size: 14px;
+}
+
+.sidebar-state.error {
+    color: #9e2a2b;
+}
+
+@media (max-width: 900px) {
+    .notes-sidebar {
+        width: 220px;
+        min-width: 220px;
+    }
+
+    .sidebar-header,
+    .sidebar-list-drop-wrap {
+        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();
@@ -48,12 +47,6 @@ function LogOut(){
     CreateWindow('login');
 }
 
-function EditProfile(){
-    CreateChildWindow(GetFirstWindowId('main_menu'), 'edit_profile', {
-        user: GetUser()
-    });
-}
-
 function EditSettings(){
     CreateChildWindow(GetFirstWindowId('main_menu'), 'settings', {
         user: GetUser()
@@ -102,7 +95,6 @@ onMounted(() => {
             </div>
 
             <div class="main-user-actions">
-                <button class="btn-primary button-small sound-click" v-on:click.prevent="EditProfile">{{ $t("main-menu.edit-profile") }}</button>
                 <button class="btn-primary button-small sound-click" v-on:click.prevent="EditSettings">{{ $t("main-menu.settings") }}</button>
                 <button class="btn-primary button-small sound-click" v-on:click.prevent="LogOut">{{ $t("main-menu.log-out") }}</button>
             </div>
@@ -117,7 +109,6 @@ onMounted(() => {
 }
 
 .button-small {
-    height: 32px;
     padding: 10px;
 }
 

frontend/app/components/partials/NestedNoteList.vue

@@ -0,0 +1,300 @@
+<script setup>
+import { ref, onMounted, watch } from 'vue';
+import { emitter } from '~/services/Emitter';
+import Server from '~/services/Server';
+import { CreateWindow } from '~/services/Windows';
+import { ShowContextMenu, HideContextMenu } from '~/services/ContextMenu';
+
+const props = defineProps({
+    folders: Array,
+    notes: Array,
+    campaignId: String,
+    level: { type: Number, default: 0 },
+    parentFolderId: String,
+    expandedFolderIds: { type: Array, default: () => [] }
+});
+
+const emit = defineEmits(['open-note', 'reload-notes']);
+
+// Track which folder IDs have been requested to avoid duplicate requests
+const loadingFolders = new Set();
+const dragHoveredFolderId = ref(null);
+
+// Cache of loaded folder contents — persists across reloads until cleared
+// Each entry: { [folderId]: { notes: [], subfolders: [] } }
+const folderContentCache = ref({});
+
+function toggleExpanded(folderId) {
+    emit('toggle-expanded-folder', folderId);
+}
+
+watch(
+    () => props.expandedFolderIds,
+    () => {
+        if (props.level === 0) {
+            loadExpandedFolders();
+        }
+    },
+    { deep: true }
+);
+
+onMounted(() => {
+    loadExpandedFolders();
+});
+
+function loadFolderContents(folderId) {
+    if (loadingFolders.has(folderId)) return;
+    loadingFolders.add(folderId);
+
+    Server().get('/note/subfolder/list', { params: { campaign: props.campaignId, folder: folderId } })
+        .then(res => {
+            if (res.data.status !== 'ok') return;
+            folderContentCache.value[folderId] = {
+                notes: res.data.notes.map(n => ({ key: n._id, title: n.title, text: n.content || '' })),
+                subfolders: res.data.subfolders || []
+            };
+        }).catch(() => {}).finally(() => {
+            loadingFolders.delete(folderId);
+        });
+}
+
+function getFolderNotes(folderId) {
+    return folderContentCache.value[folderId]?.notes || [];
+}
+
+function getFolderSubfolders(folderId) {
+    return folderContentCache.value[folderId]?.subfolders || [];
+}
+
+// Load contents for all currently-expanded folders
+function loadExpandedFolders() {
+    const idsToLoad = props.level === 0
+        ? props.expandedFolderIds
+        : (props.parentFolderId && props.expandedFolderIds.includes(props.parentFolderId) ? [props.parentFolderId] : []);
+
+    for (const id of idsToLoad) {
+        if (folderContentCache.value[id]) continue;
+        loadFolderContents(id);
+    }
+}
+
+async function handleDropNoteOnFolder(folderId, event) {
+    const noteKey = event.dataTransfer.getData('text/plain');
+    if (!noteKey || !folderId) return;
+
+    dragHoveredFolderId.value = null;
+
+    try {
+        await Server().post('/note/update', { id: noteKey, folder: folderId });
+        emit('reload-notes');
+    } catch (e) {}
+}
+
+async function handleDropNoteOnRoot(event) {
+    const noteKey = event.dataTransfer.getData('text/plain');
+    if (!noteKey) return;
+
+    dragHoveredFolderId.value = null;
+
+    try {
+        await Server().post('/note/update', { id: noteKey, folder: null });
+        emit('reload-notes');
+    } catch (e) {}
+}
+
+// Called on reload — clears cache so expanded folders refetch fresh content
+function clearCacheAndReloadExpanded() {
+    const folderIdsToReLoad = [];
+    if (props.level === 0) {
+        for (const id of props.expandedFolderIds) {
+            if (folderContentCache.value[id]) folderIdsToReLoad.push(id);
+            delete folderContentCache.value[id];
+        }
+    } else if (props.parentFolderId && folderContentCache.value[props.parentFolderId]) {
+        folderIdsToReLoad.push(props.parentFolderId);
+        delete folderContentCache.value[props.parentFolderId];
+    }
+
+    // Force reactivity by creating a new object
+    folderContentCache.value = {};
+
+    for (const id of folderIdsToReLoad) {
+        loadFolderContents(id);
+    }
+}
+
+// Exposed to parent components
+defineExpose({ clearCacheAndReloadExpanded });
+
+function startDragNote(event, note) {
+    event.dataTransfer.setData('text/plain', note.key);
+    event.dataTransfer.effectAllowed = 'move';
+}
+
+function setDragHover(id) {
+    dragHoveredFolderId.value = id;
+}
+
+function clearDragHover() {
+    dragHoveredFolderId.value = null;
+}
+
+function buildNoteContextMenu(note) {
+    return [
+        { name: 'Open', icon: '/icons/iconoir/regular/book.svg', action: () => emit('open-note', note) },
+        { name: 'Rename', icon: '/icons/iconoir/regular/edit-pencil.svg', action: () => renameNote(note) },
+        {
+            name: 'Move to Folder...', icon: '/icons/iconoir/regular/folder.svg',
+            context: buildMoveToMenu(note)
+        },
+        { divider: true },
+        { name: 'Delete', icon: '/icons/iconoir/regular/trash.svg', action: () => deleteNote(note) }
+    ];
+}
+
+function buildFolderContextMenu(folder) {
+    if (!folder || !folder._id) return [];
+    return [
+        { name: 'New Note Here', icon: '/icons/iconoir/regular/plus.svg', action: () => createNoteInFolder(folder._id) },
+        { name: 'Rename', icon: '/icons/iconoir/regular/edit-pencil.svg', action: () => renameFolder(folder._id, folder.name) },
+        { name: 'Delete Folder', icon: '/icons/iconoir/regular/trash.svg', action: () => deleteFolder(folder._id) }
+    ];
+}
+
+let selectedNoteForMove = {};
+
+function buildMoveToMenu(note) {
+    selectedNoteForMove = note;
+    const moveItems = (props.folders || []).map(folder => ({
+        name: folder.name, icon: '/icons/iconoir/regular/folder.svg', action: () => moveNoteToFolder(note, folder._id)
+    }));
+
+    if (moveItems.length > 0) moveItems.push({ divider: true });
+
+    moveItems.push({ name: '(Root)', icon: '/icons/iconoir/regular/book.svg', action: () => moveNoteToFolder(note, null) });
+    return moveItems;
+}
+
+function renameNote(note) { CreateWindow('rename_note', { title: note.title, key: note.key }); }
+
+async function deleteNote(note) {
+    try {
+        const response = await Server().post('/note/delete', { id: note.key });
+        if (response.data.status === 'ok') { emit('reload-notes'); emitter.emit('delete-note', note.key); }
+    } catch (error) {} finally {
+        HideContextMenu();
+    }
+}
+
+function renameFolder(folderId, name) { CreateWindow('new_folder', { folderId, campaign: props.campaignId, name }); }
+
+async function deleteFolder(folderId) {
+    const response = await Server().post('/folder/delete', { id: folderId });
+    if (response.data.status === 'ok') emit('reload-notes');
+    HideContextMenu();
+}
+
+async function moveNoteToFolder(note, folderId) {
+    try {
+        const response = await Server().post('/note/update', { id: note.key, folder: folderId || null });
+        if (response.data.status !== 'ok') return;
+        emit('reload-notes');
+    } catch (e) {}
+    HideContextMenu();
+}
+
+async function createNoteInFolder(folderId) {
+    try {
+        const response = await Server().post('/note/create', { title: 'New note', content: '', campaign: props.campaignId, folder: folderId });
+        if (response.data.status === 'ok') emit('reload-notes');
+    } catch (e) {}
+}
+</script>
+
+<template>
+    <div class="nested-list" :class="'level-' + level">
+        <!-- Folders at this level -->
+      <template v-for="folder in folders" :key="folder._id">
+            <div class="folder-item" :class="{ 'drag-over': dragHoveredFolderId === folder._id }"
+                  @dragover.prevent="setDragHover(folder._id)"
+                  @dragleave.self="clearDragHover"
+                  @drop.stop="handleDropNoteOnFolder(folder._id, $event)">
+                <button type="button" class="folder-toggle" @click="toggleExpanded(folder._id)" @contextmenu.prevent="ShowContextMenu(buildFolderContextMenu(folder))">
+                    <img
+                        class="folder-arrow"
+                        :src="expandedFolderIds.includes(folder._id) ? '/icons/iconoir/regular/nav-arrow-down.svg' : '/icons/iconoir/regular/nav-arrow-right.svg'"
+                        alt="" aria-hidden="true"
+                    >
+                    <img class="folder-icon" src="/icons/iconoir/regular/folder.svg" alt="">
+                    <span class="folder-name">{{ folder.name }}</span>
+                </button>
+
+                <div v-show="expandedFolderIds.includes(folder._id)"
+                    class="folder-children" :class="{ 'drag-over': dragHoveredFolderId === folder._id }"
+                    @dragover.prevent="setDragHover(folder._id)" @dragleave.self="clearDragHover"
+                    @drop.stop="handleDropNoteOnFolder(folder._id, $event)">
+
+                    <!-- Load contents now — cache will be populated on demand -->
+                    <template v-if="expandedFolderIds.includes(folder._id) && !folderContentCache[folder._id]">
+                        <div class="sidebar-state" style="font-size:13px;opacity:0.6;">Loading...</div>
+                    </template>
+
+                    <NestedNoteList
+                        v-if="expandedFolderIds.includes(folder._id)"
+                        :folders="getFolderSubfolders(folder._id)"
+                        :notes="getFolderNotes(folder._id)"
+                        :campaign-id="campaignId"
+                        :level="level + 1"
+                        :parent-folder-id="folder._id"
+                        :expanded-folder-ids="expandedFolderIds"
+                        @open-note="$emit('open-note', $event)"
+                        @reload-notes="clearCacheAndReloadExpanded"
+                        @toggle-expanded-folder="toggleExpanded"
+                    />
+
+                    <div v-if="expandedFolderIds.includes(folder._id) && folderContentCache[folder._id] !== undefined && (getFolderNotes(folder._id).length === 0 && getFolderSubfolders(folder._id).length === 0)" class="sidebar-state">
+                        Empty folder
+                    </div>
+                </div>
+            </div>
+        </template>
+
+        <!-- Notes at this level -->
+        <template v-for="note in notes" :key="note.key">
+            <button type="button" class="note-link" draggable="true" @dragstart="startDragNote($event, note)" @click.stop="$emit('open-note', note)" @contextmenu.prevent="ShowContextMenu(buildNoteContextMenu(note))">
+                <span class="note-link-title">{{ note.title }}</span>
+            </button>
+        </template>
+
+        <!-- Drop zone for root-level notes -->
+        <div v-if="level === 0" class="root-drop-zone" :class="{ 'drag-over': dragHoveredFolderId === 'root' }" @drop.stop="handleDropNoteOnRoot($event)">
+        </div>
+
+        <div v-if="folders.length === 0 && (!notes || notes.length === 0) && level === 0" class="sidebar-state">Empty</div>
+    </div>
+</template>
+
+<style scoped>
+.nested-list { display: flex; flex-direction: column; gap: 2px; }
+
+.folder-item { display: flex; flex-direction: column; cursor: default; border-radius: 10px; }
+.folder-item.drag-over { background: var(--color-button-hover); }
+
+.folder-toggle { width: 100%; padding: 6px 8px; margin: 0; border: none; background: transparent; display: flex; align-items: center; gap: 6px; cursor: grab; border-radius: 10px; color: var(--color-text); font-size: inherit; transition: background-color 0.15s ease; }
+.folder-toggle:hover { background: var(--color-background-soft); }
+
+.folder-arrow { width: 14px; height: 14px; filter: invert(var(--color-icon-invert)); opacity: 0.5; }
+.folder-icon { width: 16px; height: 16px; filter: invert(var(--color-icon-invert)); }
+.folder-name { font-weight: 500; flex: 1; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
+
+.folder-children { padding-left: 20px; margin-top: 2px; cursor: default; }
+.folder-children.drag-over { background: #ffffff22; border-radius: 10px; }
+
+.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: grab; }
+.note-link-title { font-weight: 600; word-break: break-word; }
+
+.sidebar-state { padding: 12px; border-radius: 10px; background: var(--color-background-soft); font-size: 14px; }
+
+.root-drop-zone { min-height: 24px; position: relative; transition: background-color 0.15s ease, border-color 0.15s ease; border-radius: 10px; }
+.root-drop-zone.drag-over { background: var(--color-button-hover); }
+</style>

frontend/app/components/partials/VersionRender.vue

@@ -17,6 +17,7 @@ const config = useRuntimeConfig()
     bottom: 0;
     left: 0;
     user-select: none;
+    font-size: 14px;
 }
 span{
     color: rgb(59, 59, 59);

frontend/app/components/viewer/TopBar.vue

@@ -1,12 +1,19 @@
 <script setup>
 import TopSearchBar from './topbar/TopSearchBar.vue';
 
+const campaignName = computed(() => {
+    return 'Campaign';
+});
+
 </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>
@@ -25,17 +32,32 @@ 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>

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,118 @@
 <script setup>
-import { onMounted, ref } from 'vue';
+import { onMounted, onUnmounted, ref, createApp } from 'vue';
+import ToastManager from '~/components/managers/ToastManager.vue';
+import { emitter } from '~/services/Emitter';
+import { GetWidget, ParseMarkdown } from '~/services/Marker';
+import Server from '~/services/Server';
+import { DisplayToast } from '~/services/Toaster';
+import TestWidget from '../widgets/TestWidget.vue';
 
 // 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();
+const editingMode = ref(false);
+const title = ref(props.title);
+const isDirty = ref(false);
+const showClose = ref(false);
 
-function gotoNote(){
-    // emitter.emit('goto-note', props.noteKey);
+let savedState = { text: '', title: '' };
+
+function markDirty() {
+    isDirty.value = sourceText.value !== savedState.text || title.value !== savedState.title;
 }
 
-function closeNote(){
-    // emitter.emit('delete-note', 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);
-});
-
 function closeNote(){
     emitter.emit('delete-note', props.noteKey);
 }
 
-function gotoNote(){
-    // emitter.emit('goto-note', props.noteKey);
+const compiledMarkdown = computed(() => {
+    return ParseMarkdown(sourceText.value);
+});
+
+function mountComponents() {
+  // Should no need more
+  const widget_types = ['display', 'inline'];
+  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);
+}
+
+watch(sourceText, markDirty);
+
+watch(title, markDirty);
+
+onMounted(() => {
+    sourceText.value = props.text;
+    title.value = props.title;
+  
+    savedState = { text: props.text, title: props.title };
+    emitter.on('title-updated', handleTitleUpdate);
+    // window.addEventListener('keydown', handleKeydown);
+    setTimeout(() => setupCallout(), 0);
+    update();
+});
+
+function handleTitleUpdate(data) {
+    if (data.key !== props.noteKey) return;
+    title.value = data.title;
+    savedState.title = data.title;
+}
+
+onUnmounted(() => {
+  emitter.off('title-updated', handleTitleUpdate);
+  // 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'){
+            return;
+        }
+        savedState = { text: sourceText.value, title: title.value };
+        isDirty.value = false;
+    }).catch((error) => {
+    });
 }
 
 function toggleCallout() {
@@ -78,6 +140,10 @@ function toggleCallout() {
 }
 
 function setupCallout() {
+  if (!noteContent.value) {
+    return;
+  }
+
   const collapsible = noteContent.value.getElementsByClassName(
     `callout is-collapsible`,
   );
@@ -93,21 +159,31 @@ function setupCallout() {
     }
   }
 }
-*/
 
 
 </script>
 
 <template>
-<div class="note">
-    <div class="note-stunt" v-on:click="gotoNote">
-        <div class="close-button" v-on:click="closeNote">
+<div class="note" @keydown="handleKeydown" tabindex="0">
+    <div class="note-stunt">
+        <div class="unsaved-wrapper" v-if="isDirty">
+            <div class="unsaved-dot"></div>
+            <div class="close-button close-hidden" v-on:click="closeNote">
+                <img class="icon" src="/icons/Pixelarticons/white/close.svg" alt="My Happy SVG"/>
+            </div>
+        </div>
+        <div class="close-button" v-else 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>{{ title }}</h1>
+          <div ref="noteContent" v-html="displayText"></div>
+        </div>
+        
     </div>
 </div>
 </template>
@@ -124,6 +200,62 @@ function setupCallout() {
     user-select: none;
 }
 
+.unsaved-wrapper {
+    position: relative;
+    margin-bottom: 5px;
+    width: 20px;
+    height: 20px;
+}
+
+.unsaved-dot {
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    background-color: #ffffff;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    pointer-events: none;
+}
+
+.close-hidden {
+    opacity: 0;
+    visibility: hidden;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 20px;
+    height: 20px;
+    margin-bottom: 0;
+    transition: opacity 0.15s ease, visibility 0.15s ease;
+}
+
+.unsaved-wrapper:hover .close-hidden {
+    opacity: 1;
+    visibility: visible;
+}
+
+.unsaved-wrapper:hover .unsaved-dot {
+    opacity: 0;
+}
+
+.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 +263,7 @@ function setupCallout() {
     display: flex;
     justify-content: center;
     cursor: pointer;
+    filter: invert(var(--color-icon-invert));
 }
 
 .note {
@@ -138,34 +271,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;
-}
-</style>
-
-<style>
-.note-content > h1 {
-    text-align: center;
+    width: 100%;
 }
 
-.note-content  .katex-display {
-    max-width: 600px;
+.note-content :deep(img) {
+  max-width: 100%;
+  height: auto;
+  display: block; /* optional: avoids inline spacing issues */
 }
 </style>

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

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, onMounted } from 'vue';
+import { onMounted, onUnmounted, ref } from 'vue';
 import Note from './Note.vue';
 import { emitter } from '~/services/Emitter';
 
@@ -9,6 +9,10 @@ const noteContainer = ref(null);
 
 function calculateContainerWidth(){
     let dom = noteContainer.value;
+    if (!dom) {
+        return;
+    }
+
     dom.style.width = noteData.value.length * 701 + "px";
     
     setTimeout(() => {
@@ -22,19 +26,42 @@ function calculateContainerWidth(){
 }
 
 function pushNote(note){
+    noteData.value = noteData.value.filter((currentNote) => {
+        return currentNote.key !== note.key;
+    });
     noteData.value.push(note);
     calculateContainerWidth();
 }
 
-emitter.on("push-note", (note) => {
+function handlePushNote(note) {
     pushNote(note);
-})
+}
 
-emitter.on("delete-note", (key) => {
+function handleDeleteNote(key) {
     noteData.value = noteData.value.filter((note) => {
         return note.key !== key;
     });
     calculateContainerWidth();
+}
+
+// Moure aixo
+onMounted(() => {
+    emitter.on("push-note", handlePushNote);
+    emitter.on("delete-note", handleDeleteNote);
+    emitter.on("title-updated", handleTitleUpdated);
+});
+
+function handleTitleUpdated(data) {
+    const note = noteData.value.find(n => n.key === data.key);
+    if (note) {
+        note.title = data.title;
+    }
+}
+
+onUnmounted(() => {
+    emitter.off("push-note", handlePushNote);
+    emitter.off("delete-note", handleDeleteNote);
+    emitter.off("title-updated", handleTitleUpdated);
 });
 
 </script>
@@ -59,7 +86,6 @@ emitter.on("delete-note", (key) => {
     display: flex;
     height: 100%;
     margin: 0;
-    height: 100%;
     background-color: var(--color-background);
 }
 </style>

frontend/app/components/viewer/topbar/SearchResult.vue

@@ -0,0 +1,75 @@
+<script setup>
+defineProps({
+  title: { type: String, default: '' },
+  subtitle: { type: String, default: '' },
+  link: { type: String, default: '' },
+  icon: { type: String, default: '' }
+});
+
+const emit = defineEmits(['select']);
+
+function handleSelect() {
+  emit('select', { title: props.title, subtitle: props.subtitle, link: props.link });
+}
+</script>
+
+<template>
+  <button class="search-result" @click="handleSelect">
+    <div class="search-result-left">
+      <img v-if="icon" class="result-icon" :src="icon" alt="">
+      <span class="result-title">{{ title }}</span>
+    </div>
+    <span v-if="subtitle" class="result-subtitle">{{ subtitle }}</span>
+  </button>
+</template>
+
+<style scoped>
+.search-result {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 8px 12px;
+  background: none;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  color: inherit;
+  text-align: left;
+  font-family: inherit;
+  font-size: 14px;
+  transition: background-color 0.1s ease;
+}
+
+.search-result:hover,
+.search-result.selected {
+  background-color: var(--color-search-hover);
+}
+
+.search-result-left {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.result-icon {
+  width: 14px;
+  height: 14px;
+  filter: invert(var(--color-icon-invert));
+  opacity: 0.6;
+  flex-shrink: 0;
+}
+
+.result-title {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.result-subtitle {
+  font-size: 12px;
+  opacity: 0.5;
+  flex-shrink: 0;
+}
+</style>

frontend/app/components/viewer/topbar/TopSearchBar.vue

@@ -1,58 +1,261 @@
 <script setup>
+import { ref, onMounted, onUnmounted } from 'vue';
 import SearchIcon from 'pixelarticons/svg/search.svg'
-/*
-import { ref, onMounted } from 'vue';
-import { GetArrayContent, GetContent } from '@/services/Content';
-import useEmitter from '@/services/Emitter';
+import PlusIcon from 'pixelarticons/svg/plus.svg'
+import NoteSearchResult from './SearchResult.vue';
+import Server from '~/services/Server';
+import { emitter } from '~/services/Emitter';
+import { register, search as searchActions, execute as executeAction } from '~/services/ActionRegistry';
+import { useCampaignService } from '~/services/Campaign.js';
 
-const emitter = useEmitter();
+const { Campaign } = useCampaignService();
 
-import NoteSearchElement from "@/components/topbar/NoteSearchElement.vue"; 
+const inputText = ref('');
+const notes = ref([]);
 
-let noteLinks = ref([]);
-let searchContainer = ref(null);
+const showResults = ref(false);
+const selectedIndex = ref(-1);
 
-emitter.on("hide-search-container", () => {
-    searchContainer.value.style.display = "none";
-})
+const focusInput = ref(null);
 
-function updateList(event){
-    let content = GetArrayContent();
-    let query = "";
-    if(event !== undefined) query = event.target.value;
-    let filter = query.normalize("NFD").replace(/[\u0300-\u036f]/g, "").toUpperCase().trim();
+// ---- Keyboard shortcut to open search ----
+function globalKeydown(e) {
+  const modKey = e.metaKey || e.ctrlKey;
+  if ((modKey && e.key === 'k') || (e.key === '/' && !isInputFocused())) {
+    e.preventDefault();
+    focusInput.value?.focus();
+  }
+  if (e.key === 'Escape' && showResults.value) {
+    closeResults();
+  }
+}
 
-    noteLinks.value = content.filter((noteInfo) => {
-        return noteInfo["title"].normalize("NFD").replace(/[\u0300-\u036f]/g, "").toUpperCase().indexOf(filter) > -1;
+function isInputFocused() {
+  const tag = document.activeElement?.tagName.toLowerCase();
+  return tag === 'input' || tag === 'textarea' || document.activeElement?.isContentEditable;
+}
+
+// ---- Registration of create-note action (extensibile for future commands) ----
+function registerCreateNoteAction() {
+  const action = {
+    id: 'create_note',
+    label: 'New note',
+    description: 'Create a new note in the current campaign',
+    execute: async () => {
+      if (!Campaign.value) return;
+      const campaignId = Campaign.value?._id ?? 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.error('[ActionRegistry] Failed to create note:', err);
+      }
+    }
+  };
+  register(action);
 }
 
-function searchFocus(event){
-    if(GetContent() === undefined) return;
+// ---- Note search ----
+async function fetchNotes() {
+  if (!Campaign.value) return;
   
-    searchContainer.value.style.display = "";
-    updateList(undefined);
+  const campaignId = Campaign.value?._id ?? Campaign.value?.id;
+  try {
+    const response = await Server().get('/note/list', { params: { campaign: campaignId } });
+    if (response.data.status !== 'ok') {
+      notes.value = [];
+      return;
+    }
+    notes.value = response.data.notes.map(n => ({
+      key: n._id,
+      title: n.title || 'Untitled',
+      date: n.date
+    }));
+  } catch (err) {
+    notes.value = [];
+  }
 }
 
+function openNote(note) {
+  emitter.emit('push-note', note);
+  closeResults();
+}
+
+// ---- Unified results: notes + command actions ----
+function getCombinedResults(query) {
+  const combined = [];
+
+  if (query && query.trim().length > 0) {
+    const q = query.normalize("NFD").replace(/[\u036f]/g, "").toLowerCase().trim();
+
+    // Filter notes that match the query text
+    const matchingNotes = notes.value.filter(note => {
+      const title = (note.title || '').normalize("NFD").replace(/[\u036f]/g, "").toLowerCase();
+      return title.includes(q);
+    });
+
+    for (const note of matchingNotes) {
+      combined.push({ type: 'note', data: note });
+    }
+
+    // Search command actions
+    const matchedActions = searchActions(query);
+    for (const action of matchedActions) {
+      combined.push({ type: 'action', data: action });
+    }
+  } else if (query === '' || query === null) {
+    // Empty query - show all notes + all actions
+    for (const note of notes.value) {
+      combined.push({ type: 'note', data: note });
+    }
+    const allActions = searchActions('');
+    for (const action of allActions) {
+      combined.push({ type: 'action', data: action });
+    }
+  }
+
+  return combined;
+}
+
+// ---- Input handling ----
+function onInput(event) {
+  const query = event.target.value;
+  inputText.value = query;
+  selectedIndex.value = -1;
+
+  if (!query || query.trim() === '') {
+    showResults.value = false;
+    return;
+  }
+
+  showResults.value = true;
+}
+
+function onFocus() {
+  if (notes.value.length === 0) {
+    fetchNotes().then(() => {
+      showResults.value = true;
+    });
+  } else {
+    showResults.value = true;
+  }
+}
+
+function onBlur(event) {
+  // Delay closing to allow click on results
+  setTimeout(() => {
+    closeResults();
+  }, 150);
+}
+
+async function onKeydown(event) {
+  const combined = getCombinedResults(inputText.value);
+
+  if (event.key === 'ArrowDown') {
+    event.preventDefault();
+    selectedIndex.value = Math.min(selectedIndex.value + 1, combined.length - 1);
+    return;
+  }
+
+  if (event.key === 'ArrowUp') {
+    event.preventDefault();
+    selectedIndex.value = Math.max(selectedIndex.value - 1, 0);
+    return;
+  }
+
+  if (event.key === 'Enter') {
+    event.preventDefault();
+    if (selectedIndex.value >= 0) {
+      const item = combined[selectedIndex.value];
+      if (!item) return;
+
+      if (item.type === 'note') {
+        openNote(item.data);
+      } else if (item.type === 'action') {
+        executeAction(item.data.id);
+        closeResults();
+      }
+    }
+  }
+
+  if (event.key === 'Escape') {
+    closeResults();
+  }
+}
+
+function onSelect(result) {
+  if (!result) return;
+
+  if (result.link) {
+    const note = notes.value.find(n => n.key === result.link);
+    if (note) openNote(note);
+  }
+  closeResults();
+}
+
+function handleActionSelect(actionData) {
+  executeAction(actionData.id);
+  closeResults();
+}
+
+function closeResults() {
+  showResults.value = false;
+  selectedIndex.value = -1;
+  inputText.value = '';
+}
+
+// ---- Clean up register action on mount/unmount ----
 onMounted(() => {
+  document.addEventListener('keydown', globalKeydown);
+  registerCreateNoteAction();
+});
+
+onUnmounted(() => {
+  document.removeEventListener('keydown', globalKeydown);
 });
-*/
 </script>
 
 <template>
   <div class="top-search-container">
     <div class="top-search-box">
-            <img class="icon search-icon" :src="SearchIcon" alt="My Happy SVG"/>
-            <!-- <input type="text" v-on:input="updateList" v-on:focus="searchFocus" class="search-prompt" placeholder="Buscar...">-->
-            <input type="text" class="search-prompt" placeholder="Buscar...">
+      <img class="icon search-icon" :src="SearchIcon" alt="" aria-hidden="true">
+      <input
+        ref="focusInput"
+        type="text"
+        class="search-prompt"
+        placeholder="Search or press Cmd+K..."
+        v-model="inputText"
+        @input="onInput"
+        @focus="onFocus"
+        @blur="onBlur"
+        @keydown="onKeydown"
+        autocomplete="off"
+        spellcheck="false"
+      >
     </div>
 
-        <!-- <div class="search-container" ref="searchContainer"  v-on:focusout="searchFocusout" style="display: none;">-->
-        <div class="search-container" style="display: none;">
+    <div class="search-container" v-if="showResults">
+      <template v-if="getCombinedResults(inputText).length === 0 && inputText.trim()">
+        <div class="search-empty">No results found</div>
+      </template>
+
       <div class="search-container-list">
-                <!--
-                <NoteSearchElement v-for="element in noteLinks" :key="element.key" :title="element.title" :link="element.key"></NoteSearchElement>
-                -->
+        <NoteSearchResult
+          v-for="(item, index) in getCombinedResults(inputText)"
+          :key="(item.data.key || item.data.id) + '-' + index"
+          :title="item.type === 'note' ? item.data.title : item.data.label"
+          :subtitle="item.type === 'action' ? item.data.description : ''"
+          :link="item.type === 'note' ? item.data.key : null"
+          :icon="item.type === 'action' ? PlusIcon : ''"
+          :class="{ selected: index === selectedIndex }"
+          @select="onSelect"
+          @click.stop.prevent="() => { if (item.type === 'note') openNote(item.data); else handleActionSelect(item.data); }"
+        />
       </div>
     </div>
   </div>
@@ -63,12 +266,13 @@ onMounted(() => {
   height: 100%;
   align-items: center;
   display: flex;
+  position: relative;
 }
     
 .top-search-box {
   align-items: center;
   display: flex;
-    background-color: var(--search-background);
+  background-color: var(--color-search-background);
   padding: 2px;
   border-radius: 5px;
 }
@@ -80,6 +284,7 @@ onMounted(() => {
   max-width: 400px;
   background: none;
   margin-left: -5px;
+  font-family: inherit;
 }
 
 .search-prompt:focus {
@@ -88,23 +293,39 @@ onMounted(() => {
 
 .search-icon {
   padding: 5px;
+  filter: invert(var(--color-icon-invert));
 }
 
 .search-container {
   position: absolute;
-    background-color: var(--search-background-container);
+  background-color: var(--color-search-background-container);
   top: 45px;
   margin-left: auto;
   margin-right: auto;
-    max-width: 800px;
-    max-height: 500px;
-    overflow-y: scroll;
+  max-width: 600px;
+  max-height: 400px;
+  overflow-y: auto;
   left: 0;
   right: 0;
   backdrop-filter: blur(15px);
   border-radius: 10px;
-    min-width: 400px;
-    min-height: 500px;
+  width: calc(30vw + 400px);
+  min-width: 320px;
   z-index: 99999;
+  display: flex;
+  flex-direction: column;
+}
+
+.search-container-list {
+  display: flex;
+  flex-direction: column;
+  padding: 4px;
+}
+
+.search-empty {
+  padding: 16px;
+  text-align: center;
+  opacity: 0.5;
+  font-size: 14px;
 }
 </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/windows/CreateCampaignWindow.vue

@@ -0,0 +1,144 @@
+<script setup>
+import { onMounted, ref } from 'vue';
+import { SetupHandle, SetSize, ResetPosition, Top, ClearWindow } from '@/services/Windows';
+
+import WindowHandle from './partials/WindowHandle.vue';
+import ColorPicker from '../layouts/ColorPicker.vue';
+import Server from '~/services/Server';
+import { DisplayToast } from '~/services/Toaster';
+
+const handle = ref(null);
+const wrapper = ref(null);
+
+const props = defineProps(['data']);
+const data = props.data;
+const loading = ref(false);
+
+let id = data.id;
+
+onMounted(() => {
+    Top(wrapper);
+    SetupHandle(id, handle);
+    SetSize(id, {width: 500, height: 400});
+    ResetPosition(id, "center");
+});
+
+const campaignName = ref("");
+const campaignDescription = ref("");
+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});
+    });
+}
+</script>
+
+
+<template>
+    <div class="window-wrapper" :id="'window-wrapper-' + id" ref="wrapper">
+        <WindowHandle :window="id" ref="handle"></WindowHandle>
+
+        <div class="body">
+            <!-- Body -->
+            <form v-on:submit.prevent="NewCampaign">
+                <div class="form-field">
+                    <label>{{ $t('campaigns.create.name') }}</label>
+                    <input type="text" :placeholder="$t('campaigns.create.enter')" name="campaignName" v-model="campaignName" autocomplete="off" >
+                </div>
+                <div class="form-field">
+                    <label>{{ $t('campaigns.create.description') }}</label>
+                    <textarea type="text" :placeholder="$t('campaigns.create.description-placeholder')" name="campaignDescription" v-model="campaignDescription" autocomplete="off" ></textarea>
+                </div>
+                <div class="form-field">
+                    <label>{{ $t('campaigns.create.color') }}</label>
+                    <ColorPicker ref="colorPicker"></ColorPicker>
+                </div>
+                <div class="form-actions">
+                    <button class="btn-primary sound-click">
+                        <span v-if="loading">
+                            <Spinner />
+                        </span>
+                        <span v-else>
+                            {{ $t("general.create") }}
+                        </span>
+                    </button>
+                </div>
+            </form>
+        </div>
+
+    </div>
+</template>
+
+
+<style scoped>
+.window-wrapper {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+}
+
+.body {
+    width: 100%;
+}
+
+.window-second-header {
+    width: 100%;
+    h2 {
+        font-family: MrEavesRemake;
+    }
+}
+
+form {
+    margin-top: 10px;
+    margin-left: 10px;
+    margin-right: 10px;
+}
+
+.form-field {
+    padding: 2px;
+    display: flex;
+    align-items: left;
+    flex-direction: row;
+    justify-content: space-between;
+    width: 100%;
+
+    > * {
+        flex-grow: 1;
+    }
+}
+
+label {
+    text-align: left;
+}
+
+textarea {
+    resize: none;
+    height: 200px;
+    font-size: 14px;
+}
+
+.form-actions {
+    display: flex;
+    justify-content: center; /* centers horizontally */
+    margin-top: 10px;
+}
+
+.form-actions button {
+    width: 100%;        /* makes it expand */
+    max-width: 300px;   /* optional: prevents it from being too wide */
+}
+
+</style>
+
+

frontend/app/components/windows/EditProfileWindow.vue

@@ -1,91 +0,0 @@
-<script setup>
-import { onMounted, ref } from 'vue';
-import { SetupHandle, SetSize, ResetPosition, Top } from '@/services/Windows';
-
-import Server from '@/services/Server'
-import { SetMinSize, SetResizable } from '@/services/Windows';
-import { backendUrl } from '@/services/BackendURL';
-import { GetUser } from '@/services/User';
-
-import WindowHandle from './partials/WindowHandle.vue';
-import BigIconTemplate from './partials/BigIconTemplate.vue';
-import FixedBottomButtons from './partials/FixedBottomButtons.vue';
-
-const props = defineProps(['data']);
-const data = props.data;
-const userIcon = ref("");
-
-const handle = ref(null);
-const wrapper = ref(null);
-const isAdmin = ref(false);
-
-let id = data.id;
-console.log(data);
-
-onMounted(() => {
-    Top(wrapper);
-    SetupHandle(id, handle);
-    SetSize(id, {width: 500, height: 480});
-    ResetPosition(id, "center");
-
-    SetResizable(id, true);
-    SetMinSize(id, {width: 350, height: 280});
-
-    isAdmin.value = GetUser().admin;
-
-    Server().get('/user/retrieve-avatar?username=' + data.user.username).then((response) => {
-        if(response.data.image) userIcon.value = backendUrl + "public/" + response.data.image;
-        else userIcon.value = "public/img/def-avatar.jpg";
-    }).catch((err) => console.log("Internal error"));
-});
-
-function RemoveUser(){
-    alert("Remove")
-}
-</script>
-
-
-<template>
-    <div class="window-wrapper" :id="'window-wrapper-' + id" ref="wrapper">
-        <WindowHandle :window="id" ref="handle"></WindowHandle>
-
-        <BigIconTemplate :title="data.user.username" :img="userIcon">
-        <div v-if="props.data.editable || isAdmin">
-            
-        </div>
-        <div v-else>
-
-        </div>
-        </BigIconTemplate>
-
-        <FixedBottomButtons v-if="isAdmin" :remove="RemoveUser"></FixedBottomButtons>
-    </div>
-</template>
-
-
-<style scoped>
-.window-wrapper {
-
-    display: flex;
-    align-items: center;
-}
-
-.splash-image {
-    width: 600px;
-    height: 250px;
-}
-
-.form-field {
-    padding: 10px;
-    display: flex;
-    align-items: left;
-    flex-direction: column;
-    justify-content: left;
-    width: 600px;
-}
-
-label {
-    text-align: left;
-}
-
-</style>

frontend/app/components/windows/MainMenuWindow.vue

@@ -1,10 +1,12 @@
 <script setup>
 import { onMounted, ref } from 'vue';
-import { SetupHandle, SetSize, ResetPosition, Top } from '@/services/Windows';
+import { SetupHandle, SetSize, ResetPosition, Top, CreateChildWindow, GetFirstWindowId } from '@/services/Windows';
 
 import WindowHandle from './partials/WindowHandle.vue';
 import VersionRender from '../partials/VersionRender.vue';
 import EditUserPartial from '../partials/EditUserPartial.vue';
+import CampaignEntry from '../partials/CampaignEntry.vue';
+import Server from '~/services/Server';
 
 const handle = ref(null);
 const wrapper = ref(null);
@@ -12,13 +14,30 @@ const wrapper = ref(null);
 const props = defineProps(['data']);
 const data = props.data;
 
+const campaings = ref([]);
+
 let id = data.id;
 
+function CreateCampaignWindow(){
+    CreateChildWindow(GetFirstWindowId('main_menu'), 'create_campaign');
+}
+
+function RefreshCampaigns(){
+    Server().get('/campaign/list').then((response) => {
+        if(response.data.status !== "ok") return;
+        response.data.campaigns.forEach((camp) => {
+            campaings.value.push(camp);
+        });
+    });
+}
+
 onMounted(() => {
     Top(wrapper);
     SetupHandle(id, handle);
-    SetSize(id, {width: 580, height: 760});
+    SetSize(id, {width: 880, height: 760});
     ResetPosition(id, "center");
+
+    RefreshCampaigns();
 });
 </script>
 
@@ -27,15 +46,42 @@ onMounted(() => {
     <div class="window-wrapper" :id="'window-wrapper-' + id" ref="wrapper">
         <WindowHandle :window="id" ref="handle"></WindowHandle>
 
-        <EditUserPartial></EditUserPartial>
-        <!-- Body -->
-         <h1>{{ $t("main-menu.main-menu")}}</h1>
-
-        <div class="button-container">
-            <button class="btn-primary button-expand sound-click" v-on:click="OpenCampaigns" ref="campaignButton">{{ $t("main-menu.campaigns") }}</button>
+        <div class="two-column">
+            <div class="vert-expand secondary">
+                <div class="image-container">
+                    <img alt="Dragonroll logo" src="/img/logo-splash.png" draggable="false" width="100%">
+                </div>
+                <div class="patch-notes-container">
+                    <h1>Welcome to dragonroll!</h1>
+                    <h2>Version 0.1</h2>
+                    <p>This is totally under construction. This is a review of how the patch notes will be displayed.</p>
+                    <p>There is also a lot of heavy development here.</p>
                 </div>
                 <VersionRender></VersionRender>
             </div>
+
+            <div class="vert-expand" style="max-width: 450px;">
+                <EditUserPartial></EditUserPartial>
+                <!-- Body -->
+                <div class="vert-expand">
+                    <div class="vert top">
+                        <h1>{{ $t("main-menu.main-menu")}}</h1>
+
+                        <!-- HERE -->
+                        <div class="campaign-list">
+                            <CampaignEntry v-for="camp in campaings" :key="camp._id" :data="camp"></CampaignEntry>
+                        </div>
+                    </div>
+                    
+                    <div class="vert bot">
+                        <div class="button-container">
+                            <button class="btn-primary button-expand sound-click" v-on:click="CreateCampaignWindow" ref="campaignButton">{{ $t("main-menu.create-campaign") }}</button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
 </template>
 
 
@@ -43,16 +89,58 @@ onMounted(() => {
 h1 {
     margin-top: 20px;
     font-family: MrEavesRemake;
+    text-align: center;
 }
 
+h2, h3 {
+    font-family: MrEavesRemake;
+}
+
+.patch-notes-container {
+    margin: 10px;
+    padding: 10px;
+    border-radius: 5px;
+    flex-grow: 1;
+}
+
+.two-column {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    height: 100%;
+}
+
+.secondary {
+    background-color: var(--color-background-soft);
+}
+
+.expand {
+    width: 100%;
+    
+    display: flex;
+    flex-direction: row;
+
+    > * {
+        flex-grow: 1;
+    }
+}
+
+.vert-expand {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    flex-grow: 1;
+    width: 100%;
+}
+
+
 .button-expand {
     width: 100%;
 }
 
 .button-container {
     display: flex;
-    width: 100%;
-    padding: 20px;
+    margin: 20px;
 
     flex-direction: column;
 }

frontend/app/components/windows/NewFolderWindow.vue

@@ -0,0 +1,136 @@
+<script setup>
+import { onBeforeUnmount, onMounted, ref } from 'vue';
+import { SetupHandle, SetSize, ResetPosition, ClearWindow } from '@/services/Windows';
+import WindowHandle from './partials/WindowHandle.vue';
+import Server from '~/services/Server';
+import { emitter } from '~/services/Emitter';
+
+const handle = ref(null);
+const wrapper = ref(null);
+
+const props = defineProps(['data']);
+const data = props.data;
+
+let id = data.id;
+
+const newName = ref('');
+const creating = !!data.name;
+
+onMounted(() => {
+    newName.value = data.name || '';
+    SetupHandle(id, handle);
+    SetSize(id, { width: 420, height: 200 });
+    ResetPosition(id, 'center');
+});
+
+onBeforeUnmount(() => {
+    ClearWindow({ type: 'new_folder' });
+});
+
+function confirmSave() {
+    if (!newName.value.trim()) {
+        return;
+    }
+
+    const folderData = {
+        name: newName.value.trim(),
+        campaign: data.campaign
+    };
+
+    const url = creating ? '/folder/rename' : '/folder/create';
+    if (creating) {
+        folderData.id = data.folderId;
+    }
+
+    Server().post(url, folderData).then((response) => {
+        if (response.data.status !== 'ok') {
+            return;
+        }
+        emitter.emit('folder-saved', response.data.folder);
+        ClearWindow({ id });
+    }).catch(() => {});
+}
+</script>
+
+<template>
+    <div class="window-wrapper" :id="'window-wrapper-' + id" ref="wrapper">
+        <WindowHandle :window="id" ref="handle"></WindowHandle>
+
+        <div class="body">
+            <h3>{{ creating ? 'Rename Folder' : 'New Folder' }}</h3>
+            <form v-on:submit.prevent="confirmSave">
+                <div class="form-field">
+                    <input
+                        type="text"
+                        v-model="newName"
+                        placeholder="Folder name"
+                        autofocus
+                        autocomplete="off"
+                    >
+                </div>
+                <div class="form-actions">
+                    <button class="btn-primary sound-click" type="submit">{{ creating ? 'Save' : 'Create' }}</button>
+                </div>
+            </form>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.window-wrapper {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+}
+
+.body {
+    width: 100%;
+    padding: 10px;
+}
+
+h3 {
+    margin: 0 0 10px 10px;
+    font-family: MrEavesRemake;
+}
+
+form {
+    margin-left: 10px;
+    margin-right: 10px;
+}
+
+.form-field {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+}
+
+.form-field > * {
+    flex-grow: 1;
+}
+
+input {
+    width: 100%;
+    padding: 6px 8px;
+    border: 1px solid var(--color-border);
+    border-radius: 6px;
+    background: var(--color-background-soft);
+    color: var(--color-text);
+    font-size: 14px;
+}
+
+input:focus {
+    outline: none;
+    border-color: var(--color-accent);
+}
+
+.form-actions {
+    display: flex;
+    justify-content: center;
+    margin-top: 10px;
+}
+
+.form-actions button {
+    width: 100%;
+    max-width: 200px;
+}
+</style>

frontend/app/components/windows/RenameNoteWindow.vue

@@ -0,0 +1,127 @@
+<script setup>
+import { onBeforeUnmount, onMounted, ref } from 'vue';
+import { SetupHandle, SetSize, ResetPosition, ClearWindow } from '@/services/Windows';
+import WindowHandle from './partials/WindowHandle.vue';
+import Server from '~/services/Server';
+import { emitter } from '~/services/Emitter';
+
+const handle = ref(null);
+const wrapper = ref(null);
+
+const props = defineProps(['data']);
+const data = props.data;
+
+let id = data.id;
+
+const newName = ref('');
+
+onMounted(() => {
+    newName.value = data.title || '';
+    SetupHandle(id, handle);
+    SetSize(id, { width: 420, height: 200 });
+    ResetPosition(id, 'center');
+});
+
+onBeforeUnmount(() => {
+    ClearWindow({ type: 'rename_note' });
+});
+
+function confirmRename() {
+    if (!newName.value.trim()) {
+        return;
+    }
+    Server().post('/note/update', {
+        id: data.key,
+        title: newName.value.trim(),
+    }).then((response) => {
+        if (response.data.status !== 'ok') {
+            return;
+        }
+        emitter.emit('note-renamed', { key: data.key, title: newName.value.trim() });
+        ClearWindow({ id });
+    }).catch(() => {});
+}
+</script>
+
+<template>
+    <div class="window-wrapper" :id="'window-wrapper-' + id" ref="wrapper">
+        <WindowHandle :window="id" ref="handle"></WindowHandle>
+
+        <div class="body">
+            <h3>Rename Note</h3>
+            <form v-on:submit.prevent="confirmRename">
+                <div class="form-field">
+                    <input
+                        type="text"
+                        v-model="newName"
+                        placeholder="Note title"
+                        autofocus
+                        autocomplete="off"
+                    >
+                </div>
+                <div class="form-actions">
+                    <button class="btn-primary sound-click" type="submit">Save</button>
+                </div>
+            </form>
+        </div>
+    </div>
+</template>
+
+<style scoped>
+.window-wrapper {
+    display: flex;
+    align-items: center;
+    flex-direction: column;
+}
+
+.body {
+    width: 100%;
+    padding: 10px;
+}
+
+h3 {
+    margin: 0 0 10px 10px;
+    font-family: MrEavesRemake;
+}
+
+form {
+    margin-left: 10px;
+    margin-right: 10px;
+}
+
+.form-field {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+}
+
+.form-field > * {
+    flex-grow: 1;
+}
+
+input {
+    width: 100%;
+    padding: 6px 8px;
+    border: 1px solid var(--color-border);
+    border-radius: 6px;
+    background: var(--color-background-soft);
+    color: var(--color-text);
+    font-size: 14px;
+}
+
+input:focus {
+    outline: none;
+    border-color: var(--color-accent);
+}
+
+.form-actions {
+    display: flex;
+    justify-content: center;
+    margin-top: 10px;
+}
+
+.form-actions button {
+    width: 100%;
+    max-width: 200px;
+}
+</style>

frontend/app/components/windows/SettingsWindow.vue

@@ -6,6 +6,7 @@ import Tabs from '../layouts/Tabs.vue';
 import Dropdown from '../layouts/Dropdown.vue';
 import { GetUser, GetUserSetting, SetUserSetting } from '@/services/User';
 import { SetupHandle, SetSize, ResetPosition, Top, ClearWindow, CreateWindow, SetMinSize, SetResizable } from '@/services/Windows';
+import { locales } from '~~/i18n/locales';
 
 const handle = ref(null);
 const wrapper = ref(null);
@@ -13,11 +14,12 @@ const wrapper = ref(null);
 const props = defineProps(['data']);
 const data = props.data;
 
-const { locales, setLocale, locale } = useI18n();
+const { locale } = useI18n();
+
 
 const changeLocale = (lang) => {
     console.log(lang);
-    setLocale(lang.code);
+    locale.value = lang.code;
     SetUserSetting('lang', lang.code);
 }
 
@@ -28,12 +30,18 @@ const rows = ref([{id: "account-settings", value: "settings.tabs.account-setting
 /* TODO
 const languageOptions = ref(["English", "Spanish", "Catalan"])
 const langSelector = ref(null);
-const currentLanguage = ref("");
 */
+function getLocaleFromCode(code){
+    for(let i = 0; i < locales.length; i++){
+        if(locales[i].code == code) return locales[i];
+    }
+}
+
+const selectedLocale = ref("");
 onBeforeMount(() => {
     GetUserSetting('lang').then(value => {
-        currentLanguage.value = codes[value ?? 'en']
-        console.log(currentLanguage.value)
+        locale.value = value;
+        selectedLocale.value = getLocaleFromCode(value); // Set selected in dropdown
     });
     if(GetUser().admin) rows.value.push({
         id: "site-administration",
@@ -44,11 +52,11 @@ onBeforeMount(() => {
 onMounted(() => {
     Top(wrapper);
     SetupHandle(id, handle);
-    SetSize(id, {width: 400, height: 480});
+    SetSize(id, {width: 600, height: 480});
     ResetPosition(id, "center");
 
     SetResizable(id, true);
-    SetMinSize(id, {width: 350, height: 280});
+    SetMinSize(id, {width: 450, height: 280});
 });
 
 function OpenManageAccounts(){
@@ -86,7 +94,7 @@ const getLocaleName = (locale) => {
                 <div class="form-container">
                     <div class="form-element">
                         <label>{{ $t('settings.account-settings.language') }}</label>
-                        <Dropdown :options="locales" :keyFunc="getLocaleName" :onselect="changeLocale" :selected="locale"></Dropdown>
+                        <Dropdown :options="locales" :keyFunc="getLocaleName" :onselect="changeLocale" :selected="selectedLocale"></Dropdown>
                     </div>
                 </div>
             </template>

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/components/windows/partials/WindowHandle.vue

@@ -126,6 +126,11 @@ defineExpose({
         justify-content: right;
     }
 
+    .center {
+        display: flex;
+        align-items: center;
+    }
+
     span {
         font-family: MrEavesRemake;
     }

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

@@ -0,0 +1,31 @@
+import { createI18n } from 'vue-i18n'
+
+function loadLocaleMessages() {
+  const locales = import.meta.glob('../../i18n/locales/**/*.json', { eager: true })
+  const messages: Record<string, any> = {}
+
+  for (const path in locales) {
+    const matched = path.match(/i18n\/locales\/(\w+)\/(.*)\.json$/)
+    if (!matched) continue
+
+    const [, locale, file] = matched
+
+    if (!messages[locale]) {
+      messages[locale] = {}
+    }
+
+    messages[locale][file] = (locales[path] as any).default
+  }
+
+  return messages
+}
+
+export default defineNuxtPlugin((nuxtApp) => {
+  const i18n = createI18n({
+    legacy: false,
+    locale: 'en',
+    messages: loadLocaleMessages()
+  })
+
+  nuxtApp.vueApp.use(i18n)
+})

frontend/app/services/ActionRegistry.js

@@ -0,0 +1,54 @@
+import { ref } from 'vue';
+
+const actions = ref([]);
+
+function register(action) {
+  if (!action.id || !action.execute) {
+    console.warn('[ActionRegistry] Action missing id or execute:', action);
+    return;
+  }
+
+  const existingIndex = actions.value.findIndex(a => a.id === action.id);
+  if (existingIndex !== -1) {
+    actions.value[existingIndex] = action;
+  } else {
+    actions.value.push(action);
+  }
+}
+
+function unregister(id) {
+  actions.value = actions.value.filter(a => a.id !== id);
+}
+
+function search(query) {
+  if (!query || query.trim() === '') return [];
+
+  const q = query.normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase().trim();
+  if (q === '') return [];
+
+  return actions.value.filter(action => {
+    if (typeof action.isActive === 'function' && !action.isActive()) {
+      return false;
+    }
+    const label = (action.label || '').normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase();
+    const description = (action.description || '').normalize("NFD").replace(/[\u0300-\u036f]/g, "").toLowerCase();
+    return label.includes(q) || description.includes(q);
+  }).sort((a, b) => {
+    const aLabel = (a.label || '').toLowerCase();
+    const bLabel = (b.label || '').toLowerCase();
+    const qLower = q;
+    const aStarts = aLabel.startsWith(qLower) ? 0 : 1;
+    const bStarts = bLabel.startsWith(qLower) ? 0 : 1;
+    return aStarts - bStarts || aLabel.localeCompare(bLabel);
+  });
+}
+
+function execute(id, params = {}) {
+  const action = actions.value.find(a => a.id === id);
+  if (action && action.execute) {
+    action.execute(params);
+  }
+}
+
+export { register, unregister, search, execute };
+export default { register, unregister, search, execute };

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/ContextMenu.js

@@ -27,6 +27,14 @@ function PopulateContext(val){
 
     let elementNum = 0;
     val.forEach(element => {
+        // Handle divider elements
+        if (element.divider) {
+            let contextMenuElement = document.createElement('div');
+            contextMenuElement.classList.add("context-menu-divider");
+            children.push(contextMenuElement);
+            return;
+        }
+
         let contextMenuElement = document.createElement('div');
         contextMenuElement.classList.add("context-menu-element");
         if(element.action)

frontend/app/services/Marker.js

@@ -0,0 +1,109 @@
+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"),
+  } 
+};
+
+const componentCache = {
+  inline: {},
+  display: {}
+}
+
+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-link" data-href="${token.link}">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) {
@@ -19,3 +20,5 @@ server.interceptors.request.use((config) => {
 });
 
 export default () => server;
+
+export const getBaseUrl = () => server.defaults.baseURL;

frontend/app/services/User.js

@@ -64,6 +64,7 @@ function LoadUser(){
 
 function LogoutUser(){
     localStorage.removeItem("token");
+    localStorage.removeItem("selectedCampaignId");
     UserStatus.value = 0;
 }
 

frontend/app/services/WindowDefinitions.js

@@ -21,11 +21,6 @@ const defWindows = {
   main_menu: {
     title: 'windows.main-menu',
     component: () => import('~/components/windows/MainMenuWindow.vue'),
-  },
-  edit_profile: {
-    title: "windows.edit-profile",
-    component: () => import('~/components/windows/EditProfileWindow.vue'),
-    close: () => ClearWindow({type: 'edit_profile'}),
     movable: true
   },
   settings: {
@@ -33,6 +28,24 @@ const defWindows = {
     component: () => import('~/components/windows/SettingsWindow.vue'),
     close: () => ClearWindow({type: 'settings'}),
     movable: true
+  },
+  create_campaign: {
+    title: "windows.create-campaign",
+    component: () => import('~/components/windows/CreateCampaignWindow.vue'),
+    close: () => ClearWindow({type: 'create_campaign'}),
+    movable: true
+  },
+  rename_note: {
+    title: "Rename Note",
+    component: () => import('~/components/windows/RenameNoteWindow.vue'),
+    close: () => ClearWindow({type: 'rename_note'}),
+    movable: true
+  },
+  new_folder: {
+    title: "New Folder",
+    component: () => import('~/components/windows/NewFolderWindow.vue'),
+    close: () => ClearWindow({type: 'new_folder'}),
+    movable: true
   }
 }
 

frontend/app/services/Windows.js

@@ -189,6 +189,7 @@ function GetPosition(id) {
 
 function ResetPosition(id, pos) {
     let win = GetWindowWithId(id);
+    if (!win) return;
     let data = { x: win.x, y: win.y };
 
     if (data.x && data.y) {
@@ -224,7 +225,6 @@ function CreateChildWindow(parentId, type, data = {}) {
     if (parent.children) parent.children.push(newId); // We will create the child window right now
     else parent.children = [newId];
     CreateWindow(type, data);
-    console.log(windows.value);
 }
 
 function GetFirstWindowId(type) {

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/i18n/locales.ts

@@ -0,0 +1,17 @@
+export const locales = [
+  {
+    code: 'en',
+    name: 'English',
+    flag: '🇬🇧'
+  },
+  {
+    code: 'es',
+    name: 'Español',
+    flag: '🇪🇸'
+  },
+  {
+    code: 'ca',
+    name: 'Català',
+    flag: '<27>🇸'
+  }
+]

frontend/i18n/locales/ca.json

@@ -1,74 +1 @@
-{
-    "windows": {
-        "login": "Inicia sessió",
-        "register": "Registra't",
-        "main-menu": "Dragonroll",
-        "example": "Finestra d'exemple",
-        "edit-profile": "Edita el perfil",
-        "settings": "Configuració"
-    },
-    "login": {
-        "username": "Usuari o correu electrònic",
-        "username-placeholder": "Introdueix el teu usuari o correu electrònic...",
-        "password": "Contrasenya",
-        "password-placeholder": "Introdueix la teva contrasenya...",
-        "log-in": "Inicia sessió",
-        "no-account": "No tens un compte?",
-        "register": "Registra't",
-        "errors": {
-            "invalid-credentials": "Usuari/correu o contrasenya incorrectes.",
-            "params": "Si us plau, introdueix usuari/correu i contrasenya."
-        },
-        "success": "Inici de sessió correcte!"
-    },
-    "register": {
-        "name": "Nom",
-        "name-placeholder": "Introdueix el teu nom...",
-        "email": "Correu electrònic",
-        "email-placeholder": "Introdueix el teu correu electrònic...",
-        "username": "Usuari",
-        "username-placeholder": "Introdueix el teu nom d'usuari...",
-        "password": "Contrasenya",
-        "password-placeholder": "Introdueix la teva contrasenya...",
-        "confirm-password": "Confirma la contrasenya",
-        "confirm-password-placeholder": "Torna a introduir la contrasenya...",
-        "register": "Registra't",
-        "have-account": "Ja tens un compte?",
-        "login": "Inicia sessió",
-        "password-confirm-placeholder": "Confirma la teva contrasenya...",
-        "welcome": "Benvingut a DragonRoll!",
-        "message": "Si us plau, introdueix el nom d'usuari i la contrasenya que desitges per crear un compte.",
-        "first-register-message": "Estàs a punt de crear el primer compte en aquesta instància de DragonRoll. Aquest compte tindrà privilegis d'administrador.",
-        "errors": {
-            "name-empty": "Si us plau, introdueix el teu nom.",
-            "email-empty": "Si us plau, introdueix un correu electrònic vàlid.",
-            "username-empty": "Si us plau, introdueix un nom d'usuari.",
-            "passwords-no-match": "Les contrasenyes no coincideixen.",
-            "email-username-exists": "Ja existeix un compte amb aquest correu electrònic o nom d'usuari."
-        },
-        "success": "Registre correcte! Ara pots iniciar sessió."
-    },
-    "errors": {
-        "internal": "S'ha produït un error intern."
-    },
-    "main-menu": {
-        "main-menu": "Menú principal",
-        "edit-profile": "Edita el perfil",
-        "campaigns": "Campanyes",
-        "log-out": "Tanca la sessió",
-        "settings": "Configuració"
-    },
-    "settings": {
-        "tabs": {
-            "account-settings": "Configuració del compte",
-            "site-administration": "Administració del lloc"
-        },
-        "account-settings": {
-            "appearance": "Aparença",
-            "language": "Idioma"
-        },
-        "site-administration": {
-            "manage-accounts": "Gestiona els comptes"
-        }
-    }
-}
+{}

frontend/i18n/locales/ca/general.json

@@ -0,0 +1 @@
+{}

frontend/i18n/locales/ca/login.json

@@ -0,0 +1,14 @@
+{
+    "username": "Usuari o correu electrònic",
+    "username-placeholder": "Introdueix el teu usuari o correu electrònic...",
+    "password": "Contrasenya",
+    "password-placeholder": "Introdueix la teva contrasenya...",
+    "log-in": "Inicia sessió",
+    "no-account": "No tens un compte?",
+    "register": "Registra't",
+    "errors": {
+        "invalid-credentials": "Usuari/correu o contrasenya incorrectes.",
+        "params": "Si us plau, introdueix usuari/correu i contrasenya."
+    },
+    "success": "Inici de sessió correcte!"
+}

frontend/i18n/locales/ca/main-menu.json

@@ -0,0 +1,7 @@
+{
+    "main-menu": "Menú principal",
+    "edit-profile": "Editar perfil",
+    "create-campaign": "Crear campanya",
+    "log-out": "Tanca la sessió",
+    "settings": "Configuració"
+}

frontend/i18n/locales/ca/register.json

@@ -0,0 +1,27 @@
+{
+    "name": "Nom",
+    "name-placeholder": "Introdueix el teu nom...",
+    "email": "Correu electrònic",
+    "email-placeholder": "Introdueix el teu correu electrònic...",
+    "username": "Usuari",
+    "username-placeholder": "Introdueix el teu nom d'usuari...",
+    "password": "Contrasenya",
+    "password-placeholder": "Introdueix la teva contrasenya...",
+    "confirm-password": "Confirma la contrasenya",
+    "confirm-password-placeholder": "Torna a introduir la contrasenya...",
+    "register": "Registra't",
+    "have-account": "Ja tens un compte?",
+    "login": "Inicia sessió",
+    "password-confirm-placeholder": "Confirma la teva contrasenya...",
+    "welcome": "Benvingut a DragonRoll!",
+    "message": "Si us plau, introdueix el nom d'usuari i la contrasenya que desitges per crear un compte.",
+    "first-register-message": "Estàs a punt de crear el primer compte en aquesta instància de DragonRoll. Aquest compte tindrà privilegis d'administrador.",
+    "errors": {
+        "name-empty": "Si us plau, introdueix el teu nom.",
+        "email-empty": "Si us plau, introdueix un correu electrònic vàlid.",
+        "username-empty": "Si us plau, introdueix un nom d'usuari.",
+        "passwords-no-match": "Les contrasenyes no coincideixen.",
+        "email-username-exists": "Ja existeix un compte amb aquest correu electrònic o nom d'usuari."
+    },
+    "success": "Registre correcte! Ara pots iniciar sessió."
+}

frontend/i18n/locales/ca/settings.json

@@ -0,0 +1,13 @@
+{
+    "tabs": {
+        "account-settings": "Configuració del compte",
+        "site-administration": "Administració del lloc"
+    },
+    "account-settings": {
+        "appearance": "Aparença",
+        "language": "Idioma"
+    },
+    "site-administration": {
+        "manage-accounts": "Gestiona els comptes"
+    }
+}

frontend/i18n/locales/ca/windows.json

@@ -0,0 +1,9 @@
+{
+    "login": "Inicia sessió",
+    "register": "Registra't",
+    "main-menu": "Dragonroll",
+    "example": "Finestra d'exemple",
+    "edit-profile": "Editar perfil",
+    "settings": "Configuració",
+    "create-campaign": "Crear campanya"
+}

frontend/i18n/locales/en.json

@@ -1,74 +1 @@
-{
-    "windows": {
-        "login": "Login",
-        "register": "Register",
-        "main-menu": "Dragonroll",
-        "example": "Example Window",
-        "edit-profile": "Edit Profile",
-        "settings": "Settings"
-    },
-    "login": {
-        "username": "Username or email",
-        "username-placeholder": "Enter your username or email here...",
-        "password": "Password",
-        "password-placeholder": "Enter your password...",
-        "log-in": "Log in",
-        "no-account": "You don't have an account?",
-        "register": "Register",
-        "errors": {
-            "invalid-credentials": "Invalid username/email or password.",
-            "params": "Please enter both username/email and password."
-        },
-        "success": "Login successful!"
-    },
-    "register": {
-        "name": "Name",
-        "name-placeholder": "Enter your name here...",
-        "email": "Email",
-        "email-placeholder": "Enter your email here...",
-        "username": "Username",
-        "username-placeholder": "Enter your username here...",
-        "password": "Password",
-        "password-placeholder": "Enter your password...",
-        "confirm-password": "Confirm Password",
-        "confirm-password-placeholder": "Re-enter your password...",
-        "register": "Register",
-        "have-account": "Already have an account?",
-        "login": "Login",
-        "password-confirm-placeholder": "Confirm your password...",
-        "welcome": "Welcome to DragonRoll!",
-        "message": "Please enter your desired username and password to create an account.",
-        "first-register-message": "You are about to create the first account on this DragonRoll instance. This account will be granted administrator privileges.",
-        "errors": {
-            "name-empty": "Please enter your name.",
-            "email-empty": "Please enter a valid email address.",
-            "username-empty": "Please enter a username.",
-            "passwords-no-match": "The passwords you entered do not match.",
-            "email-username-exists": "An account with this email or username already exists."
-        },
-        "success": "Registration successful! You can now log in."
-    },
-    "errors": {
-        "internal": "An internal error occurred."
-    },
-    "main-menu": {
-        "main-menu": "Main menu",
-        "edit-profile": "Edit profile",
-        "campaigns": "Campaigns",
-        "log-out": "Log out",
-        "settings": "Settings"
-    },
-    "settings": {
-        "tabs": {
-            "account-settings": "Account settings",
-            "site-administration": "Site administration"
-        },
-        "account-settings": {
-            "appearance": "Appearance",
-            "language": "Language"
-        },
-        "site-administration": {
-            "manage-accounts": "Manage accounts"
-        }
-    }
-}
+{}

frontend/i18n/locales/en/campaigns.json

@@ -0,0 +1,10 @@
+{
+    "create": {
+        "name": "Name",
+        "description": "Description",
+        "description-placeholder": "Enter a brief description for your campaign...",
+        "enter": "Enter campaign name here...",
+        "color": "Accent color",
+        "success": "Campaign created successfully!"
+    }
+}

frontend/i18n/locales/en/general.json

@@ -0,0 +1,10 @@
+{
+    "errors": {
+        "internal": "An internal error occurred."
+    },
+    "create": "Create",
+    "save": "Save",
+    "cancel": "Cancel",
+    "delete": "Delete",
+    "open": "Open"
+}

frontend/i18n/locales/en/login.json

@@ -0,0 +1,15 @@
+
+{
+    "username": "Username or email",
+    "username-placeholder": "Enter your username or email here...",
+    "password": "Password",
+    "password-placeholder": "Enter your password...",
+    "log-in": "Log in",
+    "no-account": "You don't have an account?",
+    "register": "Register",
+    "errors": {
+        "invalid-credentials": "Invalid username/email or password.",
+        "params": "Please enter both username/email and password."
+    },
+    "success": "Login successful!"
+}

frontend/i18n/locales/en/main-menu.json

@@ -0,0 +1,7 @@
+{
+    "main-menu": "Main menu",
+    "edit-profile": "Edit profile",
+    "create-campaign": "Create Campaign",
+    "log-out": "Log out",
+    "settings": "Settings"
+}

frontend/i18n/locales/en/register.json

@@ -0,0 +1,27 @@
+{
+    "name": "Name",
+    "name-placeholder": "Enter your name here...",
+    "email": "Email",
+    "email-placeholder": "Enter your email here...",
+    "username": "Username",
+    "username-placeholder": "Enter your username here...",
+    "password": "Password",
+    "password-placeholder": "Enter your password...",
+    "confirm-password": "Confirm Password",
+    "confirm-password-placeholder": "Re-enter your password...",
+    "register": "Register",
+    "have-account": "Already have an account?",
+    "login": "Login",
+    "password-confirm-placeholder": "Confirm your password...",
+    "welcome": "Welcome to DragonRoll!",
+    "message": "Please enter your desired username and password to create an account.",
+    "first-register-message": "You are about to create the first account on this DragonRoll instance. This account will be granted administrator privileges.",
+    "errors": {
+        "name-empty": "Please enter your name.",
+        "email-empty": "Please enter a valid email address.",
+        "username-empty": "Please enter a username.",
+        "passwords-no-match": "The passwords you entered do not match.",
+        "email-username-exists": "An account with this email or username already exists."
+    },
+    "success": "Registration successful! You can now log in."
+}

frontend/i18n/locales/en/settings.json

@@ -0,0 +1,13 @@
+{
+    "tabs": {
+        "account-settings": "Account settings",
+        "site-administration": "Site administration"
+    },
+    "account-settings": {
+        "appearance": "Appearance",
+        "language": "Language"
+    },
+    "site-administration": {
+        "manage-accounts": "Manage accounts"
+    }
+}

frontend/i18n/locales/en/windows.json

@@ -0,0 +1,9 @@
+{
+    "login": "Login",
+    "register": "Register",
+    "main-menu": "Dragonroll",
+    "example": "Example Window",
+    "edit-profile": "Edit Profile",
+    "settings": "Settings",
+    "create-campaign": "Create Campaign"
+}

frontend/i18n/locales/es.json

@@ -1,74 +1 @@
-{
-    "windows": {
-        "login": "Iniciar sesión",
-        "register": "Registrarse",
-        "main-menu": "Dragonroll",
-        "example": "Ventana de ejemplo",
-        "edit-profile": "Editar perfil",
-        "settings": "Configuración"
-    },
-    "login": {
-        "username": "Usuario o correo electrónico",
-        "username-placeholder": "Introduce tu usuario o correo electrónico...",
-        "password": "Contraseña",
-        "password-placeholder": "Introduce tu contraseña...",
-        "log-in": "Iniciar sesión",
-        "no-account": "¿No tienes una cuenta?",
-        "register": "Registrarse",
-        "errors": {
-            "invalid-credentials": "Usuario/correo o contraseña incorrectos.",
-            "params": "Por favor, introduce usuario/correo y contraseña."
-        },
-        "success": "¡Inicio de sesión exitoso!"
-    },
-    "register": {
-        "name": "Nombre",
-        "name-placeholder": "Introduce tu nombre...",
-        "email": "Correo electrónico",
-        "email-placeholder": "Introduce tu correo electrónico...",
-        "username": "Usuario",
-        "username-placeholder": "Introduce tu nombre de usuario...",
-        "password": "Contraseña",
-        "password-placeholder": "Introduce tu contraseña...",
-        "confirm-password": "Confirmar contraseña",
-        "confirm-password-placeholder": "Vuelve a introducir tu contraseña...",
-        "register": "Registrarse",
-        "have-account": "¿Ya tienes una cuenta?",
-        "login": "Iniciar sesión",
-        "password-confirm-placeholder": "Confirma tu contraseña...",
-        "welcome": "¡Bienvenido a DragonRoll!",
-        "message": "Por favor, introduce el usuario y la contraseña que deseas para crear una cuenta.",
-        "first-register-message": "Estás a punto de crear la primera cuenta en esta instancia de DragonRoll. Esta cuenta tendrá privilegios de administrador.",
-        "errors": {
-            "name-empty": "Por favor, introduce tu nombre.",
-            "email-empty": "Por favor, introduce un correo electrónico válido.",
-            "username-empty": "Por favor, introduce un nombre de usuario.",
-            "passwords-no-match": "Las contraseñas no coinciden.",
-            "email-username-exists": "Ya existe una cuenta con este correo electrónico o nombre de usuario."
-        },
-        "success": "¡Registro exitoso! Ahora puedes iniciar sesión."
-    },
-    "errors": {
-        "internal": "Ha ocurrido un error interno."
-    },
-    "main-menu": {
-        "main-menu": "Menú principal",
-        "edit-profile": "Editar perfil",
-        "campaigns": "Campañas",
-        "log-out": "Cerrar sesión",
-        "settings": "Configuración"
-    },
-    "settings": {
-        "tabs": {
-            "account-settings": "Configuración de la cuenta",
-            "site-administration": "Administración del sitio"
-        },
-        "account-settings": {
-            "appearance": "Apariencia",
-            "language": "Idioma"
-        },
-        "site-administration": {
-            "manage-accounts": "Gestionar cuentas"
-        }
-    }
-}
+{}

frontend/i18n/locales/es/general.json

@@ -0,0 +1 @@
+{}

frontend/i18n/locales/es/login.json

@@ -0,0 +1,14 @@
+{
+    "username": "Usuario o correo electrónico",
+    "username-placeholder": "Introduce tu usuario o correo electrónico...",
+    "password": "Contraseña",
+    "password-placeholder": "Introduce tu contraseña...",
+    "log-in": "Iniciar sesión",
+    "no-account": "¿No tienes una cuenta?",
+    "register": "Registrarse",
+    "errors": {
+        "invalid-credentials": "Usuario/correo o contraseña incorrectos.",
+        "params": "Por favor, introduce usuario/correo y contraseña."
+    },
+    "success": "¡Inicio de sesión exitoso!"
+}

frontend/i18n/locales/es/main-menu.json

@@ -0,0 +1,7 @@
+{
+    "main-menu": "Menú principal",
+    "edit-profile": "Editar perfil",
+    "create-campaign": "Crear campanya",
+    "log-out": "Cerrar sesión",
+    "settings": "Configuración"
+}

frontend/i18n/locales/es/register.json

@@ -0,0 +1,27 @@
+{
+    "name": "Nombre",
+    "name-placeholder": "Introduce tu nombre...",
+    "email": "Correo electrónico",
+    "email-placeholder": "Introduce tu correo electrónico...",
+    "username": "Usuario",
+    "username-placeholder": "Introduce tu nombre de usuario...",
+    "password": "Contraseña",
+    "password-placeholder": "Introduce tu contraseña...",
+    "confirm-password": "Confirmar contraseña",
+    "confirm-password-placeholder": "Vuelve a introducir tu contraseña...",
+    "register": "Registrarse",
+    "have-account": "¿Ya tienes una cuenta?",
+    "login": "Iniciar sesión",
+    "password-confirm-placeholder": "Confirma tu contraseña...",
+    "welcome": "¡Bienvenido a DragonRoll!",
+    "message": "Por favor, introduce el usuario y la contraseña que deseas para crear una cuenta.",
+    "first-register-message": "Estás a punto de crear la primera cuenta en esta instancia de DragonRoll. Esta cuenta tendrá privilegios de administrador.",
+    "errors": {
+        "name-empty": "Por favor, introduce tu nombre.",
+        "email-empty": "Por favor, introduce un correo electrónico válido.",
+        "username-empty": "Por favor, introduce un nombre de usuario.",
+        "passwords-no-match": "Las contraseñas no coinciden.",
+        "email-username-exists": "Ya existe una cuenta con este correo electrónico o nombre de usuario."
+    },
+    "success": "¡Registro exitoso! Ahora puedes iniciar sesión."
+}

frontend/i18n/locales/es/settings.json

@@ -0,0 +1,13 @@
+{
+    "tabs": {
+        "account-settings": "Configuración de la cuenta",
+        "site-administration": "Administración del sitio"
+    },
+    "account-settings": {
+        "appearance": "Apariencia",
+        "language": "Idioma"
+    },
+    "site-administration": {
+        "manage-accounts": "Gestionar cuentas"
+    }
+}

frontend/i18n/locales/es/windows.json

@@ -0,0 +1,9 @@
+{
+    "login": "Iniciar sesión",
+    "register": "Registrarse",
+    "main-menu": "Dragonroll",
+    "example": "Ventana de ejemplo",
+    "edit-profile": "Editar perfil",
+    "settings": "Configuración",
+    "create-campaign": "Crear campanya"
+}

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",