From cd94f7f7ef0993a997d393d9236627b167cda6fb Mon Sep 17 00:00:00 2001
From: cadamsdev <cadamsdev@outlook.com>
Date: Sun, 28 Dec 2025 11:32:45 -0500
Subject: [PATCH 1/6] updated copilot-instructions

---
 .github/copilot-instructions.md | 266 ++++++++++++++++----------------
 1 file changed, 132 insertions(+), 134 deletions(-)

diff --git a/.github/copilot-instructions.md b/.github/copilot-instructions.md
index 2c6dc55..c7cb3c8 100644
--- a/.github/copilot-instructions.md
+++ b/.github/copilot-instructions.md
@@ -1,150 +1,148 @@
-# Copilot Instructions for Notes App
+# NoteX Copilot Instructions
 
-## Project Architecture
+## Project Overview
+NoteX is a local-first, markdown-based note-taking app built with Tauri v2 (Rust backend + Vue 3 frontend). Notes are stored in SQLite and support cloud sync via custom database paths (OneDrive, Google Drive, etc.).
 
-This is a **Tauri v2 + Vue 3 + Vite** desktop application using a monorepo structure managed by Bun workspaces.
+## Architecture
 
-### Repository Structure
-- **Root**: Monorepo managed with Bun workspaces (`bun.lock`, `package.json`)
-- **`desktop/`**: The Tauri application workspace
-  - Frontend: Vue 3 SFCs with `<script setup>` syntax
-  - Build tool: Vite with Tailwind CSS v4
-  - Backend: Rust using Tauri framework v2
+### Monorepo Structure
+- **`desktop/`**: Tauri application (main product)
+  - `src/`: Vue 3 frontend (Composition API with `<script setup>`)
+  - `src-tauri/`: Rust backend with Tauri commands
+- **`apps/website/`**: Nuxt 3 marketing site (SSG mode)
+- **Root**: Bun workspace configuration
 
-### Key Architecture Points
-- The Rust library is named `notes_lib` (not just `notes`) to avoid Windows binary name conflicts
-- Tauri backend is in `desktop/src-tauri/src/lib.rs` with commands registered via `tauri::generate_handler![]`
-- Frontend runs on `localhost:1420` (strict port) during development
-- Vite HMR uses port `1421` when using `TAURI_DEV_HOST`
+### Frontend-Backend Communication
+- Frontend: Uses `@tauri-apps/api` to invoke Rust commands via `invoke()`
+- Backend: Rust functions annotated with `#[tauri::command]` and registered in `invoke_handler![]`
+- Database: SQLite accessed via `@tauri-apps/plugin-sql` (frontend) and managed by Rust (backend)
+
+### Key Data Flow
+1. **Database Path**: Rust backend (`get_database_path()`) determines SQLite location (custom or default)
+2. **Frontend Init**: Vue component loads DB path via `invoke('get_database_path_cmd')`, then connects using `Database.load()`
+3. **Notes Storage**: All CRUD operations use SQLite, no in-memory state persistence
+
+## Critical Patterns
+
+### Database Management
+- **Dual Environment Support**: `TAURI_ENV_USE_TEST_DB=true` switches to `notes_test.db` (dev) vs `notes.db` (prod)
+- **Custom Paths**: Users can set custom DB directory (e.g., iCloud folder) via settings panel
+- **Path Resolution**: See [lib.rs](desktop/src-tauri/src/lib.rs) `get_database_path()` for logic
+- Frontend receives env via Vite config: `import.meta.env.VITE_USE_TEST_DB`
+
+### Markdown Rendering
+- Uses `marked` (GFM) + `shiki` for syntax highlighting
+- **Dual Theme Support**: Generates both light/dark highlighted code in [markdown.ts](desktop/src/utils/markdown.ts)
+- **Custom Renderer**: Links open in new tabs, code blocks have copy buttons
+- **Tag Extraction**: Hashtags like `#work` extracted via `TAG_REGEX` in [regex.ts](desktop/src/utils/regex.ts)
+
+### Tag System
+- Pattern: `(?<=\s|^)#([a-zA-Z][\w+-]*)/g` - matches hashtags at word boundaries
+- Tags extracted from note content in real-time (no separate DB table)
+- Used for filtering in [TagsPanel.vue](desktop/src/components/TagsPanel.vue) and [App.vue](desktop/src/App.vue)
+
+### State Management
+- **No Vuex/Pinia**: Uses Vue 3 Composition API with reactive refs in root [App.vue](desktop/src/App.vue)
+- **Infinite Scroll**: `displayedNotesCount` increases by `NOTES_PER_PAGE` (20) on scroll
+- **Fuzzy Search**: Uses `Fuse.js` for note content search
 
 ## Development Workflows
 
