feat: compact mode v0

locales/settings/en.json

@@ -46,6 +46,8 @@
  "actions.sidebar_title": "Actions",
  "actions.title": "Actions",
  "appearance.code_highlight_theme": "Code highlight theme",
+ "appearance.compact_mode.description": "Fit more messages on screen at one time",
+ "appearance.compact_mode.label": "Compact Mode",
  "appearance.content": "Content",
  "appearance.content_font": "Content Font",
  "appearance.custom_font": "Custom Font",

locales/settings/zh-CN.json

@@ -46,6 +46,8 @@
  "actions.sidebar_title": "自动化",
  "actions.title": "自动化",
  "appearance.code_highlight_theme": "代码高亮主题",
+ "appearance.compact_mode.description": "尽可能显示更多的文本信息",
+ "appearance.compact_mode.label": "紧凑模式",
  "appearance.content": "内容",
  "appearance.content_font": "正文字体",
  "appearance.custom_font": "自定义字体",
@@ -78,7 +80,7 @@
  "feeds.tableHeaders.entryCount": "条目数",
  "feeds.tableHeaders.name": "名称",
  "feeds.tableHeaders.subscriptionCount": "订阅数",
- "feeds.tableHeaders.tipAmount": "收到的打赏" ,
+ "feeds.tableHeaders.tipAmount": "收到的打赏",
  "general.app": "应用程序",
  "general.data_persist.description": "在本地保留数据以启用离线访问和本地搜索",
  "general.data_persist.label": "保留数据以供离线使用",

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

