feat: customizable columns for masonry view, closed #1749

Signed-off-by: Innei <[email protected]>
RSSNext · Nov 26, 2024 · 0e0ce84 · 0e0ce84
1 parent f21f3ee
commit 0e0ce84
Show file tree

Hide file tree

Showing 25 changed files with 166 additions and 81 deletions.
diff --git a/apps/renderer/src/modules/entry-column/Items/picture-masonry.tsx b/apps/renderer/src/modules/entry-column/Items/picture-masonry.tsx
@@ -32,6 +32,7 @@ import { MediaContainerWidthProvider } from "~/components/ui/media"
 import { getEntry } from "~/store/entry"
 import { imageActions } from "~/store/image"
 
+import { getMasonryColumnValue, setMasonryColumnValue, useMasonryColumnValue } from "../atoms"
 import { batchMarkRead } from "../hooks"
 import { PictureWaterFallItem } from "./picture-item"
 
@@ -66,9 +67,22 @@ export const PictureMasonry: FC<MasonryProps> = (props) => {
     })
   }, [])
 
-  const { containerRef, currentColumn, currentItemWidth } = useMasonryColumn(gutter, () => {
-    setIsInitLayout(true)
-  })
+  const customizeColumn = useMasonryColumnValue()
+  const { containerRef, currentColumn, currentItemWidth, calcItemWidth } = useMasonryColumn(
+    gutter,
+    (column) => {
+      setIsInitLayout(true)
+      if (getMasonryColumnValue() === -1) {
+        setMasonryColumnValue(column)
+      }
+    },
+  )
+
+  const finalColumn = customizeColumn !== -1 ? customizeColumn : currentColumn
+  const finalItemWidth = useMemo(
+    () => (customizeColumn !== -1 ? calcItemWidth(finalColumn) : currentItemWidth),
+    [calcItemWidth, currentItemWidth, customizeColumn, finalColumn],
+  )
 
   const items = useMemo(() => {
     const result = data.map((entryId) => {
@@ -197,17 +211,17 @@ export const PictureMasonry: FC<MasonryProps> = (props) => {
   return (
     <div ref={containerRef} className="mx-4 pt-2">
       {isInitDim && deferIsInitLayout && (
-        <MasonryItemWidthContext.Provider value={currentItemWidth}>
+        <MasonryItemWidthContext.Provider value={finalItemWidth}>
           <MasonryItemsAspectRatioContext.Provider value={masonryItemsRadio}>
             <MasonryItemsAspectRatioSetterContext.Provider value={setMasonryItemsRadio}>
               <MasonryIntersectionContext.Provider value={intersectionObserver}>
-                <MediaContainerWidthProvider width={currentItemWidth}>
+                <MediaContainerWidthProvider width={finalItemWidth}>
                   <FirstScreenReadyContext.Provider value={firstScreenReady}>
                     <Masonry
                       items={firstScreenReady ? items : items.slice(0, FirstScreenItemCount)}
                       columnGutter={gutter}
-                      columnWidth={currentItemWidth}
-                      columnCount={currentColumn}
+                      columnWidth={finalItemWidth}
+                      columnCount={finalColumn}
                       overscanBy={2}
                       render={MasonryRender}
                       onRender={handleRender}

diff --git a/apps/renderer/src/modules/entry-column/atoms/index.ts b/apps/renderer/src/modules/entry-column/atoms/index.ts
@@ -0,0 +1,5 @@
+import { createAtomHooks } from "@follow/utils/jotai"
+import { atom } from "jotai"
+
+export const [, , useMasonryColumnValue, , getMasonryColumnValue, setMasonryColumnValue] =
+  createAtomHooks(atom(-1))
diff --git a/apps/renderer/src/modules/entry-column/layouts/EntryListHeader.shared.tsx b/apps/renderer/src/modules/entry-column/layouts/EntryListHeader.shared.tsx
@@ -1,8 +1,17 @@
 import { useMobile } from "@follow/components/hooks/useMobile.js"
 import { MdiMeditation } from "@follow/components/icons/Meditation.js"
+import { AutoResizeHeight } from "@follow/components/ui/auto-resize-height/index.js"
 import { ActionButton } from "@follow/components/ui/button/index.js"
 import { DividerVertical } from "@follow/components/ui/divider/Divider.js"
-import { cn } from "@follow/utils/utils"
+import { SegmentGroup, SegmentItem } from "@follow/components/ui/segment/index.js"
+import { Slider } from "@follow/components/ui/slider/index.js"
+import { clsx, cn } from "@follow/utils/utils"
+import {
+  HoverCard,
+  HoverCardContent,
+  HoverCardPortal,
+  HoverCardTrigger,
+} from "@radix-ui/react-hover-card"
 import type { FC } from "react"
 import * as React from "react"
 import { useTranslation } from "react-i18next"
@@ -18,6 +27,8 @@ import { ImpressionView } from "~/components/common/ImpressionTracker"
 import { shortcuts } from "~/constants/shortcuts"
 import { useAIDailyReportModal } from "~/modules/ai/ai-daily/useAIDailyReportModal"
 
+import { setMasonryColumnValue, useMasonryColumnValue } from "../atoms"
+
 export const DailyReportButton: FC = () => {
   const present = useAIDailyReportModal()
   const { t } = useTranslation()
@@ -63,31 +74,91 @@ export const SwitchToMasonryButton = () => {
   const { t } = useTranslation()
   const isMobile = useMobile()
 
+  const masonryColumnValue = useMasonryColumnValue()
   if (isMobile) return null
   return (
-    <ImpressionView
-      event="Switch to Masonry"
-      properties={{
-        masonry: isMasonry ? 1 : 0,
-      }}
-    >
-      <ActionButton
-        onClick={() => {
-          setUISetting("pictureViewMasonry", !isMasonry)
-          window.analytics?.capture("Switch to Masonry", {
-            masonry: !isMasonry ? 1 : 0,
-            click: 1,
-          })
-        }}
-        tooltip={
-          !isMasonry
-            ? t("entry_list_header.switch_to_masonry")
-            : t("entry_list_header.switch_to_grid")
-        }
-      >
-        <i className={cn(!isMasonry ? "i-mgc-grid-cute-re" : "i-mgc-grid-2-cute-re")} />
-      </ActionButton>
-    </ImpressionView>
+    <HoverCard>
+      <HoverCardTrigger>
+        <ActionButton
+          onClick={() => {
+            setUISetting("pictureViewMasonry", !isMasonry)
+          }}
+        >
+          <i className={cn(!isMasonry ? "i-mgc-grid-cute-re" : "i-mgc-grid-2-cute-re")} />
+        </ActionButton>
+      </HoverCardTrigger>
+      <HoverCardPortal>
+        <HoverCardContent
+          sideOffset={12}
+          side="bottom"
+          className={clsx(
+            "z-10 rounded-xl border bg-background drop-shadow",
+            "data-[state=open]:animate-in data-[state=closed]:animate-out",
+            "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+            "data-[state=closed]:slide-out-to-top-5 data-[state=open]:slide-in-from-top-5",
+            "data-[state=closed]:slide-in-from-top-0 data-[state=open]:slide-in-from-top-0",
+            "transition-all duration-200 ease-in-out",
+            "px-3 py-2",
+          )}
+        >
+          <AutoResizeHeight>
+            <div className="flex flex-col gap-3">
+              <div className="flex items-center">
+                <label className="mr-2 w-[120px] text-sm">
+                  {t("entry_list_header.preview_mode")}
+                </label>
+                <SegmentGroup
+                  className="h-8"
+                  value={isMasonry ? "masonry" : "grid"}
+                  onValueChanged={(v) => {
+                    setUISetting("pictureViewMasonry", v === "masonry")
+                  }}
+                >
+                  <SegmentItem
+                    key="Grid"
+                    value="grid"
+                    label={
+                      <div className="flex items-center gap-1 text-sm">
+                        <i className="i-mgc-grid-2-cute-re" />
+                        <span>{t("entry_list_header.grid")}</span>
+                      </div>
+                    }
+                  />
+                  <SegmentItem
+                    key="Masonry"
+                    value="masonry"
+                    label={
+                      <div className="flex items-center gap-1 text-sm">
+                        <i className="i-mgc-grid-cute-re" />
+                        <span>{t("entry_list_header.masonry")}</span>
+                      </div>
+                    }
+                  />
+                </SegmentGroup>
+              </div>
+
+              {isMasonry && (
+                <div className="flex gap-1">
+                  <label className="mr-2 w-[200px] text-sm">
+                    {t("entry_list_header.masonry_column")}
+                  </label>
+                  <Slider
+                    variant="secondary"
+                    min={1}
+                    max={6}
+                    step={1}
+                    defaultValue={[masonryColumnValue]}
+                    onValueCommit={(value) => {
+                      setMasonryColumnValue(value[0])
+                    }}
+                  />
+                </div>
+              )}
+            </div>
+          </AutoResizeHeight>
+        </HoverCardContent>
+      </HoverCardPortal>
+    </HoverCard>
   )
 }
 

diff --git a/locales/app/ar-DZ.json b/locales/app/ar-DZ.json
@@ -56,8 +56,6 @@
   "entry_list_header.show_all": "عرض الكل",
   "entry_list_header.show_all_items": "عرض جميع العناصر",
   "entry_list_header.show_unread_only": "عرض غير المقروء فقط",
-  "entry_list_header.switch_to_grid": "التبديل إلى الشبكة",
-  "entry_list_header.switch_to_masonry": "التبديل إلى الموزايك",
   "entry_list_header.unread": "غير مقروء",
   "feed_claim_modal.choose_verification_method": "هناك ثلاث طرق للاختيار منها، يمكنك اختيار واحدة منها للتحقق.",
   "feed_claim_modal.claim_button": "مطالبة",

diff --git a/locales/app/ar-IQ.json b/locales/app/ar-IQ.json
@@ -60,8 +60,6 @@
   "entry_list_header.show_all": "عرض الكل",
   "entry_list_header.show_all_items": "عرض جميع الإدخالات",
   "entry_list_header.show_unread_only": "عرض غير المقروء فقط",
-  "entry_list_header.switch_to_grid": "التبديل إلى الشبكة",
-  "entry_list_header.switch_to_masonry": "التبديل إلى التخطيط المكدس",
   "entry_list_header.unread": "غير مقروء",
   "feed_claim_modal.choose_verification_method": "هناك ثلاث طرق للاختيار من بينها، يمكنك اختيار واحدة للتحقق.",
   "feed_claim_modal.claim_button": "ادعاء",

diff --git a/locales/app/ar-KW.json b/locales/app/ar-KW.json
@@ -60,8 +60,6 @@
   "entry_list_header.show_all": "عرض الكل",
   "entry_list_header.show_all_items": "عرض جميع العناصر",
   "entry_list_header.show_unread_only": "عرض غير المقروء فقط",
-  "entry_list_header.switch_to_grid": "التبديل إلى الشبكة",
-  "entry_list_header.switch_to_masonry": "التبديل إلى التخطيط المتسلسل",
   "entry_list_header.unread": "غير مقروء",
   "feed_claim_modal.choose_verification_method": "هناك ثلاث طرق للاختيار من بينها، يمكنك اختيار واحدة منها للتحقق.",
   "feed_claim_modal.claim_button": "المطالبة",

diff --git a/locales/app/ar-MA.json b/locales/app/ar-MA.json
@@ -56,8 +56,6 @@
   "entry_list_header.show_all": "عرض الكل",
   "entry_list_header.show_all_items": "عرض جميع الإدخالات",
   "entry_list_header.show_unread_only": "عرض غير المقروء فقط",
-  "entry_list_header.switch_to_grid": "التبديل إلى العرض الشبكي",
-  "entry_list_header.switch_to_masonry": "التبديل إلى عرض المربعات",
   "entry_list_header.unread": "غير مقروء",
   "feed_claim_modal.choose_verification_method": "هناك ثلاث طرق للتحقق، يمكنك اختيار واحدة منها.",
   "feed_claim_modal.claim_button": "المطالبة",

diff --git a/locales/app/ar-SA.json b/locales/app/ar-SA.json
@@ -53,8 +53,6 @@
   "entry_list_header.show_all": "عرض الكل",
   "entry_list_header.show_all_items": "عرض جميع العناصر",
   "entry_list_header.show_unread_only": "عرض غير المقروء فقط",
-  "entry_list_header.switch_to_grid": "التبديل إلى العرض الشبكي",
-  "entry_list_header.switch_to_masonry": "التبديل إلى العرض المتدرج",
   "entry_list_header.unread": "غير مقروء",
   "feed_claim_modal.choose_verification_method": "هناك ثلاث طرق للاختيار من بينها، يمكنك اختيار واحدة للتحقق.",
   "feed_claim_modal.claim_button": "المطالبة",

diff --git a/locales/app/ar-TN.json b/locales/app/ar-TN.json
@@ -57,8 +57,6 @@
   "entry_list_header.show_all": "عرض الكل",
   "entry_list_header.show_all_items": "عرض جميع الإدخالات",
   "entry_list_header.show_unread_only": "عرض غير المقروء فقط",
-  "entry_list_header.switch_to_grid": "التبديل إلى الشبكة",
-  "entry_list_header.switch_to_masonry": "التبديل إلى البنية",
   "entry_list_header.unread": "غير مقروء",
   "feed_claim_modal.choose_verification_method": "هناك ثلاث طرق للاختيار من بينها، يمكنك اختيار واحدة للتحقق.",
   "feed_claim_modal.claim_button": "ادعاء",

diff --git a/locales/app/de.json b/locales/app/de.json
@@ -60,8 +60,6 @@
   "entry_list_header.show_all": "Alle anzeigen",
   "entry_list_header.show_all_items": "Alle Einträge anzeigen",
   "entry_list_header.show_unread_only": "Nur ungelesene anzeigen",
-  "entry_list_header.switch_to_grid": "Zu Rasteransicht wechseln",
-  "entry_list_header.switch_to_masonry": "Zur Kachelansicht wechseln",
   "entry_list_header.unread": "ungelesen",
   "feed_claim_modal.choose_verification_method": "Es gibt drei Verifikationsmethoden. Wählen Sie eine aus, um die Eigentümerschaft zu bestätigen.",
   "feed_claim_modal.claim_button": "Beanspruchen",

diff --git a/locales/app/en.json b/locales/app/en.json
@@ -153,16 +153,18 @@
   "entry_content.web_app_notice": "Maybe web app doesn't support this content type. But you can download the desktop app.",
   "entry_list.zero_unread": "Zero Unread",
   "entry_list_header.daily_report": "Daily Report",
+  "entry_list_header.grid": "Grid",
   "entry_list_header.hide_no_image_items": "Hide entries without images.",
   "entry_list_header.items": "items",
+  "entry_list_header.masonry": "Masonry",
+  "entry_list_header.masonry_column": "Masonry Column",
   "entry_list_header.new_entries_available": "New entries available",
+  "entry_list_header.preview_mode": "Preview Mode",
   "entry_list_header.refetch": "Refetch",
   "entry_list_header.refresh": "Refresh",
   "entry_list_header.show_all": "Show all",
   "entry_list_header.show_all_items": "Show all entry items",
   "entry_list_header.show_unread_only": "Show unread Only",
-  "entry_list_header.switch_to_grid": "Switch to Grid",
-  "entry_list_header.switch_to_masonry": "Switch to Masonry",
   "entry_list_header.switch_to_normalmode": "Switch to Double Column Mode",
   "entry_list_header.switch_to_widemode": "Switch to Wide Mode",
   "entry_list_header.unread": "unread",

diff --git a/locales/app/es.json b/locales/app/es.json
@@ -43,8 +43,6 @@
   "entry_list_header.refresh": "Actualizar",
   "entry_list_header.show_all": "Mostrar todo",
   "entry_list_header.show_unread_only": "Mostrar solo no leídos",
-  "entry_list_header.switch_to_grid": "Cambiar a cuadrícula",
-  "entry_list_header.switch_to_masonry": "Cambiar a diseño de mampostería",
   "entry_list_header.unread": "No leído",
   "feed_form.add_follow": "Agregar seguimiento",
   "feed_form.category": "Categoría",

diff --git a/locales/app/fi.json b/locales/app/fi.json
@@ -53,8 +53,6 @@
   "entry_list_header.show_all": "Näytä kaikki",
   "entry_list_header.show_all_items": "Näytä kaikki merkintäkohteet",
   "entry_list_header.show_unread_only": "Näytä vain lukemattomat",
-  "entry_list_header.switch_to_grid": "Vaihda ruudukkonäkymään",
-  "entry_list_header.switch_to_masonry": "Vaihda tiilinäkymään",
   "entry_list_header.unread": "lukematon",
   "feed_claim_modal.choose_verification_method": "Valittavana on kolme tapaa, voit valita yhden niistä vahvistaaksesi.",
   "feed_claim_modal.claim_button": "Vahvista",

diff --git a/locales/app/fr.json b/locales/app/fr.json
@@ -53,8 +53,6 @@
   "entry_list_header.show_all": "Tout afficher",
   "entry_list_header.show_all_items": "Afficher tous les éléments",
   "entry_list_header.show_unread_only": "Afficher uniquement les non lus",
-  "entry_list_header.switch_to_grid": "Passer en grille",
-  "entry_list_header.switch_to_masonry": "Passer en maçonnerie",
   "entry_list_header.unread": "non lu",
   "feed_claim_modal.choose_verification_method": "Il existe trois méthodes au choix, vous pouvez en choisir une pour vérifier.",
   "feed_claim_modal.claim_button": "Réclamer",

diff --git a/locales/app/it.json b/locales/app/it.json
@@ -53,8 +53,6 @@
   "entry_list_header.show_all": "Mostra tutto",
   "entry_list_header.show_all_items": "Mostra tutte le voci",
   "entry_list_header.show_unread_only": "Mostra solo non letti",
-  "entry_list_header.switch_to_grid": "Passa alla griglia",
-  "entry_list_header.switch_to_masonry": "Passa a Masonry",
   "entry_list_header.unread": "non letto",
   "feed_claim_modal.choose_verification_method": "Ci sono tre modi tra cui scegliere, puoi sceglierne uno per verificare.",
   "feed_claim_modal.claim_button": "Reclama",

diff --git a/locales/app/ja.json b/locales/app/ja.json
@@ -161,8 +161,6 @@
   "entry_list_header.show_all": "すべて表示",
   "entry_list_header.show_all_items": "すべてのエントリーを表示",
   "entry_list_header.show_unread_only": "未読のみ表示",
-  "entry_list_header.switch_to_grid": "グリッドに切り替え",
-  "entry_list_header.switch_to_masonry": "メイソンリーレイアウトに切り替え",
   "entry_list_header.switch_to_normalmode": "２列モードに切り替え",
   "entry_list_header.switch_to_widemode": "ワイドモードに切り替え",
   "entry_list_header.unread": "未読",

diff --git a/locales/app/ko.json b/locales/app/ko.json
@@ -70,8 +70,6 @@
   "entry_list_header.show_all": "모두 보기",
   "entry_list_header.show_all_items": "모든 항목 보기",
   "entry_list_header.show_unread_only": "읽지 않은 항목만 보기",
-  "entry_list_header.switch_to_grid": "그리드 보기로 전환",
-  "entry_list_header.switch_to_masonry": "메이슨리 보기로 전환",
   "entry_list_header.unread": "읽지 않음",
   "feed_claim_modal.choose_verification_method": "세 가지 방법 중 하나를 선택하여 인증할 수 있습니다.",
   "feed_claim_modal.claim_button": "클레임",

diff --git a/locales/app/pt.json b/locales/app/pt.json
@@ -53,8 +53,6 @@
   "entry_list_header.show_all": "すべて表示",
   "entry_list_header.show_all_items": "すべてのエントリを表示",
   "entry_list_header.show_unread_only": "未読のみ表示",
-  "entry_list_header.switch_to_grid": "グリッドに切り替え",
-  "entry_list_header.switch_to_masonry": "メイソンリーレイアウトに切り替え",
   "entry_list_header.unread": "未読",
   "feed_claim_modal.choose_verification_method": "選択肢は 3 つあります。そのうち 1 つを選んで確認してください。",
   "feed_claim_modal.claim_button": "クレーム",

diff --git a/locales/app/ru.json b/locales/app/ru.json
@@ -53,8 +53,6 @@
   "entry_list_header.show_all": "Показать все",
   "entry_list_header.show_all_items": "Показать все записи",
   "entry_list_header.show_unread_only": "Показать только непрочитанные",
-  "entry_list_header.switch_to_grid": "Переключить на сетку",
-  "entry_list_header.switch_to_masonry": "Переключить на мозаичное отображение",
   "entry_list_header.unread": "непрочитано",
   "feed_claim_modal.choose_verification_method": "Есть три способа на выбор, вы можете выбрать один из них для проверки.",
   "feed_claim_modal.claim_button": "Заявить",

diff --git a/locales/app/tr.json b/locales/app/tr.json
@@ -70,8 +70,6 @@
   "entry_list_header.show_all": "Tümünü göster",
   "entry_list_header.show_all_items": "Tüm giriş öğelerini göster",
   "entry_list_header.show_unread_only": "Sadece okunmamışları göster",
-  "entry_list_header.switch_to_grid": "Izgara görünümüne geç",
-  "entry_list_header.switch_to_masonry": "Masonry görünümüne geç",
   "entry_list_header.unread": "okunmamış",
   "feed_claim_modal.choose_verification_method": "Doğrulama için üç yöntem arasından seçim yapabilirsiniz.",
   "feed_claim_modal.claim_button": "Talep Et",

diff --git a/locales/app/zh-CN.json b/locales/app/zh-CN.json
@@ -161,8 +161,6 @@
   "entry_list_header.show_all": "显示全部",
   "entry_list_header.show_all_items": "显示全部条目",
   "entry_list_header.show_unread_only": "仅显示未读",
-  "entry_list_header.switch_to_grid": "切换到网格",
-  "entry_list_header.switch_to_masonry": "切换到瀑布流",
   "entry_list_header.switch_to_normalmode": "切换到双列模式",
   "entry_list_header.switch_to_widemode": "切换到宽屏模式",
   "entry_list_header.unread": "未读",

diff --git a/locales/app/zh-HK.json b/locales/app/zh-HK.json
@@ -161,8 +161,6 @@
   "entry_list_header.show_all": "顯示所有",
   "entry_list_header.show_all_items": "顯示所有條目",
   "entry_list_header.show_unread_only": "僅顯示未讀",
-  "entry_list_header.switch_to_grid": "切換到網格視圖",
-  "entry_list_header.switch_to_masonry": "切換到 Masonry 視圖",
   "entry_list_header.switch_to_normalmode": "切換至正常模式",
   "entry_list_header.switch_to_widemode": "切換至寬螢幕模式",
   "entry_list_header.unread": "未讀",