# Admin Image Redesign Implementation Plan

> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.

**Goal:** Separate admin image upload, resize, and attach-to-product into three explicit steps.

**Architecture:** Upload → gallery only (raw file). Resize is a manual trigger per image. Attach to product/slider allowed only after resize. Uses `isResized` boolean on `GalleryImage` model.

**Tech Stack:** Fastify, Prisma (SQLite), React, MUI, @tanstack/react-query, sharp

---

### Task 1: Add `isResized` to GalleryImage (Prisma schema + migration)

**Files:**
- Modify: `server/prisma/schema.prisma`
- Create: `server/prisma/migrations/xxx_add_is_resized/migration.sql` (via `prisma migrate dev`)

- [ ] **Step 1: Add field to schema**

Edit `server/prisma/schema.prisma`, add `isResized` to GalleryImage:

```prisma
model GalleryImage {
  id        String                @id @default(cuid())
  url       String                @unique
  isResized Boolean               @default(false)
  createdAt DateTime              @default(now())
  catalogSliderSlides CatalogSliderSlide[]
}
```

- [ ] **Step 2: Generate migration**

Run:
```bash
cd server && npx prisma migrate dev --name add_is_resized
```
Expected: new migration file created, DB updated.

- [ ] **Step 3: Write seed/migration script to mark existing images as resized**

Create `server/prisma/seed-is-resized.js`:

```js
import { prisma } from '../src/lib/prisma.js'

async function main() {
  const { count } = await prisma.galleryImage.updateMany({
    where: { isResized: false },
    data: { isResized: true },
  })
  console.log(`Marked ${count} existing images as resized`)
}

main()
  .catch(console.error)
  .finally(() => prisma.$disconnect())
```

Run once manually after deploy:
```bash
cd server && node prisma/seed-is-resized.js
```

- [ ] **Step 4: Verify**

Run: `cd server && npx prisma studio`
Check that GalleryImage table has `isResized` column.

- [ ] **Step 5: Commit**

```bash
git add server/prisma/
git commit -m "feat(db): add isResized to GalleryImage"
```

---

### Task 2: New gallery upload endpoint (server)

**Files:**
- Modify: `server/src/routes/api/admin-gallery.js`
- Modify: `server/src/routes/api.js` (if needed to register routes)

- [ ] **Step 1: Add `POST /api/admin/gallery/upload` route**

Edit `server/src/routes/api/admin-gallery.js`. Add a new POST route before the DELETE route:

```js
import fs from 'node:fs/promises'
import path from 'node:path'
import { prisma } from '../../lib/prisma.js'
import { persistMultipartImages } from '../../lib/upload-images.js'
import {
  formatFileTooLargeMessage,
  getProductImageMaxFileBytes,
  isMultipartFileTooLargeError,
} from '../../lib/upload-limits.js'

export async function registerAdminGalleryRoutes(fastify) {
  fastify.get(
    '/api/admin/gallery',
    { preHandler: [fastify.verifyAdmin] },
    async () => {
      const items = await prisma.galleryImage.findMany({
        orderBy: { createdAt: 'desc' },
      })
      return { items }
    },
  )

  fastify.post(
    '/api/admin/gallery/upload',
    { preHandler: [fastify.verifyAdmin] },
    async (request, reply) => {
      try {
        const urls = await persistMultipartImages(request, {
          maxFiles: 10,
          maxFileBytes: getProductImageMaxFileBytes(),
          subdir: '',
          eager: false,
        })
        for (const url of urls) {
          await prisma.galleryImage.create({
            data: { url, isResized: false },
          })
        }
        return { urls }
      } catch (error) {
        let message = error instanceof Error ? error.message : 'Не удалось загрузить файлы'
        let statusCode =
          error && typeof error === 'object' && 'statusCode' in error && Number.isInteger(error.statusCode)
            ? Number(error.statusCode)
            : 400
        if (isMultipartFileTooLargeError(error)) {
          message = formatFileTooLargeMessage(getProductImageMaxFileBytes())
          statusCode = 413
        }
        return reply.code(statusCode).send({ error: message })
      }
    },
  )

  fastify.delete(
    // ... existing code unchanged
  )
}
```

- [ ] **Step 2: Verify no new route registration needed**

Check `server/src/routes/api.js` — `registerAdminGalleryRoutes` should already be imported and registered.

