Skip to content

Commit

Permalink
nitpick pass
Browse files Browse the repository at this point in the history
  • Loading branch information
@sphinxrave
sphinxrave committed Jul 18, 2024
1 parent b6deddb commit 0452459
Show file tree
Hide file tree
Showing 13 changed files with 306 additions and 263 deletions.
223 changes: 110 additions & 113 deletions packages/react/package-lock.json
View file

Large diffs are not rendered by default.

10 changes: 5 additions & 5 deletions packages/react/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,13 +67,13 @@
"react": "^18.3.1",
"react-day-picker": "^8.9.1",
"react-dom": "^18.3.1",
"react-error-boundary": "^4.0.11",
"react-error-boundary": "^4.0.13",
"react-helmet-async": "^2.0.4",
"react-hook-form": "^7.49.2",
"react-i18next": "^14.0.1",
"react-image": "^4.1.0",
"react-player": "^2.16.0",
"react-resizable-panels": "^2.0.19",
"react-resizable-panels": "^2.0.20",
"react-rnd": "^10.4.11",
"react-router-dom": "^6.23.1",
"react-text-mask": "^5.5.0",
Expand All @@ -83,7 +83,7 @@
"socket.io-client": "^4.7.5",
"sorted-array-functions": "^1.3.0",
"string-similarity-js": "^2.1.4",
"tailwind-merge": "^2.3.0",
"tailwind-merge": "^2.4.0",
"tailwindcss-animate": "^1.0.7",
"type-fest": "^4.18.3",
"use-seconds": "^1.7.0",
Expand Down Expand Up @@ -133,6 +133,6 @@
"typescript-plugin-css-modules": "^5.1.0",
"unocss": "^0.61.3",
"unocss-preset-autoprefixer": "^0.0.7",
"vite": "^5.2.13"
"vite": "^5.3.4"
}
}
}
6 changes: 4 additions & 2 deletions packages/react/src/App.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { BrowserRouter, Routes } from "react-router-dom";
import { useThemeInit } from "./hooks/useTheme";
import { useSyncTFunction } from "./store/i18n";
import { useEffect } from "react";
import { Suspense, useEffect } from "react";
import { routes } from "./routes/router";

export function App() {
Expand All @@ -23,7 +23,9 @@ export function App() {

return (
<BrowserRouter>
<Routes>{routes}</Routes>
<Suspense>
<Routes>{routes}</Routes>
</Suspense>
</BrowserRouter>
);
}
22 changes: 10 additions & 12 deletions packages/react/src/components/layout/Frame.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,20 +93,18 @@ $responsive-breakpoint: 768px;
grid-area: header;
}

> aside {
> aside#sidebar {
grid-area: sidebar;

> #sidebar {
width: var(--sidebar-width);
position: fixed;
top: 0;
padding-bottom: var(--footer-height-clearance);
left: var(--sidebar-left);
z-index: 1;
transition:
left 0.3s,
width 0.3s;
}
width: var(--sidebar-width);
position: fixed;
top: 0;
padding-bottom: var(--footer-height-clearance);
left: var(--sidebar-left);
z-index: 1;
transition:
left 0.3s,
width 0.3s;
}

