add channel name preferences everywhere

HolodexNet · Jul 3, 2024 · 48aac22 · 48aac22
1 parent 6610f60
commit 48aac22
Show file tree

Hide file tree

Showing 7 changed files with 61 additions and 25 deletions.
diff --git a/packages/react/src/components/channel/ChannelCard.tsx b/packages/react/src/components/channel/ChannelCard.tsx
@@ -7,6 +7,7 @@ import { ChannelImg } from "./ChannelImg";
 import { TopicBadge } from "../topic/TopicBadge";
 import { ChannelSocials } from "./ChannelSocials";
 import { Link, useNavigate } from "react-router-dom";
+import { usePreferredName } from "@/store/settings";
 
 type WithNonOptional<T, NonOptionalKeys extends keyof T> = Pick<
   T,
@@ -75,6 +76,11 @@ export function ChannelCard({
     [channelHref, navigate],
   );
 
+  const preferredName = usePreferredName({
+    name,
+    english_name,
+  });
+
   switch (size) {
     case "xs":
     case "sm":
@@ -93,7 +99,9 @@ export function ChannelCard({
                 {org}
                 {group && ` / ${group}`}
               </div>
-              <div className="line-clamp-1 text-lg font-bold">{name}</div>
+              <div className="line-clamp-1 text-lg font-bold">
+                {preferredName}
+              </div>
               <div className="text-sm text-base-11">
                 {showSubscribers &&
                   t("component.channelInfo.subscriberCount", {
@@ -111,7 +119,11 @@ export function ChannelCard({
               {size === "sm" && (
                 <div className="mt-1 flex max-w-full gap-1 overflow-x-auto">
                   {top_topics?.map((topic) => (
-                    <TopicBadge size="sm" topic={topic} />
+                    <TopicBadge
+                      size="sm"
+                      topic={topic}
+                      className="border-base-7 capitalize text-base-10 "
+                    />
                   ))}
                 </div>
               )}
@@ -167,19 +179,10 @@ export function ChannelCard({
               className={`z-10 h-24 w-24 ${inactive && "brightness-75 saturate-50"}`}
               channelId={id}
             />
-            {/* {inactive && (
-                    <div
-                      className="i-fa:graduation-cap absolute z-10 h-24 w-24 text-[40px] leading-10"
-                      style={{
-                        transform: "translate(24px,-10px) rotate(20deg)",
-                        color: "var(--base-10)",
-                      }}
-                    ></div>
-                  )} */}
             <div
               className={`${inactive && "text-base-10"} z-10 line-clamp-2 text-center text-lg font-bold`}
             >
-              {name}
+              {preferredName}
             </div>
             <div className="flex flex-col items-center">
               <div className="whitespace-nowrap text-sm text-base-11">

diff --git a/packages/react/src/components/language/ClipLanguageSelector.tsx b/packages/react/src/components/language/ClipLanguageSelector.tsx
@@ -11,6 +11,7 @@ import { Popover, PopoverTrigger, PopoverContent } from "@/shadcn/ui/popover";
 import { Button } from "@/shadcn/ui/button";
 import { cn } from "@/lib/utils";
 import { clipLanguageAtom } from "@/store/settings";
+import { useTranslation } from "react-i18next";
 
 // Define the toggle atom
 const toggleClipLanguageAtom = atom(
@@ -32,6 +33,7 @@ export const ClipLanguageSelector: React.FC = () => {
   const [selectedLangs] = useAtom(clipLanguageAtom);
   const toggleLanguage = useSetAtom(toggleClipLanguageAtom);
   const [open, setOpen] = React.useState(false);
+  const { t } = useTranslation();
 
   return (
     <Popover open={open} onOpenChange={setOpen}>
@@ -41,16 +43,23 @@ export const ClipLanguageSelector: React.FC = () => {
           role="combobox"
           size="icon-lg"
           aria-expanded={open}
+          title={t("views.settings.clipLanguageSelection")}
         >
-          <div className="i-fluent:globe-search-24-regular text-lg"></div>
+          <div className="relative h-6 w-6">
+            <div className="i-tabler:language-hiragana absolute h-full w-full text-xl" />
+            <div
+              className="i-mdi:filter-gear-outline absolute inset-0 mb-auto ml-auto h-full w-full opacity-50"
+              style={{ fontSize: "10px", marginBottom: "3px" }}
+            />
+          </div>
+          <span className="sr-only">Select clip language</span>{" "}
         </Button>
       </PopoverTrigger>
       <PopoverContent className="max-w-[80vw] p-0">
         <Command>
           {/* <CommandInput placeholder={t("Search languages...")} /> */}
           <CommandList>
-            {/* <CommandEmpty>{t("No language found.")}</CommandEmpty> */}
-            <CommandGroup>
+            <CommandGroup heading={t("views.settings.clipLanguageSelection")}>
               {CLIPPER_LANGS.map((lang) => (
                 <CommandItem
                   key={lang.value}

diff --git a/packages/react/src/components/video/VideoCard.tsx b/packages/react/src/components/video/VideoCard.tsx
@@ -9,6 +9,7 @@ import { useTranslation } from "react-i18next";
 import { useDuration } from "@/hooks/useDuration";
 import { clsx } from "clsx";
 import { VideoThumbnail } from "./VideoThumbnail";
+import { usePreferredName } from "@/store/settings";
 
 export type VideoCardType = VideoRef &
   Partial<VideoBase> &
@@ -180,6 +181,8 @@ export function VideoCard({
     </VideoMenu>
   );
 
+  const chName = usePreferredName(video.channel);
+
   return (
     <div
       className={videoCardClasses.outerLayer}
@@ -262,7 +265,7 @@ export function VideoCard({
               to={`/channel/${video.channel.id}`}
               onClick={(e) => onClick && onClick("channel", e)}
             >
-              {video.channel.name}
+              {chName}
             </Link>
           )}
           {size != "xs" && (

diff --git a/packages/react/src/index.css b/packages/react/src/index.css
@@ -21,3 +21,12 @@
     /* font-family: "Noto Sans", sans-serif; */
   }
 }
+
+.tsqd-parent-container .tsqd-transitions-container>div {
+  /* button[aria-label="Open Tanstack query devtools"] aint it.*/
+  margin-top: 50px;
+}
+
+.jotai-devtools-trigger-button {
+  margin-top: 100px;
+}
diff --git a/packages/react/src/routes/channel.tsx b/packages/react/src/routes/channel.tsx
@@ -7,6 +7,7 @@ import { formatCount } from "@/lib/time";
 import { getChannelBannerImages } from "@/lib/utils";
 import { useChannel } from "@/services/channel.service";
 import { Tabs, TabsList, TabsTrigger } from "@/shadcn/ui/tabs";
+import { usePreferredName } from "@/store/settings";
 import { useState } from "react";
 import { Helmet } from "react-helmet-async";
 import { useTranslation } from "react-i18next";
@@ -33,12 +34,14 @@ export default function Channel() {
 
   const { data: channel } = useChannel(id!);
 
+  const preferredName = usePreferredName(channel ?? {});
+
   if (!id || !channel) return <Loading size="md" />;
 
   return (
     <>
       <Helmet>
-        <title>{channel.name} - Holodex</title>
+        <title>{preferredName} - Holodex</title>
       </Helmet>
       <div className="w-full">
         <img
@@ -68,7 +71,7 @@ export default function Channel() {
                     {channel?.group && ` / ${channel?.group}`}
                   </div>
                   <div className="line-clamp-1 text-lg font-bold">
-                    {channel?.name}
+                    {preferredName}
                   </div>
                   <div className="text-sm text-base-11">
                     {t("component.channelInfo.subscriberCount", {
@@ -83,7 +86,12 @@ export default function Channel() {
                   </div>
                   <div className="mt-1 flex max-w-full gap-1 overflow-x-auto">
                     {channel?.top_topics?.map((topic) => (
-                      <TopicBadge key={topic} size="sm" topic={topic} />
+                      <TopicBadge
+                        key={topic}
+                        size="sm"
+                        topic={topic}
+                        className="border-base-7 capitalize text-base-10 "
+                      />
                     ))}
                   </div>
                 </div>

diff --git a/packages/react/src/routes/home.tsx b/packages/react/src/routes/home.tsx
@@ -133,7 +133,7 @@ export function Home() {
             {t("views.home.recentVideoToggles.subber")}
           </TabsTrigger>
           <div className="flex grow" />
-          <ClipLanguageSelector />
+          {tab === "clips" && <ClipLanguageSelector />}
           <Button
             className="shrink-0"
             size="icon-lg"

diff --git a/packages/react/src/routes/orgChannels.tsx b/packages/react/src/routes/orgChannels.tsx
@@ -5,13 +5,19 @@ import { useChannels } from "@/services/channel.service";
 import { Label } from "@/shadcn/ui/label";
 import { RadioGroup, RadioGroupItem } from "@/shadcn/ui/radio-group";
 import { orgAtom } from "@/store/org";
-import { useAtomValue } from "jotai";
-import { useEffect, useMemo, useState } from "react";
+import { useAtom, useAtomValue } from "jotai";
+import { atomWithStorage } from "jotai/utils";
+import { useEffect, useMemo } from "react";
 import { Helmet } from "react-helmet-async";
 import { useTranslation } from "react-i18next";
 import { useNavigate, useParams } from "react-router-dom";
 import { Virtuoso, VirtuosoGrid } from "react-virtuoso";
 
+const orgChannelDisplayStyleAtom = atomWithStorage<"grid" | "list">(
+  "orgChannelDisplayStyle",
+  window.innerWidth > 498 ? "grid" : "list",
+);
+
 export default function ChannelsOrg() {
   const { t } = useTranslation();
   const navigate = useNavigate();
@@ -33,9 +39,7 @@ export default function ChannelsOrg() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [currentOrg]);
 
-  const [displayStyle, setDisplayStyle] = useState(() =>
-    window.innerWidth > 498 ? "grid" : "list",
-  );
+  const [displayStyle, setDisplayStyle] = useAtom(orgChannelDisplayStyleAtom);
 
   const channelList = useMemo(() => channels?.pages.flat() ?? [], [channels]);