release: v2.0.3

apps/www/package.json

@@ -11,6 +11,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@fingerprintjs/botd": "^1.9.1",
     "@graphql-yoga/plugin-apq": "^3.4.0",
     "@graphql-yoga/plugin-csrf-prevention": "^3.4.0",
     "@graphql-yoga/plugin-disable-introspection": "^2.4.0",

apps/www/src/app/api/graphql/route.ts

@@ -42,10 +42,11 @@ const { handleRequest } = createYoga({
         "Query.messages": "PRIVATE",
         "Query.messagesFromCursor": "PRIVATE",
       },
-      ttl: 5_000,
+      ttl: 30_000,
       ttlPerSchemaCoordinate: {
-        "Query.notes": 30_000,
-        "Query.notesFromCursor": 30_000,
+        "Query.notes": 180_000,
+        "Query.notesFromCursor": 180_000,
+        "Query.userByUsername": 300_000,
       },
     }),
     useDisableIntrospection({

apps/www/src/app/blocked/page.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import { cn } from "@umamin/ui/lib/utils";
+import { AnimatedShinyText } from "@umamin/ui/components/animated-shiny-text";
+
+export default function Blocked() {
+  return (
+    <div className="flex items-center flex-col min-h-screen lg:pt-44 py-36 md:gap-8 gap-6 container">
+      <div
+        className={cn(
+          "group rounded-full border border-black/5 bg-zinc-100 text-base text-white transition-all ease-in dark:border-white/5 dark:bg-zinc-900",
+        )}
+      >
+        <AnimatedShinyText className="inline-flex items-center justify-center px-4 py-1 transition ease-out">
+          Access Denied
+        </AnimatedShinyText>
+      </div>
+      <div className="border-b-2 border-muted border-dashed md:pb-8 pb-6">
+        <h1 className="font-extrabold md:text-7xl text-[10vw] leading-none dark:bg-gradient-to-b from-foreground dark:to-zinc-400 bg-clip-text bg-zinc-800 text-transparent tracking-tighter text-center">
+          Your access has been blocked.
+        </h1>
+      </div>
+    </div>
+  );
+}

apps/www/src/app/components/utilities/use-media-query.tsx

@@ -0,0 +1,19 @@
+import * as React from "react";
+
+export function useMediaQuery(query: string) {
+  const [value, setValue] = React.useState(false);
+
+  React.useEffect(() => {
+    function onChange(event: MediaQueryListEvent) {
+      setValue(event.matches);
+    }
+
+    const result = matchMedia(query);
+    result.addEventListener("change", onChange);
+    setValue(result.matches);
+
+    return () => result.removeEventListener("change", onChange);
+  }, [query]);
+
+  return value;
+}

apps/www/src/app/inbox/components/received/messages.tsx

@@ -1,39 +1,30 @@
-import { Suspense } from "react";
-import { cookies } from "next/headers";
-import { Skeleton } from "@umamin/ui/components/skeleton";
-
-import { lucia } from "@/lib/auth";
+import { cache } from "react";
+import { getSession } from "@/lib/auth";
 import { getClient } from "@/lib/gql/rsc";
 import { ReceivedMessagesList } from "./list";
 import { RECEIVED_MESSAGES_QUERY } from "../../queries";
 
-export async function ReceivedMessages() {
-  const sessionId = cookies().get(lucia.sessionCookieName)?.value ?? "";
+const getMessages = cache(async (sessionId?: string) => {
   const result = await getClient(sessionId).query(RECEIVED_MESSAGES_QUERY, {
     type: "received",
   });
 
-  const messages = result?.data?.messages;
+  return result?.data?.messages;
+});
+
+export async function ReceivedMessages() {
+  const { session } = await getSession();
+  const messages = await getMessages(session?.id);
 
   return (
-    <Suspense
-      fallback={
-        <div className="space-y-5">
-          <Skeleton className="w-full h-[200px] rounded-lg" />
-          <Skeleton className="w-full h-[200px] rounded-lg" />
-          <Skeleton className="w-full h-[200px] rounded-lg" />
-        </div>
-      }
-    >
-      <div className="flex flex-col items-center gap-5 pb-20">
-        {!messages?.length ? (
-          <p className="text-sm text-muted-foreground mt-4">
-            No messages to show
-          </p>
-        ) : (
-          <ReceivedMessagesList messages={messages} />
-        )}
-      </div>
-    </Suspense>
+    <div className="flex flex-col items-center gap-5 pb-20">
+      {!messages?.length ? (
+        <p className="text-sm text-muted-foreground mt-4">
+          No messages to show
+        </p>
+      ) : (
+        <ReceivedMessagesList messages={messages} />
+      )}
+    </div>
   );
 }

apps/www/src/app/inbox/components/sent/messages.tsx

@@ -1,38 +1,30 @@
-import { Suspense } from "react";
-import { cookies } from "next/headers";
-import { Skeleton } from "@umamin/ui/components/skeleton";
-
-import { lucia } from "@/lib/auth";
+import { cache } from "react";
+import { getSession } from "@/lib/auth";
 import { getClient } from "@/lib/gql/rsc";
 import { SentMessagesList } from "./list";
 import { SENT_MESSAGES_QUERY } from "../../queries";
 
-export async function SentMessages() {
-  const sessionId = cookies().get(lucia.sessionCookieName)?.value ?? "";
+const getMessages = cache(async (sessionId?: string) => {
   const result = await getClient(sessionId).query(SENT_MESSAGES_QUERY, {
     type: "sent",
   });
-  const messages = result?.data?.messages;
+
+  return result?.data?.messages;
+});
+
+export async function SentMessages() {
+  const { session } = await getSession();
+  const messages = await getMessages(session?.id);
 
   return (
-    <Suspense
-      fallback={
-        <div className="space-y-5">
-          <Skeleton className="w-full h-[300px] rounded-lg" />
-          <Skeleton className="w-full h-[300px] rounded-lg" />
-          <Skeleton className="w-full h-[300px] rounded-lg" />
-        </div>
-      }
-    >
-      <div className="flex w-full flex-col items-center gap-5 pb-20">
-        {!messages?.length ? (
-          <p className="text-sm text-muted-foreground mt-4">
-            No messages to show
-          </p>
-        ) : (
-          <SentMessagesList messages={messages} />
-        )}
-      </div>
-    </Suspense>
+    <div className="flex w-full flex-col items-center gap-5 pb-20">
+      {!messages?.length ? (
+        <p className="text-sm text-muted-foreground mt-4">
+          No messages to show
+        </p>
+      ) : (
+        <SentMessagesList messages={messages} />
+      )}
+    </div>
   );
 }

apps/www/src/app/inbox/page.tsx

@@ -1,3 +1,4 @@
+import { Suspense } from "react";
 import dynamic from "next/dynamic";
 import { getSession } from "@/lib/auth";
 import { redirect } from "next/navigation";
@@ -10,6 +11,7 @@ import {
 } from "@umamin/ui/components/tabs";
 import { UserCard } from "../components/user-card";
 import { SentMessages } from "./components/sent/messages";
+import { Skeleton } from "@umamin/ui/components/skeleton";
 import { ReceivedMessages } from "./components/received/messages";
 
 const AdContainer = dynamic(() => import("@umamin/ui/ad"));
@@ -47,11 +49,35 @@ export default async function UserProfile() {
   const tabsData = [
     {
       name: "Received",
-      content: () => <ReceivedMessages />,
+      content: () => (
+        <Suspense
+          fallback={
+            <div className="space-y-5">
+              <Skeleton className="w-full h-[200px] rounded-lg" />
+              <Skeleton className="w-full h-[200px] rounded-lg" />
+              <Skeleton className="w-full h-[200px] rounded-lg" />
+            </div>
+          }
+        >
+          <ReceivedMessages />
+        </Suspense>
+      ),
     },
     {
       name: "Sent",
-      content: () => <SentMessages />,
+      content: () => (
+        <Suspense
+          fallback={
+            <div className="space-y-5">
+              <Skeleton className="w-full h-[300px] rounded-lg" />
+              <Skeleton className="w-full h-[300px] rounded-lg" />
+              <Skeleton className="w-full h-[300px] rounded-lg" />
+            </div>
+          }
+        >
+          <SentMessages />
+        </Suspense>
+      ),
     },
   ];
 

apps/www/src/app/layout.tsx

@@ -104,7 +104,7 @@ export default function RootLayout({
       {process.env.NODE_ENV === "production" && (
         <Script
           async
-          strategy="lazyOnload"
+          strategy="afterInteractive"
           src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-4274133898976040"
           crossOrigin="anonymous"
         />

apps/www/src/app/notes/components/card.tsx

@@ -1,36 +1,51 @@
 "use client";
 
 import Link from "next/link";
+import { useState } from "react";
 import { logEvent } from "firebase/analytics";
 import { BadgeCheck, ScanFace } from "lucide-react";
 
+import { analytics } from "@/lib/firebase";
+import { NoteQueryResult } from "../queries";
+import { Icons } from "@/app/components/utilities/icons";
 import { Menu, type MenuItems } from "@/app/components/menu";
+import { Card, CardContent, CardHeader } from "@umamin/ui/components/card";
+
 import {
   Avatar,
   AvatarFallback,
   AvatarImage,
 } from "@umamin/ui/components/avatar";
 import { onSaveImage, shortTimeAgo } from "@/lib/utils";
-import { analytics } from "@/lib/firebase";
-import { NoteQueryResult } from "../queries";
-import { Icons } from "@/app/components/utilities/icons";
-import { Card, CardContent, CardHeader } from "@umamin/ui/components/card";
+import { ReplyDrawer } from "./reply-drawer";
 
 type Props = {
   note: Partial<Omit<NoteQueryResult, "user">>;
   user?: {
+    id?: string;
     displayName?: string | null;
     username?: string;
     imageUrl?: string | null;
   };
   menuItems?: MenuItems;
+  currentUserId?: string;
 };
 
-export function NoteCard({ note, user, menuItems }: Props) {
+export function NoteCard({ note, user, menuItems, currentUserId }: Props) {
   const username = user?.username;
 
+  const [open, setOpen] = useState(false);
+
   return (
     <div id={note.id} className="container">
+      <ReplyDrawer
+        open={open}
+        setOpen={setOpen}
+        note={note}
+        user={user}
+        currentUserId={currentUserId}
+      />
+
       <Card className="flex flex-col items-start justify-between">
         <CardHeader className="w-full pb-4 text-sm">
           <div className="flex justify-between items-start">
@@ -93,8 +108,20 @@ export function NoteCard({ note, user, menuItems }: Props) {
                 </span>
               )}
 
-              {!note.isAnonymous && (
-                <Link href={`/to/${username}`} className="hover:underline">
+              {!note.isAnonymous && currentUserId && (
+                <button
+                  onClick={() => setOpen(!open)}
+                  className="hover:underline"
+                >
+                  <Icons.chat className="h-5 w-5" />
+                </button>
+              )}
+
+              {!note.isAnonymous && !currentUserId && (
+                <Link
+                  href={`/to/${user?.username}`}
+                  className="hover:underline"
+                >
                   <Icons.chat className="h-5 w-5" />
                 </Link>
               )}

apps/www/src/app/notes/components/form.tsx

@@ -12,6 +12,8 @@ import { CurrentNoteQueryResult } from "../queries";
 
 import { formatError } from "@/lib/utils";
 import { analytics } from "@/lib/firebase";
+import useBotDetection from "@/hooks/useBotDetection";
+
 import { SelectUser } from "@umamin/db/schema/user";
 import { useNoteStore } from "@/store/useNoteStore";
 import { Label } from "@umamin/ui/components/label";
@@ -42,6 +44,7 @@ type Props = {
 };
 
 export function NoteForm({ user, currentNote }: Props) {
+  useBotDetection();
   const [content, setContent] = useState("");
   const [isFetching, setIsFetching] = useState(false);
   const [isAnonymous, setIsAnonymous] = useState(false);
@@ -150,7 +153,7 @@ export function NoteForm({ user, currentNote }: Props) {
         <div className="border-b-2 border-muted border-dashed mb-5 pb-5">
           <p className="text-sm font-medium mb-2 container">Your note</p>
           <NoteCard
-            note={!!updatedNote ? updatedNote : currentNote}
+            note={updatedNote ? updatedNote : currentNote}
             user={{
               displayName: user.displayName,
               username: user.username,

apps/www/src/app/notes/components/list.tsx

@@ -106,11 +106,15 @@ export function NotesList({ currentUserId, notes }: Props) {
         ?.filter((u) => u.user?.id !== currentUserId)
         .map((note, i) => (
           <div key={note.id} className="w-full">
-            <NoteCard note={note} user={{ ...note.user }} />
+            <NoteCard
+              note={note}
+              user={{ ...note.user }}
+              currentUserId={currentUserId}
+            />
 
-            {/* v2-note-list */}
+            {/* v2-note-feed */}
             {(i + 1) % 5 === 0 && (
-              <AdContainer className="mt-5" slotId="9012650581" />
+              <AdContainer className="mt-5" slotId="4344956885" />
             )}
           </div>
         ))}