@@ -27,6 +27,7 @@ export const createDefaultSettings = (): UISettings => ({
  readerRenderInlineStyle: false,
  codeHighlightTheme: "github-dark",
  guessCodeLanguage: true,
+ compactMode: false,
 
  // View
  pictureViewMasonry: true,

src/renderer/src/modules/entry-column/Items/social-media-item.tsx

@@ -1,4 +1,5 @@
 import { Slot } from "@radix-ui/react-slot"
+import { useUISettingKey } from "@renderer/atoms/settings/ui"
 import { FeedIcon } from "@renderer/components/feed-icon"
 import { ActionButton } from "@renderer/components/ui/button"
 import { RelativeTime } from "@renderer/components/ui/datetime"
@@ -8,7 +9,7 @@ import { Skeleton } from "@renderer/components/ui/skeleton"
 import { useAsRead } from "@renderer/hooks/biz/useAsRead"
 import { useEntryActions } from "@renderer/hooks/biz/useEntryActions"
 import { useRouteParamsSelector } from "@renderer/hooks/biz/useRouteParams"
-import { cn } from "@renderer/lib/utils"
+import { cn, isSafari } from "@renderer/lib/utils"
 import { useEntry } from "@renderer/store/entry/hooks"
 import { useFeedById } from "@renderer/store/feed"
 
@@ -23,10 +24,11 @@ export const SocialMediaItem: EntryListItemFC = ({ entryId, entryPreview, transl
  const previewMedia = usePreviewMedia()
  const asRead = useAsRead(entry)
  const feed = useFeedById(entry?.feedId)
+ const compactMode = useUISettingKey("compactMode")
 
  // NOTE: prevent 0 height element, react virtuoso will not stop render any more
  if (!entry || !feed) return <ReactVirtuosoItemPlaceholder />
-
+ const envIsSafari = isSafari()
  const content = entry.entries.content || entry.entries.description
 
  return (
@@ -38,13 +40,15 @@ export const SocialMediaItem: EntryListItemFC = ({ entryId, entryPreview, transl
  "before:absolute before:-left-4 before:top-[28px] before:block before:size-2 before:rounded-full before:bg-accent",
  )}
  >
- <FeedIcon
- fallback
- className="mask-squircle mask"
- feed={feed}
- entry={entry.entries}
- size={36}
- />
+ {!compactMode && (
+ <FeedIcon
+ fallback
+ className="mask-squircle mask"
+ feed={feed}
+ entry={entry.entries}
+ size={36}
+ />
+ )}
  <div className="ml-2 min-w-0 flex-1">
  <div className={cn("-mt-0.5 flex-1 text-sm", content && "line-clamp-[10]")}>
  <div className="w-[calc(100%-10rem)] space-x-1">
@@ -58,6 +62,8 @@ export const SocialMediaItem: EntryListItemFC = ({ entryId, entryPreview, transl
  className={cn(
  "relative mt-0.5 whitespace-pre-line text-base",
  !!entry.collections && "pr-5",
+ // FIXME: Safari bug, not support line-clamp cross elements
+ !envIsSafari && "line-clamp-4",
  )}
  >
  <EntryTranslation
@@ -69,26 +75,28 @@ export const SocialMediaItem: EntryListItemFC = ({ entryId, entryPreview, transl
  {!!entry.collections && <StarIcon />}
  </div>
  </div>
- <div className="mt-1 flex gap-2 overflow-x-auto pb-2">
- {entry.entries.media?.map((media, i, mediaList) => (
- <Media
- key={media.url}
- src={media.url}
- type={media.type}
- previewImageUrl={media.preview_image_url}
- className="size-28 shrink-0"
- loading="lazy"
- proxy={{
- width: 224,
- height: 224,
- }}
- onClick={(e) => {
- e.stopPropagation()
- previewMedia(mediaList, i)
- }}
- />
- ))}
- </div>
+ {!compactMode && (
+ <div className="mt-1 flex gap-2 overflow-x-auto pb-2">
+ {entry.entries.media?.map((media, i, mediaList) => (
+ <Media
+ key={media.url}
+ src={media.url}
+ type={media.type}
+ previewImageUrl={media.preview_image_url}
+ className="size-28 shrink-0"
+ loading="lazy"
+ proxy={{
+ width: 224,
+ height: 224,
+ }}
+ onClick={(e) => {
+ e.stopPropagation()
+ previewMedia(mediaList, i)
+ }}
+ />
+ ))}
+ </div>
+ )}
  </div>
 
  <div

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

@@ -1,5 +1,6 @@
 import { env } from "@env"
 import { AudioPlayer, useAudioPlayerAtomSelector } from "@renderer/atoms/player"
+import { useUISettingKey } from "@renderer/atoms/settings/ui"
 import { FeedIcon } from "@renderer/components/feed-icon"
 import { FollowIcon } from "@renderer/components/icons/follow"
 import { Button } from "@renderer/components/ui/button"
@@ -56,6 +57,7 @@ export function ListItem({
  : undefined
  const isFollowed = !!useSubscriptionStore((state) => feedId && state.data[feedId])
  const { present } = useModalStack()
+ const compactMode = useUISettingKey("compactMode")
 
  // NOTE: prevent 0 height element, react virtuoso will not stop render any more
  if (!entry || !feed) return <ReactVirtuosoItemPlaceholder />
@@ -72,7 +74,7 @@ export function ListItem({
  "before:absolute before:-left-0.5 before:top-[1.4375rem] before:block before:size-2 before:rounded-full before:bg-accent",
  )}
  >
- {!withAudio && <FeedIcon feed={feed} fallback entry={entry.entries} />}
+ {!compactMode && !withAudio && <FeedIcon feed={feed} fallback entry={entry.entries} />}
  <div
  className={cn(
  "-mt-0.5 flex-1 text-sm leading-tight",
@@ -158,7 +160,7 @@ export function ListItem({
  </Button>
  )}
 
- {withAudio && entry.entries?.attachments?.[0].url && (
+ {!compactMode && withAudio && entry.entries?.attachments?.[0].url && (
  <AudioCover
  entryId={entryId}
  src={entry.entries?.attachments?.[0].url}
@@ -179,7 +181,7 @@ export function ListItem({
  />
  )}
 
- {withDetails && entry.entries.media?.[0] && (
+ {!compactMode && withDetails && entry.entries.media?.[0] && (
  <Media
  src={entry.entries.media[0].url}
  type={entry.entries.media[0].type}

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

@@ -79,6 +79,12 @@ export const SettingAppearance = () => {
  label: t("appearance.reader_render_inline_style.label"),
  description: t("appearance.reader_render_inline_style.description"),
  }),
+
+ defineItem("compactMode", {
+ label: t("appearance.compact_mode.label"),
+ description: t("appearance.compact_mode.description"),
+ }),
+
  {
  type: "title",
  value: t("appearance.misc"),

src/shared/src/interface/settings.ts

@@ -25,6 +25,7 @@ export interface UISettings {
  uiFontFamily: string
  readerFontFamily: string
  readerRenderInlineStyle: boolean
+ compactMode: boolean
  codeHighlightTheme: string
  guessCodeLanguage: boolean