feat: vibrancy and root providers (#14)

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

src/main/window.ts

@@ -22,6 +22,8 @@ export function createWindow(options?: {
       sandbox: false,
     },
     titleBarStyle: "hiddenInset",
+    vibrancy: "window",
+    visualEffectState: "active",
   })
 
   window.on("ready-to-show", () => {
@@ -55,17 +57,18 @@ export function createWindow(options?: {
   ]
   window.webContents.session.webRequest.onBeforeSendHeaders(
     (details, callback) => {
-      const trueUrl = process.env["VITE_IMGPROXY_URL"] &&
+      const trueUrl =
+        process.env["VITE_IMGPROXY_URL"] &&
         details.url.startsWith(process.env["VITE_IMGPROXY_URL"]) ?
-        decodeURIComponent(
-          details.url.replace(
-            new RegExp(
-              `^${process.env["VITE_IMGPROXY_URL"]}/unsafe/\\d+x\\d+/`,
+          decodeURIComponent(
+            details.url.replace(
+              new RegExp(
+                  `^${process.env["VITE_IMGPROXY_URL"]}/unsafe/\\d+x\\d+/`,
+              ),
+              "",
             ),
-            "",
-          ),
-        ) :
-        details.url
+          ) :
+          details.url
       const refererMatch = refererMatchs.find((item) => item.url.test(trueUrl))
       callback({
         requestHeaders: {

src/renderer/src/App.tsx

@@ -1,8 +1,5 @@
-import { Provider } from "jotai"
 import { Outlet } from "react-router-dom"
 
-import { jotaiStore } from "./lib/jotai"
-
 function App() {
   return (
     <>
@@ -10,9 +7,8 @@ function App() {
         className="drag-region absolute inset-x-0 top-0 h-10 shrink-0"
         aria-hidden
       />
-      <Provider store={jotaiStore}>
-        <Outlet />
-      </Provider>
+
+      <Outlet />
     </>
   )
 }

src/renderer/src/assets/tailwind.css

@@ -71,6 +71,6 @@
     @apply border-border;
   }
   body {
-    @apply bg-background text-foreground;
+    @apply text-foreground;
   }
 }

src/renderer/src/components/feed-column/index.tsx

@@ -2,7 +2,6 @@ import { Button } from "@renderer/components/ui/button"
 import {
   Tooltip,
   TooltipContent,
-  TooltipProvider,
   TooltipTrigger,
 } from "@renderer/components/ui/tooltip"
 import { UserButton } from "@renderer/components/user-button"
@@ -87,7 +86,7 @@ export function FeedColumn() {
         <div className="flex items-center">
           <Button variant="ghost" size="sm">
             <Link to="/profile" className="flex">
-              <UserButton className="h-5 p-0" hideName={true} />
+              <UserButton className="h-5 p-0" hideName />
             </Link>
           </Button>
           <Button variant="ghost" size="sm">
@@ -98,35 +97,33 @@ export function FeedColumn() {
         </div>
       </div>
       <div className="flex w-full justify-between px-3 text-xl text-zinc-500">
-        <TooltipProvider>
-          {views.map((item, index) => (
-            <Tooltip key={item.name}>
-              <TooltipTrigger asChild>
-                <Button
-                  className={cn(
-                    active === index && item.className,
-                    "flex items-center text-xl",
-                  )}
-                  variant="ghost"
-                  size="sm"
-                  onClick={(e) => {
-                    setActive(index)
-                    setActiveList?.({
-                      level: "view",
-                      id: index,
-                      name: views[index].name,
-                      view: index,
-                    })
-                    e.stopPropagation()
-                  }}
-                >
-                  {item.icon}
-                </Button>
-              </TooltipTrigger>
-              <TooltipContent side="bottom">{item.name}</TooltipContent>
-            </Tooltip>
-          ))}
-        </TooltipProvider>
+        {views.map((item, index) => (
+          <Tooltip key={item.name}>
+            <TooltipTrigger asChild>
+              <Button
+                className={cn(
+                  active === index && item.className,
+                  "flex items-center text-xl",
+                )}
+                variant="ghost"
+                size="sm"
+                onClick={(e) => {
+                  setActive(index)
+                  setActiveList?.({
+                    level: "view",
+                    id: index,
+                    name: views[index].name,
+                    view: index,
+                  })
+                  e.stopPropagation()
+                }}
+              >
+                {item.icon}
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent side="bottom">{item.name}</TooltipContent>
+          </Tooltip>
+        ))}
       </div>
       <div className="size-full overflow-hidden" ref={carouselRef}>
         <m.div className="flex h-full" style={{ x: spring }}>

src/renderer/src/main.tsx

@@ -1,15 +1,12 @@
 import "./assets/main.css"
 
-import { authConfigManager, SessionProvider } from "@hono/auth-js/react"
-import { Toaster } from "@renderer/components/ui/toaster"
-import { queryClient } from "@renderer/lib/query-client"
-import { QueryClientProvider } from "@tanstack/react-query"
-import { LazyMotion, MotionConfig } from "framer-motion"
+import { authConfigManager } from "@hono/auth-js/react"
 import * as React from "react"
 import ReactDOM from "react-dom/client"
 import { createBrowserRouter, RouterProvider } from "react-router-dom"
 
 import App from "./App"
+import { RootProviders } from "./providers/root-providers"
 
 const router = createBrowserRouter([
   {
@@ -97,9 +94,6 @@ const router = createBrowserRouter([
   },
 ])
 
-const loadFeatures = () =>
-  import("./framer-lazy-feature").then((res) => res.default)
-
 authConfigManager.setConfig({
   baseUrl: import.meta.env.VITE_API_URL,
   basePath: "/auth",
@@ -108,21 +102,8 @@ authConfigManager.setConfig({
 
 ReactDOM.createRoot(document.querySelector("#root") as HTMLElement).render(
   <React.StrictMode>
-    <LazyMotion features={loadFeatures} strict key="framer">
-      <MotionConfig
-        transition={{
-          type: "tween",
-          duration: 0.15,
-          ease: "easeInOut",
-        }}
-      >
-        <SessionProvider>
-          <QueryClientProvider client={queryClient}>
-            <RouterProvider router={router} />
-          </QueryClientProvider>
-        </SessionProvider>
-      </MotionConfig>
-    </LazyMotion>
-    <Toaster />
+    <RootProviders>
+      <RouterProvider router={router} />
+    </RootProviders>
   </React.StrictMode>,
 )

src/renderer/src/pages/(main)/(context)/layout.tsx

@@ -4,11 +4,12 @@ import { Outlet } from "react-router-dom"
 export function Component() {
   return (
     <div className="flex h-full">
-      <div className="w-64 shrink-0 border-r bg-native pt-10">
+      <div className="w-64 shrink-0 border-r bg-native/80 pt-10 backdrop-blur">
         <FeedColumn />
       </div>
-
-      <Outlet />
+      <div className="flex flex-1 bg-background">
+        <Outlet />
+      </div>
     </div>
   )
 }

src/renderer/src/pages/settings/layout.tsx

@@ -32,7 +32,7 @@ export function Component() {
         Follow Settings
       </div> */}
       <div className="flex flex-1">
-        <div className="w-44 border-r bg-native p-3 pt-10">
+        <div className="w-44 border-r bg-native/80 p-3 pt-10 backdrop-blur">
           <div className="mx-2 mb-5 flex items-center gap-1 text-xl font-bold">
             <img src="./icon.svg" alt="logo" className="size-6" />
             Settings
@@ -50,7 +50,7 @@ export function Component() {
             </Link>
           ))}
         </div>
-        <div className="p-8">
+        <div className="flex-1 bg-background p-8">
           <Outlet />
         </div>
       </div>

src/renderer/src/providers/root-providers.tsx

@@ -0,0 +1,32 @@
+import { SessionProvider } from "@hono/auth-js/react"
+import { Toaster } from "@renderer/components/ui/toaster"
+import { TooltipProvider } from "@renderer/components/ui/tooltip"
+import { jotaiStore } from "@renderer/lib/jotai"
+import { queryClient } from "@renderer/lib/query-client"
+import { QueryClientProvider } from "@tanstack/react-query"
+import { LazyMotion, MotionConfig } from "framer-motion"
+import { Provider } from "jotai"
+import type { FC, PropsWithChildren } from "react"
+
+const loadFeatures = () =>
+  import("../framer-lazy-feature").then((res) => res.default)
+export const RootProviders: FC<PropsWithChildren> = (props) => (
+  <LazyMotion features={loadFeatures} strict key="framer">
+    <MotionConfig
+      transition={{
+        type: "tween",
+        duration: 0.15,
+        ease: "easeInOut",
+      }}
+    >
+      <SessionProvider>
+        <QueryClientProvider client={queryClient}>
+          <TooltipProvider>
+            <Provider store={jotaiStore}>{props.children}</Provider>
+          </TooltipProvider>
+        </QueryClientProvider>
+      </SessionProvider>
+    </MotionConfig>
+    <Toaster />
+  </LazyMotion>
+)