@shipfox/client-workspace-settings 21.0.0 → 22.0.1

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@shipfox/client-workspace-settings",
   "license": "MIT",
-  "version": "21.0.0",
+  "version": "22.0.1",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/ShipfoxHQ/shipfox.git",
@@ -28,11 +28,11 @@
     "@swc/helpers": "^0.5.17",
     "@tanstack/react-form": "^1.32.0",
     "@shipfox/api-workspaces-dto": "12.0.0",
+    "@shipfox/client-auth": "22.0.1",
     "@shipfox/client-api": "6.0.1",
-    "@shipfox/client-auth": "21.0.0",
-    "@shipfox/client-shell": "21.0.0",
-    "@shipfox/react-ui": "2.0.0",
-    "@shipfox/client-ui": "21.0.0"
+    "@shipfox/client-shell": "22.0.1",
+    "@shipfox/react-ui": "2.1.0",
+    "@shipfox/client-ui": "22.0.0"
   },
   "peerDependencies": {
     "@tanstack/react-query": "^5.101.0",

package/src/components/members/workspace-members-section.tsx

@@ -34,7 +34,6 @@ import {useState} from 'react';
 import {
   getInvitationExpiry,
   getMemberRemovalRestriction,
-  memberCount,
   type PendingInvitation,
   type WorkspaceMember,
 } from '#core/membership.js';
@@ -74,18 +73,15 @@ function MembersSection({
   return (
     <section className="flex flex-col gap-group">
       <div className="flex flex-col gap-tight">
-        <Header variant="h3">Members</Header>
-        <Text size="sm" className="text-foreground-neutral-muted">
-          {query.isPending
-            ? 'Loading members…'
-            : `${memberCount(members)} ${memberCount(members) === 1 ? 'member' : 'members'}`}
-        </Text>
+        <Header variant="h1">Members</Header>
       </div>
 
-      {query.isPending ? <TableSkeleton rows={3} cols={3} /> : null}
+      {query.isPending ? <TableSkeleton rows={3} cols={3} label="Loading members" /> : null}
 
       {query.isError && query.data === undefined ? (
-        <QueryLoadError query={query} subject="members" />
+        <Panel>
+          <QueryLoadError query={query} subject="members" variant="panel" />
+        </Panel>
       ) : null}
 
       {members.length > 0 ? (
@@ -213,11 +209,6 @@ function PendingInvitationsSection({
       <div className="flex items-center justify-between gap-group">
         <div className="flex flex-col gap-tight">
           <Header variant="h3">Pending invitations</Header>
-          <Text size="sm" className="text-foreground-neutral-muted">
-            {query.isPending
-              ? 'Loading invitations…'
-              : `${invitations.length} ${invitations.length === 1 ? 'invitation' : 'invitations'}`}
-          </Text>
         </div>
         <InviteMemberModal
           open={inviteOpen}
@@ -227,13 +218,19 @@ function PendingInvitationsSection({
         />
       </div>
 
-      {query.isPending ? <TableSkeleton rows={2} cols={3} /> : null}
+      {query.isPending ? <TableSkeleton rows={2} cols={3} label="Loading invitations" /> : null}
 
       {query.isError && query.data === undefined ? (
-        <QueryLoadError query={query} subject="invitations" />
+        <Panel>
+          <QueryLoadError query={query} subject="invitations" variant="panel" />
+        </Panel>
       ) : null}
 
-      {query.data !== undefined && invitations.length === 0 ? <EmptyInvitations /> : null}
+      {query.data !== undefined && invitations.length === 0 ? (
+        <Panel>
+          <EmptyInvitations />
+        </Panel>
+      ) : null}
 
       {invitations.length > 0 ? (
         <Panel>
@@ -458,22 +455,26 @@ function EmptyInvitations() {
       icon="mailLine"
       title="No pending invitations."
       description="Invite someone above to grow your workspace."
+      variant="panel"
     />
   );
 }
 
-function TableSkeleton({rows, cols}: {rows: number; cols: number}) {
+function TableSkeleton({rows, cols, label}: {rows: number; cols: number; label: string}) {
   return (
-    <div className="flex flex-col gap-cluster">
+    <Panel role="status" aria-label={label} className="divide-y">
       {Array.from({length: rows}).map((_, rowIdx) => (
-        // biome-ignore lint/suspicious/noArrayIndexKey: stable placeholder rows
-        <div key={rowIdx} className="grid grid-cols-3 gap-group">
+        <div
+          // biome-ignore lint/suspicious/noArrayIndexKey: stable placeholder rows
+          key={rowIdx}
+          className="grid min-h-44 grid-cols-3 gap-group px-row py-row"
+        >
           {Array.from({length: cols}).map((__, colIdx) => (
             // biome-ignore lint/suspicious/noArrayIndexKey: stable placeholder cells
             <Skeleton key={colIdx} className="h-20" />
           ))}
         </div>
       ))}
-    </div>
+    </Panel>
   );
 }

package/src/components/workspace-settings-shell.tsx

@@ -1,5 +1,10 @@
-import {useMaybeActiveWorkspace} from '@shipfox/client-shell/runtime';
+import {
+  useAuthState,
+  useMaybeActiveWorkspace,
+  WorkspaceUnavailablePage,
+} from '@shipfox/client-shell/runtime';
 import {FullPageLoader} from '@shipfox/react-ui/loader';
+import {Navigate} from '@tanstack/react-router';
 import type {ReactNode} from 'react';
 
 interface WorkspaceSettingsShellProps {
@@ -7,8 +12,11 @@ interface WorkspaceSettingsShellProps {
 }
 
 export function WorkspaceSettingsShell({children}: WorkspaceSettingsShellProps) {
+  const auth = useAuthState();
   const workspace = useMaybeActiveWorkspace();
-  if (!workspace) return <FullPageLoader />;
+  if (auth.isLoading) return <FullPageLoader />;
+  if (!auth.isAuthenticated) return <Navigate to={'/auth/login' as never} replace />;
+  if (!workspace) return <WorkspaceUnavailablePage />;
 
   return children(workspace);
 }

package/src/pages/general-settings-page.tsx

@@ -8,8 +8,9 @@ import {displayNameFieldError, SlugChangeWarning, SlugField} from '@shipfox/clie
 import {Button} from '@shipfox/react-ui/button';
 import {Callout} from '@shipfox/react-ui/callout';
 import {FormField, FormFieldInput, fieldError} from '@shipfox/react-ui/form-field';
+import {Panel, PanelBody} from '@shipfox/react-ui/panel';
 import {toast} from '@shipfox/react-ui/toast';
-import {Header, Text} from '@shipfox/react-ui/typography';
+import {Header} from '@shipfox/react-ui/typography';
 import {useForm} from '@tanstack/react-form';
 import {useNavigate} from '@tanstack/react-router';
 import {useState} from 'react';
@@ -95,93 +96,94 @@ function WorkspaceGeneralForm({workspace}: {workspace: ReturnType<typeof useActi
   return (
     <>
       <div className="flex min-w-0 flex-col gap-section">
-        <header className="flex flex-col gap-inline">
-          <Header variant="h1">General</Header>
-          <Text size="sm" className="text-foreground-neutral-muted">
-            Update the workspace name and the slug used in its URLs.
-          </Text>
-        </header>
+        <Header variant="h1">General</Header>
 
-        {formError ? (
-          <Callout role="alert" type="error">
-            {formError}
-          </Callout>
-        ) : null}
+        <Panel>
+          <PanelBody className="gap-group p-panel">
+            {formError ? (
+              <Callout role="alert" type="error">
+                {formError}
+              </Callout>
+            ) : null}
 
-        <form
-          className="flex max-w-[560px] flex-col gap-group"
-          noValidate
-          onSubmit={(event) => {
-            event.preventDefault();
-            event.stopPropagation();
-            void form.handleSubmit();
-          }}
-        >
-          <form.Field
-            name="name"
-            validators={{
-              onBlur: ({value}) =>
-                displayNameFieldError(
-                  value,
-                  'Workspace name',
-                  createWorkspaceBodySchema.shape.name,
-                ),
-              onSubmit: ({value}) =>
-                displayNameFieldError(
-                  value,
-                  'Workspace name',
-                  createWorkspaceBodySchema.shape.name,
-                ),
-            }}
-          >
-            {(field) => (
-              <FormField
-                label="Workspace name"
-                id="workspace-settings-name"
-                error={fieldError(field)}
+            <form
+              className="flex w-full max-w-[560px] flex-col gap-group"
+              noValidate
+              onSubmit={(event) => {
+                event.preventDefault();
+                event.stopPropagation();
+                void form.handleSubmit();
+              }}
+            >
+              <form.Field
+                name="name"
+                validators={{
+                  onBlur: ({value}) =>
+                    displayNameFieldError(
+                      value,
+                      'Workspace name',
+                      createWorkspaceBodySchema.shape.name,
+                    ),
+                  onSubmit: ({value}) =>
+                    displayNameFieldError(
+                      value,
+                      'Workspace name',
+                      createWorkspaceBodySchema.shape.name,
+                    ),
+                }}
               >
-                <FormFieldInput
-                  name="name"
-                  type="text"
-                  value={field.state.value}
-                  onChange={(event) => field.handleChange(event.target.value)}
-                  onBlur={field.handleBlur}
-                />
-              </FormField>
-            )}
-          </form.Field>
+                {(field) => (
+                  <FormField
+                    label="Workspace name"
+                    id="workspace-settings-name"
+                    error={fieldError(field)}
+                  >
+                    <FormFieldInput
+                      name="name"
+                      type="text"
+                      value={field.state.value}
+                      onChange={(event) => field.handleChange(event.target.value)}
+                      onBlur={field.handleBlur}
+                    />
+                  </FormField>
+                )}
+              </form.Field>
 
-          <form.Field
-            name="slug"
-            validators={{
-              onBlur: createWorkspaceBodySchema.shape.slug,
-              onSubmit: createWorkspaceBodySchema.shape.slug,
-            }}
-          >
-            {(field) => (
-              <SlugField
-                id="workspace-settings-slug"
-                label="Workspace slug"
+              <form.Field
                 name="slug"
-                value={field.state.value}
-                onChange={(value) => field.handleChange(value)}
-                onBlur={field.handleBlur}
-                error={fieldError(field)}
-                description={<span className="break-all font-code">/w/{field.state.value}</span>}
-                placeholder="acme"
-                className="font-code"
-                currentSlug={workspace.slug}
-                checkEnabled
-                isValid={isSlugValid}
-                checkAvailability={checkWorkspaceSlugAvailability}
-              />
-            )}
-          </form.Field>
+                validators={{
+                  onBlur: createWorkspaceBodySchema.shape.slug,
+                  onSubmit: createWorkspaceBodySchema.shape.slug,
+                }}
+              >
+                {(field) => (
+                  <SlugField
+                    id="workspace-settings-slug"
+                    label="Workspace slug"
+                    name="slug"
+                    value={field.state.value}
+                    onChange={(value) => field.handleChange(value)}
+                    onBlur={field.handleBlur}
+                    error={fieldError(field)}
+                    description={
+                      <span className="break-all font-code">/w/{field.state.value}</span>
+                    }
+                    placeholder="acme"
+                    className="font-code"
+                    currentSlug={workspace.slug}
+                    checkEnabled
+                    isValid={isSlugValid}
+                    checkAvailability={checkWorkspaceSlugAvailability}
+                  />
+                )}
+              </form.Field>
 
-          <Button type="submit" isLoading={updateWorkspace.isPending} className="self-start">
-            Save changes
-          </Button>
-        </form>
+              <Button type="submit" isLoading={updateWorkspace.isPending} className="self-start">
+                Save changes
+              </Button>
+            </form>
+          </PanelBody>
+        </Panel>
       </div>
 
       <SlugChangeWarning