feat: add appearance to set thumbnail ratio

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

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

@@ -12,6 +12,7 @@ export const createDefaultSettings = (): UISettings => ({
 
   opaqueSidebar: false,
   sidebarShowUnreadCount: true,
+  thumbnailRatio: "square",
 
   // Global UI
   uiTextSize: 16,

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

@@ -63,6 +63,8 @@ export function ListItem({
   )
 
   const settingWideMode = useUISettingKey("wideMode")
+  const thumbnailRatio = useUISettingKey("thumbnailRatio")
+  const rid = `list-item-${entryId}`
 
   // NOTE: prevent 0 height element, react virtuoso will not stop render any more
   if (!entry || !(feed || inbox)) return <ReactVirtuosoItemPlaceholder />
@@ -187,9 +189,10 @@ export function ListItem({
           )}
           mediaContainerClassName={"w-auto h-auto rounded"}
           loading="lazy"
+          key={`${rid}-media-${thumbnailRatio}`}
           proxy={{
             width: 160,
-            height: 0,
+            height: thumbnailRatio === "square" ? 160 : 0,
           }}
           height={entry.entries.media[0].height}
           width={entry.entries.media[0].width}

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

@@ -70,6 +70,7 @@ export const SettingAppearance = () => {
             description: t("appearance.hide_extra_badge.description"),
           }),
           ZenMode,
+          ThumbnailRatio,
 
           {
             type: "title",
@@ -254,3 +255,38 @@ const ZenMode = () => {
     </SettingItemGroup>
   )
 }
+
+const ThumbnailRatio = () => {
+  const { t } = useTranslation("settings")
+
+  const thumbnailRatio = useUISettingKey("thumbnailRatio")
+
+  return (
+    <SettingItemGroup>
+      <div className="mt-4 flex items-center justify-between">
+        <span className="shrink-0 text-sm font-medium">
+          {t("appearance.thumbnail_ratio.title")}
+        </span>
+        <Select
+          defaultValue="square"
+          value={thumbnailRatio}
+          onValueChange={(value) => {
+            setUISetting("thumbnailRatio", value as "square" | "original")
+          }}
+        >
+          <SelectTrigger size="sm" className="w-48 translate-y-2">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent position="item-aligned">
+            {["square", "original"].map((ratio) => (
+              <SelectItem key={ratio} value={ratio}>
+                {t(`appearance.thumbnail_ratio.${ratio as "square" | "original"}`)}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
+      </div>
+      <SettingDescription>{t("appearance.thumbnail_ratio.description")}</SettingDescription>
+    </SettingItemGroup>
+  )
+}

locales/settings/en.json

@@ -80,6 +80,10 @@
   "appearance.theme.label": "Theme",
   "appearance.theme.light": "Light",
   "appearance.theme.system": "System",
+  "appearance.thumbnail_ratio.description": "The ratio of the thumbnail in the entry list.",
+  "appearance.thumbnail_ratio.original": "Original",
+  "appearance.thumbnail_ratio.square": "Square",
+  "appearance.thumbnail_ratio.title": "Thumbnail ratio",
   "appearance.title": "Appearance",
   "appearance.ui_font": "UI Font",
   "appearance.unread_count": "Unread count",

packages/shared/src/interface/settings.ts

@@ -19,6 +19,7 @@ export interface UISettings {
   opaqueSidebar: boolean
   sidebarShowUnreadCount: boolean
   hideExtraBadge: boolean
+  thumbnailRatio: "square" | "original"
   uiTextSize: number
   showDockBadge: boolean
   modalOverlay: boolean