From 4be371247fb69a358ae6d8a7b24df9c2db285110 Mon Sep 17 00:00:00 2001
From: gdilla <djinla@gmail.com>
Date: Sat, 14 Mar 2026 21:09:19 -0700
Subject: [PATCH 1/3] fix: show image files (PNG, JPG, etc.) in sidebar file
 browser

The read_dir_recursive function had a hardcoded allowlist of file
extensions that excluded image formats. Added all supported image
extensions so PNG/JPG/GIF/etc. files appear in the file tree.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src-tauri/src/commands/fs.rs | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/src-tauri/src/commands/fs.rs b/src-tauri/src/commands/fs.rs
index 846795d..f4bc476 100644
--- a/src-tauri/src/commands/fs.rs
+++ b/src-tauri/src/commands/fs.rs
@@ -155,7 +155,7 @@ fn read_dir_recursive(dir_path: &Path, max_depth: u32) -> Result<Vec<FileNode>,
         } else if metadata.is_file() {
             let ext = path.extension().map(|e| e.to_string_lossy().to_lowercase());
 
-            // Include markdown files and common text files
+            // Include markdown files, common text files, and images
             let include = matches!(
                 ext.as_deref(),
                 Some("md")
@@ -178,6 +178,16 @@ fn read_dir_recursive(dir_path: &Path, max_depth: u32) -> Result<Vec<FileNode>,
                     | Some("ts")
                     | Some("xml")
                     | Some("csv")
+                    | Some("png")
+                    | Some("jpg")
+                    | Some("jpeg")
+                    | Some("gif")
+                    | Some("bmp")
+                    | Some("svg")
+                    | Some("webp")
+                    | Some("ico")
+                    | Some("tiff")
+                    | Some("tif")
             );
 
             if include {

From 4ed368e3f461d57b156a7eba2977026eaea86c52 Mon Sep 17 00:00:00 2001
From: gdilla <djinla@gmail.com>
Date: Sat, 14 Mar 2026 21:14:51 -0700
Subject: [PATCH 2/3] feat: open image files with system viewer when clicked in
 sidebar

Clicking PNG/JPG/etc. in the file tree now opens them with the OS
default viewer (Preview.app on macOS) instead of trying to read them
as text into a markdown tab.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/components/sidebar/Sidebar.vue | 27 +++++++++++++++++++++++++++
 1 file changed, 27 insertions(+)

diff --git a/src/components/sidebar/Sidebar.vue b/src/components/sidebar/Sidebar.vue
index 6887abe..0cc0231 100644
--- a/src/components/sidebar/Sidebar.vue
+++ b/src/components/sidebar/Sidebar.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { ref, computed } from 'vue'
+import { openPath } from '@tauri-apps/plugin-opener'
 import { useSidebarStore } from '../../stores/sidebar'
 import { useTabsStore } from '../../stores/tabs'
 import { useRecentFilesStore } from '../../stores/recentFiles'
@@ -10,6 +11,26 @@ const sidebar = useSidebarStore()
 const tabs = useTabsStore()
 const recentFiles = useRecentFilesStore()
 
+/** Image file extensions that should open with the system viewer instead of as a tab */
+const IMAGE_EXTENSIONS = new Set([
+  'png',
+  'jpg',
+  'jpeg',
+  'gif',
+  'bmp',
+  'svg',
+  'webp',
+  'ico',
+  'tiff',
+  'tif',
+])
+
+/** Check if a file path is an image based on its extension */
+function isImageFile(path: string): boolean {
+  const ext = path.split('.').pop()?.toLowerCase() ?? ''
+  return IMAGE_EXTENSIONS.has(ext)
+}
+
 /** The currently selected file path (from the active tab) */
 const selectedFilePath = computed(() => {
   return tabs.activeTab?.filePath ?? null
@@ -17,6 +38,12 @@ const selectedFilePath = computed(() => {
 
 /** Handle file selection in the tree — reads file from disk and opens in tab */
 async function handleFileSelect(path: string) {
+  // Image files open with the system viewer (e.g. Preview.app on macOS)
+  if (isImageFile(path)) {
+    await openPath(path)
+    return
+  }
+
   // openFile handles deduplication: switches to existing tab or reads from disk
   const tab = await tabs.openFile(path)
   if (tab) {

From 72dfdaa5a2d530be89af13ba27ffc711096f8c97 Mon Sep 17 00:00:00 2001
From: gdilla <djinla@gmail.com>
Date: Sat, 14 Mar 2026 21:20:25 -0700
Subject: [PATCH 3/3] feat: add in-app image viewer tab for PNG/JPG files

Clicking an image file in the sidebar now opens it in a built-in image
viewer tab instead of trying to read it as text. The viewer uses the
Tauri asset protocol to display the image centered with a subtle shadow
and an info bar showing the filename.

- Add `isImage` flag to Tab type
- Add `openImageFile()` to tabs store
- Create ImageViewer.vue component
- Conditionally render ImageViewer in App.vue for image tabs

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/App.vue                        |  4 +-
 src/components/ImageViewer.vue     | 99 ++++++++++++++++++++++++++++++
 src/components/sidebar/Sidebar.vue |  6 +-
 src/stores/tabs.ts                 | 28 +++++++++
 src/types/tab.ts                   |  2 +
 5 files changed, 135 insertions(+), 4 deletions(-)
 create mode 100644 src/components/ImageViewer.vue

diff --git a/src/App.vue b/src/App.vue
index f877072..26fbe85 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -5,7 +5,8 @@
       <Sidebar />
       <main class="editor-area">
         <div v-if="tabsStore.activeTab" class="editor-content">
-          <Editor v-if="editorModeStore.mode === 'wysiwyg'" ref="editorRef" />
+          <ImageViewer v-if="tabsStore.activeTab.isImage" />
+          <Editor v-else-if="editorModeStore.mode === 'wysiwyg'" ref="editorRef" />
           <SourceEditor v-else />
         </div>
         <div v-else class="no-tab-placeholder">
@@ -45,6 +46,7 @@ import { invoke } from '@tauri-apps/api/core'
 import TabBar from './components/tabs/TabBar.vue'
 import Editor from './components/Editor.vue'
 import SourceEditor from './components/source/SourceEditor.vue'
+import ImageViewer from './components/ImageViewer.vue'
 import Sidebar from './components/sidebar/Sidebar.vue'
 import OutlinePanel from './components/sidebar/OutlinePanel.vue'
 import StatusBar from './components/StatusBar.vue'
diff --git a/src/components/ImageViewer.vue b/src/components/ImageViewer.vue
new file mode 100644
index 0000000..dc82fb3
--- /dev/null
+++ b/src/components/ImageViewer.vue
@@ -0,0 +1,99 @@
+<template>
+  <div class="image-viewer">
+    <div class="image-viewer-container">
+      <img
+        v-if="assetUrl"
+        :src="assetUrl"
+        :alt="fileName"
+        class="image-preview"
+        @error="handleError"
+      />
+      <div v-if="loadError" class="image-error">
+        <p>Failed to load image</p>
+        <p class="image-error-path">{{ filePath }}</p>
+      </div>
+    </div>
+    <div class="image-info-bar">
+      <span class="image-file-name">{{ fileName }}</span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { convertFileSrc } from '@tauri-apps/api/core'
+import { useTabsStore } from '../stores/tabs'
+
+const tabsStore = useTabsStore()
+const loadError = ref(false)
+
+const filePath = computed(() => tabsStore.activeTab?.filePath ?? '')
+
+const fileName = computed(() => {
+  if (!filePath.value) return ''
+  const parts = filePath.value.split('/')
+  return parts[parts.length - 1] || ''
+})
+
+const assetUrl = computed(() => {
+  if (!filePath.value) return ''
+  return convertFileSrc(filePath.value)
+})
+
+function handleError() {
+  loadError.value = true
+}
+</script>
+
+<style>
+.image-viewer {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background: var(--editor-bg, #fff);
+}
+
+.image-viewer-container {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: auto;
+  padding: 24px;
+}
+
+.image-preview {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+  border-radius: 4px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+}
+
+.image-info-bar {
+  display: flex;
+  align-items: center;
+  padding: 6px 16px;
+  border-top: 1px solid var(--sidebar-border, #e0e0e0);
+  background: var(--sidebar-bg, #f5f5f5);
+  font-size: 12px;
+  color: var(--text-secondary, #888);
+}
+
+.image-file-name {
+  font-family: 'SF Mono', Menlo, Consolas, monospace;
+}
+
+.image-error {
+  text-align: center;
+  color: var(--text-secondary, #888);
+}
+
+.image-error-path {
+  font-family: 'SF Mono', Menlo, Consolas, monospace;
+  font-size: 12px;
+  color: var(--text-secondary, #aaa);
+  margin-top: 8px;
+}
+</style>
diff --git a/src/components/sidebar/Sidebar.vue b/src/components/sidebar/Sidebar.vue
index 0cc0231..e78bf4a 100644
--- a/src/components/sidebar/Sidebar.vue
+++ b/src/components/sidebar/Sidebar.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { ref, computed } from 'vue'
-import { openPath } from '@tauri-apps/plugin-opener'
 import { useSidebarStore } from '../../stores/sidebar'
 import { useTabsStore } from '../../stores/tabs'
 import { useRecentFilesStore } from '../../stores/recentFiles'
@@ -38,9 +37,10 @@ const selectedFilePath = computed(() => {
 
 /** Handle file selection in the tree — reads file from disk and opens in tab */
 async function handleFileSelect(path: string) {
-  // Image files open with the system viewer (e.g. Preview.app on macOS)
+  // Image files open in the built-in image viewer tab
   if (isImageFile(path)) {
-    await openPath(path)
+    tabs.openImageFile(path)
+    recentFiles.addRecentFile(path)
     return
   }
 
diff --git a/src/stores/tabs.ts b/src/stores/tabs.ts
index 2fe397d..a3d9a16 100644
--- a/src/stores/tabs.ts
+++ b/src/stores/tabs.ts
@@ -51,6 +51,7 @@ export const useTabsStore = defineStore('tabs', () => {
       filePath,
       isModified: false,
       isUntitled,
+      isImage: false,
       editorState: createDefaultEditorState(content),
     }
 
@@ -268,6 +269,32 @@ export const useTabsStore = defineStore('tabs', () => {
     }
   }
 
+  /**
+   * Open an image file in a preview tab (no text content loaded).
+   */
+  function openImageFile(filePath: string): Tab {
+    // Check for existing tab
+    const existing = tabs.value.find((t) => t.filePath === filePath)
+    if (existing) {
+      activeTabId.value = existing.id
+      return existing
+    }
+
+    const tab: Tab = {
+      id: generateId(),
+      title: fileNameFromPath(filePath),
+      filePath,
+      isModified: false,
+      isUntitled: false,
+      isImage: true,
+      editorState: createDefaultEditorState(),
+    }
+
+    tabs.value.push(tab)
+    activeTabId.value = tab.id
+    return tab
+  }
+
   /**
    * Show a native file picker dialog and open the selected file.
    */
@@ -305,6 +332,7 @@ export const useTabsStore = defineStore('tabs', () => {
     nextTab,
     previousTab,
     openFile,
+    openImageFile,
     openFileDialog,
   }
 })
diff --git a/src/types/tab.ts b/src/types/tab.ts
index 4a662e8..df8bf4f 100644
--- a/src/types/tab.ts
+++ b/src/types/tab.ts
@@ -26,6 +26,8 @@ export interface Tab {
   isModified: boolean
   /** Whether the tab has never been saved */
   isUntitled: boolean
+  /** Whether this tab displays an image file (not a text editor) */
+  isImage: boolean
   /** Persisted editor state for this tab */
   editorState: EditorState
 }