feat: entry image gallery modal

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

Author: Innei

apps/renderer/src/modules/entry-column/Items/picture-item.tsx

@@ -1,3 +1,9 @@
+import {
+  MasonryIntersectionContext,
+  useMasonryItemRatio,
+  useMasonryItemWidth,
+  useSetStableMasonryItemRatio,
+} from "@follow/components/ui/masonry/contexts.jsx"
 import { Skeleton } from "@follow/components/ui/skeleton/index.jsx"
 import { FeedViewType } from "@follow/constants"
 import { cn } from "@follow/utils/utils"
@@ -22,12 +28,6 @@ import { usePreviewMedia } from "../../../components/ui/media/hooks"
 import { EntryItemWrapper } from "../layouts/EntryItemWrapper"
 import { GridItem, GridItemFooter } from "../templates/grid-item-template"
 import type { EntryItemStatelessProps, UniversalItemProps } from "../types"
-import {
-  MasonryIntersectionContext,
-  useMasonryItemRatio,
-  useMasonryItemWidth,
-  useSetStableMasonryItemRatio,
-} from "./contexts/picture-masonry-context"
 
 export function PictureItem({ entryId, entryPreview, translation }: UniversalItemProps) {
   const entry = useEntry(entryId) || entryPreview

apps/renderer/src/modules/entry-column/Items/picture-masonry.tsx

@@ -1,13 +1,18 @@
+import {
+  MasonryIntersectionContext,
+  MasonryItemsAspectRatioContext,
+  MasonryItemsAspectRatioSetterContext,
+  MasonryItemWidthContext,
+} from "@follow/components/ui/masonry/contexts.jsx"
+import { useMasonryColumn } from "@follow/components/ui/masonry/hooks.js"
 import { Masonry } from "@follow/components/ui/masonry/index.js"
 import { useScrollViewElement } from "@follow/components/ui/scroll-area/hooks.js"
 import { Skeleton } from "@follow/components/ui/skeleton/index.jsx"
 import { useRefValue } from "@follow/hooks"
-import { nextFrame } from "@follow/utils/dom"
-import { throttle } from "lodash-es"
 import type { RenderComponentProps } from "masonic"
 import { useInfiniteLoader } from "masonic"
 import type { FC } from "react"
-import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react"
+import { useCallback, useEffect, useMemo, useRef, useState } from "react"
 import { useEventCallback } from "usehooks-ts"
 
 import { useGeneralSettingKey } from "~/atoms/settings/general"
@@ -16,53 +21,17 @@ import { getEntry } from "~/store/entry"
 import { imageActions } from "~/store/image"
 
 import { batchMarkRead } from "../hooks"
-import {
-  MasonryIntersectionContext,
-  MasonryItemsAspectRatioContext,
-  MasonryItemsAspectRatioSetterContext,
-  MasonryItemWidthContext,
-} from "./contexts/picture-masonry-context"
 import { PictureWaterFallItem } from "./picture-item"
 
 // grid grid-cols-1 @lg:grid-cols-2 @3xl:grid-cols-3 @6xl:grid-cols-4 @7xl:grid-cols-5 px-4 gap-1.5
 
-const breakpoints = {
-  0: 1,
-  // 32rem => 32 * 16= 512
-  512: 2,
-  // 48rem => 48 * 16= 768
-  768: 3,
-  // 72rem => 72 * 16= 1152
-  1152: 4,
-  // 80rem => 80 * 16= 1280
-  1280: 5,
-  1536: 6,
-  1792: 7,
-  2048: 8,
-}
-const getCurrentColumn = (w: number) => {
-  // Initialize column count with the minimum number of columns
-  let columns = 1
-
-  // Iterate through each breakpoint and determine the column count
-  for (const [breakpoint, cols] of Object.entries(breakpoints)) {
-    if (w >= Number.parseInt(breakpoint)) {
-      columns = cols
-    } else {
-      break
-    }
-  }
-
-  return columns
-}
 const gutter = 24
 
 export const PictureMasonry: FC<MasonryProps> = (props) => {
   const { data } = props
   const cacheMap = useState(() => new Map<string, object>())[0]
   const [isInitDim, setIsInitDim] = useState(false)
   const [isInitLayout, setIsInitLayout] = useState(false)
-  const [currentItemWidth, setCurrentItemWidth] = useState(0)
   const restoreDimensions = useEventCallback(async () => {
     const images = [] as string[]
     data.forEach((entryId) => {
@@ -78,42 +47,10 @@ export const PictureMasonry: FC<MasonryProps> = (props) => {
       setIsInitDim(true)
     })
   }, [])
-  const containerRef = useRef<HTMLDivElement>(null)
-  const [currentColumn, setCurrentColumn] = useState(1)
-
-  useLayoutEffect(() => {
-    const $warpper = containerRef.current
-    if (!$warpper) return
-    const handler = () => {
-      const column = getCurrentColumn($warpper.clientWidth)
-      setCurrentItemWidth(Math.trunc($warpper.clientWidth / column - gutter))
-
-      setCurrentColumn(column)
-
-      nextFrame(() => {
-        setIsInitLayout(true)
-      })
-    }
-    const recal = throttle(handler, 1000 / 12)
-
-    let previousWidth = $warpper.offsetWidth
-    const resizeObserver = new ResizeObserver((entries) => {
-      for (const entry of entries) {
-        const newWidth = entry.contentRect.width
-
-        if (newWidth !== previousWidth) {
-          previousWidth = newWidth
 
-          recal()
-        }
-      }
-    })
-    recal()
-    resizeObserver.observe($warpper)
-    return () => {
-      resizeObserver.disconnect()
-    }
-  }, [])
+  const { containerRef, currentColumn, currentItemWidth } = useMasonryColumn(gutter, () => {
+    setIsInitLayout(true)
+  })
 
   const items = useMemo(() => {
     const result = data.map((entryId) => {

apps/renderer/src/modules/entry-content/actions/picture-gallery.tsx

@@ -0,0 +1,114 @@
+import {
+  MasonryItemsAspectRatioContext,
+  MasonryItemsAspectRatioSetterContext,
+  MasonryItemWidthContext,
+  useMasonryItemRatio,
+  useMasonryItemWidth,
+  useSetStableMasonryItemRatio,
+} from "@follow/components/ui/masonry/contexts.jsx"
+import { useMasonryColumn } from "@follow/components/ui/masonry/hooks.js"
+import type { MediaModel } from "@follow/models/types"
+import type { RenderComponentProps } from "masonic"
+import { Masonry } from "masonic"
+import type { PropsWithChildren } from "react"
+import { useEffect, useMemo, useState } from "react"
+
+import { Media, MediaContainerWidthProvider } from "~/components/ui/media"
+import { useImageDimensions } from "~/store/image"
+
+const gutter = 24
+
+const Render: React.ComponentType<
+  RenderComponentProps<{
+    url: string
+    type: "photo" | "video"
+    height?: number
+    width?: number
+    blurhash?: string
+  }>
+> = ({ data }) => {
+  const { url, type, height, width, blurhash } = data
+
+  const itemWidth = useMasonryItemWidth()
+
+  return (
+    <MasonryItemFixedDimensionWrapper url={url}>
+      <Media
+        thumbnail
+        src={url}
+        type={type}
+        className="size-full overflow-hidden"
+        mediaContainerClassName={"w-auto h-auto rounded"}
+        loading="lazy"
+        proxy={{
+          width: itemWidth,
+          height: 0,
+        }}
+        height={height}
+        width={width}
+        blurhash={blurhash}
+      />
+    </MasonryItemFixedDimensionWrapper>
+  )
+}
+export const ImageGallery = ({ images }: { images: MediaModel[] }) => {
+  const { containerRef, currentColumn, currentItemWidth } = useMasonryColumn(gutter)
+
+  const [masonryItemsRadio, setMasonryItemsRadio] = useState<Record<string, number>>({})
+  return (
+    <div ref={containerRef}>
+      <MasonryItemWidthContext.Provider value={currentItemWidth}>
+        <MasonryItemsAspectRatioContext.Provider value={masonryItemsRadio}>
+          <MasonryItemsAspectRatioSetterContext.Provider value={setMasonryItemsRadio}>
+            <MediaContainerWidthProvider width={currentItemWidth}>
+              <Masonry<(typeof images)[number]>
+                items={images}
+                columnGutter={gutter}
+                columnWidth={currentItemWidth}
+                columnCount={currentColumn}
+                overscanBy={2}
+                render={Render as any}
+              />
+            </MediaContainerWidthProvider>
+          </MasonryItemsAspectRatioSetterContext.Provider>
+        </MasonryItemsAspectRatioContext.Provider>
+      </MasonryItemWidthContext.Provider>
+    </div>
+  )
+}
+
+const MasonryItemFixedDimensionWrapper = (
+  props: PropsWithChildren<{
+    url: string
+  }>,
+) => {
+  const { url, children } = props
+  const dim = useImageDimensions(url)
+  const itemWidth = useMasonryItemWidth()
+
+  const itemHeight = dim ? itemWidth / dim.ratio : itemWidth
+  const stableRadio = useState(() => itemWidth / itemHeight || 1)[0]
+  const setItemStableRatio = useSetStableMasonryItemRatio()
+
+  const stableRadioCtx = useMasonryItemRatio(url)
+
+  useEffect(() => {
+    setItemStableRatio(url, stableRadio)
+  }, [setItemStableRatio, stableRadio, url])
+
+  const style = useMemo(
+    () => ({
+      width: itemWidth,
+      height: itemWidth / stableRadioCtx,
+    }),
+    [itemWidth, stableRadioCtx],
+  )
+
+  if (!style.height) return null
+
+  return (
+    <div className="relative flex h-full gap-2 overflow-x-auto overflow-y-hidden" style={style}>
+      {children}
+    </div>
+  )
+}

apps/renderer/src/modules/entry-content/header.tsx

@@ -1,7 +1,7 @@
 import { ActionButton } from "@follow/components/ui/button/index.js"
 import { DividerVertical } from "@follow/components/ui/divider/index.js"
 import { FeedViewType, views } from "@follow/constants"
-import type { CombinedEntryModel } from "@follow/models/types"
+import type { CombinedEntryModel, MediaModel } from "@follow/models/types"
 import { IN_ELECTRON } from "@follow/shared/constants"
 import { cn } from "@follow/utils/utils"
 import { Slot } from "@radix-ui/react-slot"
@@ -17,15 +17,18 @@ import {
   useEntryInReadabilityStatus,
 } from "~/atoms/readability"
 import { useUISettingKey } from "~/atoms/settings/ui"
+import { useModalStack } from "~/components/ui/modal/stacked/hooks"
 import { shortcuts } from "~/constants/shortcuts"
 import { useEntryActions, useEntryReadabilityToggle } from "~/hooks/biz/useEntryActions"
 import { useRouteParamsSelector } from "~/hooks/biz/useRouteParams"
 import { tipcClient } from "~/lib/client"
 import { parseHtml } from "~/lib/parse-html"
+import { filterSmallMedia } from "~/lib/utils"
 import type { FlatEntryModel } from "~/store/entry"
 import { useEntry } from "~/store/entry/hooks"
 import { useFeedById } from "~/store/feed"
 
+import { ImageGallery } from "./actions/picture-gallery"
 import { useEntryContentScrollToTop, useEntryTitleMeta } from "./atoms"
 import { EntryReadHistory } from "./components/EntryReadHistory"
 
@@ -102,6 +105,7 @@ function EntryHeaderImpl({
         <div className="relative flex shrink-0 items-center justify-end gap-3">
           {!compact && <ElectronAdditionActions view={view} entry={entry} key={entry.entries.id} />}
 
+          <SpecialActions id={entry.entries.id} />
           {items
             .filter((item) => !item.hide)
             .map((item) => (
@@ -228,3 +232,26 @@ const ElectronAdditionActions = IN_ELECTRON
   : noop
 
 export const EntryHeader = memo(EntryHeaderImpl)
+
+const SpecialActions = ({ id }: { id: string }) => {
+  const images = useEntry(id, (entry) => entry.entries.media)
+  const { present } = useModalStack()
+  const filteredImages = filterSmallMedia(images)
+  if (filteredImages?.length && filteredImages.length > 5) {
+    return (
+      <ActionButton
+        onClick={() => {
+          window.analytics?.capture("entry_content_header_image_gallery_click")
+          present({
+            title: "Image Gallery",
+            content: () => <ImageGallery images={filteredImages as any as MediaModel[]} />,
+            max: true,
+          })
+        }}
+        icon={<i className="i-mgc-pic-cute-fi" />}
+        tooltip={`Image Gallery`}
+      />
+    )
+  }
+  return null
+}

apps/server/client/components/items/picture-masonry-context.ts

@@ -1,8 +1,3 @@
-import {
-  MasonryItemsAspectRatioContext,
-  MasonryItemsAspectRatioSetterContext,
-  MasonryItemWidthContext,
-} from "@client/components/items/picture-masonry-context"
 import { TeleportalTakeOff } from "@client/components/layout/main/teleportal"
 import { LazyImage } from "@client/components/ui/image"
 import { getPreferredTitle } from "@client/lib/helper"
@@ -11,6 +6,14 @@ import type { Feed } from "@client/query/feed"
 import { MemoedDangerousHTMLStyle } from "@follow/components/common/MemoedDangerousHTMLStyle.jsx"
 import { FeedIcon } from "@follow/components/ui/feed-icon/index.jsx"
 import { TitleMarquee } from "@follow/components/ui/marquee/index.jsx"
+import {
+  MasonryItemsAspectRatioContext,
+  MasonryItemsAspectRatioSetterContext,
+  MasonryItemWidthContext,
+  useMasonryItemRatio,
+  useMasonryItemWidth,
+  useSetStableMasonryItemRatio,
+} from "@follow/components/ui/masonry/contexts.jsx"
 import { Masonry } from "@follow/components/ui/masonry/index.jsx"
 import type { EntryModel } from "@follow/models/types"
 import { nextFrame } from "@follow/utils/dom"
@@ -24,12 +27,6 @@ import { memo, useEffect, useLayoutEffect, useMemo, useRef, useState } from "rea
 import { PhotoProvider, PhotoView } from "react-photo-view"
 import inlineStyle from "react-photo-view/dist/react-photo-view.css?raw"
 
-import {
-  useMasonryItemRatio,
-  useMasonryItemWidth,
-  useSetStableMasonryItemRatio,
-} from "./picture-masonry-context"
-
 const MasonryItemFixedDimensionWrapper = (
   props: PropsWithChildren<{
     url: string