Run: `rg "registerAdminGalleryRoutes" server/src/routes/api.js`
Expected: import and `fastify.register(registerAdminGalleryRoutes)`.

- [ ] **Step 3: Commit**

```bash
git add server/src/routes/api/admin-gallery.js
git commit -m "feat(server): add POST /api/admin/gallery/upload endpoint"
```

---

### Task 3: New gallery resize endpoint (server)

**Files:**
- Modify: `server/src/routes/api/admin-gallery.js`

- [ ] **Step 1: Add `POST /api/admin/gallery/:id/resize` route**

Edit `server/src/routes/api/admin-gallery.js`. Add after the upload route:

```js
  fastify.post(
    '/api/admin/gallery/:id/resize',
    { preHandler: [fastify.verifyAdmin] },
    async (request, reply) => {
      const { id } = request.params
      const row = await prisma.galleryImage.findUnique({ where: { id } })
      if (!row) {
        return reply.code(404).send({ error: 'Изображение не найдено' })
      }
      if (row.isResized) {
        return reply.code(409).send({ error: 'Изображение уже обработано' })
      }

      // Extract UUID from url like "/uploads/<uuid>.png"
      const urlParts = row.url.replace(/^\//, '').split('/')
      const fileName = urlParts[urlParts.length - 1]
      const uuid = fileName.replace(/\.\w+$/, '')

      try {
        const { generateAllSizes, convertOriginalToWebp } = await import('../../lib/image-resize.js')

        const fullPath = path.join(process.cwd(), urlParts.slice(0, -1).join('/'), fileName)
        await generateAllSizes(uuid, '', fullPath)
        const newUrl = await convertOriginalToWebp(uuid, '')

        await prisma.galleryImage.update({
          where: { id },
          data: { url: newUrl, isResized: true },
        })

        return { url: newUrl }
      } catch (error) {
        return reply.code(500).send({ error: 'Ошибка обработки изображения' })
      }
    },
  )
```

- [ ] **Step 2: Run server tests**

```bash
cd server && npm test
```
Expected: all existing tests pass.

- [ ] **Step 3: Commit**

```bash
git add server/src/routes/api/admin-gallery.js
git commit -m "feat(server): add POST /api/admin/gallery/:id/resize endpoint"
```

---

### Task 4: Remove old combined upload endpoint + validate isResized on product endpoints

**Files:**
- Modify: `server/src/routes/api/admin-products.js`

- [ ] **Step 1: Remove `POST /api/admin/uploads` route**

Delete lines 62-87 from `server/src/routes/api/admin-products.js` (the entire `fastify.post('/api/admin/uploads', ...)` block).

Remove unused imports:
- `formatFileTooLargeMessage`
- `getProductImageMaxFileBytes`
- `isMultipartFileTooLargeError`
- `persistMultipartImages`

Remove unused import `upsertGalleryImagesByUrls` (it was only used in the upload route).

The imports section should become:
```js
import { prisma } from '../../lib/prisma.js'
```

- [ ] **Step 2: Add isResized validation to product create and patch**

In `POST /api/admin/products` and `PATCH /api/admin/products/:id`, before creating/updating images, add:

```js
// Validate all imageUrls belong to resized gallery images
if (Array.isArray(body.imageUrls) && body.imageUrls.length > 0) {
  const urls = body.imageUrls.map((u) => String(u || '').trim()).filter(Boolean)
  if (urls.length > 0) {
    const galleryImages = await prisma.galleryImage.findMany({
      where: { url: { in: urls } },
      select: { url: true, isResized: true },
    })
    const galleryMap = new Map(galleryImages.map((g) => [g.url, g]))
    const notFound = urls.filter((u) => !galleryMap.has(u))
    const notResized = urls.filter((u) => galleryMap.get(u) && !galleryMap.get(u)!.isResized)
    if (notFound.length > 0) {
      return reply.code(400).send({ error: 'Некоторые изображения не найдены в галерее' })
    }
    if (notResized.length > 0) {
      return reply.code(400).send({ error: 'Изображения должны быть обработаны (resize) перед прикреплением к товару' })
    }
  }
}
```

Place this validation in both the create handler (after the `exists` slug check, around line 123) and the patch handler (after `if (body.categoryId !== undefined)` check, around line 229).

For the patch handler, the validation should be inside the `if (body.imageUrls !== undefined)` block or right before `const imagesUpdate`.

