@meith/plugin-calendar 0.35.1 → 0.36.1

package/package.json

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

package/src/definition.tsx

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

package/src/ui/admin.tsx

@@ -1,4 +1,5 @@
 import type { PluginAdminPageContext } from '@meith/plugin-kit'
+import { buttonVariants, controlVariants, surfaceVariants } from '@meith/ui'
 
 import en from '../messages/en.json'
 import { organiserIds } from '../store'
@@ -18,7 +19,7 @@ export async function OrganisersPage(context: PluginAdminPageContext) {
   )
 
   return (
-    <div className="flex flex-col gap-4 text-sm">
+    <div className={surfaceVariants({ padded: true, className: 'text-sm' })}>
       {named.length === 0 ? (
         <p className="text-muted-foreground">
           {translated(context, 'calendar.admin.organisers.empty')}
@@ -30,7 +31,10 @@ export async function OrganisersPage(context: PluginAdminPageContext) {
               <span>{organiser.username}</span>
               <form method="post" action="/admin/api/plugins/calendar/organisers/remove">
                 <input type="hidden" name="user_id" value={organiser.userId} />
-                <button type="submit" className="rounded border px-2 py-0.5 text-xs">
+                <button
+                  type="submit"
+                  className={buttonVariants({ variant: 'destructive', size: 'sm' })}
+                >
                   {translated(context, 'calendar.admin.organisers.remove')}
                 </button>
               </form>
@@ -42,13 +46,13 @@ export async function OrganisersPage(context: PluginAdminPageContext) {
       <form
         method="post"
         action="/admin/api/plugins/calendar/organisers/add"
-        className="flex items-end gap-2"
+        className="flex flex-wrap items-end gap-3"
       >
         <label className="flex flex-col gap-1">
           {translated(context, 'calendar.admin.organisers.username')}
-          <input name="username" required className="rounded border p-1" />
+          <input name="username" required className={controlVariants()} />
         </label>
-        <button type="submit" className="rounded border px-3 py-1">
+        <button type="submit" className={buttonVariants({ variant: 'primary' })}>
           {translated(context, 'calendar.admin.organisers.add')}
         </button>
       </form>

package/src/ui/page.tsx

@@ -5,6 +5,7 @@ import {
   type PluginPageContext,
   pluginTabClass,
 } from '@meith/plugin-kit'
+import { buttonVariants, controlVariants, textLinkVariants } from '@meith/ui'
 
 import { mayAdd, mayManage, resolveCalendarConfig } from '../access'
 import {
@@ -60,7 +61,7 @@ function EventRow({
       <DateBlock event={event} locale={locale} />
 
       <div className="flex min-w-0 flex-col gap-1">
-        <p className="font-semibold leading-tight">{event.title}</p>
+        <p className="font-semibold leading-snug [overflow-wrap:anywhere]">{event.title}</p>
 
         <p className="text-muted-foreground text-sm">
           <time dateTime={event.startsAt.toISOString()}>
@@ -72,27 +73,27 @@ function EventRow({
         <div className="flex flex-wrap items-center gap-x-3 gap-y-1 text-sm">
           <span className="text-muted-foreground">{relativeHint(event.startsAt, now, locale)}</span>
           {href !== null && (
-            <a className="underline underline-offset-2" href={href}>
+            <a className={textLinkVariants()} href={href}>
               {translated(context, 'calendar.event.discuss')}
             </a>
           )}
           <a
-            className="underline underline-offset-2"
+            className={textLinkVariants()}
             href={`/api/plugins/calendar/events/ics?id=${event.id}`}
           >
             {translated(context, 'calendar.event.download')}
           </a>
           {manageable && (
             <>
-              <a
-                className="underline underline-offset-2"
-                href={`/plugins/calendar?edit=${event.id}`}
-              >
+              <a className={textLinkVariants()} href={`/plugins/calendar?edit=${event.id}`}>
                 {translated(context, 'calendar.event.edit')}
               </a>
               <form method="post" action="/api/plugins/calendar/events/delete">
                 <input type="hidden" name="id" value={event.id} />
-                <button type="submit" className="underline underline-offset-2">
+                <button
+                  type="submit"
+                  className={buttonVariants({ variant: 'destructive', size: 'sm' })}
+                >
                   {translated(context, 'calendar.event.delete')}
                 </button>
               </form>
@@ -173,53 +174,53 @@ function EventForm({
       {event !== null && <input type="hidden" name="id" value={event.id} />}
 
       <div className="grid gap-3 sm:grid-cols-2">
-        <label className="flex flex-col gap-1 text-sm sm:col-span-2">
+        <label className="flex min-w-0 flex-col gap-2 text-sm sm:col-span-2">
           {translated(context, 'calendar.event.title')}
           <input
             name="title"
             required
             maxLength={120}
             defaultValue={event?.title ?? ''}
-            className="rounded border p-1.5"
+            className={controlVariants()}
           />
         </label>
-        <label className="flex flex-col gap-1 text-sm">
+        <label className="flex min-w-0 flex-col gap-2 text-sm">
           {translated(context, 'calendar.event.starts')}
           <input
             name="starts_at"
             type="datetime-local"
             required
             defaultValue={toDateTimeInput(event?.startsAt ?? null)}
-            className="rounded border p-1.5"
+            className={controlVariants()}
           />
         </label>
-        <label className="flex flex-col gap-1 text-sm">
+        <label className="flex min-w-0 flex-col gap-2 text-sm">
           {translated(context, 'calendar.event.until')}
           <input
             name="ends_at"
             type="datetime-local"
             defaultValue={toDateTimeInput(event?.endsAt ?? null)}
-            className="rounded border p-1.5"
+            className={controlVariants()}
           />
         </label>
-        <label className="flex flex-col gap-1 text-sm">
+        <label className="flex min-w-0 flex-col gap-2 text-sm">
           {translated(context, 'calendar.event.location')}
           <input
             name="location"
             maxLength={120}
             defaultValue={event?.location ?? ''}
-            className="rounded border p-1.5"
+            className={controlVariants()}
           />
         </label>
-        <label className="flex flex-col gap-1 text-sm">
+        <label className="flex min-w-0 flex-col gap-2 text-sm">
           {translated(context, 'calendar.event.thread')}
           <input
             name="thread"
             defaultValue={event?.threadId == null ? '' : String(event.threadId)}
-            className="rounded border p-1.5"
+            className={controlVariants()}
           />
         </label>
-        <label className="flex flex-col gap-1 text-sm">
+        <label className="flex min-w-0 flex-col gap-2 text-sm">
           {translated(context, 'calendar.event.link')}
           <input
             name="link"
@@ -227,19 +228,19 @@ function EventForm({
             maxLength={500}
             placeholder="https://"
             defaultValue={event?.linkUrl ?? ''}
-            className="rounded border p-1.5"
+            className={controlVariants()}
           />
           <span className="text-muted-foreground text-xs">
             {translated(context, 'calendar.event.linkHint')}
           </span>
         </label>
-        <label className="flex flex-col gap-1 text-sm">
+        <label className="flex min-w-0 flex-col gap-2 text-sm">
           {translated(context, 'calendar.event.linkText')}
           <input
             name="link_text"
             maxLength={40}
             defaultValue={event?.linkLabel ?? ''}
-            className="rounded border p-1.5"
+            className={controlVariants()}
           />
           <span className="text-muted-foreground text-xs">
             {translated(context, 'calendar.event.linkTextHint')}
@@ -248,7 +249,7 @@ function EventForm({
       </div>
 
       <div className="flex items-center gap-3">
-        <button type="submit" className="bg-muted rounded border px-3 py-1.5 text-sm">
+        <button type="submit" className={buttonVariants({ variant: 'primary' })}>
           {submit}
         </button>
         {event !== null && (
@@ -295,7 +296,7 @@ export async function CalendarPage(context: PluginPageContext) {
   return (
     <div className="flex flex-col gap-6">
       <nav aria-label={translated(context, 'calendar.page.views')}>
-        <ul className={PLUGIN_TAB_LIST}>
+        <ul data-nav-tabs className={PLUGIN_TAB_LIST}>
           <li className="shrink-0">
             <a
               href="/plugins/calendar"