@igstack/app-catalog-frontend-core 6.10.3 → 6.11.0

package/src/modules/appCatalog/ui/detail/CommunityInput.tsx

@@ -6,12 +6,13 @@ import { cn } from '~/lib/utils'
 import { Button } from '~/ui/button'
 import {
   attachmentUrl,
+  draftSlugOf,
   readAttachments,
   readDraft,
   writeAttachments,
   writeDraft,
 } from './communityDraft'
-import type { PendingImage } from './communityDraft'
+import type { CommentTarget, PendingImage } from './communityDraft'
 import { formatCommunityError } from './communityError'
 
 const MAX_HEIGHT = 200
@@ -71,20 +72,21 @@ async function upload(files: File[]): Promise<string[] | string> {
  * paperclip, paste or drop, and a screenshot alone is a valid note.
  */
 export function CommunityInput({
-  appSlug,
+  target,
   appName,
   ref,
 }: {
-  appSlug: string
+  target: CommentTarget
   appName: string
   ref?: React.Ref<CommunityInputHandle>
 }) {
   const trpc = useTRPC()
   const queryClient = useQueryClient()
+  const draftSlug = draftSlugOf(target)
   // Seeded from storage so a draft survives the tab panel unmounting under it.
-  const [text, setText] = React.useState(() => readDraft(appSlug))
+  const [text, setText] = React.useState(() => readDraft(draftSlug))
   const [images, setImages] = React.useState<PendingImage[]>(() =>
-    readAttachments(appSlug),
+    readAttachments(draftSlug),
   )
   const [sent, setSent] = React.useState(false)
   // Counts successful sends, so a click on Send hands focus back every time.
@@ -121,8 +123,11 @@ export function CommunityInput({
     return () => mq.removeEventListener('change', handler)
   }, [])
 
-  React.useEffect(() => writeDraft(appSlug, text), [appSlug, text])
-  React.useEffect(() => writeAttachments(appSlug, images), [appSlug, images])
+  React.useEffect(() => writeDraft(draftSlug, text), [draftSlug, text])
+  React.useEffect(
+    () => writeAttachments(draftSlug, images),
+    [draftSlug, images],
+  )
 
   // The class goes on the form, whose className React never rewrites, and
   // is removed and re-added with a reflow between so a second call restarts
@@ -153,7 +158,7 @@ export function CommunityInput({
         setSent(true)
         setSends((n) => n + 1)
         void queryClient.invalidateQueries({
-          queryKey: trpc.feedback.list.queryKey({ resourceSlug: appSlug }),
+          queryKey: trpc.feedback.list.queryKey(target),
         })
       },
     }),
@@ -227,7 +232,7 @@ export function CommunityInput({
     // Merge into both state and persisted draft so unmount restores it.
     setImages((current) => {
       const updated = [...current, ...newImages].slice(0, MAX_ATTACHMENTS)
-      writeAttachments(appSlug, updated)
+      writeAttachments(draftSlug, updated)
       return updated
     })
     if (files.length > room)
@@ -242,7 +247,7 @@ export function CommunityInput({
     if (!canSend || add.isPending || uploading) return
     const body = text.trim()
     add.mutate({
-      resourceSlug: appSlug,
+      ...target,
       ...(body ? { body } : {}),
       ...(images.length > 0 ? { attachmentIds: images.map((i) => i.id) } : {}),
     })

package/src/modules/appCatalog/ui/detail/CommunitySection.tsx

@@ -3,6 +3,7 @@ import React from 'react'
 import { CommentsFeed } from './CommentsFeed'
 import { CommentsHelp } from './CommentsHelp'
 import { CommunityInput } from './CommunityInput'
+import type { CommentTarget } from './communityDraft'
 import type { CommunityInputHandle } from './CommunityInput'
 
 export type CommunitySectionHandle = CommunityInputHandle
@@ -15,12 +16,13 @@ const NO_CLAIMS: Claim[] = []
  * as one feed.
  */
 export function CommunitySection({
-  appSlug,
+  target,
   appName,
   claims = NO_CLAIMS,
   ref,
 }: {
-  appSlug: string
+  target: CommentTarget
+  /** The entry's or the tool's name, for the input's label. */
   appName: string
   claims?: Claim[]
   ref?: React.Ref<CommunitySectionHandle>
@@ -28,14 +30,17 @@ export function CommunitySection({
   const headingId = React.useId()
   return (
     <section className="behind-group">
-      <CommunityInput ref={ref} appSlug={appSlug} appName={appName} />
+      <CommunityInput ref={ref} target={target} appName={appName} />
       <div className="comments-head">
         <h2 id={headingId} className="behind-group__title">
           Comments
         </h2>
-        <CommentsHelp appSlug={appSlug} appName={appName} />
+        <CommentsHelp
+          appSlug={'resourceSlug' in target ? target.resourceSlug : undefined}
+          appName={appName}
+        />
       </div>
-      <CommentsFeed appSlug={appSlug} claims={claims} labelledBy={headingId} />
+      <CommentsFeed target={target} claims={claims} labelledBy={headingId} />
     </section>
   )
 }

package/src/modules/appCatalog/ui/detail/communityDraft.ts

@@ -78,3 +78,19 @@ export function writeAttachments(slug: string, images: PendingImage[]): void {
 export function attachmentUrl(id: string): string {
   return `/api/feedback-attachments/${id}`
 }
+
+/** What a comment is about: an official catalog entry, or a community tool. */
+export type CommentTarget =
+  | { resourceSlug: string }
+  | { communityToolSlug: string }
+
+/**
+ * The draft's storage slug. An entry keeps its bare slug, so drafts written
+ * before tools had comments still load; a tool's is prefixed, so a tool and an
+ * entry that share a slug never share a draft.
+ */
+export function draftSlugOf(target: CommentTarget): string {
+  return 'resourceSlug' in target
+    ? target.resourceSlug
+    : `tool:${target.communityToolSlug}`
+}

package/src/modules/appCatalog/ui/detail/composeComments.ts

@@ -23,6 +23,7 @@ export interface CommentEntry {
 const FEEDBACK_ORIGIN = 'feedback:'
 
 function noteBadge(note: Note, linked: Claim[]): CommentBadge {
+  if (note.isSystem) return null
   if (note.status === null) return 'pending'
   if (linked.some((c) => c.status === 'review')) return 'pending'
   if (note.status === 'acknowledged') return null

package/src/modules/appCatalog/ui/detail/useCommunityToolCount.ts

@@ -0,0 +1,18 @@
+import { useQuery } from '@tanstack/react-query'
+import { useTRPC } from '~/api/infra/trpc'
+
+/**
+ * How many live community tools are tagged with this app. One query for the
+ * whole catalog, so switching cards asks nothing new. Zero while loading, and
+ * when the deployment has community tools turned off.
+ */
+export function useCommunityToolCount(appSlug: string): number {
+  const trpc = useTRPC()
+  const { data: config } = useQuery(trpc.communityTools.config.queryOptions())
+  const { data: counts } = useQuery(
+    trpc.communityTools.countByApp.queryOptions(undefined, {
+      enabled: config?.enabled === true,
+    }),
+  )
+  return counts?.[appSlug] ?? 0
+}

package/src/modules/appCatalog/ui/layout/AppCatalogLayout.tsx

@@ -3,7 +3,7 @@ import type { QueryClient } from '@tanstack/react-query'
 import type { TRPCClient } from '@trpc/client'
 import { AppCatalogProvider } from '~/modules/appCatalog/context/AppCatalogContext'
 import { AppCatalogFiltersProvider } from '~/modules/appCatalog/ui/context/AppCatalogFiltersContext'
-import { ViewToggle } from '~/modules/appCatalog/ui/components/ViewToggle'
+import { SectionTabs } from '~/modules/appCatalog/ui/components/SectionTabs'
 import { MainLayout } from '~/ui/layout/MainLayout'
 import { TopLevelProviders } from '~/ui/layout/TopLevelProviders'
 
@@ -24,7 +24,7 @@ export function AppCatalogLayout({
     <TopLevelProviders queryClient={queryClient} trpcClient={trpcClient}>
       <AppCatalogProvider>
         <AppCatalogFiltersProvider>
-          <MainLayout headerMiddle={headerMiddle ?? <ViewToggle />}>
+          <MainLayout headerMiddle={headerMiddle ?? <SectionTabs />}>
             {/* <Breadcrumb className="pb-4">*/}
             {/*  <BreadcrumbList>*/}
             {/*    <BreadcrumbItem>*/}

package/src/modules/auth/AuthContext.tsx

@@ -56,11 +56,17 @@ export function AuthProvider({ children }: { children: React.ReactNode }) {
         if (response.ok) {
           const data = await response.json()
           setSession(data)
-          setUser(data?.user || null)
-          if (data?.user) {
+          const userWithAdmin = data?.user
+            ? {
+                ...data.user,
+                isAdmin: data.isAdmin ?? data.user.isAdmin ?? false,
+              }
+            : null
+          setUser(userWithAdmin)
+          if (userWithAdmin) {
             localStorage.setItem(
               AUTH_USER_STORAGE_KEY,
-              JSON.stringify(data.user),
+              JSON.stringify(userWithAdmin),
             )
           } else {
             localStorage.removeItem(AUTH_USER_STORAGE_KEY)

package/src/modules/auth/ui/LoginModal.tsx

@@ -14,7 +14,7 @@ import { LoginPage } from './LoginPage'
  * Can be opened from anywhere using useAuthModal hook
  */
 export function LoginModal() {
-  const { isOpen, close } = useAuthModal()
+  const { isOpen, close, redirectUrl } = useAuthModal()
 
   return (
     <Dialog
@@ -25,7 +25,12 @@ export function LoginModal() {
         }
       }}
     >
-      <DialogContent className="w-full max-w-md">
+      <DialogContent
+        className="w-full max-w-md"
+        data-testid="login-modal"
+        // Where the provider returns the visitor; readable in tests and devtools.
+        data-return-to={redirectUrl}
+      >
         <DialogHeader>
           <DialogTitle>Sign In</DialogTitle>
           <DialogDescription>

package/src/modules/communityTools/likedBy.ts

@@ -0,0 +1,32 @@
+import type { CommunityTool } from '@igstack/app-catalog-shared-core'
+
+/** How many likers the tooltip names; the rest are a count. */
+const NAMED = 8
+
+/**
+ * "Liked by you, A, B and 3 others": you first, then up to eight colleagues,
+ * newest first, then how many more.
+ */
+export function likedByText(
+  tool: Pick<CommunityTool, 'likes' | 'likedByMe' | 'likedBy'>,
+): string {
+  if (tool.likes === 0) return 'No likes yet'
+  const names = [
+    ...(tool.likedByMe ? ['you'] : []),
+    ...tool.likedBy.slice(0, NAMED),
+  ]
+  const others = tool.likes - names.length
+  if (others > 0) {
+    return `Liked by ${names.join(', ')} and ${others} ${others === 1 ? 'other' : 'others'}`
+  }
+  const last = names.pop()
+  return names.length > 0
+    ? `Liked by ${names.join(', ')} and ${last}`
+    : `Liked by ${last}`
+}
+
+/** The tool as it reads once I liked it, or took the like back. */
+export function withLike(tool: CommunityTool, liked: boolean): CommunityTool {
+  if (tool.likedByMe === liked) return tool
+  return { ...tool, likedByMe: liked, likes: tool.likes + (liked ? 1 : -1) }
+}

package/src/modules/communityTools/timeAgo.ts

@@ -0,0 +1,16 @@
+const DAY_MS = 24 * 60 * 60 * 1000
+
+/** How long ago, in calendar days and up: "today", "3 days ago", "2 months ago". */
+export function timeAgo(iso: string, now: Date = new Date()): string {
+  const day = (d: Date) => Date.UTC(d.getFullYear(), d.getMonth(), d.getDate())
+  const days = Math.max(0, Math.round((day(now) - day(new Date(iso))) / DAY_MS))
+  if (days === 0) return 'today'
+  if (days === 1) return 'yesterday'
+  if (days < 31) return `${days} days ago`
+  if (days < 365) {
+    const months = Math.floor(days / 30)
+    return months === 1 ? '1 month ago' : `${months} months ago`
+  }
+  const years = Math.floor(days / 365)
+  return years === 1 ? '1 year ago' : `${years} years ago`
+}

package/src/modules/communityTools/ui/CardScreenshot.tsx

@@ -0,0 +1,124 @@
+import type { CommunityTool } from '@igstack/app-catalog-shared-core'
+import { Camera, ExternalLink, ImageOff, Maximize2 } from 'lucide-react'
+import { useState } from 'react'
+import { ScreenshotGallery } from '~/modules/appCatalog/ui/components/ScreenshotGallery'
+import { cn } from '~/lib/utils'
+import { screenshotUrl } from './FeedRow'
+
+/**
+ * The 16:10 box every state shares, so swapping one for another moves nothing.
+ * Capped in height, so how to use it and who to ask stay above the fold; the
+ * top of the page, where its title is, is what shows.
+ */
+const BOX =
+  'relative flex aspect-[16/10] max-h-[320px] w-full items-center justify-center overflow-hidden rounded-[14px] border border-border bg-muted shadow-sm'
+
+export function formatCardDate(iso: string): string {
+  return new Date(iso).toLocaleDateString('en-GB', {
+    day: 'numeric',
+    month: 'short',
+    year: 'numeric',
+  })
+}
+
+/**
+ * The tool's screenshot, full width: a click opens the site, like the title
+ * block, and the corner button enlarges it in the screenshot viewer. A tool
+ * with none yet shows a placeholder in the same box, not a link: "still
+ * capturing" while its first visit is to come, otherwise "no screenshot".
+ */
+export function CardScreenshot({
+  tool,
+  capturing,
+}: {
+  tool: CommunityTool
+  /** A first screenshot is on its way and still worth waiting for. */
+  capturing: boolean
+}) {
+  const [open, setOpen] = useState(false)
+  const { screenshotId, capturedAt } = tool
+
+  if (!screenshotId) {
+    return (
+      <figure data-testid="card-screenshot" className="mt-[22px]">
+        <div
+          data-testid="card-screenshot-box"
+          data-state={capturing ? 'capturing' : 'missing'}
+          aria-busy={capturing || undefined}
+          className={cn(
+            BOX,
+            'flex-col gap-2.5 px-6 text-center text-sm font-semibold text-muted-foreground',
+          )}
+        >
+          {capturing ? (
+            <>
+              <Camera aria-hidden="true" className="size-7 animate-pulse" />
+              Taking a screenshot of the site…
+            </>
+          ) : (
+            <>
+              <ImageOff aria-hidden="true" className="size-7" />
+              No screenshot. The site may need a login, or it did not load.
+            </>
+          )}
+        </div>
+        <figcaption className="mt-2 text-[12.5px] font-semibold text-muted-foreground">
+          {capturing ? 'Usually under a minute' : 'Open the site to see it'}
+        </figcaption>
+      </figure>
+    )
+  }
+
+  return (
+    <figure data-testid="card-screenshot" className="mt-[22px]">
+      <div
+        data-testid="card-screenshot-box"
+        data-state="captured"
+        className={BOX}
+      >
+        <a
+          href={tool.url}
+          target="_blank"
+          rel="noopener noreferrer"
+          aria-label={`Open ${tool.name} in a new tab`}
+          data-testid="card-screenshot-link"
+          className="group/shot block size-full rounded-[14px] focus-visible:outline-2 focus-visible:-outline-offset-4 focus-visible:outline-ring"
+        >
+          <img
+            src={screenshotUrl(screenshotId, 1280)}
+            alt={`Screenshot of ${tool.name}`}
+            className="size-full object-cover object-left-top"
+          />
+          <span className="absolute inset-0 flex items-center justify-center bg-black/0 transition-colors group-focus-visible/shot:bg-black/20 group-hover/shot:bg-black/20">
+            <span className="inline-flex items-center gap-1.5 rounded-lg bg-primary px-3.5 py-2 text-sm font-extrabold text-primary-foreground opacity-0 shadow-sm transition-opacity group-focus-visible/shot:opacity-100 group-hover/shot:opacity-100">
+              Open site
+              <ExternalLink aria-hidden="true" className="size-4" />
+            </span>
+          </span>
+        </a>
+        {/* Beside the link, not in it: enlarging never opens the site. */}
+        <button
+          type="button"
+          aria-label={`Enlarge screenshot of ${tool.name}`}
+          title="Enlarge"
+          onClick={() => setOpen(true)}
+          className="absolute top-3 right-3 inline-flex size-8 items-center justify-center rounded-lg bg-black/65 text-white hover:bg-black/80 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
+        >
+          <Maximize2 aria-hidden="true" className="size-4" />
+        </button>
+      </div>
+      {capturedAt && (
+        <figcaption className="mt-2 text-[12.5px] font-semibold text-muted-foreground">
+          Screenshot captured {formatCardDate(capturedAt)}
+        </figcaption>
+      )}
+      <ScreenshotGallery
+        app={{ displayName: tool.name }}
+        screenshotIds={[screenshotId]}
+        open={open}
+        onOpenChange={setOpen}
+        title={`${tool.name} screenshot`}
+      />
+    </figure>
+  )
+}

package/src/modules/communityTools/ui/CardTitleBlock.tsx

@@ -0,0 +1,58 @@
+import type { CommunityTool } from '@igstack/app-catalog-shared-core'
+import { ExternalLink, Globe } from 'lucide-react'
+import { cn } from '~/lib/utils'
+import { screenshotUrl } from './FeedRow'
+import { LifecycleBadge, UnreviewedBadge } from './LifecycleBadge'
+
+/**
+ * The card's door: favicon (a globe when the site has none), name, badges and
+ * address, all one link that opens the site in a new tab.
+ */
+export function CardTitleBlock({ tool }: { tool: CommunityTool }) {
+  const archived = tool.lifecycle.state === 'archived'
+  return (
+    <a
+      href={tool.url}
+      target="_blank"
+      rel="noopener noreferrer"
+      data-testid="card-title-block"
+      className={cn(
+        'group/door inline-flex min-w-0 items-center gap-[15px] rounded-[14px] border border-border bg-primary/[0.025] px-[17px] py-[11px] transition-colors',
+        'hover:border-primary/40 hover:bg-primary/[0.07] focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring',
+        archived && 'opacity-70 grayscale',
+      )}
+    >
+      <span className="inline-flex size-12 shrink-0 items-center justify-center overflow-hidden rounded-xl border border-border bg-card text-muted-foreground">
+        {tool.faviconId ? (
+          <img
+            src={screenshotUrl(tool.faviconId, 64)}
+            alt=""
+            className="size-7"
+          />
+        ) : (
+          <Globe aria-hidden="true" className="size-6" strokeWidth={1.75} />
+        )}
+      </span>
+      <span className="flex min-w-0 flex-col gap-0.5">
+        <span className="flex flex-wrap items-center gap-x-3 gap-y-1">
+          <span
+            data-testid="card-tool-name"
+            className="font-serif text-[26px] leading-tight font-semibold"
+          >
+            {tool.name}
+          </span>
+          <LifecycleBadge lifecycle={tool.lifecycle} />
+          {!tool.reviewed && <UnreviewedBadge />}
+        </span>
+        <span className="truncate font-mono text-[13px] text-muted-foreground">
+          {tool.host}
+        </span>
+        <span className="sr-only">(opens in a new tab)</span>
+      </span>
+      <ExternalLink
+        aria-hidden="true"
+        className="size-[18px] shrink-0 self-start text-muted-foreground group-hover/door:text-primary"
+      />
+    </a>
+  )
+}