Let me be more precise about where in the code:

**Create handler** — add after line 123 (`return` after slug conflict), before line 132 (`const product = await prisma.product.create`):
```js
if (Array.isArray(body.imageUrls) && body.imageUrls.length > 0) {
  const urls = body.imageUrls.map((u) => String(u || '').trim()).filter(Boolean)
  if (urls.length > 0) {
    const galleryImages = await prisma.galleryImage.findMany({
      where: { url: { in: urls } },
      select: { url: true, isResized: true },
    })
    const galleryMap = new Map(galleryImages.map((g) => [g.url, g]))
    const notFound = urls.filter((u) => !galleryMap.has(u))
    const notResized = urls.filter((u) => galleryMap.get(u) && !galleryMap.get(u).isResized)
    if (notFound.length > 0) {
      return reply.code(400).send({ error: 'Некоторые изображения не найдены в галерее' })
    }
    if (notResized.length > 0) {
      return reply.code(400).send({ error: 'Изображения должны быть обработаны (resize) перед прикреплением к товару' })
    }
  }
}
```

**Patch handler** — add before `const imagesUpdate` block (before line 231):
```js
if (body.imageUrls !== undefined && Array.isArray(body.imageUrls)) {
  const urls = body.imageUrls.map((u) => String(u || '').trim()).filter(Boolean)
  if (urls.length > 0) {
    const galleryImages = await prisma.galleryImage.findMany({
      where: { url: { in: urls } },
      select: { url: true, isResized: true },
    })
    const galleryMap = new Map(galleryImages.map((g) => [g.url, g]))
    const notFound = urls.filter((u) => !galleryMap.has(u))
    const notResized = urls.filter((u) => galleryMap.get(u) && !galleryMap.get(u).isResized)
    if (notFound.length > 0) {
      return reply.code(400).send({ error: 'Некоторые изображения не найдены в галерее' })
    }
    if (notResized.length > 0) {
      return reply.code(400).send({ error: 'Изображения должны быть обработаны (resize) перед прикреплением к товару' })
    }
  }
}
```

- [ ] **Step 3: Run server tests**

```bash
cd server && npm test
```
Expected: all existing tests pass.

- [ ] **Step 4: Commit**

```bash
git add server/src/routes/api/admin-products.js
git commit -m "feat(server): remove old /admin/uploads, validate isResized on product endpoints"
```

---

### Task 5: Update existing server tests + add new gallery tests

**Files:**
- Create: `server/src/routes/api/__tests__/admin-gallery.test.js`
- Modify: `server/src/lib/__tests__/upload-images.test.js` (adapt eager tests)

- [ ] **Step 1: Create admin gallery test**

Create `server/src/routes/api/__tests__/admin-gallery.test.js`:

```js
import { describe, it, expect, beforeAll, afterAll } from 'vitest'
import fs from 'node:fs'
import path from 'node:path'

const UPLOADS_DIR = path.join(process.cwd(), 'uploads')

// We'll test the resize endpoint logic directly via the lib functions
// since the router requires a full Fastify instance

import { generateAllSizes, convertOriginalToWebp } from '../../lib/image-resize.js'

describe('Gallery resize endpoint logic', () => {
  const testUuid = 'gallery-test-resize-uuid'
  const testOriginalPath = path.join(UPLOADS_DIR, `${testUuid}.png`)

  beforeAll(async () => {
    const sharp = (await import('sharp')).default
    await sharp({ create: { width: 200, height: 200, channels: 3, background: { r: 255, g: 0, b: 0 } } })
      .png()
      .toFile(testOriginalPath)
  })

  afterAll(async () => {
    await fs.promises.unlink(testOriginalPath).catch(() => {})
    const webpPath = path.join(UPLOADS_DIR, `${testUuid}.webp`)
    await fs.promises.unlink(webpPath).catch(() => {})
    const cacheDir = path.join(UPLOADS_DIR, '.cache')
    for (const width of [320, 640, 1024, 1600]) {
      for (const format of ['avif', 'webp']) {
        await fs.promises.unlink(path.join(cacheDir, `${testUuid}_w${width}.${format}`)).catch(() => {})
      }
    }
  })

  it('generateAllSizes + convertOriginalToWebp works on raw upload', async () => {
    await generateAllSizes(testUuid, '', testOriginalPath)
    const newUrl = await convertOriginalToWebp(testUuid, '')

    expect(newUrl).toBe(`/uploads/${testUuid}.webp`)

    // Verify original PNG is deleted
    const pngExists = await fs.promises.access(testOriginalPath).then(() => true).catch(() => false)
    expect(pngExists).toBe(false)

    // Verify cached files exist
    const cacheDir = path.join(UPLOADS_DIR, '.cache')
    for (const width of [320, 640, 1024, 1600]) {
      for (const format of ['avif', 'webp']) {
        const cachePath = path.join(cacheDir, `${testUuid}_w${width}.${format}`)
        const exists = await fs.promises.access(cachePath).then(() => true).catch(() => false)
        expect(exists).toBe(true)
      }
    }

    // Verify webp original exists
    const webpExists = await fs.promises.access(path.join(UPLOADS_DIR, `${testUuid}.webp`)).then(() => true).catch(() => false)
    expect(webpExists).toBe(true)
  })
})
```

