refactor: remove electron-related code

src/layouts/PrimaryPageLayout/index.tsx

@@ -0,0 +1,116 @@
+import Logo from '@/assets/Logo'
+import AccountButton from '@/components/AccountButton'
+import NotificationButton from '@/components/NotificationButton'
+import PostButton from '@/components/PostButton'
+import RefreshButton from '@/components/RefreshButton'
+import RelaySettingsButton from '@/components/RelaySettingsButton'
+import ScrollToTopButton from '@/components/ScrollToTopButton'
+import SearchButton from '@/components/SearchButton'
+import ThemeToggle from '@/components/ThemeToggle'
+import { Titlebar } from '@/components/Titlebar'
+import { ScrollArea } from '@/components/ui/scroll-area'
+import { useScreenSize } from '@/providers/ScreenSizeProvider'
+import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react'
+
+const PrimaryPageLayout = forwardRef(({ children }: { children?: React.ReactNode }, ref) => {
+  const scrollAreaRef = useRef<HTMLDivElement>(null)
+  const [visible, setVisible] = useState(true)
+  const [lastScrollTop, setLastScrollTop] = useState(0)
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      scrollToTop: () => {
+        scrollAreaRef.current?.scrollTo({ top: 0 })
+      }
+    }),
+    []
+  )
+
+  useEffect(() => {
+    const handleScroll = () => {
+      const scrollTop = scrollAreaRef.current?.scrollTop || 0
+      const diff = scrollTop - lastScrollTop
+      if (scrollTop <= 100) {
+        setVisible(true)
+        setLastScrollTop(scrollTop)
+        return
+      }
+
+      if (diff > 20) {
+        setVisible(false)
+        setLastScrollTop(scrollTop)
+      } else if (diff < -20) {
+        setVisible(true)
+        setLastScrollTop(scrollTop)
+      }
+    }
+
+    const scrollArea = scrollAreaRef.current
+    scrollArea?.addEventListener('scroll', handleScroll)
+
+    return () => {
+      scrollArea?.removeEventListener('scroll', handleScroll)
+    }
+  }, [lastScrollTop])
+
+  return (
+    <ScrollArea
+      ref={scrollAreaRef}
+      className="h-full w-full"
+      scrollBarClassName="pt-9 xl:pt-0 max-sm:pt-11"
+    >
+      <PrimaryPageTitlebar visible={visible} />
+      <div className="sm:px-4 pb-4 pt-11 xl:pt-4">{children}</div>
+      <ScrollToTopButton scrollAreaRef={scrollAreaRef} visible={visible} />
+    </ScrollArea>
+  )
+})
+PrimaryPageLayout.displayName = 'PrimaryPageLayout'
+export default PrimaryPageLayout
+
+export type TPrimaryPageLayoutRef = {
+  scrollToTop: () => void
+}
+
+function PrimaryPageTitlebar({ visible = true }: { visible?: boolean }) {
+  const { isSmallScreen } = useScreenSize()
+
+  if (isSmallScreen) {
+    return (
+      <Titlebar
+        className="justify-between px-4 transition-transform duration-500"
+        visible={visible}
+      >
+        <div className="flex gap-1 items-center">
+          <div className="-translate-y-0.5">
+            <Logo className="h-8" />
+          </div>
+          <ThemeToggle variant="small-screen-titlebar" />
+        </div>
+        <div className="flex gap-1 items-center">
+          <SearchButton variant="small-screen-titlebar" />
+          <PostButton variant="small-screen-titlebar" />
+          <RelaySettingsButton variant="small-screen-titlebar" />
+          <NotificationButton variant="small-screen-titlebar" />
+          <AccountButton variant="small-screen-titlebar" />
+        </div>
+      </Titlebar>
+    )
+  }
+
+  return (
+    <Titlebar className="justify-between xl:hidden">
+      <div className="flex gap-2 items-center">
+        <AccountButton />
+        <PostButton />
+        <SearchButton />
+      </div>
+      <div className="flex gap-2 items-center">
+        <RefreshButton />
+        <RelaySettingsButton />
+        <NotificationButton />
+      </div>
+    </Titlebar>
+  )
+}

src/layouts/SecondaryPageLayout/index.tsx

@@ -0,0 +1,98 @@
+import BackButton from '@/components/BackButton'
+import ScrollToTopButton from '@/components/ScrollToTopButton'
+import ThemeToggle from '@/components/ThemeToggle'
+import { Titlebar } from '@/components/Titlebar'
+import { ScrollArea } from '@/components/ui/scroll-area'
+import { useScreenSize } from '@/providers/ScreenSizeProvider'
+import { useEffect, useRef, useState } from 'react'
+
+export default function SecondaryPageLayout({
+  children,
+  titlebarContent,
+  hideBackButton = false,
+  hideScrollToTopButton = false
+}: {
+  children?: React.ReactNode
+  titlebarContent?: React.ReactNode
+  hideBackButton?: boolean
+  hideScrollToTopButton?: boolean
+}): JSX.Element {
+  const scrollAreaRef = useRef<HTMLDivElement>(null)
+  const [visible, setVisible] = useState(true)
+  const [lastScrollTop, setLastScrollTop] = useState(0)
+
+  useEffect(() => {
+    const handleScroll = () => {
+      const scrollTop = scrollAreaRef.current?.scrollTop || 0
+      const diff = scrollTop - lastScrollTop
+      if (scrollTop <= 100) {
+        setVisible(true)
+        setLastScrollTop(scrollTop)
+        return
+      }
+
+      if (diff > 20) {
+        setVisible(false)
+        setLastScrollTop(scrollTop)
+      } else if (diff < -20) {
+        setVisible(true)
+        setLastScrollTop(scrollTop)
+      }
+    }
+
+    const scrollArea = scrollAreaRef.current
+    scrollArea?.addEventListener('scroll', handleScroll)
+
+    return () => {
+      scrollArea?.removeEventListener('scroll', handleScroll)
+    }
+  }, [lastScrollTop])
+
+  return (
+    <ScrollArea ref={scrollAreaRef} className="h-full" scrollBarClassName="sm:pt-9  pt-11">
+      <SecondaryPageTitlebar
+        content={titlebarContent}
+        hideBackButton={hideBackButton}
+        visible={visible}
+      />
+      <div className="sm:px-4 pb-4 pt-11 w-full h-full">{children}</div>
+      <ScrollToTopButton
+        scrollAreaRef={scrollAreaRef}
+        visible={!hideScrollToTopButton && visible}
+      />
+    </ScrollArea>
+  )
+}
+
+export function SecondaryPageTitlebar({
+  content,
+  hideBackButton = false,
+  visible = true
+}: {
+  content?: React.ReactNode
+  hideBackButton?: boolean
+  visible?: boolean
+}): JSX.Element {
+  const { isSmallScreen } = useScreenSize()
+
+  if (isSmallScreen) {
+    return (
+      <Titlebar className="pl-2" visible={visible}>
+        <BackButton hide={hideBackButton} variant="small-screen-titlebar" />
+        <div className="truncate text-lg">{content}</div>
+      </Titlebar>
+    )
+  }
+
+  return (
+    <Titlebar className="justify-between">
+      <div className="flex items-center gap-1 flex-1 w-0">
+        <BackButton hide={hideBackButton} />
+        <div className="truncate text-lg">{content}</div>
+      </div>
+      <div className="flex-shrink-0 flex items-center">
+        <ThemeToggle />
+      </div>
+    </Titlebar>
+  )
+}