feat: feed preview view and grid

src/renderer/src/components/entry-column/index.tsx

@@ -23,8 +23,7 @@ import { PictureItem } from "./picture-item"
 import { SocialMediaItem } from "./social-media-item"
 import type { FilterTab, UniversalItemProps } from "./types"
 import { VideoItem } from "./video-item"
-
-const gridMode = new Set([2, 3])
+import { gridMode } from "@renderer/lib/constants"
 
 const filterTabAtom = atomWithStorage<FilterTab>(
  buildStorageNS("entry-tab"),

src/renderer/src/components/feed-column/item.tsx

@@ -133,7 +133,7 @@ export function FeedItem({
  label: "Open Feed in Browser",
  click: () =>
  window.open(
- `${import.meta.env.VITE_WEB_URL}/feed/${feed.feedId}`,
+ `${import.meta.env.VITE_WEB_URL}/feed/${feed.feedId}?view=${view}`,
  "_blank",
  ),
  },

src/renderer/src/lib/constants.tsx

@@ -37,3 +37,5 @@ export const views = [
  className: "text-yellow-600",
  },
 ]
+
+export const gridMode = new Set([2, 3])

src/renderer/src/pages/(external)/feed/index.tsx

@@ -6,6 +6,8 @@ import type { UniversalItemProps } from "@renderer/components/entry-column/types
 import { VideoItem } from "@renderer/components/entry-column/video-item"
 import { FeedIcon } from "@renderer/components/feed-icon"
 import { Button } from "@renderer/components/ui/button"
+import { gridMode } from "@renderer/lib/constants"
+import { cn } from "@renderer/lib/utils"
 import { useEntriesPreview } from "@renderer/queries/entries"
 import { useFeed } from "@renderer/queries/feed"
 import type { FC } from "react"
@@ -75,7 +77,11 @@ export function Component() {
  <a className="mb-8" href={`follow://subscribe?id=${id}`}>
  <Button>Subscribe on Follow</Button>
  </a>
- <div className="w-full">
+ <div className={cn(
+ "w-full",
+ gridMode.has(view) && "grid grid-cols-2 gap-2 md:grid-cols-3 lg:grid-cols-4",
+ )}
+ >
  {entries.data?.map((entry) => (
  <a href={entry.url || void 0} target="_blank" key={entry.id}>
  <Item