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

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>
   );
 };