feat: uniq macos entry column position

Signed-off-by: Innei <tukon479@gmail.com>

Author: Innei

apps/renderer/src/atoms/dom.ts

@@ -4,3 +4,6 @@ import { createAtomHooks } from "~/lib/jotai"
 
 export const [, , useMainContainerElement, , getMainContainerElement, setMainContainerElement] =
   createAtomHooks(atom<HTMLElement | null>(null))
+
+export const [, , useRootContainerElement, , getRootContainerElement, setRootContainerElement] =
+  createAtomHooks(atom<HTMLElement | null>(null))

apps/renderer/src/modules/entry-column/layouts/EntryListHeader.tsx

@@ -5,9 +5,8 @@ import { RotatingRefreshIcon } from "@follow/components/ui/loading/index.jsx"
 import { EllipsisHorizontalTextWithTooltip } from "@follow/components/ui/typography/index.js"
 import { FeedViewType, views } from "@follow/constants"
 import { useIsOnline } from "@follow/hooks"
-import { IN_ELECTRON } from "@follow/shared/constants"
 import { stopPropagation } from "@follow/utils/dom"
-import { cn, getOS, isBizId } from "@follow/utils/utils"
+import { cn, isBizId } from "@follow/utils/utils"
 import type { FC } from "react"
 import * as React from "react"
 import { useTranslation } from "react-i18next"
@@ -20,6 +19,7 @@ import {
   useSetZenMode,
   useUISettingKey,
 } from "~/atoms/settings/ui"
+import { useFeedColumnShow } from "~/atoms/sidebar"
 import { useWhoami } from "~/atoms/user"
 import { ImpressionView } from "~/components/common/ImpressionTracker"
 import { FEED_COLLECTION_LIST, ROUTE_ENTRY_PENDING, ROUTE_FEED_IN_LIST } from "~/constants"
