Custom add and create flow polish

app/(app)/create/components/ApplicableScopeField.tsx

@@ -35,6 +35,8 @@ export interface ApplicableScopeFieldProps {
    * Optional placeholder for the inline input. Defaults to `addLabel`.
    */
   inputPlaceholder?: string;
+  /** When true, scope chips and add affordance are non-interactive. */
+  readOnly?: boolean;
   className?: string;
 }
 
@@ -46,6 +48,7 @@ function ApplicableScopeFieldComponent({
   onToggleScope,
   onAddScope,
   inputPlaceholder,
+  readOnly = false,
   className = "",
 }: ApplicableScopeFieldProps) {
   const [draft, setDraft] = useState("");
@@ -78,13 +81,13 @@ function ApplicableScopeFieldComponent({
               state={isSelected ? "selected" : "disabled"}
               palette="default"
               size="s"
-              disabled={false}
-              onClick={() => onToggleScope(scope)}
+              disabled={readOnly}
+              onClick={() => !readOnly && onToggleScope(scope)}
               ariaLabel={`${isSelected ? "Deselect" : "Select"} ${scope}`}
             />
           );
         })}
-        {isAdding ? (
+        {readOnly ? null : isAdding ? (
           <input
             type="text"
             autoFocus