adamcameron · adamcameron · Nov 27, 2025 · Nov 27, 2025 · Nov 27, 2025 · Nov 27, 2025
diff --git a/README.md b/README.md
@@ -98,3 +98,10 @@ VALUES
 ```
 
 This lot can be added via the Supabase admin, or straight into the `public` schema of the `postgres` DB.
+
+Login for the admin app is just the defaults:
+
+```
+DASHBOARD_USERNAME=supabase
+DASHBOARD_PASSWORD=this_password_is_insecure_and_should_be_updated
+```
diff --git a/pages/fl-53/index.html b/pages/fl-53/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>app</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/fl-53/main.tsx"></script>
+  </body>
+</html>
diff --git a/src/fl-53/ImageManager.tsx b/src/fl-53/ImageManager.tsx
@@ -0,0 +1,141 @@
+import React, { type FormEvent, useState, Fragment } from 'react'
+import { supabaseClient } from '../lib/supabase.ts'
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+
+export default function ImageManager() {
+  const queryClient = useQueryClient()
+  const [selectedFile, setSelectedFile] = useState<File | null>(null)
+
+  const uploadMutation = useMutation({
+    mutationFn: uploadFile,
+    onSuccess: () => {
+      console.log('File uploaded successfully')
+      void queryClient.invalidateQueries({ queryKey: ['ALL_IMAGES'] })
+    },
+    onError: (error) => {
+      console.error('Error uploading file:', error)
+    },
+  })
+
+  const deleteMutation = useMutation({
+    mutationFn: deleteImages,
+    onSuccess: () => {
+      console.log('All files deleted successfully')
+      void queryClient.invalidateQueries({ queryKey: ['ALL_IMAGES'] })
+    },
+    onError: (error) => {
+      console.error('Error deleting files:', error)
+    },
+  })
+
+  const imageUrls = useQuery<string[]>({
+    queryKey: ['ALL_IMAGES'],
+    queryFn: fetchImageUrls,
+  })
+
+  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setSelectedFile(event.target.files?.[0] || null)
+  }
+
+  const handleSubmit = (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault()
+    if (selectedFile === null) {
+      return console.log("Ain't no file selected")
+    }
+
+    uploadMutation.mutate(selectedFile)
+    event.currentTarget.reset()
+  }
+
+  const handleDelete = (event: React.MouseEvent<HTMLButtonElement>) => {
+    event.preventDefault()
+    deleteMutation.mutate()
+  }
+
+  return (
+    <div>
+      <form onSubmit={handleSubmit}>
+        <input
+          type="file"
+          name="file"
+          accept="image/png"
+          onChange={handleChange}
+        />
+        <button type="submit">Upload Image</button>
+        <br />
+        <button onClick={handleDelete}>Delete all</button>
+      </form>
+      <hr />
+      {imageUrls.data === undefined
+        ? 'nothing'
+        : imageUrls.data.map((imageUrl: string) => (
+            <Fragment key={imageUrl}>
+              <img
+                src={imageUrl}
+                alt={getFilenameFromUrl(imageUrl) || 'Uploaded image'}
+                width="200px"
+              />
+              <br />
+              {getFilenameFromUrl(imageUrl)}
+              <hr />
+            </Fragment>
+          ))}
+    </div>
+  )
+}
+
+async function uploadFile(file: File) {
+  const { data, error } = await supabaseClient.storage
+    .from('images')
+    .upload(`private/${file.name}`, file)
+  if (error === null) {
+    return Promise.resolve(data)
+  }
+
+  return Promise.reject(error)
+}
+
+async function fetchImageUrls(): Promise<string[]> {
+  const { data, error } = await supabaseClient.storage
+    .from('images')
+    .list('private/')
+  if (error !== null) {
+    return Promise.reject(error)
+  }
+
+  const urls = data
+    .filter((file) => file.name.endsWith('.png'))
+    .map(async (file) => {
+      const { data, error } = await supabaseClient.storage
+        .from('images')
+        .createSignedUrl(`private/${file.name}`, 60)
+      if (error !== null) {
+        console.error(`Failed to create signed URL for ${file.name}:`, error)
+        throw error
+      }
+      return data === null ? '' : data.signedUrl
+    })
+  return Promise.all(urls)
+}
+
+async function deleteImages() {
+  const { data: files, error: listError } = await supabaseClient.storage
+    .from('images')
+    .list('private/')
+  if (listError !== null || files === null) {
+    return Promise.reject(listError || new Error('Failed to list files'))
+  }
+  const paths = files.map((file) => `private/${file.name}`)
+
+  const { data, error } = await supabaseClient.storage
+    .from('images')
+    .remove(paths)
+  if (error !== null) {
+    return Promise.reject(error)
+  }
+  return Promise.resolve(data)
+}
+
+function getFilenameFromUrl(url: string) {
+  return url.split('?')[0].split('/').pop()
+}
diff --git a/src/fl-53/main.tsx b/src/fl-53/main.tsx
@@ -0,0 +1,17 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import ImageManager from './ImageManager.tsx'
+import ErrorBoundary from '../lib/ErrorBoundary.tsx'
+
+const queryClient = new QueryClient()
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <ErrorBoundary>
+      <QueryClientProvider client={queryClient}>
+        <ImageManager />
+      </QueryClientProvider>
+    </ErrorBoundary>
+  </StrictMode>
+)
diff --git a/src/profiles/lib/ErrorBoundary.tsx → src/lib/ErrorBoundary.tsx b/src/profiles/lib/ErrorBoundary.tsx → src/lib/ErrorBoundary.tsx
diff --git a/src/profiles/lib/supabase.ts → src/lib/supabase.ts b/src/profiles/lib/supabase.ts → src/lib/supabase.ts
diff --git a/src/profiles/lib/testCredentials.ts → src/lib/testCredentials.ts b/src/profiles/lib/testCredentials.ts → src/lib/testCredentials.ts
diff --git a/src/main.tsx b/src/main.tsx
@@ -2,7 +2,7 @@ import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
-import ErrorBoundary from './profiles/lib/ErrorBoundary.tsx'
+import ErrorBoundary from './lib/ErrorBoundary.tsx'
 import Home from './profiles/home/Home.tsx'
 import LoginForm from './profiles/login/LoginForm.tsx'
 import Gallery from './profiles/gallery/Gallery.tsx'

diff --git a/src/profiles/add/Form.tsx b/src/profiles/add/Form.tsx
@@ -3,7 +3,7 @@ import { StatusCodes } from 'http-status-codes'
 import { useNavigate } from 'react-router-dom'
 import { useMutation, useQueryClient } from '@tanstack/react-query'
 import { type Mugshot, type UnsavedMugshot } from '../mugshot.tsx'
-import { supabaseClient } from '../lib/supabase.ts'
+import { supabaseClient } from '../../lib/supabase.ts'
 
 import './styles.css'
 

diff --git a/src/profiles/gallery/Gallery.tsx b/src/profiles/gallery/Gallery.tsx
@@ -2,7 +2,7 @@ import { type ReactNode } from 'react'
 import { useQuery } from '@tanstack/react-query'
 import './gallery.css'
 import { type Mugshot } from '../mugshot.tsx'
-import { supabaseClient } from '../lib/supabase.ts'
+import { supabaseClient } from '../../lib/supabase.ts'
 import { StatusCodes } from 'http-status-codes'
 
 function Profile({ src, alt }: { src: string; alt: string }) {

diff --git a/src/profiles/login/LoginForm.tsx b/src/profiles/login/LoginForm.tsx
@@ -1,8 +1,8 @@
 import { type ChangeEvent, type FormEvent, useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { useMutation } from '@tanstack/react-query'
-import { supabaseClient } from '../lib/supabase.ts'
-import { loginCredentials } from '../lib/testCredentials.ts'
+import { supabaseClient } from '../../lib/supabase.ts'
+import { loginCredentials } from '../../lib/testCredentials.ts'
 
 type User = { email: string; password: string }
 export default function LoginForm() {

diff --git a/tests/integration/profiles/gallery.test.tsx b/tests/integration/profiles/gallery.test.tsx
@@ -1,8 +1,8 @@
 import { render, screen, waitFor } from '@testing-library/react'
 import { describe, it, expect } from 'vitest'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
-import { supabaseClient } from '@/profiles/lib/supabase.ts'
-import { loginCredentials } from '@/profiles/lib/testCredentials'
+import { supabaseClient } from '@/lib/supabase'
+import { loginCredentials } from '@/lib/testCredentials'
 import Gallery from '@/profiles/gallery/Gallery.tsx'
 
 describe('Testing Gallery component with live data', () => {

diff --git a/tests/unit/profiles/add/form.test.tsx b/tests/unit/profiles/add/form.test.tsx
@@ -3,7 +3,7 @@ import { describe, it, expect, vi, beforeEach, afterEach } from 'vitest'
 import { StatusCodes } from 'http-status-codes'
 import { MemoryRouter } from 'react-router-dom'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
-import { supabaseClient } from '@/profiles/lib/supabase.ts'
+import { supabaseClient } from '@/lib/supabase'
 import Form from '@/profiles/add/Form.tsx'
 
 const mockedUsedNavigate = vi.fn()

diff --git a/tests/unit/profiles/gallery/gallery.test.tsx b/tests/unit/profiles/gallery/gallery.test.tsx
@@ -2,7 +2,7 @@ import { render, screen, waitFor } from '@testing-library/react'
 import { describe, it, expect, vi, afterEach } from 'vitest'
 import { StatusCodes } from 'http-status-codes'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
-import { supabaseClient } from '@/profiles/lib/supabase.ts'
+import { supabaseClient } from '@/lib/supabase'
 import { type UserResponse } from '@supabase/supabase-js'
 import Gallery from '@/profiles/gallery/Gallery.tsx'
 

diff --git a/vite.config.ts b/vite.config.ts
@@ -34,6 +34,7 @@ export default defineConfig({
           __dirname,
           'pages/fl-51/baseline/index.html'
         ),
+        fl53_image_manager: resolve(__dirname, 'pages/fl-53/index.html'),
       },
     },
   },
-Original file line number
+Diff line change
@@ Expand Up / @@ -34,6 +34,7 @@ export default defineConfig({ @@
               __dirname,
               'pages/fl-51/baseline/index.html'
             ),
+            fl53_image_manager: resolve(__dirname, 'pages/fl-53/index.html'),
           },
         },
       },
@@ Expand Down @@