cul · wtomaszewska · Jun 3, 2026 · Jun 2, 2026 · Jun 2, 2026 · Jun 2, 2026
diff --git a/.prettierignore b/.prettierignore
@@ -0,0 +1,6 @@
+node_modules/
+public/
+tmp/
+log/
+vendor/
+app/views/
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,8 @@
+{
+  "trailingComma": "all",
+  "tabWidth": 2,
+  "useTabs": false,
+  "semi": true,
+  "singleQuote": true,
+  "printWidth": 100
+}
diff --git a/app/javascript/entrypoints/application.ts b/app/javascript/entrypoints/application.ts
@@ -2,21 +2,20 @@
 //        The S3 Browser React application uses the s3_browser.html.erb layout, which
 //        loads the s3_browser.tsx entrypoint file.
 
-
 // To see this message, add the following to the `<head>` section in your
 // views/layouts/application.html.erb
 //
 //    <%= vite_client_tag %>
 //    <%= vite_javascript_tag 'application' %>
-console.log('Vite ⚡️ Rails')
+console.log('Vite ⚡️ Rails');
 
 // If using a TypeScript entrypoint file:
 //     <%= vite_typescript_tag 'application' %>
 //
 // If you want to use .jsx or .tsx, add the extension:
 //     <%= vite_javascript_tag 'application.jsx' %>
 
-console.log('Visit the guide for more information: ', 'https://vite-ruby.netlify.app/guide/rails')
+console.log('Visit the guide for more information: ', 'https://vite-ruby.netlify.app/guide/rails');
 
 // Example: Load Rails libraries in Vite.
 //

diff --git a/app/javascript/entrypoints/s3_browser.scss b/app/javascript/entrypoints/s3_browser.scss
@@ -9,4 +9,4 @@
 // --bs-accordion-border-radius: Changes the border radius.
 // --bs-accordion-btn-focus-box-shadow: Removes the blue outline when an item is focused. */
 
-@import "bootstrap";
+@import 'bootstrap';
diff --git a/app/javascript/entrypoints/s3_browser.tsx b/app/javascript/entrypoints/s3_browser.tsx
@@ -2,9 +2,9 @@ import { createRoot } from 'react-dom/client';
 import App from '../../s3browser/src/app/App';
 
 const s3BrowserAppElement = document.getElementById('s3-browser-app');
-if (!s3BrowserAppElement ) throw new Error('S3 Browser app root element not found');
+if (!s3BrowserAppElement) throw new Error('S3 Browser app root element not found');
 
 const s3BrowserRoot = createRoot(s3BrowserAppElement);
-s3BrowserRoot .render(<App />)
+s3BrowserRoot.render(<App />);
 
-console.log('S3 Browser React app load complete!');
+console.log('S3 Browser React app load complete!');
diff --git a/app/s3browser/src/app/App.tsx b/app/s3browser/src/app/App.tsx
@@ -9,7 +9,7 @@ const App = () => {
         <AppRouter />
       </AppProvider>
     </React.StrictMode>
-  )
-}
+  );
+};
 
-export default App;
+export default App;
diff --git a/app/s3browser/src/app/provider.tsx b/app/s3browser/src/app/provider.tsx
@@ -56,4 +56,4 @@ export const AppProvider: FC<PropsWithChildren<unknown>> = ({ children }) => {
       </ErrorBoundary>
     </Suspense>
   );
-}
+};
diff --git a/app/s3browser/src/app/router.tsx b/app/s3browser/src/app/router.tsx
@@ -58,7 +58,9 @@ export const createAppRouter = (queryClient: QueryClient) =>
                   path: ':bucketName/object-details',
                   lazy: () => import('./routes/object-details').then(convert(queryClient)),
                   // This route uses useSuspenseQuery, so we want to ensure any errors are caught by the route error boundary
-                  errorElement: <RouteErrorFallback errorMessage="Error loading object details. Please try again." />,
+                  errorElement: (
+                    <RouteErrorFallback errorMessage="Error loading object details. Please try again." />
+                  ),
                 },
               ],
             },
@@ -78,4 +80,4 @@ export const AppRouter = () => {
   const router = useMemo(() => createAppRouter(queryClient), [queryClient]);
 
   return <RouterProvider router={router} />;
-};
+};
diff --git a/app/s3browser/src/app/routes/bucket-contents.tsx b/app/s3browser/src/app/routes/bucket-contents.tsx
@@ -4,16 +4,18 @@ import { getBucketContentsQueryOptions } from '@/features/file-browser/api/get-b
 import BucketContentsTable from '@/features/file-browser/components/bucket-contents-table';
 import { normalizePrefix } from '@/features/file-browser/utils/format-utils';
 
