Feat/library

.gitignore

@@ -136,6 +136,9 @@ QA_RECON.md
 TODO.md
 marys-notes.md
 
+# Library feature scratch TODO — local-only, never commit.
+LIBRARY_TODO.md
+
 # Playwright MCP cache
 .playwright-mcp/
 

next.config.js

@@ -92,6 +92,23 @@ module.exports = withBundleAnalyzer({
   compiler: {
     removeConsole: process.env.NODE_ENV === 'prod',
   },
+  sassOptions: {
+    includePaths: [path.join(__dirname, 'src/styles')],
+    // Library SCSS modules rely on placeholder selectors (e.g. %text-base)
+    // that the original app injected globally. Scope that injection to the
+    // migrated library files only so keepsimple's own SCSS stays untouched.
+    additionalData: (content, loaderContext) => {
+      const resourcePath = (loaderContext && loaderContext.resourcePath) || '';
+      const isLibraryModule =
+        /[\\/]src[\\/](components|layouts|pages)[\\/]library[\\/]/.test(
+          resourcePath,
+        );
+      if (isLibraryModule) {
+        return `@use "library/styles.scss" as *;\n${content}`;
+      }
+      return content;
+    },
+  },
   eslint: {
     ignoreDuringBuilds: true,
   },
@@ -108,7 +125,25 @@ module.exports = withBundleAnalyzer({
     config.module.rules.push({
       test: /\.svg$/i,
       issuer: /\.[jt]sx?$/,
-      use: ['@svgr/webpack'],
+      use: [
+        {
+          loader: '@svgr/webpack',
+          options: {
+            // SVGO's preset-default strips viewBox, which breaks icons rendered
+            // at a smaller width/height than their intrinsic size (e.g. a 44x44
+            // icon shown at 14px clips to its top-left corner instead of
+            // scaling). Keep the viewBox so downscaled icons render fully.
+            svgoConfig: {
+              plugins: [
+                {
+                  name: 'preset-default',
+                  params: { overrides: { removeViewBox: false } },
+                },
+              ],
+            },
+          },
+        },
+      ],
     });
     return config;
   },

package.json

@@ -27,8 +27,13 @@
     "prepare": "husky install"
   },
   "dependencies": {
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
+    "@hookform/resolvers": "^5.2.2",
     "@next/bundle-analyzer": "^16.2.3",
     "@svgr/webpack": "^8.1.0",
+    "axios": "^1.13.4",
     "classnames": "2.3.1",
     "cookie": "0.6.0",
     "cross-env": "7.0.3",
@@ -43,6 +48,7 @@
     "geoip-lite": "1.4.2",
     "html2canvas": "^1.4.1",
     "isomorphic-dompurify": "^3.12.0",
+    "js-cookie": "^3.0.5",
     "lodash.debounce": "4.0.8",
     "lodash.unescape": "4.0.1",
     "mixpanel-browser": "^2.65.0",
@@ -54,8 +60,11 @@
     "react-beautiful-dnd": "13.1.1",
     "react-confetti": "6.1.0",
     "react-confetti-explosion": "2.1.2",
+    "react-day-picker": "^10.0.0",
     "react-dom": "19.0.3",
+    "react-dropzone": "^15.0.0",
     "react-ga4": "1.4.1",
+    "react-hook-form": "^7.71.1",
     "react-icalendar-link": "3.0.2",
     "react-intersection-observer": "^9.16.0",
     "react-loading-skeleton": "3.4.0",
@@ -74,7 +83,8 @@
     "slick-carousel": "1.8.1",
     "topojson-client": "^3.1.0",
     "uuid": "8.3.2",
-    "victory": "36.3.0"
+    "victory": "36.3.0",
+    "zod": "^4.3.6"
   },
   "lint-staged": {
     "**/*.{ts,tsx}": [
@@ -94,6 +104,7 @@
     "@types/classnames": "2.2.11",
     "@types/d3-geo": "^3.1.0",
     "@types/geojson": "^7946.0.16",
+    "@types/js-cookie": "^3.0.6",
     "@types/lodash.debounce": "4.0.7",
     "@types/lodash.unescape": "4.0.7",
     "@types/node": "^24.5.2",

src/api/library/createLibrary.ts

@@ -0,0 +1,23 @@
+import axiosInstance from '@lib/library/axios';
+
+// Bootstrap a published library for the given user. Returns the new library id,
+// or null on failure.
+export const createLibrary = async (
+  userId: number | string,
+): Promise<number | null> => {
+  try {
+    const { data } = await axiosInstance.post<{ data: { id: number } }>(
+      '/api/libraries',
+      {
+        data: {
+          user: userId,
+          publishedAt: new Date().toISOString(),
+        },
+      },
+    );
+    return data?.data?.id ?? null;
+  } catch (error) {
+    console.error('createLibrary failed:', error);
+    return null;
+  }
+};

src/api/library/getLibrariesList.ts

@@ -0,0 +1,17 @@
+import axiosInstance from '@lib/library/axios';
+
+import { LIBRARY_CARD_POPULATE } from '@api/library/libraryCardPopulate';
+
+export const getLibrariesList = async <T = unknown>(): Promise<T | null> => {
+  try {
+    const { data } = await axiosInstance.get<T>('/api/libraries', {
+      params: LIBRARY_CARD_POPULATE,
+    });
+
+    return data ?? null;
+  } catch (e) {
+    console.error(e);
+
+    return null;
+  }
+};

src/api/library/getLibrariesPaginated.ts

@@ -0,0 +1,29 @@
+import type { StrapiLibrariesResponse } from '@local-types/library/library';
+
+import axiosInstance from '@lib/library/axios';
+
+import { LIBRARY_CARD_POPULATE } from '@api/library/libraryCardPopulate';
+
+export const getLibrariesPaginated = async (
+  page = 1,
+  pageSize = 8,
+): Promise<StrapiLibrariesResponse | null> => {
+  try {
+    const { data } = await axiosInstance.get<StrapiLibrariesResponse>(
+      '/api/libraries',
+      {
+        params: {
+          ...LIBRARY_CARD_POPULATE,
+          'pagination[page]': page,
+          'pagination[pageSize]': pageSize,
+        },
+      },
+    );
+
+    return data ?? null;
+  } catch (e) {
+    console.error(e);
+
+    return null;
+  }
+};

src/api/library/getLibraryIdByUsername.ts

@@ -0,0 +1,25 @@
+import type { StrapiLibrariesResponse } from '@local-types/library/library';
+
+import axiosInstance from '@lib/library/axios';
+
+// Resolve a `/library/[username]` slug to a numeric library id. Returns null
+// when the username has no library (or the lookup fails).
+export const getLibraryIdByUsername = async (
+  username: string,
+): Promise<number | null> => {
+  try {
+    const { data } = await axiosInstance.get<StrapiLibrariesResponse>(
+      '/api/libraries',
+      {
+        params: {
+          'filters[user][username][$eqi]': username,
+          'pagination[pageSize]': 1,
+        },
+      },
+    );
+    return data.data?.[0]?.id ?? null;
+  } catch (error) {
+    console.error('getLibraryIdByUsername failed:', error);
+    return null;
+  }
+};

src/api/library/getMyLibrary.ts

@@ -0,0 +1,26 @@
+import type { ILibrary } from '@local-types/library/library';
+import type { IStrapiListResponse } from '@local-types/library/strapi';
+
+import axiosInstance from '@lib/library/axios';
+
+export const getMyLibrary = async (
+  userId: number | string,
+): Promise<ILibrary | null> => {
+  try {
+    const { data } = await axiosInstance.get<IStrapiListResponse<ILibrary>>(
+      '/api/libraries',
+      {
+        params: {
+          'filters[user][id][$eq]': userId,
+          'pagination[pageSize]': 1,
+          'populate[avatar]': true,
+          'populate[libraryDetails]': true,
+        },
+      },
+    );
+    return data.data[0] ?? null;
+  } catch (error) {
+    console.error('getMyLibrary failed:', error);
+    return null;
+  }
+};

src/api/library/getSingleLibrary.ts

@@ -0,0 +1,34 @@
+import type { StrapiSingleLibraryResponse } from '@local-types/library/library';
+
+import axiosInstance from '@lib/library/axios';
+
+export const getSingleLibrary = async (
+  id: number | string,
+): Promise<StrapiSingleLibraryResponse | null> => {
+  try {
+    const { data } = await axiosInstance.get<StrapiSingleLibraryResponse>(
+      `/api/libraries/${id}`,
+      {
+        params: {
+          'populate[avatar]': true,
+          'populate[user]': true,
+          'populate[libraryDetails]': true,
+          'populate[singleShelves][populate][objects][populate][coverImage]': true,
+          'populate[singleShelves][populate][objects][populate][tags]': true,
+          // The schema's `config.list.defaultSortBy` only sorts the admin
+          // content-manager — the public REST API defaults to id order. Sort
+          // the populated relations explicitly so persisted `order` is honored
+          // (the client also sorts as a fallback for older Strapi populate).
+          'populate[singleShelves][sort][0]': 'order:asc',
+          'populate[singleShelves][populate][objects][sort][0]': 'order:asc',
+        },
+      },
+    );
+
+    return data ?? null;
+  } catch (e) {
+    console.error(e);
+
+    return null;
+  }
+};

src/api/library/libraryCardPopulate.ts

@@ -0,0 +1,8 @@
+// Populate the relations the home/sidebar library cards need: avatar (image),
+// user (for the `/library/[username]` URL), and shelves + their objects (so the
+// per-type counts reflect object totals, not shelf totals).
+export const LIBRARY_CARD_POPULATE = {
+  'populate[avatar]': true,
+  'populate[user]': true,
+  'populate[singleShelves][populate][objects]': true,
+} as const;

src/api/library/object/createObject.ts

@@ -0,0 +1,25 @@
+import type {
+  ICreateObjectPayload,
+  IObjectSingleResponse,
+} from '@local-types/library/object';
+
+import axiosInstance from '@lib/library/axios';
+
+export const createObject = async (
+  payload: ICreateObjectPayload,
+): Promise<IObjectSingleResponse> => {
+  // No `populate` query params here: Strapi users-permissions runs a
+  // relation-level permission check on each populated field, and the
+  // Authenticated role typically lacks find/findOne on shelf/tag/upload,
+  // which surfaces as a 403 on the whole POST. AddObjectModal backfills
+  // coverImage + tags from local data; the next library refetch returns
+  // the canonical populated shape.
+  const { data } = await axiosInstance.post<IObjectSingleResponse>(
+    '/api/objects',
+    {
+      data: payload,
+    },
+  );
+
+  return data;
+};

src/api/library/object/deleteObject.ts

@@ -0,0 +1,13 @@
+import type { IObjectSingleResponse } from '@local-types/library/object';
+
+import axiosInstance from '@lib/library/axios';
+
+export const deleteObject = async (
+  id: number,
+): Promise<IObjectSingleResponse> => {
+  const { data } = await axiosInstance.delete<IObjectSingleResponse>(
+    `/api/objects/${id}`,
+  );
+
+  return data;
+};

src/api/library/object/reorderObjects.ts

@@ -0,0 +1,12 @@
+import type { IReorderObjectsPayload } from '@local-types/library/object';
+
+import axiosInstance from '@lib/library/axios';
+
+// Unlike create/update, the reorder endpoint expects a RAW body (no `{ data }`
+// wrapper): `{ shelfId, objects: [{ id, order }] }`. Backend default-sorts
+// objects by `order` ASC on subsequent reads.
+export const reorderObjects = async (
+  payload: IReorderObjectsPayload,
+): Promise<void> => {
+  await axiosInstance.post('/api/objects/reorder', payload);
+};

src/api/library/object/updateObject.ts

@@ -0,0 +1,22 @@
+import type {
+  IObjectSingleResponse,
+  IUpdateObjectPayload,
+} from '@local-types/library/object';
+
+import axiosInstance from '@lib/library/axios';
+
+export const updateObject = async (
+  id: number,
+  payload: IUpdateObjectPayload,
+): Promise<IObjectSingleResponse> => {
+  // See createObject.ts — populate params on write endpoints trigger a
+  // relation-permission 403 for the Authenticated role. Skip them here too.
+  const { data } = await axiosInstance.put<IObjectSingleResponse>(
+    `/api/objects/${id}`,
+    {
+      data: payload,
+    },
+  );
+
+  return data;
+};

src/api/library/shelf/createShelf.ts

@@ -0,0 +1,27 @@
+import type {
+  ICreateShelfPayload,
+  IShelfSingleResponse,
+} from '@local-types/library/shelf';
+
+import axiosInstance from '@lib/library/axios';
+
+export const createShelf = async (
+  payload: ICreateShelfPayload,
+): Promise<IShelfSingleResponse> => {
+  const { data } = await axiosInstance.post<IShelfSingleResponse>(
+    '/api/single-shelves',
+    {
+      data: {
+        visibility: 'public',
+        order: 0,
+        objects: [],
+        // single-shelf has draftAndPublish: true. Direct queries filter by
+        // publication state, so publish explicitly to keep the new shelf visible.
+        publishedAt: new Date().toISOString(),
+        ...payload,
+      },
+    },
+  );
+
+  return data;
+};

src/api/library/shelf/deleteShelf.ts

@@ -0,0 +1,6 @@
+import axiosInstance from '@lib/library/axios';
+
+// Backend cascades — deletes every object on the shelf too. See docs/shelf-api.md.
+export const deleteShelf = async (id: number): Promise<void> => {
+  await axiosInstance.delete(`/api/single-shelves/${id}`);
+};