feat(image-ref): Bild-Referenz Widget mit Session-Storage

Opt-in Widget fuer Bild-Referenzen (max. 3 gleichzeitig).
Canvas API konvertiert zu WebP, sessionStorage fuer Bilddaten.
Positionen und Labels bleiben persistent, Bilder nur pro Session.

newtab.html

@@ -73,6 +73,9 @@
     <button class="widget-toolbar-btn" data-action="timer" title="Timer">
       <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="13" r="8"/><path d="M12 9v4l2 2"/><path d="M5 3l2 2"/><path d="M19 3l-2 2"/><line x1="12" y1="1" x2="12" y2="3"/></svg>
     </button>
+    <button class="widget-toolbar-btn hidden" data-action="image-ref" title="Bild-Referenz">
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><circle cx="8.5" cy="8.5" r="1.5"/><path d="M21 15l-5-5L5 21"/></svg>
+    </button>
     <button class="widget-toolbar-btn" data-action="notebook" title="Alle Notes">
       <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M4 19.5A2.5 2.5 0 016.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 014 19.5v-15A2.5 2.5 0 016.5 2z"/></svg>
     </button>
@@ -197,6 +200,16 @@
               <option value="left">Links</option>
             </select>
           </div>
+          <div class="setting-row">
+            <div class="setting-info">
+              <span class="setting-label">Bild-Referenz Widgets</span>
+              <span class="setting-desc">Bilder als Referenz anzeigen (nur aktuelle Session)</span>
+            </div>
+            <label class="toggle">
+              <input type="checkbox" id="settingImageRef">
+              <span class="slider"></span>
+            </label>
+          </div>
         </div>
       </section>
 
@@ -483,6 +496,7 @@
   <script src="src/js/notes.js"></script>
   <script src="src/js/calculator.js"></script>
   <script src="src/js/timer.js"></script>
+  <script src="src/js/image-ref.js"></script>
   <script src="src/js/data.js"></script>
   <!-- Onboarding -->
   <script src="src/js/onboarding.js"></script>

src/css/main.css

@@ -1364,6 +1364,91 @@ body.show-desc .bm-desc { display: block; }
   color: var(--bg-primary);
 }
 
+/* ============================================
+   IMAGE REFERENCE WIDGET
+   ============================================ */
+.imgref-container {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  padding: 8px;
+}
+.imgref-img-wrapper {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  border-radius: var(--radius-sm);
+  min-height: 80px;
+}
+.imgref-img {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+  border-radius: var(--radius-sm);
+}
+.imgref-dropzone {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  border: 2px dashed var(--border);
+  border-radius: var(--radius-sm);
+  color: var(--text-muted);
+  font-size: 12px;
+  cursor: pointer;
+  transition: border-color 0.2s, color 0.2s;
+  min-height: 80px;
+  gap: 8px;
+}
+.imgref-dropzone:hover,
+.imgref-dropzone.dragover {
+  border-color: var(--accent);
+  color: var(--text-secondary);
+}
+.imgref-dropzone-icon {
+  font-size: 24px;
+  opacity: 0.5;
+}
+.imgref-label {
+  width: 100%;
+  margin-top: 8px;
+  font-size: 11px;
+  background: transparent;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  color: var(--text-secondary);
+  padding: 4px 8px;
+  flex-shrink: 0;
+}
+.imgref-label:focus {
+  border-color: var(--accent);
+  outline: none;
+}
+.imgref-label::placeholder {
+  color: var(--text-muted);
+}
+.imgref-replace-btn {
+  width: 100%;
+  height: 24px;
+  margin-top: 6px;
+  font-size: 10px;
+  background: transparent;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  color: var(--text-muted);
+  cursor: pointer;
+  flex-shrink: 0;
+  transition: all 0.2s;
+}
+.imgref-replace-btn:hover {
+  border-color: var(--accent);
+  color: var(--text-secondary);
+}
+
 /* ============================================
    WIDGET TOOLBAR
    ============================================ */

src/js/app.js