- [ ] **Step 2: Adapt upload-images tests**

The `upload-images.test.js` has tests for `eager: true` mode. Since we no longer use eager mode for admin uploads, migrate the eager test to work under the gallery resize flow instead. The simplest approach: remove the `eager: true` test and keep the `eager: false` test (it tests raw file saving, which is what gallery upload does).

Edit `server/src/lib/__tests__/upload-images.test.js`:
- Remove the first test `returns WebP URLs when eager=true` (lines 19-61)
- Keep the second test `returns original format URLs when eager=false`
- Keep the third test `cleans up original file on eager processing error` but change `eager: true` to `eager: false` in its options — this tests error handling of the function itself, which is still valid.

Actually, re-reading the third test: it tests that when `eager: true` and processing fails, the original file is cleaned up. With `eager: false`, no processing happens so there's nothing to fail on that front. Let me just remove the third test too. The important behavior (raw file saving in `eager: false` mode) is covered by the remaining test.

So we keep only the second test `returns original format URLs when eager=false`.

- [ ] **Step 3: Run server tests**

```bash
cd server && npm test
```
Expected: all tests pass.

- [ ] **Step 4: Commit**

```bash
git add server/src/routes/api/__tests__/admin-gallery.test.js server/src/lib/__tests__/upload-images.test.js
git commit -m "test(server): add gallery resize test, adapt upload tests"
```

---

### Task 6: Client types and API layer

**Files:**
- Modify: `client/src/entities/gallery/model/types.ts`
- Modify: `client/src/entities/gallery/api/gallery-api.ts`
- Modify: `client/src/entities/gallery/index.ts`

- [ ] **Step 1: Add `isResized` to GalleryImageItem type**

Edit `client/src/entities/gallery/model/types.ts`:

```ts
export type GalleryImageItem = {
  id: string
  url: string
  isResized: boolean
  createdAt: string
}
```

- [ ] **Step 2: Add new gallery API functions**

Edit `client/src/entities/gallery/api/gallery-api.ts`:

```ts
import type { GalleryImageItem } from '@/entities/gallery/model/types'
import { apiClient } from '@/shared/api/client'
import { ADMIN_UPLOAD_IMAGE_MAX_BYTES, formatAdminImageMaxSizeHint } from '@/shared/constants/upload-limits'
import { apiBaseURL } from '@/shared/config'

export async function fetchAdminGallery(): Promise<{ items: GalleryImageItem[] }> {
  const { data } = await apiClient.get<{ items: GalleryImageItem[] }>('admin/gallery')
  return data
}

export async function deleteGalleryImage(id: string): Promise<void> {
  await apiClient.delete(`admin/gallery/${id}`)
}

export async function uploadGalleryImages(files: File[]): Promise<string[]> {
  for (const f of files) {
    if (f.size > ADMIN_UPLOAD_IMAGE_MAX_BYTES) {
      throw new Error(
        `Файл «${f.name}» слишком большой (максимум ${formatAdminImageMaxSizeHint()} на одно изображение).`,
      )
    }
  }
  const fd = new FormData()
  for (const f of files) {
    fd.append('files', f, f.name)
  }
  const token = localStorage.getItem('craftshop_auth_token')
  const base = apiBaseURL.replace(/\/$/, '')
  const res = await fetch(`${base}/admin/gallery/upload`, {
    method: 'POST',
    headers: token ? { Authorization: `Bearer ${token}` } : {},
    body: fd,
  })
  const payload = (await res.json().catch(() => ({}))) as { urls?: string[]; error?: string }
  if (!res.ok) {
    if (res.status === 413) {
      throw new Error(
        'Сервер отклонил файл как слишком большой (413). На проде часто лимит nginx: добавьте client_max_body_size для /api/ (см. docs/nginx-upload-limit.md). Проверьте также MAX_UPLOAD_BODY_BYTES в .env на сервере.',
      )
    }
    throw new Error(typeof payload.error === 'string' ? payload.error : `Ошибка загрузки (${res.status})`)
  }
  if (!Array.isArray(payload.urls)) {
    throw new Error('Некорректный ответ сервера')
  }
  return payload.urls
}

export async function resizeGalleryImage(id: string): Promise<{ url: string }> {
  const { data } = await apiClient.post<{ url: string }>(`admin/gallery/${id}/resize`)
  return data
}
```

