dashboard: add navbar to project settings page (#34414)

Adds a sticky navbar to the project settings page that has a faux-scrollbar which scrolls alongside the main content to indicate how far you are scrolled in the navbar. Also, the elements that are currently in view are highlighted.

Clicking on a nav item scrolls that section into view.

URL hash matching one of the section ids will scroll directly to that section, making docs links easier to use.

GitOrigin-RevId: 12fea75c1d8da03c1125ccc5f74e7c0abde400be

Author: atrakh

npm-packages/dashboard/src/components/projects/ProjectForm.tsx

@@ -58,58 +58,61 @@ export function ProjectForm({
         onSubmit={formState.handleSubmit}
         aria-label="Edit project settings"
       >
-        <div className="mb-6 flex max-w-xs flex-col gap-4">
-          <Tooltip
-            tip={
-              !hasAdminPermissions
-                ? "You do not have permission to update the project name."
-                : undefined
-            }
-          >
-            <TextInput
-              label="Project Name"
-              outerClassname="max-w-[20rem]"
-              placeholder="Enter a name for your project"
-              onChange={formState.handleChange}
-              value={formState.values.name}
-              id="name"
-              error={formState.errors.name}
-              disabled={!hasAdminPermissions}
-            />
-          </Tooltip>
+        <div className="flex flex-col gap-6">
+          <div className="flex max-w-xs flex-col gap-4">
+            <Tooltip
+              tip={
+                !hasAdminPermissions
+                  ? "You do not have permission to update the project name."
+                  : undefined
+              }
+            >
+              <TextInput
+                label="Project Name"
+                outerClassname="max-w-[20rem]"
+                placeholder="Enter a name for your project"
+                onChange={formState.handleChange}
+                value={formState.values.name}
+                id="name"
+                error={formState.errors.name}
+                disabled={!hasAdminPermissions}
+              />
+            </Tooltip>
 
-          <Tooltip
-            tip={
-              !hasAdminPermissions
-                ? "You do not have permission to update the project slug."
-                : undefined
-            }
-          >
-            <TextInput
-              label="Project Slug"
-              outerClassname="max-w-[20rem]"
-              placeholder="Enter a slug for your project"
-              onChange={formState.handleChange}
-              value={formState.values.slug}
-              Icon={CopyIcon}
-              action={() => copyToClipboard(formState.values.slug)}
-              id="slug"
-              error={formState.errors.slug}
-              disabled={!hasAdminPermissions}
-            />
-          </Tooltip>
-        </div>
+            <Tooltip
+              tip={
+                !hasAdminPermissions
+                  ? "You do not have permission to update the project slug."
+                  : undefined
+              }
+            >
+              <TextInput
+                label="Project Slug"
+                outerClassname="max-w-[20rem]"
+                placeholder="Enter a slug for your project"
+                onChange={formState.handleChange}
+                value={formState.values.slug}
+                Icon={CopyIcon}
+                action={() => copyToClipboard(formState.values.slug)}
+                id="slug"
+                error={formState.errors.slug}
+                disabled={!hasAdminPermissions}
+              />
+            </Tooltip>
+          </div>
 
-        <Button
-          className="float-right"
-          disabled={
-            !formState.dirty || formState.isSubmitting || !formState.isValid
-          }
-          type="submit"
-          aria-label="submit"
-        >
-          Save
-        </Button>
+          <div className="flex justify-end">
+            <Button
+              disabled={
+                !formState.dirty || formState.isSubmitting || !formState.isValid
+              }
+              type="submit"
+              aria-label="submit"
+            >
+              Save
+            </Button>
+          </div>
+        </div>
       </form>
     </Sheet>
   );

npm-packages/dashboard/src/hooks/useLaunchDarkly.tsx

@@ -7,7 +7,6 @@ const flagDefaults = {
   dataPageInactivityTime: -1,
   localDeployments: false,
   askAi: false,
-  projectTransfer: false,
 };
 
 function kebabCaseKeys(object: typeof flagDefaults) {