When the web app saves image/album descriptions, it sends the description to the server wrapped in a paragraph tag: <p>description</p>. That should be stripped off.

Most of the admin functionality is infrequently used. Hide it behind a combo button / button dropdown or something.

The problem: on an image detail page, after clicking the image delete button, the user is sent to parent album, and there they briefly see the image to be deleted, which stays there until it's actually deleted and the album refreshes.

Options

What I could do

• Go to the parent album and show the image being deleted as 'Delete Processing'
• Continue what I'm doing

What I can't do

• I can't stay on the image page once it's deleted
• I don't think there's a way to transactionally delete the image and navigate to the parent album

The button to upload images into a day album doesn't ask for overwrite confirmation if the album already contains one of the files being uploaded.

It passed early December, re-check pre-launch.

Test that the system can handle images of up to 5MB. I'm splitting out images bigger than that because there ARE issues, and I'm deferring those.

All Tacocat's existing images top out at 3 or 4 MB because Zenphoto crashes trying to process images that are any larger. So we downsize the originals BEFORE uploading them to Zenphoto. I want to stop doing that and store bigger original images in AWS.

Lucie thought she was cropping the actual image, rather than the thumbnail.

Maybe an overlay over each thumbnail with its status

So that unauthenticated users get the smallest possible download, find a way to separate all the new editing functionality from the authenticated version of the app.

Add the CSS for the 2024 colors

On the thumbnail of uploading images, I show the actual image. This uses URL.createObjectURL().

I need to garbage collect those URLs. Figure out how to call URL.revokeObjectURL().

Speed up uploading multiple images by handling them in parallel.

The button to create a new album (day or year) feels unresponsive because it does the create then takes you to the newly created album.

Options

• Show a 'Creating Album' toast that I then remove
• Have some sort of generic 'working' status like that blue line from Gmail
• Behave like uploading an image: show a "creating album..." status at the top of the parent album, and maybe an in-progress thumbnail.

Merge the feature_aws branch into main.

Don't merge until I ship

1. Deploy app to prod on feature_aws
2. Test the prod on feature_aws
3. Create the fist album of 2024
4. Have people test
5. Point pix.tacocat.com to the AWS bucket
6. Maybe send out the mupdate email, to make it even more official
7. On Github.com create the 2024v1 release on the last commit of feature_aws
8. Merge feature_aws into main
9. Delete branch

Don't create a branch for the old non-AWS version

• I had been considering first creating a branch for the non-AWS version. Don't; I can always create a branch of a past commit if necessary.

I like Gmail's very plain, small toasts for things like loading. The toast styling I'm using feel a bit overpowered.

This should simply be a matter of changing the styling of the existing toast system.

I tried fixing it quickly and failed. Needs more time. Here's the deal. The crop component needs to be given the following pieces of information:

• Zoom. That's easy: the thumbnail crop width / original image width
• Crop. This is an x&y for where to position the image behind the crop area. It's specified in pixels but I'm not sure of what. I think it's pixels of the derived image that I'm displaying in the crop UI?

The app doesn't load from cache when there's no network connection. That's what the Progressive Web App / service worker stuff is supposed to support.

What I'd need to do is serve index.html from cache but only if the network fails to retrieve it.

The day album edit and the image edit pages appear to allow drag/dropping images, but it's a lie: they error.

Also, edit pages shouldn't allow dropping because it could blow away edits. Edit pages shouldn't allow dropping.

I want to authenticate my web app when testing localhost. I want to be able to actually do admin functions, edit albums, upload images.

Options

• Domain in hosts file
  • Set a domain in my hosts file, like dev-pix.tacocat.com
  • Configure Vite (my local development app server) to know about it
  • Create corresponding infrastructure on the back end
• I might be able to do it with a localhost proxy
  • I'd have to pass a fake Origin header with a tacocat.com domain or subdomain to get around CORS
  • Eh, that still won't work: the browser will know I'm on localhost and not pass the tacocat.com cookies

The day album drop zone is hard to locate. It works best at the bottom right corner where there's usually empty space. Should be able to drop an image anywhere in the white.

• Like srcset, which allows you to specify different image sizes for different content sizes
• See https://stackoverflow.blog/2022/12/27/picture-perfect-images-with-the-modern-element/

... or is there a magic URL that admins have to know to go to for login?

Improve the upload status line:

• Better upload and processing icons
• Better waiting spinner

We need better status when updating lots of images at once.

When you upload multiple images at once, it doesn't start refreshing the album until they're all uploaded. That's fine, but if there's 30 images it takes a while. Thumbnails do change from 'Upload Not Started' → 'Uploading' → 'Processing', but you're not looking at individual thumbnails.

We need an overall process indicator. Maybe it shows something like "23 not started, 12 uploading, 5 processing".

When navigating to an image detail page, when the image loads in it expands the page / makes the page taller. It's an annoying distraction.

However, it isn't a regression: the Zenphoto version of the app also does this.

To avoid this content flashing / layout shift, show a blank spot where image will be placed at the appropriate dimension.
The UI displays the image at whatever width the screen is, so I just need to figure out the image's height/width ratio, get the current element's width, and set the height correctly.

Test that the Progressive Web App (PWA) is working on the iPhone:

• Can I still install it to the iPhone home screen
• Does that installed app get the new version when I update the SPA

In Firefox (but not Chrome), my localhost browser console keeps showing a service worker error:

Uncaught (in promise) TypeError: ServiceWorker script at http://localhost:5173/service-worker.js for scope http://localhost:5173/ threw an exception during script evaluation.

I don't think it's an actual issue, but instead is related to the fact that Svelte bundles the service worker for production but not development. See https://kit.svelte.dev/docs/service-workers#during-development

Let the potential authors play with the functionality and get their notes on what to fix

• Give Lucie her own account in Cognito
• Send her to https://staging-pix.tacocat.com/
• Give Milo his own account
• Give Felix his own account

It's sometimes not clear when work is being done, like when an album is uploading images or deleting an image.

I like the way some of my favorite tools indicate loading by painting a pulsing blue line across the top of the page. Unobtrusive yet clear. Such as:

• gmail
• github projects
• figma
• aws toolkit

Not sure how I'd calculate progress of the blue line.

• uploads: as a % of the images that were added to be uploaded?
• deleting: simply have a timer for, say, 5 seconds?

Lucie says: "Décembre" should be capitalized when first word, but not when after the day like "3 décembre 2021"

Instead of the toasts disappearing after a set amount of time, have them disappear once you start interacting with the app, like Gmail does.

Figure out how to write automated tests that exercise authentication.

The current solution using autofocus generates an accessibility issue

For an example of using Svelte actions to do autofocus, see https://blog.logrocket.com/svelte-actions-introduction/

Thumbnails are broken in search results.

• Image thumbs are broken: no versionId = 'undefined'
• Album thumbs are also broken: no versionId or crop

You get duplicate XHRs when:

• navigating to next/prev album
• navigating up from image or album to parent album

The delete button is hidden when the album contains children. But when I delete the children, the delete button doesn't show up; I have to refresh the page.

This happens on both year albums and day albums.