- [ ] **Step 3: Update gallery index**

Edit `client/src/entities/gallery/index.ts`:

```ts
export { fetchAdminGallery, deleteGalleryImage, uploadGalleryImages, resizeGalleryImage } from './api/gallery-api'
export type { GalleryImageItem } from './model/types'
export { GalleryGrid } from './ui/GalleryGrid'
```

- [ ] **Step 4: Run client typecheck**

```bash
cd client && npx tsc -b --noEmit
```
Expected: no type errors.

- [ ] **Step 5: Commit**

```bash
git add client/src/entities/gallery/
git commit -m "feat(client): add isResized type, uploadGalleryImages, resizeGalleryImage API"
```

---

### Task 7: Update GalleryGrid — add status badge and resize button

**Files:**
- Modify: `client/src/entities/gallery/ui/GalleryGrid.tsx`

- [ ] **Step 1: Add resize button + status badge to GalleryGrid**

Edit `client/src/entities/gallery/ui/GalleryGrid.tsx`:

```tsx
import AutoFixHighOutlinedIcon from '@mui/icons-material/AutoFixHighOutlined'
import CheckCircleOutlineOutlinedIcon from '@mui/icons-material/CheckCircleOutlineOutlined'
import DeleteOutlineOutlinedIcon from '@mui/icons-material/DeleteOutlineOutlined'
import Box from '@mui/material/Box'
import Chip from '@mui/material/Chip'
import IconButton from '@mui/material/IconButton'
import Tooltip from '@mui/material/Tooltip'
import { OptimizedImage } from '@/shared/ui/OptimizedImage'
import type { GalleryImageItem } from '../model/types'

type Props = {
  items: GalleryImageItem[]
  deleting?: boolean
  resizing?: string | null
  onDelete: (id: string) => void
  onResize: (id: string) => void
}

export function GalleryGrid({ items, deleting, resizing, onDelete, onResize }: Props) {
  return (
    <Box
      sx={{
        display: 'grid',
        gridTemplateColumns: 'repeat(auto-fill, minmax(140px, 1fr))',
        gap: 2,
      }}
    >
      {items.map((item) => (
        <Box
          key={item.id}
          sx={{
            position: 'relative',
            borderRadius: 1,
            overflow: 'hidden',
            border: 1,
            borderColor: 'divider',
            aspectRatio: '1',
          }}
        >
          <OptimizedImage
            src={item.url}
            alt=""
            sizes="140px"
            sx={{ width: '100%', height: '100%', objectFit: 'cover', display: 'block' }}
          />
          <Box sx={{ position: 'absolute', top: 4, left: 4 }}>
            {item.isResized ? (
              <Chip
                label="Готово"
                size="small"
                color="success"
                icon={<CheckCircleOutlineOutlinedIcon fontSize="small" />}
                sx={{ height: 24, '& .MuiChip-label': { px: 0.75 }, '& .MuiChip-icon': { fontSize: 14, ml: 0.5 } }}
              />
            ) : (
              <Chip
                label="Не обработано"
                size="small"
                color="warning"
                sx={{ height: 24, '& .MuiChip-label': { px: 0.75 } }}
              />
            )}
          </Box>
          <Box sx={{ position: 'absolute', top: 4, right: 4, display: 'flex', gap: 0.5 }}>
            {!item.isResized && (
              <Tooltip title="Обработать (resize)">
                <IconButton
                  size="small"
                  color="primary"
                  sx={{
                    bgcolor: 'background.paper',
                    '&:hover': { bgcolor: 'primary.light', color: 'primary.contrastText' },
                  }}
                  disabled={resizing === item.id}
                  onClick={() => onResize(item.id)}
                >
                  <AutoFixHighOutlinedIcon fontSize="small" />
                </IconButton>
              </Tooltip>
            )}
            <Tooltip title="Удалить из галереи">
              <IconButton
                size="small"
                color="error"
                sx={{
                  bgcolor: 'background.paper',
                  '&:hover': { bgcolor: 'error.light', color: 'error.contrastText' },
                }}
                disabled={deleting}
                onClick={() => onDelete(item.id)}
              >
                <DeleteOutlineOutlinedIcon fontSize="small" />
              </IconButton>
            </Tooltip>
          </Box>
        </Box>
      ))}
    </Box>
  )
}
```

