Add link hover preview to status bar

CHANGELOG.md

@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [Unreleased]
+
+### Added
+
+- **Link hover preview**: Hovering over a link in a rendered document now shows the target URL in the status bar
+
 ## [1.1.0] - 2025-01-21
 
 ### Added

index.html

@@ -132,6 +132,7 @@ <h2>Drop Markdown File Here</h2>
       <footer id="status-bar" class="status-bar">
         <div class="status-left">
           <span id="status-file-path" class="status-item" title="File path">No file</span>
+          <span id="status-link" class="status-item status-link" title="Link target"></span>
         </div>
         <div class="status-right">
           <span id="status-zoom" class="status-item status-zoom" title="Zoom level">100%</span>

src/index.css

@@ -484,6 +484,18 @@ body {
   opacity: 1;
 }
 
+.status-link {
+  color: var(--link-color);
+  max-width: 60ch;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.status-link:empty {
+  display: none;
+}
+
 .status-zoom {
   font-variant-numeric: tabular-nums;
   min-width: 45px;

src/renderer.ts

@@ -177,6 +177,8 @@ class App {
 
     this.findService = new FindService(viewerContainer);
 
+    this.setupLinkHover(viewerContainer);
+
     this.findBar = createFindBar(viewerElement, {
       onFind: (text, { matchCase }) => {
         const result = this.findService!.find(text, { matchCase });
@@ -286,6 +288,28 @@ class App {
     });
   }
 
+  /**
+   * Show the target URL in the status bar while hovering over a link
+   */
+  private setupLinkHover(container: HTMLElement): void {
+    const updateFromTarget = (target: EventTarget | null): void => {
+      const anchor =
+        target instanceof Element ? target.closest('a[href]') : null;
+      const href = anchor?.getAttribute('href') ?? null;
+      this.statusBar?.setLinkUrl(href);
+    };
+
+    container.addEventListener('mouseover', (e) => {
+      updateFromTarget(e.target);
+    });
+    container.addEventListener('mouseout', (e) => {
+      updateFromTarget(e.relatedTarget);
+    });
+    container.addEventListener('mouseleave', () => {
+      this.statusBar?.setLinkUrl(null);
+    });
+  }
+
   /**
    * Initialize theme from preferences
    */

src/renderer/components/StatusBar.ts

@@ -10,6 +10,7 @@ export interface StatusBarState {
   modifiedTime: Date | null;
   isWatching: boolean;
   zoomLevel: number;
+  linkUrl: string | null;
 }
 
 /**
@@ -22,11 +23,13 @@ export class StatusBar {
   private watchElement: HTMLElement | null = null;
   private watchTextElement: HTMLElement | null = null;
   private zoomElement: HTMLElement | null = null;
+  private linkElement: HTMLElement | null = null;
   private state: StatusBarState = {
     filePath: null,
     modifiedTime: null,
     isWatching: false,
     zoomLevel: 1.0,
+    linkUrl: null,
   };
 
   constructor(element: HTMLElement) {
@@ -43,6 +46,19 @@ export class StatusBar {
     this.watchElement = this.element.querySelector('#status-watch');
     this.watchTextElement = this.element.querySelector('#status-watch-text');
     this.zoomElement = this.element.querySelector('#status-zoom');
+    this.linkElement = this.element.querySelector('#status-link');
+  }
+
+  /**
+   * Update the hovered link URL display
+   */
+  setLinkUrl(linkUrl: string | null): void {
+    this.state.linkUrl = linkUrl;
+
+    if (this.linkElement) {
+      this.linkElement.textContent = linkUrl ?? '';
+      this.linkElement.title = linkUrl ?? '';
+    }
   }
 
   /**
@@ -152,6 +168,7 @@ export class StatusBar {
     this.setModifiedTime(null);
     this.setWatching(false);
     this.setZoomLevel(1.0);
+    this.setLinkUrl(null);
   }
 
   /**