Add image viewer with zoom for PNG, JPG, SVG, and other image formats

Image files now open in a dedicated viewer with toolbar controls:
zoom in/out, fit to window, actual size (1:1), and mouse wheel zoom.
Checkerboard background shows transparency. Images also appear in the
folder panel file tree. Viewer properly cleans up when switching tabs.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: ozgesolidkey

src/main/index.ts

@@ -1612,6 +1612,10 @@ const TEXT_EXTENSIONS = new Set([
   '.properties', '.env', '.gitignore', '.dockerignore',
 ]);
 
+const IMAGE_EXTENSIONS = new Set([
+  '.png', '.jpg', '.jpeg', '.gif', '.svg', '.bmp', '.webp', '.ico', '.avif',
+]);
+
 ipcMain.handle(IPC.READ_FOLDER, async (_, folderPath: string) => {
   try {
     const entries = await fs.promises.readdir(folderPath, { withFileTypes: true });
@@ -1626,7 +1630,7 @@ ipcMain.handle(IPC.READ_FOLDER, async (_, folderPath: string) => {
       if (entry.isFile()) {
         const ext = path.extname(entry.name).toLowerCase();
         // Include text-based files or files without extension
-        if (TEXT_EXTENSIONS.has(ext) || ext === '') {
+        if (TEXT_EXTENSIONS.has(ext) || IMAGE_EXTENSIONS.has(ext) || ext === '') {
           try {
             const stat = await fs.promises.stat(fullPath);
             files.push({

src/renderer/index.html

@@ -274,6 +274,20 @@
         <div id="editor-container" class="editor-container">
           <!-- Markdown Preview -->
           <div id="markdown-preview" class="markdown-preview hidden"></div>
+          <!-- Image Viewer -->
+          <div id="image-viewer" class="image-viewer hidden">
+            <div class="image-viewer-toolbar">
+              <button id="btn-image-zoom-in" class="image-viewer-btn" title="Zoom in (+)">+</button>
+              <span id="image-zoom-level" class="image-zoom-level">100%</span>
+              <button id="btn-image-zoom-out" class="image-viewer-btn" title="Zoom out (-)">−</button>
+              <button id="btn-image-zoom-fit" class="image-viewer-btn" title="Fit to window">Fit</button>
+              <button id="btn-image-zoom-actual" class="image-viewer-btn" title="Actual size (1:1)">1:1</button>
+              <span id="image-dimensions" class="image-dimensions"></span>
+            </div>
+            <div class="image-viewer-container" id="image-viewer-container">
+              <img id="image-viewer-img" draggable="false" />
+            </div>
+          </div>
           <div id="welcome-message" class="welcome-message">
             <img src="assets/logo.png" alt="LOGAN" class="welcome-logo">
             <h2>LOGAN</h2>

src/renderer/renderer.ts

@@ -6637,6 +6637,27 @@ async function loadFile(filePath: string, createNewTab: boolean = true): Promise
     return;
   }
 
+  // Handle image files directly (no backend indexing needed)
+  if (isImageFile(filePath)) {
+    if (state.activeTabId && createNewTab) {
+      saveCurrentTabState();
+    }
+    if (createNewTab && !existingTab) {
+      const newTab = createTab(filePath);
+      state.tabs.push(newTab);
+      state.activeTabId = newTab.id;
+    }
+    state.filePath = filePath;
+    hideImageViewer(); // reset first
+    elements.markdownPreview.classList.add('hidden');
+    elements.markdownPreview.innerHTML = '';
+    showImageViewer(filePath);
+    renderTabBar();
+    renderFolderTree();
+    updateStatusBar();
+    return;
+  }
+
   showProgress('Indexing file...');
 
   const unsubscribe = window.api.onIndexingProgress((progress) => {
@@ -6797,6 +6818,7 @@ async function loadFile(filePath: string, createNewTab: boolean = true): Promise
         isMarkdownFile = false;
         elements.markdownPreview.classList.add('hidden');
         elements.markdownPreview.innerHTML = '';
+        hideImageViewer();
         elements.btnWordWrap.textContent = 'Wrap';
         elements.btnWordWrap.title = 'Toggle word wrap (⌥Z)';
         const wrapper = document.querySelector('.log-viewer-wrapper') as HTMLElement;
@@ -9307,6 +9329,76 @@ function isMarkdownExtension(filePath: string): boolean {
   return ext === 'md' || ext === 'markdown';
 }
 
+const IMAGE_EXTENSIONS = new Set(['png', 'jpg', 'jpeg', 'gif', 'svg', 'bmp', 'webp', 'ico', 'avif']);
+
+function isImageFile(filePath: string): boolean {
+  const ext = filePath.toLowerCase().split('.').pop() || '';
+  return IMAGE_EXTENSIONS.has(ext);
+}
+
+// Image viewer state
+let imageZoom = 1;
+const imageViewerEl = document.getElementById('image-viewer') as HTMLDivElement;
+const imageViewerContainer = document.getElementById('image-viewer-container') as HTMLDivElement;
+const imageViewerImg = document.getElementById('image-viewer-img') as HTMLImageElement;
+const imageZoomLevelEl = document.getElementById('image-zoom-level') as HTMLSpanElement;
+const imageDimensionsEl = document.getElementById('image-dimensions') as HTMLSpanElement;
+
+function showImageViewer(filePath: string): void {
+  imageZoom = 1;
+  imageViewerImg.src = '';
+  imageViewerEl.classList.remove('hidden');
+
+  // Hide log viewer
+  const wrapper = document.querySelector('.log-viewer-wrapper') as HTMLElement;
+  if (wrapper) wrapper.style.display = 'none';
+
+  // Load image using file:// protocol
+  imageViewerImg.onload = () => {
+    imageDimensionsEl.textContent = `${imageViewerImg.naturalWidth} × ${imageViewerImg.naturalHeight}`;
+    fitImageToWindow();
+  };
+  imageViewerImg.src = `file://${filePath}`;
+}
+
+function hideImageViewer(): void {
+  imageViewerEl.classList.add('hidden');
+  imageViewerImg.src = '';
+  imageDimensionsEl.textContent = '';
+  const wrapper = document.querySelector('.log-viewer-wrapper') as HTMLElement;
+  if (wrapper) wrapper.style.display = '';
+}
+
+function setImageZoom(zoom: number): void {
+  imageZoom = Math.max(0.05, Math.min(zoom, 20));
+  imageViewerImg.style.width = `${imageViewerImg.naturalWidth * imageZoom}px`;
+  imageViewerImg.style.height = `${imageViewerImg.naturalHeight * imageZoom}px`;
+  imageZoomLevelEl.textContent = `${Math.round(imageZoom * 100)}%`;
+}
+
+function fitImageToWindow(): void {
+  const containerW = imageViewerContainer.clientWidth - 40;
+  const containerH = imageViewerContainer.clientHeight - 40;
+  const imgW = imageViewerImg.naturalWidth;
+  const imgH = imageViewerImg.naturalHeight;
+  if (imgW === 0 || imgH === 0) return;
+  const scale = Math.min(containerW / imgW, containerH / imgH, 1);
+  setImageZoom(scale);
+}
+
+// Image viewer controls
+document.getElementById('btn-image-zoom-in')?.addEventListener('click', () => setImageZoom(imageZoom * 1.25));
+document.getElementById('btn-image-zoom-out')?.addEventListener('click', () => setImageZoom(imageZoom / 1.25));
+document.getElementById('btn-image-zoom-fit')?.addEventListener('click', fitImageToWindow);
+document.getElementById('btn-image-zoom-actual')?.addEventListener('click', () => setImageZoom(1));
+
+// Mouse wheel zoom on image
+imageViewerContainer?.addEventListener('wheel', (e) => {
+  e.preventDefault();
+  const delta = e.deltaY > 0 ? 0.9 : 1.1;
+  setImageZoom(imageZoom * delta);
+}, { passive: false });
+
 async function renderMarkdownPreview(): Promise<void> {
   if (!state.filePath || !isMarkdownFile) return;
 
@@ -11211,23 +11303,30 @@ async function switchToTab(tabId: string): Promise<void> {
       // Restore tab state
       restoreTabState(tab);
 
-      // Handle markdown preview state for the new tab
-      isMarkdownFile = isMarkdownExtension(tab.filePath);
-      if (isMarkdownFile) {
-        markdownPreviewMode = true;
-        elements.btnWordWrap.textContent = 'Raw';
-        elements.btnWordWrap.title = 'Show raw markdown';
-        await renderMarkdownPreview();
-        showMarkdownPreview();
-      } else {
-        markdownPreviewMode = false;
+      // Handle special file viewers for the new tab
+      if (isImageFile(tab.filePath)) {
         elements.markdownPreview.classList.add('hidden');
         elements.markdownPreview.innerHTML = '';
-        elements.btnWordWrap.textContent = 'Wrap';
-        elements.btnWordWrap.title = 'Toggle word wrap (⌥Z)';
-        const wrapper = document.querySelector('.log-viewer-wrapper') as HTMLElement;
-        if (wrapper) {
-          wrapper.style.display = '';
+        showImageViewer(tab.filePath);
+      } else {
+        hideImageViewer();
+        isMarkdownFile = isMarkdownExtension(tab.filePath);
+        if (isMarkdownFile) {
+          markdownPreviewMode = true;
+          elements.btnWordWrap.textContent = 'Raw';
+          elements.btnWordWrap.title = 'Show raw markdown';
+          await renderMarkdownPreview();
+          showMarkdownPreview();
+        } else {
+          markdownPreviewMode = false;
+          elements.markdownPreview.classList.add('hidden');
+          elements.markdownPreview.innerHTML = '';
+          elements.btnWordWrap.textContent = 'Wrap';
+          elements.btnWordWrap.title = 'Toggle word wrap (⌥Z)';
+          const wrapper = document.querySelector('.log-viewer-wrapper') as HTMLElement;
+          if (wrapper) {
+            wrapper.style.display = '';
+          }
         }
       }
 

src/renderer/styles.css

@@ -4123,6 +4123,89 @@ kbd {
   height: auto;
 }
 
+/* Image Viewer */
+.image-viewer {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  flex-direction: column;
+  background: var(--bg-primary);
+  z-index: 5;
+}
+
+.image-viewer.hidden {
+  display: none;
+}
+
+.image-viewer-toolbar {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 12px;
+  background: var(--bg-secondary);
+  border-bottom: 1px solid var(--border-color);
+  flex-shrink: 0;
+}
+
+.image-viewer-btn {
+  padding: 4px 10px;
+  background: var(--bg-tertiary);
+  border: 1px solid var(--border-color);
+  border-radius: 3px;
+  color: var(--text-primary);
+  cursor: pointer;
+  font-size: 13px;
+}
+
+.image-viewer-btn:hover {
+  background: var(--bg-hover);
+}
+
+.image-zoom-level {
+  font-size: 12px;
+  color: var(--text-secondary);
+  min-width: 40px;
+  text-align: center;
+}
+
+.image-dimensions {
+  font-size: 11px;
+  color: var(--text-muted);
+  margin-left: auto;
+}
+
+.image-viewer-container {
+  flex: 1;
+  overflow: auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: grab;
+  /* Checkerboard background for transparency */
+  background-image:
+    linear-gradient(45deg, var(--bg-tertiary) 25%, transparent 25%),
+    linear-gradient(-45deg, var(--bg-tertiary) 25%, transparent 25%),
+    linear-gradient(45deg, transparent 75%, var(--bg-tertiary) 75%),
+    linear-gradient(-45deg, transparent 75%, var(--bg-tertiary) 75%);
+  background-size: 20px 20px;
+  background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
+}
+
+.image-viewer-container:active {
+  cursor: grabbing;
+}
+
+.image-viewer-container img {
+  max-width: none;
+  max-height: none;
+  user-select: none;
+  -webkit-user-drag: none;
+  transition: transform 0.1s ease;
+}
+
 /* Advanced Filter Modal */
 .advanced-filter-modal-content {
   width: 600px;