From 39924b61a771629625c0fb582856c49cfcd01796 Mon Sep 17 00:00:00 2001
From: sphinxrave <62570796+sphinxrave@users.noreply.github.com>
Date: Sat, 26 Oct 2024 21:19:07 -0700
Subject: [PATCH] nitpicking icons

---
 packages/react/grep-icons.py                  |  2 +-
 .../about/placeholder/FormFields.tsx          |  5 +-
 .../react/src/components/header/header.tsx    |  2 +-
 .../playlist/IndividualPlaylist.tsx           |  9 +--
 .../react/src/components/sidebar/sidebar.tsx  |  2 +-
 .../react/src/components/tldex/TLChat.tsx     |  2 +-
 .../src/components/video/MainVideoListing.tsx |  2 +-
 .../components/video/VideoCardPlaceholder.tsx | 55 +++++++++----------
 packages/react/src/routes/about/general.tsx   |  4 +-
 .../react/src/routes/settings/content.tsx     |  2 +-
 10 files changed, 42 insertions(+), 43 deletions(-)

diff --git a/packages/react/grep-icons.py b/packages/react/grep-icons.py
index c42337f39..1bae5130f 100644
--- a/packages/react/grep-icons.py
+++ b/packages/react/grep-icons.py
@@ -14,7 +14,7 @@ def extract_icons(directory):
                     content = f.read()
                     matches = re.findall(pattern, content)
                     for match in matches:
-                        icons[match].add(file_path)
+                        icons[match].add(file_path.replace("\\", "/"))
     
     return icons
 
