@cytario/web 2.1.3 → 2.1.5

package/app/routes/connections/connection.form.tsx

@@ -49,8 +49,7 @@ const FIELD_TO_STEP: Record<string, number> = {
 };
 
 const dtClass = "text-[var(--color-text-secondary)]";
-const ddClass =
-  "font-[number:var(--font-weight-medium)] text-[var(--color-text-primary)]";
+const ddClass = "font-[number:var(--font-weight-medium)] text-[var(--color-text-primary)]";
 
 function SummaryRow({ label, value }: { label: string; value: string }) {
   return (
@@ -83,8 +82,7 @@ export const ConnectionForm = ({
   }>();
   const navigation = useNavigation();
 
-  const serverErrors =
-    actionData?.status === "error" ? actionData.errors : undefined;
+  const serverErrors = actionData?.status === "error" ? actionData.errors : undefined;
   const isSubmitting = navigation.state === "submitting";
 
   // Compute the initial step from server errors so we navigate to the
@@ -151,9 +149,7 @@ export const ConnectionForm = ({
 
   const fieldsPerStep: Record<number, (keyof ConnectBucketFormData)[]> = {
     0: ["providerType", "s3Uri", "name"],
-    1: isAWS
-      ? ["ownerScope", "roleArn", "bucketRegion"]
-      : ["ownerScope", "bucketEndpoint"],
+    1: isAWS ? ["ownerScope", "roleArn", "bucketRegion"] : ["ownerScope", "bucketEndpoint"],
   };
 
   const onSubmit = (data: ConnectBucketFormData) => {
@@ -300,9 +296,7 @@ export const ConnectionForm = ({
                         ]}
                         selectedKey={field.value}
                         onSelectionChange={(key) => field.onChange(key)}
-                        renderItem={(item) => (
-                          <ScopePill scope={item.id} />
-                        )}
+                        renderItem={(item) => <ScopePill scope={item.id} />}
                       />
                     )}
                   />
@@ -389,10 +383,7 @@ export const ConnectionForm = ({
                 ].join(" ")}
               >
                 <dl className="flex flex-col gap-[var(--spacing-2)] text-[length:var(--font-size-sm)]">
-                  <SummaryRow
-                    label="Provider"
-                    value={isAWS ? "AWS S3" : "MinIO"}
-                  />
+                  <SummaryRow label="Provider" value={isAWS ? "AWS S3" : "MinIO"} />
                   <SummaryRow label="Name" value={nameValue} />
                   <SummaryRow label="Bucket" value={bucketName} />
                   {prefix && <SummaryRow label="Prefix" value={prefix} />}

package/app/routes/connections/connection.schema.ts

@@ -10,14 +10,8 @@ export const connectionNameSchema = z
     /^[a-zA-Z0-9][a-zA-Z0-9 -]*[a-zA-Z0-9]$/,
     "Name must be alphanumeric with hyphens or spaces, no leading/trailing hyphens or spaces",
   )
-  .refine(
-    (val) => !val.includes("--"),
-    "Name must not contain consecutive hyphens",
-  )
-  .refine(
-    (val) => !val.includes("  "),
-    "Name must not contain consecutive spaces",
-  );
+  .refine((val) => !val.includes("--"), "Name must not contain consecutive hyphens")
+  .refine((val) => !val.includes("  "), "Name must not contain consecutive spaces");
 
 // AWS ARN pattern validation
 const arnPattern = /^arn:aws:iam::\d{12}:role\/[\w+=,.@-]+$/;
@@ -39,11 +33,7 @@ const s3UriSchema = z
 /** Auto-suggest a connection name from an S3 URI (e.g. "s3://my-bucket/path" → "my-bucket"). */
 export function suggestName(s3Uri: string): string {
   const { bucketName, prefix } = parseS3Uri(s3Uri);
-  const lastSegment = prefix
-    .replace(/\/$/, "")
-    .split("/")
-    .filter(Boolean)
-    .pop();
+  const lastSegment = prefix.replace(/\/$/, "").split("/").filter(Boolean).pop();
   const base = lastSegment ? `${bucketName} ${lastSegment}` : bucketName;
   return base
     .replace(/[^a-zA-Z0-9 -]/g, " ")
@@ -54,9 +44,7 @@ export function suggestName(s3Uri: string): string {
 }
 
 // Helper to parse S3 URI into bucket name and prefix
-export const parseS3Uri = (
-  uri: string,
-): { bucketName: string; prefix: string } => {
+export const parseS3Uri = (uri: string): { bucketName: string; prefix: string } => {
   const cleaned = uri.replace(/^s3:\/\//, "");
   const [bucketName, ...prefixParts] = cleaned.split("/");
   const prefix = prefixParts.join("/");

package/app/routes/connections/connections.loader.ts

@@ -21,13 +21,7 @@ const fetchPreviewObject = async (
   const creds = credentials[config.name];
   if (!creds) return undefined;
   const s3 = await getS3Client(config, creds, userId);
-  const objects = await getObjects(
-    config,
-    s3,
-    null,
-    config.prefix || undefined,
-    100,
-  );
+  const objects = await getObjects(config, s3, null, config.prefix || undefined, 100);
   return objects.find((obj) => isImageFile(obj.Key ?? ""));
 };
 
@@ -57,17 +51,13 @@ export interface LoaderData {
   pinnedPaths: SerializedPinnedPath[];
 }
 
-export async function loadConnections({
-  context,
-}: LoaderFunctionArgs) {
+export async function loadConnections({ context }: LoaderFunctionArgs) {
   const { connectionConfigs, credentials, user } = context.get(authContext);
   const userId = user.sub;
 
   const [previews, recentlyViewedRaw, pinnedPathsRaw] = await Promise.all([
     Promise.allSettled(
-      connectionConfigs.map((config) =>
-        fetchPreviewObject(config, credentials, userId),
-      ),
+      connectionConfigs.map((config) => fetchPreviewObject(config, credentials, userId)),
     ),
     getRecentlyViewed(userId, 20),
     getPinnedPaths(userId),
@@ -88,16 +78,14 @@ export async function loadConnections({
     };
   });
 
-  const recentlyViewed: SerializedRecentlyViewed[] = recentlyViewedRaw.map(
-    (item) => ({
-      id: item.id,
-      connectionName: item.connectionName,
-      pathName: item.pathName,
-      name: item.name,
-      type: item.type,
-      viewedAt: item.viewedAt.toISOString(),
-    }),
-  );
+  const recentlyViewed: SerializedRecentlyViewed[] = recentlyViewedRaw.map((item) => ({
+    id: item.id,
+    connectionName: item.connectionName,
+    pathName: item.pathName,
+    name: item.name,
+    type: item.type,
+    viewedAt: item.viewedAt.toISOString(),
+  }));
 
   const pinnedPaths: SerializedPinnedPath[] = pinnedPathsRaw.map((pin) => ({
     id: pin.id,

package/app/routes/connections/connections.route.tsx

@@ -63,11 +63,7 @@ export default function ConnectionsListRoute() {
           title="No storage connections"
           description="Add a storage connection to view your cloud storage."
           action={
-            <Button
-              size="lg"
-              variant="neutral"
-              onPress={() => openModal("add-connection")}
-            >
+            <Button size="lg" variant="neutral" onPress={() => openModal("add-connection")}>
               Connect Storage
             </Button>
           }

package/app/routes/connections/connections.server.ts

@@ -4,9 +4,7 @@ import { prisma } from "~/.server/db/prisma";
 import { canSee, filterVisible } from "~/utils/authorization";
 
 /** List all connection configs visible to the user. */
-export async function listConnections(
-  user: UserProfile,
-): Promise<ConnectionConfig[]> {
+export async function listConnections(user: UserProfile): Promise<ConnectionConfig[]> {
   const allConfigs = await prisma.connectionConfig.findMany();
   return filterVisible(user, allConfigs);
 }

package/app/routes/connections/createConnection.action.ts

@@ -42,10 +42,7 @@ export async function createConnection(
   });
 }
 
-export const createAction = async ({
-  request,
-  context,
-}: ActionFunctionArgs) => {
+export const createAction = async ({ request, context }: ActionFunctionArgs) => {
   const { user } = context.get(authContext);
 
   const formData = await request.formData();
@@ -108,10 +105,7 @@ export const createAction = async ({
       headers: { "Set-Cookie": await sessionStorage.commitSession(session) },
     });
   } catch (error) {
-    if (
-      error instanceof Prisma.PrismaClientKnownRequestError &&
-      error.code === "P2002"
-    ) {
+    if (error instanceof Prisma.PrismaClientKnownRequestError && error.code === "P2002") {
       return {
         errors: {
           name: ["This name is already taken. Please choose another."],

package/app/routes/connections/createConnection.modal.tsx

@@ -21,24 +21,14 @@ export function resolveDefaultScope(
   );
 }
 
-export default function CreateConnectionModal({
-  onClose,
-}: {
-  onClose: () => void;
-}) {
-  const rootData = useRouteLoaderData("root") as
-    | { user?: UserProfile }
-    | undefined;
+export default function CreateConnectionModal({ onClose }: { onClose: () => void }) {
+  const rootData = useRouteLoaderData("root") as { user?: UserProfile } | undefined;
   const user = rootData?.user;
   const [searchParams] = useSearchParams();
 
   if (!user) return null;
 
-  const defaultScope = resolveDefaultScope(
-    searchParams.get("scope"),
-    user.adminScopes,
-    user.sub,
-  );
+  const defaultScope = resolveDefaultScope(searchParams.get("scope"), user.adminScopes, user.sub);
 
   return (
     <RouteModal title="Connect Storage" onClose={onClose}>

package/app/routes/connections/deleteConnection.action.ts

@@ -24,10 +24,7 @@ export async function deleteConnection(user: UserProfile, name: string) {
   await prisma.connectionConfig.delete({ where: { id: config.id } });
 }
 
-export const deleteAction = async ({
-  request,
-  context,
-}: ActionFunctionArgs) => {
+export const deleteAction = async ({ request, context }: ActionFunctionArgs) => {
   const { user } = context.get(authContext);
   const session = context.get(sessionContext);
   const formData = await request.formData();

package/app/routes/connections/updateConnection.action.ts

@@ -65,10 +65,7 @@ export async function updateConnection(
   return { ...updated, previousName, previousBucketName };
 }
 
-export const updateAction = async ({
-  request,
-  context,
-}: ActionFunctionArgs) => {
+export const updateAction = async ({ request, context }: ActionFunctionArgs) => {
   const { user } = context.get(authContext);
   const session = context.get(sessionContext);
   const formData = await request.formData();
@@ -141,10 +138,7 @@ export const updateAction = async ({
       headers: { "Set-Cookie": await sessionStorage.commitSession(session) },
     });
   } catch (error) {
-    if (
-      error instanceof Prisma.PrismaClientKnownRequestError &&
-      error.code === "P2002"
-    ) {
+    if (error instanceof Prisma.PrismaClientKnownRequestError && error.code === "P2002") {
       return {
         errors: {
           name: [

package/app/routes/connections/updateConnection.modal.tsx

@@ -17,15 +17,12 @@ export default function UpdateConnectionModal({
     nodeName ? state.connections[nodeName]?.connectionConfig : undefined,
   );
 
-  const rootData = useRouteLoaderData("root") as
-    | { user?: UserProfile }
-    | undefined;
+  const rootData = useRouteLoaderData("root") as { user?: UserProfile } | undefined;
   const user = rootData?.user;
 
   if (!user || !nodeName || !connectionConfig) return null;
 
-  const { bucketName, prefix, provider, ownerScope, roleArn, region, endpoint } =
-    connectionConfig;
+  const { bucketName, prefix, provider, ownerScope, roleArn, region, endpoint } = connectionConfig;
 
   const s3Uri = prefix ? `${bucketName}/${prefix}` : bucketName;
 
@@ -41,15 +38,8 @@ export default function UpdateConnectionModal({
   };
 
   return (
-    <RouteModal
-      title="Edit Connection"
-      onClose={() => onClose(["nodeName"])}
-    >
-      <ConnectionForm
-        adminScopes={user.adminScopes}
-        userId={user.sub}
-        initialData={initialData}
-      />
+    <RouteModal title="Edit Connection" onClose={() => onClose(["nodeName"])}>
+      <ConnectionForm adminScopes={user.adminScopes} userId={user.sub} initialData={initialData} />
     </RouteModal>
   );
 }

package/app/routes/home/home.route.tsx

@@ -1,11 +1,7 @@
 import { Button, EmptyState } from "@cytario/design";
 import { FileSearch } from "lucide-react";
 import { useMemo } from "react";
-import {
-  type MetaFunction,
-  type ShouldRevalidateFunction,
-  useLoaderData,
-} from "react-router";
+import { type MetaFunction, type ShouldRevalidateFunction, useLoaderData } from "react-router";
 
 import { Section } from "~/components/Container";
 import { DashboardSection } from "~/components/DashboardSection";
@@ -18,7 +14,6 @@ import {
 } from "~/routes/connections/connections.loader";
 import { isImageFile } from "~/utils/fileType";
 
-
 const title = "Storage Connections";
 const MAX_RECENT_IMAGES = 4;
 const MAX_PINNED = 10;
@@ -27,10 +22,7 @@ const MAX_RECENT_FILES = 6;
 const MAX_CONNECTIONS = 100;
 
 export const meta: MetaFunction = () => {
-  return [
-    { title },
-    { name: "description", content: "Manage your storage connections" },
-  ];
+  return [{ title }, { name: "description", content: "Manage your storage connections" }];
 };
 
 export const shouldRevalidate: ShouldRevalidateFunction = ({
@@ -48,8 +40,7 @@ export const shouldRevalidate: ShouldRevalidateFunction = ({
 export { loadConnections as loader } from "~/routes/connections/connections.loader";
 
 export default function HomeRoute() {
-  const { nodes, connectionConfigs, recentlyViewed, pinnedPaths } =
-    useLoaderData<LoaderData>();
+  const { nodes, connectionConfigs, recentlyViewed, pinnedPaths } = useLoaderData<LoaderData>();
 
   const { openModal } = useModal();
 
@@ -62,9 +53,7 @@ export default function HomeRoute() {
   const allRecentItems: TreeNode[] = useMemo(
     () =>
       recentlyViewed
-        .filter((item: SerializedRecentlyViewed) =>
-          configByName.has(item.connectionName),
-        )
+        .filter((item: SerializedRecentlyViewed) => configByName.has(item.connectionName))
         .map((item: SerializedRecentlyViewed) => {
           return {
             id: `${item.connectionName}/${item.pathName}`,
@@ -93,9 +82,7 @@ export default function HomeRoute() {
   const pinnedNodes: TreeNode[] = useMemo(
     () =>
       pinnedPaths
-        .filter((pin: SerializedPinnedPath) =>
-          configByName.has(pin.connectionName),
-        )
+        .filter((pin: SerializedPinnedPath) => configByName.has(pin.connectionName))
         .map((pin: SerializedPinnedPath) => {
           return {
             id: `${pin.connectionName}/${pin.pathName}`,
@@ -108,9 +95,7 @@ export default function HomeRoute() {
               pin.totalSize != null || pin.lastModified != null
                 ? ({
                     Size: pin.totalSize ?? undefined,
-                    LastModified: pin.lastModified
-                      ? new Date(pin.lastModified)
-                      : undefined,
+                    LastModified: pin.lastModified ? new Date(pin.lastModified) : undefined,
                   } as TreeNode["_Object"])
                 : undefined,
           };
@@ -128,12 +113,7 @@ export default function HomeRoute() {
         showAllHref="/recent"
       />
 
-      <DashboardSection
-        title="Pinned"
-        nodes={pinnedNodes}
-        viewMode="list"
-        maxItems={MAX_PINNED}
-      />
+      <DashboardSection title="Pinned" nodes={pinnedNodes} viewMode="list" maxItems={MAX_PINNED} />
 
       <DashboardSection
         title="Recently Browsed"
@@ -166,18 +146,13 @@ export default function HomeRoute() {
             title="Start exploring your data"
             description="Add a storage connection to view your cloud storage."
             action={
-              <Button
-                size="lg"
-                variant="neutral"
-                onPress={() => openModal("add-connection")}
-              >
+              <Button size="lg" variant="neutral" onPress={() => openModal("add-connection")}>
                 Connect Storage
               </Button>
             }
           />
         </Section>
       )}
-
     </div>
   );
 }

package/app/routes/layouts/ModalOutlet.tsx

@@ -11,24 +11,12 @@ type ModalComponent = ComponentType<{ onClose: (extraKeys?: string[]) => void }>
  * Add new entries here to register search-param-driven modals.
  */
 const MODAL_REGISTRY = {
-  "add-connection": lazy(
-    () => import("~/routes/connections/createConnection.modal"),
-  ),
-  "convert-overlay": lazy(
-    () => import("~/components/DataGrid/ConvertOverlay.modal"),
-  ),
-  "edit-connection": lazy(
-    () => import("~/routes/connections/updateConnection.modal"),
-  ),
-  "directory-info": lazy(
-    () => import("~/components/DirectoryView/modals/DirectoryInfo.modal"),
-  ),
-  "file-info": lazy(
-    () => import("~/components/DirectoryView/modals/FileInfo.modal"),
-  ),
-  cyberduck: lazy(
-    () => import("~/components/DirectoryView/modals/Cyberduck.modal"),
-  ),
+  "add-connection": lazy(() => import("~/routes/connections/createConnection.modal")),
+  "convert-overlay": lazy(() => import("~/components/DataGrid/ConvertOverlay.modal")),
+  "edit-connection": lazy(() => import("~/routes/connections/updateConnection.modal")),
+  "directory-info": lazy(() => import("~/components/DirectoryView/modals/DirectoryInfo.modal")),
+  "file-info": lazy(() => import("~/components/DirectoryView/modals/FileInfo.modal")),
+  cyberduck: lazy(() => import("~/components/DirectoryView/modals/Cyberduck.modal")),
 } satisfies Record<string, ModalComponent>;
 
 /**

package/app/routes/objects/objects.loader.ts

@@ -5,10 +5,7 @@ import { type LoaderFunctionArgs } from "react-router";
 import { ConnectionConfig } from "~/.generated/client";
 import { authContext } from "~/.server/auth/authMiddleware";
 import { getS3Client } from "~/.server/auth/getS3Client";
-import {
-  buildDirectoryTree,
-  TreeNode,
-} from "~/components/DirectoryView/buildDirectoryTree";
+import { buildDirectoryTree, TreeNode } from "~/components/DirectoryView/buildDirectoryTree";
 import { type NotificationInput } from "~/components/Notification/Notification.store";
 import { getConnection } from "~/routes/connections/connections.server";
 import { getObjects } from "~/utils/getObjects";
@@ -37,8 +34,7 @@ export const loader = async ({
   params,
   context,
 }: LoaderFunctionArgs): Promise<BucketRouteLoaderResponse> => {
-  const { user, credentials: connectionsCredentials } =
-    context.get(authContext);
+  const { user, credentials: connectionsCredentials } = context.get(authContext);
   const { name: connectionName } = params;
 
   if (!connectionName) throw new Error("Connection name is required");
@@ -51,16 +47,11 @@ export const loader = async ({
   const { bucketName } = connectionConfig;
 
   const credentials = connectionsCredentials[connectionName];
-  if (!credentials)
-    throw new Error(`No credentials for connection: ${connectionName}`);
+  if (!credentials) throw new Error(`No credentials for connection: ${connectionName}`);
 
   const urlPath = params["*"] ?? "";
   const connPrefix = connectionConfig.prefix?.replace(/\/$/, "") ?? "";
-  const pathName = connPrefix
-    ? urlPath
-      ? `${connPrefix}/${urlPath}`
-      : connPrefix
-    : urlPath;
+  const pathName = connPrefix ? (urlPath ? `${connPrefix}/${urlPath}` : connPrefix) : urlPath;
   const prefix = getPrefix(pathName);
   const name = getName(pathName, bucketName);
 
@@ -94,12 +85,7 @@ export const loader = async ({
     );
 
     if (objects.length > 0) {
-      const nodes = buildDirectoryTree(
-        objects,
-        connectionName,
-        prefix,
-        urlPath,
-      );
+      const nodes = buildDirectoryTree(objects, connectionName, prefix, urlPath);
 
       return {
         connectionName,

package/app/routes/objects/objects.route.tsx

@@ -9,10 +9,7 @@ import {
   useNavigate,
 } from "react-router";
 
-import {
-  type BucketRouteLoaderResponse,
-  loader,
-} from "./objects.loader";
+import { type BucketRouteLoaderResponse, loader } from "./objects.loader";
 import { requestDurationMiddleware } from "~/.server/requestDurationMiddleware";
 import { getCrumbs } from "~/components/Breadcrumbs/getCrumbs";
 import { ClientOnly } from "~/components/ClientOnly";
@@ -35,9 +32,9 @@ import { createSignedFetch } from "~/utils/signedFetch";
 
 // Lazy load Viewer to prevent SSR issues with client-only code
 const Viewer = lazy(() =>
-  import("~/components/.client/ImageViewer/components/ImageViewer").then(
-    (module) => ({ default: module.Viewer }),
-  ),
+  import("~/components/.client/ImageViewer/components/ImageViewer").then((module) => ({
+    default: module.Viewer,
+  })),
 );
 
 export { loader };
@@ -82,10 +79,7 @@ export const handle = {
  * This route has no mutating forms of its own, so skipping the
  * `formAction` branch is safe.
  */
-export const shouldRevalidate: ShouldRevalidateFunction = ({
-  currentUrl,
-  nextUrl,
-}) => {
+export const shouldRevalidate: ShouldRevalidateFunction = ({ currentUrl, nextUrl }) => {
   if (currentUrl.pathname !== nextUrl.pathname) return true;
   if (currentUrl.search !== nextUrl.search) return true;
   return false;
@@ -157,10 +151,7 @@ export default function ObjectsRoute() {
         { method: "delete", action: "/api/pinned" },
       );
     } else {
-      const totalSize = nodes.reduce(
-        (sum, node) => sum + computeDirectorySize(node),
-        0,
-      );
+      const totalSize = nodes.reduce((sum, node) => sum + computeDirectorySize(node), 0);
       const lastModified = nodes.reduce(
         (max, node) => Math.max(max, computeDirectoryLastModified(node)),
         0,
@@ -169,9 +160,7 @@ export default function ObjectsRoute() {
         {
           connectionName,
           pathName: urlPath,
-          displayName: urlPath
-            ? getName(urlPath, connectionName)
-            : connectionName,
+          displayName: urlPath ? getName(urlPath, connectionName) : connectionName,
           totalSize: String(totalSize),
           lastModified: lastModified ? String(lastModified) : "",
         },
@@ -203,10 +192,7 @@ export default function ObjectsRoute() {
           {isPinned ? <BookmarkCheck size={16} /> : <Bookmark size={16} />}
           {isPinned ? "Pinned" : "Pin"}
         </Button>
-        <Button
-          onPress={() => openModal("cyberduck", { connectionName })}
-          variant="secondary"
-        >
+        <Button onPress={() => openModal("cyberduck", { connectionName })} variant="secondary">
           <Download size={16} />
           Access with Cyberduck
         </Button>
@@ -226,13 +212,10 @@ export default function ObjectsRoute() {
             <header className="flex items-center justify-between p-4 bg-amber-100 border-b border-amber-300 text-amber-900">
               <div className="flex items-center gap-2">
                 <span className="text-sm">
-                  CSV files are slow to query. Convert to Parquet for better
-                  performance.
+                  CSV files are slow to query. Convert to Parquet for better performance.
                 </span>
               </div>
-              <Button onPress={() => openModal("convert-overlay")}>
-                Convert to Parquet
-              </Button>
+              <Button onPress={() => openModal("convert-overlay")}>Convert to Parquet</Button>
             </header>
           )}
           <DataGrid resourceId={resourceId} />
@@ -251,9 +234,7 @@ export default function ObjectsRoute() {
       // Feed it directly to `constructS3Url`, which expects a full key.
       const s3Url = constructS3Url(connectionConfig, pathName);
       const signedFetch = createSignedFetch(
-        () =>
-          useConnectionsStore.getState().connections[connectionName]
-            ?.credentials,
+        () => useConnectionsStore.getState().connections[connectionName]?.credentials,
         connectionConfig,
       );
       return (

package/app/routes/presign.route.tsx

@@ -11,10 +11,7 @@ export const middleware = [requestDurationMiddleware, authMiddleware];
 
 const label = createLabel("presign", "gray");
 
-export const loader = async ({
-  params,
-  context,
-}: ActionFunctionArgs): Promise<Response> => {
+export const loader = async ({ params, context }: ActionFunctionArgs): Promise<Response> => {
   const { user, credentials: connectionsCredentials } = context.get(authContext);
   const { name: connectionName } = params;
   const pathName = params["*"] ?? "";
@@ -27,29 +24,19 @@ export const loader = async ({
   }
 
   const { provider, bucketName, prefix: connPrefix } = connectionConfig;
-  const s3Key = connPrefix
-    ? `${connPrefix.replace(/\/$/, "")}/${pathName}`
-    : pathName;
+  const s3Key = connPrefix ? `${connPrefix.replace(/\/$/, "")}/${pathName}` : pathName;
   console.info(`${label} Presign route: ${provider}/${bucketName}/${s3Key}`);
 
   const credentials = connectionsCredentials[connectionName];
-  if (!credentials)
-    throw new Error(`No credentials for connection: ${connectionName}`);
+  if (!credentials) throw new Error(`No credentials for connection: ${connectionName}`);
 
   try {
     const s3Client = await getS3Client(connectionConfig, credentials, user.sub);
-    const presignedUrl = await getPresignedUrl(
-      connectionConfig,
-      s3Client,
-      s3Key,
-    );
+    const presignedUrl = await getPresignedUrl(connectionConfig, s3Client, s3Key);
 
     return Response.json({ url: presignedUrl });
   } catch (error) {
     console.error("Error presigning url", error);
-    return Response.json(
-      { error: "Failed to generate presigned URL" },
-      { status: 500 },
-    );
+    return Response.json({ error: "Failed to generate presigned URL" }, { status: 500 });
   }
 };

package/app/routes/recent.route.tsx

@@ -105,10 +105,7 @@ export default function RecentRoute() {
         </>
       }
     >
-      <Button
-        variant="secondary"
-        onPress={() => clearFetcher.submit({}, { method: "delete" })}
-      >
+      <Button variant="secondary" onPress={() => clearFetcher.submit({}, { method: "delete" })}>
         <Trash2 size={16} />
         Clear history
       </Button>