fix: subview layout

Signed-off-by: Innei <i@innei.in>

src/renderer/src/pages/(main)/(layer)/(subview)/discover/index.tsx

@@ -1,4 +1,3 @@
-import { ScrollArea } from "@renderer/components/ui/scroll-area"
 import {
  Tabs,
  TabsContent,
@@ -12,6 +11,8 @@ import { DiscoverRSS3 } from "@renderer/modules/discover/rss3-form"
 import { createElement } from "react"
 import { useSearchParams } from "react-router-dom"
 
+import { useSubViewTitle } from "../hooks"
+
 const tabs = [
  {
  name: "Search",
@@ -42,13 +43,9 @@ const tabs = [
 
 export function Component() {
  const [search, setSearch] = useSearchParams()
+ useSubViewTitle("Discover")
  return (
- <ScrollArea.ScrollArea
- mask={false}
- flex
- rootClassName="w-full"
- viewportClassName="pb-10 pt-40 [&>div]:items-center [&>div]:gap-8"
- >
+ <>
  <div className="text-2xl font-bold">Discover</div>
  <Tabs
  value={search.get("type") || "search"}
@@ -81,7 +78,7 @@ export function Component() {
  ))}
  </Tabs>
  <Recommendations />
- </ScrollArea.ScrollArea>
+ </>
  )
 }
 

src/renderer/src/pages/(main)/(layer)/(subview)/hooks.ts

@@ -0,0 +1,11 @@
+import { useTitle } from "@renderer/hooks/common"
+import { atom, useAtomValue } from "jotai"
+import { useHydrateAtoms } from "jotai/utils"
+
+const titleAtom = atom<string | null>(null)
+export const useSubViewTitle = (title: string) => {
+ useTitle(title)
+ useHydrateAtoms([[titleAtom, title]])
+}
+
+export const useSubViewTitleValue = () => useAtomValue(titleAtom)

src/renderer/src/pages/(main)/(layer)/(subview)/layout.tsx

@@ -4,27 +4,73 @@ import {
  setSidebarActiveView,
 } from "@renderer/atoms/sidebar"
 import { MotionButtonBase } from "@renderer/components/ui/button"
-import { useRef } from "react"
+import { ScrollArea } from "@renderer/components/ui/scroll-area"
+import { cn } from "@renderer/lib/utils"
+import { useEffect, useRef, useState } from "react"
 import { Outlet, useNavigate } from "react-router-dom"
 
+import { useSubViewTitleValue } from "./hooks"
+
 export function Component() {
  const navigate = useNavigate()
  const prevLocation = useRef(getReadonlyRoute().location).current
  const prevView = useRef(getSidebarActiveView()).current
+ const title = useSubViewTitleValue()
+ const [scrollRef, setRef] = useState(null as HTMLDivElement | null)
+ const [isTitleSticky, setIsTitleSticky] = useState(false)
+
+ useEffect(() => {
+ const $scroll = scrollRef
+
+ if (!$scroll) return
+ $scroll.scrollTop = 0
+
+ $scroll.onscroll = () => {
+ setIsTitleSticky($scroll.scrollTop > 120)
+ }
+ return () => {
+ $scroll.onscroll = null
+ }
+ }, [scrollRef, title])
+
  return (
  <div className="relative flex size-full">
- <MotionButtonBase
- onClick={() => {
- navigate(prevLocation)
+ <div
+ className={cn(
+ "absolute inset-x-0 top-0 z-10 p-4",
+ "grid grid-cols-[1fr_auto_1fr] items-center gap-4",
+ isTitleSticky &&
+ "group border-b bg-white/80 backdrop-blur-xl dark:bg-black/90",
+ )}
+ >
+ <MotionButtonBase
+ onClick={() => {
+ navigate(prevLocation)
+
+ setSidebarActiveView(prevView)
+ }}
+ className="inline-flex items-center gap-1 duration-200 hover:text-theme-accent"
+ >
+ <i className="i-mingcute-left-line" />
+ <span className="text-sm font-medium">Back</span>
+ </MotionButtonBase>
+ <div>
+ <div className="font-bold opacity-0 duration-200 group-[.group]:opacity-100">
+ {title}
+ </div>
+ </div>
+ <div />
+ </div>
 
- setSidebarActiveView(prevView)
- }}
- className="absolute left-10 top-11 z-[1] flex items-center gap-1"
+ <ScrollArea.ScrollArea
+ mask={false}
+ flex
+ ref={setRef}
+ rootClassName="w-full"
+ viewportClassName="pb-10 pt-40 [&>div]:items-center [&>div]:gap-8"
  >
- <i className="i-mgc-left-cute-fi" />
- Back
- </MotionButtonBase>
- <Outlet />
+ <Outlet />
+ </ScrollArea.ScrollArea>
  </div>
  )
 }