@meith/plugin-calendar 0.25.0 → 0.26.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meith/plugin-calendar",
-  "version": "0.25.0",
+  "version": "0.26.0",
   "description": "A shared calendar: events the community can see, linked to the threads that discuss them.",
   "license": "MIT",
   "repository": {
@@ -20,7 +20,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@meith/plugin-kit": "^0.25.0"
+    "@meith/plugin-kit": "^0.26.0"
   },
   "peerDependencies": {
     "react": "^19.2.0"

package/src/definition.tsx

@@ -18,7 +18,7 @@ export const calendarPlugin = definePlugin({
   key: 'calendar',
   name: en['calendar.definition.name'],
   nameKey: 'calendar.definition.name',
-  version: '0.25.0',
+  version: '0.26.0',
   description: en['calendar.definition.description'],
   descriptionKey: 'calendar.definition.description',
   apiVersion: '0',

package/src/messages/en.json

@@ -26,6 +26,7 @@
   "calendar.page.past": "Past",
   "calendar.page.title": "Calendar",
   "calendar.page.upcoming": "Upcoming",
+  "calendar.page.views": "Calendar views",
   "calendar.setting.anyMember.description": "When off, only the organisers named under Admin → Plugins → Calendar may add events.",
   "calendar.setting.anyMember.label": "Any member may add an event",
   "calendar.thread.card": "This thread discusses an event."

package/src/ui/page.tsx

@@ -1,4 +1,10 @@
-import type { PluginPageContext } from '@meith/plugin-kit'
+import {
+  PLUGIN_CARD,
+  PLUGIN_NOTE,
+  PLUGIN_TAB_LIST,
+  type PluginPageContext,
+  pluginTabClass,
+} from '@meith/plugin-kit'
 
 import { mayAdd, resolveCalendarConfig } from '../access'
 import {
@@ -96,7 +102,7 @@ function Agenda({
   return (
     <div className="flex flex-col gap-6">
       {groupByMonth(events, locale).map((month) => (
-        <section key={month.key} className="bg-card flex flex-col gap-3 rounded-md border p-4">
+        <section key={month.key} className={PLUGIN_CARD}>
           <h2 className="text-muted-foreground text-xs font-semibold tracking-widest">
             {month.label}
           </h2>
@@ -113,11 +119,7 @@ function Agenda({
 
 function AddForm({ context }: { context: PluginPageContext }) {
   return (
-    <form
-      method="post"
-      action="/api/plugins/calendar/events"
-      className="bg-card flex flex-col gap-3 rounded-md border p-4"
-    >
+    <form method="post" action="/api/plugins/calendar/events" className={PLUGIN_CARD}>
       <h2 className="font-semibold">{translated(context, 'calendar.event.add')}</h2>
 
       <div className="grid gap-3 sm:grid-cols-2">
@@ -187,23 +189,31 @@ export async function CalendarPage(context: PluginPageContext) {
 
   return (
     <div className="flex flex-col gap-6">
-      <nav className="flex gap-4 text-sm">
-        <a
-          className={showingPast ? 'underline underline-offset-2' : 'font-semibold'}
-          href="/plugins/calendar"
-        >
-          {translated(context, 'calendar.page.upcoming')}
-        </a>
-        <a
-          className={showingPast ? 'font-semibold' : 'underline underline-offset-2'}
-          href="/plugins/calendar?show=past"
-        >
-          {translated(context, 'calendar.page.past')}
-        </a>
+      <nav aria-label={translated(context, 'calendar.page.views')}>
+        <ul className={PLUGIN_TAB_LIST}>
+          <li className="shrink-0">
+            <a
+              href="/plugins/calendar"
+              {...(showingPast ? {} : { 'aria-current': 'page' as const })}
+              className={pluginTabClass(!showingPast)}
+            >
+              {translated(context, 'calendar.page.upcoming')}
+            </a>
+          </li>
+          <li className="shrink-0">
+            <a
+              href="/plugins/calendar?show=past"
+              {...(showingPast ? { 'aria-current': 'page' as const } : {})}
+              className={pluginTabClass(showingPast)}
+            >
+              {translated(context, 'calendar.page.past')}
+            </a>
+          </li>
+        </ul>
       </nav>
 
       {events.length === 0 ? (
-        <p className="text-muted-foreground text-sm">
+        <p className={PLUGIN_NOTE}>
           {translated(context, showingPast ? 'calendar.page.emptyPast' : 'calendar.page.empty')}
         </p>
       ) : (
@@ -212,9 +222,7 @@ export async function CalendarPage(context: PluginPageContext) {
 
       {!showingPast && verdict === 'allowed' && <AddForm context={context} />}
       {!showingPast && verdict === 'not-an-organiser' && (
-        <p className="text-muted-foreground text-sm">
-          {translated(context, 'calendar.error.notAnOrganiser')}
-        </p>
+        <p className={PLUGIN_NOTE}>{translated(context, 'calendar.error.notAnOrganiser')}</p>
       )}
     </div>
   )