Add friendly aliases for client proofing links

app/admin/components/ProofingView.tsx

@@ -52,6 +52,7 @@ function CreateForm({ onCreated }: { onCreated: () => void }) {
   const [albums, setAlbums] = useState<AlbumOption[] | null>(null);
   const [clientName, setClientName] = useState('');
   const [albumId, setAlbumId] = useState('');
+  const [alias, setAlias] = useState('');
   const [expiresOn, setExpiresOn] = useState('');
   const [download, setDownload] = useState<Download>('none');
   const [limit, setLimit] = useState('');
@@ -76,6 +77,7 @@ function CreateForm({ onCreated }: { onCreated: () => void }) {
         headers: { 'Content-Type': 'application/json' },
         body: JSON.stringify({
           clientName,
+	  alias: alias.trim() || null,
           albumId,
           expiresOn: expiresOn || null,
           download,
@@ -83,6 +85,7 @@ function CreateForm({ onCreated }: { onCreated: () => void }) {
         }),
       });
       setClientName('');
+      setAlias('');
       setAlbumId('');
       setExpiresOn('');
       setDownload('none');
@@ -113,6 +116,22 @@ function CreateForm({ onCreated }: { onCreated: () => void }) {
             maxLength={120}
             required
           />
+	<div className="admin-field">
+	  <label htmlFor="proof-alias">Client URL alias (optional)</label>
+	  <input
+	    id="proof-alias"
+	    value={alias}
+	    onChange={(e) =>
+	      setAlias(
+	        e.target.value
+	          .replace(/\s+/g, '-')
+	          .replace(/[^A-Za-z0-9-]/g, ''),
+	      )
+	    }
+	    placeholder="Client"
+	    maxLength={64}
+	  />
+	</div>
         </div>
         <div className="admin-field">
           <label htmlFor="proof-album">Album</label>
@@ -294,6 +313,30 @@ function SessionCard({
             {copied === 'link' ? <Icons.IconCheck size={14} /> : <Icons.IconCopy size={14} />}{' '}
             {copied === 'link' ? 'Copied' : 'Copy link'}
           </button>
+	  <button
+	    type="button"
+	    className="admin-btn admin-btn-ghost admin-btn-sm"
+	    onClick={() => {
+	      const next = window.prompt(
+	        'Client URL alias (leave blank to remove):',
+	        session.alias ?? '',
+	      );
+	  
+	      if (next === null) return;
+	 
+	      const cleaned = next
+                .trim()
+                .replace(/\s+/g, '-')
+	        .replace(/[^A-Za-z0-9-]/g, '');
+
+	      void patch({
+	        alias: cleaned || null,
+	      });
+	    }}
+	  >
+	    <Icons.IconLink size={14} />
+	    {session.alias ? ' Change alias' : ' Set alias'}
+	  </button>
           <a
             className="admin-btn admin-btn-ghost admin-btn-sm"
             href={session.link}

app/c/[alias]/page.tsx

@@ -0,0 +1,54 @@
+import type { Metadata } from 'next';
+import { notFound } from 'next/navigation';
+
+import { findSessionByAlias } from '@/lib/proofSessions';
+import {
+  proofMetadata,
+  renderProof,
+} from '../../proof/renderProof';
+
+
+export const dynamic = 'force-dynamic';
+
+
+interface ClientPageProps {
+  params: Promise<{
+    alias: string;
+  }>;
+}
+
+
+export async function generateMetadata({
+  params,
+}: ClientPageProps): Promise<Metadata> {
+  const { alias } = await params;
+
+  const session = await findSessionByAlias(alias);
+
+  if (!session) {
+    return {
+      title: 'Not found',
+      robots: {
+        index: false,
+        follow: false,
+      },
+    };
+  }
+
+  return proofMetadata(session.token);
+}
+
+
+export default async function ClientPage({
+  params,
+}: ClientPageProps) {
+  const { alias } = await params;
+
+  const session = await findSessionByAlias(alias);
+
+  if (!session) {
+    notFound();
+  }
+
+  return renderProof(session.token);
+}

app/proof/[token]/page.tsx

@@ -1,121 +1,34 @@
-/**
- * A client proofing link: /proof/<token>.
- *
- * Renders the session's album with the proofing controls in session mode —
- * hearts save to the server, and the client submits the selection when done.
- * The album does not have to be published; see immich.getProofingAlbum().
- *
- * Kept out of search engines and the sitemap: the URL is the credential.
- */
-
 import type { Metadata } from 'next';
-import { notFound } from 'next/navigation';
+
-import { immich } from '@/lib/immich';
+import {
-import { getConfig, hasExifPanelContent } from '@/lib/config';
+  proofMetadata,
-import { encodeAssetId } from '@/lib/tokens';
+  renderProof,
-import { getServerDictionary } from '@/lib/i18n/server';
+} from '../renderProof';
-import { downloadsRemaining, findSessionByToken, isExpired } from '@/lib/proofSessions';
+
-import { AlbumDetailView } from '../../[...path]/AlbumDetailView';
-import { toPhotoItems } from '../../[...path]/photoItems';
 
 export const dynamic = 'force-dynamic';
 
+
 interface ProofPageProps {
-  params: Promise<{ token: string }>;
+  params: Promise<{
+    token: string;
+  }>;
 }
 
-export async function generateMetadata({ params }: ProofPageProps): Promise<Metadata> {
+
+export async function generateMetadata({
+  params,
+}: ProofPageProps): Promise<Metadata> {
   const { token } = await params;
-  const session = await findSessionByToken(token);
+
-  const t = getServerDictionary();
+  return proofMetadata(token);
-  return {
-    // An expired link names nobody, not even in the tab title — but the tab
-    // says the same as the page, rather than "not found" over "expired".
-    title: !session
-      ? t.error.notFoundTitle
-      : isExpired(session)
-        ? t.proofSession.expiredTitle
-        : t.proofSession.greeting(session.clientName),
-    robots: { index: false, follow: false },
-    // Never let the link travel as a Referer, not even to our own font host.
-    referrer: 'no-referrer',
-  };
 }
 
-export default async function ProofPage({ params }: ProofPageProps) {
+
+export default async function ProofPage({
+  params,
+}: ProofPageProps) {
   const { token } = await params;
-  const session = await findSessionByToken(token);
-  if (!session) notFound();
 
-  const t = getServerDictionary();
+  return renderProof(token);
-
-  if (isExpired(session)) {
-    return (
-      <div className="empty-state">
-        <h1 className="empty-state__title">{t.proofSession.expiredTitle}</h1>
-        <p className="empty-state__text">{t.proofSession.expiredText}</p>
-      </div>
-    );
-  }
-
-  const album = await immich.getProofingAlbum(session.albumId);
-  if (!album) notFound();
-
-  const config = getConfig();
-  const images = toPhotoItems(
-    album.assets,
-    config.exif.onHover && config.exif.camera,
-    config.exif.caption,
-  );
-
-  // Only what is still in the album: a photo removed in Immich after it was
-  // picked drops out of the selection instead of haunting the counter.
-  const inAlbum = new Set(album.assets.map((a) => a.id));
-  const selected = session.selection.filter((id) => inAlbum.has(id)).map(encodeAssetId);
-
-  const validUntil = session.expiresOn
-    ? new Date(`${session.expiresOn}T12:00:00`).toLocaleDateString(t.dateLocale, {
-        year: 'numeric',
-        month: 'long',
-        day: 'numeric',
-      })
-    : null;
-
-  const gridStyle = {
-    '--grid-columns': config.grid.columns,
-    ...(config.gridGapExplicit ? { '--grid-gap': `${config.grid.gap}px` } : {}),
-    '--grid-aspect-ratio': config.grid.aspectRatio,
-  } as React.CSSProperties;
-
-  return (
-    <AlbumDetailView
-      album={album}
-      images={images}
-      layout={config.grid.layout}
-      gridStyle={gridStyle}
-      watermark={config.watermark}
-      showExifPanel={hasExifPanelContent(config.exif)}
-      showGear={config.exif.camera}
-      proofSession={{
-        token: session.token,
-        selected,
-        submitted: Boolean(session.submittedAt),
-        download: session.download,
-        downloadsRemaining: downloadsRemaining(session),
-      }}
-      intro={
-        <div className="proof-session-intro">
-          <p className="proof-session-intro__greeting">
-            {t.proofSession.greeting(session.clientName)}
-          </p>
-          <p className="proof-session-intro__text">
-            {session.submittedAt ? t.proofSession.locked : t.proofSession.intro}
-          </p>
-          {validUntil && (
-            <p className="proof-session-intro__meta">{t.proofSession.validUntil(validUntil)}</p>
-          )}
-        </div>
-      }
-    />
-  );
 }

app/proof/renderProof.tsx

@@ -0,0 +1,163 @@
+import type { Metadata } from 'next';
+import { notFound } from 'next/navigation';
+
+import { immich } from '@/lib/immich';
+import { getConfig, hasExifPanelContent } from '@/lib/config';
+import { encodeAssetId } from '@/lib/tokens';
+import { getServerDictionary } from '@/lib/i18n/server';
+import {
+  downloadsRemaining,
+  findSessionByToken,
+  isExpired,
+} from '@/lib/proofSessions';
+
+import { AlbumDetailView } from '../[...path]/AlbumDetailView';
+import { toPhotoItems } from '../[...path]/photoItems';
+
+
+/**
+ * Generate metadata for a proofing session.
+ *
+ * This is shared by both:
+ *
+ *   /proof/<token>
+ *   /c/<alias>
+ */
+export async function proofMetadata(token: string): Promise<Metadata> {
+  const session = await findSessionByToken(token);
+  const t = getServerDictionary();
+
+  return {
+    title: !session
+      ? t.error.notFoundTitle
+      : isExpired(session)
+        ? t.proofSession.expiredTitle
+        : t.proofSession.greeting(session.clientName),
+
+    robots: {
+      index: false,
+      follow: false,
+    },
+
+    // Do not leak the proof URL through the Referer header.
+    referrer: 'no-referrer',
+  };
+}
+
+
+/**
+ * Render an existing Folio proofing session from its real token.
+ *
+ * Both /proof/<token> and our friendly /c/<alias> route can call this,
+ * which means there is only one copy of the actual gallery code.
+ */
+export async function renderProof(token: string) {
+  const session = await findSessionByToken(token);
+
+  if (!session) {
+    notFound();
+  }
+
+  const t = getServerDictionary();
+
+  if (isExpired(session)) {
+    return (
+      <div className="empty-state">
+        <h1 className="empty-state__title">
+          {t.proofSession.expiredTitle}
+        </h1>
+
+        <p className="empty-state__text">
+          {t.proofSession.expiredText}
+        </p>
+      </div>
+    );
+  }
+
+  const album = await immich.getProofingAlbum(session.albumId);
+
+  if (!album) {
+    notFound();
+  }
+
+  const config = getConfig();
+
+  const images = toPhotoItems(
+    album.assets,
+    config.exif.onHover && config.exif.camera,
+    config.exif.caption,
+  );
+
+  /*
+   * Only preserve selected photos that still exist in the Immich album.
+   *
+   * If a photo was selected by the client and is later removed from
+   * the album, it should disappear from the saved selection too.
+   */
+  const inAlbum = new Set(album.assets.map((asset) => asset.id));
+
+  const selected = session.selection
+    .filter((id) => inAlbum.has(id))
+    .map(encodeAssetId);
+
+  const validUntil = session.expiresOn
+    ? new Date(`${session.expiresOn}T12:00:00`).toLocaleDateString(
+        t.dateLocale,
+        {
+          year: 'numeric',
+          month: 'long',
+          day: 'numeric',
+        },
+      )
+    : null;
+
+  const gridStyle = {
+    '--grid-columns': config.grid.columns,
+
+    ...(config.gridGapExplicit
+      ? {
+          '--grid-gap': `${config.grid.gap}px`,
+        }
+      : {}),
+
+    '--grid-aspect-ratio': config.grid.aspectRatio,
+  } as React.CSSProperties;
+
+  return (
+    <AlbumDetailView
+      album={album}
+      images={images}
+      layout={config.grid.layout}
+      gridStyle={gridStyle}
+      watermark={config.watermark}
+      showExifPanel={hasExifPanelContent(config.exif)}
+      showGear={config.exif.camera}
+      proofSession={{
+        token: session.token,
+        selected,
+        submitted: Boolean(session.submittedAt),
+        download: session.download,
+        downloadsRemaining: downloadsRemaining(session),
+      }}
+      intro={
+        <div className="proof-session-intro">
+          <p className="proof-session-intro__greeting">
+            {t.proofSession.greeting(session.clientName)}
+          </p>
+
+          <p className="proof-session-intro__text">
+            {session.submittedAt
+              ? t.proofSession.locked
+              : t.proofSession.intro}
+          </p>
+
+          {validUntil && (
+            <p className="proof-session-intro__meta">
+              {t.proofSession.validUntil(validUntil)}
+            </p>
+          )}
+        </div>
+      }
+    />
+  );
+}

lib/admin/proofing-view.ts

@@ -19,6 +19,7 @@ export interface AdminProofSession {
   /** Null when Immich no longer has the album (or cannot be reached). */
   albumName: string | null;
   albumAssetCount: number | null;
+  alias: string | null;
   /** Relative path of the client link. */
   link: string;
   createdAt: string;
@@ -60,7 +61,8 @@ export function toAdminSession(
     albumId: session.albumId,
     albumName: album?.albumName ?? null,
     albumAssetCount: album ? album.assets.length : null,
-    link: `/proof/${session.token}`,
+    alias: session.alias ?? null,
+    link: session.alias ? `/c/${session.alias}` : `/proof/${session.token}`,
     createdAt: session.createdAt,
     expiresOn: session.expiresOn ?? null,
     download: session.download,

lib/proofSessions.ts

@@ -37,6 +37,8 @@ export interface ProofSession {
   id: string;
   /** The client link's capability: /proof/<token>. */
   token: string;
+  /** Optional friendly client URL: /c/<alias>. */
+  alias?: string;
   /** Who the link is for, as the photographer wants to see it. */
   clientName: string;
   albumId: string;
@@ -103,9 +105,22 @@ export function isTokenShaped(token: string): boolean {
   return TOKEN_PATTERN.test(token);
 }
 
+const ALIAS_PATTERN = /^[A-Za-z0-9]+(?:-[A-Za-z0-9]+)*$/;
+
+const aliasSchema = z
+  .string()
+  .trim()
+  .min(1)
+  .max(64)
+  .regex(
+    ALIAS_PATTERN,
+    'Alias may only contain letters, numbers and single hyphens',
+  );
+
 /** Input the admin panel may send when creating or editing a session. */
 export const sessionInputSchema = z.object({
   clientName: z.string().trim().min(1).max(120),
+  alias: aliasSchema.nullable().optional(),
   albumId: z.string().refine(isUuid, 'Not an Immich album ID'),
   expiresOn: z
     .string()
@@ -194,9 +209,30 @@ export async function findSessionByToken(token: string): Promise<ProofSession |
   return (await readStore()).sessions.find((s) => tokenMatches(s.token, token)) ?? null;
 }
 
+export async function findSessionByAlias(alias: string): Promise<ProofSession | null> {
+  const normalized = alias.trim();
+
+  if (normalized.length > 64 || !ALIAS_PATTERN.test(normalized)) {
+    return null;
+  }
+
+  return (
+    (await readStore()).sessions.find(
+      (session) => session.alias === normalized,
+    ) ?? null
+  );
+}
+
 export class ProofError extends Error {
   constructor(
-    public readonly code: 'not-found' | 'expired' | 'submitted' | 'limit' | 'too-many' | 'empty',
+    public readonly code:
+      | 'not-found'
+      | 'expired'
+      | 'submitted'
+      | 'limit'
+      | 'too-many'
+      | 'empty'
+      | 'alias-taken',
     message: string,
   ) {
     super(message);
@@ -208,9 +244,19 @@ export async function createSession(input: SessionInput): Promise<ProofSession>
     if (store.sessions.length >= MAX_SESSIONS) {
       throw new ProofError('too-many', `At most ${MAX_SESSIONS} proofing links can exist.`);
     }
+    if (
+      input.alias &&
+      store.sessions.some((session) => session.alias === input.alias)
+    ) {
+      throw new ProofError(
+        'alias-taken',
+        'That client URL alias is already in use.',
+      );
+    }
     const session: ProofSession = {
       id: crypto.randomBytes(8).toString('hex'),
       token: newToken(),
+      ...(input.alias ? { alias: input.alias } : {}),
       clientName: input.clientName,
       albumId: input.albumId,
       createdAt: new Date().toISOString(),
@@ -230,6 +276,25 @@ export async function updateSession(id: string, patch: SessionPatch): Promise<Pr
     const session = store.sessions.find((s) => s.id === id);
     if (!session) throw new ProofError('not-found', 'No such proofing link.');
 
+    if (patch.alias !== undefined) {
+      if (patch.alias === null) {
+        delete session.alias;
+      } else {
+        const taken = store.sessions.some(
+          (other) => other.id !== id && other.alias === patch.alias,
+        );
+
+        if (taken) {
+          throw new ProofError(
+            'alias-taken',
+            'That client URL alias is already in use.',
+          );
+        }
+
+        session.alias = patch.alias;
+      }
+    }
+
     if (patch.clientName !== undefined) session.clientName = patch.clientName;
     if (patch.download !== undefined) session.download = patch.download;
     // `null` clears, `undefined` leaves alone.