@stacksjs/defaults 0.70.207 → 0.70.208

package/views/dashboard/stores/rbac.ts

@@ -0,0 +1,350 @@
+import { defineStore, derived, registerStoresClient, state } from '@stacksjs/stx'
+
+interface RoleRow {
+  id: number
+  name: string
+  guardName: string
+  description: string | null
+  createdAt: string | null
+}
+
+interface PermissionRow {
+  id: number
+  name: string
+  guardName: string
+  description: string | null
+  createdAt: string | null
+}
+
+interface UserRow {
+  id: number
+  name: string | null
+  email: string | null
+}
+
+/**
+ * RBAC management store — backs the `/management/permissions` page
+ * (stacksjs/stacks#1845). Loads roles, permissions, and users
+ * once on page mount and keeps them in sync via the
+ * `/api/dashboard/rbac/*` endpoints. All mutations follow the
+ * snapshot → optimistic update → API call → rollback-on-failure
+ * shape established by the kanban + ci stores earlier in the
+ * session.
+ *
+ * The two pivot reads (user → roles, role → permissions) are
+ * lazy-loaded per selection because they only matter when the
+ * admin actually opens the relevant tab/row.
+ */
+export const rbacStore = defineStore('rbac', () => {
+  const roles = state<RoleRow[]>([])
+  const permissions = state<PermissionRow[]>([])
+  const users = state<UserRow[]>([])
+
+  // Per-user role memberships, keyed by user id. Lazy-loaded when
+  // the admin picks a user on the Users tab so the page doesn't
+  // burn N+1 round-trips just to show the user list.
+  const userRoles = state<Record<number, string[]>>({})
+  // Per-role permission memberships, keyed by role name (the URL
+  // identifier on the matrix endpoint).
+  const rolePermissions = state<Record<string, string[]>>({})
+
+  const loading = state(true)
+  const loadingPivots = state<Record<string, boolean>>({})
+  const error = state<string | null>(null)
+
+  const hasRoles = derived(() => roles().length > 0)
+  const hasPermissions = derived(() => permissions().length > 0)
+
+  // ─── Initial load ──────────────────────────────────────────────
+
+  async function load(): Promise<void> {
+    loading.set(true)
+    error.set(null)
+    try {
+      const [rolesRes, permsRes, usersRes] = await Promise.all([
+        fetch('/api/dashboard/rbac/roles', { headers: { accept: 'application/json' } }),
+        fetch('/api/dashboard/rbac/permissions', { headers: { accept: 'application/json' } }),
+        fetch('/api/dashboard/rbac/users', { headers: { accept: 'application/json' } }),
+      ])
+      const [rolesData, permsData, usersData] = await Promise.all([
+        rolesRes.json() as Promise<{ roles?: RoleRow[], error?: string }>,
+        permsRes.json() as Promise<{ permissions?: PermissionRow[], error?: string }>,
+        usersRes.json() as Promise<{ users?: UserRow[], error?: string }>,
+      ])
+      // Pick the first error if any of the three failed — the page
+      // renders a single banner rather than three.
+      const firstError = rolesData.error || permsData.error || usersData.error
+      if (firstError)
+        error.set(firstError)
+
+      roles.set(rolesData.roles ?? [])
+      permissions.set(permsData.permissions ?? [])
+      users.set(usersData.users ?? [])
+    }
+    catch (e) {
+      error.set(e instanceof Error ? e.message : String(e))
+    }
+    finally {
+      loading.set(false)
+    }
+  }
+
+  // ─── Role mutations ────────────────────────────────────────────
+
+  async function createRole(input: { name: string, guardName?: string, description?: string }): Promise<RoleRow | null> {
+    try {
+      const res = await fetch('/api/dashboard/rbac/roles', {
+        method: 'POST',
+        headers: { 'content-type': 'application/json', accept: 'application/json' },
+        body: JSON.stringify(input),
+      })
+      if (!res.ok && res.status !== 409) throw new Error(`HTTP ${res.status}`)
+      const data = await res.json() as { role?: RoleRow, error?: string }
+      if (data.error || !data.role) throw new Error(data.error ?? 'Create failed')
+      roles.set([...roles(), data.role])
+      return data.role
+    }
+    catch (e) {
+      error.set(e instanceof Error ? e.message : String(e))
+      return null
+    }
+  }
+
+  async function deleteRole(name: string, guardName: string = 'web'): Promise<boolean> {
+    const snapshot = roles()
+    roles.set(snapshot.filter(r => !(r.name === name && r.guardName === guardName)))
+    // Cascade: a deleted role drops out of every user's role list +
+    // its row in the rolePermissions cache. Mirror the server-side
+    // cascade so the optimistic UI doesn't show stale attachments.
+    const userRolesSnapshot = userRoles()
+    const cleanedUserRoles: Record<number, string[]> = {}
+    for (const [uid, names] of Object.entries(userRolesSnapshot))
+      cleanedUserRoles[Number(uid)] = names.filter(n => n !== name)
+    userRoles.set(cleanedUserRoles)
+
+    const rolePermsSnapshot = rolePermissions()
+    const cleanedRolePerms = { ...rolePermsSnapshot }
+    delete cleanedRolePerms[name]
+    rolePermissions.set(cleanedRolePerms)
+
+    try {
+      const res = await fetch(
+        `/api/dashboard/rbac/roles/${encodeURIComponent(name)}?guard=${encodeURIComponent(guardName)}`,
+        { method: 'DELETE', headers: { accept: 'application/json' } },
+      )
+      if (!res.ok) throw new Error(`HTTP ${res.status}`)
+      return true
+    }
+    catch (e) {
+      // Rollback every cascade we applied optimistically.
+      roles.set(snapshot)
+      userRoles.set(userRolesSnapshot)
+      rolePermissions.set(rolePermsSnapshot)
+      error.set(e instanceof Error ? e.message : String(e))
+      return false
+    }
+  }
+
+  // ─── Permission mutations ──────────────────────────────────────
+
+  async function createPermission(input: { name: string, guardName?: string, description?: string }): Promise<PermissionRow | null> {
+    try {
+      const res = await fetch('/api/dashboard/rbac/permissions', {
+        method: 'POST',
+        headers: { 'content-type': 'application/json', accept: 'application/json' },
+        body: JSON.stringify(input),
+      })
+      if (!res.ok && res.status !== 409) throw new Error(`HTTP ${res.status}`)
+      const data = await res.json() as { permission?: PermissionRow, error?: string }
+      if (data.error || !data.permission) throw new Error(data.error ?? 'Create failed')
+      permissions.set([...permissions(), data.permission])
+      return data.permission
+    }
+    catch (e) {
+      error.set(e instanceof Error ? e.message : String(e))
+      return null
+    }
+  }
+
+  async function deletePermission(name: string, guardName: string = 'web'): Promise<boolean> {
+    const snapshot = permissions()
+    permissions.set(snapshot.filter(p => !(p.name === name && p.guardName === guardName)))
+    // Cascade through the rolePermissions cache: each role drops the
+    // deleted permission from its attached list.
+    const rolePermsSnapshot = rolePermissions()
+    const cleaned: Record<string, string[]> = {}
+    for (const [roleName, names] of Object.entries(rolePermsSnapshot))
+      cleaned[roleName] = names.filter(n => n !== name)
+    rolePermissions.set(cleaned)
+
+    try {
+      const res = await fetch(
+        `/api/dashboard/rbac/permissions/${encodeURIComponent(name)}?guard=${encodeURIComponent(guardName)}`,
+        { method: 'DELETE', headers: { accept: 'application/json' } },
+      )
+      if (!res.ok) throw new Error(`HTTP ${res.status}`)
+      return true
+    }
+    catch (e) {
+      permissions.set(snapshot)
+      rolePermissions.set(rolePermsSnapshot)
+      error.set(e instanceof Error ? e.message : String(e))
+      return false
+    }
+  }
+
+  // ─── User-role pivot ───────────────────────────────────────────
+
+  async function loadUserRoles(userId: number): Promise<void> {
+    if (userRoles()[userId] !== undefined) return
+    const key = `user:${userId}`
+    if (loadingPivots()[key]) return
+    loadingPivots.set({ ...loadingPivots(), [key]: true })
+    try {
+      const res = await fetch(`/api/dashboard/rbac/users/${userId}/roles`, {
+        headers: { accept: 'application/json' },
+      })
+      if (!res.ok) throw new Error(`HTTP ${res.status}`)
+      const data = await res.json() as { roles?: Array<{ name: string }>, error?: string }
+      if (data.error) {
+        userRoles.set({ ...userRoles(), [userId]: [] })
+        return
+      }
+      userRoles.set({
+        ...userRoles(),
+        [userId]: (data.roles ?? []).map(r => r.name),
+      })
+    }
+    catch {
+      // Soft-fail — page shows an empty role list for the user.
+      userRoles.set({ ...userRoles(), [userId]: [] })
+    }
+    finally {
+      const next = { ...loadingPivots() }
+      delete next[key]
+      loadingPivots.set(next)
+    }
+  }
+
+  async function syncUserRoles(userId: number, roleNames: string[], guardName: string = 'web'): Promise<boolean> {
+    const snapshot = userRoles()[userId] ?? []
+    // Optimistic mutation.
+    userRoles.set({ ...userRoles(), [userId]: roleNames })
+    try {
+      const res = await fetch(`/api/dashboard/rbac/users/${userId}/roles`, {
+        method: 'POST',
+        headers: { 'content-type': 'application/json', accept: 'application/json' },
+        body: JSON.stringify({ roles: roleNames, guardName }),
+      })
+      if (!res.ok) throw new Error(`HTTP ${res.status}`)
+      const data = await res.json() as { roles?: Array<{ name: string }>, error?: string }
+      if (data.error) throw new Error(data.error)
+      // Canonical reconciliation — server returns the final list.
+      userRoles.set({
+        ...userRoles(),
+        [userId]: (data.roles ?? []).map(r => r.name),
+      })
+      return true
+    }
+    catch (e) {
+      userRoles.set({ ...userRoles(), [userId]: snapshot })
+      error.set(e instanceof Error ? e.message : String(e))
+      return false
+    }
+  }
+
+  // ─── Role-permission pivot ─────────────────────────────────────
+
+  async function loadRolePermissions(roleName: string, guardName: string = 'web'): Promise<void> {
+    if (rolePermissions()[roleName] !== undefined) return
+    const key = `role:${roleName}`
+    if (loadingPivots()[key]) return
+    loadingPivots.set({ ...loadingPivots(), [key]: true })
+    try {
+      const res = await fetch(
+        `/api/dashboard/rbac/roles/${encodeURIComponent(roleName)}/permissions?guard=${encodeURIComponent(guardName)}`,
+        { headers: { accept: 'application/json' } },
+      )
+      if (!res.ok) throw new Error(`HTTP ${res.status}`)
+      const data = await res.json() as { permissions?: Array<{ name: string }>, error?: string }
+      if (data.error) {
+        rolePermissions.set({ ...rolePermissions(), [roleName]: [] })
+        return
+      }
+      rolePermissions.set({
+        ...rolePermissions(),
+        [roleName]: (data.permissions ?? []).map(p => p.name),
+      })
+    }
+    catch {
+      rolePermissions.set({ ...rolePermissions(), [roleName]: [] })
+    }
+    finally {
+      const next = { ...loadingPivots() }
+      delete next[key]
+      loadingPivots.set(next)
+    }
+  }
+
+  async function syncRolePermissions(roleName: string, permissionNames: string[], guardName: string = 'web'): Promise<boolean> {
+    const snapshot = rolePermissions()[roleName] ?? []
+    rolePermissions.set({ ...rolePermissions(), [roleName]: permissionNames })
+    try {
+      const res = await fetch(
+        `/api/dashboard/rbac/roles/${encodeURIComponent(roleName)}/permissions`,
+        {
+          method: 'POST',
+          headers: { 'content-type': 'application/json', accept: 'application/json' },
+          body: JSON.stringify({ permissions: permissionNames, guardName }),
+        },
+      )
+      if (!res.ok) throw new Error(`HTTP ${res.status}`)
+      const data = await res.json() as { permissions?: Array<{ name: string }>, error?: string }
+      if (data.error) throw new Error(data.error)
+      rolePermissions.set({
+        ...rolePermissions(),
+        [roleName]: (data.permissions ?? []).map(p => p.name),
+      })
+      return true
+    }
+    catch (e) {
+      rolePermissions.set({ ...rolePermissions(), [roleName]: snapshot })
+      error.set(e instanceof Error ? e.message : String(e))
+      return false
+    }
+  }
+
+  return {
+    roles,
+    permissions,
+    users,
+    userRoles,
+    rolePermissions,
+    loading,
+    loadingPivots,
+    error,
+    hasRoles,
+    hasPermissions,
+    load,
+    createRole,
+    deleteRole,
+    createPermission,
+    deletePermission,
+    loadUserRoles,
+    syncUserRoles,
+    loadRolePermissions,
+    syncRolePermissions,
+  }
+}, {
+  persist: {
+    storage: 'sessionStorage',
+    key: 'stacks-dashboard-rbac',
+    // Don't persist the pivot caches across page reloads — they're
+    // cheap to re-fetch and stale data on a sensitive admin surface
+    // is worse than a 100ms refetch.
+    pick: [],
+  },
+})
+
+if (typeof window !== 'undefined')
+  registerStoresClient({ rbacStore })