diff --git a/packages/react/src/components/about/placeholder/FormFields.tsx b/packages/react/src/components/about/placeholder/FormFields.tsx
index f6aa81fb0..3047eb31c 100644
--- a/packages/react/src/components/about/placeholder/FormFields.tsx
+++ b/packages/react/src/components/about/placeholder/FormFields.tsx
@@ -178,13 +178,14 @@ export const FormChannelPicker = ({
       control={control}
       name={name}
       render={({ field }) => (
-        <FormItem>
-          <FormLabel>{label}</FormLabel>
+        <FormItem className="flex flex-col space-y-2">
+          <FormLabel className="leading-normal">{label}</FormLabel>
           <FormControl>
             <ChannelPicker
               {...props}
               value={field.value}
               onSelect={({ id }) => field.onChange(id)}
+              type="vtuber"
             />
           </FormControl>
           <FormMessage />
diff --git a/packages/react/src/components/header/header.tsx b/packages/react/src/components/header/header.tsx
index fb722e1e9..ff468764e 100644
--- a/packages/react/src/components/header/header.tsx
+++ b/packages/react/src/components/header/header.tsx
@@ -72,7 +72,7 @@ export function Header({ id }: HeaderProps) {
               className="ml-2 text-lg text-base-10"
               onClick={() => setIsSearching(false)}
             >
-              <div className="i-heroicons:x-mark h-8 w-8" />
+              <div className="i-lucide:x h-8 w-8" />
             </Button>
           </div>
         ) : (
diff --git a/packages/react/src/components/playlist/IndividualPlaylist.tsx b/packages/react/src/components/playlist/IndividualPlaylist.tsx
index aae57698c..33828ca88 100644
--- a/packages/react/src/components/playlist/IndividualPlaylist.tsx
+++ b/packages/react/src/components/playlist/IndividualPlaylist.tsx
@@ -108,7 +108,7 @@ export default function IndividualPlaylist({ playlist }: Props) {
                   variant="ghost"
                   onClick={() => setRenaming((prev) => !prev)}
                 >
-                  <span className="i-heroicons:pencil-solid" />
+                  <span className="i-lucide:edit-3" />
                 </Button>
               ) : null}
             </div>
@@ -142,15 +142,16 @@ export default function IndividualPlaylist({ playlist }: Props) {
                     }
                   >
                     {/* todo: intl this */}
-                    <span className="i-lucide:save" /> Save Changes
+                    <span className="i-fluent:save-20-filled" /> Save Changes
                   </Button>
                   {editedPlaylist !== null ? (
                     <Button
                       size="icon"
                       variant="ghost"
+                      title="Reset"
                       onClick={() => setEditedPlaylist(null)}
                     >
-                      <span className="i-heroicons:arrow-path-solid" />
+                      <span className="i-fluent:arrow-reset-20-filled" />
                     </Button>
                   ) : null}
                 </>
@@ -177,7 +178,7 @@ export default function IndividualPlaylist({ playlist }: Props) {
                   variant="ghost"
                   onClick={() => deleteVideo(index)}
                 >
-                  <span className="i-heroicons:x-mark" />
+                  <span className="i-lucide:x" />
                 </Button>
                 <Button
                   size="icon"
diff --git a/packages/react/src/components/sidebar/sidebar.tsx b/packages/react/src/components/sidebar/sidebar.tsx
index 725505f36..47e2e0938 100644
--- a/packages/react/src/components/sidebar/sidebar.tsx
+++ b/packages/react/src/components/sidebar/sidebar.tsx
@@ -56,7 +56,7 @@ export function Sidebar() {
           <div className="flex grow" />
           <Button
             variant="ghost"
-            className="i-heroicons:x-mark p-4 md:hidden"
+            className="i-lucide:x p-4 md:hidden"
             onClick={toggle}
           />
         </div>
diff --git a/packages/react/src/components/tldex/TLChat.tsx b/packages/react/src/components/tldex/TLChat.tsx
index 8f1a5496c..2281362ae 100644
--- a/packages/react/src/components/tldex/TLChat.tsx
+++ b/packages/react/src/components/tldex/TLChat.tsx
@@ -41,7 +41,7 @@ export function TLChat({ videoId }: TLChatProps) {
       followOutput="smooth"
       startReached={() => chatDB.loadMessages({ partial: 30 })}
       data={processedMessages}
-      itemContent={(idx, { key, ...message }, ctx) => (
+      itemContent={(_, { key, ...message }) => (
         <TLChatMessage {...message} key={key} />
       )}
     />
diff --git a/packages/react/src/components/video/MainVideoListing.tsx b/packages/react/src/components/video/MainVideoListing.tsx
index f20370f90..5e8bef190 100644
--- a/packages/react/src/components/video/MainVideoListing.tsx
+++ b/packages/react/src/components/video/MainVideoListing.tsx
@@ -29,7 +29,7 @@ export function MainVideoListing({
       cn(
         "grid w-full gap-4 px-4 py-2 @container md:px-8",
         {
-          "grid-cols-1": size === "list",
+          "grid-cols-1 gap-1": size === "list",
           "grid-cols-[repeat(auto-fill,minmax(340px,1fr))]": size === "lg",
           "grid-cols-[repeat(auto-fill,minmax(220px,1fr))]": size === "md",
           "grid-cols-[repeat(auto-fill,minmax(180px,1fr))]": size === "sm",
diff --git a/packages/react/src/components/video/VideoCardPlaceholder.tsx b/packages/react/src/components/video/VideoCardPlaceholder.tsx
index d945c912d..250279cc3 100644
--- a/packages/react/src/components/video/VideoCardPlaceholder.tsx
+++ b/packages/react/src/components/video/VideoCardPlaceholder.tsx
@@ -71,13 +71,13 @@ export default function VideoCardPlaceholder({
           </div>
         </div>
         <div className="grid gap-4 px-4 pb-4">
-          <Button size="lg" variant="default" className="" asChild>
+          <Button size="lg" variant="default" className="h-12 py-4" asChild>
             <a href={video.link} target="_blank" rel="noopener noreferrer">
               <div
                 className={
                   video.placeholderType === "scheduled-yt-stream"
-                    ? "i-logos:youtube-icon mr-2"
-                    : "i-heroicons:arrow-top-right-on-square mr-2"
+                    ? "i-logos:youtube-icon mr-1"
+                    : "i-heroicons:arrow-top-right-on-square mr-1"
                 }
               />
               {video.placeholderType === "scheduled-yt-stream"
@@ -88,28 +88,25 @@ export default function VideoCardPlaceholder({
             </a>
           </Button>
           <div className="flex flex-row">
-            <div className="grow">
-              <p>{t("component.placeholderVideo.creditTitleText")}</p>
-              {video.credits?.discord && (
-                <p>
-                  {t("component.placeholderVideo.discordCredit", {
-                    user: video.credits.discord.user,
-                    guild: (
-                      <strong>
-                        <a
-                          href={`https://discord.gg/${video.credits.discord.link}`}
-                          className="inline-block"
-                        >
-                          <div className="i-logos:discord-icon mr-1 inline-block" />
-                          {video.credits.discord.guildName}
-                        </a>
-                      </strong>
-                    ),
-                  })}
-                </p>
-              )}
+            <div className="grow text-sm text-muted">
+              {t("component.placeholderVideo.creditTitleText")}{" "}
+              {video.credits?.discord &&
+                t("component.placeholderVideo.discordCredit", {
+                  user: video.credits.discord.user,
+                  guild: (
+                    <strong>
+                      <a
+                        href={`https://discord.gg/${video.credits.discord.link}`}
+                        className="inline-block"
+                      >
+                        <div className="i-logos:discord-icon mr-1 inline-block" />
+                        {video.credits.discord.guildName}
+                      </a>
+                    </strong>
+                  ),
+                })}
               {video.credits?.datasource && (
-                <p>
+                <span>
                   {t("component.placeholderVideo.datasourceCredit", {
                     0: video.credits.datasource.name,
                   })}
@@ -119,10 +116,10 @@ export default function VideoCardPlaceholder({
                       {video.credits.datasource.link}
                     </a>
                   </strong>
-                </p>
+                </span>
               )}
               {video.credits?.bot && (
-                <p>
+                <span>
                   {t("component.placeholderVideo.botCredit", {
                     0: video.credits.bot.name,
                     1: video.credits.bot.user,
@@ -133,14 +130,14 @@ export default function VideoCardPlaceholder({
                       {video.credits.bot.link}
                     </a>
                   </strong>
-                </p>
+                </span>
               )}
               {video.credits?.editor && (
-                <p>
+                <span>
                   {t("component.placeholderVideo.editorCredit", {
                     0: video.credits.editor.name,
                   })}
-                </p>
+                </span>
               )}
             </div>
             {user && user.role !== "user" && (
diff --git a/packages/react/src/routes/about/general.tsx b/packages/react/src/routes/about/general.tsx
index c36545745..c84161719 100644
--- a/packages/react/src/routes/about/general.tsx
+++ b/packages/react/src/routes/about/general.tsx
@@ -137,7 +137,7 @@ export const QuickLinks = () => {
       className:
         "border-blue-11 hover:bg-blue-4 hover:border-blue-11 text-blue-11",
       href: "https://twitter.com/holodex",
-      icon: "i-lucide:twitter",
+      icon: "i-tabler:brand-twitter",
       label: t("about.quicklink.twitter"),
     },
     {
@@ -151,7 +151,7 @@ export const QuickLinks = () => {
       className:
         "border-orange-10 hover:bg-orange-4 hover:border-orange-10 text-orange-10",
       href: "https://docs.holodex.net/",
-      icon: "i-lucide:file-code",
+      icon: "i-mdi:cloud-json",
       label: t("about.quicklink.apiDocs"),
     },
     {
diff --git a/packages/react/src/routes/settings/content.tsx b/packages/react/src/routes/settings/content.tsx
index 5445e21f7..e91ba5e98 100644
--- a/packages/react/src/routes/settings/content.tsx
+++ b/packages/react/src/routes/settings/content.tsx
@@ -65,7 +65,7 @@ export function SettingsContentPreferences() {
       onCheckedChange: () => setHidePlaceholder(!hidePlaceholder),
       label: t("views.settings.hidePlaceholderStreams"),
       variant: "icon" as const,
-      icon: "i-lucide:calendar",
+      icon: "i-tabler:calendar-event",
     },
     {
       id: "filter_dead_streams",