Refactor Video Card and Modal layout to move view counts and use icons.

- Moved view count and comments to a new bottom engagement section in `VideoCard.js`.
- Replaced text labels with Eye and Message SVG icons in `VideoCard.js`.
- Updated `video-modal.html` to include an Eye icon for the view count.
- Refactored `VideoModal.js` to update only the text node for view counts, preserving the icon.
- Removed "views" text suffix in favor of a cleaner numeric display.

components/video-modal.html

@@ -175,7 +175,13 @@
                     <div class="video-modal__meta-info flex flex-wrap items-center gap-3">
                       <span id="videoTimestamp" class="modal-meta">Posted just now</span>
                       <span id="videoEditedTimestamp" class="modal-meta hidden">Last edited just now</span>
-                      <span id="videoViewCount" class="modal-meta modal-view-count">– views</span>
+                      <span id="videoViewCount" class="modal-meta modal-view-count flex items-center gap-1.5" title="Views">
+                        <svg viewBox="0 0 24 24" fill="none" aria-hidden="true" focusable="false" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4">
+                          <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"></path>
+                          <circle cx="12" cy="12" r="3"></circle>
+                        </svg>
+                        <span data-view-count-text>–</span>
+                      </span>
                     </div>
                   </div>
 

js/ui/components/VideoModal.js

@@ -3959,8 +3959,17 @@ export class VideoModal {
   }
 
   updateViewCountLabel(text) {
-    if (this.videoViewCountEl) {
-      this.videoViewCountEl.textContent = text || "";
+    if (!this.videoViewCountEl) {
+      return;
+    }
+    const textEl = this.videoViewCountEl.querySelector(
+      "[data-view-count-text]"
+    );
+    if (textEl) {
+      textEl.textContent = text || "–";
+    } else {
+      // Fallback if span is missing
+      this.videoViewCountEl.textContent = text || "–";
     }
   }
 
@@ -5438,15 +5447,14 @@ export class VideoModal {
       return this.formatViewCountLabel(Number(total));
     }
     if (status === "hydrating") {
-      return "Loading views…";
+      return "Loading…";
     }
-    return "– views";
+    return "–";
   }
 
   formatViewCountLabel(total) {
     const numeric = Number.isFinite(total) ? Math.max(0, Number(total)) : 0;
-    const label = numeric === 1 ? "view" : "views";
-    return `${formatViewCount(numeric)} ${label}`;
+    return formatViewCount(numeric);
   }
 
   syncMoreMenuData({ currentVideo, canManageBlacklist }) {