feat: add 'dim read' setting to general settings and update list item template for read entries

- Introduced a new setting 'dimRead' to allow users to diminish the color of read entries in the timeline.
- Updated the ListItem component to apply the dimming effect based on the new setting.
- Added corresponding translations for the new setting in the English locale.
- Set default value for 'dimRead' to false in the general settings defaults.

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

apps/desktop/layer/renderer/src/modules/entry-column/templates/list-item-template.tsx

@@ -113,6 +113,7 @@ export function ListItem({
     }
   }, [settingWideMode, simple, translation?.description, translation?.title, bilingual])
 
+  const dimRead = useGeneralSettingKey("dimRead")
   // NOTE: prevent 0 height element, react virtuoso will not stop render any more
   if (!entry || !(feed || inbox)) return null
 
@@ -162,6 +163,7 @@ export function ListItem({
             "flex gap-1 text-[10px] font-bold",
             "text-text-secondary",
             isInCollection && "text-text-secondary",
+            isRead && dimRead && "text-text-tertiary",
           )}
         >
           <EllipsisHorizontalTextWithTooltip className="truncate">
@@ -180,6 +182,7 @@ export function ListItem({
             "text-text",
             !!isInCollection && "pr-5",
             entry?.title ? "font-medium" : "text-[13px]",
+            isRead && dimRead && "text-text-secondary",
           )}
         >
           {entry?.title ? (
@@ -198,7 +201,13 @@ export function ListItem({
           {!!isInCollection && <StarIcon className="absolute right-0 top-0" />}
         </div>
         {!simple && (
-          <div className={cn("text-[13px]", "text-text-secondary")}>
+          <div
+            className={cn(
+              "text-[13px]",
+              "text-text-secondary",
+              isRead && dimRead && "text-text-tertiary",
+            )}
+          >
             <EntryTranslation
               className={cn("hyphens-auto", lineClamp.description)}
               source={entry?.description}

apps/desktop/layer/renderer/src/modules/settings/tabs/general.tsx

@@ -135,11 +135,14 @@ export const SettingGeneral = () => {
             label: t("general.group_by_date.label"),
             description: t("general.group_by_date.description"),
           }),
-
           defineSettingItem("autoExpandLongSocialMedia", {
             label: t("general.auto_expand_long_social_media.label"),
             description: t("general.auto_expand_long_social_media.description"),
           }),
+          defineSettingItem("dimRead", {
+            label: t("general.dim_read.label"),
+            description: t("general.dim_read.description"),
+          }),
           isMobile &&
             defineSettingItem("showQuickTimeline", {
               label: t("general.show_quick_timeline.label"),

locales/settings/en.json

@@ -201,6 +201,8 @@
   "general.data_file.label": "Data File",
   "general.data_persist.description": "Persist data locally to enable offline access and local search.",
   "general.data_persist.label": "Persist data for offline usage",
+  "general.dim_read.description": "Diminish the color displayed in the timeline for entries that have been read.",
+  "general.dim_read.label": "Dim read",
   "general.enhanced.description": "Enabling the enhanced settings offers more customization options, but may also introduce unforeseen issues. !!! Keep this as the gateway to truly experimental/complex things if needed later, otherwise it might be removable if other settings cover specifics.",
   "general.enhanced.disabled.tip": "Enhanced settings are disabled, you can enable them in the General settings - Advanced.",
   "general.enhanced.enable.modal.cancel": "Cancel",

packages/internal/shared/src/settings/defaults.ts

@@ -27,9 +27,10 @@ export const defaultGeneralSettings: GeneralSettings = {
   scrollMarkUnread: true,
   hoverMarkUnread: true,
   renderMarkUnread: false,
-  // UX
+  // timeline
   groupByDate: true,
   autoExpandLongSocialMedia: false,
+  dimRead: false,
 
   // Secure
   jumpOutLinkWarn: true,

packages/internal/shared/src/settings/interface.ts

@@ -14,6 +14,7 @@ export interface GeneralSettings {
   renderMarkUnread: boolean
   groupByDate: boolean
   jumpOutLinkWarn: boolean
+  dimRead: boolean
   // TTS
   voice: string