fix: ban global location (#84)

* fix: ban global `location`

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

* fix: modal transition and tab layout id

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

* fix

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

---------

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

eslint.config.mjs

@@ -24,6 +24,13 @@ export default defineConfig(
     },
     rules: {
       "unicorn/prefer-module": "off",
+      "no-restricted-globals": [
+        "error",
+        {
+          name: "location",
+          message: "Since you don't use the same router instance in electron and browser, you can't use the global location to get the route info. \n\n" + "You can use `useLocaltion` or `getReadonlyRoute` to get the route info.",
+        },
+      ],
     },
   },
 )

src/renderer/src/components/ui/modal/stacked/modal.tsx

@@ -92,7 +92,9 @@ export const ModalInternal: Component<{
 
   const animateController = useAnimationControls()
   useEffect(() => {
-    requestAnimationFrame(() => animateController.start(modalMontionConfig.animate))
+    requestAnimationFrame(() => {
+      animateController.start(modalMontionConfig.animate)
+    })
   }, [animateController])
   const noticeModal = useCallback(() => {
     animateController

src/renderer/src/components/ui/tabs.tsx

@@ -5,7 +5,20 @@ import { cva } from "class-variance-authority"
 import { m } from "framer-motion"
 import * as React from "react"
 
-const Tabs = TabsPrimitive.Root
+const TabsIdContext = React.createContext<string | null>(null)
+
+const Tabs: typeof TabsPrimitive.Root = React.forwardRef((props, ref) => {
+  const { children, ...rest } = props
+  const id = React.useId()
+
+  return (
+    <TabsIdContext.Provider value={id}>
+      <TabsPrimitive.Root {...rest} ref={ref}>
+        {children}
+      </TabsPrimitive.Root>
+    </TabsIdContext.Provider>
+  )
+})
 
 const tabsListVariants = cva("", {
   variants: {
@@ -63,6 +76,8 @@ const TabsTrigger = React.forwardRef<
   React.useImperativeHandle(ref, () => triggerRef.current!, [ref])
 
   const [isSelect, setIsSelect] = React.useState(false)
+  const id = React.useContext(TabsIdContext)
+  const layoutId = `tab-selected-underline-${id}`
   React.useLayoutEffect(() => {
     if (!triggerRef.current) return
 
@@ -98,7 +113,7 @@ const TabsTrigger = React.forwardRef<
       {children}
       {isSelect && (
         <m.span
-          layoutId="tab-selected-underline"
+          layoutId={layoutId}
           className="absolute -bottom-1 h-0.5 w-[calc(100%-16px)] rounded bg-theme-accent"
         />
       )}

src/renderer/src/pages/(external)/(with-layout)/feed/[id]/index.tsx

@@ -17,12 +17,13 @@ import { useFeed } from "@renderer/queries/feed"
 import { DEEPLINK_SCHEME } from "@shared/constants"
 import type { FC } from "react"
 import { Helmet } from "react-helmet-async"
-import { useParams } from "react-router-dom"
+import { useParams, useSearchParams } from "react-router-dom"
 
 export function Component() {
   const { id } = useParams()
+  const [search] = useSearchParams()
   const view = Number.parseInt(
-    new URLSearchParams(location.search).get("view") || "0",
+    search.get("view") || "0",
   )
 
   const feed = useFeed({

src/renderer/src/pages/(external)/login.tsx

@@ -5,15 +5,15 @@ import { useSignOut } from "@renderer/hooks"
 import { LOGIN_CALLBACK_URL, loginHandler } from "@renderer/lib/auth"
 import { APP_NAME } from "@renderer/lib/constants"
 import { useEffect, useState } from "react"
-import { useNavigate } from "react-router-dom"
+import { useLocation, useNavigate } from "react-router-dom"
 
 export function Component() {
   const { status } = useSession()
   const navigate = useNavigate()
   const [redirecting, setRedirecting] = useState(false)
   const signOut = useSignOut()
-
-  const urlParams = new URLSearchParams(window.location.search)
+  const location = useLocation()
+  const urlParams = new URLSearchParams(location.search)
   const provider = urlParams.get("provider")
   useEffect(() => {
     if (!window.electron && provider) {
@@ -36,7 +36,6 @@ export function Component() {
       <Logo className="size-20" />
       <h1 className="text-3xl font-bold">
         Log in to
-        {" "}
         {APP_NAME}
       </h1>
       {redirecting ? (

src/renderer/src/pages/(external)/redirect.tsx

@@ -22,7 +22,9 @@ export function Component() {
     if (window.electron) {
       navigate("/")
     } else {
-      getCallbackUrl().then((url) => window.open(url))
+      getCallbackUrl().then((url) => {
+        window.open(url)
+      })
     }
   }, [])
 

src/renderer/src/pages/add/index.tsx

@@ -1,9 +1,11 @@
 import { FeedViewType } from "@renderer/lib/enum"
 import { FeedForm } from "@renderer/modules/discover/feed-form"
 import { useLayoutEffect } from "react"
+import { useSearchParams } from "react-router-dom"
 
 export function Component() {
-  const urlSearchParams = new URLSearchParams(location.search)
+  const [urlSearchParams] = useSearchParams()
+
   const paramUrl = urlSearchParams.get("url")
   const url = paramUrl ? decodeURIComponent(paramUrl) : undefined
   const id = urlSearchParams.get("id") || undefined

src/renderer/src/pages/preview.tsx

@@ -1,4 +1,7 @@
+import { useLocation } from "react-router-dom"
+
 export function Component() {
+  const location = useLocation()
   const urlSearchParams = new URLSearchParams(location.search)
   const url = urlSearchParams.get("url")
 

src/renderer/src/router.tsx

@@ -1,4 +1,4 @@
-import { createHashRouter } from "react-router-dom"
+import { createBrowserRouter, createHashRouter } from "react-router-dom"
 
 import App from "./App"
 import { NotFound } from "./components/ui/not-found"
@@ -7,7 +7,9 @@ import { buildGlobRoutes } from "./lib/route-builder"
 const globTree = import.meta.glob("./pages/**/*.tsx")
 const tree = buildGlobRoutes(globTree)
 
-export const router = createHashRouter([
+const routerCreator = window.electron ? createHashRouter : createBrowserRouter
+
+export const router = routerCreator([
   {
     path: "/",
     element: <App />,

src/shared/src/electron.ts

@@ -26,6 +26,7 @@ export const openElectronWindow = async (
 
     window.open(urlObject.toString())
   } else {
+    // eslint-disable-next-line no-restricted-globals
     window.open(url.replace(DEEPLINK_SCHEME, `${location.origin}/`))
   }
 }