@kelpie/ui 0.7.0 → 0.9.0

package/src/pages/handbook/HandbookPage.tsx

@@ -234,7 +234,7 @@ export function HandbookLayout(): React.JSX.Element {
           {flat.length === 0 && (
             <p className="px-2 py-6 text-center text-[12px] text-ink-faint">No pages yet.</p>
           )}
-          {pages.hasMore && (
+          {pages.hasNext && (
             <p className="px-2 py-3 text-center text-[11px] text-ink-faint">
               This handbook has more pages than one request returns, so the tree below is
               incomplete.

package/src/pages/hiringDirectory.ts

@@ -45,7 +45,7 @@ export function useRoleCandidateCounts(roleIds: readonly string[]): RoleCandidat
   return {
     countFor: (roleId) => countByRole.get(roleId) ?? 0,
     isLoading: candidates.isLoading,
-    isComplete: !candidates.hasMore,
+    isComplete: !candidates.hasNext,
   }
 }
 
@@ -95,7 +95,7 @@ export function useCandidateNotes(candidateIds: readonly string[]): CandidateNot
   return {
     noteFor: (candidateId) => newestByCandidate.get(candidateId),
     isLoading: notes.isLoading,
-    isComplete: !notes.hasMore,
+    isComplete: !notes.hasNext,
   }
 }
 

package/src/pages/onboarding/WorkspaceStepPage.tsx

@@ -2,6 +2,7 @@ import { useState } from 'react'
 import type { FormEvent } from 'react'
 import { Link, Navigate, useNavigate } from 'react-router'
 
+import { useInstallSampleData } from '../../api/resources/sampleData.ts'
 import { useCreateWorkspace, useSession } from '../../api/resources/session.ts'
 import { ErrorPanel } from '../../components/QueryState.tsx'
 import { SubmitButton, TextField } from '../auth/AuthForm.tsx'
@@ -48,10 +49,12 @@ export function WorkspaceStepPage(): React.JSX.Element {
   const navigate = useNavigate()
   const { isSignedOut } = useSession()
   const createWorkspace = useCreateWorkspace()
+  const installSampleData = useInstallSampleData()
   const [name, setName] = useState('')
   const [slug, setSlug] = useState('')
   const [slugEdited, setSlugEdited] = useState(false)
   const [timezone] = useState(browserTimezone)
+  const [seedSample, setSeedSample] = useState(false)
 
   function changeName(value: string): void {
     setName(value)
@@ -71,7 +74,18 @@ export function WorkspaceStepPage(): React.JSX.Element {
 
     createWorkspace
       .runAsync({ name: name.trim(), slug: slug.trim(), timezone })
-      .then(() => navigate('/onboarding/invites', { replace: true }))
+      .then(async (workspace) => {
+        if (seedSample) {
+          // A refusal here does not block the wizard: the workspace itself is
+          // already created, and the invites step is what comes next either
+          // way. The error stays on screen so the reader sees what failed.
+          await installSampleData
+            .runAsync({ workspaceId: workspace.id })
+            .catch(() => undefined)
+        }
+
+        navigate('/onboarding/invites', { replace: true })
+      })
       .catch(() => undefined)
   }
 
@@ -110,11 +124,25 @@ export function WorkspaceStepPage(): React.JSX.Element {
         <p className="text-[11px] text-ink-faint">
           Timezone: {timezone}. Change it later in Admin → Workspace.
         </p>
+        <label className="flex items-start gap-2 text-[12px] text-ink">
+          <input
+            type="checkbox"
+            checked={seedSample}
+            onChange={(event) => setSeedSample(event.target.checked)}
+            className="mt-0.5 h-4 w-4 rounded border-border text-accent focus:ring-accent"
+          />
+          <span>
+            Install sample data — a small set of companies, people, deals, enquiries, opportunities,
+            fundraising, partnerships, and hiring so the workspace has something to look at.
+            You can delete it later.
+          </span>
+        </label>
         {createWorkspace.error !== null && <ErrorPanel error={createWorkspace.error} />}
+        {installSampleData.error !== null && <ErrorPanel error={installSampleData.error} />}
         <SubmitButton
           label="Continue"
-          pendingLabel="Creating…"
-          isPending={createWorkspace.isPending}
+          pendingLabel={installSampleData.isPending ? 'Installing sample data…' : 'Creating…'}
+          isPending={createWorkspace.isPending || installSampleData.isPending}
         />
       </form>
     </AuthLayout>

package/src/pages/positionDirectory.ts

@@ -64,7 +64,7 @@ export function usePeopleDirectory(personIds: readonly string[]): PeopleDirector
         .map((held) => companyNameById.get(held.companyId))
         .filter((name): name is string => name !== undefined),
     isLoading: positions.isLoading || companies.isLoading,
-    isComplete: !positions.hasMore && !companies.hasMore,
+    isComplete: !positions.hasNext && !companies.hasNext,
   }
 }
 
@@ -93,6 +93,6 @@ export function useCompanyHeadcounts(companyIds: readonly string[]): CompanyHead
   return {
     countFor: (companyId) => countByCompany.get(companyId) ?? 0,
     isLoading: positions.isLoading,
-    isComplete: !positions.hasMore,
+    isComplete: !positions.hasNext,
   }
 }

package/src/styles.css

@@ -58,8 +58,8 @@
   --surface-raised: #ffffff;
   --surface-sunken: #f4f4f5;
   --ink: #18181b;
-  --ink-muted: #71717a;
-  --ink-faint: #a1a1aa;
+  --ink-muted: #52525b;
+  --ink-faint: #71717a;
   --border: #e4e4e7;
   --border-strong: #d4d4d8;
   --accent: #0f766e;
@@ -75,7 +75,7 @@
   --warning-soft: #fffbeb;
   --sidebar: #fafafa;
   --sidebar-ink: #18181b;
-  --sidebar-muted: #71717a;
+  --sidebar-muted: #52525b;
   --sidebar-hover: #f4f4f5;
   --sidebar-active: #ececef;
   --sidebar-border: #e4e4e7;