refine extension panel beta controls and tester access

Author: Jamesllllllllll

README.md

@@ -22,7 +22,7 @@ It runs on TanStack Start, Cloudflare Workers, D1, Durable Objects, Queues, KV,
 - Home page cards for live channels, plus a demo mode that shows Rocksmith-tagged Twitch streams with `Watch on Twitch` and `Open playlist` actions
 - Song search with direct viewer request actions, copyable chat commands, catalog metadata, caching, and D1-backed rate limiting
 - Public channel pages with playlist, played history, signed-in viewer request controls, VIP token balance, and request timestamps
-- Twitch panel extension with read-only playlist viewing, viewer request actions, and owner/moderator playlist controls
+- Twitch panel extension with playlist viewing, viewer request actions, and owner/moderator controls for play-now, shuffle, reorder, delete, and request-type changes
 - Dashboard pages for account access, owner settings, admin controls, and playlist management
 - Channel rules with setlists plus distinct artist, charter, song, and version blacklists
 - OBS-ready stream overlay settings with live preview, chroma-key background controls, and album/creator display toggles

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

@@ -132,11 +132,12 @@ Verify these paths on the Hosted Test build:
   - add VIP request works when a VIP token is available
   - edit current request works
   - remove current request works
-- channel owner:
-  - playlist moderation controls appear
-  - set current, mark played, delete item, and request-kind changes work
+- channel owner:
+  - playlist moderation controls appear
+  - set current, mark played, shuffle, reorder, delete item, and request-kind changes work
 - channel moderator:
   - playlist moderation controls follow the channel's moderator capability settings
+  - queue shuffle and manual reorder work when request-management access is enabled
 
 If an extension request fails in production, check the frontend Worker logs. Slow and failed panel `bootstrap` and `state` requests log a trace id, elapsed time, and stage timings for channel lookup, viewer resolution, viewer request state, and live playlist state.
 

src/components/ui/collapsible.tsx

@@ -0,0 +1,31 @@
+import { Collapsible as CollapsiblePrimitive } from "radix-ui";
+
+function Collapsible({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
+  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />;
+}
+
+function CollapsibleTrigger({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
+  return (
+    <CollapsiblePrimitive.CollapsibleTrigger
+      data-slot="collapsible-trigger"
+      {...props}
+    />
+  );
+}
+
+function CollapsibleContent({
+  ...props
+}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
+  return (
+    <CollapsiblePrimitive.CollapsibleContent
+      data-slot="collapsible-content"
+      {...props}
+    />
+  );
+}
+
+export { Collapsible, CollapsibleContent, CollapsibleTrigger };