@kelpie/ui 0.12.0 → 0.14.0

package/src/components/LinkedEventsPanel.tsx

@@ -0,0 +1,50 @@
+import type { EventAssociationTargetType } from '@kelpie/schemas'
+import { Link } from 'react-router'
+
+import { useEventAssociationsFor } from '../api/resources/eventAssociations.ts'
+import { ErrorPanel } from './QueryState.tsx'
+import { SectionHeader } from './SectionHeader.tsx'
+
+/**
+ * Events associated with another record (a Deal, Company, Role, …).
+ *
+ * Registrants are Attendances on the Person, not this list.
+ */
+
+export function LinkedEventsPanel({
+  targetType,
+  targetId,
+}: {
+  readonly targetType: EventAssociationTargetType
+  readonly targetId: string
+}): React.JSX.Element {
+  const { associations, isLoading, error } = useEventAssociationsFor(targetType, targetId)
+
+  if (error !== null) {
+    return <ErrorPanel error={error} />
+  }
+
+  return (
+    <div>
+      <SectionHeader title="Events" />
+      {isLoading && <p className="text-[13px] text-ink-faint">Loading events…</p>}
+      {!isLoading && associations.length === 0 && (
+        <p className="text-[13px] text-ink-faint">No events linked yet.</p>
+      )}
+      {associations.length > 0 && (
+        <ul className="divide-y divide-border">
+          {associations.map((row) => (
+            <li key={row.eventId} className="py-2">
+              <Link
+                to={`/events/${row.eventId}`}
+                className="text-[13px] font-medium text-accent hover:underline"
+              >
+                {row.eventName}
+              </Link>
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  )
+}

package/src/components/NotesPanel.tsx

@@ -4,8 +4,9 @@ import type { FormEvent } from 'react'
 
 import { useTimezone } from '../api/resources/account.ts'
 import { useMembers } from '../api/resources/members.ts'
-import { useCreateNote, useNotes } from '../api/resources/notes.ts'
+import { useCreateNote, useDeleteNote, useNotes, useUpdateNote } from '../api/resources/notes.ts'
 import { formatDateTime } from '../lib/dates.ts'
+import { MarkdownView } from './MarkdownView.tsx'
 import { Paginator } from './Paginator.tsx'
 import { ErrorPanel } from './QueryState.tsx'
 import { SectionHeader } from './SectionHeader.tsx'
@@ -13,12 +14,10 @@ import { SectionHeader } from './SectionHeader.tsx'
 /**
  * The notes on one record.
  *
- * Ports the mockup's panel. There is no pin control: the mockup renders the
- * badge on a note that carries the flag and offers no way to set it, and the
- * mockup decides what a page shows. `PATCH /v1/notes/:id` takes `pinned`, so an
- * agent can still pin.
- *
- * No edit or delete either, for the same reason, though the API has both.
+ * Bodies are markdown, rendered with the same component as the handbook.
+ * Notes can be created, edited, and deleted here. There is no pin control: the
+ * mockup renders the badge on a note that carries the flag and offers no way to
+ * set it. `PATCH /v1/notes/:id` takes `pinned`, so an agent can still pin.
  */
 
 export interface NotesPanelProps {
@@ -82,7 +81,7 @@ export function NotesPanel({ targetType, targetId }: NotesPanelProps): React.JSX
             onChange={(event) => {
               setBody(event.target.value)
             }}
-            placeholder="Write a note…"
+            placeholder="Write a note… (Markdown supported)"
             rows={3}
             autoFocus
             className="w-full resize-y rounded-md border border-border bg-surface-raised px-3 py-2 text-[13px] outline-none focus:border-accent focus:ring-2 focus:ring-accent/20"
@@ -143,22 +142,140 @@ function NoteItem({
   readonly authorName: string
 }): React.JSX.Element {
   const timezone = useTimezone()
+  const updateNote = useUpdateNote()
+  const deleteNote = useDeleteNote()
+  const [editing, setEditing] = useState(false)
+  const [confirmingDelete, setConfirmingDelete] = useState(false)
+  const [draft, setDraft] = useState(note.body)
+
+  function cancelEdit(): void {
+    setDraft(note.body)
+    setEditing(false)
+  }
+
+  function submitEdit(event: FormEvent): void {
+    event.preventDefault()
+
+    const text = draft.trim()
+
+    if (text.length === 0) {
+      return
+    }
+
+    if (text !== note.body) {
+      updateNote.run({ id: note.id, changes: { body: text } })
+    }
+
+    setEditing(false)
+  }
+
+  if (editing) {
+    return (
+      <li className="rounded-md border border-border bg-surface-raised px-3.5 py-3">
+        <form onSubmit={submitEdit} className="space-y-2">
+          <textarea
+            value={draft}
+            onChange={(event) => {
+              setDraft(event.target.value)
+            }}
+            rows={3}
+            autoFocus
+            className="w-full resize-y rounded-md border border-border bg-surface-raised px-3 py-2 text-[13px] outline-none focus:border-accent focus:ring-2 focus:ring-accent/20"
+          />
+          <div className="flex justify-end gap-2">
+            <button
+              type="button"
+              onClick={cancelEdit}
+              className="rounded-md px-2.5 py-1 text-[12px] font-medium text-ink-muted hover:text-ink"
+            >
+              Cancel
+            </button>
+            <button
+              type="submit"
+              className="rounded-md bg-accent px-3 py-1.5 text-[12px] font-semibold text-accent-fg hover:bg-accent-hover"
+            >
+              Save
+            </button>
+          </div>
+        </form>
+        {updateNote.error !== null && (
+          <div className="mt-2">
+            <ErrorPanel error={updateNote.error} />
+          </div>
+        )}
+      </li>
+    )
+  }
 
   return (
-    <li className="rounded-md border border-border bg-surface-raised px-3.5 py-3">
+    <li className="group rounded-md border border-border bg-surface-raised px-3.5 py-3">
       <div className="flex items-start justify-between gap-2">
-        <p className="text-[13px] leading-relaxed whitespace-pre-wrap text-ink">{note.body}</p>
-        {note.pinned && (
-          <span className="shrink-0 text-[10px] font-semibold tracking-wide text-accent uppercase">
-            Pinned
-          </span>
-        )}
+        <div className="min-w-0 flex-1">
+          <MarkdownView source={note.body} />
+        </div>
+        <div className="flex shrink-0 flex-col items-end gap-1">
+          {note.pinned && (
+            <span className="text-[10px] font-semibold tracking-wide text-accent uppercase">Pinned</span>
+          )}
+          {confirmingDelete ? (
+            <div className="flex flex-wrap items-center justify-end gap-2">
+              <span className="text-[11px] text-ink-muted">Delete this note?</span>
+              <button
+                type="button"
+                onClick={() => {
+                  setConfirmingDelete(false)
+                }}
+                className="rounded-md px-2 py-0.5 text-[11px] font-medium text-ink-muted hover:text-ink"
+              >
+                Cancel
+              </button>
+              <button
+                type="button"
+                disabled={deleteNote.isPending}
+                onClick={() => {
+                  deleteNote.run(note.id)
+                  setConfirmingDelete(false)
+                }}
+                className="rounded-md bg-danger px-2 py-0.5 text-[11px] font-semibold text-danger-fg transition hover:opacity-90 disabled:opacity-50"
+              >
+                {deleteNote.isPending ? 'Deleting…' : 'Delete note'}
+              </button>
+            </div>
+          ) : (
+            <span className="flex gap-1 opacity-0 transition-opacity group-hover:opacity-100 focus-within:opacity-100">
+              <button
+                type="button"
+                onClick={() => {
+                  setDraft(note.body)
+                  setEditing(true)
+                }}
+                className="rounded-md px-2 py-0.5 text-[11px] font-medium text-ink-muted hover:bg-surface-sunken hover:text-ink"
+              >
+                Edit
+              </button>
+              <button
+                type="button"
+                onClick={() => {
+                  setConfirmingDelete(true)
+                }}
+                className="rounded-md px-2 py-0.5 text-[11px] font-medium text-ink-muted hover:bg-danger-soft hover:text-danger"
+              >
+                Delete
+              </button>
+            </span>
+          )}
+        </div>
       </div>
       <div className="mt-2 flex items-center gap-2 text-[11px] text-ink-faint">
         <span>{authorName}</span>
         <span>·</span>
         <span>{formatDateTime(note.createdAt, timezone)}</span>
       </div>
+      {deleteNote.error !== null && (
+        <div className="mt-2">
+          <ErrorPanel error={deleteNote.error} />
+        </div>
+      )}
     </li>
   )
 }

package/src/components/PlanAttention.tsx

@@ -1,11 +1,11 @@
-import { PIPELINE_KIND_LABELS, PLAN_ITEM_STATUS_LABELS } from '@kelpie/schemas'
+import { PLAN_ITEM_STATUS_LABELS, PLAN_ITEM_TARGET_TYPE_LABELS } from '@kelpie/schemas'
 import type {
   Deal,
   Enquiry,
   Opportunity,
   Partnership,
-  PipelineKind,
   PlanItem,
+  PlanItemTargetType,
   Raise,
 } from '@kelpie/schemas'
 import { Link } from 'react-router'
@@ -27,12 +27,13 @@ import { SectionHeader } from './SectionHeader.tsx'
  */
 
 /** Where a plan item's record lives. */
-const ROUTES: Readonly<Record<PipelineKind, string | undefined>> = {
+const ROUTES: Readonly<Record<PlanItemTargetType, string | undefined>> = {
   enquiry: '/enquiries',
   deal: '/deals',
   opportunity: '/opportunities',
   raise: '/fundraising',
   partnership: '/partnerships',
+  event: '/events',
 }
 
 export interface PlanAttentionProps {
@@ -247,7 +248,7 @@ export function PlanTargetLink({
   readonly item: PlanItem
   readonly targetNames: ReadonlyMap<string, string> | undefined
 }): React.JSX.Element {
-  const kind = PIPELINE_KIND_LABELS[item.targetType]
+  const kind = PLAN_ITEM_TARGET_TYPE_LABELS[item.targetType]
   const name = targetNames?.get(item.targetId)
   const route = ROUTES[item.targetType]
 

package/src/components/PlanPanel.tsx

@@ -1,5 +1,5 @@
 import { PLAN_ITEM_STATUS_LABELS, PLAN_ITEM_STATUSES } from '@kelpie/schemas'
-import type { PipelineKind, PlanItem, PlanItemStatus } from '@kelpie/schemas'
+import type { PlanItem, PlanItemStatus, PlanItemTargetType } from '@kelpie/schemas'
 import { useState } from 'react'
 import type { FormEvent } from 'react'
 
@@ -18,7 +18,7 @@ import { ErrorPanel } from './QueryState.tsx'
 import { SectionHeader } from './SectionHeader.tsx'
 
 /**
- * The plan for one pipeline record: what happens next, when, and who has it.
+ * The plan for one record: what happens next, when, and who has it.
  *
  * Ported from the mockup's panel, edit and delete included. Notes have neither,
  * because the mockup's note panel offers neither; this one offers both, so both
@@ -30,7 +30,7 @@ import { SectionHeader } from './SectionHeader.tsx'
  */
 
 export interface PlanPanelProps {
-  readonly targetType: PipelineKind
+  readonly targetType: PlanItemTargetType
   readonly targetId: string
 }
 

package/src/components/Shell.tsx

@@ -5,10 +5,12 @@ import { useAccount, useTheme } from '../api/resources/account.ts'
 import { useLogOut } from '../api/resources/session.ts'
 import { initialsOf } from '../lib/names.ts'
 import type { ThemePreference } from '../lib/theme.ts'
+import { ONBOARDING_RERUN_ENTRY } from '../pages/onboarding/onboardingRerun.ts'
 import { useNavItems } from '../registry/context.ts'
 import type { NavItem } from '../registry/contributions.ts'
 import { useVisibleNavItems } from '../registry/visibleNav.ts'
 import { ErrorBoundary } from './ErrorBoundary.tsx'
+import { WorkspaceSwitcher } from './WorkspaceSwitcher.tsx'
 
 /**
  * Sidebar, header, and the outlet every page renders into.
@@ -40,6 +42,7 @@ const CORE_NAV: readonly NavItem[] = [
   { id: 'deals', label: 'Deals', to: '/deals', order: 300 },
   { id: 'opportunities', label: 'Opportunities', to: '/opportunities', order: 350 },
   { id: 'fundraising', label: 'Fundraising', to: '/fundraising', order: 360 },
+  { id: 'events', label: 'Events', to: '/events', order: 370 },
   { id: 'partnerships', label: 'Partnerships', to: '/partnerships', order: 375 },
   { id: 'lists', label: 'Lists', to: '/lists', order: 378 },
   { id: 'forms', label: 'Forms', to: '/forms', order: 380 },
@@ -260,6 +263,7 @@ export function Shell(): React.JSX.Element {
           >
             {THEME_LABELS[theme]}
           </button>
+          <WorkspaceSwitcher />
           <div className="relative" ref={menuRef}>
             <button
               type="button"
@@ -302,10 +306,21 @@ export function Shell(): React.JSX.Element {
                   onClick={() => {
                     setMenuOpen(false)
                   }}
-                  className="block border-b border-border px-3 py-1.5 text-left text-[13px] text-ink hover:bg-surface-sunken"
+                  className="block px-3 py-1.5 text-left text-[13px] text-ink hover:bg-surface-sunken"
                 >
                   Preferences
                 </NavLink>
+                <button
+                  type="button"
+                  role="menuitem"
+                  onClick={() => {
+                    setMenuOpen(false)
+                    void navigate(ONBOARDING_RERUN_ENTRY)
+                  }}
+                  className="block w-full border-b border-border px-3 py-1.5 text-left text-[13px] text-ink hover:bg-surface-sunken"
+                >
+                  Rerun onboarding wizard
+                </button>
                 <button
                   type="button"
                   role="menuitem"

package/src/components/SocialNetworkIcon.tsx

@@ -0,0 +1,88 @@
+import { SOCIAL_NETWORK_LABELS } from '@kelpie/schemas'
+import type { SocialNetworkId } from '@kelpie/schemas'
+import {
+  siBluesky,
+  siCrunchbase,
+  siFacebook,
+  siGithub,
+  siInstagram,
+  siMastodon,
+  siMedium,
+  siSubstack,
+  siThreads,
+  siTiktok,
+  siWellfound,
+  siX,
+  siYoutube,
+} from 'simple-icons'
+
+export interface SocialNetworkIconProps {
+  readonly network: SocialNetworkId
+  readonly className?: string
+}
+
+/**
+ * Simple Icons does not ship LinkedIn. This is the standard "in" mark used to
+ * identify a LinkedIn profile, not a substitute brand colour lockup.
+ */
+const LINKEDIN_PATH =
+  'M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z'
+
+/** Generic link glyph for the catch-all network. Heroicons MIT, 24 solid. */
+const OTHER_PATH =
+  'M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3ZM11.768 19.768a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3Z'
+
+const ICON_PATHS: Readonly<Record<SocialNetworkId, string>> = {
+  angellist: siWellfound.path,
+  bluesky: siBluesky.path,
+  crunchbase: siCrunchbase.path,
+  facebook: siFacebook.path,
+  github: siGithub.path,
+  instagram: siInstagram.path,
+  linkedin: LINKEDIN_PATH,
+  mastodon: siMastodon.path,
+  medium: siMedium.path,
+  substack: siSubstack.path,
+  threads: siThreads.path,
+  tiktok: siTiktok.path,
+  twitter: siX.path,
+  youtube: siYoutube.path,
+  other: OTHER_PATH,
+}
+
+/**
+ * Brand mark for a social network. Decorative when the network name sits next
+ * to it; fill follows the surrounding text colour so light and dark both work.
+ */
+export function SocialNetworkIcon({
+  network,
+  className,
+}: SocialNetworkIconProps): React.JSX.Element {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      aria-hidden="true"
+      className={['shrink-0', className ?? 'size-3.5'].join(' ')}
+    >
+      <path fill="currentColor" d={ICON_PATHS[network]} />
+    </svg>
+  )
+}
+
+export interface SocialNetworkNameProps {
+  readonly network: SocialNetworkId
+  readonly className?: string
+}
+
+/** Icon plus the display name, for pickers and compact chips. */
+export function SocialNetworkName({
+  network,
+  className,
+}: SocialNetworkNameProps): React.JSX.Element {
+  return (
+    <span className={['inline-flex items-center gap-1.5', className ?? ''].join(' ')}>
+      <SocialNetworkIcon network={network} />
+      <span>{SOCIAL_NETWORK_LABELS[network]}</span>
+    </span>
+  )
+}

package/src/components/SocialProfilesField.tsx

@@ -2,6 +2,8 @@ import { SOCIAL_NETWORK_IDS, SOCIAL_NETWORK_LABELS } from '@kelpie/schemas'
 import type { SocialNetworkId, SocialProfile } from '@kelpie/schemas'
 import { useEffect, useId, useMemo, useRef, useState } from 'react'
 
+import { SocialNetworkIcon, SocialNetworkName } from './SocialNetworkIcon.tsx'
+
 export interface SocialProfilesFieldProps {
   readonly value: readonly SocialProfile[]
   readonly onChange: (profiles: readonly SocialProfile[]) => void
@@ -25,6 +27,45 @@ function profileHandle(url: string): string {
   return path.length > 0 ? path : bare
 }
 
+export interface SocialProfileIconsProps {
+  readonly profiles: readonly SocialProfile[]
+}
+
+/**
+ * Compact outbound marks for the person heading. Empty when there are no
+ * profiles; the Social tab is the editor.
+ */
+export function SocialProfileIcons({
+  profiles,
+}: SocialProfileIconsProps): React.JSX.Element | null {
+  if (profiles.length === 0) {
+    return null
+  }
+
+  return (
+    <ul className="flex shrink-0 items-center gap-1.5">
+      {profiles.map((profile) => {
+        const label = SOCIAL_NETWORK_LABELS[profile.network]
+
+        return (
+          <li key={profile.network}>
+            <a
+              href={hrefFor(profile.url)}
+              target="_blank"
+              rel="noopener noreferrer"
+              title={`${label} · ${profileHandle(profile.url)}`}
+              aria-label={label}
+              className="inline-flex text-ink-muted transition hover:text-accent"
+            >
+              <SocialNetworkIcon network={profile.network} className="size-4" />
+            </a>
+          </li>
+        )
+      })}
+    </ul>
+  )
+}
+
 /** One profile per network, so the network list doubles as the set of things left to add. */
 export function SocialProfilesField({
   value,
@@ -150,7 +191,9 @@ export function SocialProfilesField({
           if (editingNetwork === profile.network) {
             return (
               <li key={profile.network} className="py-1">
-                <div className="mb-1 text-[11px] font-medium text-ink-muted">{label}</div>
+                <div className="mb-1">
+                  <SocialNetworkName network={profile.network} className="text-[11px] font-medium text-ink-muted" />
+                </div>
                 <input
                   ref={editInputRef}
                   type="url"
@@ -186,11 +229,14 @@ export function SocialProfilesField({
                 target="_blank"
                 rel="noopener noreferrer"
                 title={profile.url}
-                className="min-w-0 flex-1 truncate text-[12px] leading-snug text-ink hover:text-accent"
+                className="flex min-w-0 flex-1 items-center gap-1.5 text-[12px] leading-snug text-ink hover:text-accent"
               >
-                <span className="font-medium">{label}</span>
-                <span className="text-ink-faint"> · </span>
-                <span className="text-ink-muted">{profileHandle(profile.url)}</span>
+                <SocialNetworkIcon network={profile.network} />
+                <span className="min-w-0 truncate">
+                  <span className="font-medium">{label}</span>
+                  <span className="text-ink-faint"> · </span>
+                  <span className="text-ink-muted">{profileHandle(profile.url)}</span>
+                </span>
               </a>
               <div className="flex shrink-0 items-center">
                 <button
@@ -230,9 +276,10 @@ export function SocialProfilesField({
 
       {pendingNetwork !== null ? (
         <div className="mt-1 space-y-1.5 rounded-md border border-border bg-surface px-2 py-2">
-          <div className="text-[11px] font-medium text-ink">
-            {SOCIAL_NETWORK_LABELS[pendingNetwork]}
-          </div>
+          <SocialNetworkName
+            network={pendingNetwork}
+            className="text-[11px] font-medium text-ink"
+          />
           <input
             ref={urlInputRef}
             type="url"
@@ -336,11 +383,11 @@ export function SocialProfilesField({
                             pickNetwork(network)
                           }}
                           className={[
-                            'flex w-full px-3 py-1.5 text-left text-[12px] text-ink',
+                            'flex w-full items-center px-3 py-1.5 text-left text-[12px] text-ink',
                             index === highlight ? 'bg-accent-soft' : 'hover:bg-surface',
                           ].join(' ')}
                         >
-                          {SOCIAL_NETWORK_LABELS[network]}
+                          <SocialNetworkName network={network} />
                         </button>
                       </li>
                     ))

package/src/components/TimezoneSearch.tsx

@@ -0,0 +1,67 @@
+import type { JSX } from 'react'
+
+import { timezonesIncluding } from '../lib/timezones.ts'
+
+import { EntitySearch } from './EntitySearch.tsx'
+
+export interface TimezoneSearchProps {
+  readonly value: string
+  readonly onChange: (timezone: string) => void
+  readonly required?: boolean | undefined
+  readonly disabled?: boolean | undefined
+  readonly size?: 'sm' | 'md' | undefined
+  readonly className?: string | undefined
+}
+
+/**
+ * Searchable IANA timezone picker.
+ *
+ * The person sidebar used to be a free-text InlineEdit, which accepted anything
+ * and offered no list. Account preferences already searched the full ICU set;
+ * this is that control, shared with Events and workspace settings.
+ *
+ * Clearing a required field is ignored: the stored value stays until a real
+ * zone is picked, so an Event or workspace cannot PATCH an empty string.
+ */
+export function TimezoneSearch({
+  value,
+  onChange,
+  required,
+  disabled,
+  size = 'sm',
+  className = '',
+}: TimezoneSearchProps): JSX.Element {
+  const options = timezonesIncluding(value).map((zone) => ({ id: zone, label: zone }))
+
+  if (disabled === true) {
+    const padding = size === 'md' ? 'px-2.5 py-1.5 text-[13px]' : 'px-2 py-1.5 text-[12px]'
+
+    return (
+      <div
+        className={`w-full rounded-md border border-border bg-surface-raised text-ink opacity-60 ${padding} ${className}`}
+      >
+        {value.length > 0 ? value : '—'}
+      </div>
+    )
+  }
+
+  return (
+    <EntitySearch
+      options={options}
+      value={value}
+      onChange={(next) => {
+        if (required === true && next.length === 0) {
+          return
+        }
+
+        onChange(next)
+      }}
+      placeholder="Search time zones…"
+      emptyMessage="No matching time zones"
+      limit={20}
+      required={required}
+      size={size}
+      className={className}
+    />
+  )
+}