feat: add edit workspace url button

apps/web/src/views/board/components/UpdateBoardSlugButton.tsx

@@ -14,7 +14,7 @@ const UpdateBoardSlugButton = ({
   return (
     <button
       onClick={handleOnClick}
-      className="flex cursor-pointer items-center gap-2 rounded-full border-[1px] bg-light-50 p-1 pl-4 pr-1 text-sm text-light-950 hover:bg-light-100 dark:border-dark-600 dark:bg-dark-50 dark:text-dark-900 dark:hover:bg-dark-100"
+      className="hidden cursor-pointer items-center gap-2 rounded-full border-[1px] bg-light-50 p-1 pl-4 pr-1 text-sm text-light-950 hover:bg-light-100 dark:border-dark-600 dark:bg-dark-50 dark:text-dark-900 dark:hover:bg-dark-100 xl:flex"
     >
       <div className="flex items-center">
         <span>

apps/web/src/views/board/components/UpdateBoardSlugForm.tsx

@@ -135,7 +135,7 @@ export function UpdateBoardSlugForm({
               ? t`This board URL has already been taken`
               : undefined)
           }
-          prefix={`${env("NEXT_PUBLIC_BASE_URL")}/${workspaceSlug}/`}
+          prefix={`${env("NEXT_PUBLIC_KAN_ENV") === "cloud" ? "kan.bn" : env("NEXT_PUBLIC_BASE_URL")}/${workspaceSlug}/`}
           onKeyDown={async (e) => {
             if (e.key === "Enter") {
               e.preventDefault();
@@ -152,7 +152,14 @@ export function UpdateBoardSlugForm({
         />
       </div>
       <div className="mt-12 flex items-center justify-end border-t border-light-600 px-5 pb-5 pt-5 dark:border-dark-600">
-        <div>
+        <div className="flex items-center gap-2">
+          <Button
+            variant="secondary"
+            href="/settings?edit=workspace_url"
+            onClick={closeModal}
+          >
+            {t`Edit workspace URL`}
+          </Button>
           <Button
             type="submit"
             isLoading={updateBoardSlug.isPending}

apps/web/src/views/settings/index.tsx

@@ -1,6 +1,7 @@
+import { useRouter } from "next/router";
 import { t } from "@lingui/core/macro";
 import { env } from "next-runtime-env";
-import { useEffect } from "react";
+import { useEffect, useRef } from "react";
 import { HiMiniArrowTopRightOnSquare } from "react-icons/hi2";
 
 import Button from "~/components/Button";
@@ -27,6 +28,9 @@ export default function SettingsPage() {
   const { workspace } = useWorkspace();
   const utils = api.useUtils();
   const { showPopup } = usePopup();
+  const router = useRouter();
+  const workspaceUrlSectionRef = useRef<HTMLDivElement>(null);
+  const scrollContainerRef = useRef<HTMLDivElement>(null);
 
   const { data } = api.user.getUser.useQuery();
 
@@ -59,6 +63,24 @@ export default function SettingsPage() {
     };
   }, [refetchIntegrations]);
 
+  useEffect(() => {
+    if (
+      router.query.edit === "workspace_url" &&
+      workspaceUrlSectionRef.current &&
+      scrollContainerRef.current
+    ) {
+      const element = workspaceUrlSectionRef.current;
+      const container = scrollContainerRef.current;
+
+      container.scrollTop = element.offsetTop - 40;
+
+      const input = element.querySelector('input[type="text"]');
+      if (input instanceof HTMLInputElement) {
+        input.focus();
+      }
+    }
+  }, [router.query.edit]);
+
   const { mutateAsync: disconnectTrello } =
     api.integration.disconnect.useMutation({
       onSuccess: () => {
@@ -104,7 +126,10 @@ export default function SettingsPage() {
   return (
     <>
       <div className="flex h-full w-full flex-col overflow-hidden">
-        <div className="h-full max-h-[calc(100vdh-3rem)] overflow-y-auto md:max-h-[calc(100vdh-4rem)]">
+        <div
+          ref={scrollContainerRef}
+          className="h-full max-h-[calc(100vdh-3rem)] overflow-y-auto md:max-h-[calc(100vdh-4rem)]"
+        >
           <PageHead title={t`Settings | ${workspace.name ?? "Workspace"}`} />
           <div className="m-auto max-w-[1600px] px-5 py-6 md:px-28 md:py-12">
             <div className="mb-8 flex w-full justify-between">
@@ -134,14 +159,16 @@ export default function SettingsPage() {
                 workspaceName={workspace.name}
               />
 
-              <h2 className="mb-4 mt-8 text-[14px] text-neutral-900 dark:text-dark-1000">
+              <div ref={workspaceUrlSectionRef}>
-                {t`Workspace URL`}
+                <h2 className="mb-4 mt-8 text-[14px] text-neutral-900 dark:text-dark-1000">
-              </h2>
+                  {t`Workspace URL`}
-              <UpdateWorkspaceUrlForm
+                </h2>
-                workspacePublicId={workspace.publicId}
+                <UpdateWorkspaceUrlForm
-                workspaceUrl={workspace.slug ?? ""}
+                  workspacePublicId={workspace.publicId}
-                workspacePlan={workspace.plan ?? "free"}
+                  workspaceUrl={workspace.slug ?? ""}
-              />
+                  workspacePlan={workspace.plan ?? "free"}
+                />
+              </div>
 
               <h2 className="mb-4 mt-8 text-[14px] text-neutral-900 dark:text-dark-1000">
                 {t`Workspace description`}