@@ -20,6 +20,7 @@ async function init() {
   await Notes.init();
   await Calculator.init();
   await Timer.init();
+  await ImageRef.init();
   initDataButtons();
   Store.checkQuota();
 

src/js/image-ref.js

@@ -0,0 +1,500 @@
+/* =============================================
+   HELLION NEWTAB — image-ref.js
+   Bild-Referenz Widget: Session-only Bildanzeige
+   mit Canvas API WebP-Konvertierung
+   ============================================= */
+
+const ImageRef = {
+  MAX_IMAGES: 3,
+  STORAGE_KEY: 'widgetStates',
+  SESSION_KEY: 'imageRefData',
+
+  /** @type {Array<{id: string, label: string, x: number, y: number, width: number, height: number, open: boolean}>} */
+  _images: [],
+  _saveTimer: null,
+
+  // ---- STORAGE (persistent: Position/Meta) ----
+
+  /**
+   * Widget-Meta aus persistentem Storage laden
+   */
+  async load() {
+    const data = await Store.get(this.STORAGE_KEY);
+    if (data && data.imageRef && Array.isArray(data.imageRef.images)) {
+      this._images = data.imageRef.images;
+    }
+  },
+
+  /**
+   * Widget-Meta persistent speichern
+   * Bestehende Notes, Calculator, Timer bleiben erhalten
+   */
+  async save() {
+    const data = await Store.get(this.STORAGE_KEY) || {};
+    if (data.notes === undefined) data.notes = [];
+
+    // Positionen aus WidgetManager aktualisieren
+    const updated = this._images.map(img => {
+      const ws = WidgetManager.getState(img.id);
+      if (ws) {
+        img.x = ws.x;
+        img.y = ws.y;
+        img.width = ws.width;
+        img.height = ws.height;
+        img.open = ws.open;
+      }
+      return img;
+    });
+
+    data.imageRef = { images: updated };
+    await Store.set(this.STORAGE_KEY, data);
+  },
+
+  /**
+   * Debounced Save
+   */
+  _debouncedSave() {
+    clearTimeout(this._saveTimer);
+    this._saveTimer = setTimeout(() => this.save(), 500);
+  },
+
+  // ---- SESSION STORAGE (Bilddaten) ----
+
+  /**
+   * Bilddaten in sessionStorage speichern
+   */
+  _saveSession() {
+    try {
+      const sessionData = {};
+      this._images.forEach(img => {
+        const dataUrl = this._getSessionImage(img.id);
+        if (dataUrl) sessionData[img.id] = dataUrl;
+      });
+      sessionStorage.setItem(this.SESSION_KEY, JSON.stringify(sessionData));
+    } catch (e) {
+      console.warn('ImageRef: sessionStorage Write fehlgeschlagen', e);
+    }
+  },
+
+  /**
+   * Bilddaten aus sessionStorage laden
+   * @returns {Object} - { id: dataUrl, ... }
+   */
+  _loadSessionAll() {
+    try {
+      const raw = sessionStorage.getItem(this.SESSION_KEY);
+      if (!raw) return {};
+      return JSON.parse(raw);
+    } catch (e) {
+      console.warn('ImageRef: sessionStorage Read fehlgeschlagen', e);
+      return {};
+    }
+  },
+
+  /**
+   * Einzelnes Bild aus sessionStorage lesen
+   * @param {string} id
+   * @returns {string|null}
+   */
+  _getSessionImage(id) {
+    const all = this._loadSessionAll();
+    return all[id] || null;
+  },
+
+  /**
+   * Einzelnes Bild in sessionStorage setzen
+   * @param {string} id
+   * @param {string} dataUrl
+   */
+  _setSessionImage(id, dataUrl) {
+    try {
+      const all = this._loadSessionAll();
+      all[id] = dataUrl;
+      sessionStorage.setItem(this.SESSION_KEY, JSON.stringify(all));
+    } catch (e) {
+      console.warn('ImageRef: sessionStorage Write fehlgeschlagen', e);
+      HellionDialog.alert(
+        'Bild konnte nicht gespeichert werden. Der Browser-Speicher ist voll.',
+        { type: 'danger', title: 'Speicherfehler' }
+      );
+    }
+  },
+
+  /**
+   * Einzelnes Bild aus sessionStorage entfernen
+   * @param {string} id
+   */
+  _removeSessionImage(id) {
+    try {
+      const all = this._loadSessionAll();
+      delete all[id];
+      sessionStorage.setItem(this.SESSION_KEY, JSON.stringify(all));
+    } catch (e) {
+      console.warn('ImageRef: sessionStorage Remove fehlgeschlagen', e);
+    }
+  },
+
+  // ---- WIDGET LIFECYCLE ----
+
+  /**
+   * Neues Bild-Widget erstellen (oeffnet File-Dialog)
+   */
+  async create() {
+    if (!settings.imageRefEnabled) return;
+
+    if (this._images.length >= this.MAX_IMAGES) {
+      await HellionDialog.alert(
+        'Maximal ' + this.MAX_IMAGES + ' Bild-Widgets gleichzeitig. Schliesse eines um ein neues zu oeffnen.',
+        { type: 'warning', title: 'Limit erreicht' }
+      );
+      return;
+    }
+
+    // Freie ID finden
+    const usedIds = new Set(this._images.map(i => i.id));
+    let slotId = null;
+    for (let i = 0; i < this.MAX_IMAGES; i++) {
+      const candidate = 'image_' + i;
+      if (!usedIds.has(candidate)) {
+        slotId = candidate;
+        break;
+      }
+    }
+    if (!slotId) return;
+
+    // File-Dialog
+    const file = await this._pickFile();
+    if (!file) return;
+
+    // Bild verarbeiten
+    let dataUrl;
+    try {
+      dataUrl = await this._processFile(file);
+    } catch (err) {
+      await HellionDialog.alert(
+        'Bild konnte nicht geladen werden: ' + err.message,
+        { type: 'danger', title: 'Bildfehler' }
+      );
+      return;
+    }
+
+    // In sessionStorage speichern
+    this._setSessionImage(slotId, dataUrl);
+
+    // Meta erstellen
+    const imageData = {
+      id: slotId,
+      label: '',
+      x: 200 + (this._images.length * 40),
+      y: 120 + (this._images.length * 30),
+      width: 320,
+      height: 280,
+      open: true
+    };
+    this._images.push(imageData);
+
+    // Widget erstellen
+    this._createWidget(imageData, dataUrl);
+    await this.save();
+  },
+
+  /**
+   * Widget im DOM erstellen
+   * @param {Object} imageData
+   * @param {string|null} dataUrl
+   */
+  _createWidget(imageData, dataUrl) {
+    WidgetManager.create('image', {
+      id: imageData.id,
+      title: imageData.label || 'Bild-Referenz',
+      x: imageData.x,
+      y: imageData.y,
+      width: imageData.width,
+      height: imageData.height,
+      open: imageData.open !== false
+    });
+
+    const body = WidgetManager.getBody(imageData.id);
+    if (body) this.renderBody(imageData, body, dataUrl);
+  },
+
+  /**
+   * Widget geschlossen — Daten aufraeumen
+   * @param {string} id
+   */
+  async onClose(id) {
+    this._removeSessionImage(id);
+    this._images = this._images.filter(img => img.id !== id);
+    await this.save();
+  },
+
+  // ---- UI RENDERING ----
+
+  /**
+   * Widget-Body rendern
+   * @param {Object} imageData
+   * @param {HTMLElement} bodyEl
+   * @param {string|null} dataUrl
+   */
+  renderBody(imageData, bodyEl, dataUrl) {
+    bodyEl.textContent = '';
+    const container = document.createElement('div');
+    container.className = 'imgref-container';
+
+    if (dataUrl) {
+      // Bild anzeigen
+      const wrapper = document.createElement('div');
+      wrapper.className = 'imgref-img-wrapper';
+
+      const img = document.createElement('img');
+      img.className = 'imgref-img';
+      img.src = dataUrl;
+      img.alt = imageData.label || 'Bild-Referenz';
+      wrapper.appendChild(img);
+
+      // Bild ersetzen Button
+      const replaceBtn = document.createElement('button');
+      replaceBtn.className = 'imgref-replace-btn';
+      replaceBtn.type = 'button';
+      replaceBtn.textContent = 'Bild ersetzen';
+      replaceBtn.addEventListener('click', async () => {
+        const file = await this._pickFile();
+        if (!file) return;
+        try {
+          const newDataUrl = await this._processFile(file);
+          this._setSessionImage(imageData.id, newDataUrl);
+          this.renderBody(imageData, bodyEl, newDataUrl);
+        } catch (err) {
+          await HellionDialog.alert(
+            'Bild konnte nicht geladen werden: ' + err.message,
+            { type: 'danger', title: 'Bildfehler' }
+          );
+        }
+      });
+
+      container.append(wrapper, replaceBtn);
+    } else {
+      // Drop-Zone (kein Bild vorhanden)
+      const dropzone = this._createDropzone(imageData, bodyEl);
+      container.appendChild(dropzone);
+    }
+
+    // Label-Input
+    const label = document.createElement('input');
+    label.className = 'imgref-label';
+    label.type = 'text';
+    label.placeholder = 'Beschriftung (optional)';
+    label.maxLength = 100;
+    label.value = imageData.label || '';
+
+    label.addEventListener('input', () => {
+      const text = label.value.trim().slice(0, 100);
+      imageData.label = text;
+
+      // Widget-Titel aktualisieren
+      const entry = WidgetManager._widgets.get(imageData.id);
+      if (entry) {
+        const titleEl = entry.el.querySelector('.widget-title-text');
+        if (titleEl) titleEl.textContent = text || 'Bild-Referenz';
+        entry.state.title = text || 'Bild-Referenz';
+      }
+
+      this._debouncedSave();
+    });
+
+    container.appendChild(label);
+    bodyEl.appendChild(container);
+  },
+
+  /**
+   * Drop-Zone erstellen (fuer leere Widgets / neue Bilder)
+   * @param {Object} imageData
+   * @param {HTMLElement} bodyEl
+   * @returns {HTMLElement}
+   */
+  _createDropzone(imageData, bodyEl) {
+    const dropzone = document.createElement('div');
+    dropzone.className = 'imgref-dropzone';
+
+    const icon = document.createElement('div');
+    icon.className = 'imgref-dropzone-icon';
+    icon.textContent = '\uD83D\uDDBC\uFE0F';
+
+    const text = document.createElement('span');
+    text.textContent = 'Klicken oder Bild hierher ziehen';
+
+    dropzone.append(icon, text);
+
+    // Klick -> File-Dialog
+    dropzone.addEventListener('click', async () => {
+      const file = await this._pickFile();
+      if (!file) return;
+      try {
+        const dataUrl = await this._processFile(file);
+        this._setSessionImage(imageData.id, dataUrl);
+        this.renderBody(imageData, bodyEl, dataUrl);
+        await this.save();
+      } catch (err) {
+        await HellionDialog.alert(
+          'Bild konnte nicht geladen werden: ' + err.message,
+          { type: 'danger', title: 'Bildfehler' }
+        );
+      }
+    });
+
+    // Drag & Drop
+    dropzone.addEventListener('dragover', (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      dropzone.classList.add('dragover');
+    });
+
+    dropzone.addEventListener('dragleave', (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      dropzone.classList.remove('dragover');
+    });
+
+    dropzone.addEventListener('drop', async (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      dropzone.classList.remove('dragover');
+
+      const file = e.dataTransfer.files[0];
+      if (!file || !file.type.startsWith('image/')) {
+        await HellionDialog.alert(
+          'Bitte eine Bilddatei verwenden (PNG, JPG, WebP, etc.).',
+          { type: 'warning', title: 'Kein Bild' }
+        );
+        return;
+      }
+
+      try {
+        const dataUrl = await this._processFile(file);
+        this._setSessionImage(imageData.id, dataUrl);
+        this.renderBody(imageData, bodyEl, dataUrl);
+        await this.save();
+      } catch (err) {
+        await HellionDialog.alert(
+          'Bild konnte nicht geladen werden: ' + err.message,
+          { type: 'danger', title: 'Bildfehler' }
+        );
+      }
+    });
+
+    return dropzone;
+  },
+
+  // ---- FILE HANDLING ----
+
+  /**
+   * File-Dialog oeffnen
+   * @returns {Promise<File|null>}
+   */
+  _pickFile() {
+    return new Promise(resolve => {
+      const input = document.createElement('input');
+      input.type = 'file';
+      input.accept = 'image/*';
+      input.addEventListener('change', () => {
+        resolve(input.files[0] || null);
+      });
+      // Cancel erkennen
+      input.addEventListener('cancel', () => resolve(null));
+      input.click();
+    });
+  },
+
+  /**
+   * Bild per Canvas API zu WebP konvertieren
+   * @param {File} file
+   * @returns {Promise<string>} WebP DataURL
+   */
+  _processFile(file) {
+    return new Promise((resolve, reject) => {
+      const objectUrl = URL.createObjectURL(file);
+      const img = new Image();
+
+      img.onload = () => {
+        try {
+          const canvas = document.createElement('canvas');
+          canvas.width = img.width;
+          canvas.height = img.height;
+          const ctx = canvas.getContext('2d');
+          ctx.drawImage(img, 0, 0);
+          const webpUrl = canvas.toDataURL('image/webp', 0.85);
+          URL.revokeObjectURL(objectUrl);
+          resolve(webpUrl);
+        } catch (err) {
+          URL.revokeObjectURL(objectUrl);
+          reject(err);
+        }
+      };
+
+      img.onerror = () => {
+        URL.revokeObjectURL(objectUrl);
+        reject(new Error('Bild konnte nicht geladen werden'));
+      };
+
+      img.src = objectUrl;
+    });
+  },
+
+  // ---- INIT ----
+
+  /**
+   * ImageRef initialisieren (aus app.js aufgerufen)
+   */
+  async init() {
+    await this.load();
+
+    // Widgets wiederherstellen (nur wenn Feature aktiviert)
+    if (settings.imageRefEnabled && this._images.length > 0) {
+      const sessionData = this._loadSessionAll();
+
+      this._images.forEach(imageData => {
+        if (imageData.open !== false) {
+          const dataUrl = sessionData[imageData.id] || null;
+          this._createWidget(imageData, dataUrl);
+        }
+      });
+    }
+
+    // Close-Event abfangen
+    const self = this;
+    const prevClose = WidgetManager.close;
+    WidgetManager.close = function(id) {
+      prevClose.call(WidgetManager, id);
+      // Pruefen ob es ein Image-Widget ist
+      const isImage = self._images.some(img => img.id === id);
+      if (isImage) {
+        self.onClose(id);
+      }
+    };
+
+    // Minimize-Event abfangen
+    const prevMinimize = WidgetManager.minimize;
+    WidgetManager.minimize = async function(id) {
+      await prevMinimize.call(WidgetManager, id);
+      const isImage = self._images.some(img => img.id === id);
+      if (isImage) {
+        await self.save();
+      }
+    };
+
+    // Open-Event abfangen
+    const prevOpen = WidgetManager.openWidget;
+    WidgetManager.openWidget = async function(id) {
+      await prevOpen.call(WidgetManager, id);
+      const imgData = self._images.find(img => img.id === id);
+      if (imgData) {
+        const body = WidgetManager.getBody(id);
+        if (body && body.children.length === 0) {
+          const dataUrl = self._getSessionImage(id);
+          self.renderBody(imgData, body, dataUrl);
+        }
+        await self.save();
+      }
+    };
+  }
+};

src/js/notes.js

@@ -53,6 +53,9 @@ const Notes = {
     if (existing && existing.timer) {
       saveData.timer = existing.timer;
     }
+    if (existing && existing.imageRef) {
+      saveData.imageRef = existing.imageRef;
+    }
     await Store.set(this.STORAGE_KEY, saveData);
   },
 
@@ -527,6 +530,8 @@ const Notes = {
         Calculator.toggle();
       } else if (action === 'timer') {
         Timer.toggle();
+      } else if (action === 'image-ref') {
+        ImageRef.create();
       } else if (action === 'notebook') {
         this.openNotebook();
       }

src/js/settings.js

@@ -71,6 +71,13 @@ function applySettings() {
   const showSearchEl = document.getElementById('settingShowSearch');
   if (showSearchEl) showSearchEl.checked = settings.showSearch;
 
+  // Image-Ref Toggle
+  if (settings.imageRefEnabled === undefined) settings.imageRefEnabled = false;
+  const imgRefCheckbox = document.getElementById('settingImageRef');
+  if (imgRefCheckbox) imgRefCheckbox.checked = settings.imageRefEnabled;
+  const imgRefBtn = document.querySelector('[data-action="image-ref"]');
+  if (imgRefBtn) imgRefBtn.classList.toggle('hidden', !settings.imageRefEnabled);
+
   // Toolbar-Position
   document.body.classList.toggle('toolbar-left', settings.toolbarPos === 'left');
   const toolbarPosEl = document.getElementById('settingToolbarPos');
@@ -127,6 +134,11 @@ function bindSettingsEvents() {
     settingShowSearch: v => {
       settings.showSearch = v;
       document.getElementById('searchBarWrapper').classList.toggle('hidden', !v);
+    },
+    settingImageRef: v => {
+      settings.imageRefEnabled = v;
+      const imgBtn = document.querySelector('[data-action="image-ref"]');
+      if (imgBtn) imgBtn.classList.toggle('hidden', !v);
     }
   };
 
@@ -204,7 +216,8 @@ function bindSettingsEvents() {
     boards   = [];
     settings = { compact: false, shortenTitles: false, newTab: true, showDesc: false,
                  hideExtra: false, visibleCount: 10, bgUrl: '', theme: 'nebula',
-                 showSearch: true, searchEngine: 'google', toolbarPos: 'right' };
+                 showSearch: true, searchEngine: 'google', toolbarPos: 'right',
+                 imageRefEnabled: false };
     await saveBoards();
     await saveSettings();
     applySettings();

src/js/state.js

@@ -16,7 +16,8 @@ let settings = {
   theme:         'nebula',
   showSearch:    true,
   searchEngine:  'google',
-  toolbarPos:    'right'
+  toolbarPos:    'right',
+  imageRefEnabled: false
 };
 
 function uid() {