Refine dashboard management and app surfaces

Author: Jamesllllllllll

drizzle/0016_channel_owned_official_dlcs.sql

@@ -0,0 +1,23 @@
+CREATE TABLE channel_owned_official_dlcs (
+  id text PRIMARY KEY NOT NULL,
+  channel_id text NOT NULL REFERENCES channels(id),
+  source_key text NOT NULL,
+  source_app_id text,
+  artist_name text NOT NULL,
+  title text NOT NULL,
+  album_name text,
+  file_path text,
+  arrangements_json text NOT NULL DEFAULT '[]',
+  tunings_json text NOT NULL DEFAULT '[]',
+  created_at integer NOT NULL DEFAULT (unixepoch() * 1000),
+  updated_at integer NOT NULL DEFAULT (unixepoch() * 1000)
+);
+
+CREATE INDEX channel_owned_official_dlcs_channel_idx
+ON channel_owned_official_dlcs (channel_id);
+
+CREATE UNIQUE INDEX channel_owned_official_dlcs_channel_source_uidx
+ON channel_owned_official_dlcs (channel_id, source_key);
+
+CREATE INDEX channel_owned_official_dlcs_artist_title_idx
+ON channel_owned_official_dlcs (channel_id, artist_name, title);

public/backgrounds/grit.svg

@@ -28,6 +28,7 @@
   --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-grit: url("/backgrounds/grit.svg");
   --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%),
@@ -92,52 +93,60 @@ body.overlay-mode {
   background: transparent;
 }
 
+body::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+  pointer-events: none;
+  opacity: 0.42;
+  background-image: var(--app-grit), var(--app-grit);
+  background-size: 250px, 360px;
+  background-position:
+    0 0,
+    137px 89px;
+  background-repeat: repeat, repeat;
+  filter: grayscale(1) brightness(1.6) contrast(1.04);
+}
+
 html::after {
   content: "";
   position: fixed;
   inset: 0;
   z-index: -1;
   pointer-events: none;
   opacity: 0.22;
-  background:
+  background-image:
     radial-gradient(
       circle at 10% 8%,
-      rgba(255, 255, 255, 0.035),
-      transparent 26%
-    ),
-    repeating-linear-gradient(
-      90deg,
-      rgba(255, 255, 255, 0.016) 0,
-      rgba(255, 255, 255, 0.016) 1px,
-      transparent 1px,
-      transparent 22px
+      rgba(255, 255, 255, 0.045),
+      transparent 20%
     ),
-    repeating-linear-gradient(
-      0deg,
-      rgba(255, 255, 255, 0.012) 0,
-      rgba(255, 255, 255, 0.012) 1px,
-      transparent 1px,
-      transparent 5px
+    radial-gradient(
+      circle at top right,
+      rgba(145, 159, 188, 0.03),
+      transparent 18%
     );
   background-size:
     100% 100%,
-    340px 260px,
-    340px 260px;
+    100% 100%;
   background-position:
-    0 0,
     0 0,
     0 0;
-  background-repeat: no-repeat;
-  mix-blend-mode: soft-light;
+  background-repeat: no-repeat, no-repeat;
+  mix-blend-mode: normal;
+}
+
+html.overlay-mode::after {
+  display: none;
 }
 
-html.overlay-mode::after,
-html.overlay-mode::before {
+html.extension-mode::after {
   display: none;
 }
 
-html.extension-mode::after,
-html.extension-mode::before {
+body.overlay-mode::before,
+body.extension-mode::before {
   display: none;
 }
 
@@ -180,13 +189,19 @@ h6 {
   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%
-  );
+  background: var(--border);
+  pointer-events: none;
+  z-index: 0;
+}
+
+.app-shell::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: var(--shell-gutter);
+  width: 1px;
+  background: var(--border);
   pointer-events: none;
   z-index: 0;
 }

src/app.css

@@ -239,7 +239,7 @@ export function ChannelCommunityPanel(props: {
 
   return (
     <section className="grid gap-6 max-[960px]:gap-4 max-[960px]:border-t max-[960px]:border-(--border) max-[960px]:pt-4">
-      <div className="grid gap-2">
+      <div className="grid gap-2 px-8 max-[960px]:px-6">
         <h2 className="text-2xl font-semibold tracking-tight text-(--text)">
           Community controls
         </h2>

src/components/channel-community-panel.tsx

@@ -33,6 +33,7 @@ type SearchResponse = {
 
 export function ChannelRulesPanel(props: {
   slug: string;
+  channelDisplayName?: string | null;
   blacklistEnabled: boolean;
   setlistEnabled: boolean;
   letSetlistBypassBlacklist: boolean;
@@ -232,9 +233,11 @@ export function ChannelRulesPanel(props: {
 
   return (
     <section className="grid gap-6 max-[960px]:gap-4 max-[960px]:border-t max-[960px]:border-(--border) max-[960px]:pt-4">
-      <div className="grid gap-2">
+      <div className="grid gap-2 px-8 max-[960px]:px-6">
         <h2 className="text-2xl font-semibold tracking-tight text-(--text)">
-          Channel rules
+          {props.channelDisplayName
+            ? `${props.channelDisplayName}'s channel rules`
+            : "Channel rules"}
         </h2>
       </div>