improvement(sim-links): quieter link editor; names take shape as you type

Author: waleedlatif1

apps/docs/content/docs/search/sim-links.mdx

@@ -26,7 +26,7 @@ Type `sim`, press **Space**, then type a link name and press **Enter**. Chrome a
 ## Create a link
 
 1. Open **Sim Links** and select **New link**.
-2. Enter the **Destination URL** and a **Name**. Names can use letters, numbers, and `. : @ & ~ - _`.
+2. Enter the **Destination URL** and a **Name**. Names use letters, numbers, and `. : @ & ~ - _`; spaces become hyphens as you type.
 3. Optionally add a **Description**, then select **Create**.
 
 To share a link, right-click it and select **Copy link**.
@@ -49,8 +49,8 @@ Values fill each `{*}` in order, and the last `{*}` takes the rest. A link with
 
 By default, any member can edit or delete a link. The link's creator and organization admins can change two options under **Access**:
 
-- **Unlisted**: only the creator and admins see the link on the Sim Links page. Anyone with the name can still open it.
-- **Restricted**: only the creator and admins can edit or delete the link.
+- **Hide from the Sim Links page**: only the creator and admins see the link in the list, marked **Unlisted**. Anyone with the name can still open it.
+- **Only you and admins can edit**: only the creator and admins can edit or delete the link, marked **Restricted**.
 
 Changes to links are recorded in your organization's [audit logs](/platform/enterprise/audit-logs).
 

apps/sim/app/o/[organizationId]/links/sim-link-modal.tsx

@@ -18,11 +18,18 @@ import {
   SIM_LINK_NAME_MAX_LENGTH,
   SIM_LINK_VARIABLE,
   simLinkFieldsSchema,
+  toSimLinkName,
 } from '@/lib/sim-links/validation'
 import { useCreateSimLink, useUpdateSimLink } from '@/hooks/queries/sim-links'
 
 type Field = 'name' | 'url' | 'defaultUrl' | 'description'
 
+const SIM_LINKS_DOCS_URL = 'https://docs.sim.ai/search/sim-links'
+
+function openDocs() {
+  window.open(SIM_LINKS_DOCS_URL, '_blank', 'noopener,noreferrer')
+}
+
 interface SimLinkModalProps {
   organizationId: string
   onClose: () => void
@@ -101,11 +108,6 @@ export function SimLinkModal({ organizationId, onClose, link, initialName }: Sim
           value={draft.url}
           onChange={(value) => change('url', value)}
           error={errors.url}
-          hint={
-            variable
-              ? `Variable link: sim/${draft.name || 'name'}/value fills each ${SIM_LINK_VARIABLE}.`
-              : `Add ${SIM_LINK_VARIABLE} where a value typed after the name should go.`
-          }
         />
         {variable && (
           <ChipModalField
@@ -117,7 +119,7 @@ export function SimLinkModal({ organizationId, onClose, link, initialName }: Sim
             value={draft.defaultUrl ?? ''}
             onChange={(value) => change('defaultUrl', value || null)}
             error={errors.defaultUrl}
-            hint={`Opens when sim/${draft.name || 'name'} is used without a value.`}
+            hint={`Opens when no value fills ${SIM_LINK_VARIABLE}.`}
           />
         )}
         <ChipModalField
@@ -128,9 +130,8 @@ export function SimLinkModal({ organizationId, onClose, link, initialName }: Sim
           placeholder='handbook'
           maxLength={SIM_LINK_NAME_MAX_LENGTH}
           value={draft.name}
-          onChange={(value) => change('name', value)}
+          onChange={(value) => change('name', toSimLinkName(value))}
           error={errors.name ?? (nameTaken ? mutation.error?.message : undefined)}
-          hint='Letters, numbers, and . : @ & ~ - _. Case and punctuation are ignored, so sim/Q4-goals is sim/q4goals.'
         />
         <ChipModalField
           type='input'
@@ -146,9 +147,7 @@ export function SimLinkModal({ organizationId, onClose, link, initialName }: Sim
           type='custom'
           title='Access'
           hint={
-            canManage
-              ? 'Anyone in your organization can open this link.'
-              : 'Only the creator or an organization admin can change access.'
+            canManage ? undefined : 'Only the creator or an organization admin can change access.'
           }
         >
           {(aria) => (
@@ -162,7 +161,7 @@ export function SimLinkModal({ organizationId, onClose, link, initialName }: Sim
                   onCheckedChange={(checked) => change('unlisted', checked === true)}
                 />
                 <span className='text-[var(--text-primary)] text-small'>
-                  Hide from the Sim Links page for everyone except you and admins
+                  Hide from the Sim Links page
                 </span>
               </label>
               <label htmlFor={restrictEditId} className='flex cursor-pointer items-center gap-2'>
@@ -174,7 +173,7 @@ export function SimLinkModal({ organizationId, onClose, link, initialName }: Sim
                   onCheckedChange={(checked) => change('restrictEdit', checked === true)}
                 />
                 <span className='text-[var(--text-primary)] text-small'>
-                  Restrict editing to you and admins
+                  Only you and admins can edit
                 </span>
               </label>
             </div>
@@ -184,6 +183,7 @@ export function SimLinkModal({ organizationId, onClose, link, initialName }: Sim
       </ChipModalBody>
       <ChipModalFooter
         onCancel={onClose}
+        secondaryActions={[{ label: 'Learn more', onClick: openDocs }]}
         primaryAction={{
           label: mutation.isPending ? pendingLabel : actionLabel,
           disabled: mutation.isPending,

apps/sim/app/o/[organizationId]/links/sim-links.tsx

@@ -89,6 +89,7 @@ export function SimLinks({ organizationId }: SimLinksProps) {
   const loaded = useMemo(() => links.data?.pages.flatMap((page) => page.links) ?? [], [links.data])
   const linksById = useMemo(() => new Map(loaded.map((link) => [link.id, link])), [loaded])
   const menuLink = menuLinkId ? linksById.get(menuLinkId) : undefined
+  if (menuLinkId && !menuLink) setMenuLinkId(null)
 
   const rows: ResourceRow[] = useMemo(
     () =>

apps/sim/lib/sim-links/validation.ts

@@ -2,6 +2,7 @@ import { z } from 'zod'
 
 const NAME_PATTERN = /^[A-Za-z0-9.:@&~_-]+$/
 const NAME_PUNCTUATION = /[.:@&~_-]/g
+const NAME_DISALLOWED = /[^A-Za-z0-9.:@&~_-]/g
 export const SIM_LINK_NAME_MAX_LENGTH = 64
 export const SIM_LINK_DESCRIPTION_MAX_LENGTH = 500
 const URL_MAX_LENGTH = 2048
@@ -18,6 +19,17 @@ export function normalizeSimLinkName(name: string): string {
   return name.toLowerCase().replace(NAME_PUNCTUATION, '')
 }
 
+/**
+ * Shapes typed or pasted text into a name as it is entered: a leading `sim/` is dropped, spaces
+ * and slashes become hyphens, and any other character a name can't hold is removed.
+ */
+export function toSimLinkName(input: string): string {
+  return input
+    .replace(/^sim\//i, '')
+    .replace(/[\s/]+/g, '-')
+    .replace(NAME_DISALLOWED, '')
+}
+
 export function isVariableSimLinkUrl(url: string): boolean {
   return url.includes(SIM_LINK_VARIABLE)
 }