feat(notes): allowing frontend to save

frontend/src/App.tsx

@@ -6,6 +6,7 @@ import { SearchCardEvent } from "./components/search-card/SearchCardEvent";
 import { SearchCardLocation } from "./components/search-card/SearchCardLocation";
 import { UserImage, getUserImages } from "./network";
 import { getCardSize } from "./utils/getCardSize";
+import { SearchCardNote } from "./components/search-card/SearchCardNote";
 
 const getCardComponent = (item: UserImage) => {
     switch (item.type) {
@@ -13,6 +14,8 @@ const getCardComponent = (item: UserImage) => {
             return <SearchCardLocation item={item} />;
         case "event":
             return <SearchCardEvent item={item} />;
+        case "note":
+            return <SearchCardNote item={item} />;
         // case "Contact":
         //     return <SearchCardContact item={item} />;
         // case "Website":

frontend/src/components/search-card/SearchCardNote.tsx

@@ -1,10 +1,10 @@
 import { Separator } from "@kobalte/core/separator";
 
 import { IconNote } from "@tabler/icons-solidjs";
-import type { Note } from "../../network/types";
+import type { UserImage } from "../../network";
 
 type Props = {
-    item: Note;
+    item: Extract<UserImage, { type: "note" }>;
 };
 
 export const SearchCardNote = ({ item }: Props) => {
@@ -13,13 +13,13 @@ export const SearchCardNote = ({ item }: Props) => {
     return (
         <div class="absolute inset-0 p-3 bg-green-50">
             <div class="grid grid-cols-[auto_20px] gap-1 mb-1">
-                <p class="text-sm text-neutral-900 font-bold">{data.title}</p>
+                <p class="text-sm text-neutral-900 font-bold">{data.Name}</p>
                 <IconNote size={20} class="text-neutral-500 mt-1" />
             </div>
-            <p class="text-xs text-neutral-500">{data.keywords}</p>
+            <p class="text-xs text-neutral-500">Keywords TODO</p>
             <Separator class="my-2" />
             <p class="text-xs text-neutral-500 line-clamp-2 overflow-hidden">
-                {data.content}
+                {data.Content}
             </p>
         </div>
     );

frontend/src/network/index.ts

@@ -75,6 +75,13 @@ const eventValidator = strictObject({
     Organizer: nullable(contactValidator),
 });
 
+const noteValidator = strictObject({
+    ID: pipe(string(), uuid()),
+    Name: string(),
+    Description: nullable(string()),
+    Content: string(),
+});
+
 const locationDataType = strictObject({
     type: literal("location"),
     data: locationValidator,
@@ -85,7 +92,16 @@ const eventDataType = strictObject({
     data: eventValidator,
 });
 
-const dataTypeValidator = variant("type", [locationDataType, eventDataType]);
+const noteDataType = strictObject({
+    type: literal("note"),
+    data: noteValidator,
+});
+
+const dataTypeValidator = variant("type", [
+    locationDataType,
+    eventDataType,
+    noteDataType,
+]);
 const getUserImagesResponseValidator = array(dataTypeValidator);
 
 export type UserImage = InferOutput<typeof dataTypeValidator>;