From 66360b07249ecd947d1b0b147eb76c6d934fd4c8 Mon Sep 17 00:00:00 2001
From: Amr Elsagaei <amrelsagaei.social@gmail.com>
Date: Mon, 30 Mar 2026 10:24:26 -0300
Subject: [PATCH] Add quick note search and viewer #22

---
 packages/frontend/src/actions/actions.ts      |  29 +++
 .../src/components/shared/NoteFloatModal.vue  |   8 +-
 .../src/components/shared/NoteSearchModal.vue | 188 ++++++++++++++++++
 .../src/components/shared/SearchInput.vue     |  63 ++++++
 .../components/shared/SearchNoteViewer.vue    | 112 +++++++++++
 .../src/components/shared/SearchResults.vue   |  58 ++++++
 .../frontend/src/composables/useDraggable.ts  | 102 ++++++++++
 .../frontend/src/composables/useNoteModal.ts  |  83 +-------
 .../src/composables/useSearchModal.ts         | 181 +++++++++++++++++
 packages/frontend/src/env.d.ts                |   4 +
 packages/frontend/src/index.ts                |   9 +
 packages/frontend/src/types.ts                |   5 +
 .../frontend/src/utils/injectEditorStyles.ts  |  12 ++
 13 files changed, 772 insertions(+), 82 deletions(-)
 create mode 100644 packages/frontend/src/components/shared/NoteSearchModal.vue
 create mode 100644 packages/frontend/src/components/shared/SearchInput.vue
 create mode 100644 packages/frontend/src/components/shared/SearchNoteViewer.vue
 create mode 100644 packages/frontend/src/components/shared/SearchResults.vue
 create mode 100644 packages/frontend/src/composables/useDraggable.ts
 create mode 100644 packages/frontend/src/composables/useSearchModal.ts
 create mode 100644 packages/frontend/src/env.d.ts
 create mode 100644 packages/frontend/src/utils/injectEditorStyles.ts

diff --git a/packages/frontend/src/actions/actions.ts b/packages/frontend/src/actions/actions.ts
index 3c752f2..04f06e5 100644
--- a/packages/frontend/src/actions/actions.ts
+++ b/packages/frontend/src/actions/actions.ts
@@ -2,6 +2,7 @@ import { type NoteContentItem } from "shared";
 import { createApp, h } from "vue";
 
 import NoteFloatModal from "@/components/shared/NoteFloatModal.vue";
+import NoteSearchModal from "@/components/shared/NoteSearchModal.vue";
 import { SDKPlugin } from "@/plugins/sdk";
 import { useNotesStore } from "@/stores/notes";
 import type { FrontendSDK } from "@/types";
@@ -44,6 +45,34 @@ export const showNoteModal = (sdk: FrontendSDK) => {
   modalApp.mount(modalContainer);
 };
 
+/**
+ * Shows the search modal for finding and viewing existing notes
+ */
+export const showSearchModal = (sdk: FrontendSDK) => {
+  const modalContainer = document.createElement("div");
+  modalContainer.id = "note-search-modal-container";
+  document.body.appendChild(modalContainer);
+
+  const position = {
+    x: Math.max(0, window.innerWidth / 2 - 250),
+    y: Math.max(0, window.innerHeight / 2 - 200),
+  };
+
+  const modalApp = createApp({
+    render: () =>
+      h(NoteSearchModal, {
+        initialPosition: position,
+        onClose: () => {
+          modalApp.unmount();
+          modalContainer.remove();
+        },
+      }),
+  });
+
+  modalApp.use(SDKPlugin, sdk);
+  modalApp.mount(modalContainer);
+};
+
 /**
  * Sends selected text to the currently open note
  */
diff --git a/packages/frontend/src/components/shared/NoteFloatModal.vue b/packages/frontend/src/components/shared/NoteFloatModal.vue
index 7baa64e..3f3cc9e 100644
--- a/packages/frontend/src/components/shared/NoteFloatModal.vue
+++ b/packages/frontend/src/components/shared/NoteFloatModal.vue
@@ -4,17 +4,13 @@ import { onBeforeUnmount, onMounted } from "vue";
 
 import { useNoteModal } from "@/composables/useNoteModal";
 import { useSDK } from "@/plugins/sdk";
