feat: settings to toggle notifications

apps/web/package.json

@@ -28,6 +28,7 @@
     "@radix-ui/react-select": "^2.1.5",
     "@radix-ui/react-separator": "^1.1.1",
     "@radix-ui/react-slot": "^1.1.1",
+    "@radix-ui/react-switch": "^1.1.3",
     "@radix-ui/react-tooltip": "^1.1.6",
     "@slack/web-api": "^7.9.1",
     "@uidotdev/usehooks": "^2.4.1",

apps/web/src/app/(protected)/settings/follows/notifyToggle.tsx

@@ -0,0 +1,27 @@
+'use client';
+
+import { useState } from 'react';
+import { Switch } from '@/components/ui/switch';
+import { notifyStreamToggle } from '@/lib/form/actions';
+
+export default function NotifyToggle(props: Props) {
+  const [toggled, setToggled] = useState(props.toggled);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const handleToggle = async () => {
+    setIsLoading(true);
+    notifyStreamToggle(props.channel).then((res) => {
+      if (res.success) {
+        setToggled(res.toggle!);
+      }
+    });
+    setIsLoading(false);
+  };
+
+  return <Switch checked={toggled} onCheckedChange={handleToggle} disabled={isLoading} />;
+}
+
+interface Props {
+  channel: string;
+  toggled: boolean;
+}

apps/web/src/app/(protected)/settings/follows/page.tsx

@@ -0,0 +1,73 @@
+import { validateRequest } from '@/lib/auth/validate';
+import { prisma } from '@hctv/db';
+import {
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table';
+import Link from 'next/link';
+import { Button } from '@/components/ui/button';
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import NotifyToggle from './notifyToggle';
+
+export default async function Page() {
+  const { user } = await validateRequest();
+  const following = await prisma.follow.findMany({
+    where: {
+      userId: user!.id,
+    },
+    include: {
+      channel: true,
+    },
+  });
+
+  if (!following.length) {
+    return (
+      <div className="flex flex-col items-center justify-center w-full h-full">
+        <h1 className="text-2xl font-bold">No channels followed</h1>
+        <p className="text-muted-foreground">Go follow some first?</p>
+        <Link href={'/'}>
+          <Button>Back home</Button>
+        </Link>
+      </div>
+    );
+  }
+
+  return (
+    <div className="container py-10">
+      <h1 className="text-2xl font-bold mb-6">Followed Channels</h1>
+      <Table className="max-w-2xl mx-auto outline-surface bg-mantle rounded-md overflow-hidden">
+        <TableHeader>
+          <TableRow>
+            <TableHead>Channel</TableHead>
+            <TableHead className="w-[100px] text-center">Notifications</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {following.map((channel) => (
+            <TableRow key={channel.id}>
+              <TableCell className="font-medium">
+                <div className="flex items-center gap-3">
+                  <Avatar className="h-9 w-9">
+                    <AvatarImage src={channel.channel.pfpUrl} alt={channel.channel.name} />
+                    <AvatarFallback>{channel.channel.name.charAt(0)}</AvatarFallback>
+                  </Avatar>
+                  <Link href={`/channel/${channel.channel.name}`} className="hover:underline">
+                    {channel.channel.name}
+                  </Link>
+                </div>
+              </TableCell>
+              <TableCell className="text-center">
+                <NotifyToggle channel={channel.channel.name} toggled={channel.notifyStream} />
+              </TableCell>
+            </TableRow>
+          ))}
+        </TableBody>
+      </Table>
+    </div>
+  );
+}

apps/web/src/components/app/NavBar/NavBar.tsx

@@ -14,7 +14,6 @@ import {
 import { logout } from '@/lib/auth/actions';
 import { useSession } from '@/lib/providers/SessionProvider';
 import Link from 'next/link';
-import MobileNavbarLinks from '../MobileNavbarLinks/MobileNavbarLinks';
 import { ThemeSwitcher } from '../ThemeSwitcher/ThemeSwitcher';
 import { Slack } from 'lucide-react';
 import { SidebarTrigger } from '@/components/ui/sidebar';
@@ -66,6 +65,12 @@ export default function Navbar(props: Props) {
               <DropdownMenuContent className="w-56">
                 <DropdownMenuLabel>My Account</DropdownMenuLabel>
                 <DropdownMenuSeparator />
+                <DropdownMenuGroup>
+                  <Link href={`/settings/follows`}>
+                    <DropdownMenuItem className="cursor-pointer">Follows</DropdownMenuItem>
+                  </Link>
+                </DropdownMenuGroup>
+                <DropdownMenuSeparator />
                 <DropdownMenuGroup>
                   <DropdownMenuItem
                     className="cursor-pointer"

apps/web/src/components/ui/switch.tsx

@@ -0,0 +1,29 @@
+"use client"
+
+import * as React from "react"
+import * as SwitchPrimitives from "@radix-ui/react-switch"
+
+import { cn } from "@/lib/utils"
+
+const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitives.Root
+    className={cn(
+      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+      className
+    )}
+    {...props}
+    ref={ref}
+  >
+    <SwitchPrimitives.Thumb
+      className={cn(
+        "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
+      )}
+    />
+  </SwitchPrimitives.Root>
+))
+Switch.displayName = SwitchPrimitives.Root.displayName
+
+export { Switch }

apps/web/src/components/ui/table.tsx

@@ -0,0 +1,117 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Table = React.forwardRef<
+  HTMLTableElement,
+  React.HTMLAttributes<HTMLTableElement>
+>(({ className, ...props }, ref) => (
+  <div className="relative w-full overflow-auto">
+    <table
+      ref={ref}
+      className={cn("w-full caption-bottom text-sm", className)}
+      {...props}
+    />
+  </div>
+))
+Table.displayName = "Table"
+
+const TableHeader = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
+))
+TableHeader.displayName = "TableHeader"
+
+const TableBody = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tbody
+    ref={ref}
+    className={cn("[&_tr:last-child]:border-0", className)}
+    {...props}
+  />
+))
+TableBody.displayName = "TableBody"
+
+const TableFooter = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tfoot
+    ref={ref}
+    className={cn(
+      "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
+      className
+    )}
+    {...props}
+  />
+))
+TableFooter.displayName = "TableFooter"
+
+const TableRow = React.forwardRef<
+  HTMLTableRowElement,
+  React.HTMLAttributes<HTMLTableRowElement>
+>(({ className, ...props }, ref) => (
+  <tr
+    ref={ref}
+    className={cn(
+      "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
+      className
+    )}
+    {...props}
+  />
+))
+TableRow.displayName = "TableRow"
+
+const TableHead = React.forwardRef<
+  HTMLTableCellElement,
+  React.ThHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <th
+    ref={ref}
+    className={cn(
+      "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
+      className
+    )}
+    {...props}
+  />
+))
+TableHead.displayName = "TableHead"
+
+const TableCell = React.forwardRef<
+  HTMLTableCellElement,
+  React.TdHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <td
+    ref={ref}
+    className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
+    {...props}
+  />
+))
+TableCell.displayName = "TableCell"
+
+const TableCaption = React.forwardRef<
+  HTMLTableCaptionElement,
+  React.HTMLAttributes<HTMLTableCaptionElement>
+>(({ className, ...props }, ref) => (
+  <caption
+    ref={ref}
+    className={cn("mt-4 text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+TableCaption.displayName = "TableCaption"
+
+export {
+  Table,
+  TableHeader,
+  TableBody,
+  TableFooter,
+  TableHead,
+  TableRow,
+  TableCell,
+  TableCaption,
+}

apps/web/src/lib/auth/resolve.ts

@@ -27,4 +27,20 @@ export async function resolveOwnedChannels(id?: string) {
     })),
   ];
   return channels;
+}
+
+export async function resolveFollowedChannels(id?: string) {
+  const { user } = await validateRequest();
+  const db = await prisma.follow.findMany({
+    where: {
+      userId: id ?? user?.id,
+    },
+    include: {
+      channel: true,
+    },
+  });
+  if (!db) {
+    return null;
+  }
+  return db;
 }

