memories page

apps/web/app/(dash)/memories/page.tsx

@@ -6,7 +6,7 @@ import { Content, StoredSpace } from "@/server/db/schema";
 import { NextIcon, SearchIcon, UrlIcon } from "@repo/ui/icons";
 import Image from "next/image";
 import React, { useEffect, useMemo, useState } from "react";
-import Masonry, { ResponsiveMasonry } from "react-responsive-masonry";
+import Masonry from "react-layout-masonry";
 
 function Page() {
   const [filter, setFilter] = useState("All");
@@ -53,19 +53,44 @@ function Page() {
   }, []);
 
   return (
-    <div className="max-w-3xl min-w-3xl py-36 h-full flex mx-auto w-full flex-col gap-12">
+    <div className="max-w-3xl min-w-3xl py-36 h-full flex mx-auto w-full flex-col gap-6">
       <h2 className="text-white w-full font-medium text-2xl text-left">
         My Memories
       </h2>
 
-      <div className="flex flex-col gap-4">
-        <ResponsiveMasonry columnsCountBreakPoints={{ 350: 1, 750: 2, 900: 3 }}>
-          <Masonry>
-            <div>Item 1</div>
-            <div>Item 2</div>
-          </Masonry>
-        </ResponsiveMasonry>
-      </div>
+      <Filters setFilter={setFilter} filter={filter} />
+
+      <Masonry
+        className="mt-6"
+        columns={{ 640: 1, 768: 2, 1024: 3, 1280: 4 }}
+        gap={4}
+      >
+        {sortedItems.map((item) => {
+          if (filter !== "All" && item.item !== filter) return null;
+
+          if (item.item === "memory") {
+            return (
+              <LinkComponent
+                type={(item.data as Content).type ?? "note"}
+                content={(item.data as Content).content}
+                title={(item.data as Content).title ?? "Untitled"}
+                url={(item.data as Content).url}
+              />
+            );
+          }
+
+          if (item.item === "space") {
+            return (
+              <TabComponent
+                title={(item.data as StoredSpace).name}
+                description={`${(item.data as StoredSpace).numItems} memories`}
+              />
+            );
+          }
+
+          return null;
+        })}
+      </Masonry>
     </div>
   );
 }

apps/web/app/(dash)/menu.tsx

