@shipfox/client-workspace-settings 17.0.0 → 22.0.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@shipfox/client-workspace-settings",
   "license": "MIT",
-  "version": "17.0.0",
+  "version": "22.0.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/ShipfoxHQ/shipfox.git",
@@ -27,12 +27,12 @@
   "dependencies": {
     "@swc/helpers": "^0.5.17",
     "@tanstack/react-form": "^1.32.0",
-    "@shipfox/client-api": "6.0.1",
-    "@shipfox/client-shell": "17.0.0",
     "@shipfox/api-workspaces-dto": "12.0.0",
-    "@shipfox/client-auth": "17.0.0",
-    "@shipfox/client-ui": "17.0.0",
-    "@shipfox/react-ui": "1.2.0"
+    "@shipfox/client-api": "6.0.1",
+    "@shipfox/client-auth": "22.0.0",
+    "@shipfox/client-shell": "22.0.0",
+    "@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

@@ -16,6 +16,7 @@ import {
   ModalTitle,
   ModalTrigger,
 } from '@shipfox/react-ui/modal';
+import {Panel} from '@shipfox/react-ui/panel';
 import {Skeleton} from '@shipfox/react-ui/skeleton';
 import {
   Table,
@@ -81,35 +82,39 @@ function MembersSection({
         </Text>
       </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 ? (
-        <Table>
-          <TableHeader>
-            <TableRow>
-              <TableHead>Name</TableHead>
-              <TableHead>Email</TableHead>
-              <TableHead>Joined</TableHead>
-              <TableHead className="w-80 text-right">Actions</TableHead>
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            {members.map((member) => (
-              <MemberRow
-                key={member.id}
-                member={member}
-                members={members}
-                currentUserId={auth.user?.id}
-                workspaceId={workspaceId}
-                workspaceName={workspaceName}
-              />
-            ))}
-          </TableBody>
-        </Table>
+        <Panel>
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>Name</TableHead>
+                <TableHead>Email</TableHead>
+                <TableHead>Joined</TableHead>
+                <TableHead className="w-80 text-right">Actions</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {members.map((member) => (
+                <MemberRow
+                  key={member.id}
+                  member={member}
+                  members={members}
+                  currentUserId={auth.user?.id}
+                  workspaceId={workspaceId}
+                  workspaceName={workspaceName}
+                />
+              ))}
+            </TableBody>
+          </Table>
+        </Panel>
       ) : null}
     </section>
   );
@@ -224,34 +229,42 @@ 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 ? (
-        <Table>
-          <TableHeader>
-            <TableRow>
-              <TableHead>Email</TableHead>
-              <TableHead>Invited by</TableHead>
-              <TableHead>Expires</TableHead>
-              <TableHead className="w-80 text-right">Actions</TableHead>
-            </TableRow>
-          </TableHeader>
-          <TableBody>
-            {invitations.map((invitation) => (
-              <InvitationRow
-                key={invitation.id}
-                invitation={invitation}
-                workspaceId={workspaceId}
-              />
-            ))}
-          </TableBody>
-        </Table>
+        <Panel>
+          <Table>
+            <TableHeader>
+              <TableRow>
+                <TableHead>Email</TableHead>
+                <TableHead>Invited by</TableHead>
+                <TableHead>Expires</TableHead>
+                <TableHead className="w-80 text-right">Actions</TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {invitations.map((invitation) => (
+                <InvitationRow
+                  key={invitation.id}
+                  invitation={invitation}
+                  workspaceId={workspaceId}
+                />
+              ))}
+            </TableBody>
+          </Table>
+        </Panel>
       ) : null}
     </section>
   );
@@ -453,22 +466,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/routes/general.tsx

@@ -1,4 +1,7 @@
 import {defineRoute} from '@shipfox/client-shell/runtime';
 import {GeneralSettingsPage} from '#pages/general-settings-page.js';
 
-export default defineRoute({component: GeneralSettingsPage});
+export default defineRoute({
+  staticData: {frame: 'content'},
+  component: GeneralSettingsPage,
+});

package/src/routes/index.tsx

@@ -2,6 +2,7 @@ import {defineRoute} from '@shipfox/client-shell/runtime';
 import {redirect} from '@tanstack/react-router';
 
 export default defineRoute({
+  staticData: {frame: 'content'},
   beforeLoad: ({params}: {params: {workspaceSlug: string}}) => {
     throw redirect({
       to: '/w/$workspaceSlug/settings/members',

package/src/routes/members.tsx

@@ -1,3 +1,6 @@
 import {defineRoute} from '@shipfox/client-shell/runtime';
 import {MembersSettingsPage} from '#pages/members-settings-page.js';
-export default defineRoute({component: MembersSettingsPage});
+export default defineRoute({
+  staticData: {frame: 'content'},
+  component: MembersSettingsPage,
+});