make editing skills full page

Author: icecrasher321

apps/sim/app/workspace/[workspaceId]/integrations/[block]/integration-skills-section.tsx

@@ -2,11 +2,11 @@
 
 import { useMemo, useRef, useState } from 'react'
 import { Chip, toast } from '@sim/emcn'
-import { getErrorMessage } from '@sim/utils/errors'
 import { Check, Plus } from 'lucide-react'
 import { usePostHog } from 'posthog-js/react'
 import { captureEvent } from '@/lib/posthog/client'
 import { SkillTile } from '@/app/workspace/[workspaceId]/components'
+import { isSkillNameConflictError } from '@/app/workspace/[workspaceId]/skills/components/utils'
 import type { SuggestedSkill } from '@/blocks/types'
 import { useCreateSkill, useSkills } from '@/hooks/queries/skills'
 
@@ -81,7 +81,7 @@ export function IntegrationSkillsSection({
     } catch (error) {
       // A name conflict means someone already added this skill but restricted
       // it — retrying can never succeed, so say what to actually do.
-      if (getErrorMessage(error, '').includes('is unavailable')) {
+      if (isSkillNameConflictError(error)) {
         toast.error(
           `"${skill.name}" already exists in this workspace but isn't shared with you — ask a skill admin for access`
         )

apps/sim/app/workspace/[workspaceId]/skills/[skillId]/components/skill-members-card.tsx

@@ -0,0 +1,73 @@
+'use client'
+
+import { Chip } from '@sim/emcn'
+import { MemberRow } from '@/components/permissions'
+import { DetailSection } from '@/app/workspace/[workspaceId]/components/credential-detail'
+import {
+  type SkillMembersController,
+  skillMemberLockReason,
+} from '@/app/workspace/[workspaceId]/skills/components/skill-members'
+
+interface SkillMembersCardProps {
+  members: SkillMembersController
+  /** Whether the viewer is a skill admin (explicit or derived workspace admin). */
+  isAdmin: boolean
+  workspaceShared: boolean
+}
+
+/**
+ * Page-styled member roster for the skill detail page: active members with
+ * role/remove controls, and — for admins — removed (denied) members with a
+ * restore action. Adding people happens through the header Share action.
+ */
+export function SkillMembersCard({ members, isAdmin, workspaceShared }: SkillMembersCardProps) {
+  return (
+    <>
+      <DetailSection title={`Members (${members.activeMembers.length})`}>
+        {members.membersError ? (
+          <span className='text-[12px] text-[var(--text-muted)]'>
+            Couldn't load members. You may no longer have access to this skill.
+          </span>
+        ) : members.membersLoading ? null : (
+          <div className='flex flex-col gap-2'>
+            {members.activeMembers.map((member) => {
+              const lockReason = skillMemberLockReason(member, {
+                workspaceShared,
+                explicitAdminCount: members.explicitAdminCount,
+              })
+              return (
+                <MemberRow
+                  key={member.id}
+                  member={member}
+                  lockReason={lockReason}
+                  canManage={isAdmin}
+                  roleDisabled={!isAdmin || lockReason !== null}
+                  removeDisabled={lockReason !== null}
+                  onRoleChange={(role) => members.changeMemberRole(member.userId, role)}
+                  onRemove={() => members.removeMember(member.userId)}
+                />
+              )
+            })}
+          </div>
+        )}
+      </DetailSection>
+
+      {isAdmin && members.removedMembers.length > 0 && (
+        <DetailSection title={`Removed (${members.removedMembers.length})`}>
+          <div className='flex flex-col gap-2'>
+            {members.removedMembers.map((member) => (
+              <div key={member.id} className='flex items-center justify-between gap-2'>
+                <span className='min-w-0 truncate text-[14px] text-[var(--text-muted)]'>
+                  {member.userName || member.userEmail || member.userId}
+                </span>
+                <Chip onClick={() => members.restoreMember(member.userId)} flush>
+                  Restore
+                </Chip>
+              </div>
+            ))}
+          </div>
+        </DetailSection>
+      )}
+    </>
+  )
+}

apps/sim/app/workspace/[workspaceId]/skills/[skillId]/page.tsx

@@ -0,0 +1,15 @@
+import type { Metadata } from 'next'
+import { SkillDetail } from '@/app/workspace/[workspaceId]/skills/[skillId]/skill-detail'
+
+export const metadata: Metadata = {
+  title: 'Skill',
+}
+
+export default async function SkillDetailPage({
+  params,
+}: {
+  params: Promise<{ workspaceId: string; skillId: string }>
+}) {
+  const { workspaceId, skillId } = await params
+  return <SkillDetail workspaceId={workspaceId} skillId={skillId} />
+}