feat: wide mode

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

@@ -33,6 +33,7 @@ export const createDefaultSettings = (): UISettings => ({
  // View
  pictureViewMasonry: true,
  pictureViewFilterNoImage: false,
+ wideMode: false,
 
  // TTS
  voice: "en-US-AndrewMultilingualNeural",

apps/renderer/src/modules/entry-column/layouts/EntryListHeader.tsx

@@ -98,6 +98,7 @@ export const EntryListHeader: FC<{
  )}
 
  <AppendTaildingDivider>
+ {!views[view].wideMode && <WideModeButton />}
  {view === FeedViewType.SocialMedia && <DailyReportButton />}
  {view === FeedViewType.Pictures && <SwitchToMasonryButton />}
  {view === FeedViewType.Pictures && <FilterNoImageButton />}
@@ -231,6 +232,39 @@ const SwitchToMasonryButton = () => {
  )
 }
 
+const WideModeButton = () => {
+ const isWideMode = useUISettingKey("wideMode")
+ const { t } = useTranslation()
+
+ return (
+ <ImpressionView
+ event="Switch to Wide Mode"
+ properties={{
+ wideMode: isWideMode ? 1 : 0,
+ }}
+ >
+ <ActionButton
+ onClick={() => {
+ setUISetting("wideMode", !isWideMode)
+ window.posthog?.capture("Switch to Wide Mode", {
+ wideMode: !isWideMode ? 1 : 0,
+ click: 1,
+ })
+ }}
+ tooltip={
+ !isWideMode
+ ? t("entry_list_header.switch_to_widemode")
+ : t("entry_list_header.switch_to_normalmode")
+ }
+ >
+ <i
+ className={cn(isWideMode ? "i-mgc-align-justify-cute-re" : "i-mgc-align-left-cute-re")}
+ />
+ </ActionButton>
+ </ImpressionView>
+ )
+}
+
 const AppendTaildingDivider = ({ children }: { children: React.ReactNode }) => (
  <>
  {children}

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

@@ -2,6 +2,7 @@ import { env } from "@follow/shared/env"
 import { useDebounceCallback } from "usehooks-ts"
 
 import { AudioPlayer, useAudioPlayerAtomSelector } from "~/atoms/player"
+import { useUISettingKey } from "~/atoms/settings/ui"
 import { FeedIcon } from "~/components/feed-icon"
 import { FollowIcon } from "~/components/icons/follow"
 import { Button } from "~/components/ui/button"
@@ -61,19 +62,23 @@ export function ListItem({
  const isFollowed = !!useSubscriptionStore((state) => feedId && state.data[feedId])
  const { present } = useModalStack()
 
+ const settingWideMode = useUISettingKey("wideMode")
+
  // NOTE: prevent 0 height element, react virtuoso will not stop render any more
  if (!entry || !feed) return <ReactVirtuosoItemPlaceholder />
 
  const displayTime = inInCollection ? entry.collections?.createdAt : entry.entries.publishedAt
  const envIsSafari = isSafari()
+
  return (
  <div
  onMouseEnter={handlePrefetchEntry}
  onMouseLeave={handlePrefetchEntry.cancel}
  className={cn(
- "group relative flex cursor-menu py-4 pl-3 pr-2",
+ "group relative flex cursor-menu pl-3 pr-2",
  !asRead &&
  "before:absolute before:-left-0.5 before:top-[1.4375rem] before:block before:size-2 before:rounded-full before:bg-accent",
+ settingWideMode ? "py-3" : "py-4",
  )}
  >
  {!withAudio && <FeedIcon feed={feed} fallback entry={entry.entries} />}
@@ -82,7 +87,7 @@ export function ListItem({
  "-mt-0.5 flex-1 text-sm leading-tight",
 
  // FIXME: Safari bug, not support line-clamp cross elements
- !envIsSafari && "line-clamp-4",
+ !envIsSafari && (settingWideMode ? "line-clamp-2" : "line-clamp-4"),
  )}
  >
  <div
@@ -177,7 +182,7 @@ export function ListItem({
  fallback={false}
  feed={feed}
  entry={entry.entries}
- size={80}
+ size={settingWideMode ? 65 : 80}
  className="m-0 rounded"
  useMedia
  />
@@ -191,7 +196,10 @@ export function ListItem({
  src={entry.entries.media[0].url}
  type={entry.entries.media[0].type}
  previewImageUrl={entry.entries.media[0].preview_image_url}
- className="center ml-2 flex size-20 max-w-20 shrink-0 rounded"
+ className={cn(
+ "center ml-2 flex shrink-0 rounded",
+ settingWideMode ? "size-12" : "size-20",
+ )}
  mediaContainerClassName={"w-auto h-auto rounded"}
  loading="lazy"
  proxy={{

apps/renderer/src/pages/(main)/(layer)/feeds/[feedId]/[entryId]/index.tsx

@@ -1,21 +1,44 @@
 import { AnimatePresence } from "framer-motion"
 import { useParams } from "react-router-dom"
 
+import { useUISettingKey } from "~/atoms/settings/ui"
+import { ActionButton } from "~/components/ui/button"
 import { ROUTE_ENTRY_PENDING, views } from "~/constants"
+import { useNavigateEntry } from "~/hooks/biz/useNavigateEntry"
 import { useRouteView } from "~/hooks/biz/useRouteParams"
+import { cn } from "~/lib/utils"
 import { EntryContent } from "~/modules/entry-content"
 import { AppLayoutGridContainerProvider } from "~/providers/app-grid-layout-container-provider"
 
 export const Component = () => {
  const { entryId } = useParams()
  const view = useRouteView()
- const inWideMode = view ? views[view].wideMode : false
+ const navigate = useNavigateEntry()
+
+ const settingWideMode = useUISettingKey("wideMode")
+ const realEntryId = entryId === ROUTE_ENTRY_PENDING ? "" : entryId
+ const disable = views[view].wideMode || (settingWideMode && !realEntryId)
+ const wideMode = settingWideMode && realEntryId
+
  return (
  <AnimatePresence>
  <AppLayoutGridContainerProvider>
- {!inWideMode && (
- <div className="flex min-w-0 flex-1 flex-col">
- <EntryContent entryId={entryId === ROUTE_ENTRY_PENDING ? "" : entryId} />
+ {!disable && (
+ <div
+ className={cn(
+ "flex min-w-0 flex-1 flex-col",
+ wideMode && "absolute inset-0 z-10 bg-white pl-12",
+ )}
+ >
+ {wideMode && (
+ <ActionButton
+ className="absolute left-2.5 top-2.5 z-10"
+ onClick={() => navigate({ entryId: null })}
+ >
+ <i className="i-mgc-close-cute-re text-2xl" />
+ </ActionButton>
+ )}
+ <EntryContent entryId={realEntryId} />
  </div>
  )}
  </AppLayoutGridContainerProvider>

apps/renderer/src/pages/(main)/(layer)/feeds/[feedId]/layout.tsx

@@ -15,9 +15,10 @@ export function Component() {
 
  // Memo this initial value to avoid re-render
 
+ const settingWideMode = useUISettingKey("wideMode")
  const entryColWidth = useMemo(() => getUISettings().entryColWidth, [])
  const { view } = useRouteParams()
- const inWideMode = view ? views[view].wideMode : false
+ const inWideMode = (view ? views[view].wideMode : false) || settingWideMode
  const feedColumnWidth = useUISettingKey("feedColWidth")
  const { position, separatorProps, isDragging, separatorCursor } = useResizable({
  axis: "x",
@@ -32,7 +33,7 @@ export function Component() {
  })
 
  return (
- <div ref={containerRef} className="flex min-w-0 grow">
+ <div ref={containerRef} className="relative flex min-w-0 grow">
  <div
  className={cn("h-full shrink-0", inWideMode ? "flex-1" : "border-r", "will-change-[width]")}
  style={{

locales/app/en.json

@@ -98,6 +98,8 @@
  "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 Normal Mode",
+ "entry_list_header.switch_to_widemode": "Switch to Wide Mode",
  "entry_list_header.unread": "unread",
  "feed_claim_modal.choose_verification_method": "There are three ways to choose from, you can choose one of them to verify.",
  "feed_claim_modal.claim_button": "Claim",

packages/shared/src/interface/settings.ts

@@ -33,6 +33,7 @@ export interface UISettings {
  // view
  pictureViewMasonry: boolean
  pictureViewFilterNoImage: boolean
+ wideMode: boolean
 
  // tts
  voice: string