Add paw icon for queued items in commit list

2025-05-26 11:32:38 +02:00
parent e5e5acc012
commit 624baf0cc9
2 changed files with 23 additions and 3 deletions
--- a/index.html
+++ b/index.html
@@ -191,7 +191,17 @@
        1px 1px 2px rgba(0,0,0,0.25),
        0px 1px 1px color-mix(in srgb, currentColor 40%, black);
    }
-
+    /* Füge das in deine CSS ein */
+    .paw-queued {
+      opacity: 0.65;
+      filter: drop-shadow(0 2px 2px rgba(0,0,0,0.10));
+      transition: transform 0.18s cubic-bezier(0.4,0.2,0.6,1);
+      pointer-events: none;
+    }
+    li:hover .paw-queued {
+      opacity: 0.88;
+      filter: drop-shadow(0 3px 4px rgba(0,0,0,0.17));
+    }
  </style>
 </head>
 <body class="flex h-screen bg-white">
--- a/renderer.js
+++ b/renderer.js
@@ -472,10 +472,11 @@ async function startLiveCountdown(folderObj, msLeft) {
    if (!commits || !commits.length) {
      return;
    } 
-
+    const isQueued = folderObj.llmCandidates && folderObj.llmCandidates.includes(c.hash);
+    const pawRotate = (Math.random() * 25 - 10).toFixed(1); // -10° bis +15°
    contentList.innerHTML = commits.map(c => `
      <li class="w-full p-3 mb-2 bg-white border border-gray-200 rounded shadow-sm
-                 ${c.hash === head ? 'current-commit' : ''}">
+                 ${c.hash === head ? 'current-commit' : ''}" style="position:relative;">
        <div class="flex justify-between text-sm text-gray-600 mb-1">
          <span>${c.hash}</span>
          <span>${new Date(c.date).toLocaleString()}</span>
@@ -523,6 +524,15 @@ async function startLiveCountdown(folderObj, msLeft) {
          </button>
          <pre class="m-0"></pre>
        </div>
+        ${
+          isQueued
+            ? `<img src="assets/cat/paw.png"
+                    alt="In Rewrite Queue"
+                    title="In Rewrite Queue"
+                    class="absolute right-2 top-2 w-8 h-8 paw-queued"
+                    style="transform: rotate(${pawRotate}deg); pointer-events: none; z-index:10;">`
+            : ''
+        }
      </li>
    `).join('');