improvements (generally)

Author: sphinxrave

packages/react/package-lock.json

@@ -84,6 +84,7 @@
     "react-hook-form": "^7.49.2",
     "react-i18next": "^15.2.0",
     "react-image": "^4.1.0",
+    "react-linkify-it": "^1.0.8",
     "react-player": "^2.16.0",
     "react-resizable-panels": "^2.0.20",
     "react-rnd": "^10.4.11",

packages/react/package.json

@@ -16,7 +16,7 @@ export function ContactList() {
     {
       className:
         "border-violet-10 hover:bg-violet-4 hover:border-violet-10 text-violet-10 max-w-xs",
-      href: "https://discord.gg/A24AbzgvRJ",
+      href: "https://discord.gg/jctkgHBt4b",
       icon: "i-logos:discord-icon",
       label: t("about.contact.discord"),
     },

packages/react/src/components/about/ContactList.tsx

@@ -44,10 +44,8 @@ export function Header({ id }: HeaderProps) {
           size="icon"
           variant="link"
           className={clsx(
-            "h-12 w-12 p-0 opacity-100 transition-all hover:bg-secondaryA-2",
-            {
-              "-translate-y-8 duration-200 opacity-0": isSidebarOpen,
-            },
+            "h-12 w-12 p-0 opacity-100 transition-all starting:opacity-0 starting:-translate-y-6  duration-1000 hover:bg-secondaryA-2",
+            isSidebarOpen && "hidden",
           )}
           asChild
         >

packages/react/src/components/header/header.tsx

@@ -14,6 +14,7 @@ import {
 } from "@/shadcn/ui/dropdown-menu";
 import { Avatar, AvatarFallback, AvatarImage } from "@/shadcn/ui/avatar";
 import { calendarDialogAtom } from "@/hooks/useFrame";
+import { Badge } from "@/shadcn/ui/badge";
 
 export function UserMenu() {
   const { t } = useTranslation();
@@ -70,7 +71,8 @@ export function UserMenu() {
           </Avatar>
           <div className="flex flex-col gap-1 pl-4">
             <div className="overflow-hidden text-ellipsis font-semibold">
-              {user.username}
+              {user.username}{" "}
+              <Badge size="sm">{user.role === "user" ? "" : user.role}</Badge>
             </div>
             <div className="flex flex-row gap-2 text-sm">
               <div className={user.discord_id ? "" : "saturate-0"}>
@@ -86,8 +88,6 @@ export function UserMenu() {
               </div> */}
             </div>
             <div className="flex flex-row capitalize text-primary-11">
-              {user.role === "user" ? "" : user.role}
-
               <div className="i-mage:stars-c mx-1 animate-pulse"></div>
 
               {user.contribution_count + " " + t("component.mainNav.points")}

packages/react/src/components/header/userMenu/components/UserMenu.tsx

@@ -95,8 +95,24 @@ export function CopyrightNotice() {
     <div className="mt-16 text-center text-sm text-base-7">
       © 2020-2024 Holodex v{lastTag}.{commitsSinceLastTag}
       <small className="ml-2 inline-block opacity-80">
-        {abbreviatedSha} / {dayjs(new Date(committerDate)).format("lll")}
-      </small>
+        b.{abbreviatedSha} / {dayjs(new Date(committerDate)).format("lll")}
+      </small>{" "}
+      /{" "}
+      <a
+        href="https://discord.gg/jctkgHBt4b"
+        target="_blank"
+        className="hover:text-secondary-8 hover:underline"
+      >
+        Discord
+      </a>{" "}
+      /{" "}
+      <a
+        href="https://ko-fi.com/holodex"
+        target="_blank"
+        className="hover:text-secondary-8 hover:underline"
+      >
+        Ko-fi
+      </a>
     </div>
   );
 }

packages/react/src/components/layout/Frame.tsx

@@ -1,6 +1,7 @@
 import { cn } from "@/lib/utils";
 import { Button } from "@/shadcn/ui/button";
 import { useState } from "react";
+import { LinkItUrl, LinkItTwitter } from "react-linkify-it";
 
 export function PlayerDescription({
   description,
@@ -20,7 +21,11 @@ export function PlayerDescription({
           "line-clamp-3": !isExpanded,
         })}
       >
-        {description}
+        <LinkItUrl className="text-primary underline hover:text-primary-12">
+          <LinkItTwitter className="text-primary underline hover:text-primary-12">
+            {description}
+          </LinkItTwitter>
+        </LinkItUrl>
       </div>
       {description.split(/\r\n|\r|\n/).length > lines && (
         <Button variant="ghost" onClick={() => setIsExpanded(!isExpanded)}>

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

@@ -73,7 +73,10 @@ export function Sidebar() {
       ref={ref}
     >
       <div className="flex min-h-[100dvh] flex-col bg-base-2">
-        <div className="flex items-center gap-2 px-4 pb-2 pt-4">
+        <div
+          className="flex cursor-pointer items-center gap-2 px-4 pb-2 pt-4"
+          onClick={() => navigate("/")}
+        >
           <Logo className="ml-1.5 h-8 w-8" />
           <h2 className="text-3xl font-semibold tracking-tight">Holodex</h2>
           <div className="flex grow" />

packages/react/src/components/sidebar/sidebar.tsx

@@ -120,6 +120,7 @@ export function VideoCard({
   const videoCardClasses = useMemo(
     () => ({
       outerLayer: clsx([
+        "starting:opacity-0 opacity-100 transition-opacity duration-300",
         size == "list" && "rounded-sm hover:bg-base-3 @lg:px-2",
         (size == "list" || size == "sm") && "group relative flex gap-4 py-2",
         (size == "md" || size == "lg") && "group flex w-full flex-col gap-4",

packages/react/src/components/video/VideoCard.tsx

@@ -42,22 +42,25 @@ export function useAuth() {
   const client = useClient();
 
   const { data: valid, error } = useQuery({
-    queryKey: ["login-check"],
+    queryKey: ["login-check", token],
     queryFn: (): Promise<RefreshUser | null> => {
+      if (!token) return Promise.resolve(null);
+      if (!client.loggedIn) return Promise.resolve(null);
       return client.get<RefreshUser>("/api/v2/user/refresh");
     },
-    enabled: !!token && !!client.loggedIn,
+    enabled: true,
     staleTime: 60 * 60 * 1000, // 1 hour
   });
 
   useEffect(() => {
     if (error) toast({ title: error.message, variant: "error" });
     else if (valid) {
+      console.log("saved new token", valid);
       setToken(valid?.jwt);
       setUser(valid?.user);
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [valid, error]);
+  }, [valid, error, token]);
 
   const login = useMutation({
     mutationFn: async ({
@@ -79,7 +82,7 @@ export function useAuth() {
             });
             setToken(jwt);
             setUser(user);
-            navigate("/settings");
+            navigate("/settings/user");
           } catch (e) {
             onFailure(e as Error);
           }
@@ -94,7 +97,7 @@ export function useAuth() {
             });
             setToken(jwt);
             setUser(user);
-            navigate("/settings");
+            navigate("/settings/user");
           } catch (e) {
             onFailure(e as Error);
           }
@@ -110,7 +113,7 @@ export function useAuth() {
             });
             setToken(jwt);
             setUser(user);
-            navigate("/settings");
+            navigate("/settings/user");
           } catch (e) {
             onFailure(e as Error);
           }

packages/react/src/hooks/useAuth.ts

@@ -129,7 +129,7 @@ export const QuickLinks = () => {
     {
       className:
         "border-violet-10 hover:bg-violet-4 hover:border-violet-10 text-violet-10",
-      href: "https://discord.gg/A24AbzgvRJ",
+      href: "https://discord.gg/jctkgHBt4b",
       icon: "i-carbon:logo-discord",
       label: t("about.discordBtn"),
     },

packages/react/src/routes/about/general.tsx

@@ -1,6 +1,7 @@
 import { useOutletContext } from "react-router-dom";
 import { ChannelOutletContext } from "../channel";
 import { useTranslation } from "react-i18next";
+import { LinkItTwitter, LinkItUrl } from "react-linkify-it";
 
 export default function ChannelAbout() {
   const { t } = useTranslation();
@@ -9,7 +10,11 @@ export default function ChannelAbout() {
   return (
     <div className="container flex gap-4 py-4 max-sm:flex-col-reverse">
       <div className="w-full whitespace-pre-wrap rounded-lg bg-base-3 p-4">
-        {channel.description}
+        <LinkItUrl className="text-primary underline hover:text-primary-12">
+          <LinkItTwitter className="text-primary underline hover:text-primary-12">
+            {channel.description}
+          </LinkItTwitter>
+        </LinkItUrl>
       </div>
       <div className="h-fit w-full shrink-0 flex-col divide-y-2 divide-base-5 rounded-lg bg-base-3 p-4 md:w-80 [&>p]:py-2">
         <h3 className="pb-2 text-xl font-bold">

packages/react/src/routes/channel/ChannelAbout.tsx

@@ -134,7 +134,7 @@ export function ChannelsOrg() {
     <>
       <Helmet>
         <title>
-          TODO PUT CURRENT ORG HERE {t("component.mainNav.channels")} - Holodex
+          {org} - {t("component.mainNav.channels")} - Holodex
         </title>
       </Helmet>
       <div className="h-full w-full px-4 md:p-8">

packages/react/src/routes/orgChannels.tsx

@@ -35,17 +35,23 @@ export function SettingsUser() {
   return (
     <div className="flex flex-col">
       <div className="my-4 flex items-center gap-6">
-        <img
-          className="h-24 w-24 rounded-full"
-          src={`https://api.dicebear.com/7.x/shapes/svg?seed=${user.id}`}
-        />
+        <div className="flex flex-col items-center">
+          <img
+            className="h-24 w-24 rounded-full"
+            src={`https://api.dicebear.com/7.x/shapes/svg?seed=${user.id}`}
+          />
+          <Badge className="-mt-2">{user.role}</Badge>
+        </div>
         <div className="flex flex-col gap-2">
           <div className="text-2xl font-bold md:text-4xl">{user.username}</div>
           <div className="capitalize text-base-11">
-            {user.role} : {user.contribution_count}
+            {user.contribution_count}
             {t("component.mainNav.points")}
           </div>
           <div className="flex flex-wrap gap-2 text-sm">
+            <Badge className="border-base text-base-11" variant="outline">
+              <kbd className="font-bold">#{user.id}</kbd>
+            </Badge>
             <TooltipProvider>
               <Tooltip>
                 <TooltipTrigger>
@@ -110,7 +116,7 @@ export function SettingsUser() {
         </div>
         <div className="ml-auto hidden flex-col gap-2 xl:flex">
           {user?.role !== "user" && (
-            <Button variant="outline" asChild>
+            <Button variant="base-outline" asChild>
               <Link
                 to={
                   /(en|lol)/.test(i18n.language)
@@ -119,8 +125,8 @@ export function SettingsUser() {
                 }
                 target="_blank"
               >
-                <div className="i-heroicons:information-circle" />
-                Editor Guide
+                <div className="i-ion:book" />
+                Editor's Guide
               </Link>
             </Button>
           )}
@@ -156,7 +162,7 @@ export function SettingsUser() {
       <SettingsItem label="API Key" fullWidth>
         <div className="ml-auto flex w-full max-w-md flex-col gap-4">
           <div className="flex items-center gap-2">
-            <Input value={user.api_key} readOnly />
+            <Input value={user.api_key ?? ""} placeholder="---" readOnly />
             <Button
               size="icon-lg"
               variant="ghost"

packages/react/src/routes/settings/user.tsx

@@ -5,7 +5,7 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"
 
 const badgeVariants = cva(
-  "inline-flex items-center rounded-md px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2",
+  "inline-flex items-center rounded-md px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 cursor-default",
   {
     variants: {
       variant: {

packages/react/src/shadcn/ui/badge.tsx

@@ -12,7 +12,7 @@ export const buttonVariants = cva(
         outline:
           "border border-primary-5 bg-transparent hover:border-primaryA-6 hover:bg-primaryA-5 focus-visible:ring-primary-7",
         primary:
-          "bg-primary-9 text-base-12 hover:bg-primaryA-4 focus-visible:ring-primary-7",
+          "bg-primary-9 text-base-12 hover:bg-primary-7 focus-visible:ring-primary-7",
         secondary:
           "bg-secondary-9 text-base-12 hover:bg-secondaryA-4 focus-visible:ring-secondary-7",
         ghost:

packages/react/src/shadcn/ui/button.variants.ts

@@ -122,6 +122,10 @@ const config = {
   plugins: [
     require("tailwindcss-animate"),
     require("@tailwindcss/container-queries"),
+    /** @type {import('tailwindcss/types/config').PluginCreator} */
+    ({ addVariant }) => {
+      addVariant("starting", "@starting-style");
+    },
   ],
 };