Feature: WYSIWYG-Editor, Gitea-Sync, Signaturen-Verwaltung

- WYSIWYG-Editor mit contenteditable statt Textarea (MDI-Icons, System-Fonts, Farbwähler)
- Gitea-Sync: Templates per Abteilung aus Git-Repo laden/hochladen mit Commit-Author
- Abteilungsordner + _gemeinsam Ordner, einzelnes Pull/Push pro Vorlage
- Sync-Status pro Vorlage (grün/rot/grau Ampel), persistent über Neustarts
- Signaturen-Tab: Identitäten bearbeiten, aus Datei laden, Sync über signatures/ Ordner
- Persönliche Signaturen für geteilte E-Mail-Adressen (pro Mitarbeiter)
- Tab-Navigation: Vorlagen, Signaturen, Synchronisierung
- Auto-Pull beim Thunderbird-Start (Templates + Signaturen)

background.js

@@ -1,5 +1,12 @@
-browser.runtime.onMessage.addListener(async msg => {
+browser.runtime.onMessage.addListener((msg, sender, sendResponse) => {
-  if (msg.action !== 'insertTemplate') return;
+  if (msg.action !== 'insertTemplate') return false;
+
+  handleInsertTemplate(msg).then(() => sendResponse())
+    .catch(err => sendResponse({ error: err.message }));
+  return true; // keep channel open for async response
+});
+
+async function handleInsertTemplate(msg) {
   try {
     const [tab] = await browser.tabs.query({
       active: true,
@@ -48,12 +55,6 @@ browser.runtime.onMessage.addListener(async msg => {
       await browser.compose.insertText(tab.id, htmlContent + '<br>', { insertAsText: false });
     }
 
-    await browser.notifications.create({
-      type: 'basic',
-      iconUrl: browser.runtime.getURL('icons/icon.png'),
-      title: 'Vorlage eingefügt',
-      message: 'Erfolgreich',
-    });
   } catch (e) {
     console.error('background.js error:', e);
 
@@ -75,13 +76,6 @@ browser.runtime.onMessage.addListener(async msg => {
           newBody = htmlTpl + '<br>' + old;
         }
         await browser.compose.setComposeDetails(tab.id, { body: newBody });
-
-        await browser.notifications.create({
-          type: 'basic',
-          iconUrl: browser.runtime.getURL('icons/icon.png'),
-          title: 'Vorlage eingefügt',
-          message: 'Erfolgreich (Fallback)',
-        });
       }
     } catch (e2) {
       console.error('background.js fallback error:', e2);
@@ -93,4 +87,4 @@ browser.runtime.onMessage.addListener(async msg => {
       });
     }
   }
-});
+}

lib/gitea-sync.js

@@ -0,0 +1,585 @@
+// lib/gitea-sync.js — Gitea Sync Engine
+
+const SYNC_CONFIG_KEY = 'gitea_config';
+const SYNC_STATE_KEY = 'sync_state';
+const TEMPLATE_STORAGE_KEY = 'message_templates';
+const SYNC_INTERVAL_MS = 15 * 60 * 1000; // 15 minutes
+const SHARED_FOLDER = '_gemeinsam';
+
+// ── Gitea API Client ──
+
+class GiteaClient {
+    constructor(config) {
+        this.baseUrl = config.baseUrl;
+        this.owner = config.owner;
+        this.repo = config.repo;
+        this.branch = config.branch || 'main';
+        this.token = config.token;
+        this.authorName = config.authorName || '';
+        this.authorEmail = config.authorEmail || '';
+    }
+
+    get apiBase() {
+        return `${this.baseUrl}/api/v1/repos/${this.owner}/${this.repo}`;
+    }
+
+    get headers() {
+        return {
+            'Authorization': `token ${this.token}`,
+            'Content-Type': 'application/json',
+            'Accept': 'application/json'
+        };
+    }
+
+    get authorInfo() {
+        if (!this.authorName) return {};
+        return {
+            author: {
+                name: this.authorName,
+                email: this.authorEmail || `${this.authorName.toLowerCase().replace(/\s+/g, '.')}@local`
+            }
+        };
+    }
+
+    static toBase64(str) {
+        return btoa(unescape(encodeURIComponent(str)));
+    }
+
+    static fromBase64(b64) {
+        return decodeURIComponent(escape(atob(b64)));
+    }
+
+    encodePath(p) {
+        return p.split('/').map(encodeURIComponent).join('/');
+    }
+
+    async apiError(method, filepath, res) {
+        let detail = '';
+        try { const body = await res.json(); detail = body.message || JSON.stringify(body); } catch(_) {}
+        throw new Error(`${method} ${filepath}: ${res.status} ${res.statusText}${detail ? ' — ' + detail : ''}`);
+    }
+
+    async getFile(filepath) {
+        const url = `${this.apiBase}/contents/${this.encodePath(filepath)}?ref=${this.branch}`;
+        const res = await fetch(url, { headers: this.headers });
+        if (res.status === 404) return null;
+        if (!res.ok) await this.apiError('GET', filepath, res);
+        return res.json();
+    }
+
+    async createFile(filepath, content, message) {
+        const url = `${this.apiBase}/contents/${this.encodePath(filepath)}`;
+        const res = await fetch(url, {
+            method: 'POST',
+            headers: this.headers,
+            body: JSON.stringify({
+                content: GiteaClient.toBase64(content),
+                message: message || `Add ${filepath}`,
+                branch: this.branch,
+                ...this.authorInfo
+            })
+        });
+        if (!res.ok) await this.apiError('POST', filepath, res);
+        return res.json();
+    }
+
+    async updateFile(filepath, content, sha, message) {
+        const url = `${this.apiBase}/contents/${this.encodePath(filepath)}`;
+        const res = await fetch(url, {
+            method: 'PUT',
+            headers: this.headers,
+            body: JSON.stringify({
+                content: GiteaClient.toBase64(content),
+                sha,
+                message: message || `Update ${filepath}`,
+                branch: this.branch,
+                ...this.authorInfo
+            })
+        });
+        if (!res.ok) await this.apiError('PUT', filepath, res);
+        return res.json();
+    }
+
+    async deleteFile(filepath, sha, message) {
+        const url = `${this.apiBase}/contents/${this.encodePath(filepath)}`;
+        const res = await fetch(url, {
+            method: 'DELETE',
+            headers: this.headers,
+            body: JSON.stringify({
+                sha,
+                message: message || `Delete ${filepath}`,
+                branch: this.branch,
+                ...this.authorInfo
+            })
+        });
+        if (!res.ok) await this.apiError('DELETE', filepath, res);
+        return res.json();
+    }
+
+    async listDir(dirpath) {
+        const pathPart = dirpath ? `/${this.encodePath(dirpath)}` : '';
+        const url = `${this.apiBase}/contents${pathPart}?ref=${this.branch}`;
+        const res = await fetch(url, { headers: this.headers });
+        if (res.status === 404) return [];
+        if (!res.ok) await this.apiError('LIST', dirpath, res);
+        const result = await res.json();
+        return Array.isArray(result) ? result : [];
+    }
+
+    async testConnection() {
+        const url = `${this.baseUrl}/api/v1/repos/${this.owner}/${this.repo}`;
+        const res = await fetch(url, { headers: this.headers });
+        if (!res.ok) throw new Error(`${res.status} ${res.statusText}`);
+        return res.json();
+    }
+}
+
+// ── Sync Manager ──
+
+class SyncManager {
+    constructor() {
+        this.client = null;
+        this.config = null;
+    }
+
+    async init() {
+        const result = await browser.storage.local.get(SYNC_CONFIG_KEY);
+        this.config = result[SYNC_CONFIG_KEY];
+        if (!this.config || !this.config.baseUrl || !this.config.token) {
+            this.client = null;
+            return false;
+        }
+        this.client = new GiteaClient(this.config);
+        return true;
+    }
+
+    get isConfigured() {
+        return this.client !== null;
+    }
+
+    get department() {
+        return this.config?.department || '';
+    }
+
+    async getSyncState() {
+        const result = await browser.storage.local.get(SYNC_STATE_KEY);
+        return result[SYNC_STATE_KEY] || { fileShas: {} };
+    }
+
+    async saveSyncState(state) {
+        await browser.storage.local.set({ [SYNC_STATE_KEY]: state });
+    }
+
+    async getLocalTemplates() {
+        const result = await browser.storage.local.get(TEMPLATE_STORAGE_KEY);
+        return result[TEMPLATE_STORAGE_KEY] || [];
+    }
+
+    async saveLocalTemplates(templates) {
+        await browser.storage.local.set({ [TEMPLATE_STORAGE_KEY]: templates });
+    }
+
+    static toFilename(name) {
+        return name
+            .toLowerCase()
+            .replace(/[äÄ]/g, 'ae')
+            .replace(/[öÖ]/g, 'oe')
+            .replace(/[üÜ]/g, 'ue')
+            .replace(/ß/g, 'ss')
+            .replace(/[^a-z0-9]+/g, '-')
+            .replace(/^-+|-+$/g, '');
+    }
+
+    /**
+     * List all top-level directories in the repo (= available departments)
+     */
+    async listDepartments() {
+        if (!this.isConfigured) throw new Error('Sync nicht konfiguriert');
+
+        const entries = await this.client.listDir('');
+        const departments = [];
+        for (const entry of entries) {
+            if (entry.type === 'dir' && entry.name !== SHARED_FOLDER && entry.name !== 'signatures' && !entry.name.startsWith('.')) {
+                departments.push(entry.name);
+            }
+        }
+        return { success: true, departments };
+    }
+
+    /**
+     * Pull templates from repo: department folder + shared folder
+     */
+    async pullTemplates() {
+        if (!this.isConfigured) throw new Error('Sync nicht konfiguriert');
+        if (!this.department) throw new Error('Keine Abteilung ausgewählt');
+
+        const syncState = await this.getSyncState();
+        const newTemplates = [];
+        const newShas = {};
+        let updated = 0;
+
+        // Load from both folders
+        const folders = [SHARED_FOLDER, this.department];
+
+        for (const folder of folders) {
+            const files = await this.client.listDir(folder);
+            for (const file of files) {
+                if (!file.name.endsWith('.html')) continue;
+
+                const fileData = await this.client.getFile(file.path);
+                if (!fileData) continue;
+
+                const content = GiteaClient.fromBase64(fileData.content);
+                const templateName = file.name.replace('.html', '');
+
+                newTemplates.push({
+                    id: `${folder}/${file.name}`,
+                    name: templateName,
+                    content: content,
+                    folder: folder,
+                    remotePath: file.path
+                });
+
+                newShas[file.path] = fileData.sha;
+                updated++;
+            }
+        }
+
+        await this.saveLocalTemplates(newTemplates);
+        syncState.fileShas = newShas;
+        await this.saveSyncState(syncState);
+
+        return { success: true, updated };
+    }
+
+    /**
+     * Push local templates back to repo (explicit, with commit author)
+     */
+    async pushTemplates() {
+        if (!this.isConfigured) throw new Error('Sync nicht konfiguriert');
+        if (!this.department) throw new Error('Keine Abteilung ausgewählt');
+        if (!this.config.authorName) throw new Error('Bitte Name eintragen (für Commit-Zuordnung)');
+
+        const templates = await this.getLocalTemplates();
+        const syncState = await this.getSyncState();
+
+        // Group templates by folder
+        const byFolder = {};
+        for (const t of templates) {
+            const folder = t.folder || this.department;
+            if (!byFolder[folder]) byFolder[folder] = [];
+            byFolder[folder].push(t);
+        }
+
+        let pushed = 0;
+
+        // Only push to folders the user has templates in
+        const allowedFolders = [SHARED_FOLDER, this.department];
+
+        for (const folder of allowedFolders) {
+            const localInFolder = byFolder[folder] || [];
+            const remoteFiles = await this.client.listDir(folder);
+            const remoteByName = {};
+            for (const rf of remoteFiles) {
+                if (rf.name.endsWith('.html')) {
+                    remoteByName[rf.name] = rf;
+                }
+            }
+
+            // Push each local template
+            for (const template of localInFolder) {
+                const filename = (SyncManager.toFilename(template.name) || template.id) + '.html';
+                const filepath = `${folder}/${filename}`;
+                const commitMsg = `${template.name} - bearbeitet von ${this.config.authorName}`;
+
+                const existing = await this.client.getFile(filepath);
+
+                if (existing) {
+                    const existingContent = GiteaClient.fromBase64(existing.content);
+                    if (existingContent !== template.content) {
+                        await this.client.updateFile(filepath, template.content, existing.sha, commitMsg);
+                        pushed++;
+                    }
+                } else {
+                    await this.client.createFile(filepath, template.content, commitMsg);
+                    pushed++;
+                }
+            }
+
+            // Delete remote files that were removed locally
+            const localNames = new Set(localInFolder.map(t =>
+                (SyncManager.toFilename(t.name) || t.id) + '.html'
+            ));
+            for (const [name, rf] of Object.entries(remoteByName)) {
+                if (!localNames.has(name)) {
+                    const fileData = await this.client.getFile(rf.path || `${folder}/${name}`);
+                    if (fileData) {
+                        const commitMsg = `${name} gelöscht von ${this.config.authorName}`;
+                        await this.client.deleteFile(fileData.path || `${folder}/${name}`, fileData.sha, commitMsg);
+                        pushed++;
+                    }
+                }
+            }
+        }
+
+        // Re-pull to get fresh SHAs
+        await this.pullTemplates();
+
+        return { success: true, pushed };
+    }
+
+    /**
+     * Pull signatures from repo signatures/ folder and apply to matching Thunderbird identities
+     * Filename = email address (e.g. info@hotel.de.html)
+     */
+    /**
+     * Get the personal filename slug from author name
+     */
+    get authorSlug() {
+        return SyncManager.toFilename(this.config.authorName || '');
+    }
+
+    /**
+     * Pull signatures from repo.
+     * For each identity: if personal sig enabled AND personal file exists → use it.
+     * Otherwise use the shared file (email.html).
+     */
+    async pullSignatures() {
+        if (!this.isConfigured) throw new Error('Sync nicht konfiguriert');
+
+        const files = await this.client.listDir('signatures');
+        if (files.length === 0) {
+            return { success: true, updated: 0 };
+        }
+
+        // Build lookup: filename → file entry
+        const fileMap = {};
+        for (const f of files) {
+            if (f.name.endsWith('.html')) {
+                fileMap[f.name.toLowerCase()] = f;
+            }
+        }
+
+        // Get personal email list
+        const personalResult = await browser.storage.local.get('sig_personal_emails');
+        const personalEmails = new Set((personalResult.sig_personal_emails || []).map(e => e.toLowerCase()));
+
+        // Get all Thunderbird identities
+        const accounts = await browser.accounts.list();
+        let updated = 0;
+
+        for (const account of accounts) {
+            const identities = await browser.identities.list(account.id);
+            for (const identity of identities) {
+                const email = identity.email.toLowerCase();
+                const isPersonal = personalEmails.has(email);
+
+                let targetFile = null;
+
+                if (isPersonal && this.authorSlug) {
+                    // Try personal file first: email.authorslug.html
+                    const personalName = `${email}.${this.authorSlug}.html`;
+                    targetFile = fileMap[personalName] || null;
+                }
+
+                // Fall back to shared file: email.html
+                if (!targetFile) {
+                    targetFile = fileMap[`${email}.html`] || null;
+                }
+
+                if (!targetFile) continue;
+
+                const fileData = await this.client.getFile(targetFile.path);
+                if (!fileData) continue;
+
+                const signature = GiteaClient.fromBase64(fileData.content);
+                await browser.identities.update(identity.id, {
+                    signature: signature,
+                    signatureIsPlainText: false
+                });
+                updated++;
+            }
+        }
+
+        return { success: true, updated };
+    }
+
+    /**
+     * Push signatures to repo.
+     * Personal: saves as email.authorslug.html
+     * Shared: saves as email.html
+     */
+    async pushSignatures() {
+        if (!this.isConfigured) throw new Error('Sync nicht konfiguriert');
+        if (!this.config.authorName) throw new Error('Bitte Name eintragen (für Commit-Zuordnung)');
+
+        const personalResult = await browser.storage.local.get('sig_personal_emails');
+        const personalEmails = new Set((personalResult.sig_personal_emails || []).map(e => e.toLowerCase()));
+
+        const accounts = await browser.accounts.list();
+        let pushed = 0;
+
+        for (const account of accounts) {
+            const identities = await browser.identities.list(account.id);
+            for (const identity of identities) {
+                if (!identity.signature) continue;
+
+                const email = identity.email.toLowerCase();
+                const isPersonal = personalEmails.has(email);
+
+                let filename;
+                if (isPersonal && this.authorSlug) {
+                    filename = `${email}.${this.authorSlug}.html`;
+                } else {
+                    filename = `${email}.html`;
+                }
+
+                const filepath = `signatures/${filename}`;
+                const label = isPersonal ? `(persönlich)` : `(gemeinsam)`;
+                const commitMsg = `Signatur ${identity.email} ${label} - von ${this.config.authorName}`;
+
+                const existing = await this.client.getFile(filepath);
+
+                if (existing) {
+                    const existingContent = GiteaClient.fromBase64(existing.content);
+                    if (existingContent !== identity.signature) {
+                        await this.client.updateFile(filepath, identity.signature, existing.sha, commitMsg);
+                        pushed++;
+                    }
+                } else {
+                    await this.client.createFile(filepath, identity.signature, commitMsg);
+                    pushed++;
+                }
+            }
+        }
+
+        return { success: true, pushed };
+    }
+
+    /**
+     * Pull a single template by its remote path
+     */
+    async pullSingleTemplate(remotePath) {
+        if (!this.isConfigured) throw new Error('Sync nicht konfiguriert');
+
+        const fileData = await this.client.getFile(remotePath);
+        if (!fileData) throw new Error('Datei nicht im Repository gefunden');
+
+        const content = GiteaClient.fromBase64(fileData.content);
+        return { success: true, content };
+    }
+
+    /**
+     * Push a single template by ID
+     */
+    async pushSingleTemplate(templateId) {
+        if (!this.isConfigured) throw new Error('Sync nicht konfiguriert');
+        if (!this.config.authorName) throw new Error('Bitte Name eintragen (für Commit-Zuordnung)');
+
+        const templates = await this.getLocalTemplates();
+        const template = templates.find(t => t.id === templateId);
+        if (!template) throw new Error('Vorlage nicht gefunden');
+
+        const folder = template.folder || this.department;
+        if (!folder) throw new Error('Keine Abteilung ausgewählt');
+
+        const filename = (SyncManager.toFilename(template.name) || template.id) + '.html';
+        const filepath = `${folder}/${filename}`;
+        const commitMsg = `${template.name} - bearbeitet von ${this.config.authorName}`;
+
+        const existing = await this.client.getFile(filepath);
+
+        if (existing) {
+            const existingContent = GiteaClient.fromBase64(existing.content);
+            if (existingContent !== template.content) {
+                await this.client.updateFile(filepath, template.content, existing.sha, commitMsg);
+            }
+        } else {
+            await this.client.createFile(filepath, template.content, commitMsg);
+        }
+
+        return { success: true };
+    }
+
+    async testConnection() {
+        if (!this.isConfigured) throw new Error('Sync nicht konfiguriert');
+        const repoInfo = await this.client.testConnection();
+        return { success: true, repoName: repoInfo.full_name };
+    }
+}
+
+// ── Global sync manager instance ──
+
+const syncManager = new SyncManager();
+
+// ── Background message handler for sync ──
+
+browser.runtime.onMessage.addListener(async (msg, sender) => {
+    const syncActions = ['testConnection', 'pullTemplates', 'pushTemplates', 'pullSingleTemplate', 'pushSingleTemplate', 'listDepartments', 'pullSignatures', 'pushSignatures'];
+    if (!syncActions.includes(msg.action)) return;
+
+    try {
+        const initialized = await syncManager.init();
+        if (!initialized && msg.action !== 'testConnection') {
+            return { success: false, error: 'Sync nicht konfiguriert. Bitte Verbindung einrichten.' };
+        }
+
+        switch (msg.action) {
+            case 'testConnection':
+                // Init with provided config for testing before save
+                if (!initialized) return { success: false, error: 'Sync nicht konfiguriert.' };
+                return await syncManager.testConnection();
+
+            case 'listDepartments':
+                return await syncManager.listDepartments();
+
+            case 'pullTemplates':
+                return await syncManager.pullTemplates();
+
+            case 'pushTemplates':
+                return await syncManager.pushTemplates();
+
+            case 'pullSingleTemplate':
+                return await syncManager.pullSingleTemplate(msg.remotePath);
+
+            case 'pushSingleTemplate':
+                return await syncManager.pushSingleTemplate(msg.templateId);
+
+            case 'pullSignatures':
+                return await syncManager.pullSignatures();
+
+            case 'pushSignatures':
+                return await syncManager.pushSignatures();
+
+            default:
+                return { success: false, error: 'Unbekannte Aktion' };
+        }
+    } catch (err) {
+        console.error('Sync error:', err);
+        return { success: false, error: err.message };
+    }
+});
+
+// ── Auto-sync on startup (pull only) ──
+
+async function autoSync() {
+    try {
+        const initialized = await syncManager.init();
+        if (!initialized) return;
+
+        if (syncManager.department) {
+            console.log('[Sync] Auto-pull Vorlagen gestartet...');
+            const result = await syncManager.pullTemplates();
+            console.log('[Sync] Auto-pull Vorlagen abgeschlossen:', result);
+        }
+
+        console.log('[Sync] Auto-pull Signaturen gestartet...');
+        const sigResult = await syncManager.pullSignatures();
+        console.log('[Sync] Auto-pull Signaturen abgeschlossen:', sigResult);
+    } catch (err) {
+        console.error('[Sync] Auto-pull fehlgeschlagen:', err);
+    }
+}
+
+autoSync();
+setInterval(autoSync, SYNC_INTERVAL_MS);

lib/mdi/mdi-editor.css

@@ -0,0 +1,28 @@
+@font-face {
+    font-family: "Material Design Icons";
+    src: url("materialdesignicons-webfont.woff2") format("woff2");
+    font-weight: normal;
+    font-style: normal;
+}
+
+.mdi {
+    display: inline-block;
+    font: normal normal normal 18px/1 "Material Design Icons";
+    text-rendering: auto;
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+}
+
+.mdi-format-bold::before { content: "\F0264"; }
+.mdi-format-italic::before { content: "\F0277"; }
+.mdi-format-underline::before { content: "\F0287"; }
+.mdi-format-strikethrough::before { content: "\F0280"; }
+.mdi-format-color-text::before { content: "\F069E"; }
+.mdi-format-color-highlight::before { content: "\F0E31"; }
+.mdi-format-list-numbered::before { content: "\F027B"; }
+.mdi-format-list-bulleted::before { content: "\F0279"; }
+.mdi-format-align-left::before { content: "\F0262"; }
+.mdi-format-align-center::before { content: "\F0260"; }
+.mdi-format-align-right::before { content: "\F0263"; }
+.mdi-link::before { content: "\F0337"; }
+.mdi-format-clear::before { content: "\F0265"; }

manifest.json

@@ -13,10 +13,16 @@
     "compose",
     "storage",
     "notifications",
-    "tabs"
+    "tabs",
+    "accountsRead",
+    "accountsIdentities"
+  ],
+  "optional_permissions": [
+    "*://*/*"
   ],
   "background": {
-    "scripts": ["background.js"]
+    "scripts": ["lib/gitea-sync.js", "background.js"],
+    "persistent": true
   },
   "compose_action": {
     "default_icon": {

popup.html

@@ -59,6 +59,26 @@
       color: #4a7c59;
       text-decoration: underline;
     }
+    .prefix-section {
+      padding: 8px 10px;
+      border-bottom: 1px solid #e0e0e0;
+      background: #f3f3f3;
+    }
+    .prefix-section label {
+      display: block;
+      font-size: 11px;
+      color: #666;
+      margin-bottom: 4px;
+    }
+    .prefix-section select {
+      width: 100%;
+      padding: 5px 8px;
+      font-size: 12px;
+      border: 1px solid #ccc;
+      border-radius: 4px;
+      background: white;
+      color: #333;
+    }
     .empty-state {
       padding: 20px 14px;
       text-align: center;
@@ -75,6 +95,12 @@
 </head>
 <body>
   <div class="header">Vorlage auswählen</div>
+  <div id="prefix-section" class="prefix-section" style="display:none;">
+    <label for="prefix-select">Voranstellung (optional)</label>
+    <select id="prefix-select">
+      <option value="">— Keine —</option>
+    </select>
+  </div>
   <div id="template-list"></div>
   <script src="popup.js"></script>
 </body>

popup.js

@@ -13,9 +13,17 @@ async function getTemplates() {
 }
 
 function insertTemplateAndClose(templateText) {
+    // Check if a prefix template is selected
+    const prefixSelect = document.getElementById('prefix-select');
+    const prefixContent = prefixSelect ? prefixSelect.value : '';
+
+    const combinedText = prefixContent
+        ? prefixContent + '<br>' + templateText
+        : templateText;
+
     browser.runtime.sendMessage({
         action: 'insertTemplate',
-        text: templateText
+        text: combinedText
     }).catch(e => console.error("Error sending message to background:", e));
     window.close();
 }
@@ -39,6 +47,34 @@ async function renderPopupButtons() {
         return;
     }
 
+    // Populate prefix dropdown
+    const prefixSection = document.getElementById('prefix-section');
+    const prefixSelect = document.getElementById('prefix-select');
+    if (templates.length > 1) {
+        prefixSection.style.display = '';
+        templates.forEach(template => {
+            const option = document.createElement('option');
+            option.value = template.content;
+            option.textContent = template.name;
+            option.dataset.name = template.name;
+            prefixSelect.appendChild(option);
+        });
+
+        // Restore last selection
+        const saved = await browser.storage.local.get('last_prefix');
+        if (saved.last_prefix) {
+            const match = [...prefixSelect.options].find(o => o.dataset.name === saved.last_prefix);
+            if (match) prefixSelect.value = match.value;
+        }
+
+        // Save selection on change
+        prefixSelect.addEventListener('change', () => {
+            const selected = prefixSelect.selectedOptions[0];
+            const name = selected?.dataset?.name || '';
+            browser.storage.local.set({ last_prefix: name });
+        });
+    }
+
     templates.forEach(template => {
         const button = document.createElement('button');
         button.textContent = template.name;

templates_options/templates_options.html

@@ -3,6 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <title>Vorlagen verwalten</title>
+    <link rel="stylesheet" href="../lib/mdi/mdi-editor.css">
     <style>
         * { box-sizing: border-box; margin: 0; padding: 0; }
 
@@ -32,6 +33,38 @@
             margin-bottom: 12px;
         }
 
+        /* Tabs */
+        .tab-bar {
+            display: flex;
+            gap: 0;
+            margin-bottom: 24px;
+            border-bottom: 2px solid #e0e0e0;
+        }
+
+        .tab-btn {
+            padding: 10px 20px;
+            border: none;
+            background: none;
+            font-size: 14px;
+            font-weight: 500;
+            color: #777;
+            cursor: pointer;
+            border-bottom: 2px solid transparent;
+            margin-bottom: -2px;
+            transition: color 0.15s, border-color 0.15s;
+        }
+
+        .tab-btn:hover { color: #4a7c59; }
+
+        .tab-btn.active {
+            color: #4a7c59;
+            border-bottom-color: #4a7c59;
+            font-weight: 600;
+        }
+
+        .tab-content { display: none; }
+        .tab-content.active { display: block; }
+
         /* Cards */
         .card {
             background: white;
@@ -64,7 +97,7 @@
             margin-bottom: 4px;
         }
 
-        input[type="text"], textarea {
+        input[type="text"], input[type="password"], textarea {
             width: 100%;
             padding: 8px 10px;
             border: 1px solid #d0d0d0;
@@ -75,22 +108,166 @@
             transition: border-color 0.15s;
         }
 
-        input[type="text"]:focus, textarea:focus {
+        input[type="text"]:focus, input[type="password"]:focus, textarea:focus {
             outline: none;
             border-color: #4a7c59;
             box-shadow: 0 0 0 2px rgba(74, 124, 89, 0.15);
         }
 
-        textarea {
-            resize: vertical;
-            min-height: 120px;
-        }
-
         input[type="file"] {
             font-size: 13px;
             margin-bottom: 10px;
         }
 
+        /* Editor */
+        .editor-toolbar {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 2px;
+            padding: 6px 8px;
+            background: #fafafa;
+            border: 1px solid #d0d0d0;
+            border-bottom: none;
+            border-radius: 6px 6px 0 0;
+        }
+
+        .editor-toolbar button {
+            padding: 4px 8px;
+            border: 1px solid transparent;
+            border-radius: 4px;
+            background: none;
+            cursor: pointer;
+            font-size: 13px;
+            color: #555;
+            transition: background 0.1s, border-color 0.1s;
+            line-height: 1.4;
+        }
+
+        .editor-toolbar button:hover {
+            background: #e8f0eb;
+            border-color: #c0d4c7;
+        }
+
+        .editor-toolbar .sep {
+            width: 1px;
+            background: #ddd;
+            margin: 2px 4px;
+        }
+
+        .editor-toolbar select {
+            padding: 3px 6px;
+            border: 1px solid #d0d0d0;
+            border-radius: 4px;
+            font-size: 12px;
+            background: white;
+            cursor: pointer;
+            color: #555;
+        }
+
+        .font-combo {
+            position: relative;
+            display: inline-block;
+        }
+
+        .font-combo input {
+            width: 140px;
+            padding: 3px 6px;
+            border: 1px solid #d0d0d0;
+            border-radius: 4px;
+            font-size: 12px;
+            color: #555;
+            background: white;
+        }
+
+        .font-combo input:focus {
+            outline: none;
+            border-color: #4a7c59;
+        }
+
+        .font-dropdown {
+            display: none;
+            position: absolute;
+            top: 100%;
+            left: 0;
+            width: 200px;
+            max-height: 200px;
+            overflow-y: auto;
+            background: white;
+            border: 1px solid #d0d0d0;
+            border-radius: 4px;
+            box-shadow: 0 4px 12px rgba(0,0,0,0.12);
+            z-index: 100;
+        }
+
+        .font-dropdown.open { display: block; }
+
+        .font-option {
+            padding: 5px 8px;
+            font-size: 12px;
+            cursor: pointer;
+            color: #333;
+        }
+
+        .font-option:hover, .font-option.active {
+            background: #e8f0eb;
+            color: #4a7c59;
+        }
+
+        #editor-area {
+            width: 100%;
+            min-height: 220px;
+            max-height: 500px;
+            overflow-y: auto;
+            border: 1px solid #d0d0d0;
+            border-radius: 0 0 6px 6px;
+            background: white;
+            padding: 10px 12px;
+            outline: none;
+            font-family: "Segoe UI", Verdana, sans-serif;
+            font-size: 13px;
+            color: #333;
+        }
+
+        #editor-area:focus {
+            border-color: #4a7c59;
+            box-shadow: 0 0 0 2px rgba(74, 124, 89, 0.15);
+        }
+
+        #editor-area:empty::before {
+            content: "Sehr geehrte/r ...";
+            color: #aaa;
+        }
+
+        #editor-area ul, #editor-area ol {
+            padding-left: 24px;
+            margin-left: 8px;
+        }
+
+        /* Sync indicator dot */
+        .sync-dot {
+            display: inline-block;
+            width: 10px;
+            height: 10px;
+            border-radius: 50%;
+            margin-right: 6px;
+            vertical-align: middle;
+        }
+        .sync-dot.in-sync { background: #4caf50; }
+        .sync-dot.out-of-sync { background: #f44336; }
+        .sync-dot.unknown { background: #bbb; }
+
+        .sync-indicator {
+            display: flex;
+            align-items: center;
+            font-size: 12px;
+            color: #777;
+            margin-bottom: 12px;
+        }
+
+        .editor-wrapper {
+            margin-bottom: 10px;
+        }
+
         /* Buttons */
         .btn {
             display: inline-block;
@@ -170,6 +347,26 @@
             transition: background 0.1s, border-color 0.1s;
         }
 
+        .template-actions .push-btn,
+        .template-actions .pull-btn {
+            font-weight: bold;
+            font-size: 14px;
+        }
+        .template-actions .push-btn {
+            color: #4a7c59;
+        }
+        .template-actions .push-btn:hover {
+            background: #e8f0eb;
+            border-color: #4a7c59;
+        }
+        .template-actions .pull-btn {
+            color: #2874a6;
+        }
+        .template-actions .pull-btn:hover {
+            background: #e8f0fb;
+            border-color: #2874a6;
+        }
+
         .template-actions .edit-btn:hover {
             background: #e8f0eb;
             border-color: #4a7c59;
@@ -203,44 +400,297 @@
             font-weight: 500;
             display: none;
         }
+
+        /* Sync settings */
+        .sync-status {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            padding: 10px 14px;
+            border-radius: 6px;
+            font-size: 13px;
+            margin-bottom: 16px;
+        }
+
+        .sync-status.connected {
+            background: #e8f5e9;
+            color: #2e7d32;
+        }
+
+        .sync-status.disconnected {
+            background: #fff3e0;
+            color: #e65100;
+        }
+
+        .sync-status.error {
+            background: #ffebee;
+            color: #c62828;
+        }
+
+        .form-group { margin-bottom: 12px; }
+        .form-group label { margin-bottom: 4px; }
+
+        .form-row {
+            display: flex;
+            gap: 12px;
+        }
+
+        .form-row .form-group { flex: 1; }
+
+        .sync-actions {
+            display: flex;
+            gap: 8px;
+            align-items: center;
+            margin-top: 16px;
+        }
+
+        #sync-log {
+            margin-top: 12px;
+            font-size: 12px;
+            color: #777;
+            max-height: 120px;
+            overflow-y: auto;
+            font-family: monospace;
+            background: #fafafa;
+            padding: 8px 10px;
+            border-radius: 6px;
+            border: 1px solid #e0e0e0;
+            display: none;
+        }
     </style>
 </head>
 <body>
 
     <h2>Vorlagen verwalten</h2>
 
-    <!-- Import Section -->
+    <!-- Tab Navigation -->
-    <div class="card">
+    <div class="tab-bar">
-        <div class="card-title">HTML-Dateien importieren</div>
+        <button class="tab-btn active" data-tab="templates">Vorlagen</button>
-        <div class="card-desc">Wähle eine oder mehrere .html Dateien aus (z.B. vom Netzlaufwerk).<br>Dateiname = Vorlagen-Name. Bestehende Vorlagen mit gleichem Namen werden überschrieben.</div>
+        <button class="tab-btn" data-tab="signatures">Signaturen</button>
-        <input type="file" id="import-files" accept=".html,.htm" multiple>
+        <button class="tab-btn" data-tab="sync">Synchronisierung</button>
-        <br>
-        <button type="button" class="btn btn-primary" id="import-button">Importieren</button>
-        <span id="import-status" class="status-badge"></span>
     </div>
 
-    <!-- Add/Edit Section -->
+    <!-- Tab: Vorlagen -->
-    <div class="card">
+    <div id="tab-templates" class="tab-content active">
-        <div class="card-title" id="form-legend">Neue Vorlage erstellen</div>
+
-        <form id="template-form">
+        <!-- Import Section -->
-            <input type="hidden" id="template-id">
+        <div class="card">
-            <label for="template-name">Titel</label>
+            <div class="card-title">HTML-Dateien importieren</div>
-            <input type="text" id="template-name" required placeholder="z.B. Buchungsbestätigung">
+            <div class="card-desc">Wähle eine oder mehrere .html Dateien aus (z.B. vom Netzlaufwerk).<br>Dateiname = Vorlagen-Name. Bestehende Vorlagen mit gleichem Namen werden überschrieben.</div>
-            <label for="template-content">Inhalt (HTML)</label>
+            <input type="file" id="import-files" accept=".html,.htm" multiple>
-            <textarea id="template-content" required placeholder="<p>Sehr geehrte/r ...</p>"></textarea>
+            <br>
-            <button type="submit" class="btn btn-primary" id="save-button">Speichern</button>
+            <button type="button" class="btn btn-primary" id="import-button">Importieren</button>
-            <button type="button" class="btn btn-secondary" id="cancel-edit" style="display: none;">Abbrechen</button>
+            <span id="import-status" class="status-badge"></span>
-        </form>
+        </div>
+
+        <!-- Add/Edit Section -->
+        <div class="card">
+            <div class="card-title" id="form-legend">Neue Vorlage erstellen</div>
+            <form id="template-form">
+                <input type="hidden" id="template-id">
+                <label for="template-name">Titel</label>
+                <input type="text" id="template-name" required placeholder="z.B. Buchungsbestätigung">
+
+                <label>Inhalt</label>
+                <div class="editor-wrapper">
+                    <div class="editor-toolbar">
+                        <button type="button" data-cmd="bold" title="Fett"><span class="mdi mdi-format-bold"></span></button>
+                        <button type="button" data-cmd="italic" title="Kursiv"><span class="mdi mdi-format-italic"></span></button>
+                        <button type="button" data-cmd="underline" title="Unterstrichen"><span class="mdi mdi-format-underline"></span></button>
+                        <button type="button" data-cmd="strikeThrough" title="Durchgestrichen"><span class="mdi mdi-format-strikethrough"></span></button>
+                        <div class="sep"></div>
+                        <select data-cmd="fontSize" title="Schriftgröße">
+                            <option value="">Größe</option>
+                            <option value="1">Klein</option>
+                            <option value="2">Normal</option>
+                            <option value="3">Mittel</option>
+                            <option value="4">Groß</option>
+                            <option value="5">Sehr groß</option>
+                        </select>
+                        <div class="font-combo" id="font-combo">
+                            <input type="text" id="font-input" title="Schriftart" placeholder="Schriftart" autocomplete="off">
+                            <div class="font-dropdown" id="font-dropdown"></div>
+                        </div>
+                        <div class="sep"></div>
+                        <button type="button" data-cmd="foreColor" data-val="ask" title="Textfarbe"><span class="mdi mdi-format-color-text"></span></button>
+                        <button type="button" data-cmd="hiliteColor" data-val="ask" title="Hintergrundfarbe"><span class="mdi mdi-format-color-highlight"></span></button>
+                        <div class="sep"></div>
+                        <button type="button" data-cmd="insertOrderedList" title="Nummerierte Liste"><span class="mdi mdi-format-list-numbered"></span></button>
+                        <button type="button" data-cmd="insertUnorderedList" title="Aufzählung"><span class="mdi mdi-format-list-bulleted"></span></button>
+                        <div class="sep"></div>
+                        <button type="button" data-cmd="justifyLeft" title="Links ausrichten"><span class="mdi mdi-format-align-left"></span></button>
+                        <button type="button" data-cmd="justifyCenter" title="Zentrieren"><span class="mdi mdi-format-align-center"></span></button>
+                        <button type="button" data-cmd="justifyRight" title="Rechts ausrichten"><span class="mdi mdi-format-align-right"></span></button>
+                        <div class="sep"></div>
+                        <button type="button" data-cmd="createLink" data-val="ask" title="Link einfügen"><span class="mdi mdi-link"></span></button>
+                        <button type="button" data-cmd="removeFormat" title="Formatierung entfernen"><span class="mdi mdi-format-clear"></span></button>
+                    </div>
+                    <div id="editor-area" contenteditable="true"></div>
+                </div>
+
+                <button type="submit" class="btn btn-primary" id="save-button">Speichern</button>
+                <button type="button" class="btn btn-secondary" id="cancel-edit" style="display: none;">Abbrechen</button>
+            </form>
+        </div>
+
+        <!-- Sync actions for templates -->
+        <div class="card">
+            <div class="sync-indicator" id="tpl-sync-indicator">
+                <span class="sync-dot unknown"></span>
+                <span>Sync-Status unbekannt</span>
+            </div>
+            <div style="display:flex;gap:8px;align-items:center;">
+                <button type="button" class="btn btn-secondary" id="sync-pull-button">Vom Server laden</button>
+                <button type="button" class="btn btn-primary" id="sync-push-button">Änderungen hochladen</button>
+                <span id="sync-sync-status" class="status-badge"></span>
+            </div>
+        </div>
+
+        <!-- Template List -->
+        <h3>Gespeicherte Vorlagen</h3>
+        <div class="toolbar">
+            <button type="button" class="btn btn-secondary" id="select-all-button">Alle auswählen</button>
+            <button type="button" class="btn btn-danger" id="delete-selected-button">Ausgewählte löschen</button>
+        </div>
+        <div id="templates-list">
+            <p id="no-templates">Keine Vorlagen vorhanden.</p>
+        </div>
     </div>
 
-    <!-- Template List -->
+    <!-- Tab: Signaturen -->
-    <h3>Gespeicherte Vorlagen</h3>
+    <div id="tab-signatures" class="tab-content">
-    <div class="toolbar">
+
-        <button type="button" class="btn btn-secondary" id="select-all-button">Alle auswählen</button>
+        <!-- Sync actions for signatures -->
-        <button type="button" class="btn btn-danger" id="delete-selected-button">Ausgewählte löschen</button>
+        <div class="card">
+            <div class="sync-indicator" id="sig-sync-indicator">
+                <span class="sync-dot unknown"></span>
+                <span>Sync-Status unbekannt</span>
+            </div>
+            <div style="display:flex;gap:8px;align-items:center;">
+                <button type="button" class="btn btn-secondary" id="sig-sync-pull">Vom Server laden</button>
+                <button type="button" class="btn btn-primary" id="sig-sync-push">Signaturen hochladen</button>
+                <span id="sig-sync-status" class="status-badge"></span>
+            </div>
+        </div>
+
+        <div class="card">
+            <div class="card-title">E-Mail Signaturen verwalten</div>
+            <div class="card-desc">Hier kannst du die Signaturen deiner Thunderbird-Identitäten bearbeiten. Änderungen werden direkt in Thunderbird übernommen.</div>
+
+            <div class="form-group">
+                <label for="sig-identity-select">Identität / E-Mail-Adresse</label>
+                <select id="sig-identity-select" style="width:100%;padding:8px 10px;border:1px solid #d0d0d0;border-radius:6px;font-size:13px;">
+                    <option value="">— Bitte wählen —</option>
+                </select>
+            </div>
+
+            <div class="form-group" style="display:flex;align-items:center;gap:8px;">
+                <input type="checkbox" id="sig-personal-toggle" style="width:16px;height:16px;accent-color:#4a7c59;">
+                <label for="sig-personal-toggle" style="margin-bottom:0;cursor:pointer;">Persönliche Signatur verwenden</label>
+                <span id="sig-personal-info" style="font-size:11px;color:#999;"></span>
+            </div>
+
+            <label>Signatur</label>
+            <div class="editor-wrapper">
+                <div class="editor-toolbar" id="sig-toolbar">
+                    <button type="button" data-cmd="bold" title="Fett"><span class="mdi mdi-format-bold"></span></button>
+                    <button type="button" data-cmd="italic" title="Kursiv"><span class="mdi mdi-format-italic"></span></button>
+                    <button type="button" data-cmd="underline" title="Unterstrichen"><span class="mdi mdi-format-underline"></span></button>
+                    <div class="sep"></div>
+                    <button type="button" data-cmd="foreColor" data-val="ask" title="Textfarbe"><span class="mdi mdi-format-color-text"></span></button>
+                    <button type="button" data-cmd="hiliteColor" data-val="ask" title="Hintergrundfarbe"><span class="mdi mdi-format-color-highlight"></span></button>
+                    <div class="sep"></div>
+                    <button type="button" data-cmd="createLink" data-val="ask" title="Link einfügen"><span class="mdi mdi-link"></span></button>
+                    <button type="button" data-cmd="removeFormat" title="Formatierung entfernen"><span class="mdi mdi-format-clear"></span></button>
+                </div>
+                <div id="sig-editor-area" contenteditable="true" style="min-height:120px;max-height:400px;overflow-y:auto;border:1px solid #d0d0d0;border-radius:0 0 6px 6px;background:white;padding:10px 12px;outline:none;font-family:'Segoe UI',Verdana,sans-serif;font-size:13px;color:#333;"></div>
+            </div>
+
+            <div style="margin-top:10px;display:flex;gap:8px;align-items:center;">
+                <button type="button" class="btn btn-primary" id="sig-save-button">Signatur speichern</button>
+                <button type="button" class="btn btn-secondary" id="sig-import-file-btn">Aus Datei laden</button>
+                <input type="file" id="sig-import-file" accept=".html,.htm" style="display:none;">
+                <span id="sig-status" class="status-badge"></span>
+            </div>
+        </div>
+
     </div>
-    <div id="templates-list">
+
-        <p id="no-templates">Keine Vorlagen vorhanden.</p>
+    <!-- Tab: Synchronisierung -->
+    <div id="tab-sync" class="tab-content">
+
+        <!-- Benutzer & Abteilung -->
+        <div class="card">
+            <div class="card-title">Benutzer &amp; Abteilung</div>
+            <div class="card-desc">Dein Name wird bei Änderungen im Commit gespeichert, damit nachvollziehbar ist wer was geändert hat.</div>
+
+            <div class="form-row">
+                <div class="form-group">
+                    <label for="sync-author-name">Dein Name</label>
+                    <input type="text" id="sync-author-name" placeholder="z.B. Max Mustermann">
+                </div>
+                <div class="form-group">
+                    <label for="sync-author-email">Deine E-Mail (optional)</label>
+                    <input type="text" id="sync-author-email" placeholder="z.B. max@hotel-park-soltau.de">
+                </div>
+            </div>
+
+            <div class="form-group">
+                <label for="sync-department">Abteilung</label>
+                <div style="display:flex; gap:8px; align-items:start;">
+                    <select id="sync-department" style="flex:1; padding:8px 10px; border:1px solid #d0d0d0; border-radius:6px; font-size:13px;">
+                        <option value="">— Bitte wählen —</option>
+                    </select>
+                    <button type="button" class="btn btn-secondary" id="refresh-departments" title="Abteilungen neu laden" style="white-space:nowrap;">Aktualisieren</button>
+                </div>
+                <div class="card-desc" style="margin-top:6px;">Du erhältst Vorlagen aus deiner Abteilung + dem gemeinsamen Ordner (<code>_gemeinsam</code>).</div>
+            </div>
+        </div>
+
+        <!-- Repository-Verbindung -->
+        <div class="card">
+            <div class="card-title">Git-Repository Verbindung</div>
+            <div class="card-desc">Verbinde das Plugin mit einem Gitea/Forgejo Repository, um Vorlagen zentral zu verwalten und zwischen Mitarbeitern zu synchronisieren.</div>
+
+            <div id="sync-status-bar" class="sync-status disconnected">
+                Nicht verbunden
+            </div>
+
+            <div class="form-group">
+                <label for="sync-url">Server-URL</label>
+                <input type="text" id="sync-url" placeholder="https://git.example.com">
+            </div>
+
+            <div class="form-row">
+                <div class="form-group">
+                    <label for="sync-owner">Repository-Besitzer</label>
+                    <input type="text" id="sync-owner" placeholder="z.B. benutzername">
+                </div>
+                <div class="form-group">
+                    <label for="sync-repo">Repository-Name</label>
+                    <input type="text" id="sync-repo" placeholder="z.B. email-vorlagen">
+                </div>
+            </div>
+
+            <div class="form-row">
+                <div class="form-group">
+                    <label for="sync-branch">Branch</label>
+                    <input type="text" id="sync-branch" placeholder="main" value="main">
+                </div>
+                <div class="form-group">
+                    <label for="sync-token">API-Token</label>
+                    <input type="password" id="sync-token" placeholder="Token aus Gitea-Einstellungen">
+                </div>
+            </div>
+
+            <div class="sync-actions">
+                <button type="button" class="btn btn-primary" id="save-sync-config">Verbindung speichern</button>
+                <button type="button" class="btn btn-secondary" id="test-sync-connection">Verbindung testen</button>
+                <span id="sync-action-status" class="status-badge"></span>
+            </div>
+        </div>
+
+        <div id="sync-log"></div>
     </div>
 
     <script src="templates_options.js"></script>