-### Running the Application
+### Running the App
 ```bash
-# From root - uses workspace filter
-bun run desktop
+# Development (with test database)
+bun run dev  # Runs: cross-env TAURI_ENV_USE_TEST_DB=true bun run --filter desktop tauri dev
+
+# Production mode (uses notes.db)
+bun run prod  # Runs: bun run --filter desktop tauri dev
 
-# From desktop/ directory
-bun run tauri dev
+# Build for release
+bun run build  # Compiles Rust + bundles Vue
 ```
 
-### Build Commands
+### Code Quality
 ```bash
-# Development (frontend only)
-cd desktop && bun run dev
+bun run lint          # oxlint on desktop/src/**/*.{ts,js,vue}
+bun run format        # Prettier
+bun run format:check  # Verify formatting
+```
 
-# Production build (creates bundle)
-cd desktop && bun run build
-cd desktop && bun run tauri build
+### Key Points
+- **Bun workspace**: Root package.json defines workspaces, use `--filter desktop` for app commands
+- **Vite HMR**: Runs on port 1420 (see [vite.config.js](desktop/vite.config.js))
+- **Tauri dev**: Watches Rust changes, rebuilds on save
+
+## Component Conventions
+
+### Vue Components
+- Use `<script setup lang="ts">` exclusively
+- Props: `defineProps<Props>()` with TypeScript interfaces
+- Emits: `defineEmits<{eventName: [arg: type]}>()` pattern
+- Styling: Scoped `<style scoped>` with CSS variables from [theme.css](desktop/src/styles/theme.css)
+
+### Example Pattern (from [NoteItem.vue](desktop/src/components/NoteItem.vue)):
+```typescript
+interface Props {
+  note: Note;
+}
+const props = defineProps<Props>();
+const emit = defineEmits<{
+  delete: [id: number];
+  edit: [id: number, content: string];
+}>();
 ```
 
