From 6935e1e81e038e1140522c3162192f569964197f Mon Sep 17 00:00:00 2001
From: Carl Malmz <callem217@gmail.com>
Date: Fri, 17 May 2024 03:46:06 +0200
Subject: [PATCH] add back working row actions

---
 app/components/form/date-picker.tsx           |  63 +++++++
 app/components/form/form.tsx                  |  49 ++++++
 app/components/form/input.tsx                 |   9 +
 app/components/form/textarea.tsx              |   9 +
 app/lib/actions.server.ts                     |  20 ++-
 app/lib/auth.server.ts                        |   2 +-
 app/lib/schema.server.ts                      |   7 +-
 app/lib/storage/image.ts                      |  25 ++-
 app/routes/_main.admin.$id/columns.tsx        |  48 +-----
 app/routes/_main.admin.$id/publish-button.tsx |  14 +-
 app/routes/_main.admin.$id/route.tsx          | 156 ++++++++++--------
 app/routes/_main.admin.$id/row-actions.tsx    |  64 +++++++
 app/routes/_main.admin._index/columns.tsx     |  81 +++++++++
 .../route.tsx}                                |  85 +++++-----
 app/routes/_main.admin._index/row-actions.tsx |  61 +++++++
 app/routes/api.image.$id.tsx                  |  28 +++-
 package-lock.json                             | 141 ++++++++--------
 package.json                                  |  11 +-
 vite.config.ts                                |   3 +
 19 files changed, 626 insertions(+), 250 deletions(-)
 create mode 100644 app/components/form/date-picker.tsx
 create mode 100644 app/components/form/form.tsx
 create mode 100644 app/components/form/input.tsx
 create mode 100644 app/components/form/textarea.tsx
 create mode 100644 app/routes/_main.admin.$id/row-actions.tsx
 create mode 100644 app/routes/_main.admin._index/columns.tsx
 rename app/routes/{_main.admin._index.tsx => _main.admin._index/route.tsx} (52%)
 create mode 100644 app/routes/_main.admin._index/row-actions.tsx

diff --git a/app/components/form/date-picker.tsx b/app/components/form/date-picker.tsx
new file mode 100644
index 0000000..4247d4b
--- /dev/null
+++ b/app/components/form/date-picker.tsx
@@ -0,0 +1,63 @@
+import React, { useRef, useState } from 'react';
+import { Popover, PopoverContent, PopoverTrigger } from '../ui/popover';
+import { Button } from '../ui/button';
+import { cn } from '~/lib/utils';
+import { CalendarIcon } from 'lucide-react';
+import { format } from 'date-fns';
+import { Calendar } from '../ui/calendar';
+import { sv } from 'date-fns/locale';
+import { useField } from './form';
+
+interface Props
+  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'defaultValue'> {
+  defaultValue?: Date;
+}
+export function FormDatePicker({ name, defaultValue, ...props }: Props) {
+  const triggerRef = useRef<HTMLButtonElement>(null);
+  const { id, errorId } = useField();
+  const [value, setValue] = useState(defaultValue);
+
+  return (
+    <div>
+      <input
+        id={id}
+        className='sr-only'
+        aria-hidden
+        aria-describedby={errorId}
+        tabIndex={-1}
+        name={name}
+        defaultValue={defaultValue?.toISOString() ?? ''}
+        onFocus={() => {
+          triggerRef.current?.focus();
+        }}
+      />
+      <Popover>
+        <PopoverTrigger asChild>
+          <Button
+            ref={triggerRef}
+            variant={'outline'}
+            className={cn(
+              'flex w-full justify-start text-left font-normal focus:ring-2 focus:ring-stone-950 focus:ring-offset-2',
+              !value && 'text-muted-foreground'
+            )}
+          >
+            <CalendarIcon className='mr-2 h-4 w-4' />
+            {value ? (
+              format(value, 'PPP', { locale: sv })
+            ) : (
+              <span>Pick a date</span>
+            )}
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className='w-auto p-0'>
+          <Calendar
+            mode='single'
+            selected={value}
+            onSelect={setValue}
+            initialFocus
+          />
+        </PopoverContent>
+      </Popover>
+    </div>
+  );
+}
diff --git a/app/components/form/form.tsx b/app/components/form/form.tsx
new file mode 100644
index 0000000..8eed123
--- /dev/null
+++ b/app/components/form/form.tsx
@@ -0,0 +1,49 @@
+import React, { createContext, useContext, useId } from 'react';
+import { cn } from '~/lib/utils';
+import { Label } from '../ui/label';
+
+const FieldContext = createContext<{ id?: string; errorId?: string }>({});
+export const useField = () => useContext(FieldContext);
+
+interface ErrorProps extends React.HTMLAttributes<HTMLDivElement> {}
+export function FormError({ className, ...props }: ErrorProps) {
+  const { id } = useField();
+  return (
+    <div
+      id={id}
+      className={cn('text-sm font-medium text-destructive', className)}
+      {...props}
+    ></div>
+  );
+}
+
+interface LabelProps extends React.ComponentProps<typeof Label> {}
+export function FormLabel({ ...props }: LabelProps) {
+  const { id } = useField();
+  return <Label htmlFor={id} {...props}></Label>;
+}
+
+interface DescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {}
+export function FormDescription({ className, ...props }: DescriptionProps) {
+  const { errorId } = useField();
+  return (
+    <p
+      id={errorId}
+      className={cn('text-sm text-muted-foreground', className)}
+      {...props}
+    />
+  );
+}
+
+export function FormField({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLParagraphElement>) {
+  const id = useId();
+  const errorId = useId();
+  return (
+    <FieldContext.Provider value={{ id, errorId }}>
+      <div className={cn('space-y-2', className)} {...props}></div>
+    </FieldContext.Provider>
+  );
+}
diff --git a/app/components/form/input.tsx b/app/components/form/input.tsx
new file mode 100644
index 0000000..990ecc8
--- /dev/null
+++ b/app/components/form/input.tsx
@@ -0,0 +1,9 @@
+import { Input } from '../ui/input';
+import type { ComponentProps } from 'react';
+import { useField } from './form';
+
+interface Props extends ComponentProps<typeof Input> {}
+export function FormInput({ ...props }: Props) {
+  const { id, errorId } = useField();
+  return <Input id={id} aria-describedby={errorId} {...props} />;
+}
diff --git a/app/components/form/textarea.tsx b/app/components/form/textarea.tsx
new file mode 100644
index 0000000..bdf69ff
--- /dev/null
+++ b/app/components/form/textarea.tsx
@@ -0,0 +1,9 @@
+import { Textarea } from '~/components/ui/textarea';
+import type { ComponentProps } from 'react';
+import { useField } from './form';
+
+interface Props extends ComponentProps<typeof Textarea> {}
+export function FormTextarea({ ...props }: Props) {
+  const { id, errorId } = useField();
+  return <Textarea id={id} aria-describedby={errorId} {...props} />;
+}
diff --git a/app/lib/actions.server.ts b/app/lib/actions.server.ts
index 4c07144..66a0473 100644
--- a/app/lib/actions.server.ts
+++ b/app/lib/actions.server.ts
@@ -1,17 +1,18 @@
 import { and, asc, eq, isNull, sql, type InferInsertModel } from 'drizzle-orm';
 import { db } from './db.server';
 import { album, image, type CreateAlbum } from './schema.server';
+import { deleteImageFiles } from './storage/image';
 
 export async function createAlbum(data: CreateAlbum) {
   return await db.insert(album).values(data).returning({ id: album.id });
 }
 
 export async function updateAlbum(id: number, data: CreateAlbum) {
-  const moreData: Partial<InferInsertModel<typeof album>> = {
-    ...data,
-    modified_at: new Date(),
-  };
-  await db.update(album).set(moreData).where(eq(album.id, id));
+  await db.update(album).set(data).where(eq(album.id, id));
+}
+
+export async function setThumbnail(id: number, thumbnail_id: number) {
+  await db.update(album).set({ thumbnail_id }).where(eq(album.id, id));
 }
 
 // NOTE: This function lets indirectly set the thumbnail of an album if empty.
@@ -39,3 +40,12 @@ export async function setPubishedStatus(id: number, published: boolean) {
     await db.update(album).set({ published }).where(eq(album.id, id));
   });
 }
