create-mithaq 0.1.1 → 0.2.1

package/template/templates/features/courses/enrollments/enrollments.ts

@@ -0,0 +1,309 @@
+import { conflict, defaultOperations, folderOf, invalid, type Ctx, type FilterOptions, type WriteTools } from 'mithaq'
+import { defineKayan, organization, serverTargets } from '@asas/mithaq'
+import { currentOrganization, readsPast, user as actor } from '@asas/mithaq/roles/tenant-access.ts'
+import { activity, appPage, danger, backofficeList, backofficeRecord } from '@asas/mithaq/mithaq/pages.ts'
+import { sessions } from '../sessions/sessions.ts'
+import { holdSeats, seatsTaken, sessionHeld } from '../sessions/seats.ts'
+// add-on: settings
+import { sql } from 'mithaq/drizzle'
+import type { NodePgDatabase } from 'mithaq/drizzle/node-postgres'
+// end add-on: settings
+
+const ui = folderOf(new URL('./ui/', import.meta.url))
+const portalUi = folderOf(new URL('../portal/ui/', import.meta.url))
+/** A portal page in its shell, which draws the portal's own nav, over its single column. */
+const portalPage = <const Main extends readonly unknown[]>(main: Main) => ({ shell: 'top', header: [{ title: {} }], main: [{ layout: 'page', main }] }) as const
+const sessionCell = ui('session-cell.tsx#SessionCell')
+const enrollment = [{ section: 'enrollment', label: { en: 'Enrollment', ar: 'التسجيل' }, fields: ['session', 'student'] }] as const
+
+/**
+ * The seats an actor reads, edits and deletes, inside its active organization:
+ * every seat of its organization for an actor holding
+ * `enrollments.others` and for backoffice staff, its own seats alone for anyone
+ * else. That is the student, whose enrollment keys would otherwise reach every
+ * other student's seat, and a custom role a tenant writes without the key.
+ * Another's seat answers 404, as a missing row does.
+ *
+ * The id is read off the actor as an own key, and an actor carrying none reaches
+ * no seat. Every read answers from it, a session's join of its enrollments
+ * included.
+ */
+const ownId = (user: unknown) => {
+  const actor = user && typeof user === 'object' ? (user as Record<string, unknown>) : undefined
+  const id = actor && Object.hasOwn(actor, 'id') ? actor.id : undefined
+  return typeof id === 'string' && id ? id : undefined
+}
+const ownSeats = ({ user }: { user: unknown }) => {
+  if (readsPast(user, 'enrollments.others')) return true
+  const id = ownId(user)
+  return id ? { student: { equals: id } } : false
+}
+
+/**
+ * Whether a write names another person as a seat's student for an actor that
+ * writes its own seats alone. Refused on a create and on an update, so a seat
+ * is never made for, or handed to, someone the actor may not write for.
+ */
+const namesAnother = ({ user, data }: { user: unknown; data?: unknown }) =>
+  !readsPast(user, 'enrollments.others') && !!data && typeof data === 'object' && Object.hasOwn(data, 'student')
+  && (data as { student?: unknown }).student !== ownId(user)
+
+/**
+ * Whom a seat's student picker offers: the people holding the student role in
+ * the active organization, a teacher who also studies among them. It narrows
+ * what the actor's own read of people answers and never widens it, so an
+ * instructor is offered the students it already reads and not itself.
+ */
+const students: FilterOptions = async ({ user, tx }) => {
+  const active = currentOrganization(user)
+  if (!active) return false
+  const held = await serverTargets.drizzle.find({ tx, kayan: 'memberRoles', args: { limit: 0, page: 1, sort: { field: 'id', direction: 'asc' }, where: { organization: { equals: active }, role: { equals: 'student' } } } })
+  const ids = held.docs.map((row) => row.user).filter((id): id is string => typeof id === 'string')
+  return ids.length ? { id: { in: ids } } : false
+}
+
+/** Not archived, the column read by its name, or across a session's course. */
+const open = (path: string) => ({ or: [{ [path]: { exists: false } }, { [path]: { equals: false } }] })
+
+/** What a seat's session picker offers, and a save is held to: a session open for seats, of a course open too. */
+const openSessions: FilterOptions = () => ({ and: [open('archived'), open('course.archived')] })
+
+/** Whether the actor writes its own seats alone: a student, held to what each course lets its students do. */
+const ownSeatsOnly = (user: unknown) => !readsPast(user, 'enrollments.others')
+
+/** Whether a session is still to start, which a student's enrollment and its cancel both ask. */
+const yetToStart = (startsAt: unknown) => new Date(startsAt as string | Date).getTime() > Date.now()
+
+/**
+ * Whether a session takes this seat. A session the actor may not read is left
+ * to the reference check, which refuses it in the words a missing one gets.
+ * The rest is judged on the session's own columns, whatever the actor is shown:
+ * an archived session, or one of an archived course, takes none; a student
+ * takes a seat only where its course lets students enroll themselves, and only
+ * before the session starts; and a session with a capacity takes no seat past
+ * it, whoever writes, counted under a lock on the session. A seat kept in the
+ * session it already holds takes no new one.
+ */
+const takesSeat = async (ctx: Ctx<{ session?: unknown }>, tools: WriteTools): Promise<Ctx> => {
+  const id = ctx.data.session
+  // An edit of a seat the actor may not reach loaded no row; the store answers it the 404 a missing one gets.
+  if (typeof id !== 'string' || (tools.operation !== 'create' && !ctx.dataBefore)) return ctx
+  if (!(await tools.of(sessions).findByID({ id }).catch(() => null))) return ctx
+  const session = await sessionHeld({ tx: ctx.tx, session: id })
+  if (!session) return ctx
+  // The stored id from here on: a uuid matches in any case, and the lock, the count and the comparison below must not
+  // tell `A0EE…` from `a0ee…`.
+  const held = session.id
+  if (session.archived || session.courseArchived) {
+    throw invalid({
+      message: 'This session is archived, or its course is, so it takes no new seat.',
+      key: 'error.invalid.archived_session',
+      params: { kayan: 'enrollments', field: 'session' },
+    })
+  }
+  if (held === ctx.dataBefore?.session) return ctx
+  if (ownSeatsOnly(ctx.user)) {
+    if (session.selfEnroll !== true) {
+      throw invalid({
+        message: 'Students of this course do not enroll themselves: the school enrolls them.',
+        key: 'error.invalid.enrollment_closed',
+        params: { kayan: 'enrollments', field: 'session' },
+      })
+    }
+    if (!yetToStart(session.startsAt)) {
+      throw invalid({ message: 'This session has started, so it takes no new seat.', key: 'error.invalid.session_started', params: { kayan: 'enrollments', field: 'session' } })
+    }
+  }
+  if (session.capacity !== null) {
+    await holdSeats({ tx: ctx.tx, session: held })
+    if ((await seatsTaken({ session: held, tx: ctx.tx })) >= session.capacity) {
+      throw conflict({ message: 'Every seat of this session is taken.', key: 'error.conflict.session_full', params: { kayan: 'enrollments', field: 'session' } })
+    }
+  }
+  return ctx
+}
+
+/**
+ * A student leaves a session only before it starts: the seat it held stays the
+ * record that it was there. Whoever reads every seat withdraws one at any time.
+ * A seat the actor may not reach loaded no row, and answers the 404 a missing
+ * one does. The start is the session's column, so a seat whose course has since
+ * left the actor's sight is not said to have started.
+ */
+const leavesBeforeStart = async (ctx: Ctx): Promise<Ctx> => {
+  if (!ownSeatsOnly(ctx.user) || !ctx.dataBefore) return ctx
+  const id = ctx.dataBefore.session
+  const session = typeof id === 'string' ? await sessionHeld({ tx: ctx.tx, session: id }) : undefined
+  if (!session || !yetToStart(session.startsAt)) {
+    throw invalid({ message: 'This session has started, so its seat stays.', key: 'error.invalid.session_started', params: { kayan: 'enrollments' } })
+  }
+  return ctx
+}
+
+// add-on: settings
+/**
+ * While the portal is closed for maintenance a student takes and gives back no
+ * seat, whatever calls the server; staff keep working. The organization's
+ * settings are read in the write's own transaction, since a student reads them
+ * as itself and a role might not.
+ */
+// The table and column are written out, as `sessionHeld`'s are; R7g fails on a rename.
+const portalOpen = async (ctx: Ctx): Promise<Ctx> => {
+  if (!ownSeatsOnly(ctx.user) || !ctx.tenant) return ctx
+  const [held] = (await (ctx.tx as NodePgDatabase).execute<{ maintenance: boolean | null }>(sql`select maintenance from settings where organization_id = ${ctx.tenant}`)).rows
+  if (held?.maintenance === true) {
+    throw invalid({ message: 'The portal is closed for maintenance, so no seat changes from it.', key: 'error.invalid.portal_closed', params: { kayan: 'enrollments' } })
+  }
+  return ctx
+}
+// end add-on: settings
+
+export const enrollments = defineKayan({
+  name: 'enrollments',
+  access: {
+    read: ownSeats,
+    create: (args: { user: unknown; data?: unknown }) => !namesAnother(args),
+    update: (args: { user: unknown; data?: unknown }) => (namesAnother(args) ? false : ownSeats(args)),
+    delete: ownSeats,
+  },
+  // What a form says where a second seat of one student in one session is
+  // refused, over the shared words for a unique value taken.
+  messages: {
+    conflict: { unique: { en: 'This student already holds a seat in this session.', ar: 'لهذا الطالب مقعد في هذه الحصة بالفعل.' } },
+  },
+  // A student holds one seat in a session, which is one organization's, so the
+  // organization needs no column in the key. The mark is in it with its nulls
+  // not distinct, so a withdrawn seat makes room for a new one while two
+  // standing seats collide.
+  indexes: [{ fields: ['session', 'student', 'deletedAt'], unique: true, nullsNotDistinct: true }],
+  fields: ({ defaults }) => ({
+    ...defaults,
+    organization,
+    // Read as the session's course and its start on every screen, where a
+    // session alone is titled by its start.
+    //
+    // Both are required, so no write makes a seat for nobody or in nothing, and
+    // a session or a person that holds one is not deleted under it: a required
+    // relationship restricts.
+    session: {
+      kind: 'relationship', label: { en: 'Session', ar: 'الحصة' }, relationTo: () => sessions,
+      filterOptions: openSessions,
+      rules: { required: true },
+      targets: { dashboard: { cell: sessionCell }, portal: { cell: sessionCell }, backoffice: { cell: sessionCell } },
+    },
+    // A create that names no student enrolls the person making it: the runner's
+    // defaults step fills it from the actor, and a field with a default is one a
+    // create may leave out, at the HTTP boundary too. A role without the column's
+    // key is refused the filled value. A student holds it, so its own enrollment
+    // names itself, and `namesAnother` refuses it any other person.
+    student: {
+      kind: 'relationship', label: { en: 'Student', ar: 'الطالب' }, relationTo: 'user',
+      filterOptions: students,
+      rules: { required: true, defaultValue: actor.id },
+    },
+    /**
+     * The field the language names as its soft-delete mark, so a student who
+     * leaves a session is a row this kayan keeps rather than one it removes: an
+     * enrollment is the record that the student was there. It is the one kayan
+     * of this template that takes the mark. Nothing points at an enrollment, so
+     * no child outlives it, and nothing refers to it through a `restrict`
+     * foreign key that a delete would have to release. Nobody supplies the
+     * mark: the runner writes it at the delete.
+     *
+     * `session` and `student` are required, so each restricts, and a session or
+     * a person a marked enrollment still names is not deleted under it.
+     */
+    deletedAt: {
+      kind: 'datetime',
+      label: { en: 'Deleted at', ar: 'تاريخ الحذف' },
+      rules: { providedBy: { create: 'never', update: 'never' } },
+    },
+  }),
+  targets: {
+    // Every organization's rows on the backoffice, read-only, and each row's
+    // record, which only reads. A record is titled by its student, a person the
+    // backoffice reads, where a session is titled only by its start.
+    backoffice: {
+      useAsTitle: 'student',
+      pages: {
+        ...backofficeList('/enrollments', { columns: ['session', 'student', 'organization', 'createdAt'], filters: ['organization', 'session', 'student'], sort: '-createdAt' }),
+        ...backofficeRecord({
+          path: '/enrollments/:id',
+          main: [{ section: 'enrollment', label: { en: 'Enrollment', ar: 'التسجيل' }, fields: ['session', 'student', 'deletedAt'] }],
+        }),
+      },
+    },
+    service: {
+      operations: {
+        ...defaultOperations,
+        create: { ...defaultOperations.create, steps: ({ steps }) => [
+          // add-on: settings
+          portalOpen,
+          // end add-on: settings
+          takesSeat,
+          steps.insert,
+        ] },
+        update: { ...defaultOperations.update, steps: ({ steps }) => [
+          // add-on: settings
+          portalOpen,
+          // end add-on: settings
+          takesSeat,
+          steps.update,
+        ] },
+        delete: { ...defaultOperations.delete, steps: ({ steps }) => [
+          // add-on: settings
+          portalOpen,
+          // end add-on: settings
+          leavesBeforeStart,
+          steps.remove,
+        ] },
+      },
+    },
+    // Titled by the student on the dashboard, as on the backoffice, so a tab and a
+    // heading tell one seat from another; on the portal, where the student is most
+    // often the viewer, by the session.
+    dashboard: {
+      useAsTitle: 'student',
+      description: {
+        en: 'Which student holds a seat in which session.',
+        ar: 'أي طالب يشغل مقعدا في أي حصة.',
+      },
+      pages: {
+        // The same table every kayan's list is. Searched by the student's name,
+        // the one column of a person a tenant reads, and filtered by session,
+        // student and when the student enrolled, as the course list is.
+        list: { path: '/enrollments', page: appPage([{ layout: 'table', main: [{ list: {
+          columns: ['session', 'student', 'createdAt'],
+          filters: ['session', 'student', 'createdAt'],
+          search: ['student.name'],
+        } }] }]) },
+        create: { path: '/enrollments/new', page: appPage([{ layout: 'record', main: [{ form: enrollment }] }]) },
+        // The editor layout, and the one timestamp worth reading here, named and
+        // read-only: when the student enrolled. Not the organization, which on the
+        // dashboard is always the active one.
+        edit: {
+          path: '/enrollments/:id',
+          page: appPage([{
+            layout: 'record',
+            main: [{ form: enrollment }],
+            side: [{ section: 'record', label: { en: 'Record', ar: 'السجل' }, fields: [{ field: 'createdAt', readOnly: true }] }, activity],
+            danger: danger(),
+          }]),
+        },
+      },
+    },
+    portal: {
+      useAsTitle: 'session',
+      pages: {
+        // The viewer's seats, upcoming first, drawn whole by the courses feature's portal.
+        list: { path: '/enrollments', component: portalUi('enrollments.tsx#Enrollments') },
+        // The list's New enrollment, which only staff are offered, with the
+        // student as the dashboard draws it, so an instructor picks whom it
+        // enrolls. A student who opens it by its address and names another is
+        // refused by `namesAnother`; one who names nobody enrolls itself.
+        create: { path: '/enrollments/new', page: portalPage([{ form: ['session', 'student'] }]) },
+        edit: { path: '/enrollments/:id', page: portalPage([{ form: ['session'] }]) },
+      },
+    },
+  },
+})