package/views/dashboard/stx.config.ts

@@ -0,0 +1,34 @@
+export default {
+  root: 'resources',
+  pagesDir: 'views',
+  // STX walks `componentsDir` recursively when resolving `<TagName />` against
+  // the filesystem, so dropping the `views/` prefix here points at the real
+  // shared components tree (`resources/components/Dashboard/UI/...`) and lets
+  // pages use `<PageLayout />`, `<PageHeader />`, etc. without an explicit
+  // `import` line in `<script server>`.
+  componentsDir: 'components',
+  layoutsDir: 'views/layouts',
+  partialsDir: 'views/partials',
+
+  app: {
+    head: {
+      title: 'Stacks',
+      meta: [
+        { charset: 'utf-8' },
+        { name: 'viewport', content: 'width=device-width, initial-scale=1' },
+        { name: 'description', content: 'Build modern web applications, APIs, and cloud infrastructure with an elegant, type-safe framework.' },
+      ],
+      links: [
+        { rel: 'preconnect', href: 'https://fonts.bunny.net' },
+        { rel: 'stylesheet', href: 'https://fonts.bunny.net/css?family=figtree:400,500,600,700' },
+      ],
+      bodyClass: 'min-h-screen font-sans antialiased bg-white dark:bg-neutral-950 text-neutral-600 dark:text-neutral-400',
+    },
+  },
+
+  router: {
+    container: 'main',
+  },
+
+  strict: false,
+}

