refactor: centralize styling system usage

js/ui/components/UploadModal.js

@@ -2,6 +2,10 @@
 
 import { createModalAccessibility } from "./modalAccessibility.js";
 import { Nip71FormManager } from "./nip71FormManager.js";
+import {
+  applyDynamicStyles,
+  removeDynamicStyles,
+} from "../styleSystem.js";
 
 export class UploadModal {
   constructor({
@@ -761,7 +765,7 @@ export class UploadModal {
     if (!Number.isFinite(fraction) || fraction < 0) {
       this.cloudflareProgressBar.classList.add("hidden");
       this.cloudflareProgressBar.setAttribute("aria-hidden", "true");
-      this.cloudflareProgressFill.style.width = "0%";
+      removeDynamicStyles(this.cloudflareProgressFill, { slot: "r2-progress" });
       this.cloudflareProgressFill.setAttribute("aria-valuenow", "0");
       this.emit("upload:r2-progress", { fraction: null });
       return;
@@ -772,7 +776,11 @@ export class UploadModal {
 
     this.cloudflareProgressBar.classList.remove("hidden");
     this.cloudflareProgressBar.setAttribute("aria-hidden", "false");
-    this.cloudflareProgressFill.style.width = `${percent}%`;
+    applyDynamicStyles(
+      this.cloudflareProgressFill,
+      { "--cloudflare-progress-width": `${percent}%` },
+      { slot: "r2-progress" },
+    );
     this.cloudflareProgressFill.setAttribute("aria-valuenow", `${percent}`);
     this.emit("upload:r2-progress", { fraction: clamped });
   }

js/ui/components/VideoCard.js

@@ -478,24 +478,22 @@ export class VideoCard {
         alt: "Placeholder"
       }
     });
-    avatar.classList.add("author-pic");
+    avatar.classList.add("author-pic", "cursor-pointer");
     if (this.video.pubkey) {
       avatar.dataset.pubkey = this.video.pubkey;
     }
-    avatar.style.cursor = "pointer";
 
     avatarWrapper.appendChild(avatar);
 
     const authorMeta = this.createElement("div", { classNames: ["min-w-0"] });
 
     const authorName = this.createElement("p", {
-      classNames: ["text-sm", "text-muted", "author-name"],
+      classNames: ["text-sm", "text-muted", "author-name", "cursor-pointer"],
       textContent: "Loading name..."
     });
     if (this.video.pubkey) {
       authorName.dataset.pubkey = this.video.pubkey;
     }
-    authorName.style.cursor = "pointer";
 
     const metadata = this.createElement("div", {
       classNames: [

js/ui/components/VideoModal.js

@@ -1,6 +1,10 @@
 import { createModalAccessibility } from "./modalAccessibility.js";
 import positionFloatingPanel from "../utils/positionFloatingPanel.js";
 import { applyDesignSystemAttributes } from "../../designSystem.js";
+import {
+  applyDynamicStyles,
+  removeDynamicStyles,
+} from "../styleSystem.js";
 
 export class VideoModal {
   constructor({
@@ -339,15 +343,18 @@ export class VideoModal {
     const modalNav = playerModal.querySelector("#modalNav");
     if (modalNav && this.scrollRegion) {
       let lastScrollY = 0;
+      const updateNavVisibility = (shouldShowNav) => {
+        modalNav.classList.toggle("modal-nav--hidden", !shouldShowNav);
+        modalNav.classList.toggle("modal-nav--visible", shouldShowNav);
+      };
       this.modalNavScrollHandler = () => {
         const currentScrollY = this.scrollRegion.scrollTop;
         const shouldShowNav =
           currentScrollY <= lastScrollY || currentScrollY < 50;
-        modalNav.style.transform = shouldShowNav
-          ? "translateY(0)"
-          : "translateY(-100%)";
+        updateNavVisibility(shouldShowNav);
         lastScrollY = currentScrollY;
       };
+      updateNavVisibility(true);
       this.scrollRegion.addEventListener("scroll", this.modalNavScrollHandler);
     } else {
       this.modalNavScrollHandler = null;
@@ -496,14 +503,12 @@ export class VideoModal {
     }
 
     if (this.creatorAvatar) {
-      this.creatorAvatar.style.cursor = "pointer";
       this.creatorAvatar.addEventListener(
         "click",
         this.handleCreatorNavigation
       );
     }
     if (this.creatorName) {
-      this.creatorName.style.cursor = "pointer";
       this.creatorName.addEventListener("click", this.handleCreatorNavigation);
     }
   }
@@ -535,8 +540,8 @@ export class VideoModal {
       return;
     }
 
-    this.playerModal.style.display = "flex";
     this.playerModal.classList.remove("hidden");
+    this.playerModal.removeAttribute("hidden");
     this.document.body.classList.add("modal-open");
     this.document.documentElement.classList.add("modal-open");
     const triggerElement =
@@ -552,8 +557,8 @@ export class VideoModal {
   close() {
     this.activeVideo = null;
     if (this.playerModal) {
-      this.playerModal.style.display = "none";
       this.playerModal.classList.add("hidden");
+      this.playerModal.setAttribute("hidden", "");
     }
     this.document.body.classList.remove("modal-open");
     this.document.documentElement.classList.remove("modal-open");
@@ -655,20 +660,25 @@ export class VideoModal {
       return;
     }
     if (typeof value === "number" && Number.isFinite(value)) {
-      this.modalProgress.style.setProperty(
-        "--progress-width",
-        `${Math.max(0, value)}%`,
+      applyDynamicStyles(
+        this.modalProgress,
+        { "--progress-width": `${Math.max(0, value)}%` },
+        { slot: "progress" },
       );
       return;
     }
     if (typeof value === "string") {
       const trimmed = value.trim();
       if (trimmed) {
-        this.modalProgress.style.setProperty("--progress-width", trimmed);
+        applyDynamicStyles(
+          this.modalProgress,
+          { "--progress-width": trimmed },
+          { slot: "progress" },
+        );
         return;
       }
     }
-    this.modalProgress.style.removeProperty("--progress-width");
+    removeDynamicStyles(this.modalProgress, { slot: "progress" });
   }
 
   setCopyEnabled(enabled) {