+
+
+
+
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/web/src/app/favicon.ico b/web/src/app/favicon.ico
new file mode 100644
index 0000000..718d6fe
Binary files /dev/null and b/web/src/app/favicon.ico differ
diff --git a/web/src/app/globals.css b/web/src/app/globals.css
new file mode 100644
index 0000000..8ca5560
--- /dev/null
+++ b/web/src/app/globals.css
@@ -0,0 +1,18 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+ --color-bg: #0D1117;
+ --color-surface: #161B22;
+ --color-accent: #39D353;
+ --color-border: #30363D;
+ --color-foreground-primary: #F0F6FC;
+ --color-foreground-muted: #8B949E;
+}
+
+body {
+ background-color: var(--color-bg);
+ color: var(--color-foreground-primary);
+ font-family: 'Inter', sans-serif;
+}
\ No newline at end of file
diff --git a/web/src/app/layout.tsx b/web/src/app/layout.tsx
new file mode 100644
index 0000000..0ea0320
--- /dev/null
+++ b/web/src/app/layout.tsx
@@ -0,0 +1,21 @@
+import type { Metadata } from "next";
+import "./globals.css";
+
+export const metadata: Metadata = {
+ title: "OpenSpark",
+ description: "Collaborative Open-Source Blueprinting Engine",
+};
+
+export default function RootLayout({
+ children,
+}: {
+ children: React.ReactNode;
+}) {
+ return (
+
+
+ {children}
+
+
+ );
+}
\ No newline at end of file
diff --git a/web/src/app/page.tsx b/web/src/app/page.tsx
new file mode 100644
index 0000000..26359b5
--- /dev/null
+++ b/web/src/app/page.tsx
@@ -0,0 +1,18 @@
+import Sidebar from "@/components/Sidebar";
+import SparkFeed from "@/components/SparkFeed";
+
+export default function Dashboard() {
+ return (
+
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/web/src/components/Header.tsx b/web/src/components/Header.tsx
new file mode 100644
index 0000000..b4bf80a
--- /dev/null
+++ b/web/src/components/Header.tsx
@@ -0,0 +1,37 @@
+// src/components/Header.tsx
+import { createClient } from "@/utils/supabase/server";
+import SignOutButton from "./SignOutButton";
+import Link from "next/link";
+
+export default async function Header() {
+ const supabase = await createClient();
+ const { data: { user } } = await supabase.auth.getUser();
+
+ return (
+
+
+ + Latest Sparks +
+
+
+ OpenSpark ▲
+
+
+ {user ? (
+
+
+
+ ) : (
+ Not signed in
+ )}
+
+ 
+
+ {user.user_metadata.user_name ?? user.user_metadata.preferred_username}
+
+
+
+ {/* Author row */}
+
+ );
+}
\ No newline at end of file
diff --git a/web/src/components/SparkFeed.tsx b/web/src/components/SparkFeed.tsx
new file mode 100644
index 0000000..3c9af3c
--- /dev/null
+++ b/web/src/components/SparkFeed.tsx
@@ -0,0 +1,40 @@
+import { createClient } from "@/utils/supabase/server";
+import SparkCard from "./SparkCard";
+
+export default async function SparkFeed() {
+ const supabase = await createClient();
+
+ const { data: sparks, error } = await supabase
+ .from("sparks")
+ .select("*, profiles!sparks_author_id_fkey(username, avatar_url)")
+ .order("created_at", { ascending: false });
+
+ if (error) {
+ console.error("Supabase query error:", error);
+ return (
+
+ {spark.profiles.avatar_url && (
+ 
+ )}
+
+
+
+
+ @{spark.profiles.username}
+
+
+ {new Date(spark.created_at).toLocaleDateString("en-US", {
+ month: "short",
+ day: "numeric",
+ year: "numeric",
+ })}
+
+
+ + {spark.title} +
+ ++ {spark.description_markdown.replace(/[#*`>\[\]!]/g, "").slice(0, 200)} +
+ + {spark.tech_stack && spark.tech_stack.length > 0 && ( +
+ {spark.tech_stack.map(tech => (
+
+ {tech}
+
+ ))}
+
+ )}
+
+
+
+
+ {spark.status}
+
+
+
+
+ );
+ }
+
+ if (!sparks || sparks.length === 0) {
+ return (
+ + Error loading sparks. Check terminal logs. +
+
+
+ );
+ }
+
+ return (
+ + No sparks yet. Be the first to ignite one! +
+
+ {sparks.map(spark => (
+
+ );
+}
\ No newline at end of file
diff --git a/web/src/components/SparkForm.tsx b/web/src/components/SparkForm.tsx
new file mode 100644
index 0000000..8e20a38
--- /dev/null
+++ b/web/src/components/SparkForm.tsx
@@ -0,0 +1,90 @@
+"use client";
+
+import { useFormStatus } from "react-dom";
+import { useState } from "react";
+import { createSpark } from "@/actions/spark";
+
+function SubmitButton() {
+ const { pending } = useFormStatus();
+ return (
+
+ );
+}
+
+export default function SparkForm() {
+ const [errors, setErrors] = useState