huge push of backend and frontend to dos to finish wiring up and UI display

frontend/src/components/button.tsx

@@ -1,11 +1,14 @@
-import { useState } from 'react';
-
-const Button = () => {
-    return (
-        <button>
-            Click me
-        </button>
-    );
+type ClusterButtonProps = {
+  onClick: () => void;
+  isLoading: boolean;
 };
 
-export default Button;
+const ClusterButton = ({ onClick, isLoading }: ClusterButtonProps) => {
+  return (
+    <button onClick={onClick} disabled={isLoading}>
+      {isLoading ? 'Clustering...' : 'Run Clustering'}
+    </button>
+  );
+};
+
+export default ClusterButton;

frontend/src/components/stickies.css

@@ -5,3 +5,22 @@
   justify-content: center;
   padding: 24px;
 }
+
+.clusters-container {
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+  padding: 24px 0;
+}
+
+.cluster-group {
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  border-radius: 8px;
+  padding: 16px;
+}
+
+.cluster-label {
+  margin: 0 0 16px 0;
+  font-size: 1.2em;
+  font-weight: 600;
+}

frontend/src/components/stickies.tsx

@@ -1,18 +1,57 @@
-import { useGetStickies } from '../api/api';
+import { useGetStickies, useClusterStickies } from '../api/api';
+import type { Sticky as StickyType } from '../types/types';
 import Sticky from './sticky';
+import ClusterButton from './button';
 import './stickies.css';
 
 const Stickies = () => {
-  const { data, isLoading, error } = useGetStickies();
+  const { data: stickies, isLoading, error } = useGetStickies();
+  const { mutate: cluster, data: clusters, isPending } = useClusterStickies();
 
   if (isLoading) return <div>Loading...</div>;
   if (error) return <div>Error: {error.message}</div>;
 
+  const handleCluster = () => {
+    cluster();
+  };
+
+  const buildStickyMap = (): Map<string, StickyType> => {
+    const map = new Map<string, StickyType>();
+    stickies?.forEach((s) => map.set(s.id, s));
+    return map;
+  };
+
+  if (clusters) {
+    const stickyMap = buildStickyMap();
+
+    return (
+      <div>
+        <ClusterButton onClick={handleCluster} isLoading={isPending} />
+        <div className="clusters-container">
+          {clusters.map((group) => (
+            <div key={group.label} className="cluster-group">
+              <h3 className="cluster-label">{group.label}</h3>
+              <div className="stickies-grid">
+                {group.noteIds.map((id) => {
+                  const sticky = stickyMap.get(id);
+                  return sticky ? <Sticky key={sticky.id} sticky={sticky} /> : null;
+                })}
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    );
+  }
+
   return (
-    <div className="stickies-grid">
-      {data?.map((sticky) => (
-        <Sticky key={sticky.id} sticky={sticky} />
-      ))}
+    <div>
+      <ClusterButton onClick={handleCluster} isLoading={isPending} />
+      <div className="stickies-grid">
+        {stickies?.map((sticky) => (
+          <Sticky key={sticky.id} sticky={sticky} />
+        ))}
+      </div>
     </div>
   );
 };