-### Project Setup
-- Uses **Bun** as the package manager (not npm/yarn)
-- Rust toolchain required for Tauri backend
-- VSCode extensions recommended: `Vue.volar`, `tauri-apps.tauri-vscode`, `rust-lang.rust-analyzer`
-
-## Technology Stack Conventions
-
-### Vue 3 (Frontend)
-- Use `<script setup lang="ts">` syntax (Composition API)
-- Global styles imported in `App.vue`: `import './styles/theme.css'` and `import './styles/global.css'`
-- Theme system uses `desktop/src/styles/theme.css` with `@theme` directive
-- **Prefer Vue scoped styles over Tailwind classes** for component-specific styling
-  - Use `<style scoped>` blocks in Vue components for better maintainability and encapsulation
-  - Leverage CSS custom properties from theme.css (e.g., `var(--color-text-primary)`, `var(--color-surface)`)
-  - Only use Tailwind for prototyping or when rapid iteration is needed
-  - Semantic class names in scoped styles improve readability and maintenance
-- **Dynamic Classes**: Always use Vue's `:class` binding for conditional/dynamic classes
-  - Use array syntax with objects for conditional classes: `:class="['base-class', { 'conditional-class': condition }]"`
-  - Never build class strings manually with computed properties using array.push() or string concatenation
-  - Example: `:class="[{ 'text-lg': size === 'large', 'text-sm': size === 'small' }]"` instead of computed string building
-- **Tailwind Custom Properties**: Use direct Tailwind utility classes based on theme tokens
-  - Custom properties defined in `@theme` in theme.css automatically become Tailwind utilities
-  - Example: `--color-text-primary` becomes `text-text-primary` utility class
-  - Example: `--color-surface` becomes `bg-surface` utility class
-- **Theme System**: Two-tier token architecture for maintainability
-  - **Base Tokens** (named after color/value): Raw values like `--color-gray-100`, `--color-gray-200`, etc.
-    - Grayscale: `gray-100` (lightest) through `gray-900` (darkest)
-    - Typography: `font-family-base`, `font-family-mono`
-  - **Semantic Tokens** (named after purpose): Context-specific tokens that reference base tokens
-    - Backgrounds: `background`, `background-overlay`
-    - Surfaces: `surface`, `surface-hover`, `surface-active`
-    - Borders: `border`, `border-hover`, `border-active`
-    - Text: `text-primary`, `text-secondary`
-  - **Always use semantic tokens** in components (e.g., `text-text-primary`, `bg-surface`, `border-border`)
-  - Semantic tokens automatically adapt to light/dark mode via `body.dark` overrides
-- **Light & Dark Mode**: Full theme support with toggle button (`ThemeToggle.vue`)
-  - Light mode: Uses lighter grayscale values (`gray-100`, `gray-200`, `gray-700`)
-  - Dark mode: Uses darker grayscale values (`gray-800`, `gray-900`, `gray-200`)
-  - Theme persists via localStorage and respects system preference on first load
-  - Dark mode class added to `<body>` element: `body.dark`
-- **Styling Approach**:
-  - **Prefer Vue scoped styles** (`<style scoped>`) for component-specific styling
-  - Use semantic CSS class names that describe purpose (e.g., `.action-button`, `.info-card`, `.panel-header`)
-  - Reference theme CSS custom properties directly in scoped styles (e.g., `var(--color-surface)`, `var(--color-text-primary)`)
-  - Reserve Tailwind utility classes for prototyping or quick iterations only
-  - Benefits: Better maintainability, clearer component boundaries, easier refactoring, improved readability
-- **Design principles**: Clean minimal aesthetics with semantic color system, subtle shadows, smooth transitions (0.3s), high contrast for readability
-
-#### Component Architecture
-- All reusable components are located in `desktop/src/components/`
-- Components use TypeScript with proper interface definitions for props and emits
-- Follow Vue 3 Composition API patterns with `<script setup lang="ts">`
-- Component naming: PascalCase for files (e.g., `CalendarView.vue`, `NoteItem.vue`)
-- Props are defined using `defineProps<PropsInterface>()` with TypeScript interfaces
-- Events are defined using `defineEmits<EmitsInterface>()` with typed event signatures
-- Components should be self-contained and focused on a single responsibility
-- Prefer props and events over complex state management for component communication
-- Example components in the project:
-  - `CalendarView.vue` - Calendar with date selection and note counts
-  - `TagsPanel.vue` - Tag filtering interface
-  - `NoteCreator.vue` - Note creation form
-  - `NoteItem.vue` - Individual note display with edit/delete
-  - `EmptyState.vue` - Empty state messaging
-  - `SearchBar.vue` - Search input with clear functionality
-  - `ThemeToggle.vue` - Light/dark mode toggle button
-
-### Tauri (Backend)
-- Commands defined with `#[tauri::command]` attribute in `lib.rs`
-- Register new commands in `invoke_handler` macro: `tauri::generate_handler![greet, new_command]`
-- Plugin system: Currently uses `tauri-plugin-opener` for external links
-- Window configuration in `tauri.conf.json` (800x600 default window)
-
-### Rust Specifics
-- Library crate types: `["staticlib", "cdylib", "rlib"]`
-- Dependencies: `serde`, `serde_json` for JSON serialization
-- The `main.rs` is minimal - just calls `notes_lib::run()`
-
-## Integration Patterns
+### Tauri Commands
+- Rust: `#[tauri::command]` + register in `invoke_handler![]` in [lib.rs](desktop/src-tauri/src/lib.rs#L380)
+- Frontend: `await invoke<ReturnType>('command_name', { arg: value })`
+- Error handling: Return `Result<T, String>` in Rust
 
-### Frontend-Backend Communication
-- Use `invoke()` from `@tauri-apps/api` to call Rust commands
-- Example pattern from existing code:
-  ```rust
-  #[tauri::command]
-  fn greet(name: &str) -> String {
-      format!("Hello, {}!", name)
-  }
-  ```
-- Access from Vue: Import `invoke` and call async: `await invoke('greet', { name: 'World' })`
-
-### File Locations
-- Tauri config: `desktop/src-tauri/tauri.conf.json`
-- Capabilities/permissions: `desktop/src-tauri/capabilities/default.json`
-- App icons: `desktop/src-tauri/icons/`
-- Build artifacts: `desktop/dist` (frontend), `desktop/src-tauri/target` (Rust - gitignored)
-
-## Project-Specific Notes
-
-- **Identifier**: `com.crazypanda.notes` (used for app bundle)
-- **License**: GPL-3.0
-- Early stage project (README says "TODO", minimal implementation)
-- Uses `better-sqlite3` types (devDependency) suggesting planned database integration
-- Has Electron in devDependencies (legacy/alternate approach?)
-
-## Development Tips
-
-- Vite config prevents screen clearing to avoid obscuring Rust errors
-- HMR watches exclude `src-tauri/**` to prevent unnecessary reloads
-- Build scripts configured in `tauri.conf.json`: `beforeDevCommand`, `beforeBuildCommand`
-- Target directory structure in Rust follows Windows conventions (`.dll`, `.pdb`, etc.)
+## Styling
+
+### Theme System
+- CSS variables defined in [theme.css](desktop/src/styles/theme.css)
+- Dark mode: `[data-theme='dark']` attribute on `<html>`
+- Theme toggle: Persists to `localStorage` via [ThemeToggle.vue](desktop/src/components/ThemeToggle.vue)
+
+### CSS Patterns
+- Base reset: [reset.css](desktop/src/styles/reset.css)
+- Global styles: [global.css](desktop/src/styles/global.css)
+- Markdown styles: [markdown.css](desktop/src/styles/markdown.css) (code blocks, lists, etc.)
+
+## Testing & Debugging
+
+### Test Database
+- Always use `bun run dev` (sets `TAURI_ENV_USE_TEST_DB=true`)
+- Backend checks `env::var("TAURI_ENV_USE_TEST_DB")` to switch DB files
+- Frontend reads `import.meta.env.VITE_USE_TEST_DB` (forwarded by Vite)
+
+### Common Issues
+- **DB path not found**: Check `get_database_path()` logs in terminal
+- **Tauri command not found**: Verify registration in `invoke_handler![]`
+- **HMR not working**: Ensure Vite server on port 1420, check firewall
+
+## Build Configuration
+
+### Tauri Config ([tauri.conf.json](desktop/src-tauri/tauri.conf.json))
+- Product name: "NoteX"
+- Bundle identifier: "com.notex"
+- Dev command: `bun run dev` (Vite server)
+- Build command: `bun run build` (produces `dist/`)
+- Window: 1366×768 default, min 800×600
+
+### Version Management
+- Single source: root [package.json](package.json) version field
+- Tauri uses: `"version": "../package.json"` to inherit version
+
+## External Dependencies
+
+### Frontend
+- `@tauri-apps/plugin-sql`: SQLite integration
+- `@tauri-apps/plugin-dialog`: Native dialogs (file picker)
+- `marked`: GFM markdown parser
+- `shiki`: Code syntax highlighting
+- `fuse.js`: Fuzzy search
+
+### Backend
+- `tauri-plugin-sql`: SQLite plugin for Rust
+- `serde_json`: JSON serialization for config files

From d742575339773e64d24db89c7d5d41e9ceb1eb85 Mon Sep 17 00:00:00 2001
From: cadamsdev <cadamsdev@outlook.com>
Date: Sun, 28 Dec 2025 12:02:03 -0500
Subject: [PATCH 2/6] added support for copying images

---
 README.md                           |  2 +
 desktop/src-tauri/Cargo.lock        |  1 +
 desktop/src-tauri/Cargo.toml        |  1 +
 desktop/src-tauri/src/lib.rs        | 68 ++++++++++++++++++++++++++++-
 desktop/src/components/Textarea.vue | 62 ++++++++++++++++++++++++++
 desktop/src/utils/markdown.ts       | 37 +++++++++++++++-
 6 files changed, 168 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index 49bf4e4..5d429ac 100644
--- a/README.md
+++ b/README.md
@@ -41,6 +41,8 @@
 ### 📝 **Markdown Support**
 - Write your notes in plain text files, take your data anywhere
 - Supports GitHub Flavored Markdown (GFM)
+- Copy and paste images directly into notes
+- Images stored locally alongside your notes
 
 ### 📅 **Smart Organization**
 - Organize notes with hashtags (`#work`, `#personal`, etc.)
diff --git a/desktop/src-tauri/Cargo.lock b/desktop/src-tauri/Cargo.lock
index c276be5..ff41794 100644
--- a/desktop/src-tauri/Cargo.lock
+++ b/desktop/src-tauri/Cargo.lock
@@ -2331,6 +2331,7 @@ checksum = "72ef4a56884ca558e5ddb05a1d1e7e1bfd9a68d9ed024c21704cc98872dae1bb"
 name = "notex"
 version = "0.0.0"
 dependencies = [
+ "base64 0.22.1",
  "serde",
  "serde_json",
  "tauri",
diff --git a/desktop/src-tauri/Cargo.toml b/desktop/src-tauri/Cargo.toml
index 9521d24..d93ba48 100644
--- a/desktop/src-tauri/Cargo.toml
+++ b/desktop/src-tauri/Cargo.toml
@@ -24,4 +24,5 @@ tauri-plugin-dialog = "2.0"
 tauri-plugin-sql = { version = "2", features = ["sqlite"] }
 serde = { version = "1", features = ["derive"] }
 serde_json = "1"
+base64 = "0.22"
 
diff --git a/desktop/src-tauri/src/lib.rs b/desktop/src-tauri/src/lib.rs
index 26266ee..b3ad5d0 100644
--- a/desktop/src-tauri/src/lib.rs
+++ b/desktop/src-tauri/src/lib.rs
@@ -1,7 +1,9 @@
 use std::env;
 use std::fs;
 use std::path::PathBuf;
+use std::time::{SystemTime, UNIX_EPOCH};
 use tauri::Manager;
+use base64::{Engine as _, engine::general_purpose};
 
 const DB_PATH_KEY: &str = "custom_db_path";
 
@@ -143,7 +145,6 @@ fn create_database_backup(db_path: &PathBuf) -> Result<String, String> {
     let extension = db_path.extension().unwrap_or_default().to_string_lossy();
 
     // Create timestamp for backup filename
-    use std::time::{SystemTime, UNIX_EPOCH};
     let timestamp = SystemTime::now()
         .duration_since(UNIX_EPOCH)
         .map_err(|e| format!("Failed to get timestamp: {}", e))?
@@ -167,6 +168,67 @@ fn create_database_backup_cmd(db_path: String) -> Result<String, String> {
     create_database_backup(&path)
 }
 
+// Get the assets directory (next to the database)
+fn get_assets_images_dir(app: &tauri::AppHandle) -> Result<PathBuf, String> {
+    let db_path = get_database_path(app)?;
+    let db_dir = db_path.parent().ok_or("Failed to get database directory")?;
+    let assets_dir = db_dir.join("assets").join("images");
+    Ok(assets_dir)
+}
+
+#[tauri::command]
+fn save_image_cmd(
+    app: tauri::AppHandle,
+    image_data: String,
+    mime_type: String,
+) -> Result<String, String> {
+    // Determine file extension from mime type
+    let extension = match mime_type.as_str() {
+        "image/png" => "png",
+        "image/jpeg" | "image/jpg" => "jpg",
+        "image/gif" => "gif",
+        "image/webp" => "webp",
+        "image/svg+xml" => "svg",
+        _ => "png", // Default to png
+    };
+
+    // Get assets/images directory
+    let images_dir = get_assets_images_dir(&app)?;
+
+    // Create directory if it doesn't exist
+    fs::create_dir_all(&images_dir)
+        .map_err(|e| format!("Failed to create images directory: {}", e))?;
+
+    // Generate unique filename using timestamp and random suffix
+    let timestamp = SystemTime::now()
+        .duration_since(UNIX_EPOCH)
+        .map_err(|e| format!("Failed to get timestamp: {}", e))?
+        .as_millis();
+
+    let filename = format!("image_{}.{}", timestamp, extension);
+    let file_path = images_dir.join(&filename);
+
+    // Decode base64 image data
+    let image_bytes = general_purpose::STANDARD
+        .decode(&image_data)
+        .map_err(|e| format!("Failed to decode image data: {}", e))?;
+
+    // Write image to file
+    fs::write(&file_path, image_bytes)
+        .map_err(|e| format!("Failed to write image file: {}", e))?;
+
+    println!("Image saved to: {}", file_path.display());
+
+    // Return the absolute path to the saved image
+    Ok(file_path.to_string_lossy().to_string())
+}
+
+#[tauri::command]
+fn get_assets_directory_cmd(app: tauri::AppHandle) -> Result<String, String> {
+    let images_dir = get_assets_images_dir(&app)?;
+    Ok(images_dir.to_string_lossy().to_string())
+}
+
 #[tauri::command]
 fn import_database_cmd(
     app: tauri::AppHandle,
@@ -387,7 +449,9 @@ pub fn run() {
             reset_database_directory_cmd,
             check_database_exists_cmd,
             create_database_backup_cmd,
-            import_database_cmd
+            import_database_cmd,
+            save_image_cmd,
+            get_assets_directory_cmd
         ])
         .run(tauri::generate_context!())
         .expect("error while running tauri application");
diff --git a/desktop/src/components/Textarea.vue b/desktop/src/components/Textarea.vue
index 4c144bc..5693a2a 100644
--- a/desktop/src/components/Textarea.vue
+++ b/desktop/src/components/Textarea.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { watch } from 'vue';
 import { useTextareaAutosize } from '@vueuse/core';
+import { invoke } from '@tauri-apps/api/core';
 
 interface Props {
   modelValue: string;
@@ -45,6 +46,66 @@ const handleInput = (e: Event) => {
 const handleKeydown = (e: KeyboardEvent) => {
   emit('keydown', e);
 };
+
+const handlePaste = async (e: ClipboardEvent) => {
+  const items = e.clipboardData?.items;
+  if (!items) return;
+
+  for (const item of Array.from(items)) {
+    // Check if the item is an image
+    if (item.type.startsWith('image/')) {
+      e.preventDefault();
+
+      const file = item.getAsFile();
+      if (!file) continue;
+
+      try {
+        // Read the file as base64
+        const reader = new FileReader();
+        reader.onload = async () => {
+          const base64Data = (reader.result as string).split(',')[1];
+          
+          try {
+            // Save the image using the Tauri command
+            const imagePath = await invoke<string>('save_image_cmd', {
+              imageData: base64Data,
+              mimeType: file.type,
+            });
+
+            // Get the filename from the full path
+            const filename = imagePath.split(/[\\/]/).pop();
+            
+            // Insert markdown image syntax at cursor position
+            const target = e.target as HTMLTextAreaElement;
+            const cursorPos = target.selectionStart || 0;
+            const textBefore = target.value.substring(0, cursorPos);
+            const textAfter = target.value.substring(cursorPos);
+            
+            // Use relative path: assets/images/filename
+            const markdownImage = `![](assets/images/${filename})`;
+            const newValue = textBefore + markdownImage + textAfter;
+            
+            emit('update:modelValue', newValue);
+            
+            // Set cursor position after the inserted image
+            setTimeout(() => {
+              const newCursorPos = cursorPos + markdownImage.length;
+              target.setSelectionRange(newCursorPos, newCursorPos);
+              target.focus();
+            }, 0);
+          } catch (error) {
+            console.error('Failed to save image:', error);
+          }
+        };
+        reader.readAsDataURL(file);
+      } catch (error) {
+        console.error('Failed to read image file:', error);
+      }
+      
+      break; // Only process the first image
+    }
+  }
+};
 </script>
 
 <template>
@@ -53,6 +114,7 @@ const handleKeydown = (e: KeyboardEvent) => {
     v-model="input"
     @input="handleInput"
     @keydown="handleKeydown"
+    @paste="handlePaste"
     :placeholder="placeholder"
     :disabled="disabled"
     :autofocus="autofocus"
diff --git a/desktop/src/utils/markdown.ts b/desktop/src/utils/markdown.ts
index 7c98f03..09a44dc 100644
--- a/desktop/src/utils/markdown.ts
+++ b/desktop/src/utils/markdown.ts
@@ -1,7 +1,18 @@
 import { marked } from 'marked';
 import { createHighlighter } from 'shiki';
+import { invoke } from '@tauri-apps/api/core';
+import { convertFileSrc } from '@tauri-apps/api/core';
 
 let highlighter: any = null;
+let databaseDirectory: string | null = null;
+
+// Get the database directory for resolving image paths
+async function getDatabaseDirectory(): Promise<string> {
+  if (!databaseDirectory) {
+    databaseDirectory = await invoke<string>('get_database_directory_cmd');
+  }
+  return databaseDirectory;
+}
 
 // Initialize Shiki highlighter with both light and dark themes
 async function initHighlighter() {
@@ -39,6 +50,29 @@ renderer.link = function (token: any) {
   return `<a href="${href}"${titleAttr} target="_blank" rel="noopener noreferrer">${text}</a>`;
 };
 
+// Custom image renderer to handle local image paths
+renderer.image = function (token: any) {
+  const { href, title, text } = token;
+  
+  // Check if the href is a relative path starting with assets/images/
+  if (href.startsWith('assets/images/')) {
+    // Convert to absolute path and use Tauri's convertFileSrc
+    if (databaseDirectory) {
+      const separator = databaseDirectory.includes('\\') ? '\\' : '/';
+      const absolutePath = `${databaseDirectory}${separator}${href}`;
+      const src = convertFileSrc(absolutePath);
+      const titleAttr = title ? ` title="${title}"` : '';
+      const alt = text || '';
+      return `<img src="${src}" alt="${alt}"${titleAttr} />`;
+    }
+  }
+  
+  // For absolute URLs or other paths, render normally
+  const titleAttr = title ? ` title="${title}"` : '';
+  const alt = text || '';
+  return `<img src="${href}" alt="${alt}"${titleAttr} />`;
+};
+
 renderer.code = function (token: any) {
   const { text: code, lang: language } = token;
 
@@ -138,8 +172,9 @@ initHighlighter();
 
 // Export the render function
 export async function renderMarkdown(content: string): Promise<string> {
-  // Ensure highlighter is ready
+  // Ensure highlighter is ready and database directory is loaded
   await initHighlighter();
+  await getDatabaseDirectory();
   return marked.parse(content) as string;
 }
 

From 4ebe8d7133f621e9dafe60050d13d7468157e0cd Mon Sep 17 00:00:00 2001
From: cadamsdev <cadamsdev@outlook.com>
Date: Sun, 28 Dec 2025 12:11:09 -0500
Subject: [PATCH 3/6] fix showing images

---
 desktop/src-tauri/Cargo.lock      |  7 +++++++
 desktop/src-tauri/Cargo.toml      |  2 +-
 desktop/src-tauri/tauri.conf.json |  6 +++++-
 desktop/src/utils/markdown.ts     | 11 +++++++++--
 4 files changed, 22 insertions(+), 4 deletions(-)

diff --git a/desktop/src-tauri/Cargo.lock b/desktop/src-tauri/Cargo.lock
index ff41794..cefc208 100644
--- a/desktop/src-tauri/Cargo.lock
+++ b/desktop/src-tauri/Cargo.lock
@@ -1675,6 +1675,12 @@ dependencies = [
  "pin-project-lite",
 ]
 
+[[package]]
+name = "http-range"
+version = "0.1.5"
+source = "registry+https://github.com/rust-lang/crates.io-index"
+checksum = "21dec9db110f5f872ed9699c3ecf50cf16f423502706ba5c72462e28d3157573"
+
 [[package]]
 name = "httparse"
 version = "1.10.1"
@@ -4251,6 +4257,7 @@ dependencies = [
  "gtk",
  "heck 0.5.0",
  "http",
+ "http-range",
  "jni",
  "libc",
  "log",
diff --git a/desktop/src-tauri/Cargo.toml b/desktop/src-tauri/Cargo.toml
index d93ba48..fc0d4c1 100644
--- a/desktop/src-tauri/Cargo.toml
+++ b/desktop/src-tauri/Cargo.toml
@@ -18,7 +18,7 @@ crate-type = ["staticlib", "cdylib", "rlib"]
 tauri-build = { version = "2", features = [] }
 
 [dependencies]
-tauri = { version = "2", features = [] }
+tauri = { version = "2", features = ["protocol-asset"] }
 tauri-plugin-opener = "2"
 tauri-plugin-dialog = "2.0"
 tauri-plugin-sql = { version = "2", features = ["sqlite"] }
diff --git a/desktop/src-tauri/tauri.conf.json b/desktop/src-tauri/tauri.conf.json
index 38ac663..4f864e7 100644
--- a/desktop/src-tauri/tauri.conf.json
+++ b/desktop/src-tauri/tauri.conf.json
@@ -23,7 +23,11 @@
       }
     ],
     "security": {
-      "csp": null
+      "csp": null,
+      "assetProtocol": {
+        "enable": true,
+        "scope": ["**"]
+      }
     }
   },
   "bundle": {
diff --git a/desktop/src/utils/markdown.ts b/desktop/src/utils/markdown.ts
index 09a44dc..76a57de 100644
--- a/desktop/src/utils/markdown.ts
+++ b/desktop/src/utils/markdown.ts
@@ -58,11 +58,18 @@ renderer.image = function (token: any) {
   if (href.startsWith('assets/images/')) {
     // Convert to absolute path and use Tauri's convertFileSrc
     if (databaseDirectory) {
-      const separator = databaseDirectory.includes('\\') ? '\\' : '/';
-      const absolutePath = `${databaseDirectory}${separator}${href}`;
+      // Normalize path separators to forward slashes
+      const normalizedDbDir = databaseDirectory.replace(/\\/g, '/');
+      // Ensure there's a separator between directory and relative path
+      const absolutePath = normalizedDbDir.endsWith('/') 
+        ? `${normalizedDbDir}${href}` 
+        : `${normalizedDbDir}/${href}`;
+      
       const src = convertFileSrc(absolutePath);
       const titleAttr = title ? ` title="${title}"` : '';
       const alt = text || '';
+      
+      console.log('Image path conversion:', { href, databaseDirectory, absolutePath, src });
       return `<img src="${src}" alt="${alt}"${titleAttr} />`;
     }
   }

From 071a97f853c45e3b3669aced0d9398baf51a6bab Mon Sep 17 00:00:00 2001
From: cadamsdev <cadamsdev@outlook.com>
Date: Sun, 28 Dec 2025 12:21:39 -0500
Subject: [PATCH 4/6] fix alt text

---
 desktop/src/components/Textarea.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/desktop/src/components/Textarea.vue b/desktop/src/components/Textarea.vue
index 5693a2a..266455e 100644
--- a/desktop/src/components/Textarea.vue
+++ b/desktop/src/components/Textarea.vue
@@ -82,7 +82,9 @@ const handlePaste = async (e: ClipboardEvent) => {
             const textAfter = target.value.substring(cursorPos);
             
             // Use relative path: assets/images/filename
-            const markdownImage = `![](assets/images/${filename})`;
+            // Extract filename without extension for alt text
+            const filenameWithoutExt = filename?.replace(/\.[^/.]+$/, '') || 'Pasted image';
+            const markdownImage = `![${filenameWithoutExt}](assets/images/${filename})`;
             const newValue = textBefore + markdownImage + textAfter;
             
             emit('update:modelValue', newValue);

From becc2ba7f4bbe2bb2627e0103621653ea95c41e1 Mon Sep 17 00:00:00 2001
From: cadamsdev <cadamsdev@outlook.com>
Date: Sun, 28 Dec 2025 12:35:09 -0500
Subject: [PATCH 5/6] fix code formatting

---
 desktop/src/components/Textarea.vue | 15 ++++++++-------
 desktop/src/utils/markdown.ts       | 19 ++++++++++++-------
 2 files changed, 20 insertions(+), 14 deletions(-)

diff --git a/desktop/src/components/Textarea.vue b/desktop/src/components/Textarea.vue
index 266455e..66d0224 100644
--- a/desktop/src/components/Textarea.vue
+++ b/desktop/src/components/Textarea.vue
@@ -64,7 +64,7 @@ const handlePaste = async (e: ClipboardEvent) => {
         const reader = new FileReader();
         reader.onload = async () => {
           const base64Data = (reader.result as string).split(',')[1];
-          
+
           try {
             // Save the image using the Tauri command
             const imagePath = await invoke<string>('save_image_cmd', {
@@ -74,21 +74,22 @@ const handlePaste = async (e: ClipboardEvent) => {
 
             // Get the filename from the full path
             const filename = imagePath.split(/[\\/]/).pop();
-            
+
             // Insert markdown image syntax at cursor position
             const target = e.target as HTMLTextAreaElement;
             const cursorPos = target.selectionStart || 0;
             const textBefore = target.value.substring(0, cursorPos);
             const textAfter = target.value.substring(cursorPos);
-            
+
             // Use relative path: assets/images/filename
             // Extract filename without extension for alt text
-            const filenameWithoutExt = filename?.replace(/\.[^/.]+$/, '') || 'Pasted image';
+            const filenameWithoutExt =
+              filename?.replace(/\.[^/.]+$/, '') || 'Pasted image';
             const markdownImage = `![${filenameWithoutExt}](assets/images/${filename})`;
             const newValue = textBefore + markdownImage + textAfter;
-            
+
             emit('update:modelValue', newValue);
-            
+
             // Set cursor position after the inserted image
             setTimeout(() => {
               const newCursorPos = cursorPos + markdownImage.length;
@@ -103,7 +104,7 @@ const handlePaste = async (e: ClipboardEvent) => {
       } catch (error) {
         console.error('Failed to read image file:', error);
       }
-      
+
       break; // Only process the first image
     }
   }
diff --git a/desktop/src/utils/markdown.ts b/desktop/src/utils/markdown.ts
index 76a57de..320b6c5 100644
--- a/desktop/src/utils/markdown.ts
+++ b/desktop/src/utils/markdown.ts
@@ -53,7 +53,7 @@ renderer.link = function (token: any) {
 // Custom image renderer to handle local image paths
 renderer.image = function (token: any) {
   const { href, title, text } = token;
-  
+
   // Check if the href is a relative path starting with assets/images/
   if (href.startsWith('assets/images/')) {
     // Convert to absolute path and use Tauri's convertFileSrc
@@ -61,19 +61,24 @@ renderer.image = function (token: any) {
       // Normalize path separators to forward slashes
       const normalizedDbDir = databaseDirectory.replace(/\\/g, '/');
       // Ensure there's a separator between directory and relative path
-      const absolutePath = normalizedDbDir.endsWith('/') 
-        ? `${normalizedDbDir}${href}` 
+      const absolutePath = normalizedDbDir.endsWith('/')
+        ? `${normalizedDbDir}${href}`
         : `${normalizedDbDir}/${href}`;
-      
+
       const src = convertFileSrc(absolutePath);
       const titleAttr = title ? ` title="${title}"` : '';
       const alt = text || '';
-      
-      console.log('Image path conversion:', { href, databaseDirectory, absolutePath, src });
+
+      console.log('Image path conversion:', {
+        href,
+        databaseDirectory,
+        absolutePath,
+        src,
+      });
       return `<img src="${src}" alt="${alt}"${titleAttr} />`;
     }
   }
-  
+
   // For absolute URLs or other paths, render normally
   const titleAttr = title ? ` title="${title}"` : '';
   const alt = text || '';

From a7bbf54105d30215bf59dfe599288875659cdf7f Mon Sep 17 00:00:00 2001
From: cadamsdev <cadamsdev@outlook.com>
Date: Sun, 28 Dec 2025 12:37:59 -0500
Subject: [PATCH 6/6] fix rust formatting

---
 desktop/src-tauri/src/lib.rs | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/desktop/src-tauri/src/lib.rs b/desktop/src-tauri/src/lib.rs
index b3ad5d0..396af5d 100644
--- a/desktop/src-tauri/src/lib.rs
+++ b/desktop/src-tauri/src/lib.rs
@@ -1,9 +1,9 @@
+use base64::{engine::general_purpose, Engine as _};
 use std::env;
 use std::fs;
 use std::path::PathBuf;
 use std::time::{SystemTime, UNIX_EPOCH};
 use tauri::Manager;
-use base64::{Engine as _, engine::general_purpose};
 
 const DB_PATH_KEY: &str = "custom_db_path";
 
@@ -214,8 +214,7 @@ fn save_image_cmd(
         .map_err(|e| format!("Failed to decode image data: {}", e))?;
 
     // Write image to file
-    fs::write(&file_path, image_bytes)
-        .map_err(|e| format!("Failed to write image file: {}", e))?;
+    fs::write(&file_path, image_bytes).map_err(|e| format!("Failed to write image file: {}", e))?;
 
     println!("Image saved to: {}", file_path.display());