From 33a30b43d88b048016b5ed8d8a5d58095832a34f Mon Sep 17 00:00:00 2001 From: Martin Porwoll Date: Fri, 16 Jan 2026 11:12:08 +0000 Subject: [PATCH] feat(admin): add Community nav links to admin sidebar - Add CommunityNavLinks component with styled navigation - Register afterNavLinks in payload.config.ts - Link to Community Inbox and Analytics views - Add Analytics quick-link in Inbox component - Support dark mode styling Co-Authored-By: Claude Opus 4.5 --- src/app/(payload)/admin/importMap.js | 2 + .../views/community/inbox/CommunityInbox.tsx | 6 ++ src/components/admin/CommunityNavLinks.scss | 88 +++++++++++++++++++ src/components/admin/CommunityNavLinks.tsx | 50 +++++++++++ src/payload.config.ts | 17 ++-- 5 files changed, 151 insertions(+), 12 deletions(-) create mode 100644 src/components/admin/CommunityNavLinks.scss create mode 100644 src/components/admin/CommunityNavLinks.tsx diff --git a/src/app/(payload)/admin/importMap.js b/src/app/(payload)/admin/importMap.js index c0f8759..d61f9e5 100644 --- a/src/app/(payload)/admin/importMap.js +++ b/src/app/(payload)/admin/importMap.js @@ -25,6 +25,7 @@ import { StrikethroughFeatureClient as StrikethroughFeatureClient_e70f5e05f09f93 import { UnderlineFeatureClient as UnderlineFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client' import { BoldFeatureClient as BoldFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client' import { ItalicFeatureClient as ItalicFeatureClient_e70f5e05f09f93e00b997edb1ef0c864 } from '@payloadcms/richtext-lexical/client' +import { CommunityNavLinks as CommunityNavLinks_4431db66fbe96916dda5fdbfa979ee1e } from '@/components/admin/CommunityNavLinks' import { TenantSelector as TenantSelector_d6d5f193a167989e2ee7d14202901e62 } from '@payloadcms/plugin-multi-tenant/rsc' import { TenantSelectionProvider as TenantSelectionProvider_d6d5f193a167989e2ee7d14202901e62 } from '@payloadcms/plugin-multi-tenant/rsc' import { CollectionCards as CollectionCards_ab83ff7e88da8d3530831f296ec4756a } from '@payloadcms/ui/rsc' @@ -57,6 +58,7 @@ export const importMap = { "@payloadcms/richtext-lexical/client#UnderlineFeatureClient": UnderlineFeatureClient_e70f5e05f09f93e00b997edb1ef0c864, "@payloadcms/richtext-lexical/client#BoldFeatureClient": BoldFeatureClient_e70f5e05f09f93e00b997edb1ef0c864, "@payloadcms/richtext-lexical/client#ItalicFeatureClient": ItalicFeatureClient_e70f5e05f09f93e00b997edb1ef0c864, + "@/components/admin/CommunityNavLinks#CommunityNavLinks": CommunityNavLinks_4431db66fbe96916dda5fdbfa979ee1e, "@payloadcms/plugin-multi-tenant/rsc#TenantSelector": TenantSelector_d6d5f193a167989e2ee7d14202901e62, "@payloadcms/plugin-multi-tenant/rsc#TenantSelectionProvider": TenantSelectionProvider_d6d5f193a167989e2ee7d14202901e62, "@payloadcms/ui/rsc#CollectionCards": CollectionCards_ab83ff7e88da8d3530831f296ec4756a diff --git a/src/app/(payload)/admin/views/community/inbox/CommunityInbox.tsx b/src/app/(payload)/admin/views/community/inbox/CommunityInbox.tsx index 48c0c5e..8431a39 100644 --- a/src/app/(payload)/admin/views/community/inbox/CommunityInbox.tsx +++ b/src/app/(payload)/admin/views/community/inbox/CommunityInbox.tsx @@ -508,6 +508,9 @@ export const CommunityInbox: React.FC = () => { <>

📬 Inbox

+ + 📈 + @@ -972,6 +975,9 @@ export const CommunityInbox: React.FC = () => {
+ + 📈 Analytics + diff --git a/src/components/admin/CommunityNavLinks.scss b/src/components/admin/CommunityNavLinks.scss new file mode 100644 index 0000000..c88e63d --- /dev/null +++ b/src/components/admin/CommunityNavLinks.scss @@ -0,0 +1,88 @@ +.community-nav-links { + padding: 0 var(--base); + margin-top: var(--base); + border-top: 1px solid var(--theme-elevation-100); + padding-top: var(--base); + + &__header { + display: flex; + align-items: center; + gap: 8px; + padding: 8px 12px; + font-size: 11px; + font-weight: 600; + text-transform: uppercase; + letter-spacing: 0.5px; + color: var(--theme-elevation-500); + } + + &__icon { + font-size: 14px; + } + + &__title { + flex: 1; + } + + &__list { + display: flex; + flex-direction: column; + gap: 2px; + } + + &__link { + display: flex; + align-items: center; + gap: 10px; + padding: 10px 12px; + border-radius: 4px; + text-decoration: none; + color: var(--theme-elevation-800); + font-size: 13px; + transition: all 0.15s ease; + + &:hover { + background-color: var(--theme-elevation-50); + color: var(--theme-elevation-900); + } + + &--active { + background-color: var(--theme-elevation-100); + color: var(--theme-text); + font-weight: 500; + + &:hover { + background-color: var(--theme-elevation-150); + } + } + } + + &__link-icon { + font-size: 16px; + width: 20px; + text-align: center; + } + + &__link-label { + flex: 1; + } +} + +// Dark mode adjustments +[data-theme='dark'] { + .community-nav-links { + &__link { + &:hover { + background-color: var(--theme-elevation-100); + } + + &--active { + background-color: var(--theme-elevation-150); + + &:hover { + background-color: var(--theme-elevation-200); + } + } + } + } +} diff --git a/src/components/admin/CommunityNavLinks.tsx b/src/components/admin/CommunityNavLinks.tsx new file mode 100644 index 0000000..5fd2cb3 --- /dev/null +++ b/src/components/admin/CommunityNavLinks.tsx @@ -0,0 +1,50 @@ +'use client' + +import React from 'react' +import Link from 'next/link' +import { usePathname } from 'next/navigation' + +import './CommunityNavLinks.scss' + +export const CommunityNavLinks: React.FC = () => { + const pathname = usePathname() + + const links = [ + { + href: '/admin/views/community/inbox', + label: 'Community Inbox', + icon: '📥', + }, + { + href: '/admin/views/community/analytics', + label: 'Community Analytics', + icon: '📊', + }, + ] + + return ( +
+
+ 💬 + Community +
+ +
+ ) +} + +export default CommunityNavLinks diff --git a/src/payload.config.ts b/src/payload.config.ts index 05974ce..546bc85 100644 --- a/src/payload.config.ts +++ b/src/payload.config.ts @@ -126,19 +126,12 @@ export default buildConfig({ serverURL: process.env.PAYLOAD_PUBLIC_SERVER_URL || 'https://pl.porwoll.tech', admin: { user: Users.slug, - // All custom components disabled due to path-to-regexp bug + components: { + // Community Management Nav Links + afterNavLinks: ['@/components/admin/CommunityNavLinks#CommunityNavLinks'], + }, + // Note: Custom views with paths disabled due to path-to-regexp bug // See BUG_REPORT_CUSTOM_VIEWS.md for details - // TypeError: Missing parameter name at 5 - // components: { - // afterNavLinks: ['@/components/admin/TenantBreadcrumb#TenantBreadcrumb'], - // views: { - // TenantDashboard: { - // Component: '@/components/admin/TenantDashboardView#TenantDashboardView', - // path: '/tenant-dashboard', - // }, - // }, - // beforeNavLinks: ['@/components/admin/DashboardNavLink#DashboardNavLink'], - // }, }, // Multi-Tenant Email Adapter email: multiTenantEmailAdapter,