apps/web/src/lib/form/actions.ts

@@ -6,6 +6,7 @@ import { prisma } from '@hctv/db';
 import zodVerify from '../zodVerify';
 import { onboardSchema, streamInfoEditSchema } from './zod';
 import { initializeStreamInfo } from '../instrumentation/streamInfo';
+import { resolveFollowedChannels } from '../auth/resolve';
 
 export async function editStreamInfo(prev: any, formData: FormData) {
   const { user } = await validateRequest();
@@ -97,4 +98,27 @@ export async function onboard(prev: any, formData: FormData) {
   })
 
   return { success: true };
+}
+
+export async function notifyStreamToggle(channelName: string) {
+  const { user } = await validateRequest();
+  if (!user) {
+    return { success: false, error: 'Unauthorized' };
+  }
+
+  const followed = await resolveFollowedChannels();
+  if (!followed) {
+    return { success: false, error: 'No followed channels' };
+  }
+  const channel = followed.find((f) => f.channel.name === channelName);
+  if (!channel) {
+    return { success: false, error: 'Channel not found' };
+  }
+
+  await prisma.follow.update({
+    where: { id: channel.id },
+    data: { notifyStream: !channel.notifyStream },
+  });
+
+  return { success: true, toggle: !channel.notifyStream };
 }

apps/web/src/lib/instrumentation/streamInfo.ts

@@ -133,7 +133,7 @@ export async function syncStream() {
 
           for (const follower of subscribedFollowers) {
             queue.add(`streamStartDm:${follower.user.id}`, {
-              text: `${existingStream.username} is now *live*, streaming *${existingStream.title}* (${existingStream.category})!\n<https://hctv.srizan.dev/${existingStream.username}|Go check them out>\n_Stream notifications are enabled for this user. If you want to disable them, you can do so in \`Profile > Notifications\`._`,
+              text: `${existingStream.username} is now *live*, streaming *${existingStream.title}* (${existingStream.category})!\n<https://hctv.srizan.dev/${existingStream.username}|Go check them out>\n_Stream notifications are enabled for this user. If you want to disable them, you can do so in \`Profile > Follows\`._`,
               channel: follower.user.slack_id,
               unfurl_links: true,
             });

yarn.lock

@@ -1371,6 +1371,19 @@
   dependencies:
     "@radix-ui/react-compose-refs" "1.1.1"
 
+"@radix-ui/react-switch@^1.1.3":
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-switch/-/react-switch-1.1.3.tgz#cb6386909d1d3f65a2b81a3b15da8c91d18f49b0"
+  integrity sha512-1nc+vjEOQkJVsJtWPSiISGT6OKm4SiOdjMo+/icLxo2G4vxz1GntC5MzfL4v8ey9OEfw787QCD1y3mUv0NiFEQ==
+  dependencies:
+    "@radix-ui/primitive" "1.1.1"
+    "@radix-ui/react-compose-refs" "1.1.1"
+    "@radix-ui/react-context" "1.1.1"
+    "@radix-ui/react-primitive" "2.0.2"
+    "@radix-ui/react-use-controllable-state" "1.1.0"
+    "@radix-ui/react-use-previous" "1.1.0"
+    "@radix-ui/react-use-size" "1.1.0"
+
 "@radix-ui/react-tooltip@^1.1.6":
   version "1.1.8"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-tooltip/-/react-tooltip-1.1.8.tgz#1aa2a575630fca2b2845b62f85056bb826bec456"