- [ ] **Step 2: Run client typecheck**

```bash
cd client && npx tsc -b --noEmit
```
Expected: no type errors.

- [ ] **Step 3: Commit**

```bash
git add client/src/entities/gallery/ui/GalleryGrid.tsx
git commit -m "feat(client): add resize button and status badge to GalleryGrid"
```

---

### Task 8: Update AdminGalleryPage — use new upload + add resize mutation

**Files:**
- Modify: `client/src/pages/admin-gallery/ui/AdminGalleryPage.tsx`

- [ ] **Step 1: Replace `uploadAdminProductImages` with `uploadGalleryImages`, add resize mutation**

Edit `client/src/pages/admin-gallery/ui/AdminGalleryPage.tsx`:

```tsx
import { useRef, useState } from 'react'
import Box from '@mui/material/Box'
import Button from '@mui/material/Button'
import Divider from '@mui/material/Divider'
import Stack from '@mui/material/Stack'
import Typography from '@mui/material/Typography'
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
import { fetchAdminCatalogSlider } from '@/entities/catalog-slider'
import {
  deleteGalleryImage,
  fetchAdminGallery,
  GalleryGrid,
  resizeGalleryImage,
  uploadGalleryImages,
} from '@/entities/gallery'
import { formatAdminImageMaxSizeHint } from '@/shared/constants/upload-limits'
import { invalidateQueryKeys } from '@/shared/lib/invalidate-query-keys'
import { GallerySliderSection } from './GallerySliderSection'
import type { AxiosError } from 'axios'

function getApiErrorMessage(error: unknown): string | null {
  const e = error as AxiosError<{ error?: string }>
  const msg = e?.response?.data?.error
  return msg ? String(msg) : null
}

export function AdminGalleryPage() {
  const queryClient = useQueryClient()
  const fileInputRef = useRef<HTMLInputElement>(null)
  const [resizingId, setResizingId] = useState<string | null>(null)

  const sliderQuery = useQuery({
    queryKey: ['admin', 'catalog-slider'],
    queryFn: fetchAdminCatalogSlider,
  })

  const galleryQuery = useQuery({
    queryKey: ['admin', 'gallery'],
    queryFn: fetchAdminGallery,
  })

  const uploadMut = useMutation({
    mutationFn: (files: File[]) => uploadGalleryImages(files),
    onSuccess: () => {
      void invalidateQueryKeys(queryClient, [['admin', 'gallery']])
      if (fileInputRef.current) {
        fileInputRef.current.value = ''
      }
    },
  })

  const resizeMut = useMutation({
    mutationFn: async (id: string) => {
      setResizingId(id)
      try {
        await resizeGalleryImage(id)
      } finally {
        setResizingId(null)
      }
    },
    onSuccess: () => {
      void invalidateQueryKeys(queryClient, [['admin', 'gallery'], ['admin', 'catalog-slider'], ['catalog-slider']])
    },
  })

  const deleteMut = useMutation({
    mutationFn: (id: string) => deleteGalleryImage(id),
    onSuccess: () => {
      void invalidateQueryKeys(queryClient, [['admin', 'gallery'], ['admin', 'catalog-slider'], ['catalog-slider']])
    },
  })

  const items = galleryQuery.data?.items ?? []
  const deleteError = deleteMut.error
  const uploadError = uploadMut.error
  const resizeError = resizeMut.error

  return (
    <Box>
      <Typography variant="h4" gutterBottom>
        Галерея
      </Typography>
      <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
        Изображения загружаются без обработки. После загрузки нажмите «Resize» для подготовки к публикации.
        Обработанные изображения доступны для добавления в карточку товара и слайдер.
      </Typography>

      {sliderQuery.isError && (
        <Typography color="error" sx={{ mb: 2 }}>
          Не удалось загрузить настройки слайдера.
        </Typography>
      )}
      {sliderQuery.isLoading && (
        <Typography color="text.secondary" sx={{ mb: 2 }}>
          Загрузка настроек слайдера…
        </Typography>
      )}
      {sliderQuery.isSuccess && (
        <GallerySliderSection
          key={sliderQuery.dataUpdatedAt}
          initialSlides={sliderQuery.data.slides.map((s) => ({
            galleryImageId: s.galleryImageId,
            caption: s.caption,
          }))}
          galleryItems={items}
        />
      )}

      <Divider sx={{ mb: 3 }} />

      <Typography variant="body2" color="text.secondary" sx={{ mb: 1 }}>
        Форматы: PNG, JPEG, WebP. На один файл — до {formatAdminImageMaxSizeHint()}.
      </Typography>

      <Stack direction="row" spacing={2} sx={{ mb: 3, alignItems: 'center', flexWrap: 'wrap' }}>
        <Button variant="contained" component="label" disabled={uploadMut.isPending}>
          Загрузить файлы
          <input
            ref={fileInputRef}
            hidden
            type="file"
            accept="image/png,image/jpeg,image/webp"
            multiple
            onChange={(e) => {
              const files = e.target.files
              if (!files?.length) return
              uploadMut.mutate(Array.from(files))
            }}
          />
        </Button>
        {uploadMut.isPending && <Typography color="text.secondary">Загрузка…</Typography>}
        {uploadMut.isError && (
          <Typography color="error">
            {uploadMut.error instanceof Error ? uploadMut.error.message : 'Ошибка загрузки'}
          </Typography>
        )}
        {deleteMut.isError && (
          <Typography color="error">{getApiErrorMessage(deleteMut.error) ?? 'Ошибка удаления'}</Typography>
        )}
        {resizeMut.isError && (
          <Typography color="error">{getApiErrorMessage(resizeMut.error) ?? 'Ошибка обработки'}</Typography>
        )}
      </Stack>

      {galleryQuery.isError && (
        <Typography color="error" sx={{ mb: 2 }}>
          Не удалось загрузить список.
        </Typography>
      )}

      <GalleryGrid
        items={items}
        deleting={deleteMut.isPending}
        resizing={resizingId}
        onDelete={(id) => deleteMut.mutate(id)}
        onResize={(id) => resizeMut.mutate(id)}
      />

      {!galleryQuery.isLoading && items.length === 0 && (
        <Typography color="text.secondary">Пока нет загруженных изображений.</Typography>
      )}
    </Box>
  )
}
```

