messing around with the ChatCard

HolodexNet · Jun 12, 2024 · 49d5af7 · 49d5af7
1 parent 611839b
commit 49d5af7
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 48 deletions.
diff --git a/packages/react/src/components/player/ChatCard.tsx b/packages/react/src/components/player/ChatCard.tsx
@@ -35,25 +35,27 @@ export function ChatCard({
           <Button
             size="lg"
             variant="ghost"
-            className="flex w-full justify-start rounded-none px-4 py-2"
+            className="flex w-full justify-start rounded-none px-4 py-2 transition-[padding] active:transform-none active:px-5"
             onClick={() => setChatOpen((v) => !v)}
           >
             <div
               className={chatOpen ? "i-heroicons:minus" : "i-heroicons:plus"}
             />
-            {chatOpen ? "Close chat" : "Open chat"}
+            {"Chat"}
 
-            <Button
-              size="icon"
-              variant="ghost"
-              className="ml-auto hover:bg-primary-6"
-              onClick={(e) => {
-                e.stopPropagation();
-                nextChatBasis();
-              }}
-            >
-              <div className="i-fluent:arrow-autofit-height-dotted-24-regular"></div>
-            </Button>
+            {chatOpen && (
+              <Button
+                size="icon"
+                variant="ghost"
+                className="ml-auto hover:bg-primary-6"
+                onClick={(e) => {
+                  e.stopPropagation();
+                  nextChatBasis();
+                }}
+              >
+                <div className="i-fluent:arrow-autofit-height-dotted-24-regular"></div>
+              </Button>
+            )}
           </Button>
         </CollapsibleTrigger>
         <CollapsibleContent asChild>
@@ -77,13 +79,13 @@ export function ChatCard({
           <Button
             size="lg"
             variant="ghost"
-            className="flex w-full justify-start rounded-none px-4 py-2"
+            className="flex w-full justify-start rounded-none px-4 py-2 active:transform-none active:px-5"
             onClick={() => setTlOpen((v) => !v)}
           >
             <div
               className={tlOpen ? "i-heroicons:minus" : "i-heroicons:plus"}
             />
-            {tlOpen ? "Close TL" : "Open TL"}
+            {"TLdex"}
           </Button>
         </CollapsibleTrigger>
         <CollapsibleContent asChild>

diff --git a/packages/react/src/components/player/QueueList.tsx b/packages/react/src/components/player/QueueList.tsx
@@ -8,14 +8,18 @@ import {
   CollapsibleContent,
   CollapsibleTrigger,
 } from "@/shadcn/ui/collapsible";
-import { useState } from "react";
+import { useMemo, useState } from "react";
 import NewPlaylistDialog from "../playlist/NewPlaylistDialog";
 import { cn } from "@/lib/utils";
 
 export function QueueList({ currentId }: { currentId?: string }) {
-  const [open, setOpen] = useState(true);
   const { t } = useTranslation();
   const [queue, setQueue] = useAtom(queueAtom);
+  // currentIdInQueue:
+  const currentIdIdxInQueue = useMemo(() => {
+    return currentId && queue.findIndex(({ id }) => currentId === id) + 1;
+  }, [currentId, queue]);
+  const [open, setOpen] = useState(!!currentIdIdxInQueue);
 
   return (
     <Collapsible
@@ -32,41 +36,36 @@ export function QueueList({ currentId }: { currentId?: string }) {
           <div className={open ? "i-heroicons:minus" : "i-heroicons:plus"} />
           {t("component.queue.title")}
           <span className="ml-auto text-sm text-base-11">
-            {currentId &&
-              queue.findIndex(({ id }) => currentId === id) + 1 + " / "}
+            {currentIdIdxInQueue ? currentIdIdxInQueue + " / " : ""}
             {queue.length} items
           </span>
         </Button>
       </CollapsibleTrigger>
       <CollapsibleContent>
-        <div className="flex max-h-[70vh] flex-col overflow-y-auto">
-          <div className="flex justify-between">
-            <NewPlaylistDialog
-              triggerElement={
-                <Button variant="ghost">
-                  <div className="i-heroicons:plus-circle" />
-                  {t("component.playlist.menu.new-playlist")}
-                </Button>
-              }
-              videoIds={queue.map(({ id }) => id)}
-            />
+        {open && (
+          <div className="flex max-h-[70vh] flex-col overflow-y-auto">
+            <div className="flex justify-between">
+              <NewPlaylistDialog
+                triggerElement={
+                  <Button variant="ghost">
+                    <div className="i-heroicons:plus-circle" />
+                    {t("component.playlist.menu.new-playlist")}
+                  </Button>
+                }
+                videoIds={queue.map(({ id }) => id)}
+              />
 
-            <Button variant="ghost" onClick={() => setQueue([])}>
-              Clear
-            </Button>
+              <Button variant="ghost" onClick={() => setQueue([])}>
+                Clear
+              </Button>
+            </div>
+            <div className="flex flex-col px-2">
+              {queue.map((video) => (
+                <VideoCard showDuration={false} size="sm" video={video} />
+              ))}
+            </div>
           </div>
-          <div className="flex flex-col px-2">
-            {queue.map((video) => (
-              // <div
-              //   className={cn("px-4", {
-              //     "bg-base-5": currentId === video.id,
-              //   })}
-              // >
-              <VideoCard showDuration={false} size="sm" video={video} />
-              // </div>
-            ))}
-          </div>
-        </div>
+        )}
       </CollapsibleContent>
     </Collapsible>
   );

diff --git a/packages/react/src/routes/watch.tsx b/packages/react/src/routes/watch.tsx
@@ -23,10 +23,8 @@ import { queueAtom } from "@/store/queue";
 import { useAtom, useAtomValue } from "jotai";
 import { Helmet } from "react-helmet-async";
 import { useLocation, useParams } from "react-router-dom";
-import useMeasure from "react-use-measure";
 
 export default function Watch() {
-  console.log("rerendered watch!");
   const location = useLocation();
   const { id } = useParams();
   const { value: clipLang } = useAtomValue(clipLangAtom);

diff --git a/packages/react/src/shadcn/ui/button.variants.ts b/packages/react/src/shadcn/ui/button.variants.ts
@@ -20,7 +20,7 @@ export const buttonVariants = cva(
         link: "text-primary underline-offset-4 hover:underline focus-visible:underline focus-visible:ring-secondary-7",
       },
       size: {
-        default: "h-8 gap-2 px-3.5 py-2",
+        default: "h-8 gap-2 px-3.5 py-2", // also counts as "md"
         sm: "h-6 gap-1.5 rounded-md px-1 text-xs",
         lg: "h-10 gap-3 rounded-md px-6 text-lg ",
         icon: "h-8 w-8",