package/template/templates/{asas/src → features/courses}/enrollments/ui/session-cell.tsx

@@ -1,4 +1,5 @@
-// What an enrollment's session column draws: the session's course by its title, then when it starts, which tells two sessions of one course apart.
+// What an enrollment's session column draws: the session's course by its title, then when it starts, which tells two sessions of one course apart,
+// then where and how it meets.
 // A session is titled by its start and a title is one field, so the course is a second read.
 //
 // The list's own `useRelationshipTitles` keeps only each session's title, the start as text, and not the course it points at, so this cell reads them again:
@@ -9,8 +10,10 @@ import { use } from 'react'
 import { useQuery } from '@tanstack/react-query'
 import type { CellProps, FetchClient, Row } from 'mithaq/admin'
 import { ListContext, useClient, useLocale, useScreen } from 'mithaq/admin/react'
-import { formatDate, noValue, refusalKeyOf, type FoundPage } from '@/components/mithaq/controls.tsx'
-import { findByIds, nameOfRow, titleFieldOf } from '@/components/mithaq/relationship-control.tsx'
+import type { FoundPage } from 'mithaq-admin/control-props.ts'
+import { formatDate, noValue } from 'mithaq-admin/format.tsx'
+import { refusalKeyOf } from 'mithaq-admin/refusal.ts'
+import { findByIds, nameOfRow, titleFieldOf } from 'mithaq-admin/relationship-control.tsx'
 
 /** A refusal is the viewer's access answering, so it reads as no rows; anything else is a failure, and throws for the query to try again. */
 const unread = (thrown: unknown): never[] => {
@@ -36,7 +39,7 @@ const sessionsOf = async ({ client, ids, maxLimit }: { client: FetchClient; ids:
 export function SessionCell({ field, value, row }: CellProps) {
   const client = useClient()
   const { locale, t } = useLocale()
-  const { kayan: { courses }, maxLimit } = useScreen()
+  const { kayan: { courses, sessions: sessionKayan }, maxLimit } = useScreen()
   // A list's page, or the one row a record page draws.
   // Sorted, so the same rows in another order are the same query.
   const ids = [...new Set((use(ListContext)?.page.docs ?? [row]).flatMap((one: Row) => (typeof one[field.name] === 'string' ? [one[field.name] as string] : [])))].sort()
@@ -45,12 +48,18 @@ export function SessionCell({ field, value, row }: CellProps) {
   const session = sessions?.get(value)
   const when = formatDate({ value: session?.startsAt, locale })
   const course = session?.course ? nameOfRow({ row: session.course as Row, title: titleFieldOf(courses), locale }) : undefined
+  // Where and how it meets, each by its option's label in the viewer's locale, where the viewer reads it.
+  const labelOf = (name: string) => {
+    const option = sessionKayan?.fields.find((one) => one.name === name)?.options?.find((one) => one.value === session?.[name])
+    return option?.label[locale]
+  }
+  const place = [labelOf('venue'), labelOf('format')].filter(Boolean).join(' · ')
   // Never the id the column holds, as the relationship cell draws none:
   // loading until the read answers, the server's render among it, a dash
-  // where it failed, and a row the viewer cannot see for a session it may
-  // not read or one of which it may read neither the course nor the start.
+  // where it failed, and not available for a session it may not read or one
+  // of which it may read neither the course nor the start.
   if (!when && !course) {
-    if (sessions) return t('admin.cannotSee', 'You can\'t see this')
+    if (sessions) return t('admin.notAvailable', 'Not available')
     return isError ? '—' : t('admin.loading', 'Loading…')
   }
   // Two lines, the course over its start, so a narrow column wraps each
@@ -60,6 +69,7 @@ export function SessionCell({ field, value, row }: CellProps) {
       {course ? <span className="font-medium">{course}</span> : null}
       {/* One unbroken run, so a narrow column breaks between the course and the date and never inside the date. */}
       {when ? <span className="text-muted-foreground text-xs"><bdi className="whitespace-nowrap">{when}</bdi></span> : null}
+      {place ? <span className="text-muted-foreground text-xs">{place}</span> : null}
     </span>
   )
 }

package/template/templates/{asas/src → features/courses/enrollments}/ui/session-labels.tsx

@@ -10,9 +10,9 @@ import type { ReactNode } from 'react'
 import { useQuery } from '@tanstack/react-query'
 import type { ProviderProps, Row } from 'mithaq/admin'
 import { useClient, useLocale, useScreen } from 'mithaq/admin/react'
-import { formatDate } from '@/components/mithaq/controls.tsx'
-import { nameOfRow, RowLabelContext, titleFieldOf, type UseRowLabel } from '@/components/mithaq/relationship-control.tsx'
-import { coursesOf } from '../enrollments/ui/session-cell.tsx'
+import { formatDate } from 'mithaq-admin/format.tsx'
+import { nameOfRow, RowLabelContext, titleFieldOf, type UseRowLabel } from 'mithaq-admin/relationship-control.tsx'
+import { coursesOf } from './session-cell.tsx'
 
 /** The session's course and its start, or nothing for any other kayan and for a session whose course is not read yet. */
 export const useSessionLabel: UseRowLabel = (target, rows) => {

package/template/templates/features/courses/index.ts

@@ -0,0 +1,8 @@
+import { courses } from './courses/courses.ts'
+import { enrollments } from './enrollments/enrollments.ts'
+import { sessions } from './sessions/sessions.ts'
+
+export const kayan = [courses, sessions, enrollments] as const
+
+// The images a course's reader reads as its cover, which the asas hands the media feature.
+export { coverReads } from './courses/cover-reads.ts'

package/template/templates/features/courses/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "@asas/courses",
+  "version": "0.0.0",
+  "private": true,
+  "type": "module",
+  "exports": {
+    ".": "./index.ts",
+    "./domain/*": "./domain/*",
+    "./portal/*": "./portal/*"
+  },
+  "dependencies": {
+    "@asas/mithaq": "*",
+    "@fontsource-variable/bricolage-grotesque": "^5.3.0",
+    "mithaq": "*",
+    "mithaq-admin": "*",
+    "zod": "^4.6.5"
+  },
+  "devDependencies": {
+    "@types/react": "^19.3.0",
+    "lucide-react": "^1.16.0",
+    "react": "^19.3.0",
+    "@tanstack/react-query": "^5.104.0"
+  }
+}

package/template/templates/features/courses/portal/ui/catalogue.tsx

@@ -0,0 +1,86 @@
+// The portal's catalogue: the courses on offer as cards, searched by title and summary and narrowed by tag, each
+// card opening the course's page.
+import { useState } from 'react'
+import { Search } from 'lucide-react'
+import { useQuery } from '@tanstack/react-query'
+import { useClient, useLocale, useScreen } from 'mithaq/admin/react'
+import { Input } from '@/components/ui/input'
+import { Toggle } from '@/components/ui/toggle'
+import { PortalShell, display } from './shell.tsx'
+import { CardsLoading, CourseCard, ReadFailed } from './parts.tsx'
+import { inLocale } from './rules.ts'
+import { catalogueOf } from './reads.ts'
+
+/** Drawn whole as the courses' list page, so it reads the list itself. */
+export function Catalogue() {
+  const { locale, t } = useLocale()
+  const client = useClient()
+  const screen = useScreen()
+  const read = useQuery({ queryKey: ['portal-catalogue'], queryFn: () => catalogueOf({ client, maxLimit: screen.maxLimit, now: Date.now() }), staleTime: 30_000 })
+  const [term, setTerm] = useState('')
+  const [tag, setTag] = useState<string>()
+  const found = read.data
+  const asked = term.trim().toLocaleLowerCase(locale)
+  const shown = found?.courses.filter((course) =>
+    (!tag || (Array.isArray(course.tags) && course.tags.includes(tag)))
+    && (!asked || [course.title, course.summary].some((one) => typeof one === 'string' && one.toLocaleLowerCase(locale).includes(asked))))
+  const title = t('courses.plural', 'Courses')
+  return (
+    <PortalShell
+      regions={{
+        header: <h1 className={`${display} text-3xl`}>{title}</h1>,
+        main: (
+          <div className="grid gap-5">
+            <div className="grid gap-3">
+              <label className="border-input bg-card focus-within:ring-ring flex h-12 items-center gap-2.5 rounded-full border px-4 focus-within:ring-2">
+                <Search aria-hidden className="text-muted-foreground size-4.5 shrink-0" />
+                <span className="sr-only">{t('portal.search', 'Search courses')}</span>
+                <Input
+                  type="search"
+                  value={term}
+                  onChange={(event) => setTerm(event.target.value)}
+                  placeholder={t('portal.search', 'Search courses')}
+                  className="h-auto border-0 bg-transparent p-0 text-[15px] shadow-none focus-visible:ring-0 dark:bg-transparent"
+                />
+              </label>
+              {found?.tags.size ? (
+                <div role="group" aria-label={t('portal.byTag', 'Filter by tag')} className="flex flex-wrap gap-2">
+                  <Toggle variant="outline" pressed={!tag} onPressedChange={() => setTag(undefined)} className="aria-pressed:bg-foreground aria-pressed:text-background h-11 rounded-full px-4">
+                    {t('portal.allTags', 'All')}
+                  </Toggle>
+                  {[...found.tags.values()].map((one) => (
+                    <Toggle
+                      key={String(one.id)}
+                      variant="outline"
+                      pressed={tag === one.id}
+                      onPressedChange={(pressed) => setTag(pressed ? String(one.id) : undefined)}
+                      className="aria-pressed:bg-foreground aria-pressed:text-background h-11 rounded-full px-4"
+                    >
+                      {inLocale(one.name, locale)}
+                    </Toggle>
+                  ))}
+                </div>
+              ) : null}
+            </div>
+            {read.isError ? <ReadFailed retry={() => void read.refetch()} /> : !found || !shown ? <CardsLoading /> : shown.length ? (
+              <div className="grid grid-cols-[repeat(auto-fill,minmax(16rem,1fr))] gap-5">
+                {shown.map((course) => (
+                  <CourseCard
+                    key={String(course.id)}
+                    course={course}
+                    cover={found.covers.get(String(course.cover))}
+                    next={found.next.get(String(course.id))}
+                    tags={found.tags}
+                    href={`${screen.path}/courses/${encodeURIComponent(String(course.id))}`}
+                  />
+                ))}
+              </div>
+            ) : (
+              <p className="text-muted-foreground text-sm">{found.courses.length ? t('portal.noMatch', 'No course matches.') : t('courses.noneOnOffer', 'No courses on offer yet.')}</p>
+            )}
+          </div>
+        ),
+      }}
+    />
+  )
+}