package/views/dashboard/teams/[id].stx

@@ -0,0 +1,170 @@
+@extends('layouts/default')
+
+@section('content')
+<div class="p-6 space-y-6">
+
+  <PageHeader title="Team Members" description="Manage your team members and invitations" />
+
+  <form class="px-6 py-4 text-sm bg-white dark:bg-neutral-800 rounded-lg" @submit.prevent="handleInvite">
+    <div class="py-2">
+      <div class="flex flex-row p-4 text-gray-600 text-sm dark:text-neutral-400 bg-gray-50 dark:bg-neutral-700 rounded-lg">
+        <div class="flex-shrink-0 h-6 w-6 text-gray-400 i-hugeicons-information-circle"></div>
+        <div class="flex flex-grow ml-4 mt-0.5">
+          <p>You can add teammates here.</p>
+        </div>
+      </div>
+
+      <div :show="hasInviteSuccess" class="mt-3 p-3 bg-green-50 dark:bg-green-900/20 rounded-md">
+        <p class="text-green-700 text-sm dark:text-green-400">{{ inviteSuccess }}</p>
+      </div>
+
+      <div :show="hasInviteError" class="mt-3 p-3 bg-red-50 dark:bg-red-900/20 rounded-md">
+        <p class="text-red-700 text-sm dark:text-red-400">{{ inviteError }}</p>
+      </div>
+
+      <div class="flex flex-col mt-4">
+        <label class="text-gray-700 dark:text-neutral-300">Enter teammate email to invite them.</label>
+        <div class="flex flex-col mt-1">
+          <input
+            type="email"
+            x-model="inviteEmail"
+            placeholder="teammate@example.com"
+            class="block px-4 py-2 w-full text-gray-900 dark:text-neutral-100 dark:bg-neutral-800 border border-gray-300 rounded-md dark:border-neutral-600 focus:border-none focus:ring-2 focus:ring-blue-500 shadow-sm"
+            autocorrect="off"
+          />
+        </div>
+      </div>
+    </div>
+    <div>
+      <div class="flex justify-end mt-4">
+        <Button type="submit" variant="primary" :disabled="isInviting">{{ inviteButtonLabel() }}</Button>
+      </div>
+    </div>
+  </form>
+
+  <div class="mt-16 px-6 py-4 text-sm bg-white dark:bg-neutral-800 rounded-lg">
+    <div class="sm:flex sm:items-center">
+      <div class="sm:flex-auto">
+        <h1 class="font-semibold leading-6 text-base text-gray-900 dark:text-neutral-100">Teammates</h1>
+      </div>
+    </div>
+    <div class="flow-root mt-8">
+      <div class="overflow-x-auto -mx-4 -my-2 sm:-mx-6 lg:-mx-8">
+        <div class="inline-block py-2 sm:px-6 lg:px-8 min-w-full align-middle">
+          <table class="min-w-full divide-gray-300 divide-y dark:divide-neutral-600">
+            <thead>
+              <tr>
+                <th scope="col" class="pl-4 pr-3 py-3 sm:pl-0 font-medium text-gray-500 text-left text-xs tracking-wide uppercase dark:text-neutral-400">Name</th>
+                <th scope="col" class="px-3 py-3 font-medium text-gray-500 text-left text-xs tracking-wide uppercase dark:text-neutral-400">Email</th>
+                <th scope="col" class="px-3 py-3 font-medium text-gray-500 text-left text-xs tracking-wide uppercase dark:text-neutral-400">Role</th>
+                <th scope="col" class="relative pl-3 pr-4 py-3 sm:pr-0"><span class="sr-only">Actions</span></th>
+              </tr>
+            </thead>
+            <tbody class="bg-white dark:bg-neutral-800 divide-gray-200 divide-y dark:divide-neutral-600">
+              <tr :show="isLoading">
+                <td colspan="4" class="py-8 text-center text-gray-500 text-sm dark:text-neutral-400">Loading teammates...</td>
+              </tr>
+              <tr :show="isEmpty">
+                <td colspan="4" class="py-8 text-center text-gray-500 text-sm dark:text-neutral-400">No teammates yet. Invite someone above.</td>
+              </tr>
+              <template :for="teammate in teammates">
+                <tr>
+                  <td class="pl-4 pr-3 py-4 sm:pl-0 font-medium text-gray-900 text-sm whitespace-nowrap dark:text-neutral-100">{{ teammate.name }}</td>
+                  <td class="px-3 py-4 text-gray-500 text-sm whitespace-nowrap dark:text-neutral-400">{{ teammate.email }}</td>
+                  <td class="px-3 py-4 text-gray-500 text-sm whitespace-nowrap dark:text-neutral-400">{{ teammate.role }}</td>
+                  <td class="relative pl-3 pr-4 py-4 sm:pr-0 font-medium text-right text-sm whitespace-nowrap">
+                    <button class="text-gray-400 hover:text-neutral-500 duration-150 transition-colors">
+                      <div class="h-6 w-6 i-hugeicons-ellipsis-vertical"></div>
+                    </button>
+                  </td>
+                </tr>
+              </template>
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script client>
+import { get, post } from '../../../functions/api'
+
+interface Teammate {
+  id?: number
+  name: string
+  email: string
+  role: string
+}
+
+const route = useRoute()
+
+const teammates = state<Teammate[]>([])
+const isLoading = state(true)
+
+const inviteEmail = state('')
+const inviteError = state('')
+const inviteSuccess = state('')
+const isInviting = state(false)
+
+const hasInviteSuccess = derived(() => inviteSuccess() !== '')
+const hasInviteError = derived(() => inviteError() !== '')
+const isEmpty = derived(() => !isLoading() && teammates().length === 0)
+
+function inviteButtonLabel(): string {
+  return isInviting() ? 'Inviting...' : 'Invite'
+}
+
+async function fetchTeammates(): Promise<void> {
+  isLoading.set(true)
+  try {
+    const data = await get(`/teams/${route.params.id}/members`)
+    teammates.set(data.data || [])
+  }
+  catch {
+    teammates.set([])
+  }
+  finally {
+    isLoading.set(false)
+  }
+}
+
+function validateEmail(email: string): boolean {
+  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)
+}
+
+async function handleInvite(): Promise<void> {
+  inviteError.set('')
+  inviteSuccess.set('')
+
+  const email = inviteEmail().trim()
+  if (!email) {
+    inviteError.set('Please enter an email address.')
+    return
+  }
+  if (!validateEmail(email)) {
+    inviteError.set('Please enter a valid email address.')
+    return
+  }
+
+  isInviting.set(true)
+  try {
+    await post(`/teams/${route.params.id}/invite`, { email })
+    inviteSuccess.set(`Invitation sent to ${email}.`)
+    inviteEmail.set('')
+    await fetchTeammates()
+  }
+  catch (e) {
+    inviteError.set(e instanceof Error ? e.message : 'Failed to send invitation.')
+  }
+  finally {
+    isInviting.set(false)
+  }
+}
+
+onMount(() => {
+  fetchTeammates()
+})
+</script>
+
+@endsection

