Merge pull request 'feat(share): custom /l/:alias pretty links (share_aliases table) (#205)' (#214) from feat/205-share-aliases into develop

Reviewed-on: #214

apps/client/src/features/share/components/share-alias-section.tsx

@@ -0,0 +1,237 @@
+import {
+  ActionIcon,
+  Button,
+  Group,
+  Modal,
+  Text,
+  TextInput,
+} from "@mantine/core";
+import { IconExternalLink } from "@tabler/icons-react";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import CopyTextButton from "@/components/common/copy.tsx";
+import { getAppUrl } from "@/lib/config.ts";
+import {
+  useRemoveShareAliasMutation,
+  useSetShareAliasMutation,
+  useShareAliasForPageQuery,
+} from "@/features/share/queries/share-query.ts";
+import { checkShareAliasAvailability } from "@/features/share/services/share-service.ts";
+import {
+  isValidShareAlias,
+  normalizeShareAlias,
+} from "@/features/share/share-alias.util.ts";
+
+interface ShareAliasSectionProps {
+  pageId: string;
+  readOnly: boolean;
+}
+
+// The prefix label shown next to the slug input, e.g. "docs.example.com/l/".
+function aliasPrefixLabel(): string {
+  const url = getAppUrl();
+  const host = url.replace(/^https?:\/\//, "").replace(/\/+$/, "");
+  return `${host}/l/`;
+}
+
+export default function ShareAliasSection({
+  pageId,
+  readOnly,
+}: ShareAliasSectionProps) {
+  const { t } = useTranslation();
+  const { data: currentAlias } = useShareAliasForPageQuery(pageId);
+  const setAliasMutation = useSetShareAliasMutation();
+  const removeAliasMutation = useRemoveShareAliasMutation();
+
+  const [value, setValue] = useState("");
+  const [availability, setAvailability] = useState<{
+    valid: boolean;
+    available: boolean;
+    currentPageId: string | null;
+  } | null>(null);
+  const [reassign, setReassign] = useState<{
+    alias: string;
+    currentPageTitle: string | null;
+  } | null>(null);
+
+  // Seed the input from the page's current alias (if any).
+  useEffect(() => {
+    setValue(currentAlias?.alias ?? "");
+  }, [currentAlias?.alias, pageId]);
+
+  const normalized = useMemo(() => normalizeShareAlias(value), [value]);
+  const isValid = isValidShareAlias(normalized);
+  const unchanged = currentAlias?.alias === normalized;
+
+  // Debounced availability probe (skips when invalid or unchanged).
+  const debounceRef = useRef<ReturnType<typeof setTimeout>>();
+  useEffect(() => {
+    setAvailability(null);
+    if (!isValid || unchanged) return;
+    debounceRef.current && clearTimeout(debounceRef.current);
+    debounceRef.current = setTimeout(async () => {
+      try {
+        const res = await checkShareAliasAvailability(normalized);
+        setAvailability({
+          valid: res.valid,
+          available: res.available,
+          currentPageId: res.currentPageId,
+        });
+      } catch {
+        setAvailability(null);
+      }
+    }, 400);
+    return () => {
+      debounceRef.current && clearTimeout(debounceRef.current);
+    };
+  }, [normalized, isValid, unchanged]);
+
+  const prettyLink = currentAlias?.alias
+    ? `${getAppUrl()}/l/${currentAlias.alias}`
+    : null;
+
+  const handleSave = async (confirmReassign = false) => {
+    try {
+      await setAliasMutation.mutateAsync({
+        pageId,
+        alias: normalized,
+        confirmReassign,
+      });
+      setReassign(null);
+    } catch (error: any) {
+      // The address already points at another page: prompt to move it here.
+      if (error?.status === 409 || error?.response?.status === 409) {
+        const data = error?.response?.data;
+        if (data?.code === "ALIAS_REASSIGN_REQUIRED") {
+          setReassign({
+            alias: normalized,
+            currentPageTitle: data?.currentPageTitle ?? null,
+          });
+        }
+      }
+    }
+  };
+
+  const handleRemove = async () => {
+    if (!currentAlias?.id) return;
+    await removeAliasMutation.mutateAsync(currentAlias.id);
+    setValue("");
+  };
+
+  const showInvalid = normalized.length > 0 && !isValid;
+  const showTaken =
+    isValid && !unchanged && availability && !availability.available;
+
+  return (
+    <>
+      <Text size="sm" fw={500} mt="md">
+        {t("Custom address")}
+      </Text>
+      <Text size="xs" c="dimmed" mb={4}>
+        {t("A short, memorable link you can point at any shared page.")}
+      </Text>
+
+      {prettyLink && (
+        <Group my="xs" gap={4} wrap="nowrap">
+          <TextInput
+            variant="filled"
+            value={prettyLink}
+            readOnly
+            rightSection={<CopyTextButton text={prettyLink} />}
+            style={{ width: "100%" }}
+          />
+          <ActionIcon
+            component="a"
+            variant="default"
+            target="_blank"
+            href={prettyLink}
+            size="sm"
+          >
+            <IconExternalLink size={16} />
+          </ActionIcon>
+        </Group>
+      )}
+
+      <TextInput
+        value={value}
+        onChange={(e) => setValue(e.currentTarget.value)}
+        // Show the canonical form once the user pauses so what they type maps
+        // visibly to what gets stored.
+        onBlur={() => setValue(normalized)}
+        leftSection={
+          <Text size="xs" c="dimmed" pl={4} style={{ whiteSpace: "nowrap" }}>
+            {aliasPrefixLabel()}
+          </Text>
+        }
+        leftSectionWidth={Math.min(aliasPrefixLabel().length * 7 + 12, 180)}
+        placeholder={t("my-page")}
+        disabled={readOnly}
+        error={
+          showInvalid
+            ? t("Use 2-60 lowercase letters, digits and hyphens")
+            : showTaken
+              ? t("This address is already in use")
+              : undefined
+        }
+      />
+
+      <Group mt="xs" gap="xs">
+        <Button
+          size="compact-sm"
+          onClick={() => handleSave(false)}
+          loading={setAliasMutation.isPending}
+          disabled={readOnly || !isValid || unchanged}
+        >
+          {t("Save")}
+        </Button>
+        {currentAlias?.id && (
+          <Button
+            size="compact-sm"
+            variant="default"
+            color="red"
+            onClick={handleRemove}
+            loading={removeAliasMutation.isPending}
+            disabled={readOnly}
+          >
+            {t("Remove")}
+          </Button>
+        )}
+      </Group>
+
+      <Modal
+        opened={!!reassign}
+        onClose={() => setReassign(null)}
+        title={t("Move custom address?")}
+        centered
+        size="sm"
+      >
+        <Text size="sm">
+          {reassign?.currentPageTitle
+            ? t(
+                'The address "{{alias}}" currently points to "{{title}}". Move it to this page?',
+                {
+                  alias: reassign?.alias,
+                  title: reassign?.currentPageTitle,
+                },
+              )
+            : t(
+                'The address "{{alias}}" is already in use. Move it to this page?',
+                { alias: reassign?.alias },
+              )}
+        </Text>
+        <Group justify="flex-end" mt="md">
+          <Button variant="default" onClick={() => setReassign(null)}>
+            {t("Cancel")}
+          </Button>
+          <Button
+            color="red"
+            onClick={() => handleSave(true)}
+            loading={setAliasMutation.isPending}
+          >
+            {t("Move here")}
+          </Button>
+        </Group>
+      </Modal>
+    </>
+  );
+}

apps/client/src/features/share/components/share-modal.tsx

@@ -25,6 +25,7 @@ import CopyTextButton from "@/components/common/copy.tsx";
 import { getAppUrl } from "@/lib/config.ts";
 import { buildPageUrl } from "@/features/page/page.utils.ts";
 import classes from "@/features/share/components/share.module.css";
+import ShareAliasSection from "@/features/share/components/share-alias-section.tsx";
 import { useAtom } from "jotai";
 import { workspaceAtom } from "@/features/user/atoms/current-user-atom.ts";
 import { useSpaceQuery } from "@/features/space/queries/space-query.ts";
@@ -253,6 +254,9 @@ export default function ShareModal({ readOnly }: ShareModalProps) {
                     disabled={readOnly}
                   />
                 </Group>
+                {pageId && (
+                  <ShareAliasSection pageId={pageId} readOnly={readOnly} />
+                )}
               </>
             )}
           </>

apps/client/src/features/share/queries/share-query.ts

@@ -10,6 +10,8 @@ import { useTranslation } from "react-i18next";
 import {
   ICreateShare,
   IShare,
+  IShareAlias,
+  ISetShareAlias,
   ISharedItem,
   ISharedPage,
   ISharedPageTree,
@@ -20,11 +22,14 @@ import {
 import {
   createShare,
   deleteShare,
+  getShareAliasForPage,
   getSharedPageTree,
   getShareForPage,
   getShareInfo,
   getSharePageInfo,
   getShares,
+  removeShareAlias,
+  setShareAlias,
   updateShare,
 } from "@/features/share/services/share-service.ts";
 import { IPagination, QueryParams } from "@/lib/types.ts";
@@ -170,6 +175,72 @@ export function useDeleteShareMutation() {
   });
 }
 
+export function useShareAliasForPageQuery(
+  pageId: string,
+): UseQueryResult<IShareAlias | null, Error> {
+  return useQuery({
+    // The endpoint resolves to null when the page has no alias; normalize the
+    // absence so React Query never sees `undefined`.
+    queryKey: ["share-alias-for-page", pageId],
+    queryFn: async () => (await getShareAliasForPage(pageId)) ?? null,
+    enabled: !!pageId,
+    staleTime: 60 * 1000,
+    retry: false,
+  });
+}
+
+export function useSetShareAliasMutation() {
+  const { t } = useTranslation();
+  const queryClient = useQueryClient();
+
+  return useMutation<IShareAlias, Error, ISetShareAlias>({
+    mutationFn: (data) => setShareAlias(data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        predicate: (item) =>
+          ["share-alias-for-page", "share-list"].includes(
+            item.queryKey[0] as string,
+          ),
+      });
+    },
+    onError: (error) => {
+      // A 409 reassign-required is handled inline by the modal (it shows the
+      // "move address here?" confirmation), so don't surface a generic toast.
+      if (error?.["status"] === 409) return;
+      notifications.show({
+        message:
+          error?.["response"]?.data?.message || t("Failed to set custom address"),
+        color: "red",
+      });
+    },
+  });
+}
+
+export function useRemoveShareAliasMutation() {
+  const { t } = useTranslation();
+  const queryClient = useQueryClient();
+
+  return useMutation<void, Error, string>({
+    mutationFn: (aliasId) => removeShareAlias(aliasId),
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        predicate: (item) =>
+          ["share-alias-for-page", "share-list"].includes(
+            item.queryKey[0] as string,
+          ),
+      });
+    },
+    onError: (error) => {
+      notifications.show({
+        message:
+          error?.["response"]?.data?.message ||
+          t("Failed to remove custom address"),
+        color: "red",
+      });
+    },
+  });
+}
+
 export function useGetSharedPageTreeQuery(
   shareId: string,
 ): UseQueryResult<ISharedPageTree, Error> {

apps/client/src/features/share/services/share-service.ts

@@ -4,6 +4,9 @@ import { IPage } from "@/features/page/types/page.types";
 import {
   ICreateShare,
   IShare,
+  IShareAlias,
+  IShareAliasAvailability,
+  ISetShareAlias,
   ISharedItem,
   ISharedPage,
   ISharedPageTree,
@@ -57,3 +60,33 @@ export async function getSharedPageTree(
   const req = await api.post<ISharedPageTree>("/shares/tree", { shareId });
   return req.data;
 }
+
+export async function getShareAliasForPage(
+  pageId: string,
+): Promise<IShareAlias | null> {
+  const req = await api.post<IShareAlias | null>("/share-aliases/for-page", {
+    pageId,
+  });
+  return req.data;
+}
+
+export async function setShareAlias(
+  data: ISetShareAlias,
+): Promise<IShareAlias> {
+  const req = await api.post<IShareAlias>("/share-aliases/set", data);
+  return req.data;
+}
+
+export async function removeShareAlias(aliasId: string): Promise<void> {
+  await api.post("/share-aliases/remove", { aliasId });
+}
+
+export async function checkShareAliasAvailability(
+  alias: string,
+): Promise<IShareAliasAvailability> {
+  const req = await api.post<IShareAliasAvailability>(
+    "/share-aliases/availability",
+    { alias },
+  );
+  return req.data;
+}

apps/client/src/features/share/share-alias.util.test.ts

@@ -0,0 +1,32 @@
+import { describe, it, expect } from "vitest";
+import {
+  isValidShareAlias,
+  normalizeShareAlias,
+} from "@/features/share/share-alias.util.ts";
+
+// Mirrors the server-side util so the modal's live feedback matches what the
+// server will accept/store.
+describe("normalizeShareAlias", () => {
+  it("lowercases, trims and maps separators to single hyphens", () => {
+    expect(normalizeShareAlias("  My  Cool_Page ")).toBe("my-cool-page");
+  });
+
+  it("collapses repeated hyphens and trims edges", () => {
+    expect(normalizeShareAlias("--a---b--")).toBe("a-b");
+  });
+});
+
+describe("isValidShareAlias", () => {
+  it("accepts ascii hyphen-separated slugs of length 2..60", () => {
+    expect(isValidShareAlias("hello-world")).toBe(true);
+    expect(isValidShareAlias("a".repeat(60))).toBe(true);
+  });
+
+  it("rejects too short, edge/double hyphens, uppercase and non-ascii", () => {
+    expect(isValidShareAlias("a")).toBe(false);
+    expect(isValidShareAlias("-a")).toBe(false);
+    expect(isValidShareAlias("a--b")).toBe(false);
+    expect(isValidShareAlias("Hello")).toBe(false);
+    expect(isValidShareAlias("привет")).toBe(false);
+  });
+});

apps/client/src/features/share/share-alias.util.ts

@@ -0,0 +1,26 @@
+/**
+ * Client copy of the vanity share-alias helpers. Kept in sync with the server
+ * (`apps/server/src/core/share/share-alias.util.ts`) so live input feedback
+ * matches what the server will store/accept. ASCII-only, lowercase, hyphen
+ * separated, length 2..60.
+ */
+
+// Normalize a user-provided vanity alias into canonical ASCII storage form.
+export function normalizeShareAlias(raw: string): string {
+  return (raw ?? "")
+    .trim()
+    .toLowerCase()
+    .replace(/[\s_]+/g, "-")
+    .replace(/-{2,}/g, "-")
+    .replace(/^-+|-+$/g, "");
+}
+
+const ALIAS_RE = /^[a-z0-9]+(?:-[a-z0-9]+)*$/;
+export function isValidShareAlias(alias: string): boolean {
+  return (
+    typeof alias === "string" &&
+    alias.length >= 2 &&
+    alias.length <= 60 &&
+    ALIAS_RE.test(alias)
+  );
+}

apps/client/src/features/share/types/share.types.ts

@@ -75,6 +75,30 @@ export interface IShareInfoInput {
   pageId: string;
 }
 
+// Vanity /l/:alias pointer.
+export interface IShareAlias {
+  id: string;
+  workspaceId: string;
+  alias: string;
+  pageId: string | null;
+  creatorId: string | null;
+  createdAt: string;
+  updatedAt: string;
+}
+
+export interface ISetShareAlias {
+  pageId: string;
+  alias: string;
+  confirmReassign?: boolean;
+}
+
+export interface IShareAliasAvailability {
+  alias: string;
+  valid: boolean;
+  available: boolean;
+  currentPageId: string | null;
+}
+
 export interface ISharedPageTree {
   share: IShare;
   pageTree: Partial<IPage[]>;