Merge branch 'next' of github:HolodexNet/Holodex into next

packages/react/.eslintrc.cjs

@@ -32,7 +32,7 @@ module.exports = {
       'warn',
       { allowConstantExport: true },
     ],
-    '@typescript-eslint/no-unused-vars': ['warn'],
+    '@typescript-eslint/no-unused-vars': ['warn', { argsIgnorePattern: '^_' }],
     "tailwindcss/no-custom-classname": ['warn']
   },
 }

packages/react/src/Kitchensink.tsx

@@ -23,7 +23,7 @@ function App() {
       <hr className="border-base" />
 
       <h3>Color and variants:</h3>
-      <div className="tems-start flex max-w-5xl flex-row flex-wrap justify-start gap-4">
+      <div className="flex max-w-5xl flex-row flex-wrap items-start justify-start gap-4">
         <Button>Default button</Button>
         <Button variant="ghost">Ghost button</Button>
         <Button variant="outline">Outline button</Button>

packages/react/src/components/channel/ChannelCard.tsx

@@ -31,7 +31,7 @@ export function ChannelCard({
     // Set min-height because react-virtuoso will break if the height is not fixed
     <div className="flex h-full min-h-[24rem] w-full flex-col items-center gap-2 rounded-md bg-base-3 p-4">
       <img className="h-24 w-24 rounded-full" src={photo ?? ""} />
-      <div className="font-xl line-clamp-2 text-center font-bold">{name}</div>
+      <div className="line-clamp-2 text-center text-lg font-bold">{name}</div>
       <div className="flex flex-col items-center">
         <div className="whitespace-nowrap text-sm text-base-11">
           {t("component.channelInfo.subscriberCount", {

packages/react/src/components/common/ErrorFallback.tsx

@@ -5,7 +5,7 @@ import { useRouteError } from "react-router-dom";
 import { Button } from "@/shadcn/ui/button";
 import { useAuth } from "@/hooks/useAuth";
 
-export function ErrorFallback(props?: FallbackProps) {
+export function ErrorFallback(props?: Partial<FallbackProps>) {
   const routeError = useRouteError() as Error | null;
   const { t } = useTranslation();
   const { logout } = useAuth();

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

@@ -1,38 +1,48 @@
+import { toggleSidebarAtom } from "@/hooks/useFrame";
 import { darkAtom } from "@/hooks/useTheme";
 import { Button } from "@/shadcn/ui/button";
+import { Input } from "@/shadcn/ui/input";
 import { userAtom } from "@/store/auth";
 import { useAtom, useAtomValue } from "jotai";
+import { useSetAtom } from "jotai/react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 
-interface HeaderProps {
-  onClick: () => void;
+interface HeaderProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>{
   id: string;
 }
 
-export function Header({ onClick, id }: HeaderProps) {
+export function Header({ id }: HeaderProps) {
   const { t } = useTranslation();
   const [dark, toggle] = useAtom(darkAtom);
   const user = useAtomValue(userAtom);
+  const frameToggleSidebar = useSetAtom(toggleSidebarAtom);
 
   return (
     <header
       id={id}
-      className="py-auto sticky top-0 z-40 flex items-center gap-4 bg-base-2 px-8"
+      className="z-40 flex items-center gap-4 bg-base-2 pl-2"
     >
-      <Button size="icon-lg" variant="ghost" onClick={onClick}>
+      <Button size="icon" variant="ghost" className="h-12 w-12 p-4" onClick={frameToggleSidebar}>
         <div className="i-heroicons:bars-3 rounded-md p-3" />
       </Button>
-      <div className="justify-start py-1 pl-3 text-xl">Hololive</div>
-      <div className="i-heroicons:chevron-down py-5" />
       <div className="flex grow" />
+      <Input type="search" placeholder="Search" className="max-w-lg" />
       <Button
-        size="icon-lg"
+        size="icon"
         variant="ghost"
-        className="p-2"
+        className="-ml-3 p-0 text-base-9"
         onClick={() => toggle(!dark)}
       >
-        <div className="i-heroicons:sun-20-solid h-full text-4xl" />
+        <div className="i-heroicons:magnifying-glass h-full text-xl" />
+      </Button>
+      <Button
+        size="icon"
+        variant="ghost"
+        className="p-0 text-base-9"
+        onClick={() => toggle(!dark)}
+      >
+        <div className="i-heroicons:sun-20-solid h-full text-xl " />
       </Button>
       {user ? (
         <img

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

@@ -6,9 +6,10 @@ import {
   isFloatingAtom,
   isMobileAtom,
   onResizeAtom,
-  sidebarOpenAtom,
+  toggleSidebarAtom,
   sidebarShouldBeFullscreenAtom,
-  toggleAtom,
+  openSidebarAtom,
+  isSidebarOpenAtom,
 } from "@/hooks/useFrame";
 import { useAtomValue, useSetAtom } from "jotai/react";
 import { darkAtom } from "@/hooks/useTheme";
@@ -22,7 +23,7 @@ import { Loading } from "../common/Loading";
 
 export function Frame() {
   const location = useLocation();
-  const toggle = useSetAtom(toggleAtom);
+  const toggle = useSetAtom(toggleSidebarAtom);
   const resize = useSetAtom(onResizeAtom);
   const dark = useAtomValue(darkAtom);
   const org = useAtomValue(orgAtom);
@@ -33,7 +34,7 @@ export function Frame() {
   }, []);
 
   const floating = useAtomValue(isFloatingAtom);
-  const open = useAtomValue(sidebarOpenAtom);
+  const open = useAtomValue(isSidebarOpenAtom);
   const isMobile = useAtomValue(isMobileAtom);
   const fs = useAtomValue(sidebarShouldBeFullscreenAtom);
   console.log(fs);
@@ -55,7 +56,7 @@ export function Frame() {
       <aside className="z-50 border-r border-r-base">
         <Sidebar id="sidebar" onClose={toggle} />
       </aside>
-      <Header onClick={toggle} id="header" />
+      <Header id="header"/>
       <main className="">
         <ErrorBoundary FallbackComponent={ErrorFallback}>
           <Suspense fallback={<Loading size="xl" />}>

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

@@ -167,8 +167,9 @@ function SidebarItem({
       asChild
       className={cn(
         "w-full justify-start",
-        { "text-white": isHere },
         className,
+        { "text-base-12 font-semibold": isHere },
+        { 'font-base-11 font-light': !isHere },
       )}
       variant={isHere ? "default" : "ghost"}
       onClick={isMobile ? onClose : undefined}

packages/react/src/hooks/useFrame.ts

@@ -20,7 +20,7 @@ export const isMobileAtom = atom(
   (get) => get(sidebarShouldBeFullscreenAtom) //&& /iPhone|iPad|iPod|Android/i.test(navigator.userAgent)
 );
 
-export const sidebarOpenAtom = atom(window.innerWidth > MobileSizeBreak);
+export const isSidebarOpenAtom = atom(window.innerWidth > MobileSizeBreak);
 
 export const onResizeAtom = atom(
   null,
@@ -30,9 +30,9 @@ export const onResizeAtom = atom(
     set(sidebarShouldBeFullscreenAtom, width < FooterSizeBreak);
     if (width < MobileSizeBreak) {
       console.log("closing")
-      set(sidebarOpenAtom, false)
+      set(isSidebarOpenAtom, false)
     } else {
-      set(sidebarOpenAtom, get(sidebarPrefOpenAtom))
+      set(isSidebarOpenAtom, get(sidebarPrefOpenAtom))
     }
   }
 );
@@ -42,38 +42,38 @@ export const onNavigateAtom = atom(
   (get, set, pageIsFullscreen: boolean) => {
     const currentFullscreenStatus = get(pageIsFullscreenAtom);
     if (currentFullscreenStatus !== pageIsFullscreen && pageIsFullscreen) {
-      set(sidebarOpenAtom, false);
+      set(isSidebarOpenAtom, false);
     }
     else if (currentFullscreenStatus !== pageIsFullscreen && !pageIsFullscreen) {
-      set(sidebarOpenAtom, get(sidebarPrefOpenAtom));
+      set(isSidebarOpenAtom, get(sidebarPrefOpenAtom));
     }
     if (currentFullscreenStatus !== pageIsFullscreen) {
       set(pageIsFullscreenAtom, pageIsFullscreen);
     }
   }
 );
 
-export const toggleAtom = atom(
+export const toggleSidebarAtom = atom(
   null,
   (get, set) => {
-    const currentOpenStatus = get(sidebarOpenAtom);
-    set(sidebarOpenAtom, !currentOpenStatus);
+    const currentOpenStatus = get(isSidebarOpenAtom);
+    set(isSidebarOpenAtom, !currentOpenStatus);
     set(sidebarPrefOpenAtom, !currentOpenStatus);
   }
 );
 
-export const openAtom = atom(
+export const openSidebarAtom = atom(
   null,
   (_, set) => {
-    set(sidebarOpenAtom, true);
+    set(isSidebarOpenAtom, true);
     set(sidebarPrefOpenAtom, true);
   }
 );
 
-export const closeAtom = atom(
+export const closeSidebarAtom = atom(
   null,
   (_, set) => {
-    set(sidebarOpenAtom, false);
+    set(isSidebarOpenAtom, false);
     set(sidebarPrefOpenAtom, false);
   }
 );

packages/react/src/routes/home.tsx

@@ -97,7 +97,7 @@ export function Home() {
 
   return (
     <Tabs
-      className="w-full p-4 md:p-8"
+      className="w-full p-4 md:px-8"
       defaultValue={tab}
       onValueChange={setTab}
     >

packages/react/src/routes/router.tsx

@@ -3,11 +3,6 @@ import { Home } from "@/routes/home";
 import { getDefaultStore } from "jotai";
 import { orgAtom } from "@/store/org";
 import { Frame } from "@/components/layout/Frame";
-// import { ChannelsOrg } from "./channelsOrg";
-// import { Login } from "./login";
-// import { Settings } from "./settings";
-// import { About } from "./about";
-// import { Channel } from "./channel";
 import { NavigateToMusicdex } from "@/components/channel/NavigateToMusicdex";
 import React from "react";
 
@@ -17,6 +12,7 @@ const About = React.lazy(() => import("./about"));
 const ChannelsOrg = React.lazy(() => import('./channelsOrg'));
 const Channel = React.lazy(() => import("./channel"));
 const Kitchensink = React.lazy(() => import("@/Kitchensink"));
+const ChannelsOrg = React.lazy(() => import("./channelsOrg"));
 
 const store = getDefaultStore();
 

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

@@ -4,22 +4,22 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"
 
 const badgeVariants = cva(
-  "focus:ring-ring inline-flex items-center rounded-md border 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 border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2",
   {
     variants: {
       variant: {
         default:
-          "border-transparent bg-primary-9 text-primary-12 shadow hover:bg-primaryA-4",
+          "border-transparent bg-primary-9 text-primary-12 shadow hover:bg-primaryA-4 focus:ring-primary-8",
         primary:
-          "border-transparent bg-primary-9 text-primary-12 shadow hover:bg-primaryA-4",
+          "border-transparent bg-primary-9 text-primary-12 shadow hover:bg-primaryA-4 focus:ring-primary-8",
         secondary:
-          "border-transparent bg-secondary-9 text-secondary-12 hover:bg-secondaryA-4",
+          "border-transparent bg-secondary-9 text-secondary-12 hover:bg-secondaryA-4 focus:ring-secondary-8",
         outline:
-          "text-base-12", // Assuming the foreground is a high-contrast text of base color
+          "text-base-12 focus:ring-base-8", // Assuming the foreground is a high-contrast text of base color
       },
       size: {
         default: "px-2.5 py-0.5 text-xs",
-        sm: "py-0.25 px-1.5 text-xs",
+        sm: "px-1.5 text-xs",
         lg: "px-3 py-1 text-sm",
       },
     },

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

@@ -1,37 +1,9 @@
 import * as React from "react"
 import { Slot } from "@radix-ui/react-slot"
-import { cva, type VariantProps } from "class-variance-authority"
-
+import { type VariantProps } from "class-variance-authority"
+// import './button.css'
 import { cn } from "@/lib/utils"
-
-const buttonVariants = cva(
-  "focus-visible:ring-ring inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 disabled:pointer-events-none disabled:opacity-50",
-  {
-    variants: {
-      variant: {
-        default:
-          "bg-primary-9 text-base-12 hover:bg-primaryA-4",
-        outline:
-          "border border-primary-7 bg-transparent hover:border-primaryA-8 hover:bg-primaryA-4",
-        secondary:
-          "bg-secondary-9 text-base-12 hover:bg-secondaryA-4",
-        ghost: "hover:bg-primary-4 hover:text-base-12",
-        link: "text-primary underline-offset-4 hover:underline",
-      },
-      size: {
-        default: "h-8 gap-2 px-3.5 py-2",
-        sm: "h-6 gap-1.5 rounded-md px-1 text-xs",
-        lg: "h-10 gap-3 rounded-md px-6 text-lg ",
-        icon: "h-8 w-8",
-        "icon-lg": "h-10 w-10 text-lg",
-      },
-    },
-    defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  }
-)
+import { buttonVariants } from "./button.variants"
 
 export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
@@ -53,4 +25,4 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
 )
 Button.displayName = "Button"
 
-export { Button, buttonVariants }
+export { Button }

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

@@ -0,0 +1,27 @@
+import { cva } from "class-variance-authority";
+
+export const buttonVariants = cva(
+  "inline-flex items-center justify-center rounded-md text-sm font-medium transition focus-visible:outline-none focus-visible:ring-1 active:scale-[97%] disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary-9 text-base-12 hover:bg-primaryA-5 focus-visible:ring-primary-7 active:bg-primaryA-7",
+        outline: "border border-primary-7 bg-transparent hover:border-primaryA-8 hover:bg-primaryA-5 focus-visible:ring-primary-7",
+        secondary: "bg-secondary-9 text-base-12 hover:bg-secondaryA-4 focus-visible:ring-secondary-7 ",
+        ghost: "hover:bg-primary-4 hover:text-base-12 focus-visible:ring-primary-7 active:bg-primaryA-7",
+        link: "text-primary underline-offset-4 hover:underline focus-visible:underline focus-visible:ring-secondary-7",
+      },
+      size: {
+        default: "h-8 gap-2 px-3.5 py-2",
+        sm: "h-6 gap-1.5 rounded-md px-1 text-xs",
+        lg: "h-10 gap-3 rounded-md px-6 text-lg ",
+        icon: "h-8 w-8",
+        "icon-lg": "h-10 w-10 text-lg",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+);

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

@@ -27,7 +27,7 @@ const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
   return (
     <Dialog {...props}>
       <DialogContent className="overflow-hidden p-0">
-        <Command className="[&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-base-9 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
           {children}
         </Command>
       </DialogContent>