modify mentions listing, renaming some vars in main

Author: sphinxrave

packages/react/src/components/player/MentionsCard.tsx

@@ -1,17 +1,23 @@
+import { ScrollArea, ScrollBar } from "@/shadcn/ui/scroll-area";
 import { ChannelImg } from "../channel/ChannelImg";
 
 export function Mentions({ mentions }: { mentions: ShortChannel[] }) {
   return (
-    <div className="flex flex-row gap-2 rounded-lg bg-base-3 p-4">
-      {mentions.map((mention) => (
-        <ChannelImg
-          key={mention.id}
-          className="h-14"
-          channelId={mention.id}
-          photo={mention.photo}
-          size={40}
-        />
-      ))}
+    <div className="rounded-lg bg-base-3 p-1">
+      <ScrollArea type="hover" className="p-1">
+        <div className="flex w-full flex-row gap-2">
+          {mentions.map((mention) => (
+            <ChannelImg
+              key={mention.id}
+              className="h-14"
+              channelId={mention.id}
+              photo={mention.photo}
+              size={40}
+            />
+          ))}
+        </div>
+        <ScrollBar orientation="horizontal" />
+      </ScrollArea>
     </div>
   );
 }

packages/react/src/hooks/useVideoSelection.ts

@@ -6,6 +6,22 @@ const selectedVideosAtom = atom<PlaceholderVideo[]>([]);
 export const selectedVideoSetReadonlyAtom = atom(
   (get) => new Set(get(selectedVideosAtom).map((v) => v.id)),
 );
+/**
+ * Custom hook to manage video selection state.
+ *
+ * Provides functionality to enable/disable selection mode, add/remove videos
+ * from the selection, and clear the selection. Returns the current selection
+ * mode, selected videos, and functions to manipulate the selection.
+ *
+ * @returns {Object} An object containing:
+ *  - selectionMode: boolean indicating if selection mode is active.
+ *  - setSelectionMode: function to toggle selection mode.
+ *  - selectedVideos: array of currently selected videos.
+ *  - setSelectedVideos: function to manually set selected videos.
+ *  - addVideo: function to add a video to the selection.
+ *  - removeVideo: function to remove a video from the selection by ID.
+ *  - clearSelection: function to clear all selected videos.
+ */
 export const useVideoSelection = () => {
   const [selectionMode, setSelectionMode] = useAtom(selectionModeAtom);
   const [selectedVideos, setSelectedVideos] = useAtom(selectedVideosAtom);

packages/react/src/routes/favorites/favoritesHome.tsx

@@ -59,26 +59,26 @@ export function FavoritesHome() {
   const [searchParams, setSearchParams] = useSearchParams();
   const { t } = useTranslation();
   // const { org } = useParams();
-  const [tab, setTab] = useState(searchParams.get("tab") ?? "live");
+  const [activeTab, setActiveTab] = useState(searchParams.get("tab") ?? "live");
 
   // useEffect(() => {
   //   navigate(`/org/${currentOrg}`, { replace: true });
   // }, [currentOrg, navigate]);
 
   useEffect(() => {
-    console.log(`tab changed ${tab}`);
-    searchParams.set("tab", tab);
+    console.log(`tab changed ${activeTab}`);
+    searchParams.set("tab", activeTab);
     setSearchParams(searchParams, { replace: true });
-  }, [searchParams, setSearchParams, tab]);
+  }, [searchParams, setSearchParams, activeTab]);
 
   // TODO: probably use a different flag than "Oshis", but idk between Members or What
   return (
     <>
       <Helmet>
         <title>{t("component.mainNav.favorites")} - Holodex</title>
       </Helmet>
-      <Tabs defaultValue={tab} onValueChange={setTab}>
-        <StickyTabsList tab={tab} fourthTab="Oshis" />
+      <Tabs defaultValue={activeTab} onValueChange={setActiveTab}>
+        <StickyTabsList activeTab={activeTab} membersTabLabel="Oshis" />
         <TabsContent value="live">
           <FavoritesLive />
         </TabsContent>

packages/react/src/routes/home/home.tsx

@@ -37,7 +37,7 @@ export function Home() {
   const { t } = useTranslation();
   const { org } = useParams();
   const setMostRecentOrg = useSetAtom(mostRecentOrgAtom);
-  const [tab, setTab] = useState(searchParams.get("tab") ?? "live");
+  const [activeTab, setActiveTab] = useState(searchParams.get("tab") ?? "live");
 
   if (!org) {
     // it's weird ther's no org.
@@ -51,10 +51,10 @@ export function Home() {
   }, [org]);
 
   useEffect(() => {
-    console.log(`tab changed ${tab}`);
-    searchParams.set("tab", tab);
+    console.log(`tab changed ${activeTab}`);
+    searchParams.set("tab", activeTab);
     setSearchParams(searchParams, { replace: true });
-  }, [searchParams, setSearchParams, tab]);
+  }, [searchParams, setSearchParams, activeTab]);
 
   if (!org) return <Navigate to="/org404" />;
 
@@ -63,8 +63,8 @@ export function Home() {
       <Helmet>
         <title>{org} - Holodex</title>
       </Helmet>
-      <Tabs defaultValue={tab} onValueChange={setTab}>
-        <StickyTabsList tab={tab} fourthTab="Members" />
+      <Tabs defaultValue={activeTab} onValueChange={setActiveTab}>
+        <StickyTabsList activeTab={activeTab} membersTabLabel="Members" />
         <TabsContent value="live">
           <LiveTab />
         </TabsContent>
@@ -83,11 +83,11 @@ export function Home() {
 }
 
 function StickyTabsList({
-  tab,
-  fourthTab,
+  activeTab,
+  membersTabLabel,
 }: {
-  tab: string;
-  fourthTab: string;
+  activeTab: string;
+  membersTabLabel: string;
 }) {
   const { t } = useTranslation();
   // usehooks-ts way:
@@ -126,14 +126,14 @@ function StickyTabsList({
       <TabsTrigger value="clips">
         {t("views.home.recentVideoToggles.subber")}
       </TabsTrigger>
-      <TabsTrigger value="members">{fourthTab}</TabsTrigger>
+      <TabsTrigger value="members">{membersTabLabel}</TabsTrigger>
       <Separator orientation="vertical" className="relative h-10" />
       {/* The h-10 on this separator is actually load bearing - it maintains the height of the whole tab list */}
       {/* Optional Control Buttons */}
-      {tab === "clips" && <ClipLanguageSelector />}
-      {tab !== "members" && <CardSizeToggle />}
+      {activeTab === "clips" && <ClipLanguageSelector />}
+      {activeTab !== "members" && <CardSizeToggle />}
       {(user?.role === "admin" || user?.role === "editor") &&
-        tab != "members" && <EditingStateToggle />}
+        activeTab != "members" && <EditingStateToggle />}
     </TabsList>
   );
 }

packages/react/src/shadcn/ui/scroll-area.tsx

@@ -40,7 +40,7 @@ const ScrollBar = React.forwardRef<
   >
     <ScrollAreaPrimitive.ScrollAreaThumb
       className={cn(
-        "relative rounded-full bg-border",
+        "relative rounded-full bg-base-6",
         orientation === "vertical" && "flex-1"
       )}
     />