package/views/forum/category.stx

@@ -0,0 +1,92 @@
+<script server>
+const category = ''
+const subcategory = ''
+const filter = ''
+</script>
+<ForumLayout :route="routeType">
+  <div class="grid gap-8 grid-cols-1 lg:grid-cols-3">
+    <div class="lg:col-span-2">
+      <ForumBreadcrumb :items="breadcrumbItems" />
+
+      <div class="mb-6">
+        <div class="flex items-center justify-between px-4 py-3 bg-gray-100 rounded-t-md">
+          <div>
+            <h1 class="font-bold text-xl">{{ categoryTitle }}</h1>
+            <p class="mt-1 text-gray-600 text-sm">{{ categoryDescription }}</p>
+          </div>
+
+          <div>
+            <a href="/forum/new-topic" class="px-4 py-2 text-white bg-primary rounded-md hover:opacity-90">New Topic</a>
+          </div>
+        </div>
+      </div>
+
+      <ForumTopicList :title="listTitle">
+        @foreach (topic in topics)
+          <ForumTopicItem
+            :key="topic.id"
+            :title="topic.title"
+            :link="topic.link"
+            :authorName="topic.authorName"
+            :authorAvatar="topic.authorAvatar"
+            :createdAt="topic.createdAt"
+            :viewCount="topic.viewCount"
+            :replyCount="topic.replyCount"
+            :likeCount="topic.likeCount"
+            :category="topic.category"
+            :categoryLink="topic.categoryLink"
+            :excerpt="topic.excerpt || ''"
+            :isPinned="!!topic.isPinned"
+            :isSolved="!!topic.isSolved"
+            :lastReplyAuthorName="topic.lastReplyAuthorName || ''"
+            :lastReplyAuthorAvatar="topic.lastReplyAuthorAvatar || ''"
+            :lastReplyAt="topic.lastReplyAt || ''"
+          />
+        @endforeach
+      </ForumTopicList>
+
+      <ForumPagination :currentPage="1" :totalPages="5" />
+    </div>
+
+    <div class="lg:col-span-1">
+      <ForumSidebar
+        :stats="{
+          topics: 540,
+          posts: 3287,
+          members: 1245,
+          newestMember: 'NewUser123'
+        }"
+        :popularTopics="[
+          {
+            id: 1,
+            title: 'How to implement authentication in a new Stacks.js project?',
+            link: '/forum/topic/1',
+            replyCount: 3,
+            viewCount: 45
+          },
+          {
+            id: 2,
+            title: 'Best practices for database migrations in Stacks.js',
+            link: '/forum/topic/3',
+            replyCount: 15,
+            viewCount: 128
+          },
+          {
+            id: 3,
+            title: 'Introducing myself to the community!',
+            link: '/forum/topic/2',
+            replyCount: 8,
+            viewCount: 32
+          }
+        ]"
+        :onlineUsers="[
+          { id: 1, name: 'JohnDoe', avatar: '/images/avatars/default.png' },
+          { id: 2, name: 'DatabaseGuru', avatar: '/images/avatars/default.png' },
+          { id: 3, name: 'NewUser123', avatar: '/images/avatars/default.png' },
+          { id: 4, name: 'ExpertUser', avatar: '/images/avatars/default.png' },
+          { id: 5, name: 'StacksMaster', avatar: '/images/avatars/default.png' }
+        ]"
+      />
+    </div>
+  </div>
+</ForumLayout>