AI slop

2026-06-08 00:28:29 +02:00
parent 94e2b8bd47
commit 0fb4f01892
22 changed files with 1474 additions and 346 deletions
--- a/backend/src/index.js
+++ b/backend/src/index.js
@@ -55,6 +55,7 @@ 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'));
--- a/backend/src/models/Folder.js
+++ b/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);
--- a/backend/src/models/Note.js
+++ b/backend/src/models/Note.js
@@ -9,6 +9,10 @@ const NoteSchema = new Schema({
        ref: 'Campaign',
        required: true
    },
+    folder: {
+        type: Schema.Types.ObjectId,
+        ref: 'Folder'
+    },
    date: { type: Date, default: Date.now }
 });

--- a/backend/src/routes/folder.js
+++ b/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;
--- a/backend/src/routes/note.js
+++ b/backend/src/routes/note.js
@@ -1,8 +1,9 @@
 const express = require('express');
 const router = express.Router();

-const Campaign = require("../models/Campaign");
-const Note = require("../models/Note");
+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();
@@ -12,74 +13,115 @@ async function userOwnsCampaign(campaignId, userId) {
 router.get('/list', async (req, res) => {
    try {
        const { campaign } = req.query;
-        if (!campaign) return res.json({ status: "error", msg: "errors.missing-data" });
+        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" });
+        if (!hasAccess) return res.json({ status: 'error', msg: 'unauthorized' });

-        const notes = await Note.find({ campaign })
-            .select('_id title content date campaign')
+        const folders = await Folder.find({ campaign })
+            .select('_id name date')
            .sort({ date: -1 })
            .lean();

-        res.json({ status: "ok", notes });
+        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" });
+        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 } = req.body;
-        const hasAccess = await userOwnsCampaign(campaign, req.user.id);
-        if (!hasAccess) return res.json({ status: "error", msg: "unauthorized" });
+        const { title, content, campaign, folder } = req.body;
+        if (!title || !campaign) return res.json({ status: 'error', msg: 'errors.missing-data' });

-        const newNote = new Note({
-            title,
-            content,
-            campaign
-        });
+        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 });
+        res.json({ status: 'ok', note: newNote });
    } catch (err) {
        console.error(err);
-        res.json({ status: "error", msg: "errors.internal" });
+        res.json({ status: 'error', msg: 'errors.internal' });
    }
 });

 router.post('/update', async (req, res) => {
    try {
-        const { id, title, content } = req.body;
-        const note = await Note.findById(id);
-        if (!note) return res.json({ status: "error", msg: "errors.notfound" });
-        const hasAccess = await userOwnsCampaign(note.campaign, req.user.id);
-        if (!hasAccess) return res.json({ status: "error", msg: "unauthorized" });
+        const { id, title, content, folder } = req.body;
+        if (!id) return res.json({ status: 'error', msg: 'errors.missing-data' });

-        if(title) note.title = title;
-        note.content = content;
-        note.date = Date.now();
+        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 });
+        res.json({ status: 'ok', note });
    } catch (err) {
        console.error(err);
-        res.json({ status: "error", msg: "errors.internal" });
+        res.json({ status: 'error', msg: 'errors.internal' });
    }
 });

 router.post('/delete', async (req, res) => {
    try {
        const { id } = req.body;
-        const note = await Note.findById(id);
-        if (!note) return res.json({ status: "error", msg: "errors.notfound" });
-        const hasAccess = await userOwnsCampaign(note.campaign, req.user.id);
-        if (!hasAccess) return res.json({ status: "error", msg: "unauthorized" });
+        if (!id) return res.json({ status: 'error', msg: 'errors.missing-data' });

-        await note.remove();
-        res.json({ status: "ok" });
+        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" });
+        res.json({ status: 'error', msg: 'errors.internal' });
    }
 });

