fix(permalinks): default permalink for create (#1843)

## Problem

We have quite a number of duplicate permalinks
this does not fix the problem completely, but it does allow for some sort of preventive measure to prevents accidental dups. 

we are not sure if of the number of agencies that use dup permalinks for the sake of playground, and it would be hard to enforce this until we have the functionality for playground out. more context [here](https://opengovproducts.slack.com/archives/CK68JNFHR/p1710317487152189)


## Solution

sane default when creating a page.

**Breaking Changes**

<!-- Does this PR contain any backward incompatible changes? If so, what are they and should there be special considerations for release? -->

- [ ] Yes - this PR contains breaking changes
  - Details ...
- [X] No - this PR is backwards compatible with ALL of the following feature flags in this [doc](https://www.notion.so/opengov/Existing-feature-flags-518ad2cdc325420893a105e88c432be5)


## Tests

follow video

https://github.com/isomerpages/isomercms-frontend/assets/42832651/3c3657dc-b9a1-4a40-9e49-07d71c32fd0a

- [ ] create a page, note that you should be unable to modify the permalink 
- [ ] edit page modal's functionality remains the same, we dont still allow them to change to whatever.

src/components/PageSettingsModal/PageSettingsModal.tsx

@@ -96,6 +96,7 @@ export const PageSettingsModal = ({
 }: PageSettingsModalParams) => {
   const { siteName, fileName } = params
   const isTiptapEnabled = useFeatureIsOn("is-tiptap-enabled")
+  const isPageCreated = !fileName
 
   const existingTitlesArray = pagesData
     .filter((page) => page.name !== fileName)
@@ -146,6 +147,23 @@ export const PageSettingsModal = ({
     })
   }
 
+  const getDefaultPermalink = (title: string) => {
+    if (!title) return ""
+    const titleSlug = title
+      .toLowerCase()
+      .replace(/[^a-z0-9]+/g, "-")
+      .replace(/^-+|-+$/g, "")
+    return `/${titleSlug}/`
+  }
+
+  const currTitle = watch("title")
+  const currPermalink = watch("permalink")
+  useEffect(() => {
+    if (isPageCreated && currPermalink !== getDefaultPermalink(currTitle)) {
+      setValue("permalink", getDefaultPermalink(currTitle))
+    }
+  }, [isPageCreated, setValue, currTitle, currPermalink])
+
   return (
     <Modal isOpen onClose={onClose}>
       <ModalOverlay />
@@ -169,32 +187,54 @@ export const PageSettingsModal = ({
                 isLink={false}
               />
               {/* Title */}
-              <FormControl isRequired isInvalid={!!errors.title?.message}>
-                <FormLabel>Page title</FormLabel>
+              <FormControl
+                isRequired
+                isInvalid={!!errors.title?.message}
+                mb="1rem"
+              >
+                <Box mb="0.75rem">
+                  <FormLabel mb={0}>Page title</FormLabel>
+                  <FormLabel.Description color="text.description">
+                    This appears on the top of the browser window or tab
+                  </FormLabel.Description>
+                </Box>
                 <Input
                   placeholder="Page title"
                   id="title"
                   {...register("title", { required: true })}
                 />
                 <FormErrorMessage>{errors.title?.message}</FormErrorMessage>
               </FormControl>
-              <br />
               {/* Permalink */}
-              <FormControl isInvalid={!!errors.permalink?.message} isRequired>
+              <FormControl
+                isInvalid={!!errors.permalink?.message}
+                isRequired
+                mb="1rem"
+              >
                 <Box mb="0.75rem">
                   <FormLabel mb={0}>Page URL</FormLabel>
                   <FormLabel.Description color="text.description">
-                    {`${siteUrl}${watch("permalink")}`}
+                    {isPageCreated
+                      ? "You can change this later in Page Settings."
+                      : `${siteUrl}${watch("permalink")}`}
                   </FormLabel.Description>
                 </Box>
                 <Input
                   {...register("permalink", { required: true })}
                   id="permalink"
                   placeholder="Insert /page-url or https://"
+                  isDisabled={isPageCreated}
                 />
+                {isPageCreated && (
+                  <Box my="0.5rem">
+                    <Text textStyle="body-2">
+                      {`${siteUrl}${watch("permalink")}`}
+                    </Text>
+                  </Box>
+                )}
+
                 <FormErrorMessage>{errors.permalink?.message}</FormErrorMessage>
               </FormControl>
-              <br />
               {isTiptapEnabled && (
                 <FormControl isInvalid={!!errors.permalink?.message} isRequired>
                   <Flex mb="0.75rem" alignItems="center">