feat: add show all when filtered media mode

Signed-off-by: Innei <[email protected]>
RSSNext · Sep 15, 2024 · 38c21da · 38c21da
1 parent d9ae277
commit 38c21da
Show file tree

Hide file tree

Showing 6 changed files with 68 additions and 19 deletions.
diff --git a/icons/mgc/photo_album_cute_fi.svg b/icons/mgc/photo_album_cute_fi.svg
diff --git a/locales/app/en.json b/locales/app/en.json
@@ -35,12 +35,14 @@
   "entry_actions.tip": "Tip",
   "entry_actions.unstar": "Unstar",
   "entry_actions.unstarred": "Unstarred.",
+  "entry_column.filtered_content_tip": "You have filtered content hidden.",
+  "entry_column.filtered_content_tip_2": "In addition to the entries shown above, there is also filtered content.",
   "entry_column.refreshing": "Refreshing new entries...",
   "entry_content.ai_summary": "AI summary",
   "entry_content.fetching_content": "Fetching original content and processing...",
   "entry_content.header.play_tts": "Play TTS",
   "entry_content.header.readability": "Readability",
-  "entry_content.no_content": "No content",
+  "entry_content.no_content": "No media available",
   "entry_content.readability_notice": "This content is provided by Readability. If you find typographical anomalies, please go to the source site to view the original content.",
   "entry_content.render_error": "Render error:",
   "entry_content.report_issue": "Report issue",

diff --git a/src/renderer/src/modules/entry-column/Items/picture-item.tsx b/src/renderer/src/modules/entry-column/Items/picture-item.tsx
@@ -8,6 +8,7 @@ import { useEntry } from "@renderer/store/entry/hooks"
 import { useImageDimensions } from "@renderer/store/image"
 import type { PropsWithChildren } from "react"
 import { memo, useEffect, useState } from "react"
+import { useTranslation } from "react-i18next"
 
 import { usePreviewMedia } from "../../../components/ui/media/hooks"
 import { EntryItemWrapper } from "../layouts/EntryItemWrapper"
