new file mode 100644

@@ -0,0 +1,152 @@

+import { LitElement, html, css } from 'lit';

+

+export class WinzerFileCard extends LitElement {

+    static properties = {

+        file: { type: Object } // { name, date, size, type, isNew }

+    };

+

+    static styles = css`

+        :host {

+            display: block;

+            margin-bottom: 12px;

+        }

+        .file-card {

+            background-color: var(--bg-card); /* Standard: Grau für gelesene Dateien */

+            border-radius: var(--radius-sm);

+            padding: 12px 16px;

+            display: flex;

+            align-items: center;

+            border: 1px solid var(--border-color);

+            box-shadow: var(--shadow-sm);

+            position: relative;

+        }

+

+        /* UPDATE: Styling für neue Dateien (Weißer BG + Farbiger Rand) */

+        .file-card.has-new {

+            background-color: var(--bg-white);

+            border-color: var(--primary-color);

+        }

+

+        .icon-container {

+            width: 40px;

+            height: 40px;

+            display: flex;

+            align-items: center;

+            justify-content: center;

+            margin-right: 16px;

+            flex-shrink: 0;

+        }

+        .icon-container svg {

+            width: 32px;

+            height: 32px;

+        }

+        .file-info {

+            flex: 1;

+            min-width: 0; /* Text truncation fix */

+        }

+        .file-name {

+            font-weight: 400; /* UPDATE: Standard nicht fett */

+            font-size: 0.9rem;

+            color: var(--text-dark);

+            margin-bottom: 4px;

+            white-space: nowrap;

+            overflow: hidden;

+            text-overflow: ellipsis;

+        }

+        /* UPDATE: Fett nur wenn neu */

+        .has-new .file-name {

+            font-weight: 700;

+        }

+

+        .file-meta {

+            font-size: 0.75rem;

+            color: var(--text-muted);

+        }

+        .download-btn {

+            width: 36px;

+            height: 36px;

+            border: 1px solid var(--primary-color);

+            border-radius: 8px;

+            display: flex;

+            align-items: center;

+            justify-content: center;

+

+            /* UPDATE: Standard Button Style (Weiß) */

+            background-color: var(--bg-white);

+            color: var(--primary-color);

+

+            cursor: pointer;

+            margin-left: 12px;

+            flex-shrink: 0;

+

+            /* UPDATE: Transition angepasst an WinzerCard */

+            transition: transform 0.1s, background-color 0.2s;

+        }

+

+        /* UPDATE: Klick-Effekt hinzugefügt (wie bei WinzerCard) */

+        .download-btn:active {

+            transform: scale(0.95);

+        }

+

+        /* UPDATE: Button Style für neue Dateien (Primärfarbe) */

+        .has-new .download-btn {

+            background-color: var(--primary-color);

+            color: white;

+        }

+

+        .download-btn svg {

+            width: 20px;

+            height: 20px;

+        }

+

+        /* New Indicator Dot */

+        .new-dot {

+            position: absolute;

+            left: 6px; /* UPDATE: Position angepasst für fixe Ausrichtung */

+            top: 50%;

+            transform: translateY(-50%);

+            width: 6px;

+            height: 6px;

+            background-color: var(--primary-color);

+            border-radius: 50%;

+        }

+        /* UPDATE: Padding-Shift entfernt, damit Icons ausgerichtet bleiben */

+

+        /* Type Colors */

+        .type-pdf { color: var(--alert-color); }

+        .type-doc { color: #2b5797; } /* Word blueish */

+        .type-default { color: var(--text-muted); }

+    `;

+

+    _getIcon(type) {

+        const t = type.toLowerCase();

+        if (t === 'pdf') {

+            return html`<svg class="type-pdf" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><path d="M9 15l3 3 3-3"></path><path d="M12 18v-6"></path><text x="6" y="22" font-size="6" font-weight="bold" fill="currentColor" stroke="none">PDF</text></svg>`;

+        } else if (t === 'docx' || t === 'doc') {

+            return html`<svg class="type-doc" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><polyline points="14 2 14 8 20 8"></polyline><line x1="16" y1="13" x2="8" y2="13"></line><line x1="16" y1="17" x2="8" y2="17"></line><line x1="10" y1="9" x2="8" y2="9"></line></svg>`;

+        }

+        return html`<svg class="type-default" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M13 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9z"></path><polyline points="13 2 13 9 20 9"></polyline></svg>`;

+    }

+

+    render() {

+        return html`

+            <div class="file-card ${this.file.isNew ? 'has-new' : ''}">

+                ${this.file.isNew ? html`<div class="new-dot"></div>` : ''}

+

+                <div class="icon-container">

+                    ${this._getIcon(this.file.type)}

+                </div>

+

+                <div class="file-info">

+                    <div class="file-name">${this.file.name}</div>

+                    <div class="file-meta">${this.file.date} &nbsp; ${this.file.size}</div>

+                </div>

+

+                <div class="download-btn">

+                    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><polyline points="7 10 12 15 17 10"></polyline><line x1="12" y1="15" x2="12" y2="3"></line></svg>

+                </div>

+            </div>

+        `;

+    }

+}

+customElements.define('winzer-file-card', WinzerFileCard);