Fix RSS time filters and add draggable grid layout

Normalize pub_date to ISO 8601 on insert so SQLite datetime comparisons
work correctly. Migrate existing RFC 2822 dates. Change 1h filter to 12h.
Add react-grid-layout with persistent drag/resize and reset button.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

app/api/rss/feeds/route.ts

@@ -4,6 +4,13 @@ import Parser from 'rss-parser';
 
 export const dynamic = 'force-dynamic';
 
+function normalizeDate(item: { isoDate?: string; pubDate?: string }): string | null {
+    const raw = item.isoDate || item.pubDate;
+    if (!raw) return null;
+    const d = new Date(raw);
+    return isNaN(d.getTime()) ? null : d.toISOString();
+}
+
 export async function GET() {
     const db = await getDb();
     const feeds = await db.all(`
@@ -56,7 +63,7 @@ export async function POST(req: NextRequest) {
                 feedId,
                 item.title,
                 item.link,
-                item.pubDate || item.isoDate || null,
+                normalizeDate(item),
                 item.creator || item.author || null,
                 (item.contentSnippet || item.content || '').substring(0, 500) || null
             );

app/api/rss/route.ts

@@ -30,7 +30,7 @@ export async function GET(req: NextRequest) {
     }
     if (since) {
         const sinceMap: Record<string, string> = {
-            '1h': '-1 hours',
+            '12h': '-12 hours',
             '24h': '-24 hours',
             '7d': '-7 days',
             '30d': '-30 days',

app/globals.css

@@ -1,3 +1,5 @@
+@import "react-grid-layout/css/styles.css";
+@import "react-resizable/css/styles.css";
 @import "tailwindcss";
 
 :root {
@@ -43,3 +45,27 @@ body {
 .scrollbar-thin::-webkit-scrollbar-thumb:hover {
   background: #525252;
 }
+
+/* react-grid-layout dark theme overrides */
+.react-grid-item > .react-resizable-handle::after {
+  border-right-color: #525252;
+  border-bottom-color: #525252;
+}
+.react-grid-item > .react-resizable-handle:hover::after {
+  border-right-color: #a1a1aa;
+  border-bottom-color: #a1a1aa;
+}
+.react-grid-item.react-grid-placeholder {
+  background: rgba(245, 158, 11, 0.15);
+  border: 1px dashed rgba(245, 158, 11, 0.4);
+  border-radius: 0.75rem;
+}
+.react-grid-item {
+  transition: all 200ms ease;
+}
+.widget-drag-handle {
+  cursor: grab;
+}
+.widget-drag-handle:active {
+  cursor: grabbing;
+}

app/page.tsx

@@ -7,15 +7,10 @@ import { NewsFeed } from "@/components/widgets/NewsFeed";
 export default function Home() {
   return (
     <GridShell>
-      {/* Row 1 */}
-      <UptimeCard />
-      <WeatherCard />
-
-      {/* Row 1 & 2 (Globe spans 2 rows) */}
-      <GlobeCard />
-
-      {/* Row 2-4: NewsFeed spans 4 cols, 3 rows */}
-      <NewsFeed />
+      <div key="uptime"><UptimeCard /></div>
+      <div key="weather"><WeatherCard /></div>
+      <div key="globe"><GlobeCard /></div>
+      <div key="newsfeed"><NewsFeed /></div>
     </GridShell>
   );
 }