fix: resizeable panel

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

package.json

@@ -146,7 +146,6 @@
     "@tailwindcss/container-queries": "0.1.1",
     "@tailwindcss/typography": "0.5.13",
     "@types/lodash-es": "4.17.12",
-
     "@types/node": "^20.14.12",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
@@ -182,7 +181,8 @@
       "sonner@1.5.0": "patches/sonner@1.5.0.patch",
       "hono@4.4.7": "patches/hono@4.4.7.patch",
       "immer@10.1.1": "patches/immer@10.1.1.patch",
-      "@mozilla/readability@0.5.0": "patches/@mozilla__readability@0.5.0.patch"
+      "@mozilla/readability@0.5.0": "patches/@mozilla__readability@0.5.0.patch",
+      "re-resizable@6.9.17": "patches/re-resizable@6.9.17.patch"
     }
   },
   "simple-git-hooks": {

patches/re-resizable@6.9.17.patch

@@ -0,0 +1,49 @@
+diff --git a/lib/resizer.js b/lib/resizer.js
+index a051e406e92de35277d9aa335302a9216943f5b4..6214d334cf4840748e0ea192ace51129b414acc8 100644
+--- a/lib/resizer.js
++++ b/lib/resizer.js
+@@ -25,32 +25,32 @@ var __assign = (this && this.__assign) || function () {
+ import * as React from 'react';
+ var rowSizeBase = {
+     width: '100%',
+-    height: '10px',
++    height: '20px',
+     top: '0px',
+     left: '0px',
+     cursor: 'row-resize',
+ };
+ var colSizeBase = {
+-    width: '10px',
++    width: '20px',
+     height: '100%',
+     top: '0px',
+     left: '0px',
+     cursor: 'col-resize',
+ };
+ var edgeBase = {
+-    width: '20px',
+-    height: '20px',
++    width: '40px',
++    height: '40px',
+     position: 'absolute',
+ };
+ var styles = {
+-    top: __assign(__assign({}, rowSizeBase), { top: '-5px' }),
+-    right: __assign(__assign({}, colSizeBase), { left: undefined, right: '-5px' }),
+-    bottom: __assign(__assign({}, rowSizeBase), { top: undefined, bottom: '-5px' }),
+-    left: __assign(__assign({}, colSizeBase), { left: '-5px' }),
+-    topRight: __assign(__assign({}, edgeBase), { right: '-10px', top: '-10px', cursor: 'ne-resize' }),
+-    bottomRight: __assign(__assign({}, edgeBase), { right: '-10px', bottom: '-10px', cursor: 'se-resize' }),
+-    bottomLeft: __assign(__assign({}, edgeBase), { left: '-10px', bottom: '-10px', cursor: 'sw-resize' }),
+-    topLeft: __assign(__assign({}, edgeBase), { left: '-10px', top: '-10px', cursor: 'nw-resize' }),
++    top: __assign(__assign({}, rowSizeBase), { top: '-10px' }),
++    right: __assign(__assign({}, colSizeBase), { left: undefined, right: '-10px' }),
++    bottom: __assign(__assign({}, rowSizeBase), { top: undefined, bottom: '-10px' }),
++    left: __assign(__assign({}, colSizeBase), { left: '-10px' }),
++    topRight: __assign(__assign({}, edgeBase), { right: '-20px', top: '-20px', cursor: 'ne-resize' }),
++    bottomRight: __assign(__assign({}, edgeBase), { right: '-20px', bottom: '-20px', cursor: 'se-resize' }),
++    bottomLeft: __assign(__assign({}, edgeBase), { left: '-20px', bottom: '-20px', cursor: 'sw-resize' }),
++    topLeft: __assign(__assign({}, edgeBase), { left: '-20px', top: '-20px', cursor: 'nw-resize' }),
+ };
+ var Resizer = /** @class */ (function (_super) {
+     __extends(Resizer, _super);

src/main/tipc/menu.ts

@@ -7,7 +7,7 @@ import { getMainWindow } from "../window"
 import { t } from "./_instance"
 
 type MenuItem = ActionMenuItem | { type: "separator" }
-interface ActionMenuItem {
+export interface ActionMenuItem {
   type: "text"
   label: string
   enabled?: boolean

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

@@ -315,6 +315,9 @@ export const ModalInternal = memo(
                         }}
                       >
                         <ResizeSwitch
+                          enable={{
+                            bottomRight: true,
+                          }}
                           onResizeStart={handleResizeEnable}
                           defaultSize={resizeDefaultSize}
                           className="flex grow flex-col"

src/renderer/src/modules/settings/modal/content.tsx

@@ -4,6 +4,7 @@ import { useCurrentModal } from "@renderer/components/ui/modal"
 import { ScrollArea } from "@renderer/components/ui/scroll-area"
 import { SettingsTitle } from "@renderer/modules/settings/title"
 import type { FC } from "react"
+import { Suspense, useDeferredValue } from "react"
 
 import { settings } from "../constants"
 import { SettingTabProvider, useSettingTab } from "./context"
@@ -40,7 +41,7 @@ const Close = () => {
 
   return (
     <MotionButtonBase
-      className="absolute right-8 top-7 z-[99]"
+      className="absolute right-8 top-8 z-[99]"
       onClick={dismiss}
     >
       <i className="i-mgc-close-cute-re" />
@@ -49,19 +50,19 @@ const Close = () => {
 }
 
 const Content = () => {
-  const key = useSettingTab() || "general"
+  const key = useDeferredValue(useSettingTab() || "general")
   const { Component, loader } = pages[key]
 
   if (!Component) return null
 
   return (
-    <>
+    <Suspense>
       <SettingsTitle loader={loader} className="relative mb-0 px-8" />
       <Close />
       <ScrollArea.ScrollArea
         mask={false}
-        rootClassName="h-full grow flex-1 shrink-0 overflow-auto pl-8 pr-7 pb-8"
-        viewportClassName="pr-1 min-h-full [&>div]:min-h-full [&>div]:relative"
+        rootClassName="h-full grow flex-1 shrink-0 overflow-auto pl-8 pr-7"
+        viewportClassName="pr-1 min-h-full [&>div]:min-h-full [&>div]:relative pb-8"
       >
         <Component />
 
@@ -81,6 +82,6 @@ const Content = () => {
           !
         </p>
       </ScrollArea.ScrollArea>
-    </>
+    </Suspense>
   )
 }

src/renderer/src/modules/settings/modal/layout.tsx

@@ -7,7 +7,7 @@ import { cn } from "@renderer/lib/utils"
 import { useDragControls } from "framer-motion"
 import { Resizable } from "re-resizable"
 import type { PointerEventHandler, PropsWithChildren } from "react"
-import { useCallback, useEffect, useRef } from "react"
+import { Suspense, useCallback, useEffect, useRef } from "react"
 
 import { settings } from "../constants"
 import { SettingsSidebarTitle } from "../title"
@@ -78,6 +78,9 @@ export function SettingModalLayout(
       >
         <Resizable
           onResizeStart={handlePointDown}
+          enable={{
+            bottomRight: true,
+          }}
           style={{ ...resizeableStyle, position: "static" }}
           defaultSize={{
             width: 800,
@@ -119,7 +122,7 @@ export function SettingModalLayout(
               ))}
             </div>
             <div className="relative flex h-full flex-1 flex-col bg-theme-background pt-1">
-              {children}
+              <Suspense>{children}</Suspense>
             </div>
           </div>
         </Resizable>

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

@@ -40,7 +40,7 @@ export function Component() {
           "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",
+          "group border-b bg-zinc-50/80 backdrop-blur-xl dark:bg-neutral-900/90",
         )}
       >
         <MotionButtonBase

src/renderer/src/store/entry/helper.ts

@@ -44,7 +44,7 @@ const unread = create({
  * Only call in store action
  * @internal
  */
-export const interval_batchMarkRead = (...args: Parameters<typeof unread.fetch>) => unread.fetch.apply(null, args)
+export const internal_batchMarkRead = (...args: Parameters<typeof unread.fetch>) => unread.fetch.apply(null, args)
 
 export const getEntryIsInView = (entryId: string) => {
   const state = useEntryStore.getState()

src/renderer/src/store/entry/store.ts

@@ -20,7 +20,7 @@ import { imageActions } from "../image"
 import { feedUnreadActions } from "../unread"
 import { userActions } from "../user"
 import { createZustandStore, doMutationAndTransaction } from "../utils/helper"
-import { interval_batchMarkRead } from "./helper"
+import { internal_batchMarkRead } from "./helper"
 import type { EntryState, FlatEntryModel } from "./types"
 
 const createState = (): EntryState => ({
@@ -325,7 +325,7 @@ class EntryActions {
       // Send api request
       async () => {
         if (read) {
-          await interval_batchMarkRead([feedId, entryId])
+          await internal_batchMarkRead([feedId, entryId])
         } else {
           await apiClient.reads.$delete({
             json: {