feat: highlight private videos for owners

css/style.css

@@ -8,6 +8,7 @@
   --color-surface: #0f172a;
   --color-bg: var(--color-surface);
   --color-card: #1e293b;
+  --color-card-private: #3b1d74;
   --color-primary: #fe0032;
   --color-secondary: #ff93a5;
   --color-card-critical: #3f0b13;
@@ -167,6 +168,15 @@ header img {
   box-shadow: var(--shadow-md);
 }
 
+.video-card.video-card--owner-private {
+  background-color: var(--color-card-private) !important;
+  box-shadow: 0 0 0 0.125rem rgba(168, 85, 247, 0.55), var(--shadow-md);
+}
+
+.video-card.video-card--owner-private:hover {
+  box-shadow: 0 0 0 0.125rem rgba(192, 132, 252, 0.65), var(--shadow-lg);
+}
+
 .video-card[data-owner-is-viewer="false"][data-url-health-state="offline"][data-stream-health-state="unhealthy"] {
   display: none;
 }

js/channelProfile.js

@@ -1819,6 +1819,9 @@ function renderChannelVideosFromList({
         ? app.formatTimeAgo(video.created_at)
         : new Date(video.created_at * 1000).toLocaleString();
 
+    const highlightClass =
+      canEdit && video.isPrivate ? "video-card--owner-private" : "";
+
     const videoCard = new VideoCard({
       document,
       video,
@@ -1826,6 +1829,7 @@ function renderChannelVideosFromList({
       shareUrl,
       pointerInfo,
       timeAgo,
+      highlightClass,
       capabilities: {
         canEdit,
         canDelete: canEdit,

js/ui/components/VideoCard.js

@@ -28,7 +28,8 @@ export class VideoCard {
     this.video = video;
     this.index = index;
     this.shareUrl = shareUrl;
-    this.highlightClass = highlightClass || "";
+    this.highlightClass =
+      typeof highlightClass === "string" ? highlightClass : "";
     this.animationClass = animationClass || "";
     this.pointerInfo = pointerInfo;
     this.capabilities = {

js/ui/views/VideoListView.js

@@ -321,9 +321,8 @@ export class VideoListView {
       const shareUrl = this.buildShareUrl(video, shareBase);
       const canEdit = this.utils.canEditVideo(video);
       const canDelete = this.utils.canDeleteVideo(video);
-      const highlightClass = canEdit && video.isPrivate
-        ? "border-2 border-yellow-500"
-        : "border-none";
+      const highlightClass =
+        canEdit && video.isPrivate ? "video-card--owner-private" : "";
       const isNewlyRendered = !previouslyRenderedIds.has(video.id);
       const animationClass = isNewlyRendered ? "video-card--enter" : "";
       const timeAgo = this.formatters.formatTimeAgo(video.created_at);