Refine extension workflows and app surfaces

- expand Twitch panel request, moderation, demo, and hosted-build flows
- preserve playlist ordering across VIP/current transitions and targeted edits
- refresh shared app surfaces, homepage messaging, and pagination motion

Author: Jamesllllllllll

docs/twitch-panel-extension-beta-rollout-checklist.md

@@ -95,6 +95,8 @@ When you build the Hosted Test artifact, make sure the shell sets the final app
 VITE_TWITCH_EXTENSION_API_BASE_URL=https://your-app-host npm run build:extension:panel
 ```
 
+The build requires `VITE_TWITCH_EXTENSION_API_BASE_URL` or `APP_URL`. If neither is set, it fails instead of falling back to the Twitch asset host.
+
 Upload the contents of:
 
 ```text

drizzle/0013_show_playlist_positions.sql

@@ -0,0 +1,2 @@
+ALTER TABLE `channel_settings`
+ADD COLUMN `show_playlist_positions` integer DEFAULT false NOT NULL;

drizzle/0014_playlist_item_regular_positions.sql

@@ -0,0 +1,8 @@
+ALTER TABLE playlist_items
+ADD COLUMN regular_position integer NOT NULL DEFAULT 1;
+
+UPDATE playlist_items
+SET regular_position = position;
+
+CREATE UNIQUE INDEX playlist_items_playlist_regular_position_uidx
+ON playlist_items (playlist_id, regular_position);

drizzle/0015_playlist_item_edited_at.sql

@@ -0,0 +1,2 @@
+ALTER TABLE playlist_items
+ADD COLUMN edited_at integer;

src/app.css

