Merge pull request #694 from and-voila/srizvi/issue489

feat: add scroll area to sites and posts #489
and-voila · Jan 28, 2024 · 8e51fbf · 8e51fbf
2 parents 950d728 + e9b14de
commit 8e51fbf
Show file tree

Hide file tree

Showing 13 changed files with 265 additions and 67 deletions.
diff --git a/apps/ai/src/app/(routes)/studio/(teams)/[team_slug]/workspace/publish/(root)/page.tsx b/apps/ai/src/app/(routes)/studio/(teams)/[team_slug]/workspace/publish/(root)/page.tsx
@@ -41,7 +41,7 @@ export default async function WorkspacePublishPage({
         <div>
           <h3 className="text-lg font-semibold leading-6">Workspace sites</h3>
           <Separator className="mb-6 mt-2" />
-          <Sites teamSlug={params.team_slug} />
+          <Sites teamSlug={params.team_slug} limit={8} />
         </div>
         <div>
           <h3 className="text-lg font-semibold leading-6">Recent posts</h3>

diff --git a/apps/ai/src/app/(routes)/studio/(teams)/[team_slug]/workspace/publish/(root)/posts/page.tsx b/apps/ai/src/app/(routes)/studio/(teams)/[team_slug]/workspace/publish/(root)/posts/page.tsx
@@ -27,11 +27,20 @@ export default async function WorkspacePostsPage({
         description="Select a post to manage or edit."
       />
       <div className="my-8 flex flex-col md:my-12">
-        <h3 className="text-lg font-semibold leading-6">
-          Recent posts from your workspace
-        </h3>
-        <Separator className="mb-6 mt-2" />
-        <Posts teamSlug={params.team_slug} limit={8} />
+        <div>
+          <h3 className="text-lg font-semibold leading-6">
+            Recent drafts in your workspace
+          </h3>
+          <Separator className="mb-6 mt-2" />
+          <Posts teamSlug={params.team_slug} limit={8} published={false} />
+        </div>
+        <div>
+          <h3 className="text-lg font-semibold leading-6">
+            Recently published in your workspace
+          </h3>
+          <Separator className="mb-6 mt-2" />
+          <Posts teamSlug={params.team_slug} limit={8} published={true} />
+        </div>
       </div>
     </div>
   );

diff --git a/...i/src/app/(routes)/studio/(teams)/[team_slug]/workspace/publish/(site)/site/[id]/page.tsx b/...i/src/app/(routes)/studio/(teams)/[team_slug]/workspace/publish/(site)/site/[id]/page.tsx
@@ -72,6 +72,7 @@ export default async function SiteManage({
         <Posts
           siteId={decodeURIComponent(params.id)}
           teamSlug={params.team_slug}
+          limit={8}
         />
       </div>
     </div>

diff --git a/apps/ai/src/components/layout/site-footer.tsx b/apps/ai/src/components/layout/site-footer.tsx
@@ -84,7 +84,9 @@ export function SiteFooter({ className }: React.HTMLAttributes<HTMLElement>) {
           {links.map((link) => (
             <FooterLink key={link.href} {...link} />
           ))}
-          <SystemStatusWidget />
+          <div className="md:ml-8">
+            <SystemStatusWidget />
+          </div>
         </div>
         <ModeToggle />
       </div>

diff --git a/apps/ai/src/components/layout/system-status.tsx b/apps/ai/src/components/layout/system-status.tsx
@@ -50,14 +50,14 @@ const getStatusProperties = (status: GeneralStatus) => {
         color: 'bg-green-600 dark:bg-green-500',
         text: 'Running smooth',
       };
-    case 'HASISSUES':
     case 'INVESTIGATING':
     case 'IDENTIFIED':
     case 'MONITORING':
       return {
         color: 'bg-yellow-600 dark:bg-yellow-500',
         text: "Something's up",
       };
+    case 'HASISSUES':
     case 'UNDERMAINTENANCE':
     case 'NOTSTARTEDYET':
     case 'INPROGRESS':
@@ -70,7 +70,7 @@ const getStatusProperties = (status: GeneralStatus) => {
 const StatusIndicator = ({ status }: StatusIndicatorProps) => {
   const { color, text } = getStatusProperties(status);
   return (
-    <div className="flex items-center gap-2 md:ml-8">
+    <div className="flex items-center gap-2">
       <div className={`h-2 w-2 rounded-full ${color}`} />
       <span className="whitespace-nowrap font-semibold text-muted-foreground">
         {text}
@@ -97,7 +97,7 @@ const SystemStatusWidget = () => {
       rel="noopener noreferrer"
       aria-label="System Status Link"
     >
-      <div>
+      <div className="hover:underline hover:underline-offset-4">
         {statusData && (
           <div>
             <StatusIndicator status={statusData.page.status} />

diff --git a/apps/ai/src/components/publish/post-card.tsx b/apps/ai/src/components/publish/post-card.tsx
@@ -21,43 +21,42 @@ export default function PostCard({ data, teamSlug }: PostCardProps) {
   const url = `${data.site?.subdomain}.${env.NEXT_PUBLIC_ROOT_DOMAIN}/${data.slug}`;
 
   return (
-    <div className="group relative rounded-lg border bg-card pb-10">
+    <div className="group relative rounded-lg border bg-card pb-10 shadow">
       <Link
         href={`${APP_BP}/${teamSlug}/workspace/publish/post/${data.id}`}
-        className="flex flex-col overflow-hidden rounded-lg"
+        className="flex w-72 flex-col overflow-hidden rounded-lg"
       >
         <div className="relative h-44 overflow-hidden">
           <BlurImage
             alt={data.title ?? 'Card thumbnail'}
             width={500}
             height={400}
-            className="h-44 object-cover transition-colors group-hover:grayscale"
+            className="h-44 object-cover transition-colors  group-hover:grayscale"
             src={data.image ?? '/post-placeholder.jpg'}
             placeholder="blur"
             blurDataURL={data.imageBlurhash ?? placeholderBlurhash}
           />
         </div>
         <div className="space-y-2 border-t p-4">
-          <div className="flex flex-wrap items-center gap-y-1 overflow-hidden">
-            <div className="flex items-center gap-x-2">
-              <div className="flex gap-x-1">
-                <Image
-                  width={48}
-                  height={48}
-                  src={data.site?.logo ?? '/default-site-logo.jpg'}
-                  alt=""
-                  className="h-5 w-5 flex-none rounded-full bg-background/10 transition-colors group-hover:grayscale"
-                  placeholder="blur"
-                  blurDataURL={data.imageBlurhash ?? placeholderBlurhash}
-                />
-              </div>
-              <h3 className="text-sm font-semibold leading-6 text-primary transition-colors group-hover:text-muted-foreground">
+          <div className="flex flex-row items-center justify-between gap-x-2">
+            <div className="flex gap-x-1">
+              <Image
+                width={48}
+                height={48}
+                src={data.site?.logo ?? '/default-site-logo.jpg'}
+                alt=""
+                className="h-5 w-5 flex-none rounded-full bg-background/10 transition-colors group-hover:grayscale"
+                placeholder="blur"
+                blurDataURL={data.imageBlurhash ?? placeholderBlurhash}
+              />
+              <h3 className="truncate text-sm font-semibold leading-6 text-primary transition-colors group-hover:text-muted-foreground">
                 <span className="absolute inset-0" />
                 {data.site?.name}
               </h3>
             </div>
+            <Icons.file className="h-5 w-5 text-alternate" aria-hidden="true" />
           </div>
-          <h3 className="my-0 line-clamp-2 text-lg font-semibold leading-6 text-foreground">
+          <h3 className="my-0 line-clamp-2 text-balance text-lg font-semibold leading-6 text-foreground">
             {data.title ?? 'Draft post without a title'}
           </h3>
         </div>
@@ -77,12 +76,15 @@ export default function PostCard({ data, teamSlug }: PostCardProps) {
             <span className="flex flex-row items-center gap-1">
               Visit post
               {''}
-              <Icons.arrowSquareOut className="ml-1 h-4 w-4 text-alternate" />
+              <Icons.arrowSquareOut
+                className="ml-1 h-4 w-4 text-alternate"
+                aria-hidden="true"
+              />
             </span>
           </a>
         </div>
       ) : (
-        <span className="absolute bottom-4 mx-4 rounded-sm border border-alternate px-1 text-sm font-medium text-alternate">
+        <span className="absolute bottom-4 mx-4 rounded-sm border border-muted-foreground px-1 text-sm font-medium text-muted-foreground">
           Draft
         </span>
       )}

diff --git a/apps/ai/src/components/publish/posts.tsx b/apps/ai/src/components/publish/posts.tsx
@@ -1,6 +1,8 @@
 import React from 'react';
 import { redirect } from 'next/navigation';
 
+import { ScrollArea, ScrollBar } from '@av/ui/scroll-area';
+
 import { authOptions } from '#/lib/auth';
 import { db } from '#/lib/db';
 import { getTeam } from '#/lib/operations/teams/get-current-team';
@@ -12,9 +14,15 @@ interface PostsProps {
   siteId?: string;
   limit?: number;
   teamSlug: string;
+  published?: boolean;
 }
 
-export default async function Posts({ siteId, limit, teamSlug }: PostsProps) {
+export default async function Posts({
+  siteId,
+  limit,
+  teamSlug,
+  published,
+}: PostsProps) {
   const team = await getTeam(teamSlug);
   if (!team) {
     redirect(authOptions?.pages?.signIn ?? '/login');
@@ -24,6 +32,7 @@ export default async function Posts({ siteId, limit, teamSlug }: PostsProps) {
     where: {
       teamId: team.id,
       ...(siteId ? { siteId } : {}),
+      ...(published !== undefined ? { published } : {}),
     },
     orderBy: {
       updatedAt: 'desc',
@@ -35,10 +44,15 @@ export default async function Posts({ siteId, limit, teamSlug }: PostsProps) {
   });
 
   return posts.length > 0 ? (
-    <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
-      {posts.map((post) => (
-        <PostCard key={post.id} data={post} teamSlug={teamSlug} />
-      ))}
+    <div className="relative">
+      <ScrollArea className="max-w-7xl whitespace-nowrap rounded-md border">
+        <div className="flex space-x-4 pb-4">
+          {posts.map((post) => (
+            <PostCard key={post.id} data={post} teamSlug={teamSlug} />
+          ))}
+        </div>
+        <ScrollBar orientation="horizontal" />
+      </ScrollArea>
     </div>
   ) : (
     <div className="flex flex-col items-start space-x-4">

diff --git a/apps/ai/src/components/publish/site-card.tsx b/apps/ai/src/components/publish/site-card.tsx
@@ -4,6 +4,7 @@ import type { Site } from '@prisma/client';
 
 import Link from 'next/link';
 
+import { Card, CardContent, CardHeader, CardTitle } from '@av/ui/card';
 import { Icons } from '@av/ui/icons';
 import { APP_BP } from '@av/utils';
 
@@ -19,44 +20,31 @@ interface SiteCardProps {
 export default function SiteCard({ data, teamSlug }: SiteCardProps) {
   const url = `${data.subdomain}.${env.NEXT_PUBLIC_ROOT_DOMAIN}`;
   return (
-    <div
-      key={data.name}
-      className="group relative isolate flex flex-col justify-end overflow-hidden rounded-lg border px-4 pb-4 pt-48"
-    >
+    <div className="group w-72 bg-card pb-6">
       <Link href={`${APP_BP}/${teamSlug}/workspace/publish/site/${data.id}`}>
-        <BlurImage
-          src={data.image ?? '/site-placeholder.jpg'}
-          alt={data.name ?? 'Card thumbnail'}
-          width={500}
-          height={400}
-          className="absolute inset-0 -z-10 h-full w-full object-cover transition-colors group-hover:grayscale"
-          placeholder="blur"
-          blurDataURL={data.imageBlurhash ?? placeholderBlurhash}
-        />
-        <div className="absolute inset-0 -z-10 bg-gradient-to-t from-background via-background/60" />
-        <div className="absolute inset-0 -z-10 rounded-2xl ring-1 ring-inset ring-background/10" />
-
-        <div className="flex flex-wrap items-center gap-y-1 overflow-hidden">
-          <div className="flex items-center gap-x-2">
-            <div className="flex gap-x-1">
+        <Card key={data.name}>
+          <CardHeader className="pb-3">
+            <CardTitle className="flex flex-row items-center justify-between">
               <BlurImage
                 width={48}
                 height={48}
                 src={data.logo ?? '/default-site-logo.jpg'}
                 alt=""
-                className="h-6 w-6 flex-none rounded-full bg-background/10 group-hover:grayscale"
+                className="h-8 w-8 flex-none rounded-full transition-colors group-hover:grayscale"
                 placeholder="blur"
                 blurDataURL={data.imageBlurhash ?? placeholderBlurhash}
               />
-            </div>
-            <h3 className="text-lg font-semibold leading-6 text-primary transition-colors group-hover:text-foreground">
-              <span className="absolute inset-0" />
+              <Icons.browser className="h-5 w-5 text-alternate" />
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <p className="truncate text-lg font-semibold transition-colors group-hover:text-foreground">
               {data.name}
-            </h3>
-          </div>
-        </div>
+            </p>
+          </CardContent>
+        </Card>
       </Link>
-      <div className="mt-2 flex w-full justify-between space-x-4">
+      <div className="flex w-full justify-between space-x-4 px-6">
         <a
           href={
             process.env.NEXT_PUBLIC_VERCEL_ENV
@@ -65,7 +53,8 @@ export default function SiteCard({ data, teamSlug }: SiteCardProps) {
           }
           target="_blank"
           rel="noreferrer"
-          className="truncate rounded-md py-2 text-xs text-muted-foreground underline underline-offset-4 transition-colors group-hover:text-foreground"
+          aria-label={`Open ${data.name} in a new tab`}
+          className="truncate rounded-md pb-1 text-xs text-muted-foreground underline underline-offset-4 transition-colors group-hover:text-foreground"
         >
           <span className="flex flex-row items-center gap-1">
             {url}

diff --git a/apps/ai/src/components/publish/sites.tsx b/apps/ai/src/components/publish/sites.tsx
@@ -1,5 +1,8 @@
 import { redirect } from 'next/navigation';
 
+import { ScrollArea } from '@av/ui/scroll-area';
+import { ScrollBar } from '@av/ui/scroll-bar';
+
 import { authOptions } from '#/lib/auth';
 import { db } from '#/lib/db';
 import { getTeam } from '#/lib/operations/teams/get-current-team';
@@ -31,10 +34,15 @@ export default async function Sites({ teamSlug, limit }: SitesProps) {
   });
 
   return sites.length > 0 ? (
-    <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
-      {sites.map((site) => (
-        <SiteCard key={site.id} data={site} teamSlug={teamSlug} />
-      ))}
+    <div className="relative">
+      <ScrollArea className="max-w-7xl whitespace-nowrap rounded-md border">
+        <div className="flex space-x-4 pb-4">
+          {sites.map((site) => (
+            <SiteCard key={site.id} data={site} teamSlug={teamSlug} />
+          ))}
+        </div>
+        <ScrollBar orientation="horizontal" />
+      </ScrollArea>
     </div>
   ) : (
     <div className="mt-20 flex flex-col items-start space-x-4">

diff --git a/packages/ui/package.json b/packages/ui/package.json
@@ -23,6 +23,8 @@
     "./navigation-menu": "./src/navigation-menu.tsx",
     "./popover": "./src/popover.tsx",
     "./radio-group": "./src/radio-group.tsx",
+    "./scroll-area": "./src/scroll-area.tsx",
+    "./scroll-bar": "./src/scroll-area.tsx",
     "./select": "./src/select.tsx",
     "./separator": "./src/separator.tsx",
     "./sheet": "./src/sheet.tsx",
@@ -56,6 +58,7 @@
     "@radix-ui/react-navigation-menu": "^1.1.4",
     "@radix-ui/react-popover": "^1.0.7",
     "@radix-ui/react-radio-group": "^1.1.3",
+    "@radix-ui/react-scroll-area": "^1.0.5",
     "@radix-ui/react-select": "^2.0.0",
     "@radix-ui/react-separator": "^1.0.3",
     "@radix-ui/react-slot": "^1.0.2",