1 files changed, 72 insertions, 0 deletions
diff --git a/app/src/pages/index.tsx b/app/src/pages/index.tsx
new file mode 100644
index 0000000..99202e5
--- /dev/null
+++ b/app/src/pages/index.tsx
@@ -0,0 +1,72 @@
+import * as Bun from "bun";
+import { Suspense } from "react";
+import { TwitterApiService } from "../lib/twitter-api";
+import { BookmarkList } from "../components/bookmark-list";
+
+async function BookmarkFetcher() {
+  const cookie = Bun.env.TWATTER_COKI;
+
+  if (!cookie) {
+    return (
+      <div className="text-red-600">Missing Twitter cookie configuration</div>
+    );
+  }
+
+  try {
+    const twitterService = new TwitterApiService(cookie);
+    const bookmarks = await twitterService.fetchAllBookmarks();
+    const file = Bun.file("testData.json");
+    await file.write(JSON.stringify(bookmarks));
+
+    return (
+      <div className="space-y-6">
+        <div className="bg-white border border-gray-200 rounded-lg p-6">
+          <h2 className="text-xl font-semibold mb-4">Your Bookmarks</h2>
+          <BookmarkList bookmarks={bookmarks} />
+        </div>
+      </div>
+    );
+  } catch (error) {
+    return (
+      <div className="bg-red-50 border border-red-200 text-red-700 px-4 py-3 rounded-lg">
+        Error loading bookmarks:{" "}
+        {error instanceof Error ? error.message : "Unknown error"}
+      </div>
+    );
+  }
+}
+
+function LoadingSpinner() {
+  return (
+    <div className="flex items-center justify-center py-12">
+      <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
+      <span className="ml-3 text-gray-600">
+        Loading your Twitter bookmarks...
+      </span>
+    </div>
+  );
+}
+
+export default async function HomePage() {
+  return (
+    <div className="max-w-4xl mx-auto">
+      <title>SORMARK - Twitter Bookmark Manager</title>
+      <div className="mb-8">
+        <h1 className="text-4xl font-bold tracking-tight mb-4">SORMARK</h1>
+        <p className="text-lg text-gray-600">
+          Your Twitter bookmark manager powered by AI
+        </p>
+      </div>
+
+      <Suspense fallback={<LoadingSpinner />}>
+        <BookmarkFetcher />
+      </Suspense>
+    </div>
+  );
+}
+
+export const getConfig = async () => {
+  return {
+    render: "static",
+  } as const;
+};