--- a/frontend/app/assets/css/colors.scss
+++ b/frontend/app/assets/css/colors.scss
@@ -18,6 +18,7 @@ $themes: (
        button-active: #202020cc,

        toast-background: #202020,
+        tooltip-background: #2a2a2a,

        note-border: #202324,

@@ -33,7 +34,11 @@ $themes: (
        green: #98c379,
        gray: #cccccc,

-        icon-invert: 100%
+        icon-invert: 100%,
+
+        search-background: #20202077,
+        search-background-container: #202020ee,
+        search-hover: #2a2a2a,
    ),
    light: (
        background: #ffffff,
@@ -51,6 +56,7 @@ $themes: (
        button-active: #d4d4d4,

        toast-background: #f0f0f0,
+        tooltip-background: #f5f5f5,

        note-border: #e0e0e0,

@@ -66,7 +72,11 @@ $themes: (
        green: #98c379,
        gray: #cccccc,

-        icon-invert: 0%
+        icon-invert: 0%,
+
+        search-background: #f0f0f0aa,
+        search-background-container: #ffffffee,
+        search-hover: #e8e8e8,
    )
 );

--- a/frontend/app/components/managers/ContextMenuManager.vue
+++ b/frontend/app/components/managers/ContextMenuManager.vue
@@ -34,19 +34,20 @@ onMounted(() => {
    z-index: 214748363;

    flex-direction: column;
-
+    background-color: var(--color-tooltip-background);
+    border: 1px solid var(--color-border);
+    overflow: visible;

    .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 +55,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>
--- a/frontend/app/components/partials/CampaignEntry.vue
+++ b/frontend/app/components/partials/CampaignEntry.vue
@@ -47,7 +47,6 @@ function ViewCampaign(){

 <style lang="scss" scoped>
 .button-small {
-    height: 32px;
    padding: 10px;
 }

--- a/frontend/app/components/partials/ContentSidebar.vue
+++ b/frontend/app/components/partials/ContentSidebar.vue
@@ -1,106 +1,54 @@
 <script setup>
-import { computed, onMounted, onUnmounted, ref, watch } from 'vue';
+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);

-const campaignId = computed(() => {
-    return Campaign.value?._id ?? Campaign.value?.id ?? null;
-});
-
-const notesMeta = computed(() => {
-    const count = notes.value.length;
-    return `${count} ${count === 1 ? 'note' : 'notes'}`;
-});
-
-async function fetchCampaignNotes() {
-    if (!campaignId.value) {
-        notes.value = [];
-        notesError.value = '';
-        return;
-    }
-
-    loadingNotes.value = true;
-    notesError.value = '';
-
+async function handleSidebarDrop(event) {
+    const noteKey = event.dataTransfer.getData('text/plain');
+    if (!noteKey) return;
    try {
-        const response = await Server().get('/note/list', {
-            params: {
-                campaign: campaignId.value
-            }
-        });
-
-        if (response.data.status !== 'ok') {
-            notes.value = [];
-            notesError.value = response.data.msg ?? 'Unable to load notes.';
-            return;
+        await Server().post('/note/update', { id: noteKey, folder: null });
+        fetchCampaignNotes();
+    } catch (e) {}
 }

-        notes.value = response.data.notes.map((note) => {
-            return {
-                key: note._id,
-                title: note.title,
-                text: note.content ?? '',
-                date: note.date
-            };
-        });
-    } catch (error) {
-        notes.value = [];
-        notesError.value = 'Unable to load notes.';
-    } finally {
-        loadingNotes.value = false;
+function toggleExpandedFolder(folderId) {
+    const arr = expandedFolderIds.value;
+    const idx = arr.indexOf(folderId);
+    if (idx !== -1) {
+        arr.splice(idx, 1);
+    } else {
+        arr.push(folderId);
    }
 }

-function toggleSidebar() {
-    sidebarCollapsed.value = !sidebarCollapsed.value;
+function isFolderExpanded(folderId) {
+    return expandedFolderIds.value.includes(folderId);
 }

-async function createNote() {
-    if (!Campaign.value) {
-        return;
-    }
-
-    const campaignId = Campaign.value?._id 
-
-    try {
-        const response = await Server().post('/note/create', {
-            title: 'New note',
-            content: "",
-            campaign: campaignId
-        });
-
-        if (response.data.status !== 'ok') {
-            return;
-        }
-
-        emitter.emit('note-created', response.data.note);
-    } catch (err) {
-        console.log(err);
-    }
-}
-
-
 function openNote(note) {
    emitter.emit('push-note', note);
 }

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

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

    const createdNote = {
        key: note._id,
@@ -109,24 +57,105 @@ function handleNoteCreated(note) {
        date: note.date
    };

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

-onMounted(() => {
-    emitter.on('note-created', handleNoteCreated);
+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;
 });

-onUnmounted(() => {
-    emitter.off('note-created', handleNoteCreated);
+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
        });

-watch(Campaign, () => {
+        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();
-}, { immediate: true });
+    } else {
+        notes.value = [];
+        folders.value = [];
+        notesError.value = '';
+    }
+});
+
+onMounted(() => {
+    if (campaignId.value) {
+        fetchCampaignNotes();
+    }
+});
 </script>

 <template>
@@ -160,6 +189,17 @@ watch(Campaign, () => {
                <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"
@@ -177,11 +217,10 @@ watch(Campaign, () => {
                <div class="sidebar-copy">
                    <span class="sidebar-eyebrow">Campaign</span>
                    <strong class="sidebar-title">Notes</strong>
-                    <span class="sidebar-meta">{{ notesMeta }}</span>
                </div>
            </div>

-            <div id="campaign-notes-list" class="sidebar-list">
+          <div 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>
@@ -190,20 +229,21 @@ watch(Campaign, () => {
                     {{ notesError }}
                 </div>

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

                 <template v-else>
-                    <button
-                        v-for="note in notes"
-                        :key="note.key"
-                        type="button"
-                        class="note-link"
-                        @click="openNote(note)"
-                    >
-                        <span class="note-link-title">{{ note.title }}</span>
-                    </button>
+                <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>
@@ -213,8 +253,8 @@ watch(Campaign, () => {
 <style scoped>
 .sidebar-shell {
    min-height: 0;
-    flex-shrink: 0;
    display: flex;
+    flex-direction: row;
 }

 .sidebar-actions {
@@ -260,8 +300,8 @@ watch(Campaign, () => {
 }

 .notes-sidebar {
-    width: 280px;
    min-width: 280px;
+    width: 280px;
    border-right: 1px solid var(--color-border);
    background-color: var(--color-background-light);
    display: flex;
@@ -305,7 +345,7 @@ watch(Campaign, () => {
    word-break: break-word;
 }

-.sidebar-list {
+.sidebar-list-drop-wrap {
    width: 280px;
    min-width: 280px;
    box-sizing: border-box;
@@ -313,6 +353,14 @@ watch(Campaign, () => {
    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 {
@@ -326,35 +374,6 @@ watch(Campaign, () => {
    color: #9e2a2b;
 }

-.note-link {
-    width: 100%;
-    padding: 6px;
-    margin: 0;
-    box-shadow: none;
-    border: none;
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    text-align: left;
-    cursor: pointer;
-    transition: transform 0.15s ease, background-color 0.15s ease;
-}
-
-.note-link:hover {
-    transform: translateX(2px);
-    background: var(--color-background-light);
-}
-
-.note-link-title {
-    font-weight: 600;
-    word-break: break-word;
-}
-
-.note-link-date {
-    font-size: 12px;
-    opacity: 0.7;
-}
-
@media (max-width: 900px) {
    .notes-sidebar {
        width: 220px;
@@ -362,7 +381,7 @@ watch(Campaign, () => {
    }

    .sidebar-header,
-    .sidebar-list {
+    .sidebar-list-drop-wrap {
        width: 220px;
        min-width: 220px;
    }
--- a/frontend/app/components/partials/EditUserPartial.vue
+++ b/frontend/app/components/partials/EditUserPartial.vue
@@ -109,7 +109,6 @@ onMounted(() => {
 }

 .button-small {
-    height: 32px;
    padding: 10px;
 }

--- a/frontend/app/components/partials/NestedNoteList.vue
+++ b/frontend/app/components/partials/NestedNoteList.vue
@@ -0,0 +1,298 @@
+<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) {
+    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) {}
+    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>
--- a/frontend/app/components/viewer/TopBar.vue
+++ b/frontend/app/components/viewer/TopBar.vue
@@ -1,47 +1,10 @@
 <script setup>
 import TopSearchBar from './topbar/TopSearchBar.vue';
-import { useCampaignService } from '~/services/Campaign';
-import { CreateWindow } from '~/services/Windows';
-import { SetShowContent } from '~/services/Content';
-
-const { Campaign, SetCampaign } = useCampaignService();

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

-async function createNote() {
-    if (!Campaign.value) {
-        return;
-    }
-
-    const campaignId = Campaign.value?._id 
-
-    try {
-        const response = await Server().post('/note/create', {
-            title: 'New note',
-            content: content.value,
-            campaign: campaignId
-        });
-
-        if (response.data.status !== 'ok') {
-            return;
-        }
-
-        emitter.emit('note-created', response.data.note);
-    } catch (err) {
-        error.value = 'Unable to create note.';
-    } finally {
-        isSaving.value = false;
-    }
-}
-
-function exitToMainMenu() {
-    SetCampaign(null);
-    SetShowContent(false);
-    CreateWindow('main_menu');
-}
-
 </script>

 <template>
@@ -55,16 +18,7 @@ function exitToMainMenu() {
        <div class="center">
            <TopSearchBar></TopSearchBar>
        </div>
-        <div class="right">
-            <button class="top-bar-button sound-click" type="button" @click="exitToMainMenu">
-                <img class="top-bar-button-icon" src="/icons/iconoir/regular/nav-arrow-left.svg" alt="" aria-hidden="true">
-                <span>Main Menu</span>
-            </button>
-            <button class="note-button sound-click" type="button" @click="createNote" :disabled="!Campaign">
-                <img class="note-button-icon" src="/icons/iconoir/regular/plus.svg" alt="" aria-hidden="true">
-                <span>New Note</span>
-            </button>
-        </div>
+        <div class="right"></div>
    </div>
 </template>

@@ -105,27 +59,5 @@ function exitToMainMenu() {
    font-weight: bold;
 }

-.top-bar-button,
-.note-button {
-    height: 30px;
-    padding: 0 12px;
-    border: 1px solid var(--color-border);
-    border-radius: 8px;
-    background: var(--color-background-soft);
-    display: inline-flex;
-    align-items: center;
-    gap: 8px;
-    cursor: pointer;
-}

-.note-button:disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-}
-
-.top-bar-button-icon,
-.note-button-icon {
-    width: 16px;
-    height: 16px;
-}
 </style>
--- a/frontend/app/components/viewer/content/Note.vue
+++ b/frontend/app/components/viewer/content/Note.vue
@@ -15,9 +15,15 @@ const sourceText = ref(''); // Original markdown source, used for editing
 const displayText = ref(''); // Compiled HTML from markdown

 const editingMode = ref(false);
-const editableTitle = ref(null);
 const title = ref(props.title);
-const displayTitle = ref('');
+const isDirty = ref(false);
+const showClose = ref(false);
+
+let savedState = { text: '', title: '' };
+
+function markDirty() {
+    isDirty.value = sourceText.value !== savedState.text || title.value !== savedState.title;
+}

 function closeNote(){
    emitter.emit('delete-note', props.noteKey);
@@ -48,20 +54,29 @@ function update(){
    }, 0);
 }

-watch(sourceText, (newText) => {
-    // update();
-});
+watch(sourceText, markDirty);
+
+watch(title, markDirty);

 onMounted(() => {
    sourceText.value = props.text;
    title.value = props.title;
-    displayTitle.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);
 });

@@ -92,12 +107,11 @@ function SaveNote(){
        title: title.value,
    }).then((response) => {
        if(response.data.status !== 'ok'){
-            // Handle error (e.g., show a notification)
            return;
        }
-        // DisplayToast('green', "Note saved successfully.", 500);
+        savedState = { text: sourceText.value, title: title.value };
+        isDirty.value = false;
    }).catch((error) => {
-        // Handle error (e.g., show a notification)
    });
 }

@@ -147,16 +161,18 @@ function setupCallout() {
 }


-const editTitle = (e) => {
-  title.value = e.target.innerText;
-}
-
 </script>

 <template>
 <div class="note" @keydown="handleKeydown" tabindex="0">
    <div class="note-stunt">
-        <div class="close-button" v-on:click="closeNote">
+        <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>
@@ -164,7 +180,7 @@ const editTitle = (e) => {
    <div class="note-content-container">
        <textarea v-model="sourceText" class="full-editor" v-if="editingMode"></textarea>
        <div v-else class="note-content" ref="noteContent">
-          <h1 contenteditable="true" ref="editableTitle" @input="editTitle">{{ displayTitle }}</h1>
+          <h1>{{ title }}</h1>
          <div ref="noteContent" v-html="displayText"></div>
        </div>
        
@@ -184,6 +200,46 @@ const editTitle = (e) => {
    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%;
--- a/frontend/app/components/viewer/content/NoteContainer.vue
+++ b/frontend/app/components/viewer/content/NoteContainer.vue
@@ -48,11 +48,20 @@ function handleDeleteNote(key) {
 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>
--- a/frontend/app/components/viewer/topbar/SearchResult.vue
+++ b/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>
--- a/frontend/app/components/viewer/topbar/TopSearchBar.vue
+++ b/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>
--- a/frontend/app/components/windows/NewFolderWindow.vue
+++ b/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>
--- a/frontend/app/components/windows/RenameNoteWindow.vue
+++ b/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>
--- a/frontend/app/services/ActionRegistry.js
+++ b/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 };
--- a/frontend/app/services/Marker.js
+++ b/frontend/app/services/Marker.js
@@ -94,7 +94,7 @@ const linkExtension = {
  },

  renderer(token) {
-    return `<span class="vue-link" data-href="${token.link}"></span>`;
+    return `<span class="vue-link" data-href="${token.link}">Link</span>`;
  },
 };

--- a/frontend/app/services/WindowDefinitions.js
+++ b/frontend/app/services/WindowDefinitions.js
@@ -34,6 +34,18 @@ const defWindows = {
    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
  }
 }

--- a/frontend/app/services/Windows.js
+++ b/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) {