diff --git a/packages/react/index.html b/packages/react/index.html index af49f9c60..b06b5fb1e 100644 --- a/packages/react/index.html +++ b/packages/react/index.html @@ -2,7 +2,7 @@ - + @@ -62,31 +59,38 @@ export function Header({ id }: HeaderProps) {
- {isMobile || isSearching ? ( - isSearching ? ( -
- - -
- ) : ( - - ) - ) : ( - + {path !== "/search" && ( + <> + {/* Mobile-specific search bar */} + {isMobile && + (isSearching ? ( +
+ + +
+ ) : ( + + ))} + + {/* Desktop-specific search bar */} + {!isMobile && ( + + )} + )} {!isSearching && } diff --git a/packages/react/src/components/layout/Footer.tsx b/packages/react/src/components/layout/Footer.tsx index 041efe3f2..96cc1f585 100644 --- a/packages/react/src/components/layout/Footer.tsx +++ b/packages/react/src/components/layout/Footer.tsx @@ -1,14 +1,12 @@ import React from "react"; import { Link, useLocation } from "react-router-dom"; -import { useAtomValue, useSetAtom } from "jotai"; -import { orgAtom } from "@/store/org"; +import { useSetAtom } from "jotai"; import { useTranslation } from "react-i18next"; import { cn } from "@/lib/utils"; import { openSidebarAtom } from "@/hooks/useFrame"; export const Footer = () => { const { t } = useTranslation(); - const org = useAtomValue(orgAtom); const openSidebar = useSetAtom(openSidebarAtom); const navItems = [ diff --git a/packages/react/src/components/layout/Frame.tsx b/packages/react/src/components/layout/Frame.tsx index 32e12f310..ff051a543 100644 --- a/packages/react/src/components/layout/Frame.tsx +++ b/packages/react/src/components/layout/Frame.tsx @@ -12,7 +12,7 @@ import { } from "@/hooks/useFrame"; import { darkAtom } from "@/hooks/useTheme"; import { Toaster } from "@/shadcn/ui/toaster"; -import { orgAtom, orgRankingAtom } from "@/store/org"; +import { mostRecentOrgAtom, orgRankingAtom } from "@/store/org"; import { miniPlayerAtom } from "@/store/player"; import clsx from "clsx"; import { useAtom, useAtomValue, useSetAtom } from "jotai"; @@ -29,19 +29,24 @@ import { videoReportAtom } from "@/store/video"; import React from "react"; import { useOrgs } from "@/services/orgs.service"; import { useTimeout } from "usehooks-ts"; +import { defaultOpenAtom } from "@/store/settings"; export function LocationAwareReactivity() { const location = useLocation(); const navigate = useNavigate(); - const org = useAtomValue(orgAtom); + const org = useAtomValue(mostRecentOrgAtom); + const defaultOpen = useAtomValue(defaultOpenAtom); const indicatePageFullscreen = useSetAtom(indicatePageFullscreenAtom); useEffect(() => { if (location.pathname === "/") { + if (defaultOpen === "Favorites") { + navigate("/favorites", { replace: true }); + } console.log("redirecting to org", org); navigate(`/org/${org}`, { replace: true }); } - }, [location.pathname, navigate, org]); + }, [defaultOpen, location.pathname, navigate, org]); useEffect(() => { const isFullscreen = diff --git a/packages/react/src/components/video/VideoReport.tsx b/packages/react/src/components/video/VideoReport.tsx index e4738786d..b89e64ede 100644 --- a/packages/react/src/components/video/VideoReport.tsx +++ b/packages/react/src/components/video/VideoReport.tsx @@ -28,8 +28,7 @@ import { Textarea } from "@/shadcn/ui/textarea"; import { Button } from "@/shadcn/ui/button"; import { Alert, AlertDescription } from "@/shadcn/ui/alert"; import { useToast } from "@/shadcn/ui/use-toast"; -import { useAtomValue } from "jotai"; -import { orgAtom } from "@/store/org"; +import { useParams } from "react-router-dom"; const formSchema = z.object({ reasons: z.array(z.string()).min(1, { @@ -64,7 +63,7 @@ export function ReportDialogMenu({ }: ReportDialogMenuProps) { const { t } = useTranslation(); const { toast } = useToast(); - const currentOrg = useAtomValue(orgAtom); + const currentOrg = useParams()?.org; const [selectedChannels, setSelectedChannels] = useState< SearchAutoCompleteChannel[] >([]); @@ -112,7 +111,7 @@ export function ReportDialogMenu({ orgRequired: false, }, { - value: "This video does not belong to the org", + value: `This video does not belong to the org [${currentOrg}]`, label: t("component.reportDialog.reasons.6", { type: video.type, org: currentOrg, diff --git a/packages/react/src/hooks/useVideoFilter.ts b/packages/react/src/hooks/useVideoFilter.ts index ec9e0ab82..f559fc82e 100644 --- a/packages/react/src/hooks/useVideoFilter.ts +++ b/packages/react/src/hooks/useVideoFilter.ts @@ -2,7 +2,7 @@ import { useAtomValue } from "jotai"; import { useMemo } from "react"; import dayjs from "dayjs"; import { settingsAtom, blockedSetAtom } from "@/store/settings"; -import { orgAtom } from "@/store/org"; +import { mostRecentOrgAtom } from "@/store/org"; import { useFavorites } from "@/services/user.service"; function filterDeadStreams(video: VideoBase, now: dayjs.Dayjs) { @@ -32,7 +32,7 @@ export function useVideoFilter( ) { const settings = useAtomValue(settingsAtom); const blockedSet = useAtomValue(blockedSetAtom); - const defaultOrg = useAtomValue(orgAtom); + const defaultOrg = useAtomValue(mostRecentOrgAtom); const { data: favorites } = useFavorites(); const favoritesSet = useMemo( diff --git a/packages/react/src/routes/home/home.tsx b/packages/react/src/routes/home/home.tsx index 7ecffaae6..c0b8fe315 100644 --- a/packages/react/src/routes/home/home.tsx +++ b/packages/react/src/routes/home/home.tsx @@ -1,6 +1,6 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/shadcn/ui/tabs"; -import { orgAtom } from "@/store/org"; -import { useAtom, useAtomValue } from "jotai"; +import { mostRecentOrgAtom } from "@/store/org"; +import { useAtom, useSetAtom } from "jotai"; import { lazy, useEffect, useState } from "react"; import { Trans, useTranslation } from "react-i18next"; import { @@ -34,12 +34,19 @@ export function Home() { const [searchParams, setSearchParams] = useSearchParams(); const { t } = useTranslation(); const { org } = useParams(); - const currentOrg = useAtomValue(orgAtom); + const setMostRecentOrg = useSetAtom(mostRecentOrgAtom); const [tab, setTab] = useState(searchParams.get("tab") ?? "live"); + if (!org) { + // it's weird ther's no org. + navigate("/org/Hololive", { replace: true }); + } + useEffect(() => { - navigate(`/org/${currentOrg}`, { replace: true }); - }, [currentOrg, navigate]); + if (!org) navigate("/org/Hololive", { replace: true }); + else setMostRecentOrg(org); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [org]); useEffect(() => { console.log(`tab changed ${tab}`); @@ -52,7 +59,7 @@ export function Home() { return ( <> - {currentOrg} - Holodex + {org} - Holodex diff --git a/packages/react/src/routes/orgChannels.tsx b/packages/react/src/routes/orgChannels.tsx index 3fed6587f..4002e3052 100644 --- a/packages/react/src/routes/orgChannels.tsx +++ b/packages/react/src/routes/orgChannels.tsx @@ -1,5 +1,5 @@ import React, { useMemo } from "react"; -import { useAtom, useAtomValue } from "jotai"; +import { useAtom } from "jotai"; import { atomWithStorage } from "jotai/utils"; import { useParams } from "react-router-dom"; import { Helmet } from "react-helmet-async"; @@ -13,7 +13,6 @@ import { SelectTrigger, SelectValue, } from "@/shadcn/ui/select"; -import { orgAtom } from "@/store/org"; import { ChannelCard } from "@/components/channel/ChannelCard"; import { Button } from "@/shadcn/ui/button"; import { cn } from "@/lib/utils"; @@ -97,7 +96,6 @@ const GroupComponent: React.FC<{ export function ChannelsOrg() { const { t } = useTranslation(); const { org } = useParams(); - const currentOrg = useAtomValue(orgAtom); const [displayStyle, setDisplayStyle] = useAtom(orgChannelDisplayStyleAtom); const [sortBy, setSortBy] = useAtom(orgChannelSortByAtom); @@ -144,7 +142,7 @@ export function ChannelsOrg() { <> - {currentOrg} {t("component.mainNav.channels")} - Holodex + TODO PUT CURRENT ORG HERE {t("component.mainNav.channels")} - Holodex
diff --git a/packages/react/src/routes/router.tsx b/packages/react/src/routes/router.tsx index 75c730ae4..38b8521af 100644 --- a/packages/react/src/routes/router.tsx +++ b/packages/react/src/routes/router.tsx @@ -1,7 +1,7 @@ import React, { lazy } from "react"; import { Route, Navigate } from "react-router-dom"; import { getDefaultStore } from "jotai"; -import { orgAtom } from "@/store/org"; +import { mostRecentOrgAtom } from "@/store/org"; import { Frame } from "@/components/layout/Frame"; import { NavigateToMusicdex } from "@/components/channel/NavigateToMusicdex"; @@ -111,7 +111,9 @@ export const routes = ( } + element={ + + } /> OrgNotFound
} /> ( GET_ON_INIT, ); -export const currentOrgAtom = atomWithStorage("org", { - name: "Hololive", - short: "Holo", -}); - -export const orgAtom = atom((get) => get(currentOrgAtom).name); +export const mostRecentOrgAtom = atomWithStorage( + "last_org", + "Hololive", + undefined, + GET_ON_INIT, +);