refactor sync routes to use params instead of query params

frontend/src/features/slices/sync/handlers.tsx

···
 import { renderHTML } from "../../../utils/render.tsx";
 import { requireAuth, withAuth } from "../../../routes/middleware.ts";
 import { getSliceClient } from "../../../utils/client.ts";
-import { buildSliceUri } from "../../../utils/at-uri.ts";
-import { publicClient } from "../../../config.ts";
 import {
   requireSliceAccess,
   withSliceAccess,
···
   req: Request,
   params?: URLPatternResult
 ): Promise<Response> {
-  const context = await withAuth(req);
-  const authResponse = requireAuth(context);
+  const authContext = await withAuth(req);
+  const authResponse = requireAuth(authContext);
   if (authResponse) return authResponse;
 
-  const sliceId = params?.pathname.groups.id;
-
-  if (!sliceId) {
-    return renderHTML(<SyncResult success={false} error="Invalid slice ID" />);
+  const sliceParams = extractSliceParams(params);
+  if (!sliceParams) {
+    return renderHTML(
+      <SyncResult success={false} error="Invalid slice parameters" />
+    );
   }
 
+  const context = await withSliceAccess(
+    authContext,
+    sliceParams.handle,
+    sliceParams.sliceId
+  );
+  const accessError = requireSliceAccess(context);
+  if (accessError) return accessError;
+
   try {
     const formData = await req.formData();
     const collections = formData.getAll("collections") as string[];
···
       );
     }
 
-    const sliceClient = getSliceClient(context, sliceId);
+    const sliceClient = getSliceClient(
+      authContext,
+      sliceParams.sliceId,
+      context.sliceContext!.profileDid
+    );
     await sliceClient.network.slices.slice.startSync({
-      slice: buildSliceUri(context.currentUser.sub!, sliceId),
+      slice: context.sliceContext!.sliceUri,
       collections: collections.length > 0 ? collections : undefined,
       externalCollections:
         externalCollections.length > 0 ? externalCollections : undefined,
       repos: repos.length > 0 ? repos : undefined,
     });
 
-    const handle = context.currentUser?.handle;
-    if (!handle) {
-      throw new Error("Unable to determine user handle");
-    }
-
-    const redirectUrl = buildSliceUrl(handle, sliceId, "sync");
+    const redirectUrl = buildSliceUrl(
+      sliceParams.handle,
+      sliceParams.sliceId,
+      "sync"
+    );
     return hxRedirect(redirectUrl);
   } catch (error) {
     console.error("Failed to start sync:", error);
···
   req: Request,
   params?: URLPatternResult
 ): Promise<Response> {
-  const context = await withAuth(req);
-  const authResponse = requireAuth(context);
+  const authContext = await withAuth(req);
+  const authResponse = requireAuth(authContext);
   if (authResponse) return authResponse;
 
-  const sliceId = params?.pathname.groups.id;
-
-  if (!sliceId) {
+  const sliceParams = extractSliceParams(params);
+  if (!sliceParams) {
     return renderHTML(
-      <div className="p-8 text-center text-red-600">Invalid slice ID</div>,
+      <div className="p-8 text-center text-red-600">
+        Invalid slice parameters
+      </div>,
       { status: 400 }
     );
   }
 
-  // Extract handle from query parameters
-  const url = new URL(req.url);
-  const handle = url.searchParams.get("handle");
+  const context = await withSliceAccess(
+    authContext,
+    sliceParams.handle,
+    sliceParams.sliceId
+  );
+  const accessError = requireSliceAccess(context);
+  if (accessError) return accessError;
 
   try {
-    const sliceUri = buildSliceUri(context.currentUser.sub!, sliceId);
-    const sliceClient = getSliceClient(context, sliceId);
+    const sliceClient = getSliceClient(
+      authContext,
+      sliceParams.sliceId,
+      context.sliceContext!.profileDid
+    );
     const jobsResponse = await sliceClient.network.slices.slice.getJobHistory({
-      userDid: context.currentUser.sub!,
-      sliceUri: sliceUri,
+      userDid: authContext.currentUser.sub!,
+      sliceUri: context.sliceContext!.sliceUri,
       limit: 10,
     });
 
     return renderHTML(
       <JobHistory
         jobs={jobsResponse || []}
-        sliceId={sliceId}
-        handle={handle || undefined}
+        sliceId={sliceParams.sliceId}
+        handle={sliceParams.handle}
       />
     );
   } catch (error) {
···
   req: Request,
   params?: URLPatternResult
 ): Promise<Response> {
-  const context = await withAuth(req);
-  const authResponse = requireAuth(context);
+  const authContext = await withAuth(req);
+  const authResponse = requireAuth(authContext);
   if (authResponse) return authResponse;
 
-  const sliceId = params?.pathname.groups.id;
-  if (!sliceId) {
-    return new Response("Invalid slice ID", { status: 400 });
+  const sliceParams = extractSliceParams(params);
+  if (!sliceParams) {
+    return new Response("Invalid slice parameters", { status: 400 });
   }
 
+  const context = await withSliceAccess(
+    authContext,
+    sliceParams.handle,
+    sliceParams.sliceId
+  );
+  const accessError = requireSliceAccess(context);
+  if (accessError) return accessError;
+
   try {
-    const sliceClient = getSliceClient(context, sliceId);
+    const sliceClient = getSliceClient(
+      authContext,
+      sliceParams.sliceId,
+      context.sliceContext!.profileDid
+    );
     const collections: string[] = [];
     const externalCollections: string[] = [];
 
-    // Get slice info for domain comparison
-    const sliceUri = buildSliceUri(context.currentUser.sub!, sliceId);
-    const sliceRecord = await publicClient.network.slices.slice.getRecord({
-      uri: sliceUri,
-    });
-    const sliceDomain = sliceRecord.value.domain;
+    // Get slice domain from context
+    const sliceDomain = context.sliceContext!.slice!.domain;
 
     // Get all lexicons and filter by record types
     try {
···
 
     return renderHTML(
       <SyncFormModal
-        sliceId={sliceId}
+        sliceId={sliceParams.sliceId}
+        handle={sliceParams.handle}
         collections={collections}
         externalCollections={externalCollections}
       />
     );
   } catch (error) {
     console.error("Error loading sync modal:", error);
-    return renderHTML(<SyncFormModal sliceId={sliceId} />);
+    return renderHTML(
+      <SyncFormModal
+        sliceId={sliceParams.sliceId}
+        handle={sliceParams.handle}
+      />
+    );
   }
 }
 
···
   req: Request,
   params?: URLPatternResult
 ): Promise<Response> {
-  const context = await withAuth(req);
-  const authResponse = requireAuth(context);
+  const authContext = await withAuth(req);
+  const authResponse = requireAuth(authContext);
   if (authResponse) return authResponse;
 
-  const sliceId = params?.pathname.groups.id;
-  if (!sliceId) {
-    return new Response("Invalid slice ID", { status: 400 });
+  const sliceParams = extractSliceParams(params);
+  if (!sliceParams) {
+    return new Response("Invalid slice parameters", { status: 400 });
   }
+
+  const context = await withSliceAccess(
+    authContext,
+    sliceParams.handle,
+    sliceParams.sliceId
+  );
+  const accessError = requireSliceAccess(context);
+  if (accessError) return accessError;
 
   try {
     const formData = await req.formData();
···
       );
     }
 
-    const sliceClient = getSliceClient(context, sliceId);
-    const sliceUri = buildSliceUri(context.currentUser.sub!, sliceId);
+    const sliceClient = getSliceClient(
+      authContext,
+      sliceParams.sliceId,
+      context.sliceContext!.profileDid
+    );
 
     // Call the getSyncSummary endpoint
     const requestParams = {
-      slice: sliceUri,
+      slice: context.sliceContext!.sliceUri,
       collections: collections.length > 0 ? collections : undefined,
       externalCollections:
         externalCollections.length > 0 ? externalCollections : undefined,
···
 
     return renderHTML(
       <SyncSummaryModal
-        sliceId={sliceId}
+        sliceId={sliceParams.sliceId}
+        handle={sliceParams.handle}
         summary={summaryResponse}
         collections={collections}
         externalCollections={externalCollections}
···
   },
   {
     method: "GET",
-    pattern: new URLPattern({ pathname: "/api/slices/:id/sync/modal" }),
+    pattern: new URLPattern({
+      pathname: "/profile/:handle/slice/:rkey/sync/modal",
+    }),
     handler: handleShowSyncModal,
   },
   {
     method: "POST",
-    pattern: new URLPattern({ pathname: "/api/slices/:id/sync" }),
+    pattern: new URLPattern({ pathname: "/profile/:handle/slice/:rkey/sync" }),
     handler: handleSliceSync,
   },
   {
     method: "POST",
-    pattern: new URLPattern({ pathname: "/api/slices/:id/sync/summary" }),
+    pattern: new URLPattern({
+      pathname: "/profile/:handle/slice/:rkey/sync/summary",
+    }),
     handler: handleSyncSummary,
   },
   {
     method: "GET",
-    pattern: new URLPattern({ pathname: "/api/slices/:id/job-history" }),
+    pattern: new URLPattern({
+      pathname: "/profile/:handle/slice/:rkey/job-history",
+    }),
     handler: handleJobHistory,
   },
 ];

frontend/src/features/slices/sync/templates/SliceSyncPage.tsx

···
         <div className="flex justify-end mb-4">
           <Button
             variant="success"
-            hx-get={`/api/slices/${sliceId}/sync/modal`}
+            hx-get={`/profile/${slice.creator?.handle}/slice/${sliceId}/sync/modal`}
             hx-target="#modal-container"
             hx-swap="innerHTML"
           >
···
         <Card>
           <Card.Header title="Recent Sync History" />
           <Card.Content
-            hx-get={`/api/slices/${sliceId}/job-history?handle=${slice.creator?.handle}`}
+            hx-get={`/profile/${slice.creator?.handle}/slice/${sliceId}/job-history`}
             hx-trigger="load, every 10s"
             hx-swap="innerHTML"
           >

frontend/src/features/slices/sync/templates/fragments/SyncFormModal.tsx

···
 
 interface SyncFormModalProps {
   sliceId: string;
+  handle: string;
   collections?: string[];
   externalCollections?: string[];
 }
 
 export function SyncFormModal({
   sliceId,
+  handle,
   collections = [],
   externalCollections = [],
 }: SyncFormModalProps) {
···
             type="submit"
             variant="primary"
             className="flex items-center justify-center"
-            hx-post={`/api/slices/${sliceId}/sync/summary`}
+            hx-post={`/profile/${handle}/slice/${sliceId}/sync/summary`}
             hx-target="#modal-container"
             hx-swap="innerHTML"
           >

frontend/src/features/slices/sync/templates/fragments/SyncSummaryModal.tsx

···
 
 interface SyncSummaryModalProps {
   sliceId: string;
+  handle: string;
   summary: NetworkSlicesSliceGetSyncSummaryOutput;
   collections: string[];
   externalCollections: string[];
···
 
 export function SyncSummaryModal({
   sliceId,
+  handle,
   summary,
   collections,
   externalCollections,
···
 
         {/* Actions */}
         <form
-          hx-post={`/api/slices/${sliceId}/sync`}
+          hx-post={`/profile/${handle}/slice/${sliceId}/sync`}
           hx-target="#sync-result"
           hx-swap="innerHTML"
           className="space-y-4"