diff --git a/packages/react/.eslintrc.cjs b/packages/react/.eslintrc.cjs
index ad75bc933..fc6ad2b96 100644
--- a/packages/react/.eslintrc.cjs
+++ b/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']
},
}
diff --git a/packages/react/src/Kitchensink.tsx b/packages/react/src/Kitchensink.tsx
index 0f241d260..0d4644179 100644
--- a/packages/react/src/Kitchensink.tsx
+++ b/packages/react/src/Kitchensink.tsx
@@ -23,7 +23,7 @@ function App() {
Color and variants:
-
+
Default button
Ghost button
Outline button
diff --git a/packages/react/src/components/channel/ChannelCard.tsx b/packages/react/src/components/channel/ChannelCard.tsx
index 3f5dd6688..182e6b0ba 100644
--- a/packages/react/src/components/channel/ChannelCard.tsx
+++ b/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
-
{name}
+
{name}
{t("component.channelInfo.subscriberCount", {
diff --git a/packages/react/src/components/common/ErrorFallback.tsx b/packages/react/src/components/common/ErrorFallback.tsx
index 2502472dd..5635c6c52 100644
--- a/packages/react/src/components/common/ErrorFallback.tsx
+++ b/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
) {
const routeError = useRouteError() as Error | null;
const { t } = useTranslation();
const { logout } = useAuth();
diff --git a/packages/react/src/components/header/header.tsx b/packages/react/src/components/header/header.tsx
index 35b796a86..cdc7d0ecc 100644
--- a/packages/react/src/components/header/header.tsx
+++ b/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, 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 (
-
+
- Hololive
-
+
toggle(!dark)}
>
-
+
+
+ toggle(!dark)}
+ >
+
{user ? (
-
+
}>
diff --git a/packages/react/src/components/sidebar/sidebar.tsx b/packages/react/src/components/sidebar/sidebar.tsx
index f30ec570c..2dd938d32 100644
--- a/packages/react/src/components/sidebar/sidebar.tsx
+++ b/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}
diff --git a/packages/react/src/hooks/useFrame.ts b/packages/react/src/hooks/useFrame.ts
index f6f8b31f6..6a0e8e1c5 100644
--- a/packages/react/src/hooks/useFrame.ts
+++ b/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,10 +42,10 @@ 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);
@@ -53,27 +53,27 @@ export const onNavigateAtom = atom(
}
);
-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);
}
);
\ No newline at end of file
diff --git a/packages/react/src/routes/home.tsx b/packages/react/src/routes/home.tsx
index 55bf5cf67..831ab21f0 100644
--- a/packages/react/src/routes/home.tsx
+++ b/packages/react/src/routes/home.tsx
@@ -97,7 +97,7 @@ export function Home() {
return (
diff --git a/packages/react/src/routes/router.tsx b/packages/react/src/routes/router.tsx
index fd9818f63..28a0132d9 100644
--- a/packages/react/src/routes/router.tsx
+++ b/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();
diff --git a/packages/react/src/shadcn/ui/badge.tsx b/packages/react/src/shadcn/ui/badge.tsx
index 944f3c72b..0fac50dd4 100644
--- a/packages/react/src/shadcn/ui/badge.tsx
+++ b/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",
},
},
diff --git a/packages/react/src/shadcn/ui/button.tsx b/packages/react/src/shadcn/ui/button.tsx
index d4b425532..4fca34a72 100644
--- a/packages/react/src/shadcn/ui/button.tsx
+++ b/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,
@@ -53,4 +25,4 @@ const Button = React.forwardRef(
)
Button.displayName = "Button"
-export { Button, buttonVariants }
+export { Button }
diff --git a/packages/react/src/shadcn/ui/button.variants.ts b/packages/react/src/shadcn/ui/button.variants.ts
new file mode 100644
index 000000000..d8e1143fc
--- /dev/null
+++ b/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",
+ },
+ }
+);
diff --git a/packages/react/src/shadcn/ui/command.tsx b/packages/react/src/shadcn/ui/command.tsx
index 4c4318bf8..384f19d85 100644
--- a/packages/react/src/shadcn/ui/command.tsx
+++ b/packages/react/src/shadcn/ui/command.tsx
@@ -27,7 +27,7 @@ const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
return (
-
+
{children}
diff --git a/packages/react/src/shadcn/ui/dialog.tsx b/packages/react/src/shadcn/ui/dialog.tsx
index 6ab6827f4..c2ab8783e 100644
--- a/packages/react/src/shadcn/ui/dialog.tsx
+++ b/packages/react/src/shadcn/ui/dialog.tsx
@@ -3,8 +3,9 @@ import * as DialogPrimitive from "@radix-ui/react-dialog"
import { Cross2Icon } from "@radix-ui/react-icons"
import { cn } from "@/lib/utils"
-import { type VariantProps, cva } from "class-variance-authority"
+import { type VariantProps } from "class-variance-authority"
import { badgeVariants } from "./badge"
+import { dialogVariants } from "./dialog.variants"
const Dialog = DialogPrimitive.Root
@@ -27,19 +28,6 @@ const DialogOverlay = React.forwardRef<
))
DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
-const dialogVariants = cva(
- "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full",
- {
- variants: {
- variant: {
- default: "border-base-7 bg-base-1",
- primary: "border-primary-7 bg-primary-1",
- secondary: "border-secondary-7 bg-secondary-1",
- },
- },
- }
-);
-
const DialogContent = React.forwardRef<
React.ElementRef,
React.ComponentPropsWithoutRef & VariantProps
@@ -55,7 +43,7 @@ const DialogContent = React.forwardRef<
{...props}
>
{children}
-
+
Close
@@ -124,7 +112,6 @@ export {
DialogPortal,
DialogOverlay,
DialogTrigger,
- dialogVariants,
DialogContent,
DialogHeader,
DialogFooter,
diff --git a/packages/react/src/shadcn/ui/dialog.variants.ts b/packages/react/src/shadcn/ui/dialog.variants.ts
new file mode 100644
index 000000000..02cd3c8fd
--- /dev/null
+++ b/packages/react/src/shadcn/ui/dialog.variants.ts
@@ -0,0 +1,14 @@
+import { cva } from "class-variance-authority";
+
+export const dialogVariants = cva(
+ "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg md:w-full",
+ {
+ variants: {
+ variant: {
+ default: "border-base-7 bg-base-1",
+ primary: "border-primary-7 bg-primary-1",
+ secondary: "border-secondary-7 bg-secondary-1",
+ },
+ },
+ }
+);
diff --git a/packages/react/src/shadcn/ui/fancy-multiselect.tsx b/packages/react/src/shadcn/ui/fancy-multiselect.tsx
index 5e888f4c9..1b0a2f440 100644
--- a/packages/react/src/shadcn/ui/fancy-multiselect.tsx
+++ b/packages/react/src/shadcn/ui/fancy-multiselect.tsx
@@ -80,7 +80,7 @@ export function FancyMultiSelect() {
return (