From 7adc9c01e01eed905a15ea0263c0dd755d88da2b Mon Sep 17 00:00:00 2001
From: Mathias Oterhals Myklebust <mom@variant.no>
Date: Tue, 3 Sep 2024 10:23:37 +0200
Subject: [PATCH] feat(redirect): slash prefix in slug input

---
 studio/components/PrefixedSlugInput.tsx       | 21 ++++++++++++++
 .../components/prefixedSlugInput.module.css   | 28 +++++++++++++++++++
 studio/schemas/documents/redirect.ts          | 12 +++++---
 3 files changed, 57 insertions(+), 4 deletions(-)
 create mode 100644 studio/components/PrefixedSlugInput.tsx
 create mode 100644 studio/components/prefixedSlugInput.module.css

diff --git a/studio/components/PrefixedSlugInput.tsx b/studio/components/PrefixedSlugInput.tsx
new file mode 100644
index 000000000..9d4e74231
--- /dev/null
+++ b/studio/components/PrefixedSlugInput.tsx
@@ -0,0 +1,21 @@
+import { SlugInputProps } from "sanity";
+import styles from "./prefixedSlugInput.module.css";
+import { useTheme } from "@sanity/ui";
+
+type PrefixedSlugInputProps = SlugInputProps & {
+  prefix: string;
+};
+
+const PrefixedSlugInput = ({ prefix, ...props }: PrefixedSlugInputProps) => {
+  const theme = useTheme();
+  const prefersDark = theme.sanity.v2?.color._dark ?? false;
+
+  return (
+    <div className={`${prefersDark ? `${styles.dark} ` : ""}${styles.wrapper}`}>
+      <span className={styles.prefixWrapper}>{prefix}</span>
+      {props.renderDefault(props)}
+    </div>
+  );
+};
+
+export default PrefixedSlugInput;
diff --git a/studio/components/prefixedSlugInput.module.css b/studio/components/prefixedSlugInput.module.css
new file mode 100644
index 000000000..b46ce6666
--- /dev/null
+++ b/studio/components/prefixedSlugInput.module.css
@@ -0,0 +1,28 @@
+.wrapper {
+  display: flex;
+}
+
+.wrapper input {
+  padding-left: 0.5rem;
+  border-left: none;
+}
+
+.prefixWrapper + * * {
+  border-top-left-radius: 0 !important;
+  border-bottom-left-radius: 0 !important;
+}
+
+.prefixWrapper {
+  background-color: rgb(246, 246, 248);
+  border-radius: 4px 0 0 4px;
+  padding: 0.375rem 0.5rem 0.375rem 0.5rem;
+  border: 1px solid rgb(225, 226, 230);
+  border-right: none;
+}
+
+[data-scheme="dark"] .prefixWrapper {
+  background-color: rgb(25, 26, 36);
+  border: 1px solid rgb(41, 44, 61);
+  border-right: none;
+  color: white;
+}
diff --git a/studio/schemas/documents/redirect.ts b/studio/schemas/documents/redirect.ts
index 6d873b568..8acddc78d 100644
--- a/studio/schemas/documents/redirect.ts
+++ b/studio/schemas/documents/redirect.ts
@@ -4,13 +4,11 @@ import RedirectThumbnail from "../../components/RedirectThumbnail";
 import { pageBuilderID } from "../builders/pageBuilder";
 import { blogId } from "./blog";
 import { compensationsId } from "./compensations";
+import PrefixedSlugInput from "../../components/PrefixedSlugInput";
 
 const slugValidator = (rule: SlugRule) =>
   rule.required().custom((value: Slug | undefined) => {
     if (!value || !value.current) return "Can't be blank";
-    if (!value.current.startsWith("/")) {
-      return "The path must start with a forward slash ('/')";
-    }
     return true;
   });
 
@@ -37,6 +35,9 @@ export const redirect = defineType({
       description: "Which url should this redirect apply for",
       type: "slug",
       validation: slugValidator,
+      components: {
+        input: (props) => PrefixedSlugInput({ prefix: "/", ...props }),
+      },
     }),
     defineField({
       name: "destination",
@@ -85,6 +86,9 @@ export const redirect = defineType({
               return true;
             },
           },
+          components: {
+            input: (props) => PrefixedSlugInput({ prefix: "/", ...props }),
+          },
         }),
       ],
     }),
@@ -116,7 +120,7 @@ export const redirect = defineType({
         destinationType === "slug" ? destinationSlug : destinationReferenceSlug;
       const title =
         source && destination
-          ? `${source.current} → ${destination}`
+          ? `/${source.current} → /${destination}`
           : undefined;
       return {
         title,