+import type { ModalPosition } from "@/types";
 
 const sdk = useSDK();
 
-interface Position {
-  x: number;
-  y: number;
-}
-
 const props = defineProps({
   initialPosition: {
-    type: Object as () => Position,
+    type: Object as () => ModalPosition,
     default: () => ({ x: 100, y: 100 }),
   },
 });
diff --git a/packages/frontend/src/components/shared/NoteSearchModal.vue b/packages/frontend/src/components/shared/NoteSearchModal.vue
new file mode 100644
index 0000000..57d4831
--- /dev/null
+++ b/packages/frontend/src/components/shared/NoteSearchModal.vue
@@ -0,0 +1,188 @@
+<script setup lang="ts">
+import { onBeforeUnmount, onMounted } from "vue";
+
+import SearchInput from "@/components/shared/SearchInput.vue";
+import SearchNoteViewer from "@/components/shared/SearchNoteViewer.vue";
+import SearchResults from "@/components/shared/SearchResults.vue";
+import { useSearchModal } from "@/composables/useSearchModal";
+import type { ModalPosition } from "@/types";
+
+const props = defineProps({
+  initialPosition: {
+    type: Object as () => ModalPosition,
+    default: () => ({ x: 100, y: 100 }),
+  },
+});
+
+const emit = defineEmits<{
+  close: [];
+}>();
+
+const {
+  position,
+  size,
+  searchQuery,
+  searchResults,
+  selectedIndex,
+  viewedNote,
+  isViewingNote,
+  startDrag,
+  startResize,
+  search,
+  openNote,
+  goBackToSearch,
+  saveNoteContent,
+  close,
+  moveSelection,
+  openSelectedNote,
+  initialize,
+} = useSearchModal({
+  initialPosition: props.initialPosition,
+  onClose: () => emit("close"),
+});
+
+function handleKeyDown(event: KeyboardEvent) {
+  if (event.key === "Escape") {
+    if (isViewingNote.value) {
+      goBackToSearch();
+    } else {
+      close();
+    }
+    return;
+  }
+
+  if (isViewingNote.value) return;
+
+  if (event.key === "ArrowDown") {
+    event.preventDefault();
+    moveSelection(1);
+  } else if (event.key === "ArrowUp") {
+    event.preventDefault();
+    moveSelection(-1);
+  } else if (event.key === "Enter") {
+    event.preventDefault();
+    openSelectedNote();
+  }
+}
+
+onMounted(async () => {
+  await initialize();
+  document.addEventListener("keydown", handleKeyDown);
+});
+
+onBeforeUnmount(() => {
+  document.removeEventListener("keydown", handleKeyDown);
+});
+</script>
+
+<template>
+  <div
+    class="fixed z-50 flex flex-col bg-surface-800 border border-surface-700 rounded-md shadow-md overflow-hidden"
+    :style="{
+      top: position.y + 'px',
+      left: position.x + 'px',
+      width: size.width + 'px',
+      height: size.height + 'px',
+    }"
+  >
+    <!-- Header -->
+    <div
+      class="flex items-center gap-2 px-2 py-1.5 bg-surface-900 cursor-move shrink-0"
+      @mousedown="startDrag"
+    >
+      <button
+        v-if="isViewingNote"
+        class="flex items-center gap-1 text-xs text-surface-400 hover:text-surface-200 transition-colors bg-transparent border-none cursor-pointer px-1 py-0.5 rounded hover:bg-surface-700"
+        @click="goBackToSearch"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          class="w-3 h-3"
+        >
+          <polyline points="15 18 9 12 15 6" />
+        </svg>
+        Back
+      </button>
+      <span class="text-xs text-surface-300 truncate flex-1">
+        {{
+          isViewingNote
+            ? viewedNote?.name.replace(/\.json$/, "")
+            : "Search Notes"
+        }}
+      </span>
+      <button
+        class="text-surface-500 hover:text-surface-200 transition-colors bg-transparent border-none cursor-pointer p-0.5 rounded hover:bg-surface-700"
+        @click="close"
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          class="w-3.5 h-3.5"
+        >
+          <line x1="18" y1="6" x2="6" y2="18" />
+          <line x1="6" y1="6" x2="18" y2="18" />
+        </svg>
+      </button>
+    </div>
+
+    <!-- Search State -->
+    <template v-if="!isViewingNote">
+      <SearchInput v-model="searchQuery" @search="search" />
+      <SearchResults
+        :results="searchResults"
+        :selected-index="selectedIndex"
+        @select="openNote"
+      />
+      <div
+        class="flex items-center justify-end gap-2 px-2 py-1 text-xs text-surface-500 border-t border-surface-700 shrink-0"
+      >
+        <span>
+          <strong class="bg-surface-700 px-1 py-0.5 rounded">↑↓</strong>
+          navigate
+        </span>
+        <span>
+          <strong class="bg-surface-700 px-1 py-0.5 rounded">↩</strong>
+          open
+        </span>
+        <span>
+          <strong class="bg-surface-700 px-1 py-0.5 rounded">esc</strong>
+          close
+        </span>
+      </div>
+    </template>
+
+    <!-- View State -->
+    <template v-if="viewedNote">
+      <SearchNoteViewer :content="viewedNote.content" @save="saveNoteContent" />
+      <div
+        class="flex items-center justify-end gap-2 px-2 py-1 text-xs text-surface-500 border-t border-surface-700 shrink-0"
+      >
+        <span>
+          <strong class="bg-surface-700 px-1 py-0.5 rounded">esc</strong>
+          back
+        </span>
+      </div>
+    </template>
+
+    <!-- Resize Handle -->
+    <div
+      class="resize-handle absolute right-0 bottom-0 w-3 h-3 cursor-se-resize"
+      @mousedown.stop="startResize"
+    >
+      <div
+        class="absolute right-[3px] bottom-[3px] w-[5px] h-[5px] border-r-2 border-b-2 border-surface-500"
+      />
+    </div>
+  </div>
+</template>
diff --git a/packages/frontend/src/components/shared/SearchInput.vue b/packages/frontend/src/components/shared/SearchInput.vue
new file mode 100644
index 0000000..5eee68f
--- /dev/null
+++ b/packages/frontend/src/components/shared/SearchInput.vue
@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import { onMounted, ref, watch } from "vue";
+
+const props = defineProps<{
+  modelValue: string;
+}>();
+
+const emit = defineEmits<{
+  "update:modelValue": [value: string];
+  search: [query: string];
+}>();
+
+const inputRef = ref<HTMLInputElement>();
+const query = ref(props.modelValue);
+
+watch(
+  () => props.modelValue,
+  (newVal) => {
+    if (newVal !== query.value) {
+      query.value = newVal;
+    }
+  },
+);
+
+function onInput() {
+  emit("update:modelValue", query.value);
+  emit("search", query.value);
+}
+
+function focus() {
+  inputRef.value?.focus();
+}
+
+onMounted(() => {
+  setTimeout(focus, 50);
+});
+</script>
+
+<template>
+  <div class="flex items-center gap-2 px-2 py-1.5 border-b border-surface-700">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      class="w-4 h-4 text-surface-400 shrink-0"
+    >
+      <circle cx="11" cy="11" r="8" />
+      <line x1="21" y1="21" x2="16.65" y2="16.65" />
+    </svg>
+    <input
+      ref="inputRef"
+      v-model="query"
+      type="text"
+      placeholder="Search notes..."
+      class="w-full bg-transparent text-sm text-surface-100 placeholder-surface-500 outline-none border-none"
+      @input="onInput"
+    />
+  </div>
+</template>
diff --git a/packages/frontend/src/components/shared/SearchNoteViewer.vue b/packages/frontend/src/components/shared/SearchNoteViewer.vue
new file mode 100644
index 0000000..85b7464
--- /dev/null
+++ b/packages/frontend/src/components/shared/SearchNoteViewer.vue
@@ -0,0 +1,112 @@
+<script setup lang="ts">
+import { Image as ImageExtension } from "@tiptap/extension-image";
+import { Placeholder } from "@tiptap/extension-placeholder";
+import { Table } from "@tiptap/extension-table";
+import { TableCell } from "@tiptap/extension-table-cell";
+import { TableHeader } from "@tiptap/extension-table-header";
+import { TableRow } from "@tiptap/extension-table-row";
+import { StarterKit } from "@tiptap/starter-kit";
+import { type Editor, EditorContent, useEditor } from "@tiptap/vue-3";
+import { useDebounceFn } from "@vueuse/core";
+import type { NoteContent } from "shared";
+import { onUnmounted, toRaw, watch } from "vue";
+
+import { MarkdownHeading } from "@/components/content/editor/extensions/markdown-heading";
+import MarkdownStyling from "@/components/content/editor/extensions/markdown-styling";
+import { createFileMention } from "@/components/content/editor/extensions/mentions/mention-file";
+import { createSessionMention } from "@/components/content/editor/extensions/mentions/mention-request";
+import createSuggestion from "@/components/content/editor/extensions/mentions/suggestion";
+import { SlashCommands } from "@/components/content/editor/extensions/slash-commands";
+import { useSDK } from "@/plugins/sdk";
+import { injectEditorStyles } from "@/utils/injectEditorStyles";
+
+injectEditorStyles();
+
+const sdk = useSDK();
+const suggestion = createSuggestion(sdk);
+const SessionMention = createSessionMention(sdk);
+const FileMention = createFileMention(sdk);
+
+const props = defineProps<{
+  content: NoteContent;
+}>();
+
+const emit = defineEmits<{
+  save: [content: NoteContent];
+}>();
+
+function saveContent(editor: Editor) {
+  emit("save", editor.getJSON() as NoteContent);
+}
+
+const debouncedSave = useDebounceFn(saveContent, 250);
+
+const editor = useEditor({
+  content: "",
+  extensions: [
+    StarterKit.configure({ heading: false }),
+    MarkdownHeading,
+    MarkdownStyling,
+    // @ts-expect-error - TipTap expects null for clientRect but we can't do it due to eslint rules
+    SessionMention.configure({ suggestion }),
+    FileMention,
+    Placeholder.configure({ placeholder: "Empty note..." }),
+    ImageExtension.configure({
+      HTMLAttributes: { class: "caido-image" },
+    }),
+    Table.configure({
+      resizable: true,
+      HTMLAttributes: { class: "notes-table" },
+    }),
+    TableRow,
+    TableHeader,
+    TableCell,
+    SlashCommands.configure({ sdk }),
+  ],
+  editorProps: {
+    attributes: {
+      class:
+        "mx-auto focus:outline-none font-mono dark:text-surface-100 h-full",
+    },
+  },
+  onUpdate: ({ editor }) => {
+    debouncedSave(editor as Editor);
+  },
+  onCreate: ({ editor }) => {
+    if (props.content) {
+      const rawContent = JSON.parse(JSON.stringify(toRaw(props.content)));
+      editor.commands.setContent(rawContent);
+    }
+  },
+});
+
+watch(
+  () => props.content,
+  (newContent) => {
+    if (editor.value && newContent) {
+      const rawContent = JSON.parse(JSON.stringify(toRaw(newContent)));
+      const currentJSON = JSON.stringify(editor.value.getJSON());
+      const newJSON = JSON.stringify(rawContent);
+      if (currentJSON !== newJSON) {
+        editor.value.commands.setContent(rawContent);
+      }
+    }
+  },
+);
+
+onUnmounted(() => {
+  editor.value?.destroy();
+});
+</script>
+
+<template>
+  <div class="flex-1 overflow-y-auto min-h-0 p-2">
+    <editor-content
+      :editor="editor"
+      spellcheck="false"
+      autocorrect="off"
+      autocapitalize="off"
+      class="editor-wrapper"
+    />
+  </div>
+</template>
diff --git a/packages/frontend/src/components/shared/SearchResults.vue b/packages/frontend/src/components/shared/SearchResults.vue
new file mode 100644
index 0000000..94fbfbf
--- /dev/null
+++ b/packages/frontend/src/components/shared/SearchResults.vue
@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import type { Note } from "shared";
+import { nextTick, ref, watch } from "vue";
+
+const props = defineProps<{
+  results: Note[];
+  selectedIndex: number;
+}>();
+
+const emit = defineEmits<{
+  select: [path: string];
+}>();
+
+const listRef = ref<HTMLDivElement>();
+
+function formatPath(path: string): string {
+  return path.replace(/\.json$/, "");
+}
+
+watch(
+  () => props.selectedIndex,
+  async () => {
+    await nextTick();
+    const activeItem = listRef.value?.querySelector("[data-active='true']");
+    activeItem?.scrollIntoView({ block: "nearest" });
+  },
+);
+</script>
+
+<template>
+  <div ref="listRef" class="flex-1 overflow-y-auto min-h-0">
+    <div
+      v-if="results.length === 0"
+      class="flex items-center justify-center h-full text-sm text-surface-500"
+    >
+      No notes found
+    </div>
+    <button
+      v-for="(note, index) in results"
+      :key="note.path"
+      :data-active="index === selectedIndex"
+      class="w-full text-left px-3 py-2 text-sm transition-colors duration-100 border-none outline-none cursor-pointer"
+      :class="
+        index === selectedIndex
+          ? 'bg-surface-700 text-surface-100'
+          : 'text-surface-300 hover:bg-surface-800'
+      "
+      @click="emit('select', note.path)"
+    >
+      <div class="font-medium truncate">
+        {{ formatPath(note.name) }}
+      </div>
+      <div class="text-xs text-surface-500 truncate mt-0.5">
+        {{ formatPath(note.path) }}
+      </div>
+    </button>
+  </div>
+</template>
diff --git a/packages/frontend/src/composables/useDraggable.ts b/packages/frontend/src/composables/useDraggable.ts
new file mode 100644
index 0000000..150cd60
--- /dev/null
+++ b/packages/frontend/src/composables/useDraggable.ts
@@ -0,0 +1,102 @@
+import { reactive } from "vue";
+
+import type { ModalPosition } from "@/types";
+
+interface Size {
+  width: number;
+  height: number;
+}
+
+interface DraggableOptions {
+  initialPosition?: ModalPosition;
+  initialSize?: Size;
+  minWidth?: number;
+  minHeight?: number;
+}
+
+export function useDraggable(options: DraggableOptions = {}) {
+  const position = reactive<ModalPosition>({
+    x: options.initialPosition?.x ?? 100,
+    y: options.initialPosition?.y ?? 100,
+  });
+
+  const size = reactive<Size>({
+    width: options.initialSize?.width ?? 400,
+    height: options.initialSize?.height ?? 150,
+  });
+
+  const minWidth = options.minWidth ?? 200;
+  const minHeight = options.minHeight ?? 150;
+
+  let isDragging = false;
+  let isResizing = false;
+  let dragOffset = { x: 0, y: 0 };
+
+  function startDrag(event: MouseEvent) {
+    const target = event.target as Element;
+    if (
+      target.closest(".resize-handle") ||
+      target.closest("select") ||
+      target.closest("input")
+    ) {
+      return;
+    }
+
+    isDragging = true;
+    dragOffset = {
+      x: event.clientX - position.x,
+      y: event.clientY - position.y,
+    };
+
+    document.addEventListener("mousemove", handleDrag);
+    document.addEventListener("mouseup", stopDrag);
+  }
+
+  function handleDrag(event: MouseEvent) {
+    if (isDragging) {
+      position.x = event.clientX - dragOffset.x;
+      position.y = event.clientY - dragOffset.y;
+    }
+  }
+
+  function stopDrag() {
+    isDragging = false;
+    document.removeEventListener("mousemove", handleDrag);
+    document.removeEventListener("mouseup", stopDrag);
+  }
+
+  function startResize(event: MouseEvent) {
+    isResizing = true;
+    event.preventDefault();
+    document.addEventListener("mousemove", handleResize);
+    document.addEventListener("mouseup", stopResize);
+  }
+
+  function handleResize(event: MouseEvent) {
+    if (isResizing) {
+      size.width = Math.max(minWidth, event.clientX - position.x);
+      size.height = Math.max(minHeight, event.clientY - position.y);
+    }
+  }
+
+  function stopResize() {
+    isResizing = false;
+    document.removeEventListener("mousemove", handleResize);
+    document.removeEventListener("mouseup", stopResize);
+  }
+
+  function cleanup() {
+    document.removeEventListener("mousemove", handleDrag);
+    document.removeEventListener("mouseup", stopDrag);
+    document.removeEventListener("mousemove", handleResize);
+    document.removeEventListener("mouseup", stopResize);
+  }
+
+  return {
+    position,
+    size,
+    startDrag,
+    startResize,
+    cleanup,
+  };
+}
diff --git a/packages/frontend/src/composables/useNoteModal.ts b/packages/frontend/src/composables/useNoteModal.ts
index 9861718..a017f7a 100644
--- a/packages/frontend/src/composables/useNoteModal.ts
+++ b/packages/frontend/src/composables/useNoteModal.ts
@@ -1,8 +1,10 @@
 import type { Folder, Note, NoteContentItem, NoteModalSaveData } from "shared";
