feat: zen mode and hide extra badge

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

Author: Innei

apps/renderer/src/atoms/settings/ui.ts

@@ -8,10 +8,10 @@ export const createDefaultSettings = (): UISettings => ({
   // Sidebar
   entryColWidth: 356,
   feedColWidth: 256,
+  hideExtraBadge: false,
 
   opaqueSidebar: false,
   sidebarShowUnreadCount: true,
-  hideExtraBadge: false,
 
   // Global UI
   uiTextSize: 16,

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

@@ -16,6 +16,7 @@ import { memo, useCallback, useState } from "react"
 import { useTranslation } from "react-i18next"
 
 import { getMainContainerElement } from "~/atoms/dom"
+import { useUISettingKey } from "~/atoms/settings/ui"
 import { useFeedActions, useInboxActions, useListActions } from "~/hooks/biz/useFeedActions"
 import { useNavigateEntry } from "~/hooks/biz/useNavigateEntry"
 import { useRouteParamsSelector } from "~/hooks/biz/useRouteParams"
@@ -94,6 +95,7 @@ const FeedItemImpl = ({ view, feedId, className }: FeedItemProps) => {
   useAnyPointDown(() => {
     isContextMenuOpen && setIsContextMenuOpen(false)
   })
+  const hideExtraBadge = useUISettingKey("hideExtraBadge")
   if (!feed) return null
 
   const isFeed = feed.type === "feed" || !feed.type
@@ -160,8 +162,8 @@ const FeedItemImpl = ({ view, feedId, className }: FeedItemProps) => {
         >
           <FeedIcon fallback feed={feed} size={16} />
           <div className="truncate">{getPreferredTitle(feed)}</div>
-          {isFeed && <FeedCertification feed={feed} className="text-[15px]" />}
-          {isFeed && <BoostCertification feed={feed} className="text-[15px]" />}
+          {isFeed && !hideExtraBadge && <FeedCertification feed={feed} className="text-[15px]" />}
+          {isFeed && !hideExtraBadge && <BoostCertification feed={feed} className="text-[15px]" />}
           {isFeed && feed.errorAt && (
             <Tooltip delayDuration={300}>
               <TooltipTrigger asChild>

apps/renderer/src/modules/settings/tabs/apperance.tsx

@@ -17,12 +17,14 @@ import {
   useUISettingSelector,
   useUISettingValue,
 } from "~/atoms/settings/ui"
+import { setFeedColumnShow, useFeedColumnShow } from "~/atoms/sidebar"
 import { isElectronBuild } from "~/constants"
 import { useSetTheme } from "~/hooks/common"
 
-import { SettingTabbedSegment } from "../control"
+import { SettingDescription, SettingSwitch, SettingTabbedSegment } from "../control"
 import { createDefineSettingItem } from "../helper/builder"
 import { createSettingBuilder } from "../helper/setting-builder"
+import { SettingItemGroup } from "../section"
 import { ContentFontSelector, UIFontSelector } from "../sections/fonts"
 
 const SettingBuilder = createSettingBuilder(useUISettingValue)
@@ -59,6 +61,16 @@ export const SettingAppearance = () => {
             label: t("appearance.sidebar_show_unread_count.label"),
           }),
 
+          {
+            type: "title",
+            value: t("appearance.sidebar"),
+          },
+          defineItem("hideExtraBadge", {
+            label: t("appearance.hide_extra_badge.label"),
+            description: t("appearance.hide_extra_badge.description"),
+          }),
+          ZenMode,
+
           {
             type: "title",
             value: t("appearance.fonts"),
@@ -217,3 +229,28 @@ export const AppThemeSegment = () => {
     />
   )
 }
+
+const ZenMode = () => {
+  const { t } = useTranslation("settings")
+  const feedColumnShow = useFeedColumnShow()
+  const isWideMode = useUISettingKey("wideMode")
+  return (
+    <SettingItemGroup>
+      <SettingSwitch
+        checked={!feedColumnShow && isWideMode}
+        className="mt-4"
+        onCheckedChange={(checked) => {
+          if (checked) {
+            setFeedColumnShow(false)
+            setUISetting("wideMode", true)
+          } else {
+            setFeedColumnShow(true)
+            setUISetting("wideMode", false)
+          }
+        }}
+        label={t("appearance.zen_mode.label")}
+      />
+      <SettingDescription>{t("appearance.zen_mode.description")}</SettingDescription>
+    </SettingItemGroup>
+  )
+}

locales/settings/en.json

@@ -58,6 +58,8 @@
   "appearance.general": "General",
   "appearance.guess_code_language.description": "Major programming languages that use models to infer unlabeled code blocks",
   "appearance.guess_code_language.label": "Guess code language",
+  "appearance.hide_extra_badge.description": "Hide the special badge of the feed in the sidebar, e.g. Boost,Claimed",
+  "appearance.hide_extra_badge.label": "Hide special badge",
   "appearance.hide_recent_reader.description": "Hide the recent reader in the entry header.",
   "appearance.hide_recent_reader.label": "Hide recent reader",
   "appearance.misc": "Misc",
@@ -70,6 +72,7 @@
   "appearance.reduce_motion.label": "Reduce motion",
   "appearance.save": "Save",
   "appearance.show_dock_badge.label": "Show as Dock badge",
+  "appearance.sidebar": "Sidebar",
   "appearance.sidebar_show_unread_count.label": "Show in sidebar",
   "appearance.sidebar_title": "Appearance",
   "appearance.text_size": "Text size",
@@ -82,6 +85,8 @@
   "appearance.unread_count": "Unread count",
   "appearance.use_pointer_cursor.description": "Change the cursor to a pointer when hovering over any interactive element.",
   "appearance.use_pointer_cursor.label": "Use pointer cursors",
+  "appearance.zen_mode.description": "Zen mode is an undisturbed reading mode that allows you to focus on the content without any interference. Enabling Zen mode will hide the sidebar.",
+  "appearance.zen_mode.label": "Zen mode",
   "common.give_star": "<HeartIcon />Love our product? <Link>Give us a star on GitHub!</Link>",
   "feeds.claimTips": "To claim your feeds and receive tips, right-click on the feed in your subscription list and select Claim.",
   "feeds.noFeeds": "No claimed feeds",