Merge pull request #741 from miosenpai/playlist-init

HolodexNet · Nov 1, 2023 · 33bddaf · 33bddaf
2 parents adb3d4a + d5298e9
commit 33bddaf
Show file tree

Hide file tree

Showing 37 changed files with 895 additions and 63 deletions.
diff --git a/packages/react/package-lock.json b/packages/react/package-lock.json
diff --git a/packages/react/package.json b/packages/react/package.json
@@ -18,6 +18,7 @@
     "@hookform/resolvers": "^3.3.2",
     "@radix-ui/colors": "^3.0.0",
     "@radix-ui/react-accordion": "^1.1.2",
+    "@radix-ui/react-alert-dialog": "^1.0.5",
     "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-context-menu": "^2.1.5",
     "@radix-ui/react-dialog": "^1.0.5",
@@ -80,6 +81,7 @@
     "@types/node": "^20.8.7",
     "@types/react": "^18.2.31",
     "@types/react-dom": "^18.2.14",
+    "@types/react-grid-layout": "^1.3.4",
     "@typescript-eslint/eslint-plugin": "^6.8.0",
     "@typescript-eslint/parser": "^6.8.0",
     "@unocss/eslint-config": "^0.56.5",

diff --git a/packages/react/src/components/channel/ChannelCard.tsx b/packages/react/src/components/channel/ChannelCard.tsx
@@ -45,7 +45,7 @@ export function ChannelCard({
   );
   return (
     // Set min-height because react-virtuoso will break if the height is not fixed
-    <div className="group relative flex h-full min-h-[24rem] w-full flex-col items-center gap-2 rounded-md bg-base-3 p-4">
+    <div className="bg-base-3 group relative flex h-full min-h-[24rem] w-full flex-col items-center gap-2 rounded-md p-4">
       <ChannelMenu
         {...{
           id,
@@ -75,12 +75,12 @@ export function ChannelCard({
         {name}
       </div>
       <div className="flex flex-col items-center">
-        <div className="whitespace-nowrap text-sm text-base-11">
+        <div className="text-base-11 whitespace-nowrap text-sm">
           {t("component.channelInfo.subscriberCount", {
             n: formatCount(subscriber_count ?? "0"),
           })}
         </div>
-        <div className="flex flex-wrap justify-center gap-x-1 gap-y-0 text-sm text-base-11">
+        <div className="text-base-11 flex flex-wrap justify-center gap-x-1 gap-y-0 text-sm">
           <span className="whitespace-nowrap">
             {t("component.channelInfo.videoCount", { 0: video_count ?? 0 })}
           </span>

diff --git a/packages/react/src/components/header/header.tsx b/packages/react/src/components/header/header.tsx
@@ -31,7 +31,7 @@ export function Header({ id }: HeaderProps) {
   const { logout } = useAuth();
 
   return (
-    <header id={id} className="z-40 flex items-center gap-4 bg-base-2 px-2">
+    <header id={id} className="bg-base-2 z-40 flex items-center gap-4 px-2">
       <Button
         size="icon"
         variant="ghost"
@@ -45,15 +45,15 @@ export function Header({ id }: HeaderProps) {
       <Button
         size="icon"
         variant="ghost"
-        className="-ml-3 p-0 text-base-9"
+        className="text-base-9 -ml-3 p-0"
         onClick={() => toggle(!dark)}
       >
         <div className="i-heroicons:magnifying-glass h-full text-xl" />
       </Button>
       <Button
         size="icon"
         variant="ghost"
-        className="p-0 text-base-9"
+        className="text-base-9 p-0"
         onClick={() => toggle(!dark)}
       >
         <div className="i-heroicons:sun-20-solid h-full text-xl " />

diff --git a/packages/react/src/components/header/searchbar/components/QueryBadge.tsx b/packages/react/src/components/header/searchbar/components/QueryBadge.tsx
@@ -39,7 +39,7 @@ export function QueryBadge({ item }: { item: PrimitiveAtom<QueryItem> }) {
     <Badge key={queryItem.type + queryItem.value} variant="primary">
       {categoryName(queryItem)}: {categoryValue(queryItem)}
       <button
-        className="ml-1 rounded-full outline-none ring-offset-base-2 focus:ring-2 focus:ring-primary-9 focus:ring-offset-2"
+        className="ring-offset-base-2 focus:ring-primary-9 ml-1 rounded-full outline-none focus:ring-2 focus:ring-offset-2"
         onKeyDown={(e) => {
           if (e.key === "Enter") {
             querySplitItemAction({ type: "remove", atom: item });
@@ -51,7 +51,7 @@ export function QueryBadge({ item }: { item: PrimitiveAtom<QueryItem> }) {
         }}
         onClick={() => querySplitItemAction({ type: "remove", atom: item })}
       >
-        <X className="h-3 w-3 text-base-8 hover:text-base-11" />
+        <X className="text-base-8 hover:text-base-11 h-3 w-3" />
       </button>
     </Badge>
   );

diff --git a/packages/react/src/components/header/searchbar/components/SearchBar.tsx b/packages/react/src/components/header/searchbar/components/SearchBar.tsx
@@ -82,7 +82,7 @@ export function SearchBar({ className }: HTMLAttributes<HTMLDivElement>) {
       className={cn("overflow-visible bg-transparent", className)}
       shouldFilter={false}
     >
-      <div className="group rounded-md border border-base px-3 py-2 text-sm ring-offset-base-2 focus-within:ring-2 focus-within:ring-primary focus-within:ring-offset-2">
+      <div className="border-base ring-offset-base-2 focus-within:ring-primary group rounded-md border px-3 py-2 text-sm focus-within:ring-2 focus-within:ring-offset-2">
         <div className="flex flex-wrap gap-1">
           {queryPieces.map((queryItem, i) => {
             return <QueryBadge item={queryItem} key={"badge" + i} />;
@@ -95,14 +95,14 @@ export function SearchBar({ className }: HTMLAttributes<HTMLDivElement>) {
             onBlur={() => setOpen(false)}
             onFocus={() => setOpen(true)}
             placeholder={t("component.search.searchLabel")}
-            className="ml-2 flex-1 bg-transparent outline-none placeholder:text-base-8"
+            className="placeholder:text-base-8 ml-2 flex-1 bg-transparent outline-none"
           />
         </div>
       </div>
       <div className="relative">
         {open && autocomplete.length > 0 ? (
           <>
-            <div className="absolute top-2 z-10 w-full rounded-md border border-base bg-base-1 text-base-11 shadow-md outline-none animate-in">
+            <div className="border-base bg-base-1 text-base-11 animate-in absolute top-2 z-10 w-full rounded-md border shadow-md outline-none">
               <CommandGroup
                 heading={<div>{t("search.menu_header_text")}</div>}
               />

diff --git a/packages/react/src/components/layout/Frame.scss b/packages/react/src/components/layout/Frame.scss
@@ -76,7 +76,8 @@ $responsive-breakpoint: 768px;
 
   > main {
     grid-area: content;
-    overflow-y: auto;
+    // disabling for now so we can use position sticky
+    // overflow-y: auto;
   }
 
   > footer {

diff --git a/packages/react/src/components/layout/Frame.tsx b/packages/react/src/components/layout/Frame.tsx
@@ -64,7 +64,7 @@ export function Frame() {
   return (
     <VideoPortalContext.Provider value={VideoPortalNode}>
       <div className={mainClasses} id="layout">
-        <aside className="z-50 border-r border-r-base">
+        <aside className="border-r-base z-50 border-r">
           <Sidebar id="sidebar" onClose={toggle} />
         </aside>
         <Header id="header" />

diff --git a/packages/react/src/components/layout/InlayContainer.tsx b/packages/react/src/components/layout/InlayContainer.tsx
@@ -43,7 +43,7 @@ export function InlayContainer({ routes }: InlayContainerProps) {
           "flex flex-col gap-4": itemSelected,
         })}
       >
-        <div className="block w-full rounded-lg bg-base-3 p-2 md:hidden">
+        <div className="bg-base-3 block w-full rounded-lg p-2 md:hidden">
           <Button
             size="lg"
             variant="link"
@@ -54,7 +54,7 @@ export function InlayContainer({ routes }: InlayContainerProps) {
             {t("component.mainNav.back")}
           </Button>
         </div>
-        <div className="w-full rounded-lg bg-base-3 p-2 md:p-4">
+        <div className="bg-base-3 w-full rounded-lg p-2 md:p-4">
           <Suspense fallback={<Loading size="xl" />}>
             <Outlet />
           </Suspense>

diff --git a/packages/react/src/components/login/LoginButtons.tsx b/packages/react/src/components/login/LoginButtons.tsx
@@ -26,7 +26,7 @@ export function LoginButtons() {
       {!user?.discord_id && (
         <Button
           size="lg"
-          className="w-full bg-iris-7"
+          className="bg-iris-7 w-full"
           onClick={() =>
             open(
               `https://discord.com/api/oauth2/authorize?client_id=793619250115379262&redirect_uri=${encodeURIComponent(

diff --git a/packages/react/src/components/player/Controlbar.tsx b/packages/react/src/components/player/Controlbar.tsx
@@ -12,20 +12,20 @@ export function Controlbar({
   const { t } = useTranslation();
 
   return (
-    <div className="flex items-center gap-2 overflow-x-auto px-4 py-2 text-base-11">
+    <div className="text-base-11 flex items-center gap-2 overflow-x-auto px-4 py-2">
       <Button
-        className="flex shrink-0 @screen-md:hidden"
+        className="@screen-md:hidden flex shrink-0"
         size="icon"
         variant="ghost"
         onClick={() => navigate(-1)}
       >
         <div className="i-heroicons:arrow-left" />
       </Button>
-      <Button className="flex @screen-lg:hidden" variant="ghost">
+      <Button className="@screen-lg:hidden flex" variant="ghost">
         <div className="i-heroicons:chat-bubble-bottom-center-text" />
         TL
       </Button>
-      <Button className="flex @screen-lg:hidden" variant="ghost">
+      <Button className="@screen-lg:hidden flex" variant="ghost">
         <div className="i-heroicons:chat-bubble-left-right" />
         Chat
       </Button>

diff --git a/packages/react/src/components/player/PlayerChannelCard.tsx b/packages/react/src/components/player/PlayerChannelCard.tsx
@@ -14,18 +14,18 @@ export function PlayerChannelCard({ id }: { id?: string }) {
   console.log(data);
 
   return (
-    <div className="flex w-full items-center gap-4 rounded-lg bg-base-4 px-4 py-2">
+    <div className="bg-base-4 flex w-full items-center gap-4 rounded-lg px-4 py-2">
       <Link className="flex grow gap-4" to={`/channel/${id}`}>
         <img className="h-12 w-12 rounded-full" src={data.photo} />
         <div className="flex flex-col">
           <span className="line-clamp-1 text-lg font-bold">{data?.name}</span>
           {data.org && data.group && (
-            <span className="line-clamp-1 text-sm text-base-11">
+            <span className="text-base-11 line-clamp-1 text-sm">
               {data.org} / {data.group}
             </span>
           )}
           {data.subscriber_count && (
-            <span className="line-clamp-1 text-sm text-base-11">
+            <span className="text-base-11 line-clamp-1 text-sm">
               {t("component.channelInfo.subscriberCount", {
                 n: formatCount(data.subscriber_count),
               })}

diff --git a/packages/react/src/components/player/PlayerStats.tsx b/packages/react/src/components/player/PlayerStats.tsx
@@ -33,7 +33,7 @@ export function PlayerStats({
   });
 
   return (
-    <div className="flex items-center gap-1 text-base-11">
+    <div className="text-base-11 flex items-center gap-1">
       <Badge variant="outline" className="mr-2 capitalize">
         {topic_id}
       </Badge>

diff --git a/packages/react/src/components/playlist/DeletePlaylistDialog.tsx b/packages/react/src/components/playlist/DeletePlaylistDialog.tsx
@@ -0,0 +1,56 @@
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@/shadcn/ui/alert-dialog";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { usePlaylistDeleteMutation } from "@/services/playlist.service";
+
+interface Props {
+  triggerElement: React.ReactNode;
+  playlistId: number;
+  playlistName: string;
+}
+
+export default function DeletePlaylistDialog({
+  triggerElement,
+  playlistId,
+  playlistName,
+}: Props) {
+  const { t } = useTranslation();
+  const deleteMutation = usePlaylistDeleteMutation();
+
+  return (
+    <AlertDialog>
+      <AlertDialogTrigger asChild>{triggerElement}</AlertDialogTrigger>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>
+            {t("component.playlist.menu.delete-playlist")}
+          </AlertDialogTitle>
+          <AlertDialogDescription>
+            {/* todo: intl this */}
+            Are you sure you want to delete playlist <b>{playlistName}</b>?
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel>
+            {t("views.library.deleteConfirmationCancel")}
+          </AlertDialogCancel>
+          <AlertDialogAction
+            onClick={() => deleteMutation.mutate({ playlistId })}
+          >
+            {t("views.library.deleteConfirmationOK")}
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+}