AI slop

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>

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%;

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>

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,110 +1,331 @@
 <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);
+}
+
+// ---- Note search ----
+async function fetchNotes() {
+  if (!Campaign.value) return;
+  
+  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;
 }
 
-function searchFocus(event){
-    if(GetContent() === undefined) return;
+// ---- Input handling ----
+function onInput(event) {
+  const query = event.target.value;
+  inputText.value = query;
+  selectedIndex.value = -1;
 
-    searchContainer.value.style.display = "";
-    updateList(undefined);
+  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...">
-        </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-list">
-                <!--
-                <NoteSearchElement v-for="element in noteLinks" :key="element.key" :title="element.title" :link="element.key"></NoteSearchElement>
-                -->
-            </div>
-        </div>
+  <div class="top-search-container">
+    <div class="top-search-box">
+      <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" 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">
+        <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>
 </template>
 
 <style scoped>
 .top-search-container {
-    height: 100%;
-    align-items: center;
-    display: flex;
+  height: 100%;
+  align-items: center;
+  display: flex;
+  position: relative;
 }
     
 .top-search-box {
-    align-items: center;
-    display: flex;
-    background-color: var(--search-background);
-    padding: 2px;
-    border-radius: 5px;
+  align-items: center;
+  display: flex;
+  background-color: var(--color-search-background);
+  padding: 2px;
+  border-radius: 5px;
 }
 
 .search-prompt {
-    border: none;
-    padding: 5px;
-    width: 30vw;
-    max-width: 400px;
-    background: none;
-    margin-left: -5px;
+  border: none;
+  padding: 5px;
+  width: 30vw;
+  max-width: 400px;
+  background: none;
+  margin-left: -5px;
+  font-family: inherit;
 }
 
 .search-prompt:focus {
-    outline: none;
+  outline: none;
 }
 
 .search-icon {
-    padding: 5px;
+  padding: 5px;
+  filter: invert(var(--color-icon-invert));
 }
 
 .search-container {
-    position: absolute;
-    background-color: var(--search-background-container);
-    top: 45px;
-    margin-left: auto;
-    margin-right: auto;
-    max-width: 800px;
-    max-height: 500px;
-    overflow-y: scroll;
-    left: 0;
-    right: 0;
-    backdrop-filter: blur(15px);
-    border-radius: 10px;
-    min-width: 400px;
-    min-height: 500px;
-    z-index: 99999;
+  position: absolute;
+  background-color: var(--color-search-background-container);
+  top: 45px;
+  margin-left: auto;
+  margin-right: auto;
+  max-width: 600px;
+  max-height: 400px;
+  overflow-y: auto;
+  left: 0;
+  right: 0;
+  backdrop-filter: blur(15px);
+  border-radius: 10px;
+  width: calc(30vw + 400px);
+  min-width: 320px;
+  z-index: 99999;
+  display: flex;
+  flex-direction: column;
 }
-</style>
+
+.search-container-list {
+  display: flex;
+  flex-direction: column;
+  padding: 4px;
+}
+
+.search-empty {
+  padding: 16px;
+  text-align: center;
+  opacity: 0.5;
+  font-size: 14px;
+}
+</style>