@@ -4,8 +4,9 @@
 
 :root {
   color-scheme: dark;
-  --bg: #08090b;
-  --bg-elevated: #101216;
+  --shell-gutter: 1.5rem;
+  --bg: #0c1219;
+  --bg-elevated: #121923;
   --panel: rgba(18, 20, 26, 0.86);
   --panel-strong: #13161d;
   --panel-soft: #181c24;
@@ -27,6 +28,24 @@
   --border-strong: rgba(255, 255, 255, 0.14);
   --shadow: 0 28px 80px rgba(0, 0, 0, 0.45);
   --shadow-soft: 0 12px 32px rgba(0, 0, 0, 0.24);
+  --app-background:
+    linear-gradient(180deg, #121a24 0%, #0c1219 44%, #091017 100%),
+    radial-gradient(circle at 7% 5%, rgba(255, 255, 255, 0.14), transparent 20%),
+    radial-gradient(
+      circle at top right,
+      rgba(145, 159, 188, 0.11),
+      transparent 22%
+    ),
+    radial-gradient(
+      circle at 78% 14%,
+      rgba(127, 184, 171, 0.05),
+      transparent 18%
+    ),
+    radial-gradient(
+      circle at 50% 120%,
+      rgba(118, 136, 154, 0.07),
+      transparent 30%
+    );
   --glow:
     0 0 0 1px rgba(240, 102, 66, 0.1), 0 18px 50px rgba(218, 79, 54, 0.14);
 }
@@ -37,7 +56,9 @@
 
 html {
   min-height: 100%;
-  background: var(--bg);
+  background-color: var(--bg);
+  background-image: var(--app-background);
+  background-attachment: fixed;
   scrollbar-gutter: stable;
 }
 
@@ -56,7 +77,7 @@ body {
   min-height: 100vh;
   color: var(--text);
   font-family: "IBM Plex Sans", sans-serif;
-  background: linear-gradient(180deg, #090a0d 0%, #08090b 100%);
+  background: transparent;
   position: relative;
   isolation: isolate;
 }
@@ -71,56 +92,52 @@ body.overlay-mode {
   background: transparent;
 }
 
-body::before {
+html::after {
   content: "";
   position: fixed;
   inset: 0;
-  z-index: -2;
+  z-index: -1;
   pointer-events: none;
+  opacity: 0.22;
   background:
     radial-gradient(
-      circle at top left,
-      rgba(240, 102, 66, 0.18),
-      transparent 24%
+      circle at 10% 8%,
+      rgba(255, 255, 255, 0.035),
+      transparent 26%
     ),
-    radial-gradient(
-      circle at top right,
-      rgba(145, 159, 188, 0.11),
-      transparent 22%
+    repeating-linear-gradient(
+      90deg,
+      rgba(255, 255, 255, 0.016) 0,
+      rgba(255, 255, 255, 0.016) 1px,
+      transparent 1px,
+      transparent 22px
     ),
-    radial-gradient(
-      circle at 50% 120%,
-      rgba(241, 210, 172, 0.08),
-      transparent 28%
-    );
-}
-
-body::after {
-  content: "";
-  position: fixed;
-  inset: 0;
-  z-index: -1;
-  pointer-events: none;
-  opacity: 0.28;
-  background:
-    linear-gradient(rgba(255, 255, 255, 0.015), rgba(255, 255, 255, 0.015)),
     repeating-linear-gradient(
       0deg,
-      rgba(255, 255, 255, 0.02) 0,
-      rgba(255, 255, 255, 0.02) 1px,
+      rgba(255, 255, 255, 0.012) 0,
+      rgba(255, 255, 255, 0.012) 1px,
       transparent 1px,
-      transparent 3px
+      transparent 5px
     );
+  background-size:
+    100% 100%,
+    340px 260px,
+    340px 260px;
+  background-position:
+    0 0,
+    0 0,
+    0 0;
+  background-repeat: no-repeat;
   mix-blend-mode: soft-light;
 }
 
-body.overlay-mode::after,
-body.overlay-mode::before {
+html.overlay-mode::after,
+html.overlay-mode::before {
   display: none;
 }
 
-body.extension-mode::after,
-body.extension-mode::before {
+html.extension-mode::after,
+html.extension-mode::before {
   display: none;
 }
 
@@ -147,12 +164,139 @@ h6 {
   min-height: 100vh;
 }
 
+#app :where([class*="rounded"]) {
+  border-radius: 0;
+}
+
+.app-shell {
+  position: relative;
+  isolation: isolate;
+}
+
+.app-shell::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: var(--shell-gutter);
+  width: 1px;
+  background: linear-gradient(
+    180deg,
+    transparent 0,
+    var(--border) 2.5rem,
+    var(--border) calc(100% - 2.5rem),
+    transparent 100%
+  );
+  pointer-events: none;
+  z-index: 0;
+}
+
+.app-shell > * {
+  position: relative;
+  z-index: 1;
+}
+
+.app-shell__main {
+  position: relative;
+  z-index: 1;
+}
+
+.page-section-stack > * {
+  position: relative;
+}
+
+.paginated-transition-frame {
+  will-change: opacity, transform;
+}
+
+.paginated-transition--exit-forward {
+  animation: paginated-exit-forward 140ms cubic-bezier(0.4, 0, 0.2, 1) both;
+}
+
+.paginated-transition--enter-forward {
+  animation: paginated-enter-forward 220ms cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+
+.paginated-transition--exit-backward {
+  animation: paginated-exit-backward 140ms cubic-bezier(0.4, 0, 0.2, 1) both;
+}
+
+.paginated-transition--enter-backward {
+  animation: paginated-enter-backward 220ms cubic-bezier(0.22, 1, 0.36, 1) both;
+}
+
+@keyframes paginated-exit-forward {
+  from {
+    opacity: 1;
+    transform: translateX(0);
+  }
+
+  to {
+    opacity: 0;
+    transform: translateX(-14px);
+  }
+}
+
+@keyframes paginated-enter-forward {
+  from {
+    opacity: 0;
+    transform: translateX(14px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
+@keyframes paginated-exit-backward {
+  from {
+    opacity: 1;
+    transform: translateX(0);
+  }
+
+  to {
+    opacity: 0;
+    transform: translateX(14px);
+  }
+}
+
+@keyframes paginated-enter-backward {
+  from {
+    opacity: 0;
+    transform: translateX(-14px);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+
 html.extension-mode #app,
 body.extension-mode #app {
   min-height: 100%;
   width: 100%;
 }
 
+@media (prefers-reduced-motion: reduce) {
+  .paginated-transition-frame,
+  .paginated-transition--exit-forward,
+  .paginated-transition--enter-forward,
+  .paginated-transition--exit-backward,
+  .paginated-transition--enter-backward {
+    animation: none;
+    opacity: 1;
+    transform: none;
+  }
+}
+
+@media (max-width: 960px) {
+  :root {
+    --shell-gutter: 0.875rem;
+  }
+}
+
 ::selection {
   background: rgba(240, 102, 66, 0.3);
   color: var(--text);
@@ -278,6 +422,23 @@ body.extension-mode #app {
   container-type: inline-size;
 }
 
+.search-panel > * {
+  position: relative;
+}
+
+@media (min-width: 961px) {
+  .search-panel > * + *::before {
+    content: "";
+    position: absolute;
+    top: -0.75rem;
+    left: calc(-1 * var(--shell-gutter));
+    right: 0;
+    height: 1px;
+    background: var(--border);
+    pointer-events: none;
+  }
+}
+
 .dashboard-playlist__versions-wrap {
   width: 100%;
   min-width: 0;

src/components/blacklist-panel.tsx

@@ -40,7 +40,7 @@ export function BlacklistPanel(props: {
           Artists
         </p>
         {props.artists.length > 0 ? (
-          <div className="overflow-hidden rounded-[20px] border border-(--border)">
+          <div className="overflow-hidden border border-(--border)">
             {props.artists.map((artist, index) => (
               <div
                 key={artist.artistId}
@@ -64,7 +64,7 @@ export function BlacklistPanel(props: {
           Songs
         </p>
         {props.songGroups?.length ? (
-          <div className="overflow-hidden rounded-[20px] border border-(--border)">
+          <div className="overflow-hidden border border-(--border)">
             {props.songGroups.map((song, index) => (
               <div
                 key={song.groupedProjectId}
@@ -91,7 +91,7 @@ export function BlacklistPanel(props: {
           Versions
         </p>
         {props.songs.length > 0 ? (
-          <div className="overflow-hidden rounded-[20px] border border-(--border)">
+          <div className="overflow-hidden border border-(--border)">
             {props.songs.map((song, index) => (
               <div
                 key={song.songId}
@@ -118,7 +118,7 @@ export function BlacklistPanel(props: {
           Charters
         </p>
         {props.charters?.length ? (
-          <div className="overflow-hidden rounded-[20px] border border-(--border)">
+          <div className="overflow-hidden border border-(--border)">
             {props.charters.map((charter, index) => (
               <div
                 key={charter.charterId}
@@ -146,7 +146,7 @@ export function BlacklistPanel(props: {
           {...(props.defaultOpen ? { open: true } : {})}
           className="group"
         >
-          <summary className="cursor-pointer list-none rounded-[28px] p-6 [&::-webkit-details-marker]:hidden">
+          <summary className="cursor-pointer list-none p-6 [&::-webkit-details-marker]:hidden">
             <div className="flex items-start justify-between gap-4">
               <div className="min-w-0">
                 <CardTitle>{props.title ?? "Channel blacklists"}</CardTitle>