chore: Dashboard feed updates

smithg09 · smithg09 · commit 239441e1af6d · 2025-08-14T18:20:26.000+05:30
diff --git a/src/pages/dashboard/components/AddFeedModal.tsx b/src/pages/dashboard/components/AddFeedModal.tsx
@@ -10,6 +10,7 @@ type AddFeedModalProps = {
 export default function AddFeedModal({ opened, onClose, onAdd }: AddFeedModalProps) {
   const [feedUrl, setFeedUrl] = useState("");
   const [feedLabel, setFeedLabel] = useState("");
+  const [feedUrlError, setFeedUrlError] = useState<string | null>(null);
 
   function extractLabel(url: string): string | undefined {
     try {
@@ -22,14 +23,37 @@ export default function AddFeedModal({ opened, onClose, onAdd }: AddFeedModalPro
     }
   }
 
+  function validateFeedUrl(value: string): string | null {
+    const trimmed = value.trim();
+    if (!trimmed) return "Feed URL is required";
+    try {
+      const u = new URL(trimmed);
+      if (u.protocol !== "http:" && u.protocol !== "https:") {
+        return "Only http(s) URLs are supported";
+      }
+      const pathPlusQuery = `${u.pathname}${u.search}`.toLowerCase();
+      const looksLikeFeed =
+        /\.(xml|rss|atom)(?:$|[?#])/i.test(pathPlusQuery) || /(feed|rss|atom)/i.test(pathPlusQuery);
+      if (!looksLikeFeed) {
+        return "URL does not look like an RSS/Atom XML feed";
+      }
+      return null;
+    } catch (_err) {
+      return "Enter a valid URL";
+    }
+  }
+
   function handleAdd() {
     const url = feedUrl.trim();
-    if (!url) return;
+    const validationError = validateFeedUrl(url);
+    setFeedUrlError(validationError);
+    if (validationError) return;
     let label = feedLabel.trim();
     if (!label) label = extractLabel(url) || "";
     onAdd(url, label || undefined);
     setFeedUrl("");
     setFeedLabel("");
+    setFeedUrlError(null);
     onClose();
   }
 
@@ -40,7 +64,12 @@ export default function AddFeedModal({ opened, onClose, onAdd }: AddFeedModalPro
           label="Feed URL"
           placeholder="https://example.com/feed.xml"
           value={feedUrl}
-          onChange={e => setFeedUrl(e.currentTarget.value)}
+          onChange={e => {
+            const v = e.currentTarget.value;
+            setFeedUrl(v);
+            setFeedUrlError(v ? validateFeedUrl(v) : "Feed URL is required");
+          }}
+          error={feedUrlError || undefined}
         />
         <TextInput
           label="Label (optional)"
@@ -49,7 +78,9 @@ export default function AddFeedModal({ opened, onClose, onAdd }: AddFeedModalPro
           onChange={e => setFeedLabel(e.currentTarget.value)}
         />
         <Group justify="flex-end">
-          <Button onClick={handleAdd}>Add</Button>
+          <Button onClick={handleAdd} disabled={!!feedUrlError || !feedUrl.trim()}>
+            Add
+          </Button>
         </Group>
       </Stack>
     </Modal>
diff --git a/src/pages/dashboard/components/FeedItem.tsx b/src/pages/dashboard/components/FeedItem.tsx
@@ -53,7 +53,7 @@ function SourceIcon({ item }: { item: RssItem }) {
 export function FeedItem({ item, variant }: FeedItemProps) {
   if (variant === "card") {
     return (
-      <Paper withBorder key={item.link} p="sm">
+      <Paper withBorder key={item.link} p="sm" className={classes.feedCard}>
         <Group align="flex-start" gap={8} wrap="nowrap">
           <SourceIcon item={item} />
           <Stack gap={4} flex={1}>
@@ -62,7 +62,7 @@ export function FeedItem({ item, variant }: FeedItemProps) {
               className={classes.feedTitle}
               onClick={() => openExternal(item.link)}
               ta="left"
-              fw={600}
+              fw={500}
               size="sm"
             >
               {item.title}
diff --git a/src/pages/dashboard/components/RSSFeed.tsx b/src/pages/dashboard/components/RSSFeed.tsx
@@ -49,16 +49,7 @@ export default function RSSFeed({
       >
         <Group justify="space-between" align="center">
           <Title order={4}>Developer news</Title>
-          <Group gap={4}>
-            <SegmentedControl
-              size="xs"
-              value={viewMode}
-              onChange={v => setViewMode(v as any)}
-              data={[
-                { label: "Card", value: "card" },
-                { label: "List", value: "list" },
-              ]}
-            />
+          <Group gap={8}>
             <Button
               size="xs"
               variant="subtle"
@@ -68,9 +59,18 @@ export default function RSSFeed({
             >
               Refresh feeds
             </Button>
-            <Button size="xs" leftSection={<BsPlus />} variant="light" onClick={onAddRequest}>
+            <Button size="xs" leftSection={<BsPlus />} variant="subtle" onClick={onAddRequest}>
               Add feed
             </Button>
+            <SegmentedControl
+              size="xs"
+              value={viewMode}
+              onChange={v => setViewMode(v as any)}
+              data={[
+                { label: "Card", value: "card" },
+                { label: "List", value: "list" },
+              ]}
+            />
           </Group>
         </Group>
 
@@ -79,8 +79,10 @@ export default function RSSFeed({
             <Badge
               key={f.id}
               size="sm"
-              opacity={f.enabled ? 1 : 0.8}
-              variant={f.enabled ? "filled" : "light"}
+              bg={f.enabled ? "var(--mantine-color-dark-6)" : "var(--mantine-color-dark-7)"}
+              color={f.enabled ? "var(--mantine-color-gray-3)" : "var(--mantine-color-gray-5)"}
+              opacity={f.enabled ? 0.8 : 0.5}
+              variant="outline"
               onClick={() => onToggleFeed(f.id)}
               rightSection={
                 <ActionIcon
@@ -100,7 +102,10 @@ export default function RSSFeed({
                   ×
                 </ActionIcon>
               }
-              style={{ cursor: "pointer" }}
+              style={{
+                cursor: "pointer",
+                border: `1px solid ${f.enabled ? "var(--mantine-color-dark-4)" : "var(--mantine-color-dark-5)"}`,
+              }}
             >
               {f.title || f.url}
             </Badge>
diff --git a/src/pages/dashboard/hooks/useRssFeeds.ts b/src/pages/dashboard/hooks/useRssFeeds.ts
@@ -19,13 +19,22 @@ type FeedItem = {
 const DEFAULT_FEEDS: Omit<Feed, "id" | "addedAt">[] = [
   { url: "https://engineering.atspotify.com/feed", title: "Spotify", enabled: true },
   { url: "https://medium.com/feed/better-programming", title: "Better Programming", enabled: true },
-  { url: "https://blog.cloudflare.com/rss/", title: "Cloudflare Blog", enabled: true },
   { url: "https://overreacted.io/rss.xml", title: "Overreacted", enabled: true },
-  { url: "https://rss.beehiiv.com/feeds/ypr2bi0H9m.xml", title: "Hungry Minds", enabled: true },
+  { url: "https://rss.beehiiv.com/feeds/ypr2bi0H9m.xml", title: "Hungry Minds", enabled: false },
+  { url: "https://css-tricks.com/feed/", title: "CSS Tricks", enabled: true },
+  { url: "https://feeds2.feedburner.com/tympanus", title: "Codrops", enabled: true },
+  { url: "https://github.blog/feed/", title: "GitHub", enabled: true },
+  { url: "https://blog.codinghorror.com/rss/", title: "Coding Horror", enabled: true },
+  { url: "https://martinfowler.com/feed.atom", title: "Martin Fowler", enabled: true },
+  {
+    url: "https://www.tbray.org/ongoing/ongoing.atom",
+    title: "ongoing by Tim Bray",
+    enabled: false,
+  },
   {
     url: "https://www.thecrazyprogrammer.com/category/programming/feed",
     title: "The Crazy Programmer",
-    enabled: true,
+    enabled: false,
   },
 ];
 
@@ -39,7 +48,12 @@ function toRelativeTime(dateStr: string): string {
   const hours = Math.floor(minutes / 60);
   if (hours < 24) return `${hours}h ago`;
   const days = Math.floor(hours / 24);
-  return `${days}d ago`;
+
+  if (days < 30) return `${days}d ago`;
+  const months = Math.floor(days / 30);
+  if (months < 12) return `${months}mo ago`;
+  const years = Math.floor(months / 12);
+  return `${years}y ago`;
 }
 
 export function useRssFeeds() {
@@ -196,9 +210,20 @@ export function useRssFeeds() {
       try {
         const enabledFeeds = feeds.filter(f => f.enabled);
         const results = await Promise.all(enabledFeeds.map(f => parseRss(f.url, force)));
-        const flat = results
-          .flat()
-          .sort((a, b) => new Date(b.published).getTime() - new Date(a.published).getTime());
+        // mixmatch same source entries, so that no entry with same source appears twice
+        const mixed = results.flat().reduce(
+          (acc, item) => {
+            const key = `${item.source}-${item.title}-${item.link}`;
+            if (!acc[key]) {
+              acc[key] = item;
+            }
+            return acc;
+          },
+          {} as Record<string, FeedItem>
+        );
+        const flat = Object.values(mixed).sort(
+          (a, b) => new Date(b.published).getTime() - new Date(a.published).getTime()
+        );
         setItems(flat);
       } finally {
         setLoading(false);
diff --git a/src/pages/dashboard/styles.module.css b/src/pages/dashboard/styles.module.css
@@ -87,3 +87,19 @@
     0 6px 12px rgba(0, 0, 0, 0.06);
   transform: translateY(-1px);
 }
+
+.feedCard {
+  transition:
+    background-color 0.15s ease,
+    border-color 0.15s ease,
+    box-shadow 0.15s ease,
+    transform 0.06s ease;
+}
+
+.feedCard:hover {
+  background-color: light-dark(var(--mantine-color-gray-0), var(--mantine-color-dark-6));
+  box-shadow:
+    0 1px 0 rgba(0, 0, 0, 0.03),
+    0 6px 12px rgba(0, 0, 0, 0.06);
+  transform: translateY(-1px);
+}
