add paste functionality

Frontend/src/App.tsx

@@ -5,6 +5,8 @@ import "@cloudscape-design/global-styles/index.css";
 import "./App.css";
 import Home from "./pages/Home";
 import Resume from "./pages/Resume";
+import Paste from "./pages/Paste";
+import PasteView from "./pages/PasteView";
 import NotFound from "./pages/NotFound";
 
 function AppContent() {
@@ -32,6 +34,8 @@ function AppContent() {
         <Routes>
           <Route path="/" element={<Home />} />
           <Route path="/resume" element={<Resume />} />
+          <Route path="/paste" element={<Paste />} />
+          <Route path="/paste/:id" element={<PasteView />} />
           <Route path="*" element={<NotFound />} />
         </Routes>
       }

Frontend/src/pages/Paste.tsx

@@ -0,0 +1,129 @@
+import { useState } from "react";
+import { useNavigate } from "react-router-dom";
+import ContentLayout from "@cloudscape-design/components/content-layout";
+import Header from "@cloudscape-design/components/header";
+import Container from "@cloudscape-design/components/container";
+import FormField from "@cloudscape-design/components/form-field";
+import Input from "@cloudscape-design/components/input";
+import Textarea from "@cloudscape-design/components/textarea";
+import Select from "@cloudscape-design/components/select";
+import Slider from "@cloudscape-design/components/slider";
+import Button from "@cloudscape-design/components/button";
+import Alert from "@cloudscape-design/components/alert";
+import SpaceBetween from "@cloudscape-design/components/space-between";
+
+const LANGUAGE_OPTIONS = [
+  { label: "Plain Text", value: "plaintext" },
+  { label: "Bash", value: "bash" },
+  { label: "C", value: "c" },
+  { label: "C++", value: "cpp" },
+  { label: "CSS", value: "css" },
+  { label: "Dockerfile", value: "dockerfile" },
+  { label: "Go", value: "go" },
+  { label: "HTML", value: "html" },
+  { label: "Java", value: "java" },
+  { label: "JavaScript", value: "javascript" },
+  { label: "JSON", value: "json" },
+  { label: "Kotlin", value: "kotlin" },
+  { label: "Markdown", value: "markdown" },
+  { label: "Python", value: "python" },
+  { label: "Ruby", value: "ruby" },
+  { label: "Rust", value: "rust" },
+  { label: "SQL", value: "sql" },
+  { label: "Swift", value: "swift" },
+  { label: "TypeScript", value: "typescript" },
+  { label: "YAML", value: "yaml" },
+];
+
+export default function Paste() {
+  const navigate = useNavigate();
+  const [title, setTitle] = useState("");
+  const [content, setContent] = useState("");
+  const [language, setLanguage] = useState(LANGUAGE_OPTIONS[0]);
+  const [expiry, setExpiry] = useState(5);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  async function handleSubmit() {
+    if (!content.trim()) {
+      setError("Content is required.");
+      return;
+    }
+    setLoading(true);
+    setError(null);
+    try {
+      const res = await fetch("/api/paste", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({
+          title: title.trim(),
+          content,
+          language: language.value,
+          expiry,
+        }),
+      });
+      const data = await res.json();
+      if (!res.ok) {
+        setError(data.error ?? "Failed to create paste.");
+        return;
+      }
+      navigate(`/paste/${data.id}`);
+    } catch {
+      setError("Network error. Please try again.");
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <ContentLayout header={<Header variant="h1">New Paste</Header>}>
+      <Container>
+        <SpaceBetween size="m">
+          {error && (
+            <Alert type="error" onDismiss={() => setError(null)} dismissible>
+              {error}
+            </Alert>
+          )}
+          <FormField label="Title" description="Optional title for your paste.">
+            <Input
+              value={title}
+              onChange={(e) => setTitle(e.detail.value)}
+              placeholder="Untitled"
+            />
+          </FormField>
+          <FormField label="Content" constraintText="Required. Maximum 1 MB.">
+            <Textarea
+              value={content}
+              onChange={(e) => setContent(e.detail.value)}
+              placeholder="Paste your content here..."
+              rows={20}
+              spellcheck={false}
+            />
+          </FormField>
+          <FormField label="Language">
+            <Select
+              selectedOption={language}
+              onChange={(e) =>
+                setLanguage(e.detail.selectedOption as { label: string; value: string })
+              }
+              options={LANGUAGE_OPTIONS}
+            />
+          </FormField>
+          <FormField label="Expires" description={`${expiry} minute${expiry === 1 ? "" : "s"}`}>
+            <Slider
+              value={expiry}
+              onChange={(e) => setExpiry(e.detail.value)}
+              min={1}
+              max={10}
+              tickMarks
+              valueFormatter={(v) => `${v}m`}
+            />
+          </FormField>
+          <Button variant="primary" onClick={handleSubmit} loading={loading}>
+            Create Paste
+          </Button>
+        </SpaceBetween>
+      </Container>
+    </ContentLayout>
+  );
+}

Frontend/src/pages/PasteView.tsx

@@ -0,0 +1,159 @@
+import { useEffect, useState } from "react";
+import { useParams, Link } from "react-router-dom";
+import ContentLayout from "@cloudscape-design/components/content-layout";
+import Header from "@cloudscape-design/components/header";
+import Container from "@cloudscape-design/components/container";
+import Box from "@cloudscape-design/components/box";
+import Button from "@cloudscape-design/components/button";
+import SpaceBetween from "@cloudscape-design/components/space-between";
+import Spinner from "@cloudscape-design/components/spinner";
+import Alert from "@cloudscape-design/components/alert";
+import ColumnLayout from "@cloudscape-design/components/column-layout";
+import { CodeView } from "@cloudscape-design/code-view";
+
+interface Paste {
+  id: string;
+  title: string;
+  content: string;
+  language: string;
+  created_at: string;
+  expires_at: string | null;
+}
+
+function formatDate(iso: string) {
+  return new Date(iso).toLocaleString();
+}
+
+export default function PasteView() {
+  const { id } = useParams<{ id: string }>();
+  const [paste, setPaste] = useState<Paste | null>(null);
+  const [status, setStatus] = useState<"loading" | "ok" | "notfound" | "expired" | "error">(
+    "loading",
+  );
+  const [copied, setCopied] = useState(false);
+
+  useEffect(() => {
+    if (!id) return;
+    fetch(`/api/paste/${id}`)
+      .then((res) => {
+        if (res.status === 404) {
+          setStatus("notfound");
+          return null;
+        }
+        if (res.status === 410) {
+          setStatus("expired");
+          return null;
+        }
+        if (!res.ok) {
+          setStatus("error");
+          return null;
+        }
+        return res.json();
+      })
+      .then((data) => {
+        if (data) {
+          setPaste(data);
+          setStatus("ok");
+        }
+      })
+      .catch(() => setStatus("error"));
+  }, [id]);
+
+  function handleCopy() {
+    if (!paste) return;
+    navigator.clipboard.writeText(paste.content).then(() => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    });
+  }
+
+  if (status === "loading") {
+    return (
+      <ContentLayout header={<Header variant="h1">Loading…</Header>}>
+        <Container>
+          <Spinner size="large" />
+        </Container>
+      </ContentLayout>
+    );
+  }
+
+  if (status === "notfound") {
+    return (
+      <ContentLayout header={<Header variant="h1">Not Found</Header>}>
+        <Container>
+          <SpaceBetween size="m">
+            <Alert type="error">This paste does not exist.</Alert>
+            <Link to="/paste">Create a new paste</Link>
+          </SpaceBetween>
+        </Container>
+      </ContentLayout>
+    );
+  }
+
+  if (status === "expired") {
+    return (
+      <ContentLayout header={<Header variant="h1">Expired</Header>}>
+        <Container>
+          <SpaceBetween size="m">
+            <Alert type="warning">This paste has expired and is no longer available.</Alert>
+            <Link to="/paste">Create a new paste</Link>
+          </SpaceBetween>
+        </Container>
+      </ContentLayout>
+    );
+  }
+
+  if (status === "error" || !paste) {
+    return (
+      <ContentLayout header={<Header variant="h1">Error</Header>}>
+        <Container>
+          <Alert type="error">Failed to load paste. Please try again.</Alert>
+        </Container>
+      </ContentLayout>
+    );
+  }
+
+  return (
+    <ContentLayout
+      header={
+        <Header
+          variant="h1"
+          actions={
+            <SpaceBetween direction="horizontal" size="xs">
+              <Button onClick={handleCopy} iconName={copied ? "status-positive" : "copy"}>
+                {copied ? "Copied!" : "Copy"}
+              </Button>
+              <Button href={`/api/paste/${id}/raw`} target="_blank" iconName="external">
+                Raw
+              </Button>
+            </SpaceBetween>
+          }
+        >
+          {paste.title || "Untitled"}
+        </Header>
+      }
+    >
+      <SpaceBetween size="m">
+        <Container>
+          <ColumnLayout columns={3} variant="text-grid">
+            <div>
+              <Box variant="awsui-key-label">Language</Box>
+              <Box>{paste.language || "Plain Text"}</Box>
+            </div>
+            <div>
+              <Box variant="awsui-key-label">Created</Box>
+              <Box>{formatDate(paste.created_at)}</Box>
+            </div>
+            <div>
+              <Box variant="awsui-key-label">Expires</Box>
+              <Box>{paste.expires_at ? formatDate(paste.expires_at) : "Never"}</Box>
+            </div>
+          </ColumnLayout>
+        </Container>
+        <Container>
+          <CodeView content={paste.content} lineNumbers wrapLines />
+        </Container>
+      </SpaceBetween>
+    </ContentLayout>
+  );
+}