From 416a9de6d122a0f856a513790761ca73e4c5c075 Mon Sep 17 00:00:00 2001
From: sphinxrave <62570796+sphinxrave@users.noreply.github.com>
Date: Fri, 19 Jul 2024 21:58:22 -0700
Subject: [PATCH] nitpicks, activating playlist/:id page

---
 .../react/src/components/common/TLDexLogo.tsx | 28 +++++++++++++++++++
 .../react/src/components/sidebar/sidebar.tsx  | 16 ++---------
 .../react/src/components/video/VideoMenu.css  |  6 ++--
 .../react/src/components/video/VideoMenu.tsx  |  3 +-
 packages/react/src/routes/about/general.tsx   |  2 +-
 packages/react/src/routes/router.tsx          |  3 +-
 .../react/src/routes/settings/homepage.tsx    |  2 +-
 7 files changed, 40 insertions(+), 20 deletions(-)
 create mode 100644 packages/react/src/components/common/TLDexLogo.tsx

diff --git a/packages/react/src/components/common/TLDexLogo.tsx b/packages/react/src/components/common/TLDexLogo.tsx
new file mode 100644
index 000000000..5c832d54a
--- /dev/null
+++ b/packages/react/src/components/common/TLDexLogo.tsx
@@ -0,0 +1,28 @@
+// New atom for pinned orgs
+export function TLDexLogo({
+  size = 24,
+  className,
+}: {
+  size?: number | string;
+  className?: string;
+}) {
+  return (
+    <svg
+      version="1.1"
+      id="Layer_1"
+      viewBox="0 0 24 24"
+      xmlSpace="preserve"
+      className={className}
+      style={{
+        fill: "currentcolor",
+        width: size,
+        height: size,
+      }}
+    >
+      <path
+        d="M20,2H4C2.9,2,2,2.9,2,4v18l4-4h14c1.1,0,2-0.9,2-2V4C22,2.9,21.1,2,20,2z M4,10h4v2H4V10z M14,16H4v-2h10V16z M20,16h-4v-2
+    h4V16z M20,12H10v-2h10V12z"
+      />
+    </svg>
+  );
+}
diff --git a/packages/react/src/components/sidebar/sidebar.tsx b/packages/react/src/components/sidebar/sidebar.tsx
index bf4a428d5..1489858a3 100644
--- a/packages/react/src/components/sidebar/sidebar.tsx
+++ b/packages/react/src/components/sidebar/sidebar.tsx
@@ -17,8 +17,7 @@ import { MUSICDEX_URL } from "@/lib/consts";
 import { useOnClickOutside } from "usehooks-ts";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/shadcn/ui/tooltip";
 import { orgRankingAtom } from "@/store/org";
