up

src/app/engine/community.ts

@@ -131,7 +131,11 @@ export async function getLatestPosts(visibility?: PostVisibility): Promise<Post[
     
     const response = (await res.json()) as GetAppPostsResponse
     // console.log("response:", response)
-    return Array.isArray(response?.posts) ? response?.posts : []
+
+    const maxNbPosts = 500
+    const posts: Post[] = Array.isArray(response?.posts) ? response?.posts : []
+    posts.sort((a, b) => Date.parse(b.createdAt) - Date.parse(a.createdAt))
+    return posts.slice(0, maxNbPosts)
   } catch (err) {
     // const error = `failed to get posts: ${err}`
     // console.error(error)

src/app/firehose/page.tsx

@@ -11,6 +11,7 @@ import { useSearchParams } from "next/navigation"
 import { Button } from "@/components/ui/button"
 import { Delete } from "./delete"
 import Link from "next/link"
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
 
 export default function FirehosePage() {
   const searchParams = useSearchParams()
@@ -32,56 +33,68 @@ export default function FirehosePage() {
   }
 
   return (
-    <div className={cn(
-      `light fixed w-full h-full flex flex-col items-center bg-slate-300 text-slate-800`,
-      ``,
-      actionman.className
-      )}>
-      <div className="w-full flex flex-col items-center overflow-y-scroll">
-        <div className="flex flex-col space-y-2 pt-18 mb-6">
-          <h1 className="text-4xl md:text-6xl lg:text-[70px] xl:text-[100px] text-cyan-700">🌐 Panoremix</h1>
-          <h2 className="text-3xl mb-6">Generate cool panoramas using AI!</h2>
-          <h2 className="text-2xl">Latest locations synthesized:</h2>
-        </div>
+    <TooltipProvider delayDuration={100}>
+      <div className={cn(
+        `light fixed w-full h-full flex flex-col items-center bg-slate-300 text-slate-800`,
+        ``,
+        actionman.className
+        )}>
+        <div className="w-full flex flex-col items-center overflow-y-scroll">
+          <div className="flex flex-col space-y-2 pt-18 mb-6">
+            <h1 className="text-4xl md:text-6xl lg:text-[70px] xl:text-[100px] text-cyan-700">🌐 Panoremix</h1>
+            <h2 className="text-3xl mb-6">Generate cool panoramas using AI!</h2>
+            <h2 className="text-2xl">Latest locations synthesized:</h2>
+          </div>
 
-        <div className="w-full grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-x-4 gap-y-6 px-12">
-          {posts.map(post => (
-            <Link
-              key={post.postId}
-              href={`/?postId=${post.postId}`}
-              target="_blank">
-              <div
+          <div className="w-full grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-x-4 gap-y-6 px-12">
+            {posts.map(post => (
+              <Link
                 key={post.postId}
-                className="group flex flex-col space-y-3 cursor-pointer"
-                >
-                <div className="w-full h-24">
-                {moderationKey ? <div className="relative -mb-8 ml-2">
-                  <Button
-                    className="z-30 bg-red-200 text-red-700 hover:bg-red-300 hover:text-red-800 text-2xs px-2 h-7"
-                    onClick={(e) => {
-                      e.preventDefault()
-                      setToDelete(post)
-                      return false
-                    }}>Delete</Button>
-                </div> : null}
-                  <img
-                    src={post.assetUrl}
-                    className={cn(
-                      `w-full h-24 rounded-xl overflow-hidden object-cover`,
-                      `border border-zinc-900/70`,
-                      // `group-hover:brightness-105`
-                      )}
-                  />
-                </div>
+                href={`/?postId=${post.postId}`}
+                target="_blank">
                 <div
-                  className="text-sm text-stone-800/80 truncate w-full group-hover:underline underline-offset-2"
-                >{post.prompt}</div>
-              </div>
-            </Link>
-          ))}
+                  key={post.postId}
+                  className="group flex flex-col cursor-pointer"
+                  >
+                  <div className="w-full h-32">
+                  {moderationKey ? <div className="relative -mb-8 ml-2">
+                    <Button
+                      className="z-30 bg-red-200 text-red-700 hover:bg-red-300 hover:text-red-800 text-2xs px-2 h-7"
+                      onClick={(e) => {
+                        e.preventDefault()
+                        setToDelete(post)
+                        return false
+                      }}>Delete</Button>
+                  </div> : null}
+                    <img
+                      src={post.assetUrl}
+                      className={cn(
+                        `w-full h-32 rounded-xl overflow-hidden object-cover`,
+                        `border border-zinc-900/70`,
+                        // `group-hover:brightness-105`
+                        )}
+                    />
+                  </div>
+                  <Tooltip>
+                    <TooltipTrigger asChild>
+                      <div
+                        className="text-base text-stone-900/80 truncate w-full group-hover:underline underline-offset-2"
+                      >{post.prompt}</div>
+                    </TooltipTrigger>
+                    <TooltipContent>
+                      <p className="w-full max-w-xl">{post.prompt}</p>
+                    </TooltipContent>
+                  </Tooltip>
+                  <div
+                  className="text-sm text-stone-700/70 w-full group-hover:underline underline-offset-2"
+                  >{new Date(Date.parse(post.createdAt)).toLocaleString()}</div>
+                </div>
+              </Link>
+            ))}
+          </div>
         </div>
+        <Delete post={toDelete} moderationKey={moderationKey} onDelete={handleOnDelete} />
       </div>
-      <Delete post={toDelete} moderationKey={moderationKey} onDelete={handleOnDelete} />
-    </div>
+    </TooltipProvider>
   )
 }

src/app/page.tsx

@@ -5,8 +5,6 @@ import Head from "next/head"
 // import Firehose from "./firehose/page"
 import Generate from "./generate/page"
 
-import { TooltipProvider } from "@/components/ui/tooltip"
-
 // https://nextjs.org/docs/pages/building-your-application/optimizing/fonts 
 
 export default async function Page() {
@@ -20,9 +18,7 @@ export default async function Page() {
       <main className={
         `light bg-zinc-50 text-stone-900
         `}>
-        <TooltipProvider delayDuration={100}>
-          <Generate />
-        </TooltipProvider>
+        <Generate />
       </main>
     </>
   )