+
+export async function deleteAlbum(id: number) {
+  await db.delete(album).where(eq(album.id, id));
+}
+
+export async function deleteImage(id: number) {
+  const [data] = await db.delete(image).where(eq(image.id, id)).returning();
+  deleteImageFiles(data);
+}
diff --git a/app/lib/auth.server.ts b/app/lib/auth.server.ts
index 332921d..e27192b 100644
--- a/app/lib/auth.server.ts
+++ b/app/lib/auth.server.ts
@@ -40,7 +40,7 @@ export function ensureRole(
       ...params,
     })(request);
     if (!ctx.isAuthenticated) {
-      throw redirect('/login');
+      throw redirect('/auth/login');
     }
 
     for (const role of roles) {
diff --git a/app/lib/schema.server.ts b/app/lib/schema.server.ts
index 834ef4f..688bdea 100644
--- a/app/lib/schema.server.ts
+++ b/app/lib/schema.server.ts
@@ -1,4 +1,3 @@
-import type { Serializable } from '@remix-run/react/future/single-fetch';
 import type { InferInsertModel, InferSelectModel } from 'drizzle-orm';
 import { relations } from 'drizzle-orm';
 import {
@@ -12,6 +11,7 @@ import {
   timestamp,
 } from 'drizzle-orm/pg-core';
 import type { Exif } from 'exif-reader';
+import type { Jsonify } from '@remix-run/server-runtime/dist/jsonify';
 
 export const album = pgTable('album', {
   id: serial('id').primaryKey(),
@@ -26,7 +26,8 @@ export const album = pgTable('album', {
     .notNull(),
   modified_at: timestamp('modified_at', { withTimezone: true })
     .defaultNow()
-    .notNull(),
+    .notNull()
+    .$onUpdateFn(() => new Date()),
 });
 
 export const albumRelation = relations(album, ({ many }) => ({
@@ -42,7 +43,7 @@ export type CreateAlbum = Omit<
 export const image = pgTable('image', {
   id: serial('id').primaryKey(),
   legacy_id: text('legacy_id').unique(),
-  exif_data: jsonb('exif_data').$type<Serializable>(),
+  exif_data: jsonb('exif_data').$type<Jsonify<Exif>>(),
   mimetype: text('mimetype'),
   album_id: integer('album_id')
     .references(() => album.id)
diff --git a/app/lib/storage/image.ts b/app/lib/storage/image.ts
index 781ef15..45cc7a7 100644
--- a/app/lib/storage/image.ts
+++ b/app/lib/storage/image.ts
@@ -7,7 +7,7 @@ import { dirname } from 'node:path';
 import { ImageError, type ImageRecord, type ImageStream } from './types';
 import { safeStat } from './utils';
 import { getLegacyImageStream } from './legacy';
-import { stat, mkdir, rename } from 'node:fs/promises';
+import { stat, mkdir, rename, rm } from 'node:fs/promises';
 import { createOptimized } from './optimizer';
 import { getImagePath, getPreviewPath, getThumbnailPath } from './paths';
 
@@ -42,8 +42,23 @@ export async function getImageStream(
 }
 
 export async function commitUpload(stagePath: string, image: ImageRecord) {
-  const path = getImagePath(image);
-  await mkdir(dirname(path), { recursive: true });
-  await rename(stagePath, path);
-  createOptimized(path, getThumbnailPath(image), getPreviewPath(image));
+  const imagePath = getImagePath(image);
+  const thumbnailPath = getThumbnailPath(image);
+  const previewPath = getPreviewPath(image);
+  await mkdir(dirname(imagePath), { recursive: true });
+  await rename(stagePath, imagePath);
+  mkdir(dirname(thumbnailPath), { recursive: true });
+  mkdir(dirname(previewPath), { recursive: true });
+  createOptimized(imagePath, getThumbnailPath(image), getPreviewPath(image));
+}
+
+export async function deleteImageFiles(image: ImageRecord) {
+  const imagePath = getImagePath(image);
+  const thumbnailPath = getThumbnailPath(image);
+  const previewPath = getPreviewPath(image);
+  await Promise.all(
+    [imagePath, thumbnailPath, previewPath].map((path) =>
+      rm(path, { force: true })
+    )
+  );
 }
diff --git a/app/routes/_main.admin.$id/columns.tsx b/app/routes/_main.admin.$id/columns.tsx
index 39b5fa7..72128af 100644
--- a/app/routes/_main.admin.$id/columns.tsx
+++ b/app/routes/_main.admin.$id/columns.tsx
@@ -1,53 +1,16 @@
 import { SortButton } from '~/components/data-table';
-import { Button } from '~/components/ui/button';
 import { Checkbox } from '~/components/ui/checkbox';
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from '~/components/ui/dropdown-menu';
 import type { Image as ImageType } from '~/lib/schema.server';
 import type { ColumnDef } from '@tanstack/react-table';
 import { createColumnHelper } from '@tanstack/react-table';
 import { format } from 'date-fns';
-import { Check, Link as LinkIcon, MoreHorizontal, Trash2 } from 'lucide-react';
+import { Check } from 'lucide-react';
 import { Link } from '@remix-run/react';
+import { RowActions } from './row-actions';
 
 type ItemType = ImageType & { thumbnail: boolean };
 const cb = createColumnHelper<ItemType>();
 
-function RowActions() {
-  return (
-    <DropdownMenu>
-      <DropdownMenuTrigger asChild>
-        <Button variant='ghost' className='h-8 w-8 p-0'>
-          <span className='sr-only'>Öppna meny</span>
-          <MoreHorizontal className='h-4 w-4' />
-        </Button>
-      </DropdownMenuTrigger>
-      <DropdownMenuContent align='end'>
-        <DropdownMenuLabel>Actions</DropdownMenuLabel>
-        <DropdownMenuSeparator></DropdownMenuSeparator>
-        <DropdownMenuItem onClick={async () => {}}>
-          <Check className='mr-2 h-4 w-4'></Check>
-          <span>Sätt som omslag</span>
-        </DropdownMenuItem>
-        <DropdownMenuItem>
-          <LinkIcon className='mr-2 h-4 w-4'></LinkIcon>
-          <span>Kopiera länk</span>
-        </DropdownMenuItem>
-        <DropdownMenuItem className='text-destructive'>
-          <Trash2 className='mr-2 h-4 w-4'></Trash2>
-          <span>Ta bort</span>
-        </DropdownMenuItem>
-      </DropdownMenuContent>
-    </DropdownMenu>
-  );
-}
-
 export function createColumns() {
   return [
     cb.display({
@@ -116,7 +79,12 @@ export function createColumns() {
     }),
     cb.display({
       id: 'actions',
-      cell: (info) => <RowActions></RowActions>,
+      cell: (info) => (
+        <RowActions
+          id={info.row.original.id}
+          album_id={info.row.original.album_id}
+        ></RowActions>
+      ),
       enableSorting: false,
       enableHiding: false,
     }),
diff --git a/app/routes/_main.admin.$id/publish-button.tsx b/app/routes/_main.admin.$id/publish-button.tsx
index fa98a76..116cdee 100644
--- a/app/routes/_main.admin.$id/publish-button.tsx
+++ b/app/routes/_main.admin.$id/publish-button.tsx
@@ -12,14 +12,13 @@ import {
 import { Button } from '~/components/ui/button';
 
 interface Props {
-  formId?: string;
-  dirty: boolean;
+  form?: string;
   album: {
     id: number;
     published: boolean;
   };
 }
-export function PublishButton({ formId, album, dirty }: Props) {
+export function PublishButton({ form, album }: Props) {
   return (
     <AlertDialog>
       <AlertDialogTrigger asChild>
@@ -35,18 +34,13 @@ export function PublishButton({ formId, album, dirty }: Props) {
           </AlertDialogTitle>
           <AlertDialogDescription>
             Ändringar du gjort sparas inte automatisk innan publicering. Va
-            säker på att du spara innan.{' '}
-            {dirty && (
-              <span className='font-semibold text-destructive'>
-                Du har osparade ändringar!
-              </span>
-            )}
+            säker på att du spara innan.
           </AlertDialogDescription>
         </AlertDialogHeader>
         <AlertDialogFooter>
           <AlertDialogCancel>Avbryt</AlertDialogCancel>
           <AlertDialogAction
-            form={formId}
+            form={form}
             type='submit'
             name='intent'
             value='publish'
diff --git a/app/routes/_main.admin.$id/route.tsx b/app/routes/_main.admin.$id/route.tsx
index 8bf3e39..d7b2fdd 100644
--- a/app/routes/_main.admin.$id/route.tsx
+++ b/app/routes/_main.admin.$id/route.tsx
@@ -1,23 +1,20 @@
 import { PublishButton } from './publish-button';
 import { Separator } from '~/components/ui/separator';
-import type { ActionFunctionArgs, LoaderFunctionArgs } from '@remix-run/node';
+import {
+  type ActionFunctionArgs,
+  type LoaderFunctionArgs,
+} from '@remix-run/node';
 import { getAlbum } from '~/lib/data.server';
-import { json, useFetcher, useLoaderData } from '@remix-run/react';
+import { useFetcher, useLoaderData } from '@remix-run/react';
 import { z } from 'zod';
-import { parseWithZod } from '@conform-to/zod';
-import { setPubishedStatus, updateAlbum } from '~/lib/actions.server';
-import { getFormProps, getInputProps, useForm } from '@conform-to/react';
 import {
-  ErrorConform,
-  FormField,
-  LabelConform,
-} from '~/components/conform/form';
+  deleteImage,
+  setPubishedStatus,
+  setThumbnail,
+  updateAlbum,
+} from '~/lib/actions.server';
 import { useEffect, useState } from 'react';
 import { toast } from 'sonner';
-import { InputConform } from '~/components/conform/input';
-import { TextareaConform } from '~/components/conform/textarea';
-import { DatePickerConform } from '~/components/conform/date-picker';
-import { StatusButton } from '~/components/conform/status-button';
 import { ensureRole } from '~/lib/auth.server';
 import { DataTable } from '~/components/data-table';
 import { Input } from '~/components/ui/input';
@@ -25,8 +22,15 @@ import { createColumns } from './columns';
 import type { Image } from '~/lib/schema.server';
 import { UploadButton } from './upload-button';
 import type { CrumbHandle } from '~/components/dynamic-breadcrum';
+import { getParams } from 'remix-params-helper';
+import { FormError, FormField, FormLabel } from '~/components/form/form';
+import { FormInput } from '~/components/form/input';
+import { FormTextarea } from '~/components/form/textarea';
+import { Loader2 } from 'lucide-react';
+import { Button } from '~/components/ui/button';
+import { FormDatePicker } from '~/components/form/date-picker';
 
-const schema = z.object({
+const updateSchema = z.object({
   id: z.number(),
   published: z.boolean(),
   name: z.string().min(1, {
@@ -57,99 +61,117 @@ export async function action({ request }: ActionFunctionArgs) {
   switch (formData.get('intent')) {
     case 'publish': {
       await ensureRole(['publish:album'])(request);
-      const submission = parseWithZod(formData, { schema });
-      if (submission.status !== 'success') {
-        return json(submission.reply());
+      const result = getParams(
+        formData,
+        z.object({
+          id: z.number(),
+          published: z.boolean(),
+        })
+      );
+      if (!result.success) {
+        return result;
       }
-      await setPubishedStatus(submission.value.id, !submission.value.published);
-      return json(submission.reply());
+
+      await setPubishedStatus(result.data.id, !result.data.published);
+      return { success: true } as const;
     }
 
     case 'save': {
       await ensureRole(['write:album'])(request);
-      const submission = parseWithZod(formData, { schema });
-      if (submission.status !== 'success') {
-        return json(submission.reply());
+      const result = getParams(formData, updateSchema);
+      if (!result.success) {
+        return result;
       }
-      const { id, ...data } = submission.value;
+
+      const { id, ...data } = result.data;
       await updateAlbum(id, data);
-      return json(submission.reply());
+      return { success: true } as const;
+    }
+
+    case 'thumbnail': {
+      await ensureRole(['write:album'])(request);
+      const result = getParams(
+        formData,
+        z.object({ id: z.number(), album_id: z.number() })
+      );
+      if (!result.success) {
+        return result;
+      }
+
+      await setThumbnail(result.data.album_id, result.data.id);
+      return { success: true } as const;
+    }
+
+    case 'delete': {
+      await ensureRole(['delete:image'])(request);
+      const result = getParams(formData, z.object({ id: z.number() }));
+      if (!result.success) {
+        return result;
+      }
+      await deleteImage(result.data.id);
+      return { success: true } as const;
     }
 
     default:
-      throw new Error('Invalid intent');
+      throw new Error(`Invalid intent: ${formData.get('intent')}`);
   }
 }
 
 export default function Page() {
   const { album } = useLoaderData<typeof loader>();
   const fetcher = useFetcher<typeof action>();
-  const [form, fields] = useForm({
-    id: 'album-form',
-    lastResult: fetcher.data,
-    defaultValue: {
-      id: album.id,
-      published: album.published,
-      name: album.name,
-      description: album.description,
-      start_at: album.start_at,
-    },
-    onValidate({ formData }) {
-      return parseWithZod(formData, { schema });
-    },
-    shouldDirtyConsider: () => true,
-    shouldValidate: 'onBlur',
-  });
+  const error = fetcher.data?.success ? undefined : fetcher.data?.errors;
 
   useEffect(() => {
-    if (form.status === 'success') {
+    if (fetcher.data?.success) {
       toast.success('Sparat');
     }
-  }, [form.status]);
+  }, [fetcher.data?.success]);
 
   return (
     <>
       <div className='container mt-8 flex max-w-prose flex-col gap-4'>
         <h1 className='text-3xl font-extrabold tracking-tight'>{album.name}</h1>
         <fetcher.Form
+          id='album-form'
           method='post'
           className='flex flex-col gap-4'
-          {...getFormProps(form)}
         >
-          <input {...getInputProps(fields.id, { type: 'hidden' })} />
-          <input {...getInputProps(fields.published, { type: 'hidden' })} />
+          <input name='id' type='hidden' defaultValue={album.id} />
+          <input
+            name='published'
+            type='hidden'
+            defaultValue={String(album.published)}
+          />
           <FormField>
-            <LabelConform meta={fields.name}>Titel</LabelConform>
-            <InputConform meta={fields.name} type='text' />
-            <ErrorConform meta={fields.name} />
+            <FormLabel>Titel</FormLabel>
+            <FormInput type='text' name='name' defaultValue={album.name} />
+            {error && <FormError>{error.name}</FormError>}
           </FormField>
 
           <FormField>
-            <LabelConform meta={fields.description}>Beskrivning</LabelConform>
-            <TextareaConform meta={fields.description} />
-            <ErrorConform meta={fields.description} />
+            <FormLabel>Beskrivning</FormLabel>
+            <FormTextarea
+              name='description'
+              defaultValue={album.description ?? ''}
+            />
+            {error && <FormError>{error.description}</FormError>}
           </FormField>
 
           <FormField>
-            <LabelConform meta={fields.start_at}>Datum</LabelConform>
-            <DatePickerConform meta={fields.start_at} />
-            <ErrorConform meta={fields.start_at} />
+            <FormLabel>Datum</FormLabel>
+            <FormDatePicker name='start_at' defaultValue={album.start_at} />
+            {error && <FormError>{error.start_at}</FormError>}
           </FormField>
 
           <div className='flex justify-between items-center'>
-            <StatusButton
-              type='submit'
-              name='intent'
-              value='save'
-              disabled={!form.dirty}
-            >
+            <Button type='submit' name='intent' value='save'>
+              {fetcher.state !== 'idle' && (
+                <Loader2 className='mr-2 h-4 w-4 animate-spin'></Loader2>
+              )}
               Spara
-            </StatusButton>
-            <PublishButton
-              formId={form.id}
-              album={album}
-              dirty={form.dirty}
-            ></PublishButton>
+            </Button>
+            <PublishButton form='album-form' album={album}></PublishButton>
           </div>
         </fetcher.Form>
       </div>
diff --git a/app/routes/_main.admin.$id/row-actions.tsx b/app/routes/_main.admin.$id/row-actions.tsx
new file mode 100644
index 0000000..b0a59b1
--- /dev/null
+++ b/app/routes/_main.admin.$id/row-actions.tsx
@@ -0,0 +1,64 @@
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '~/components/ui/dropdown-menu';
+import { useSubmit } from '@remix-run/react';
+import { Button } from '~/components/ui/button';
+import { Check, LinkIcon, MoreHorizontal, Trash2 } from 'lucide-react';
+
+interface Props {
+  id: number;
+  album_id: number;
+}
+export function RowActions({ id, album_id }: Props) {
+  const submit = useSubmit();
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant='ghost' className='h-8 w-8 p-0'>
+          <span className='sr-only'>Öppna meny</span>
+          <MoreHorizontal className='h-4 w-4' />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align='end'>
+        <DropdownMenuLabel>Actions</DropdownMenuLabel>
+        <DropdownMenuSeparator></DropdownMenuSeparator>
+        <DropdownMenuItem
+          onSelect={() =>
+            submit({ intent: 'thumbnail', id, album_id }, { method: 'POST' })
+          }
+        >
+          <Check className='mr-2 h-4 w-4'></Check>
+          <span>Sätt som omslag</span>
+        </DropdownMenuItem>
+        <DropdownMenuItem
+          onSelect={() => {
+            navigator.clipboard.writeText(
+              new URL(
+                `/album/${album_id}/${id}`,
+                window.location.origin
+              ).toString()
+            );
+          }}
+        >
+          <LinkIcon className='mr-2 h-4 w-4'></LinkIcon>
+          <span>Kopiera länk</span>
+        </DropdownMenuItem>
+        <DropdownMenuItem
+          className='text-destructive'
+          onSelect={() => {
+            submit({ intent: 'delete', id }, { method: 'POST' });
+          }}
+        >
+          <Trash2 className='mr-2 h-4 w-4'></Trash2>
+          <span>Ta bort</span>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
diff --git a/app/routes/_main.admin._index/columns.tsx b/app/routes/_main.admin._index/columns.tsx
new file mode 100644
index 0000000..2fc8d41
--- /dev/null
+++ b/app/routes/_main.admin._index/columns.tsx
@@ -0,0 +1,81 @@
+import { Badge } from '~/components/ui/badge';
+import type { Album } from '~/lib/schema.server';
+import type { ColumnDef } from '@tanstack/react-table';
+import { createColumnHelper } from '@tanstack/react-table';
+import { format } from 'date-fns';
+import { Link } from '@remix-run/react';
+import { SortButton } from '~/components/data-table';
+import { RowActions } from './row-actions';
+import { Checkbox } from '~/components/ui/checkbox';
+
+const cb = createColumnHelper<Album>();
+
+export const columns = [
+  cb.display({
+    id: 'select',
+    header: ({ table }) => (
+      <Checkbox
+        checked={
+          table.getIsAllPageRowsSelected() ||
+          (table.getIsSomePageRowsSelected() && 'indeterminate')
+        }
+        onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
+        aria-label='Select all'
+        className='translate-y-[2px]'
+      ></Checkbox>
+    ),
+    cell: ({ row }) => (
+      <Checkbox
+        checked={row.getIsSelected()}
+        onCheckedChange={(value) => row.toggleSelected(!!value)}
+        aria-label='Select row'
+        className='translate-y-[2px]'
+      />
+    ),
+    enableSorting: false,
+    enableHiding: false,
+  }),
+
+  cb.accessor('name', {
+    header: 'Namn',
+    cell: (info) => (
+      <Link
+        className='font-medium underline underline-offset-4'
+        to={`/admin/${info.row.original.id}`}
+      >
+        {info.getValue()}
+      </Link>
+    ),
+  }),
+  cb.accessor('description', {
+    header: 'Beskrivning',
+  }),
+  cb.accessor('published', {
+    header: ({ column }) => <SortButton column={column}>Status</SortButton>,
+    cell: (info) =>
+      info.getValue() ? (
+        <Badge variant='secondary'>Published</Badge>
+      ) : (
+        <Badge variant='outline'>Draft</Badge>
+      ),
+  }),
+  cb.accessor('start_at', {
+    header: ({ column }) => <SortButton column={column}>Datum</SortButton>,
+    cell: (info) => (
+      <span className='text-nowrap'>
+        {format(info.getValue(), 'yyyy-MM-dd')}
+      </span>
+    ),
+  }),
+  cb.display({
+    id: 'actions',
+    cell: (info) => (
+      <RowActions
+        id={info.row.original.id}
+        published={info.row.original.published}
+      ></RowActions>
+    ),
+    enableSorting: false,
+    enableHiding: false,
+  }),
+] satisfies ColumnDef<Album, any>[];
diff --git a/app/routes/_main.admin._index.tsx b/app/routes/_main.admin._index/route.tsx
similarity index 52%
rename from app/routes/_main.admin._index.tsx
rename to app/routes/_main.admin._index/route.tsx
index 5c937a3..b91e76d 100644
--- a/app/routes/_main.admin._index.tsx
+++ b/app/routes/_main.admin._index/route.tsx
@@ -1,52 +1,55 @@
 import { Link, useLoaderData } from '@remix-run/react';
 import { getAllAlbums } from '~/lib/data.server';
 import { ensureRole } from '~/lib/auth.server';
-import type { LoaderFunctionArgs } from '@remix-run/node';
+import type { ActionFunctionArgs, LoaderFunctionArgs } from '@remix-run/node';
 import { Input } from '~/components/ui/input';
 import { useState } from 'react';
 import { Button } from '~/components/ui/button';
-import { DataTable, SortButton } from '~/components/data-table';
-import { Badge } from '~/components/ui/badge';
-import type { Album } from '~/lib/schema.server';
-import type { ColumnDef } from '@tanstack/react-table';
-import { createColumnHelper } from '@tanstack/react-table';
-import { format } from 'date-fns';
+import { DataTable } from '~/components/data-table';
+import { columns } from './columns';
+import { deleteAlbum, setPubishedStatus } from '~/lib/actions.server';
+import { getParams } from 'remix-params-helper';
+import { z } from 'zod';
 
-const cb = createColumnHelper<Album>();
+export async function action({ request }: ActionFunctionArgs) {
+  const formData = await request.formData();
+  switch (formData.get('intent')) {
+    case 'publish': {
+      await ensureRole(['publish:album'])(request);
+      const result = getParams(
+        formData,
+        z.object({
+          id: z.number(),
+          published: z.boolean(),
+        })
+      );
+      if (!result.success) {
+        return result;
+      }
 
-export const columns = [
-  cb.accessor('name', {
-    header: 'Namn',
-    cell: (info) => (
-      <Link
-        className='font-medium underline underline-offset-4'
-        to={`/admin/${info.row.original.id}`}
-      >
-        {info.getValue()}
-      </Link>
-    ),
-  }),
-  cb.accessor('description', {
-    header: 'Beskrivning',
-  }),
-  cb.accessor('published', {
-    header: ({ column }) => <SortButton column={column}>Status</SortButton>,
-    cell: (info) =>
-      info.getValue() ? (
-        <Badge variant='secondary'>Published</Badge>
-      ) : (
-        <Badge variant='outline'>Draft</Badge>
-      ),
-  }),
-  cb.accessor('start_at', {
-    header: ({ column }) => <SortButton column={column}>Datum</SortButton>,
-    cell: (info) => (
-      <span className='text-nowrap'>
-        {format(info.getValue(), 'yyyy-MM-dd')}
-      </span>
-    ),
-  }),
-] satisfies ColumnDef<Album, any>[];
+      await setPubishedStatus(result.data.id, !result.data.published);
+
+      return { success: true } as const;
+    }
+    case 'delete': {
+      await ensureRole(['delete:album'])(request);
+      const result = getParams(
+        formData,
+        z.object({
+          id: z.number(),
+        })
+      );
+      if (!result.success) {
+        return result;
+      }
+
+      await deleteAlbum(result.data.id);
+      return { success: true } as const;
+    }
+    default:
+      throw new Error(`Invalid intent: ${formData.get('intent')}`);
+  }
+}
 
 export async function loader({ request }: LoaderFunctionArgs) {
   await ensureRole(['read:album'])(request);
diff --git a/app/routes/_main.admin._index/row-actions.tsx b/app/routes/_main.admin._index/row-actions.tsx
new file mode 100644
index 0000000..341bc8d
--- /dev/null
+++ b/app/routes/_main.admin._index/row-actions.tsx
@@ -0,0 +1,61 @@
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from '~/components/ui/dropdown-menu';
+import { useSubmit } from '@remix-run/react';
+import { Button } from '~/components/ui/button';
+import { Check, LinkIcon, MoreHorizontal, Trash2 } from 'lucide-react';
+
+interface Props {
+  id: number;
+  published: boolean;
+}
+export function RowActions({ id, published }: Props) {
+  const submit = useSubmit();
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant='ghost' className='h-8 w-8 p-0'>
+          <span className='sr-only'>Öppna meny</span>
+          <MoreHorizontal className='h-4 w-4' />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align='end'>
+        <DropdownMenuLabel>Actions</DropdownMenuLabel>
+        <DropdownMenuSeparator></DropdownMenuSeparator>
+        <DropdownMenuItem
+          onSelect={() =>
+            submit({ intent: 'thumbnail', id }, { method: 'POST' })
+          }
+        >
+          <Check className='mr-2 h-4 w-4'></Check>
+          <span>{published ? 'Avpublicera' : 'Publicera'}</span>
+        </DropdownMenuItem>
+        <DropdownMenuItem
+          onSelect={() => {
+            navigator.clipboard.writeText(
+              new URL(`/album/${id}`, window.location.origin).toString()
+            );
+          }}
+        >
+          <LinkIcon className='mr-2 h-4 w-4'></LinkIcon>
+          <span>Kopiera länk</span>
+        </DropdownMenuItem>
+        <DropdownMenuItem
+          className='text-destructive'
+          onSelect={() => {
+            submit({ intent: 'delete', id }, { method: 'POST' });
+          }}
+        >
+          <Trash2 className='mr-2 h-4 w-4'></Trash2>
+          <span>Ta bort</span>
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
diff --git a/app/routes/api.image.$id.tsx b/app/routes/api.image.$id.tsx
index 06a96fb..dd2040d 100644
--- a/app/routes/api.image.$id.tsx
+++ b/app/routes/api.image.$id.tsx
@@ -7,9 +7,20 @@ import { getPreviewStream } from '~/lib/storage/preview';
 import { getImageStream } from '~/lib/storage/image';
 import type { ImageStream } from '~/lib/storage/types';
 import { extension } from 'mime-types';
+import { z } from 'zod';
+import { getParams, getParamsOrFail } from 'remix-params-helper';
 
 const ensure = true;
 
+const pathSchema = z.object({
+  id: z.number(),
+});
+
+const querySchema = z.object({
+  thumbnail: z.string().optional(),
+  preview: z.string().optional(),
+});
+
 export const loader = async ({ params, request }: LoaderFunctionArgs) => {
   const { passed } = await checkRole(['read:album'])(request);
 
@@ -24,14 +35,17 @@ export const loader = async ({ params, request }: LoaderFunctionArgs) => {
   const preview = query.get('preview') != null;
 
   assertResponse(!(thumbnail && preview), 'Invalid query parameters');
-
   let imageStream: ImageStream;
-  if (thumbnail) {
-    imageStream = await getThumbnailStream(data.image, ensure);
-  } else if (preview) {
-    imageStream = await getPreviewStream(data.image, ensure);
-  } else {
-    imageStream = await getImageStream(data.image, ensure);
+  try {
+    if (thumbnail) {
+      imageStream = await getThumbnailStream(data.image, ensure);
+    } else if (preview) {
+      imageStream = await getPreviewStream(data.image, ensure);
+    } else {
+      imageStream = await getImageStream(data.image, ensure);
+    }
+  } catch (error) {
+    return new Response('Not found', { status: 404 });
   }
 
   const ext = data.image.mimetype ? extension(data.image.mimetype) || '' : '';
diff --git a/package-lock.json b/package-lock.json
index 6fb54d6..97422fa 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -25,12 +25,12 @@
         "@remix-run/react": "^2.9.2",
         "@remix-run/serve": "^2.9.2",
         "@tanstack/match-sorter-utils": "^8.15.1",
-        "@tanstack/react-table": "^8.17.0",
+        "@tanstack/react-table": "^8.17.3",
         "@uidotdev/usehooks": "^2.4.1",
         "class-variance-authority": "^0.7.0",
         "clsx": "^2.1.1",
         "date-fns": "^3.6.0",
-        "drizzle-kit": "^0.21.1",
+        "drizzle-kit": "^0.21.2",
         "drizzle-orm": "^0.30.10",
         "embla-carousel-react": "^8.0.4",
         "exif-reader": "^2.0.1",
@@ -43,7 +43,8 @@
         "react": "^18.3.1",
         "react-day-picker": "^8.10.1",
         "react-dom": "^18.3.1",
-        "sharp": "^0.33.3",
+        "remix-params-helper": "^0.5.1",
+        "sharp": "^0.33.4",
         "sonner": "^1.4.41",
         "tailwind-merge": "^2.3.0",
         "tailwindcss-animate": "^1.0.7",
@@ -51,7 +52,7 @@
         "zod": "^3.23.8"
       },
       "devDependencies": {
-        "@dotenvx/dotenvx": "^0.38.0",
+        "@dotenvx/dotenvx": "^0.39.0",
         "@eslint/js": "^9.2.0",
         "@remix-run/dev": "^2.9.2",
         "@remix-run/eslint-config": "^2.9.2",
@@ -899,9 +900,9 @@
       }
     },
     "node_modules/@dotenvx/dotenvx": {
-      "version": "0.38.0",
-      "resolved": "https://registry.npmjs.org/@dotenvx/dotenvx/-/dotenvx-0.38.0.tgz",
-      "integrity": "sha512-Eeyn/lcfedhnSK66yGe4R7QL1rwYO6m+pU1Xl6RlZIqRsqOc0mEmzL6F5PcWuxNaYePQLC5fq3vcKZQYTEJn2Q==",
+      "version": "0.39.0",
+      "resolved": "https://registry.npmjs.org/@dotenvx/dotenvx/-/dotenvx-0.39.0.tgz",
+      "integrity": "sha512-OC8m1P10A9hG7yzuQZxQjIGvJlm2nHIZnvHse95DkwhxBgCC8NgZkb/3GnoIIw9Z6VZ2+LF0jLsnMrlcVIFk1w==",
       "dev": true,
       "dependencies": {
         "@inquirer/confirm": "^2.0.17",
@@ -2029,9 +2030,9 @@
       "dev": true
     },
     "node_modules/@img/sharp-darwin-arm64": {
-      "version": "0.33.3",
-      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.33.3.tgz",
-      "integrity": "sha512-FaNiGX1MrOuJ3hxuNzWgsT/mg5OHG/Izh59WW2mk1UwYHUwtfbhk5QNKYZgxf0pLOhx9ctGiGa2OykD71vOnSw==",
+      "version": "0.33.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.33.4.tgz",
+      "integrity": "sha512-p0suNqXufJs9t3RqLBO6vvrgr5OhgbWp76s5gTRvdmxmuv9E1rcaqGUsl3l4mKVmXPkTkTErXediAui4x+8PSA==",
       "cpu": [
         "arm64"
       ],
@@ -2054,9 +2055,9 @@
       }
     },
     "node_modules/@img/sharp-darwin-x64": {
-      "version": "0.33.3",
-      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-x64/-/sharp-darwin-x64-0.33.3.tgz",
-      "integrity": "sha512-2QeSl7QDK9ru//YBT4sQkoq7L0EAJZA3rtV+v9p8xTKl4U1bUqTIaCnoC7Ctx2kCjQgwFXDasOtPTCT8eCTXvw==",
+      "version": "0.33.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-darwin-x64/-/sharp-darwin-x64-0.33.4.tgz",
+      "integrity": "sha512-0l7yRObwtTi82Z6ebVI2PnHT8EB2NxBgpK2MiKJZJ7cz32R4lxd001ecMhzzsZig3Yv9oclvqqdV93jo9hy+Dw==",
       "cpu": [
         "x64"
       ],
@@ -2247,9 +2248,9 @@
       }
     },
     "node_modules/@img/sharp-linux-arm": {
-      "version": "0.33.3",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm/-/sharp-linux-arm-0.33.3.tgz",
-      "integrity": "sha512-Q7Ee3fFSC9P7vUSqVEF0zccJsZ8GiiCJYGWDdhEjdlOeS9/jdkyJ6sUSPj+bL8VuOYFSbofrW0t/86ceVhx32w==",
+      "version": "0.33.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm/-/sharp-linux-arm-0.33.4.tgz",
+      "integrity": "sha512-RUgBD1c0+gCYZGCCe6mMdTiOFS0Zc/XrN0fYd6hISIKcDUbAW5NtSQW9g/powkrXYm6Vzwd6y+fqmExDuCdHNQ==",
       "cpu": [
         "arm"
       ],
@@ -2272,9 +2273,9 @@
       }
     },
     "node_modules/@img/sharp-linux-arm64": {
-      "version": "0.33.3",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm64/-/sharp-linux-arm64-0.33.3.tgz",
-      "integrity": "sha512-Zf+sF1jHZJKA6Gor9hoYG2ljr4wo9cY4twaxgFDvlG0Xz9V7sinsPp8pFd1XtlhTzYo0IhDbl3rK7P6MzHpnYA==",
+      "version": "0.33.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-arm64/-/sharp-linux-arm64-0.33.4.tgz",
+      "integrity": "sha512-2800clwVg1ZQtxwSoTlHvtm9ObgAax7V6MTAB/hDT945Tfyy3hVkmiHpeLPCKYqYR1Gcmv1uDZ3a4OFwkdBL7Q==",
       "cpu": [
         "arm64"
       ],
@@ -2297,9 +2298,9 @@
       }
     },
     "node_modules/@img/sharp-linux-s390x": {
-      "version": "0.33.3",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linux-s390x/-/sharp-linux-s390x-0.33.3.tgz",
-      "integrity": "sha512-vFk441DKRFepjhTEH20oBlFrHcLjPfI8B0pMIxGm3+yilKyYeHEVvrZhYFdqIseSclIqbQ3SnZMwEMWonY5XFA==",
+      "version": "0.33.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-s390x/-/sharp-linux-s390x-0.33.4.tgz",
+      "integrity": "sha512-h3RAL3siQoyzSoH36tUeS0PDmb5wINKGYzcLB5C6DIiAn2F3udeFAum+gj8IbA/82+8RGCTn7XW8WTFnqag4tQ==",
       "cpu": [
         "s390x"
       ],
@@ -2308,7 +2309,7 @@
         "linux"
       ],
       "engines": {
-        "glibc": ">=2.28",
+        "glibc": ">=2.31",
         "node": "^18.17.0 || ^20.3.0 || >=21.0.0",
         "npm": ">=9.6.5",
         "pnpm": ">=7.1.0",
@@ -2322,9 +2323,9 @@
       }
     },
     "node_modules/@img/sharp-linux-x64": {
-      "version": "0.33.3",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linux-x64/-/sharp-linux-x64-0.33.3.tgz",
-      "integrity": "sha512-Q4I++herIJxJi+qmbySd072oDPRkCg/SClLEIDh5IL9h1zjhqjv82H0Seupd+q2m0yOfD+/fJnjSoDFtKiHu2g==",
+      "version": "0.33.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linux-x64/-/sharp-linux-x64-0.33.4.tgz",
+      "integrity": "sha512-GoR++s0XW9DGVi8SUGQ/U4AeIzLdNjHka6jidVwapQ/JebGVQIpi52OdyxCNVRE++n1FCLzjDovJNozif7w/Aw==",
       "cpu": [
         "x64"
       ],
@@ -2347,9 +2348,9 @@
       }
     },
     "node_modules/@img/sharp-linuxmusl-arm64": {
-      "version": "0.33.3",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-arm64/-/sharp-linuxmusl-arm64-0.33.3.tgz",
-      "integrity": "sha512-qnDccehRDXadhM9PM5hLvcPRYqyFCBN31kq+ErBSZtZlsAc1U4Z85xf/RXv1qolkdu+ibw64fUDaRdktxTNP9A==",
+      "version": "0.33.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-arm64/-/sharp-linuxmusl-arm64-0.33.4.tgz",
+      "integrity": "sha512-nhr1yC3BlVrKDTl6cO12gTpXMl4ITBUZieehFvMntlCXFzH2bvKG76tBL2Y/OqhupZt81pR7R+Q5YhJxW0rGgQ==",
       "cpu": [
         "arm64"
       ],
@@ -2372,9 +2373,9 @@
       }
     },
     "node_modules/@img/sharp-linuxmusl-x64": {
-      "version": "0.33.3",
-      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-x64/-/sharp-linuxmusl-x64-0.33.3.tgz",
-      "integrity": "sha512-Jhchim8kHWIU/GZ+9poHMWRcefeaxFIs9EBqf9KtcC14Ojk6qua7ghKiPs0sbeLbLj/2IGBtDcxHyjCdYWkk2w==",
+      "version": "0.33.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-linuxmusl-x64/-/sharp-linuxmusl-x64-0.33.4.tgz",
+      "integrity": "sha512-uCPTku0zwqDmZEOi4ILyGdmW76tH7dm8kKlOIV1XC5cLyJ71ENAAqarOHQh0RLfpIpbV5KOpXzdU6XkJtS0daw==",
       "cpu": [
         "x64"
       ],
@@ -2397,15 +2398,15 @@
       }
     },
     "node_modules/@img/sharp-wasm32": {
-      "version": "0.33.3",
-      "resolved": "https://registry.npmjs.org/@img/sharp-wasm32/-/sharp-wasm32-0.33.3.tgz",
-      "integrity": "sha512-68zivsdJ0koE96stdUfM+gmyaK/NcoSZK5dV5CAjES0FUXS9lchYt8LAB5rTbM7nlWtxaU/2GON0HVN6/ZYJAQ==",
+      "version": "0.33.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-wasm32/-/sharp-wasm32-0.33.4.tgz",
+      "integrity": "sha512-Bmmauh4sXUsUqkleQahpdNXKvo+wa1V9KhT2pDA4VJGKwnKMJXiSTGphn0gnJrlooda0QxCtXc6RX1XAU6hMnQ==",
       "cpu": [
         "wasm32"
       ],
       "optional": true,
       "dependencies": {
-        "@emnapi/runtime": "^1.1.0"
+        "@emnapi/runtime": "^1.1.1"
       },
       "engines": {
         "node": "^18.17.0 || ^20.3.0 || >=21.0.0",
@@ -2418,9 +2419,9 @@
       }
     },
     "node_modules/@img/sharp-win32-ia32": {
-      "version": "0.33.3",
-      "resolved": "https://registry.npmjs.org/@img/sharp-win32-ia32/-/sharp-win32-ia32-0.33.3.tgz",
-      "integrity": "sha512-CyimAduT2whQD8ER4Ux7exKrtfoaUiVr7HG0zZvO0XTFn2idUWljjxv58GxNTkFb8/J9Ub9AqITGkJD6ZginxQ==",
+      "version": "0.33.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-ia32/-/sharp-win32-ia32-0.33.4.tgz",
+      "integrity": "sha512-99SJ91XzUhYHbx7uhK3+9Lf7+LjwMGQZMDlO/E/YVJ7Nc3lyDFZPGhjwiYdctoH2BOzW9+TnfqcaMKt0jHLdqw==",
       "cpu": [
         "ia32"
       ],
@@ -2439,9 +2440,9 @@
       }
     },
     "node_modules/@img/sharp-win32-x64": {
-      "version": "0.33.3",
-      "resolved": "https://registry.npmjs.org/@img/sharp-win32-x64/-/sharp-win32-x64-0.33.3.tgz",
-      "integrity": "sha512-viT4fUIDKnli3IfOephGnolMzhz5VaTvDRkYqtZxOMIoMQ4MrAziO7pT1nVnOt2FAm7qW5aa+CCc13aEY6Le0g==",
+      "version": "0.33.4",
+      "resolved": "https://registry.npmjs.org/@img/sharp-win32-x64/-/sharp-win32-x64-0.33.4.tgz",
+      "integrity": "sha512-3QLocdTRVIrFNye5YocZl+KKpYKP+fksi1QhmOArgx7GyhIbQp/WrJRu176jm8IxromS7RIkzMiMINVdBtC8Aw==",
       "cpu": [
         "x64"
       ],
@@ -4983,11 +4984,11 @@
       }
     },
     "node_modules/@tanstack/react-table": {
-      "version": "8.17.0",
-      "resolved": "https://registry.npmjs.org/@tanstack/react-table/-/react-table-8.17.0.tgz",
-      "integrity": "sha512-LSJxTDzlKGs8EN7/UHB1l3yLR9HUIxoHFkTbTjHaUUGL4kgYZFYhsQsdDJSIykG86qpIA/6gSWmtwNfy5Iprhw==",
+      "version": "8.17.3",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-table/-/react-table-8.17.3.tgz",
+      "integrity": "sha512-5gwg5SvPD3lNAXPuJJz1fOCEZYk9/GeBFH3w/hCgnfyszOIzwkwgp5I7Q4MJtn0WECp84b5STQUDdmvGi8m3nA==",
       "dependencies": {
-        "@tanstack/table-core": "8.16.0"
+        "@tanstack/table-core": "8.17.3"
       },
       "engines": {
         "node": ">=12"
@@ -5002,9 +5003,9 @@
       }
     },
     "node_modules/@tanstack/table-core": {
-      "version": "8.16.0",
-      "resolved": "https://registry.npmjs.org/@tanstack/table-core/-/table-core-8.16.0.tgz",
-      "integrity": "sha512-dCG8vQGk4js5v88/k83tTedWOwjGnIyONrKpHpfmSJB8jwFHl8GSu1sBBxbtACVAPtAQgwNxl0rw1d3RqRM1Tg==",
+      "version": "8.17.3",
+      "resolved": "https://registry.npmjs.org/@tanstack/table-core/-/table-core-8.17.3.tgz",
+      "integrity": "sha512-mPBodDGVL+fl6d90wUREepHa/7lhsghg2A3vFpakEhrhtbIlgNAZiMr7ccTgak5qbHqF14Fwy+W1yFWQt+WmYQ==",
       "engines": {
         "node": ">=12"
       },
@@ -7914,9 +7915,9 @@
       }
     },
     "node_modules/drizzle-kit": {
-      "version": "0.21.1",
-      "resolved": "https://registry.npmjs.org/drizzle-kit/-/drizzle-kit-0.21.1.tgz",
-      "integrity": "sha512-Sp7OnCdROiE2ebMuHsAfrnRoHVGYCvErQxUh7/0l6R1caHssZu9oZu/hW9rLU19xnTK4/y3iSe3sL0Cc530wCg==",
+      "version": "0.21.2",
+      "resolved": "https://registry.npmjs.org/drizzle-kit/-/drizzle-kit-0.21.2.tgz",
+      "integrity": "sha512-U87IhZyCt/9d0ZT/Na3KFJVY31tSxtTx/n9UMcWFpW/5c2Ede39xiCG5efNV/0iimsv97UIRtDI0ldLBW5lbcg==",
       "dependencies": {
         "@esbuild-kit/esm-loader": "^2.5.5",
         "commander": "^9.4.1",
@@ -15189,6 +15190,14 @@
         "uuid": "dist/bin/uuid"
       }
     },
+    "node_modules/remix-params-helper": {
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/remix-params-helper/-/remix-params-helper-0.5.1.tgz",
+      "integrity": "sha512-aYn//NPpVD5igSbn04QLTfHkxjoDCW2SbArfaAxczW2MNvwV+ow0nDDpBsVRDQJE3UajeINVMXIgdO8JxL8RdQ==",
+      "peerDependencies": {
+        "zod": "^3.11.6"
+      }
+    },
     "node_modules/remove-accents": {
       "version": "0.5.0",
       "resolved": "https://registry.npmjs.org/remove-accents/-/remove-accents-0.5.0.tgz",
@@ -15617,9 +15626,9 @@
       "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw=="
     },
     "node_modules/sharp": {
-      "version": "0.33.3",
-      "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.33.3.tgz",
-      "integrity": "sha512-vHUeXJU1UvlO/BNwTpT0x/r53WkLUVxrmb5JTgW92fdFCFk0ispLMAeu/jPO2vjkXM1fYUi3K7/qcLF47pwM1A==",
+      "version": "0.33.4",
+      "resolved": "https://registry.npmjs.org/sharp/-/sharp-0.33.4.tgz",
+      "integrity": "sha512-7i/dt5kGl7qR4gwPRD2biwD2/SvBn3O04J77XKFgL2OnZtQw+AG9wnuS/csmu80nPRHLYE9E41fyEiG8nhH6/Q==",
       "hasInstallScript": true,
       "dependencies": {
         "color": "^4.2.3",
@@ -15634,8 +15643,8 @@
         "url": "https://opencollective.com/libvips"
       },
       "optionalDependencies": {
-        "@img/sharp-darwin-arm64": "0.33.3",
-        "@img/sharp-darwin-x64": "0.33.3",
+        "@img/sharp-darwin-arm64": "0.33.4",
+        "@img/sharp-darwin-x64": "0.33.4",
         "@img/sharp-libvips-darwin-arm64": "1.0.2",
         "@img/sharp-libvips-darwin-x64": "1.0.2",
         "@img/sharp-libvips-linux-arm": "1.0.2",
@@ -15644,15 +15653,15 @@
         "@img/sharp-libvips-linux-x64": "1.0.2",
         "@img/sharp-libvips-linuxmusl-arm64": "1.0.2",
         "@img/sharp-libvips-linuxmusl-x64": "1.0.2",
-        "@img/sharp-linux-arm": "0.33.3",
-        "@img/sharp-linux-arm64": "0.33.3",
-        "@img/sharp-linux-s390x": "0.33.3",
-        "@img/sharp-linux-x64": "0.33.3",
-        "@img/sharp-linuxmusl-arm64": "0.33.3",
-        "@img/sharp-linuxmusl-x64": "0.33.3",
-        "@img/sharp-wasm32": "0.33.3",
-        "@img/sharp-win32-ia32": "0.33.3",
-        "@img/sharp-win32-x64": "0.33.3"
+        "@img/sharp-linux-arm": "0.33.4",
+        "@img/sharp-linux-arm64": "0.33.4",
+        "@img/sharp-linux-s390x": "0.33.4",
+        "@img/sharp-linux-x64": "0.33.4",
+        "@img/sharp-linuxmusl-arm64": "0.33.4",
+        "@img/sharp-linuxmusl-x64": "0.33.4",
+        "@img/sharp-wasm32": "0.33.4",
+        "@img/sharp-win32-ia32": "0.33.4",
+        "@img/sharp-win32-x64": "0.33.4"
       }
     },
     "node_modules/sharp/node_modules/color": {
diff --git a/package.json b/package.json
index f951289..9b78d11 100644
--- a/package.json
+++ b/package.json
@@ -32,12 +32,12 @@
     "@remix-run/react": "^2.9.2",
     "@remix-run/serve": "^2.9.2",
     "@tanstack/match-sorter-utils": "^8.15.1",
-    "@tanstack/react-table": "^8.17.0",
+    "@tanstack/react-table": "^8.17.3",
     "@uidotdev/usehooks": "^2.4.1",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
     "date-fns": "^3.6.0",
-    "drizzle-kit": "^0.21.1",
+    "drizzle-kit": "^0.21.2",
     "drizzle-orm": "^0.30.10",
     "embla-carousel-react": "^8.0.4",
     "exif-reader": "^2.0.1",
@@ -50,7 +50,8 @@
     "react": "^18.3.1",
     "react-day-picker": "^8.10.1",
     "react-dom": "^18.3.1",
-    "sharp": "^0.33.3",
+    "remix-params-helper": "^0.5.1",
+    "sharp": "^0.33.4",
     "sonner": "^1.4.41",
     "tailwind-merge": "^2.3.0",
     "tailwindcss-animate": "^1.0.7",
@@ -58,8 +59,8 @@
     "zod": "^3.23.8"
   },
   "devDependencies": {
+    "@dotenvx/dotenvx": "^0.39.0",
     "@eslint/js": "^9.2.0",
-    "@dotenvx/dotenvx": "^0.38.0",
     "@remix-run/dev": "^2.9.2",
     "@remix-run/eslint-config": "^2.9.2",
     "@types/mime-types": "^2.1.4",
@@ -88,4 +89,4 @@
   "engines": {
     "node": ">=18.0.0"
   }
-}
\ No newline at end of file
+}
diff --git a/vite.config.ts b/vite.config.ts
index cc9a0ae..6962568 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -17,6 +17,9 @@ export default defineConfig({
     remix({
       future: {
         unstable_singleFetch: true,
+        v3_relativeSplatPath: true,
+        v3_fetcherPersist: true,
+        v3_throwAbortReason: true,
       },
     }),
     tsconfigPaths(),