-
-// New atom for pinned orgs
+import { TLDexLogo } from "../common/TLDexLogo";
 
 export function Sidebar() {
   const { t } = useTranslation();
@@ -139,18 +138,7 @@ export function Sidebar() {
                 size="icon-lg"
                 onClick={() => setTldexOpen(!tldexOpen)}
               >
-                <svg
-                  version="1.1"
-                  id="Layer_1"
-                  viewBox="0 0 24 24"
-                  xmlSpace="preserve"
-                  style={{ fill: "var(--base-11)", width: 24, height: 24 }}
-                >
-                  <path
-                    d="M20,2H4C2.9,2,2,2.9,2,4v18l4-4h14c1.1,0,2-0.9,2-2V4C22,2.9,21.1,2,20,2z M4,10h4v2H4V10z M14,16H4v-2h10V16z M20,16h-4v-2
-    h4V16z M20,12H10v-2h10V12z"
-                  />
-                </svg>
+                <TLDexLogo></TLDexLogo>
               </Button>
             </TooltipTrigger>
             <TooltipContent side="top">TLdex</TooltipContent>
diff --git a/packages/react/src/components/video/VideoMenu.css b/packages/react/src/components/video/VideoMenu.css
index 21494b43f..c4d8c795c 100644
--- a/packages/react/src/components/video/VideoMenu.css
+++ b/packages/react/src/components/video/VideoMenu.css
@@ -2,10 +2,12 @@
   @apply flex gap-2 hover:text-base-12 text-base-11
 }
 
-.video-menu-item div:first-child {
+.video-menu-item div:first-child,
+.video-menu-item svg:first-child {
   @apply text-base-9
 }
 
-.video-menu-item:hover div:first-child {
+.video-menu-item:hover div:first-child,
+.video-menu-item:hover svg:first-child {
   @apply text-base-11
 }
\ No newline at end of file
diff --git a/packages/react/src/components/video/VideoMenu.tsx b/packages/react/src/components/video/VideoMenu.tsx
index 0ee53b05e..8ecaa0fb4 100644
--- a/packages/react/src/components/video/VideoMenu.tsx
+++ b/packages/react/src/components/video/VideoMenu.tsx
@@ -24,6 +24,7 @@ import { queueAtom } from "@/store/queue";
 import { VideoCardType } from "./VideoCard";
 import "./VideoMenu.css";
 import { useVideoSelection } from "@/hooks/useVideoSelection";
+import { TLDexLogo } from "../common/TLDexLogo";
 
 const LazyNewPlaylistDialog = lazy(
   () => import("@/components/playlist/NewPlaylistDialog"),
@@ -169,7 +170,7 @@ export function VideoMenu({ children, video, url }: VideoMenuProps) {
           </DropdownMenuItem>
         )}
         <DropdownMenuItem className="video-menu-item">
-          <div className="i-heroicons:newspaper" />
+          <TLDexLogo size={16} />
           {t("component.videoCard.openClient")}
         </DropdownMenuItem>
         {status === "past" && (
diff --git a/packages/react/src/routes/about/general.tsx b/packages/react/src/routes/about/general.tsx
index d3f674240..aae9eb713 100644
--- a/packages/react/src/routes/about/general.tsx
+++ b/packages/react/src/routes/about/general.tsx
@@ -36,7 +36,7 @@ export function AboutGeneral() {
       {
         className:
           "border-orange-10 hover:bg-orange-4 hover:border-orange-10 text-orange-10",
-        href: "https://docs.holodex.net/docs/holodex/f4e6fa31af431-getting-started",
+        href: "https://docs.holodex.net/",
         icon: "i-lucide:file-code",
         label: t("about.quicklink.apiDocs"),
       },
diff --git a/packages/react/src/routes/router.tsx b/packages/react/src/routes/router.tsx
index e3a5d3cab..6e1a5ff5a 100644
--- a/packages/react/src/routes/router.tsx
+++ b/packages/react/src/routes/router.tsx
@@ -92,6 +92,7 @@ const Watch = lazy(() =>
 const ResetClientPage = lazy(() =>
   import("./debug").then((module) => ({ default: module.ResetClientPage })),
 );
+const Playlist = lazy(() => import("./playlist"));
 
 const store = getDefaultStore();
 
@@ -133,7 +134,7 @@ export const routes = (
       <Route path="orgs" Component={SettingsOrgs} />
     </Route>
     <Route path="playlists" Component={Playlists} />
-    <Route path="playlist/:id" element={<div>Playlist Page</div>} />
+    <Route path="playlist/:id" element={Playlist} />
     <Route path="about" Component={About}>
       <Route index Component={AboutGeneral} />
       <Route path="general" Component={AboutGeneral} />
diff --git a/packages/react/src/routes/settings/homepage.tsx b/packages/react/src/routes/settings/homepage.tsx
index 122193033..523cc4936 100644
--- a/packages/react/src/routes/settings/homepage.tsx
+++ b/packages/react/src/routes/settings/homepage.tsx
@@ -33,7 +33,7 @@ export function SettingsHomepage() {
     {
       value: "Favorites",
       label: t("views.settings.defaultHomepage.favoritesWhenLoggedIn"),
-      icon: "i-lucide:heart",
+      icon: "i-heroicons:heart",
     },
   ] as const;