@@ -270,8 +270,9 @@ function Menu() {
                         {
                           name: spaceName,
                           id: creationTask.data!,
-                          createdAt: new Date().toISOString(),
+                          createdAt: new Date(),
                           user: null,
+                          numItems: 0,
                         },
                       ]);
                       setSelectedSpaces((prev) => [

apps/web/migrations/0000_classy_speed_demon.sql

@@ -63,7 +63,6 @@ CREATE TABLE `space` (
 	`id` integer PRIMARY KEY AUTOINCREMENT NOT NULL,
 	`name` text DEFAULT 'none' NOT NULL,
 	`user` text(255),
-	`createdAt` integer NOT NULL,
 	FOREIGN KEY (`user`) REFERENCES `user`(`id`) ON UPDATE no action ON DELETE cascade
 );
 --> statement-breakpoint
@@ -87,8 +86,7 @@ CREATE TABLE `user` (
 	`name` text,
 	`email` text NOT NULL,
 	`emailVerified` integer,
-	`image` text,
-	`telegramId` text
+	`image` text
 );
 --> statement-breakpoint
 CREATE TABLE `verificationToken` (
@@ -107,7 +105,4 @@ CREATE INDEX `spaces_user_idx` ON `space` (`user`);--> statement-breakpoint
 CREATE INDEX `storedContent_url_idx` ON `storedContent` (`url`);--> statement-breakpoint
 CREATE INDEX `storedContent_savedAt_idx` ON `storedContent` (`savedAt`);--> statement-breakpoint
 CREATE INDEX `storedContent_title_idx` ON `storedContent` (`title`);--> statement-breakpoint
-CREATE INDEX `storedContent_user_idx` ON `storedContent` (`user`);--> statement-breakpoint
-CREATE INDEX `users_email_idx` ON `user` (`email`);--> statement-breakpoint
-CREATE INDEX `users_telegram_idx` ON `user` (`telegramId`);--> statement-breakpoint
-CREATE INDEX `users_id_idx` ON `user` (`id`);
+CREATE INDEX `storedContent_user_idx` ON `storedContent` (`user`);

apps/web/migrations/0001_index_telegram_id.sql

@@ -0,0 +1,9 @@
+ALTER TABLE `space` ADD COLUMN `createdAt` integer;
+ALTER TABLE `space` ADD COLUMN `numItems` integer NOT NULL DEFAULT 0;
+--> statement-breakpoint
+ALTER TABLE `user` ADD COLUMN `telegramId` text;
+
+CREATE INDEX `storedContent_user_idx` ON `storedContent` (`user`);--> statement-breakpoint
+CREATE INDEX `users_email_idx` ON `user` (`email`);--> statement-breakpoint
+CREATE INDEX `users_telegram_idx` ON `user` (`telegramId`);--> statement-breakpoint
+CREATE INDEX `users_id_idx` ON `user` (`id`);

apps/web/migrations/0001_remarkable_avengers.sql

@@ -1,4 +0,0 @@
-ALTER TABLE `user` ADD `telegramId` text;--> statement-breakpoint
-CREATE INDEX `users_email_idx` ON `user` (`email`);--> statement-breakpoint
-CREATE INDEX `users_telegram_idx` ON `user` (`telegramId`);--> statement-breakpoint
-CREATE INDEX `users_id_idx` ON `user` (`id`);

apps/web/migrations/000_setup.sql

@@ -1,108 +0,0 @@
-CREATE TABLE `account` (
-	`userId` text NOT NULL,
-	`type` text NOT NULL,
-	`provider` text NOT NULL,
-	`providerAccountId` text NOT NULL,
-	`refresh_token` text,
-	`access_token` text,
-	`expires_at` integer,
-	`token_type` text,
-	`scope` text,
-	`id_token` text,
-	`session_state` text,
-	PRIMARY KEY(`provider`, `providerAccountId`),
-	FOREIGN KEY (`userId`) REFERENCES `user`(`id`) ON UPDATE no action ON DELETE cascade
-);
---> statement-breakpoint
-CREATE TABLE `authenticator` (
-	`credentialID` text NOT NULL,
-	`userId` text NOT NULL,
-	`providerAccountId` text NOT NULL,
-	`credentialPublicKey` text NOT NULL,
-	`counter` integer NOT NULL,
-	`credentialDeviceType` text NOT NULL,
-	`credentialBackedUp` integer NOT NULL,
-	`transports` text,
-	PRIMARY KEY(`credentialID`, `userId`),
-	FOREIGN KEY (`userId`) REFERENCES `user`(`id`) ON UPDATE no action ON DELETE cascade
-);
---> statement-breakpoint
-CREATE TABLE `chatHistory` (
-	`id` integer PRIMARY KEY AUTOINCREMENT NOT NULL,
-	`threadId` text NOT NULL,
-	`question` text NOT NULL,
-	`answerParts` text,
-	`answerSources` text,
-	`answerJustification` text,
-	FOREIGN KEY (`threadId`) REFERENCES `chatThread`(`id`) ON UPDATE no action ON DELETE cascade
-);
---> statement-breakpoint
-CREATE TABLE `chatThread` (
-	`id` text PRIMARY KEY NOT NULL,
-	`firstMessage` text NOT NULL,
-	`userId` text NOT NULL,
-	FOREIGN KEY (`userId`) REFERENCES `user`(`id`) ON UPDATE no action ON DELETE cascade
-);
---> statement-breakpoint
-CREATE TABLE `contentToSpace` (
-	`contentId` integer NOT NULL,
-	`spaceId` integer NOT NULL,
-	PRIMARY KEY(`contentId`, `spaceId`),
-	FOREIGN KEY (`contentId`) REFERENCES `storedContent`(`id`) ON UPDATE no action ON DELETE cascade,
-	FOREIGN KEY (`spaceId`) REFERENCES `space`(`id`) ON UPDATE no action ON DELETE cascade
-);
---> statement-breakpoint
-CREATE TABLE `session` (
-	`sessionToken` text PRIMARY KEY NOT NULL,
-	`userId` text NOT NULL,
-	`expires` integer NOT NULL,
-	FOREIGN KEY (`userId`) REFERENCES `user`(`id`) ON UPDATE no action ON DELETE cascade
-);
---> statement-breakpoint
-CREATE TABLE `space` (
-	`id` integer PRIMARY KEY AUTOINCREMENT NOT NULL,
-	`name` text DEFAULT 'none' NOT NULL,
-	`user` text(255),
-	FOREIGN KEY (`user`) REFERENCES `user`(`id`) ON UPDATE no action ON DELETE cascade
-);
---> statement-breakpoint
-CREATE TABLE `storedContent` (
-	`id` integer PRIMARY KEY AUTOINCREMENT NOT NULL,
-	`content` text NOT NULL,
-	`title` text(255),
-	`description` text(255),
-	`url` text NOT NULL,
-	`savedAt` integer NOT NULL,
-	`baseUrl` text(255),
-	`ogImage` text(255),
-	`type` text DEFAULT 'page',
-	`image` text(255),
-	`user` text,
-	FOREIGN KEY (`user`) REFERENCES `user`(`id`) ON UPDATE no action ON DELETE cascade
-);
---> statement-breakpoint
-CREATE TABLE `user` (
-	`id` text PRIMARY KEY NOT NULL,
-	`name` text,
-	`email` text NOT NULL,
-	`emailVerified` integer,
-	`image` text
-);
---> statement-breakpoint
-CREATE TABLE `verificationToken` (
-	`identifier` text NOT NULL,
-	`token` text NOT NULL,
-	`expires` integer NOT NULL,
-	PRIMARY KEY(`identifier`, `token`)
-);
---> statement-breakpoint
-CREATE UNIQUE INDEX `authenticator_credentialID_unique` ON `authenticator` (`credentialID`);--> statement-breakpoint
-CREATE INDEX `chatHistory_thread_idx` ON `chatHistory` (`threadId`);--> statement-breakpoint
-CREATE INDEX `chatThread_user_idx` ON `chatThread` (`userId`);--> statement-breakpoint
-CREATE UNIQUE INDEX `space_name_unique` ON `space` (`name`);--> statement-breakpoint
-CREATE INDEX `spaces_name_idx` ON `space` (`name`);--> statement-breakpoint
-CREATE INDEX `spaces_user_idx` ON `space` (`user`);--> statement-breakpoint
-CREATE INDEX `storedContent_url_idx` ON `storedContent` (`url`);--> statement-breakpoint
-CREATE INDEX `storedContent_savedAt_idx` ON `storedContent` (`savedAt`);--> statement-breakpoint
-CREATE INDEX `storedContent_title_idx` ON `storedContent` (`title`);--> statement-breakpoint
-CREATE INDEX `storedContent_user_idx` ON `storedContent` (`user`);

apps/web/server/db/schema.ts

@@ -152,6 +152,7 @@ export const space = createTable(
       onDelete: "cascade",
     }),
     createdAt: int("createdAt", { mode: "timestamp" }).notNull(),
+    numItems: integer("numItems").notNull().default(0),
   },
   (space) => ({
     nameIdx: index("spaces_name_idx").on(space.name),

package.json

@@ -86,6 +86,7 @@
     "random-js": "^2.1.0",
     "react-dropzone": "^14.2.3",
     "react-hook-form": "^7.51.5",
+    "react-layout-masonry": "^1.1.0",
     "react-markdown": "^9.0.1",
     "react-responsive-masonry": "^2.2.1",
     "react-tweet": "^3.2.1",