Merge branch 'main' into static

2024-02-17 11:16:37 -06:00 · 2024-02-17 11:16:37 -06:00 · 66f6458dd0
commit 66f6458dd0
parent 29aa1af13b 5d85fbf862
9 changed files with 953 additions and 482 deletions
--- a/package.json
+++ b/package.json
@ -9,23 +9,23 @@
    "analyze": "ANALYZE=true next build"
  },
  "dependencies": {
-    "@aws-sdk/client-s3": "3.511.0",
-    "@aws-sdk/s3-request-presigner": "3.511.0",
-    "@headlessui/react": "2.0.0-alpha.4",
+    "@aws-sdk/client-s3": "3.515.0",
+    "@aws-sdk/s3-request-presigner": "3.515.0",
    "@next/bundle-analyzer": "14.1.0",
+    "@radix-ui/react-dropdown-menu": "^2.0.6",
    "@tailwindcss/forms": "^0.5.7",
    "@testing-library/jest-dom": "^6.4.2",
    "@testing-library/react": "^14.2.1",
    "@types/jest": "^29.5.12",
-    "@types/node": "^20.11.17",
+    "@types/node": "^20.11.19",
    "@types/react": "18.2.55",
    "@types/react-dom": "18.2.19",
    "@typescript-eslint/eslint-plugin": "^7.0.1",
    "@typescript-eslint/parser": "^7.0.1",
-    "@vercel/analytics": "^1.1.3",
+    "@vercel/analytics": "^1.2.0",
    "@vercel/blob": "^0.22.0",
    "@vercel/postgres": "0.7.2",
-    "@vercel/speed-insights": "^1.0.9",
+    "@vercel/speed-insights": "^1.0.10",
    "autoprefixer": "10.4.17",
    "camelcase-keys": "^9.1.3",
    "clsx": "^2.1.0",
@ -37,7 +37,7 @@
    "jest": "^29.7.0",
    "jest-environment-jsdom": "^29.7.0",
    "nanoid": "^5.0.5",
-    "next": "14.1.1-canary.56",
+    "next": "14.1.1-canary.58",
    "next-auth": "5.0.0-beta.9",
    "next-themes": "^0.2.1",
    "postcss": "8.4.35",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/src/admin/AdminPhotoMenuClient.tsx
+++ b/src/admin/AdminPhotoMenuClient.tsx
@ -1,13 +1,14 @@
 'use client';

 import { ComponentProps } from 'react';
-import { pathForAdminPhotoEdit } from '@/site/paths';
-import MoreMenu from '../components/MoreMenu';
-import { toggleFavoritePhoto } from '@/photo/actions';
+import { pathForAdminPhotoEdit, pathForPhoto } from '@/site/paths';
+import { deletePhotoAction, toggleFavoritePhotoAction } from '@/photo/actions';
 import { FaRegEdit, FaRegStar, FaStar } from 'react-icons/fa';
-import { Photo } from '@/photo';
+import { Photo, deleteConfirmationTextForPhoto } from '@/photo';
 import { isPathFavs, isPhotoFav } from '@/tag';
 import { usePathname } from 'next/navigation';
+import { BiTrash } from 'react-icons/bi';
+import MoreMenu from '@/components/MoreMenu';

 export default function AdminPhotoMenuClient({
  photo,
@ -17,8 +18,10 @@ export default function AdminPhotoMenuClient({
 }) {
  const isFav = isPhotoFav(photo);
  const path = usePathname();
-  const shouldRedirect = isPathFavs(path) && isFav;
+  const shouldRedirectFav = isPathFavs(path) && isFav;
+  const shouldRedirectDelete = pathForPhoto(photo.id) === path;
  return (
+    <>
      <MoreMenu {...{
        items: [
          {
@ -30,16 +33,35 @@ export default function AdminPhotoMenuClient({
            icon: isFav
              ? <FaStar
                size={14}
-              className="text-amber-500"
+                className="text-amber-500 translate-x-[-1.5px]"
              />
              : <FaRegStar
                size={14}
-              className="translate-x-[-1px]"
+                className="translate-x-[-2px]"
              />,
-          action: () => toggleFavoritePhoto(photo.id, shouldRedirect),
+            action: () => toggleFavoritePhotoAction(
+              photo.id,
+              shouldRedirectFav,
+            ),
+          }, {
+            label: 'Delete',
+            icon: <BiTrash
+              size={14}
+              className="translate-x-[-1.5px] "
+            />,
+            action: () => {
+              if (confirm(deleteConfirmationTextForPhoto(photo))) {
+                return deletePhotoAction(
+                  photo.id,
+                  photo.url,
+                  shouldRedirectDelete,
+                );
+              }
+            },
          },
        ],
        ...props,
      }}/>
+    </>
  );
 }
--- a/src/app/admin/photos/page.tsx
+++ b/src/app/admin/photos/page.tsx
@ -5,14 +5,16 @@ import PhotoTiny from '@/photo/PhotoTiny';
 import { clsx } from 'clsx/lite';
 import FormWithConfirm from '@/components/FormWithConfirm';
 import SiteGrid from '@/components/SiteGrid';
-import { deletePhotoAction, syncPhotoExifDataAction } from '@/photo/actions';
+import {
+  deletePhotoFormAction,
+  syncPhotoExifDataAction,
+} from '@/photo/actions';
 import {
  pathForAdminPhotos,
  pathForPhoto,
  pathForAdminPhotoEdit,
 } from '@/site/paths';
-import { titleForPhoto } from '@/photo';
-import MoreComponentsClient from '@/components/MoreComponentsClient';
+import { deleteConfirmationTextForPhoto, titleForPhoto } from '@/photo';
 import {
  getPhotosCached,
  getPhotosCountIncludingHiddenCached,
@ -30,6 +32,7 @@ import { PRO_MODE_ENABLED } from '@/site/config';
 import SubmitButtonWithStatus from '@/components/SubmitButtonWithStatus';
 import IconGrSync from '@/site/IconGrSync';
 import { getStoragePhotoUrlsNoStore } from '@/services/storage/cache';
+import MoreComponentsClient from '@/components/MoreComponentsClient';

 const DEBUG_PHOTO_BLOBS = false;

@ -131,10 +134,8 @@ export default async function AdminPhotosPage({
                      />
                    </FormWithConfirm>
                    <FormWithConfirm
-                      action={deletePhotoAction}
-                      confirmText={
-                        // eslint-disable-next-line max-len
-                        `Are you sure you want to delete "${titleForPhoto(photo)}?"`}
+                      action={deletePhotoFormAction}
+                      confirmText={deleteConfirmationTextForPhoto(photo)}
                    >
                      <input type="hidden" name="id" value={photo.id} />
                      <input type="hidden" name="url" value={photo.url} />
--- a/src/components/MoreMenu.tsx
+++ b/src/components/MoreMenu.tsx
@ -1,8 +1,8 @@
-import { clsx}  from 'clsx/lite';
-import Link from 'next/link';
-import { Menu } from '@headlessui/react';
+import React, { ReactNode, useState } from 'react';
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
+import clsx from 'clsx';
 import { FiMoreHorizontal } from 'react-icons/fi';
-import { Fragment, ReactNode, useState } from 'react';
+import Link from 'next/link';

 export default function MoreMenu({
  items,
@ -13,26 +13,13 @@ export default function MoreMenu({
    label: ReactNode,
    icon?: ReactNode,
    href?: string,
-    action?: () => Promise<void>,
+    action?: () => Promise<void> | void,
  }[]
  className?: string
  buttonClassName?: string
-}) {
+}){
  const [isLoading, setIsLoading] = useState(false);

-  const itemClass = clsx(
-    'block w-full',
-    'border-none min-h-0 bg-transparent',
-    'text-sm text-main text-left',
-    'px-3 py-1.5 rounded-[3px]',
-    'hover:text-main',
-    'hover:bg-gray-50 active:bg-gray-100',
-    'hover:dark:bg-gray-900/75 active:dark:bg-gray-900',
-    'whitespace-nowrap',
-    'shadow-none',
-    isLoading && 'cursor-not-allowed opacity-50',
-  );
-
  const renderItemContent = (
    label: ReactNode,
    icon?: ReactNode,
@ -43,57 +30,77 @@ export default function MoreMenu({
    </div>;

  return (
-    <div className={clsx(
-      className,
-      'relative z-10',
-    )}>
-      <Menu>
-        <Menu.Button className={clsx(
+    <DropdownMenu.Root>
+      <DropdownMenu.Trigger asChild>
+        <button
+          className={clsx(
            buttonClassName,
-          'p-1 py-1 min-h-0 border-none shadow-none outline-none',
+            'p-1 min-h-0 border-none shadow-none hover:outline-none',
+            'hover:bg-gray-100 active:bg-gray-100',
+            'hover:dark:bg-gray-800/75 active:dark:bg-gray-900',
            'text-dim',
          )}
+          aria-label={`Choose an action for photo: ${'photo'}`}
        >
          <FiMoreHorizontal size={18} />
-        </Menu.Button>
-        <Menu.Items className={clsx(
-          'absolute top-6',
+        </button>
+      </DropdownMenu.Trigger>
+
+      <DropdownMenu.Portal>
+        <DropdownMenu.Content
+          align="end"
+          className={clsx(
+            className,
            'min-w-[8rem]',
-          'text-left',
-          'md:right-1',
+            'ml-2.5',
            'p-1 rounded-md border',
-          'bg-content outline-none',
+            'bg-content',
            'shadow-lg dark:shadow-xl',
-        )}>
+          )}
+        >
          {items.map(({ label, icon, href, action }) =>
-            <Menu.Item
+            <DropdownMenu.Item
              key={`${label}`}
              disabled={isLoading}
-              as={Fragment}
+              className={clsx(
+                'block w-full',
+                'border-none min-h-0 bg-transparent',
+                'select-none hover:outline-none',
+                'text-sm text-main text-left',
+                'px-3 py-1.5 rounded-[3px]',
+                'hover:text-main',
+                'hover:bg-gray-50 active:bg-gray-100',
+                'hover:dark:bg-gray-900/75 active:dark:bg-gray-900',
+                'whitespace-nowrap',
+                'shadow-none',
+                isLoading
+                  ? 'cursor-not-allowed opacity-50'
+                  : 'cursor-pointer',
+              )}
+              onClick={e => {
+                const result = action?.();
+                if (result instanceof Promise) {
+                  e.preventDefault();
+                  setIsLoading(true);
+                  result.finally(() => setIsLoading(false));
+                }
+              }}
            >
              <>
                {href &&
                  <Link
                    href={href}
-                    className={itemClass}
+                    className="hover:text-main"
                  >
                    {renderItemContent(label, icon)}
                  </Link>}
                {action &&
-                  <button
-                    onClick={() => {
-                      setIsLoading(true);
-                      action().finally(() => setIsLoading(false));
-                    }}
-                    className={itemClass}
-                  >
-                    {renderItemContent(label, icon)}
-                  </button>}
+                  renderItemContent(label, icon)}
              </>
-            </Menu.Item>
+            </DropdownMenu.Item>
          )}
-        </Menu.Items>
-      </Menu>
-    </div>
+        </DropdownMenu.Content>
+      </DropdownMenu.Portal>
+    </DropdownMenu.Root>
  );
-}
+};
--- a/src/photo/PhotoGrid.tsx
+++ b/src/photo/PhotoGrid.tsx
@ -57,7 +57,7 @@ export default function PhotoGrid({
              'aspect-square',
              'overflow-hidden',
              '[&>*]:flex [&>*]:w-full [&>*]:h-full',
-              '[&>*>*]:object-cover [&>*>*]:min-h-full',
+              '[&>*>*]:object-cover',
            )
            : undefined}
          style={{
--- a/src/photo/PhotoSmall.tsx
+++ b/src/photo/PhotoSmall.tsx
@ -5,6 +5,8 @@ import { clsx } from 'clsx/lite';
 import { pathForPhoto } from '@/site/paths';
 import { Camera } from '@/camera';
 import { FilmSimulation } from '@/simulation';
+import AdminPhotoMenu from '@/admin/AdminPhotoMenu';
+import { Suspense } from 'react';

 export default function PhotoSmall({
  photo,
@ -12,21 +14,34 @@ export default function PhotoSmall({
  camera,
  simulation,
  selected,
+  showAdminMenu,
 }: {
  photo: Photo
  tag?: string
  camera?: Camera
  simulation?: FilmSimulation
  selected?: boolean
+  showAdminMenu?: boolean
 }) {
  return (
    <Link
      href={pathForPhoto(photo, tag, camera, simulation)}
      className={clsx(
+        'relative group',
        'active:brightness-75',
        selected && 'brightness-50',
      )}
    >
+      <Suspense>
+        {showAdminMenu &&
+          <AdminPhotoMenu
+            buttonClassName={clsx(
+              'absolute top-1 right-1 opacity-0',
+              'group-hover:opacity-100 group-focus:opacity-100',
+            )}
+            photo={photo}
+          />}
+      </Suspense>
      <ImageSmall
        src={photo.url}
        aspectRatio={photo.aspectRatio}
--- a/src/photo/actions.ts
+++ b/src/photo/actions.ts
@ -52,7 +52,7 @@ export async function updatePhotoAction(formData: FormData) {
  redirect(PATH_ADMIN_PHOTOS);
 }

-export async function toggleFavoritePhoto(
+export async function toggleFavoritePhotoAction(
  photoId: string,
  shouldRedirect?: boolean,
 ) {
@ -70,13 +70,26 @@ export async function toggleFavoritePhoto(
  }
 }

-export async function deletePhotoAction(formData: FormData) {
+export async function deletePhotoAction(
+  photoId: string,
+  photoUrl: string,
+  shouldRedirect?: boolean,
+) {
  await Promise.all([
-    deleteStorageUrl(formData.get('url') as string),
-    sqlDeletePhoto(formData.get('id') as string),
+    deleteStorageUrl(photoUrl),
+    sqlDeletePhoto(photoId),
  ]);
-
  revalidateAllKeysAndPaths();
+  if (shouldRedirect) {
+    redirect(PATH_ROOT);
+  }
+};
+
+export async function deletePhotoFormAction(formData: FormData) {
+  return deletePhotoAction(
+    formData.get('url') as string,
+    formData.get('id') as string,
+  );
 };

 export async function deletePhotoTagGloballyAction(formData: FormData) {
--- a/src/photo/index.ts
+++ b/src/photo/index.ts
@ -180,6 +180,9 @@ export const photoQuantityText = (count: number, includeParentheses = true) =>
    ? `(${count} ${photoLabelForCount(count)})`
    : `${count} ${photoLabelForCount(count)}`;  

+export const deleteConfirmationTextForPhoto = (photo: Photo) =>
+  `Are you sure you want to delete "${titleForPhoto(photo)}?"`;
+
 export type PhotoDateRange = { start: string, end: string };

 export const descriptionForPhotoSet = (