-export const clientLoader = (queryClient: QueryClient) => async ({ params, request }: LoaderFunctionArgs) => {
-  const bucketName = params.bucketName as string;
-  const url = new URL(request.url);
-  const prefix = normalizePrefix(url.searchParams.get('prefix') ?? '');
-  const query = getBucketContentsQueryOptions(bucketName, prefix);
+export const clientLoader =
+  (queryClient: QueryClient) =>
+  async ({ params, request }: LoaderFunctionArgs) => {
+    const bucketName = params.bucketName as string;
+    const url = new URL(request.url);
+    const prefix = normalizePrefix(url.searchParams.get('prefix') ?? '');
+    const query = getBucketContentsQueryOptions(bucketName, prefix);
 
-  // Our API returns results in ~1-2 seconds for large buckets, so we don't want to 
-  // await this and block the UI. Instead, we let the component handle the loading state.
-  queryClient.prefetchQuery(query);
-};
+    // Our API returns results in ~1-2 seconds for large buckets, so we don't want to
+    // await this and block the UI. Instead, we let the component handle the loading state.
+    queryClient.prefetchQuery(query);
+  };
 
 const BucketContentsRoute = () => {
   const params = useParams();
@@ -27,4 +29,4 @@ const BucketContentsRoute = () => {
   );
 };
 
-export default BucketContentsRoute;
+export default BucketContentsRoute;
diff --git a/app/s3browser/src/app/routes/buckets.tsx b/app/s3browser/src/app/routes/buckets.tsx
@@ -17,4 +17,4 @@ const BucketsRoute = () => {
   );
 };
 
-export default BucketsRoute;
+export default BucketsRoute;
diff --git a/app/s3browser/src/app/routes/not-found.tsx b/app/s3browser/src/app/routes/not-found.tsx
@@ -10,4 +10,4 @@ const NotFoundRoute = () => {
   );
 };
 
-export default NotFoundRoute;
+export default NotFoundRoute;
diff --git a/app/s3browser/src/app/routes/object-details.tsx b/app/s3browser/src/app/routes/object-details.tsx
@@ -1,16 +1,21 @@
 import { LoaderFunctionArgs, useParams, useSearchParams } from 'react-router';
 import { QueryClient } from '@tanstack/react-query';
-import { getObjectDetailsQueryOptions, useObjectDetailsSuspenseQuery } from '@/features/file-browser/api/get-object-details';
+import {
+  getObjectDetailsQueryOptions,
+  useObjectDetailsSuspenseQuery,
+} from '@/features/file-browser/api/get-object-details';
 import ObjectDetailDisplay from '@/features/file-browser/components/object-detail-display';
 
-export const clientLoader = (queryClient: QueryClient) => async ({ params, request }: LoaderFunctionArgs) => {
-  const bucketName = params.bucketName as string;
-  const url = new URL(request.url);
-  const key = url.searchParams.get('prefix') ?? '';
-  const query = getObjectDetailsQueryOptions(bucketName, key);
+export const clientLoader =
+  (queryClient: QueryClient) =>
+  async ({ params, request }: LoaderFunctionArgs) => {
+    const bucketName = params.bucketName as string;
+    const url = new URL(request.url);
+    const key = url.searchParams.get('prefix') ?? '';
+    const query = getObjectDetailsQueryOptions(bucketName, key);
 
-  await queryClient.prefetchQuery(query);
-};
+    await queryClient.prefetchQuery(query);
+  };
 
 const ObjectDetailsRoute = () => {
   const params = useParams();
@@ -27,4 +32,4 @@ const ObjectDetailsRoute = () => {
   );
 };
 
-export default ObjectDetailsRoute;
+export default ObjectDetailsRoute;
diff --git a/app/s3browser/src/components/errors/main.tsx b/app/s3browser/src/components/errors/main.tsx
@@ -4,4 +4,4 @@ export const MainErrorFallback = () => {
       <h2>Ooops, something went wrong</h2>
     </div>
   );
-};
+};
diff --git a/app/s3browser/src/components/errors/route-error.tsx b/app/s3browser/src/components/errors/route-error.tsx
@@ -1,5 +1,5 @@
-import { Container } from "react-bootstrap";
-import { useRouteError, isRouteErrorResponse } from "react-router";
+import { Container } from 'react-bootstrap';
+import { useRouteError, isRouteErrorResponse } from 'react-router';
 
 type RouteErrorFallbackProps = {
   errorMessage?: string;
@@ -13,12 +13,14 @@ export const RouteErrorFallback: React.FC<RouteErrorFallbackProps> = ({ errorMes
       <h3>Oops, something went wrong</h3>
       <br />
       <p>{errorMessage || 'The application encountered an error.'}</p>
-        {isRouteErrorResponse(error) && (
-          <Container>
-            <p>{error.status} {error.statusText}</p>
-            <pre>{JSON.stringify(error.data, null, 2)}</pre>
-          </Container>
-        )}
+      {isRouteErrorResponse(error) && (
+        <Container>
+          <p>
+            {error.status} {error.statusText}
+          </p>
+          <pre>{JSON.stringify(error.data, null, 2)}</pre>
+        </Container>
+      )}
     </Container>
   );
-};
+};
diff --git a/app/s3browser/src/components/layouts/main-layout.tsx b/app/s3browser/src/components/layouts/main-layout.tsx
@@ -16,4 +16,4 @@ const MainLayout = () => {
   );
 };
 