- [ ] **Step 2: Run client lint**

```bash
cd client && npm run lint
```
Expected: no errors.

- [ ] **Step 3: Run client typecheck**

```bash
cd client && npx tsc -b --noEmit
```
Expected: no errors.

- [ ] **Step 4: Commit**

```bash
git add client/src/pages/admin-gallery/
git commit -m "feat(client): update AdminGalleryPage with new upload and resize UI"
```

---

### Task 9: Update AdminProductsPage — remove direct upload, filter gallery to resized only

**Files:**
- Modify: `client/src/pages/admin-products/ui/AdminProductsPage.tsx`

- [ ] **Step 1: Remove direct file upload from product form**

Edit `client/src/pages/admin-products/ui/AdminProductsPage.tsx`:

Changes:
1. Remove `uploadAdminProductImages` import (line 34)
2. Remove `import { formatAdminImageMaxSizeHint } from '@/shared/constants/upload-limits'` (line 37 — no longer needed in this file)
3. Remove `productImagesInputRef` (line 206)
4. Remove `uploadImagesMut` mutation (lines 208-217)
5. Change `mutationError` to exclude `uploadImagesMut.error` (line 219 → `const mutationError = createMut.error ?? updateMut.error ?? deleteMut.error`)
6. Remove the "Выбрать файлы" button and its description text
7. Update the "Фото" section description to remove mention of file upload limits

The relevant section (lines 402-445) should become:

```tsx
            <Box>
              <Typography variant="subtitle2" sx={{ mb: 0.5 }}>
                Фото (из галереи)
              </Typography>
              <FormHelperText sx={{ mt: 0, mb: 1 }}>
                Выберите обработанные изображения из галереи. Крестик на превью убирает фото только из карточки; файл
                остаётся на сервере и в галерее.
              </FormHelperText>
              <Box
                sx={{
                  display: 'flex',
                  gap: 2,
                  alignItems: { sm: 'center' },
                  flexDirection: { xs: 'column', sm: 'row' },
                  flexWrap: 'wrap',
                }}
              >
                <Button
                  variant="outlined"
                  onClick={() => {
                    setGallerySelectedUrls(new Set())
                    setGalleryPickOpen(true)
                  }}
                >
                  Из галереи
                </Button>
              </Box>

              // ... keep the rest (imageUrls preview) unchanged
            </Box>
```

- [ ] **Step 2: Filter gallery picker to resized images only**

In the gallery picker dialog, filter the items:

Change line 569:
```tsx
{(galleryForPickQuery.data?.items ?? [])
  .filter((item) => item.isResized)
  .map((item) => {
```

Also add an empty state message when there are gallery items but none are resized:

After the existing empty state check (line 558-560), add:
```tsx
{galleryForPickQuery.data &&
  galleryForPickQuery.data.items.length > 0 &&
  galleryForPickQuery.data.items.filter((i) => i.isResized).length === 0 &&
  !galleryForPickQuery.isLoading && (
    <Typography color="text.secondary">
      В галерее нет обработанных изображений. Сначала обработайте их в разделе «Галерея».
    </Typography>
  )}
```

- [ ] **Step 3: Run client lint and typecheck**

```bash
cd client && npm run lint && npx tsc -b --noEmit
```
Expected: no errors.

- [ ] **Step 4: Commit**

```bash
git add client/src/pages/admin-products/
git commit -m "feat(client): remove direct upload from product form, filter gallery to resized"
```

---

### Task 10: Update GallerySliderSection — filter to resized images only

**Files:**
- Modify: `client/src/pages/admin-gallery/ui/GallerySliderSection.tsx`

- [ ] **Step 1: Filter pickCandidates to resized only**

Edit `client/src/pages/admin-gallery/ui/GallerySliderSection.tsx`, change line 34:

```tsx
const pickCandidates = galleryItems.filter((i) => !usedIds.has(i.id) && i.isResized)
```

- [ ] **Step 2: Commit**

```bash
git add client/src/pages/admin-gallery/ui/GallerySliderSection.tsx
git commit -m "feat(client): slider picker shows only resized images"
```

---

### Task 11: Clean up unused server import (gallery.js)

**Files:**
- Modify: `server/src/lib/gallery.js` — no change needed, keep as is (still used by future migration scripts or could be useful)
- Actually nothing to clean up here — `upsertGalleryImagesByUrls` is no longer imported anywhere. Remove the file `server/src/lib/gallery.js` if nothing else uses it.

- [ ] **Step 1: Check if gallery.js is used anywhere else**

Run: `rg "gallery.js" server/src/`
Expected: only in the import in the now-removed admin-products.js line 1.

- [ ] **Step 2: Remove gallery.js file**

Delete `server/src/lib/gallery.js` since it's no longer used.

- [ ] **Step 3: Commit**

```bash
git rm server/src/lib/gallery.js
git commit -m "chore(server): remove unused gallery.js"
```

---

### Task 12: End-to-end verification

- [ ] **Step 1: Run all server tests**

```bash
cd server && npm test
```
Expected: all tests pass.

- [ ] **Step 2: Run client lint + format check + typecheck**

```bash
cd client && npm run lint && npm run format:check && npx tsc -b --noEmit
```
Expected: no errors.

- [ ] **Step 3: Manual smoke test**

1. Start server: `cd server && npm run dev`
2. Start client: `cd client && npm run dev`
3. Open `/admin/gallery` → upload a PNG → verify it shows with "Не обработано" badge
4. Click resize button → verify it becomes "Готово"
5. Open `/admin/products` → edit/create product → verify no "Выбрать файлы" button, only "Из галереи"
6. Click "Из галереи" → verify only resized images show up
7. Add image to product → save → verify product card shows the image
8. Open `/admin/gallery` → verify resized image can't be resized again (no resize button)

- [ ] **Step 4: Commit any remaining changes**

```bash
git add -A
git commit -m "feat: complete admin image redesign — upload, resize, attach flow"
```