feat(landing): implement dynamic version and release date display

UI: Overwrite website logo/favicon with new monochrome icon
UI: Update KoalaSync icon to monochrome version to match neon theme
2026-07-26 12:08:15 +00:00 · 2026-05-18 15:14:23 +02:00 · 2026-05-18 14:58:18 +02:00 · 2026-05-18 14:56:22 +02:00 · 2026-05-18 14:52:06 +02:00
7 changed files with 79 additions and 3 deletions
@@ -59,6 +59,7 @@ jobs:
      - name: Inject version into source files
        run: |
          VERSION=${{ steps.version.outputs.VERSION }}
+          DATE=$(date -u +"%Y-%m-%dT%H:%M:%SZ")
          echo "Injecting version $VERSION from tag $GITHUB_REF_NAME..."

          # 1. extension/manifest.base.json
@@ -73,8 +74,22 @@ jobs:
          jq --arg v "$VERSION" '.version = $v' package.json > tmp.json && mv tmp.json package.json
          echo "  ✓ package.json -> $VERSION"

+          # 4. website/version.json
+          jq -n --arg v "$VERSION" --arg d "$DATE" '{version: $v, date: $d}' > website/version.json
+          echo "  ✓ website/version.json -> version $VERSION, date $DATE"
+
          echo "Version injection complete."

+      - name: Commit and push version updates back to main
+        run: |
+          git config --local user.email "action@github.com"
+          git config --local user.name "GitHub Action"
+          git add extension/manifest.base.json shared/constants.js package.json website/version.json
+          git commit -m "chore(release): update versions to $GITHUB_REF_NAME [skip ci]" || echo "No changes to commit"
+          git push origin HEAD:main
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
      - name: Build Extensions
        run: |
          npm install
@@ -31,9 +31,19 @@
            font-size: 18px;
            margin: 0 0 16px 0;
            color: var(--accent);
-            text-align: center;
            letter-spacing: 1px;
            text-transform: uppercase;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 8px;
+        }
+
+        h1 img {
+            width: 24px;
+            height: 24px;
+            object-fit: contain;
+            border-radius: 4px;
        }

        /* Tabs */
@@ -192,7 +202,7 @@
    </style>
 </head>
 <body>
-    <h1>KoalaSync</h1>
+    <h1><img src="icons/icon128.png" alt="KoalaSync Logo">KoalaSync</h1>

    <div class="tabs">
        <button class="tab-btn active" data-tab="tab-room">Room</button>
@@ -209,5 +209,52 @@ document.addEventListener('DOMContentLoaded', () => {
        }
    });

+    const updateDynamicVersion = async () => {
+        try {
+            const response = await fetch('version.json');
+            if (!response.ok) return;
+            const data = await response.json();
+            const { version, date } = data;
+            if (!version || !date) return;
+
+            const releaseDate = new Date(date);
+            const now = new Date();
+            const diffMs = now - releaseDate;
+            const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));
+            const diffHours = Math.floor(diffMs / (1000 * 60 * 60));
+            const diffMins = Math.floor(diffMs / (1000 * 60));
+
+            let relativeTimeEn = '';
+            let relativeTimeDe = '';
+
+            if (diffDays > 0) {
+                relativeTimeEn = `${diffDays} ${diffDays === 1 ? 'day' : 'days'} ago`;
+                relativeTimeDe = `vor ${diffDays} ${diffDays === 1 ? 'Tag' : 'Tagen'}`;
+            } else if (diffHours > 0) {
+                relativeTimeEn = `${diffHours} ${diffHours === 1 ? 'hour' : 'hours'} ago`;
+                relativeTimeDe = `vor ${diffHours} ${diffHours === 1 ? 'Stunde' : 'Stunden'}`;
+            } else if (diffMins > 0) {
+                relativeTimeEn = `${diffMins} ${diffMins === 1 ? 'minute' : 'minutes'} ago`;
+                relativeTimeDe = `vor ${diffMins} ${diffMins === 1 ? 'Minute' : 'Minuten'}`;
+            } else {
+                relativeTimeEn = 'just now';
+                relativeTimeDe = 'gerade eben';
+            }
+
+            const badgeEn = document.querySelector('.version-text-en');
+            const badgeDe = document.querySelector('.version-text-de');
+
+            if (badgeEn) {
+                badgeEn.textContent = `v${version} OUT NOW • ${relativeTimeEn}`;
+            }
+            if (badgeDe) {
+                badgeDe.textContent = `v${version} JETZT VERFÜGBAR • ${relativeTimeDe}`;
+            }
+        } catch (e) {
+            console.warn('Failed to fetch dynamic version info:', e);
+        }
+    };
+
    checkInvite();
+    updateDynamicVersion();
 });
@@ -65,7 +65,7 @@
    <header class="hero">
        <div class="container hero-grid">
            <div class="hero-text">
-                <div class="version-badge" data-reveal><span lang="en">v1.3.1 OUT NOW</span><span lang="de">v1.3.1 JETZT VERFÜGBAR</span></div>
+                <div class="version-badge" data-reveal><span lang="en" class="version-text-en">v1.3.1 OUT NOW</span><span lang="de" class="version-text-de">v1.3.1 JETZT VERFÜGBAR</span></div>
                <h1 data-reveal>
                    <span lang="en">Watch Together.<br>Sync Perfectly.</span>
                    <span lang="de">Gemeinsam schauen.<br>Perfekt synchron.</span>
@@ -0,0 +1,4 @@
+{
+  "version": "1.3.1",
+  "date": "2026-05-18T13:02:13Z"
+}
Author	SHA1	Message	Date
MacBook	4653c455d5	feat(landing): implement dynamic version and release date display	2026-05-18 15:14:23 +02:00
Timo	800a6c09b7	UI: Overwrite website logo/favicon with new monochrome icon	2026-05-18 14:58:18 +02:00
Timo	751496ed48	UI: Update KoalaSync icon to monochrome version to match neon theme	2026-05-18 14:56:22 +02:00
Timo	734a004f23	UI: Add new icon to popup header next to title	2026-05-18 14:52:06 +02:00