-export default MainLayout;
+export default MainLayout;
diff --git a/app/s3browser/src/components/ui/notifications/notification.tsx b/app/s3browser/src/components/ui/notifications/notification.tsx
@@ -1,22 +1,16 @@
-import { Toast } from "react-bootstrap";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import {
-  faCircleCheck,
-  faCircleXmark,
-} from "@fortawesome/free-solid-svg-icons";
-import {
-  faTriangleExclamation,
-  faCircleInfo
-} from "@fortawesome/free-solid-svg-icons";
-import type { IconDefinition } from "@fortawesome/fontawesome-svg-core";
+import { Toast } from 'react-bootstrap';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faCircleCheck, faCircleXmark } from '@fortawesome/free-solid-svg-icons';
+import { faTriangleExclamation, faCircleInfo } from '@fortawesome/free-solid-svg-icons';
+import type { IconDefinition } from '@fortawesome/fontawesome-svg-core';
 
-type NotificationType = "success" | "error" | "warning" | "info";
+type NotificationType = 'success' | 'error' | 'warning' | 'info';
 
 const VARIANT_MAP: Record<NotificationType, string> = {
-  success: "success",
-  error: "danger",
-  warning: "warning",
-  info: "info",
+  success: 'success',
+  error: 'danger',
+  warning: 'warning',
+  info: 'info',
 };
 
 const ICON_MAP: Record<NotificationType, IconDefinition> = {
@@ -50,18 +44,11 @@ export const Notification = ({
       autohide
       delay={5000}
     >
-      <Toast.Header
-        className={`bg-transparent border-${variant} border-opacity-25`}
-      >
-        <FontAwesomeIcon
-          icon={ICON_MAP[type]}
-          className={`me-2 text-${variant}-emphasis`}
-        />
+      <Toast.Header className={`bg-transparent border-${variant} border-opacity-25`}>
+        <FontAwesomeIcon icon={ICON_MAP[type]} className={`me-2 text-${variant}-emphasis`} />
         <strong className={`me-auto text-${variant}-emphasis`}>{title}</strong>
       </Toast.Header>
-      {message && (
-        <Toast.Body className="text-body-secondary">{message}</Toast.Body>
-      )}
+      {message && <Toast.Body className="text-body-secondary">{message}</Toast.Body>}
     </Toast>
   );
 };
diff --git a/app/s3browser/src/components/ui/notifications/notifications.tsx b/app/s3browser/src/components/ui/notifications/notifications.tsx
@@ -1,6 +1,6 @@
-import { ToastContainer } from "react-bootstrap";
-import { useNotifications } from "@/stores/notifications-store";
-import { Notification } from "./notification";
+import { ToastContainer } from 'react-bootstrap';
+import { useNotifications } from '@/stores/notifications-store';
+import { Notification } from './notification';
 
 export const Notifications = () => {
   const { notifications, dismissNotification } = useNotifications();
@@ -16,4 +16,4 @@ export const Notifications = () => {
       ))}
     </ToastContainer>
   );
-}
+};
diff --git a/app/s3browser/src/components/ui/table-builder/table-body.tsx b/app/s3browser/src/components/ui/table-builder/table-body.tsx
@@ -1,18 +1,14 @@
-import { ColumnDef, useReactTable } from '@tanstack/react-table'
+import { ColumnDef, useReactTable } from '@tanstack/react-table';
 import Spinner from 'react-bootstrap/Spinner';
-import TableRow from './table-row'
+import TableRow from './table-row';
 
 type TableBodyProps<T> = {
   table: ReturnType<typeof useReactTable<T>>;
   columns: ColumnDef<T>[];
   isLoading?: boolean;
-}
+};
 
-const TableBody = <T extends object>({
-  table,
-  columns,
-  isLoading,
-}: TableBodyProps<T>) => {
+const TableBody = <T extends object>({ table, columns, isLoading }: TableBodyProps<T>) => {
   if (isLoading) {
     return (
       <tbody>
@@ -50,4 +46,4 @@ const TableBody = <T extends object>({
   );
 };
 
-export default TableBody;
+export default TableBody;
-Original file line number
+Diff line change
@@ Expand Up @@
           </ErrorBoundary>
         </Suspense>
       );
-    }
+    };