@@ -24,6 +25,7 @@ export function PictureItem({ entryId, entryPreview, translation }: UniversalIte
 
   const isActive = useRouteParamsSelector(({ entryId }) => entryId === entry?.entries.id)
 
+  const { t } = useTranslation()
   const previewMedia = usePreviewMedia()
   if (!entry) return <ReactVirtuosoItemPlaceholder />
   return (
@@ -46,7 +48,7 @@ export function PictureItem({ entryId, entryPreview, translation }: UniversalIte
         ) : (
           <div className="center aspect-square  w-full flex-col gap-1 rounded-md bg-muted text-xs text-muted-foreground">
             <i className="i-mgc-sad-cute-re size-6" />
-            No media available
+            {t("entry_content.no_content")}
           </div>
         )}
       </div>
@@ -97,7 +99,7 @@ export const PictureWaterFallItem = memo(function PictureWaterFallItem({
             />
           </MasonryItemFixedDimensionWrapper>
         ) : (
-          <div className="center aspect-video flex-col gap-1 bg-muted text-xs text-muted-foreground">
+          <div className="center aspect-video flex-col gap-1 rounded-md bg-muted text-xs text-muted-foreground">
             <i className="i-mgc-sad-cute-re size-6" />
             No media available
           </div>

diff --git a/src/renderer/src/modules/entry-column/index.tsx b/src/renderer/src/modules/entry-column/index.tsx
@@ -1,5 +1,5 @@
 import { useGeneralSettingKey } from "@renderer/atoms/settings/general"
-import { useUISettingKey } from "@renderer/atoms/settings/ui"
+import { setUISetting, useUISettingKey } from "@renderer/atoms/settings/ui"
 import { m } from "@renderer/components/common/Motion"
 import { FeedFoundCanBeFollowError } from "@renderer/components/errors/FeedFoundCanBeFollowErrorFallback"
 import { FeedNotFound } from "@renderer/components/errors/FeedNotFound"
@@ -248,23 +248,67 @@ const ListGird = ({
     }
     return virtuosoOptions.data
   }, [virtuosoOptions.data, filterNoImage])
+  const { t } = useTranslation()
+  if (nextData.length === 0 && virtuosoOptions.data.length > 0) {
+    return (
+      <div className="center absolute inset-x-0 inset-y-12 -translate-y-12 flex-col gap-5">
+        <i className="i-mgc-photo-album-cute-fi size-12" />
+        <div className="text-sm text-muted-foreground">
+          {t("entry_column.filtered_content_tip")}
+        </div>
+
+        <Button
+          onClick={() => {
+            setUISetting("pictureViewFilterNoImage", false)
+          }}
+        >
+          Show All
+        </Button>
+      </div>
+    )
+  }
+
+  const hasFilteredContent = nextData.length < virtuosoOptions.data.length
+
+  const FilteredContentTip = hasFilteredContent && (
+    <div className="center mb-6 flex flex-col gap-5">
+      <i className="i-mgc-photo-album-cute-fi size-12" />
+      <div>{t("entry_column.filtered_content_tip_2")}</div>
+
+      <Button
+        onClick={() => {
+          setUISetting("pictureViewFilterNoImage", false)
+        }}
+      >
+        Show All
+      </Button>
+    </div>
+  )
+
   if (masonry && view === FeedViewType.Pictures) {
     return (
-      <PictureMasonry
-        key={feedId}
-        hasNextPage={virtuosoOptions.totalCount! > virtuosoOptions.data.length}
-        endReached={virtuosoOptions.endReached}
-        data={nextData}
-      />
+      <>
+        <PictureMasonry
+          key={feedId}
+          hasNextPage={virtuosoOptions.totalCount! > virtuosoOptions.data.length}
+          endReached={virtuosoOptions.endReached}
+          data={nextData}
+        />
+
+        {FilteredContentTip}
+      </>
     )
   }
   return (
-    <VirtuosoGrid
-      listClassName={girdClassNames}
-      {...virtuosoOptions}
-      data={nextData}
-      ref={virtuosoRef}
-    />
+    <>
+      <VirtuosoGrid
+        listClassName={girdClassNames}
+        {...virtuosoOptions}
+        data={nextData}
+        ref={virtuosoRef}
+      />
+      {FilteredContentTip}
+    </>
   )
 }
 

diff --git a/src/renderer/src/modules/entry-column/layouts/EntryListHeader.tsx b/src/renderer/src/modules/entry-column/layouts/EntryListHeader.tsx
@@ -188,7 +188,7 @@ const FilterNoImageButton = () => {
         enabled ? "entry_list_header.show_all_items" : "entry_list_header.hide_no_image_items",
       )}
     >
-      <i className="i-mgc-photo-album-cute-re" />
+      <i className={!enabled ? "i-mgc-photo-album-cute-re" : "i-mgc-photo-album-cute-fi"} />
     </ActionButton>
   )
 }

diff --git a/src/renderer/src/modules/settings/tabs/invitations.tsx b/src/renderer/src/modules/settings/tabs/invitations.tsx
@@ -80,7 +80,7 @@ export const SettingInvitations = () => {
       </Button>
       <Divider className="mb-6 mt-8" />
       <div className="flex flex-1 flex-col">
-        <ScrollArea.ScrollArea viewportClassName="max-h-[380px]">
+        <ScrollArea.ScrollArea>
           {invitations.data?.length ? (
             <Table className="mt-4">
               <TableHeader className="border-b">
@@ -91,7 +91,7 @@ export const SettingInvitations = () => {
                   <TableHead className="text-center" size="sm">
                     {t("invitation.tableHeaders.creationTime")}
                   </TableHead>
-                  <TableHead className="text-center" size="sm">
+                  <TableHead className="max-w-[12ch] text-center" size="sm">
                     {t("invitation.tableHeaders.usedBy")}
                   </TableHead>
                 </TableRow>