> main {
Expand Down
234 changes: 124 additions & 110 deletions packages/react/src/components/sidebar/sidebar.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import { Logo } from "../header/Logo";
import { MUSICDEX_URL } from "@/lib/consts";
import { atom } from "jotai";
import { useOnClickOutside } from "usehooks-ts";
import { Tooltip, TooltipContent, TooltipTrigger } from "@/shadcn/ui/tooltip";

// New atom for pinned orgs
const pinnedOrgsAtom = atom<string[]>(["Hololive", "Nijisanji", "VSPo"]);
Expand All @@ -39,126 +40,139 @@ export function Sidebar() {
useOnClickOutside(ref, handleClickOutside);

return (
<aside className="z-30 border-r border-r-base" ref={ref}>
<div className={"border-r border-r-base-5 pb-12"} id="sidebar">
<div className="flex min-h-[100dvh] flex-col space-y-2 bg-base-2">
<div className="flex items-center gap-2 px-4 pb-2 pt-4">
<Logo className="ml-1.5 h-8 w-8" />
<h2 className="text-3xl font-semibold tracking-tight">Holodex</h2>
<div className="flex grow" />
<Button
variant="ghost"
className="i-heroicons:x-mark p-4 md:hidden"
onClick={toggle}
/>
<aside className="z-30 border-r border-r-base pb-12" id="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">
<Logo className="ml-1.5 h-8 w-8" />
<h2 className="text-3xl font-semibold tracking-tight">Holodex</h2>
<div className="flex grow" />
<Button
variant="ghost"
className="i-heroicons:x-mark p-4 md:hidden"
onClick={toggle}
/>
</div>
<div className="flex grow flex-col space-y-1 px-3 py-2">
<div className="mb-2">
<OrgSelectorCombobox />
</div>
<div className="flex grow flex-col space-y-1 px-3 py-2">
<div className="mb-2">
<OrgSelectorCombobox />
</div>
{pinnedOrgs.map((pinnedOrg) => (
<div key={pinnedOrg} className="space-y-1">
{/* {org === pinnedOrg && <hr className="border-base" />} */}
{pinnedOrgs.map((pinnedOrg) => (
<div key={pinnedOrg} className="space-y-1">
{/* {org === pinnedOrg && <hr className="border-base" />} */}

<SidebarItem
onClose={toggle}
label={pinnedOrg}
href={`/org/${pinnedOrg}`}
icon="i-ph:placeholder-fill"
/>
{org === pinnedOrg && (
<div className="w-full pl-6">
<SidebarItem
onClose={toggle}
label={"Members"}
href={`/org/${pinnedOrg}/channels`}
icon="i-heroicons:identification"
/>
</div>
)}
<SidebarItem
onClose={toggle}
label={pinnedOrg}
href={`/org/${pinnedOrg}`}
icon="i-ph:placeholder-fill"
/>
{org === pinnedOrg && (
<div className="w-full pl-6">
<SidebarItem
onClose={toggle}
label={"Members"}
href={`/org/${pinnedOrg}/channels`}
icon="i-heroicons:identification"
/>
</div>
)}

{org === pinnedOrg && <hr className="border-base" />}
</div>
))}
<div className="grow"></div>
<hr className="my-2 border-base" />
<SidebarItem
label={t("component.mainNav.favorites")}
icon="i-heroicons:heart"
href="/favorites"
onClose={toggle}
/>
<SidebarItem
label={t("component.mainNav.multiview")}
icon="i-heroicons:rectangle-group"
href="/multiview"
onClose={toggle}
/>
{org === pinnedOrg && <hr className="border-base" />}
</div>
))}
<div className="grow"></div>
<hr className="my-2 border-base" />
<SidebarItem
label={t("component.mainNav.favorites")}
icon="i-heroicons:heart"
href="/favorites"
onClose={toggle}
/>
<SidebarItem
label={t("component.mainNav.multiview")}
icon="i-heroicons:rectangle-group"
href="/multiview"
onClose={toggle}
/>
<SidebarItem
label="Musicdex"
icon="i-heroicons:musical-note"
href={MUSICDEX_URL}
onClose={toggle}
/>
<SidebarItem
label={t("component.mainNav.playlist")}
icon="i-heroicons:queue-list"
href="/playlists"
onClose={toggle}
/>
</div>
{/* Icon-only buttons row */}
<div className="flex justify-around pb-2 text-base-11">
<Tooltip delayDuration={0}>
<TooltipTrigger asChild>
<Button
variant="ghost"
className="p-2"
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>
</Button>
</TooltipTrigger>
<TooltipContent side="top">TLdex</TooltipContent>
</Tooltip>
<Tooltip delayDuration={0}>
<TooltipTrigger asChild>
<Button variant="ghost" className="p-2" size="icon-lg" asChild>
<Link to="/settings">
<span className="i-heroicons:cog-6-tooth" />
</Link>
</Button>
</TooltipTrigger>
<TooltipContent side="top">Settings</TooltipContent>
</Tooltip>{" "}
<Tooltip delayDuration={0}>
<TooltipTrigger asChild>
<Button variant="ghost" className="p-2" size="icon-lg" asChild>
<Link to="/about">
<span className="i-heroicons:information-circle" />
</Link>
</Button>
</TooltipTrigger>
<TooltipContent side="top">About</TooltipContent>
</Tooltip>
</div>
{/* TLDex submenu */}
{tldexOpen && (
<div className="space-y-1 px-3 pb-3">
<SidebarItem
label="Musicdex"
icon="i-heroicons:musical-note"
href={MUSICDEX_URL}
className="text-base-11"
label={t("component.mainNav.tlclient")}
icon="i-heroicons:language"
href="/tlclient"
onClose={toggle}
/>
<SidebarItem
label={t("component.mainNav.playlist")}
icon="i-heroicons:queue-list"
href="/playlists"
className="text-base-11"
label={t("component.mainNav.scriptEditor")}
icon="i-fluent:gantt-chart-16-regular"
href="/scripteditor"
onClose={toggle}
/>
</div>
{/* Icon-only buttons row */}
<div className="flex justify-around py-2 text-base-11">
<Button
variant="ghost"
className="p-2"
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>
</Button>
<Button variant="ghost" className="p-2" size="icon-lg" asChild>
<Link to="/settings">
<span className="i-heroicons:cog-6-tooth" />
</Link>
</Button>
<Button variant="ghost" className="p-2" size="icon-lg" asChild>
<Link to="/about">
<span className="i-heroicons:information-circle" />
</Link>
</Button>
</div>
{/* TLDex submenu */}
{tldexOpen && (
<div className="space-y-1 px-3">
<SidebarItem
className="text-base-11"
label={t("component.mainNav.tlclient")}
icon="i-heroicons:language"
href="/tlclient"
onClose={toggle}
/>
<SidebarItem
className="text-base-11"
label={t("component.mainNav.scriptEditor")}
icon="i-fluent:gantt-chart-16-regular"
href="/scripteditor"
onClose={toggle}
/>
</div>
)}
</div>
)}
</div>
</aside>
);
Expand Down
20 changes: 17 additions & 3 deletions packages/react/src/hooks/useTheme.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { useEffect } from "react";
import { atomWithStorageBroadcast } from "@/lib/atomWithStorageBroadcast";
import { useAtom } from "jotai";
import { GET_ON_INIT } from "@/lib/consts";

export const THEME_COLORS = [
"tomato",
Expand Down Expand Up @@ -40,13 +41,26 @@ export const THEME_BASE_COLORS = [
];

/** STORE **/
export const baseAtom = atomWithStorageBroadcast("theme-base", "mauve");
export const primaryAtom = atomWithStorageBroadcast("theme-primary", "blue");
export const baseAtom = atomWithStorageBroadcast(
"theme-base",
"mauve",
GET_ON_INIT,
);
export const primaryAtom = atomWithStorageBroadcast(
"theme-primary",
"blue",
GET_ON_INIT,
);
export const secondaryAtom = atomWithStorageBroadcast(
"theme-secondary",
"pink",
GET_ON_INIT,
);
export const darkAtom = atomWithStorageBroadcast(
"theme-dark",
true,
GET_ON_INIT,
);
export const darkAtom = atomWithStorageBroadcast("theme-dark", true);
/** END STORE **/

/**
Expand Down
3 changes: 2 additions & 1 deletion packages/react/src/lib/atomWithStorageBroadcast.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,9 @@ import { atomWithStorage } from "jotai/utils";
export function atomWithStorageBroadcast<Value>(
key: string,
initialValue: Value,
opts: { getOnInit?: boolean | undefined } | undefined,
) {
const baseAtom = atomWithStorage(key, initialValue);
const baseAtom = atomWithStorage(key, initialValue, undefined, opts);
const listeners = new Set<(event: MessageEvent<Value>) => void>();
if (!window.BroadcastChannel) {
return baseAtom;
Expand Down
2 changes: 2 additions & 0 deletions packages/react/src/lib/consts.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -114,3 +114,5 @@ export const MESSAGE_TYPES = Object.freeze({
});

export const MAX_PLAYLIST_LENGTH = 500;

export const GET_ON_INIT = { getOnInit: true };
Loading

0 comments on commit 0452459

Please sign in to comment.