-import { computed, reactive, ref, watch } from "vue";
+import { computed, ref, watch } from "vue";
 
+import { useDraggable } from "@/composables/useDraggable";
 import { useSDK } from "@/plugins/sdk";
 import { useNotesStore } from "@/stores/notes";
+import type { ModalPosition } from "@/types";
 import { currentReplayTabData } from "@/utils/caido";
 import {
   addParagraphToContent,
@@ -11,18 +13,8 @@ import {
   createTextParagraph,
 } from "@/utils/noteUtils";
 
-interface Position {
-  x: number;
-  y: number;
-}
-
-interface Size {
-  width: number;
-  height: number;
-}
-
 interface NoteModalOptions {
-  initialPosition?: Position;
+  initialPosition?: ModalPosition;
   onClose?: () => void;
   onSave?: (data: NoteModalSaveData) => void;
 }
@@ -36,20 +28,11 @@ export function useNoteModal(options: NoteModalOptions = {}) {
   const textarea = ref<HTMLTextAreaElement | undefined>(undefined);
   const isReplayPage = computed(() => window.location.hash === "#/replay");
 
-  const position = reactive<Position>({
-    x: options.initialPosition?.x || 100,
-    y: options.initialPosition?.y || 100,
+  const { position, size, startDrag, startResize } = useDraggable({
+    initialPosition: options.initialPosition,
+    initialSize: { width: 400, height: 150 },
   });
 
-  const size = reactive<Size>({
-    width: 400,
-    height: 150,
-  });
-
-  let isDragging = false;
-  let isResizing = false;
-  let dragOffset = { x: 0, y: 0 };
-
   const availableNotes = computed(() => {
     if (!notesStore.tree) return [];
 
@@ -71,58 +54,6 @@ export function useNoteModal(options: NoteModalOptions = {}) {
     return notes;
   });
 
-  function startDrag(event: MouseEvent) {
-    if (
-      (event.target as Element).closest(".resize-handle") ||
-      (event.target as Element).closest("select")
-    )
-      return;
-
-    isDragging = true;
-    dragOffset = {
-      x: event.clientX - position.x,
-      y: event.clientY - position.y,
-    };
-
-    document.addEventListener("mousemove", handleDrag);
-    document.addEventListener("mouseup", stopDrag);
-  }
-
-  function handleDrag(event: MouseEvent) {
-    if (isDragging) {
-      position.x = event.clientX - dragOffset.x;
-      position.y = event.clientY - dragOffset.y;
-    }
-  }
-
-  function stopDrag() {
-    isDragging = false;
-    document.removeEventListener("mousemove", handleDrag);
-    document.removeEventListener("mouseup", stopDrag);
-  }
-
-  function startResize(event: MouseEvent) {
-    isResizing = true;
-    event.preventDefault();
-    document.addEventListener("mousemove", handleResize);
-    document.addEventListener("mouseup", stopResize);
-  }
-
-  function handleResize(event: MouseEvent) {
-    if (isResizing) {
-      const newWidth = event.clientX - position.x;
-      const newHeight = event.clientY - position.y;
-      size.width = Math.max(200, newWidth);
-      size.height = Math.max(150, newHeight);
-    }
-  }
-
-  function stopResize() {
-    isResizing = false;
-    document.removeEventListener("mousemove", handleResize);
-    document.removeEventListener("mouseup", stopResize);
-  }
-
   function close() {
     options.onClose?.();
   }
diff --git a/packages/frontend/src/composables/useSearchModal.ts b/packages/frontend/src/composables/useSearchModal.ts
new file mode 100644
index 0000000..0b41106
--- /dev/null
+++ b/packages/frontend/src/composables/useSearchModal.ts
@@ -0,0 +1,181 @@
+import type { Folder, Note, NoteContent } from "shared";
+import { computed, ref } from "vue";
+
+import { useDraggable } from "@/composables/useDraggable";
+import { useSDK } from "@/plugins/sdk";
+import { useNotesRepository } from "@/repositories/notes";
+import { useNotesStore } from "@/stores/notes";
+import type { ModalPosition } from "@/types";
+
+interface SearchModalOptions {
+  initialPosition?: ModalPosition;
+  onClose?: () => void;
+}
+
+export function useSearchModal(options: SearchModalOptions = {}) {
+  const notesStore = useNotesStore();
+  const repository = useNotesRepository();
+  const sdk = useSDK();
+
+  const { position, size, startDrag, startResize } = useDraggable({
+    initialPosition: options.initialPosition,
+    initialSize: { width: 500, height: 400 },
+    minWidth: 300,
+    minHeight: 250,
+  });
+
+  const searchQuery = ref("");
+  const searchResults = ref<Note[]>([]);
+  const selectedIndex = ref(0);
+  const viewedNote = ref<Note | undefined>(undefined);
+  const isLoading = ref(false);
+
+  const isViewingNote = computed(() => viewedNote.value !== undefined);
+
+  async function search(query: string) {
+    searchQuery.value = query;
+    selectedIndex.value = 0;
+
+    if (!query.trim()) {
+      await loadAllNotes();
+      return;
+    }
+
+    try {
+      const results = await notesStore.searchNotes(query);
+      searchResults.value = results;
+    } catch {
+      searchResults.value = [];
+    }
+  }
+
+  async function loadAllNotes() {
+    if (!notesStore.tree) {
+      await notesStore.initialize();
+    }
+
+    const notes: Note[] = [];
+    const collectNotes = (folder: Folder) => {
+      if (!folder?.children) return;
+      for (const child of folder.children) {
+        if (child.type === "note") {
+          notes.push(child as Note);
+        } else if (child.type === "folder") {
+          collectNotes(child as Folder);
+        }
+      }
+    };
+
+    if (notesStore.tree) {
+      collectNotes(notesStore.tree);
+    }
+    searchResults.value = notes;
+  }
+
+  let savedSearchSize = { width: 500, height: 400 };
+
+  async function openNote(notePath: string) {
+    isLoading.value = true;
+    try {
+      const note = await repository.getNote(notePath);
+      if (note) {
+        savedSearchSize = { width: size.width, height: size.height };
+        viewedNote.value = note;
+
+        const viewWidth = Math.max(700, size.width);
+        const viewHeight = Math.max(500, size.height);
+        const dx = viewWidth - size.width;
+        const dy = viewHeight - size.height;
+        size.width = viewWidth;
+        size.height = viewHeight;
+        position.x = Math.max(0, position.x - dx / 2);
+        position.y = Math.max(0, position.y - dy / 2);
+      }
+    } catch (error) {
+      sdk.window.showToast(`Error loading note: ${error}`, {
+        variant: "error",
+      });
+    } finally {
+      isLoading.value = false;
+    }
+  }
+
+  async function goBackToSearch() {
+    viewedNote.value = undefined;
+    searchQuery.value = "";
+
+    const dx = size.width - savedSearchSize.width;
+    const dy = size.height - savedSearchSize.height;
+    size.width = savedSearchSize.width;
+    size.height = savedSearchSize.height;
+    position.x = position.x + dx / 2;
+    position.y = position.y + dy / 2;
+
+    await notesStore.refreshTree();
+    await loadAllNotes();
+  }
+
+  async function saveNoteContent(content: NoteContent) {
+    if (!viewedNote.value) return;
+
+    try {
+      await repository.updateNote(viewedNote.value.path, { content });
+      viewedNote.value.content = content;
+
+      if (notesStore.currentNotePath === viewedNote.value.path) {
+        await notesStore.refreshTree();
+        await notesStore.loadNote(viewedNote.value.path);
+      }
+    } catch (error) {
+      sdk.window.showToast(`Error saving note: ${error}`, {
+        variant: "error",
+      });
+    }
+  }
+
+  function close() {
+    options.onClose?.();
+  }
+
+  function moveSelection(direction: 1 | -1) {
+    const newIndex = selectedIndex.value + direction;
+    if (newIndex >= 0 && newIndex < searchResults.value.length) {
+      selectedIndex.value = newIndex;
+    }
+  }
+
+  async function openSelectedNote() {
+    const note = searchResults.value[selectedIndex.value];
+    if (note) {
+      await openNote(note.path);
+    }
+  }
+
+  async function initialize() {
+    if (!notesStore.tree) {
+      await notesStore.initialize();
+    }
+    await loadAllNotes();
+  }
+
+  return {
+    position,
+    size,
+    searchQuery,
+    searchResults,
+    selectedIndex,
+    viewedNote,
+    isViewingNote,
+    isLoading,
+    startDrag,
+    startResize,
+    search,
+    openNote,
+    goBackToSearch,
+    saveNoteContent,
+    close,
+    moveSelection,
+    openSelectedNote,
+    initialize,
+  };
+}
diff --git a/packages/frontend/src/env.d.ts b/packages/frontend/src/env.d.ts
new file mode 100644
index 0000000..96e5d27
--- /dev/null
+++ b/packages/frontend/src/env.d.ts
@@ -0,0 +1,4 @@
+declare module "*.css?raw" {
+  const css: string;
+  export default css;
+}
diff --git a/packages/frontend/src/index.ts b/packages/frontend/src/index.ts
index 89a4c11..27a09fd 100644
--- a/packages/frontend/src/index.ts
+++ b/packages/frontend/src/index.ts
@@ -13,6 +13,7 @@ import {
   sendReplaySessionToNote,
   sendSelectedTextToNote,
   showNoteModal,
+  showSearchModal,
 } from "@/actions/actions";
 import { emitter } from "@/utils/eventBus";
 import { convertMarkdownToTipTap } from "@/utils/markdownToJSON";
@@ -57,9 +58,16 @@ export const init = (sdk: FrontendSDK) => {
     run: () => sendReplaySessionToNote(sdk),
   });
 
+  sdk.commands.register("notesplusplus:search-notes", {
+    name: "Search Notes",
+    group: "Notes++",
+    run: () => showSearchModal(sdk),
+  });
+
   sdk.commandPalette.register("notesplusplus:floating-modal");
   sdk.commandPalette.register("notesplusplus:send-selected-text");
   sdk.commandPalette.register("notesplusplus:send-replay-session");
+  sdk.commandPalette.register("notesplusplus:search-notes");
 
   sdk.menu.registerItem({
     type: "Request",
@@ -74,6 +82,7 @@ export const init = (sdk: FrontendSDK) => {
   });
 
   sdk.shortcuts.register("notesplusplus:floating-modal", ["cmd", "shift", "N"]);
+  sdk.shortcuts.register("notesplusplus:search-notes", ["cmd", "shift", "S"]);
   sdk.shortcuts.register("notesplusplus:send-selected-text", [
     "ctrl",
     "shift",
diff --git a/packages/frontend/src/types.ts b/packages/frontend/src/types.ts
index eee4824..81927e7 100644
--- a/packages/frontend/src/types.ts
+++ b/packages/frontend/src/types.ts
@@ -2,3 +2,8 @@ import { type Caido } from "@caido/sdk-frontend";
 import { type API, type BackendEvents } from "backend";
 
 export type FrontendSDK = Caido<API, BackendEvents>;
+
+export interface ModalPosition {
+  x: number;
+  y: number;
+}
diff --git a/packages/frontend/src/utils/injectEditorStyles.ts b/packages/frontend/src/utils/injectEditorStyles.ts
new file mode 100644
index 0000000..5722a11
--- /dev/null
+++ b/packages/frontend/src/utils/injectEditorStyles.ts
@@ -0,0 +1,12 @@
+import editorCSS from "@/components/content/editor/editor.css?raw";
+
+const STYLE_ID = "notesplusplus-editor-styles";
+
+export function injectEditorStyles() {
+  if (document.getElementById(STYLE_ID)) return;
+
+  const style = document.createElement("style");
+  style.id = STYLE_ID;
+  style.textContent = editorCSS;
+  document.head.appendChild(style);
+}