From 8aa33571753b4acb6bb3fd26ccd80435d47d947f Mon Sep 17 00:00:00 2001 From: "whey.party" Date: Thu, 12 Feb 2026 07:49:56 +0700 Subject: [PATCH] sidebar redesign and about page integration --- src/components/Login.tsx | 10 +- src/components/LogoSvg.tsx | 11 +- src/routes/__root.tsx | 431 +++++++++++++++++++++++++++++-------- src/routes/feeds.tsx | 42 ++++ src/routes/index.tsx | 45 +++- src/routes/settings.tsx | 57 ++++- 6 files changed, 490 insertions(+), 106 deletions(-) diff --git a/src/components/Login.tsx b/src/components/Login.tsx index 365f54d..a4d010b 100644 --- a/src/components/Login.tsx +++ b/src/components/Login.tsx @@ -24,7 +24,7 @@ export default function Login({ className={ compact ? "flex items-center justify-center p-1" - : "p-6 bg-gray-100 dark:bg-gray-900 rounded-xl shadow border border-gray-200 dark:border-gray-800 mt-4 mx-4 flex justify-center items-center h-[280px]" + : "p-6 bg-gray-100 dark:bg-gray-900 rounded-xl shadow border border-gray-200 dark:border-gray-800 flex justify-center items-center h-[280px]" } > +

You are logged in! @@ -77,7 +77,7 @@ export default function Login({ if (!compact) { // Large view renders the form directly in the card return ( -

+
); @@ -177,6 +177,7 @@ const OAuthForm = () => { useEffect(() => { const lastHandle = localStorage.getItem("lastHandle"); + // eslint-disable-next-line react-hooks/set-state-in-effect if (lastHandle) setHandle(lastHandle); }, []); @@ -229,6 +230,7 @@ const PasswordForm = () => { useEffect(() => { const lastHandle = localStorage.getItem("lastHandle"); + // eslint-disable-next-line react-hooks/set-state-in-effect if (lastHandle) setUser(lastHandle); }, []); @@ -246,7 +248,7 @@ const PasswordForm = () => { return (

- Warning: Less secure. Use an App Password. + Less secure. Do not use your main password, please use an App Password.

{/* ) { + if (HOST_LOGO_USE_FAVICON) { + return () + } + return () +} + // FluentEmojiHighContrastGlowingStar -export default function FluentEmojiHighContrastGlowingStar(props: SVGProps) { +export function FluentEmojiHighContrastGlowingStar(props: SVGProps) { return (); } diff --git a/src/routes/__root.tsx b/src/routes/__root.tsx index be35f5b..54f26a2 100644 --- a/src/routes/__root.tsx +++ b/src/routes/__root.tsx @@ -5,6 +5,7 @@ import type { QueryClient } from "@tanstack/react-query"; import { createRootRouteWithContext, + Link, // Link, // Outlet, Scripts, @@ -18,20 +19,23 @@ import { toast as sonnerToast } from "sonner"; import { Toaster } from "sonner"; import { KeepAliveOutlet, KeepAliveProvider } from "tanstack-router-keepalive"; -import { HOST_TITLE } from "~/../policy"; +import { HOST_ADMIN, HOST_DESCRIPTION, HOST_HERO, HOST_LOGIN_BLURB, HOST_MAIN_TITLE, HOST_SIGNUP_PDS, HOST_SUB_TITLE, HOST_TITLE, HOST_UNAUTHED_DEFAULT_FEEDS } from "~/../policy"; import { Composer } from "~/components/Composer"; import { DefaultCatchBoundary } from "~/components/DefaultCatchBoundary"; import { Import } from "~/components/Import"; -import Login from "~/components/Login"; +//import Login from "~/components/Login"; import Logo from "~/components/LogoSvg"; -import { ModerationBatcher } from "~/components/ModerationBatcher"; -import { ModerationInitializer } from "~/components/ModerationInitializer"; +//import { ModerationBatcher } from "~/components/ModerationBatcher"; +//import { ModerationInitializer } from "~/components/ModerationInitializer"; import { NotFound } from "~/components/NotFound"; +import { AutoLabelProvider } from "~/providers/AutoLabelProvider"; import { LikeMutationQueueProvider } from "~/providers/LikeMutationQueueProvider"; import { PollMutationQueueProvider } from "~/providers/PollMutationQueueProvider"; import { UnifiedAuthProvider, useAuth } from "~/providers/UnifiedAuthProvider"; -import { composerAtom, hueAtom, useAtomCssVar } from "~/utils/atoms"; +import { FeedTabOnTop } from "~/routes/index"; +import { composerAtom, hueAtom, imgCDNAtom, quickAuthAtom, useAtomCssVar } from "~/utils/atoms"; import { seo } from "~/utils/seo"; +import { useQueryIdentity, useQueryPreferences, useQueryProfile } from "~/utils/useQuery"; export const Route = createRootRouteWithContext<{ queryClient: QueryClient; @@ -75,10 +79,10 @@ export const Route = createRootRouteWithContext<{ errorComponent: import.meta.env.DEV ? undefined : (props) => ( - - - - ), + + + + ), notFoundComponent: () => , component: RootComponent, }); @@ -86,18 +90,20 @@ export const Route = createRootRouteWithContext<{ function RootComponent() { return ( - - - - - - - - - - - - + + + + {/* + */} + + + + + + + + + ); } @@ -126,11 +132,11 @@ export function renderSnack({ button={ button?.label ? { - label: button?.label, - onClick: () => { - button?.onClick?.(); - }, - } + label: button?.label, + onClick: () => { + button?.onClick?.(); + }, + } : undefined } /> @@ -222,6 +228,7 @@ function RootDocument({ children }: { children: React.ReactNode }) { const isSearch = location.pathname.startsWith("/search"); const isFeeds = location.pathname.startsWith("/feeds"); const isModeration = location.pathname.startsWith("/moderation"); + const isAbout = location.pathname.startsWith("/about"); const locationEnum: | "feeds" @@ -230,19 +237,22 @@ function RootDocument({ children }: { children: React.ReactNode }) { | "notifications" | "profile" | "moderation" + | "about" | "home" = isFeeds - ? "feeds" - : isSearch - ? "search" - : isSettings - ? "settings" - : isNotifications - ? "notifications" - : isProfile - ? "profile" - : isModeration - ? "moderation" - : "home"; + ? "feeds" + : isSearch + ? "search" + : isSettings + ? "settings" + : isNotifications + ? "notifications" + : isProfile + ? "profile" + : isModeration + ? "moderation" + : isAbout ? + "about" + : "home"; const [, setComposerPost] = useAtom(composerAtom); @@ -251,7 +261,7 @@ function RootDocument({ children }: { children: React.ReactNode }) {
-