@@ -46,14 +46,12 @@ export const EntryListHeader: FC<{
   const { feedId, entryId, view, listId } = routerParams
 
   const headerTitle = useFeedHeaderTitle()
-  const os = getOS()
 
-  const titleAtBottom = IN_ELECTRON && os === "macOS"
   const isInCollectionList =
     feedId === FEED_COLLECTION_LIST || feedId?.startsWith(ROUTE_FEED_IN_LIST)
 
   const titleInfo = !!headerTitle && (
-    <div className={!titleAtBottom ? "min-w-0 translate-y-1" : void 0}>
+    <div className={"min-w-0 translate-y-1"}>
       <div className="h-6 min-w-0 break-all text-lg font-bold leading-tight">
         <EllipsisHorizontalTextWithTooltip className="inline-block !w-auto max-w-full">
           <span className="relative -top-px">{headerTitle}</span>
@@ -78,17 +76,18 @@ export const EntryListHeader: FC<{
   const containerRef = React.useRef<HTMLDivElement>(null)
   const titleStyleBasedView = ["pl-6", "pl-7", "pl-7", "pl-7", "px-5", "pl-6"]
 
+  const feedColumnShow = useFeedColumnShow()
   return (
     <div
       ref={containerRef}
       className={cn(
         "mb-2 flex w-full flex-col pr-4 pt-2.5 transition-[padding] duration-300 ease-in-out",
+        !feedColumnShow && "macos:mt-4 macos:pt-margin-macos-traffic-light-y",
         titleStyleBasedView[view],
       )}
     >
-      <div className={cn("flex w-full", titleAtBottom ? "justify-end" : "justify-between")}>
-        {!titleAtBottom && titleInfo}
-
+      <div className={"flex w-full justify-between"}>
+        {titleInfo}
         <div
           className={cn(
             "relative z-[1] flex items-center gap-1 self-baseline text-zinc-500",
@@ -163,7 +162,7 @@ export const EntryListHeader: FC<{
           )}
         </div>
       </div>
-      {titleAtBottom && titleInfo}
+
       {/* <TimelineTabs /> */}
     </div>
   )

apps/renderer/src/modules/feed-column/index.tsx

@@ -1,5 +1,6 @@
 import { useDroppable } from "@dnd-kit/core"
 import { ActionButton } from "@follow/components/ui/button/index.js"
+import { RootPortal } from "@follow/components/ui/portal/index.js"
 import { Routes, views } from "@follow/constants"
 import { useTypeScriptHappyCallback } from "@follow/hooks"
 import { useRegisterGlobalContext } from "@follow/shared/bridge"
@@ -13,8 +14,9 @@ import { startTransition, useCallback, useLayoutEffect, useRef, useState } from
 import { isHotkeyPressed, useHotkeys } from "react-hotkeys-hook"
 import { useTranslation } from "react-i18next"
 
+import { useRootContainerElement } from "~/atoms/dom"
 import { useUISettingKey } from "~/atoms/settings/ui"
-import { useFeedColumnShow, useSidebarActiveView } from "~/atoms/sidebar"
+import { setFeedColumnShow, useFeedColumnShow, useSidebarActiveView } from "~/atoms/sidebar"
 import { HotKeyScopeMap, isElectronBuild } from "~/constants"
 import { shortcuts } from "~/constants/shortcuts"
 import { useNavigateEntry } from "~/hooks/biz/useNavigateEntry"
@@ -145,19 +147,31 @@ export function FeedColumn({ children, className }: PropsWithChildren<{ classNam
 
   const shouldFreeUpSpace = useShouldFreeUpSpace()
   const feedColumnShow = useFeedColumnShow()
+  const rootContainerElement = useRootContainerElement()
 
   return (
     <WindowUnderBlur
       data-hide-in-print
       className={cn(
         "relative flex h-full flex-col space-y-3 pt-2.5",
 
-        !feedColumnShow && isElectronBuild && "bg-zinc-200/80 backdrop-blur dark:bg-neutral-800/80",
+        !feedColumnShow && isElectronBuild && "bg-zinc-200 dark:bg-neutral-800",
         className,
       )}
       onClick={useCallback(() => navigateBackHome(), [navigateBackHome])}
     >
       <FeedColumnHeader />
+      {!feedColumnShow && (
+        <RootPortal to={rootContainerElement}>
+          <ActionButton
+            tooltip={"Toggle Feed Column"}
+            className="center absolute top-2.5 z-0 hidden -translate-x-2 text-zinc-500 left-macos-traffic-light macos:flex"
+            onClick={() => setFeedColumnShow(true)}
+          >
+            <i className="i-mgc-layout-leftbar-open-cute-re" />
+          </ActionButton>
+        </RootPortal>
+      )}
 
       <div
         className="flex w-full justify-between px-3 text-xl text-theme-vibrancyFg"

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

@@ -18,7 +18,7 @@ import { Trans, useTranslation } from "react-i18next"
 import { useResizable } from "react-resizable-layout"
 import { Outlet } from "react-router-dom"
 
-import { setMainContainerElement } from "~/atoms/dom"
+import { setMainContainerElement, setRootContainerElement } from "~/atoms/dom"
 import { getIsZenMode, getUISettings, setUISetting, useUISettingKey } from "~/atoms/settings/ui"
 import {
   getFeedColumnTempShow,
@@ -206,9 +206,15 @@ export function Component() {
 
 const RootContainer = forwardRef<HTMLDivElement, PropsWithChildren>(({ children }, ref) => {
   const feedColWidth = useUISettingKey("feedColWidth")
+  const [elementRef, _setElementRef] = useState<HTMLDivElement | null>(null)
+  const setElementRef = React.useCallback((el: HTMLDivElement | null) => {
+    _setElementRef(el)
+    setRootContainerElement(el)
+  }, [])
+  React.useImperativeHandle(ref, () => elementRef!)
   return (
     <div
-      ref={ref}
+      ref={setElementRef}
       style={
         {
           "--fo-feed-col-w": `${feedColWidth}px`,