@jant/core 0.3.6 → 0.3.7

package/src/services/__tests__/media.test.ts

@@ -1,16 +1,20 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion -- Test assertions use ! for readability */
 import { describe, it, expect, beforeEach } from "vitest";
 import { createTestDatabase } from "../../__tests__/helpers/db.js";
 import { createMediaService } from "../media.js";
+import { createPostService } from "../post.js";
 import type { Database } from "../../db/index.js";
 
 describe("MediaService", () => {
   let db: Database;
   let mediaService: ReturnType<typeof createMediaService>;
+  let postService: ReturnType<typeof createPostService>;
 
   beforeEach(() => {
     const testDb = createTestDatabase();
     db = testDb.db as unknown as Database;
     mediaService = createMediaService(db);
+    postService = createPostService(db);
   });
 
   const sampleMedia = {
@@ -37,6 +41,8 @@ describe("MediaService", () => {
       expect(media.height).toBe(1080);
       expect(media.postId).toBeNull();
       expect(media.alt).toBeNull();
+      expect(media.position).toBe(0);
+      expect(media.blurhash).toBeNull();
     });
 
     it("creates media with optional alt text", async () => {
@@ -48,6 +54,17 @@ describe("MediaService", () => {
       expect(media.alt).toBe("A beautiful sunset");
     });
 
+    it("creates media with position and blurhash", async () => {
+      const media = await mediaService.create({
+        ...sampleMedia,
+        position: 3,
+        blurhash: "LKO2?U%2Tw=w]~RBVZRi};RPxuwH",
+      });
+
+      expect(media.position).toBe(3);
+      expect(media.blurhash).toBe("LKO2?U%2Tw=w]~RBVZRi};RPxuwH");
+    });
+
     it("generates UUIDv7 IDs", async () => {
       const media1 = await mediaService.create(sampleMedia);
       const media2 = await mediaService.create({
@@ -76,6 +93,135 @@ describe("MediaService", () => {
     });
   });
 
+  describe("getByIds", () => {
+    it("returns media for valid IDs", async () => {
+      const m1 = await mediaService.create({
+        ...sampleMedia,
+        r2Key: "media/a.jpg",
+      });
+      const m2 = await mediaService.create({
+        ...sampleMedia,
+        r2Key: "media/b.jpg",
+      });
+
+      const results = await mediaService.getByIds([m1.id, m2.id]);
+      expect(results).toHaveLength(2);
+      expect(results.map((r) => r.id).sort()).toEqual([m1.id, m2.id].sort());
+    });
+
+    it("returns empty array for empty input", async () => {
+      const results = await mediaService.getByIds([]);
+      expect(results).toEqual([]);
+    });
+
+    it("ignores non-existent IDs", async () => {
+      const m1 = await mediaService.create(sampleMedia);
+
+      const results = await mediaService.getByIds([m1.id, "nonexistent"]);
+      expect(results).toHaveLength(1);
+      expect(results[0]!.id).toBe(m1.id);
+    });
+  });
+
+  describe("getByPostId", () => {
+    it("returns media ordered by position", async () => {
+      const post = await postService.create({
+        type: "note",
+        content: "test",
+      });
+
+      const m1 = await mediaService.create({
+        ...sampleMedia,
+        r2Key: "media/a.jpg",
+      });
+      const m2 = await mediaService.create({
+        ...sampleMedia,
+        r2Key: "media/b.jpg",
+      });
+
+      await mediaService.attachToPost(post.id, [m2.id, m1.id]);
+
+      const results = await mediaService.getByPostId(post.id);
+      expect(results).toHaveLength(2);
+      expect(results[0]!.id).toBe(m2.id);
+      expect(results[0]!.position).toBe(0);
+      expect(results[1]!.id).toBe(m1.id);
+      expect(results[1]!.position).toBe(1);
+    });
+
+    it("returns empty array for post with no media", async () => {
+      const post = await postService.create({
+        type: "note",
+        content: "test",
+      });
+
+      const results = await mediaService.getByPostId(post.id);
+      expect(results).toEqual([]);
+    });
+  });
+
+  describe("getByPostIds", () => {
+    it("returns Map grouped by postId", async () => {
+      const post1 = await postService.create({
+        type: "note",
+        content: "post 1",
+      });
+      const post2 = await postService.create({
+        type: "note",
+        content: "post 2",
+      });
+
+      const m1 = await mediaService.create({
+        ...sampleMedia,
+        r2Key: "media/a.jpg",
+      });
+      const m2 = await mediaService.create({
+        ...sampleMedia,
+        r2Key: "media/b.jpg",
+      });
+      const m3 = await mediaService.create({
+        ...sampleMedia,
+        r2Key: "media/c.jpg",
+      });
+
+      await mediaService.attachToPost(post1.id, [m1.id, m2.id]);
+      await mediaService.attachToPost(post2.id, [m3.id]);
+
+      const results = await mediaService.getByPostIds([post1.id, post2.id]);
+      expect(results.size).toBe(2);
+      expect(results.get(post1.id)).toHaveLength(2);
+      expect(results.get(post2.id)).toHaveLength(1);
+    });
+
+    it("returns empty Map for empty input", async () => {
+      const results = await mediaService.getByPostIds([]);
+      expect(results.size).toBe(0);
+    });
+
+    it("returns ordered by position within each post", async () => {
+      const post = await postService.create({
+        type: "note",
+        content: "test",
+      });
+
+      const m1 = await mediaService.create({
+        ...sampleMedia,
+        r2Key: "media/a.jpg",
+      });
+      const m2 = await mediaService.create({
+        ...sampleMedia,
+        r2Key: "media/b.jpg",
+      });
+
+      await mediaService.attachToPost(post.id, [m2.id, m1.id]);
+
+      const results = await mediaService.getByPostIds([post.id]);
+      const postMedia = results.get(post.id)!;
+      expect(postMedia[0]!.id).toBe(m2.id);
+      expect(postMedia[1]!.id).toBe(m1.id);
+    });
+  });
+
   describe("getByR2Key", () => {
     it("returns media by R2 key", async () => {
       await mediaService.create(sampleMedia);
@@ -115,6 +261,108 @@ describe("MediaService", () => {
     });
   });
 
+  describe("attachToPost", () => {
+    it("sets postId and position for each media", async () => {
+      const post = await postService.create({
+        type: "note",
+        content: "test",
+      });
+
+      const m1 = await mediaService.create({
+        ...sampleMedia,
+        r2Key: "media/a.jpg",
+      });
+      const m2 = await mediaService.create({
+        ...sampleMedia,
+        r2Key: "media/b.jpg",
+      });
+
+      await mediaService.attachToPost(post.id, [m1.id, m2.id]);
+
+      const attached = await mediaService.getByPostId(post.id);
+      expect(attached).toHaveLength(2);
+      expect(attached[0]!.id).toBe(m1.id);
+      expect(attached[0]!.position).toBe(0);
+      expect(attached[1]!.id).toBe(m2.id);
+      expect(attached[1]!.position).toBe(1);
+    });
+
+    it("replaces existing attachments", async () => {
+      const post = await postService.create({
+        type: "note",
+        content: "test",
+      });
+
+      const m1 = await mediaService.create({
+        ...sampleMedia,
+        r2Key: "media/a.jpg",
+      });
+      const m2 = await mediaService.create({
+        ...sampleMedia,
+        r2Key: "media/b.jpg",
+      });
+      const m3 = await mediaService.create({
+        ...sampleMedia,
+        r2Key: "media/c.jpg",
+      });
+
+      await mediaService.attachToPost(post.id, [m1.id, m2.id]);
+      await mediaService.attachToPost(post.id, [m3.id]);
+
+      const attached = await mediaService.getByPostId(post.id);
+      expect(attached).toHaveLength(1);
+      expect(attached[0]!.id).toBe(m3.id);
+      expect(attached[0]!.position).toBe(0);
+
+      // Verify old media is detached
+      const old1 = await mediaService.getById(m1.id);
+      expect(old1!.postId).toBeNull();
+      expect(old1!.position).toBe(0);
+    });
+
+    it("handles empty array by clearing all attachments", async () => {
+      const post = await postService.create({
+        type: "note",
+        content: "test",
+      });
+
+      const m1 = await mediaService.create({
+        ...sampleMedia,
+        r2Key: "media/a.jpg",
+      });
+
+      await mediaService.attachToPost(post.id, [m1.id]);
+      await mediaService.attachToPost(post.id, []);
+
+      const attached = await mediaService.getByPostId(post.id);
+      expect(attached).toHaveLength(0);
+    });
+  });
+
+  describe("detachFromPost", () => {
+    it("clears postId and resets position", async () => {
+      const post = await postService.create({
+        type: "note",
+        content: "test",
+      });
+
+      const m1 = await mediaService.create({
+        ...sampleMedia,
+        r2Key: "media/a.jpg",
+      });
+
+      await mediaService.attachToPost(post.id, [m1.id]);
+      await mediaService.detachFromPost(post.id);
+
+      const attached = await mediaService.getByPostId(post.id);
+      expect(attached).toHaveLength(0);
+
+      const detached = await mediaService.getById(m1.id);
+      expect(detached!.postId).toBeNull();
+      expect(detached!.position).toBe(0);
+    });
+  });
+
   describe("delete", () => {
     it("deletes a media record", async () => {
       const media = await mediaService.create(sampleMedia);

package/src/services/collection.ts

@@ -21,6 +21,7 @@ export interface CollectionService {
   removePost(collectionId: number, postId: number): Promise<void>;
   getPosts(collectionId: number): Promise<Post[]>;
   getCollectionsForPost(postId: number): Promise<Collection[]>;
+  syncPostCollections(postId: number, collectionIds: number[]): Promise<void>;
 }
 
 export interface CreateCollectionData {
@@ -197,5 +198,23 @@ export function createCollectionService(db: Database): CollectionService {
 
       return rows.map((r) => toCollection(r.collection));
     },
+
+    async syncPostCollections(postId, collectionIds) {
+      const current = await this.getCollectionsForPost(postId);
+      const currentIds = new Set(current.map((c) => c.id));
+      const desiredIds = new Set(collectionIds);
+
+      const toAdd = collectionIds.filter((id) => !currentIds.has(id));
+      const toRemove = current
+        .map((c) => c.id)
+        .filter((id) => !desiredIds.has(id));
+
+      for (const collectionId of toAdd) {
+        await this.addPost(collectionId, postId);
+      }
+      for (const collectionId of toRemove) {
+        await this.removePost(collectionId, postId);
+      }
+    },
   };
 }

package/src/services/media.ts

@@ -4,7 +4,7 @@
  * Handles media upload and management with R2 storage
  */
 
-import { eq, desc } from "drizzle-orm";
+import { eq, desc, inArray, asc } from "drizzle-orm";
 import { uuidv7 } from "uuidv7";
 import type { Database } from "../db/index.js";
 import { media } from "../db/schema.js";
@@ -13,10 +13,15 @@ import type { Media } from "../types.js";
 
 export interface MediaService {
   getById(id: string): Promise<Media | null>;
+  getByIds(ids: string[]): Promise<Media[]>;
+  getByPostId(postId: number): Promise<Media[]>;
+  getByPostIds(postIds: number[]): Promise<Map<number, Media[]>>;
   list(limit?: number): Promise<Media[]>;
   create(data: CreateMediaData): Promise<Media>;
   delete(id: string): Promise<boolean>;
   getByR2Key(r2Key: string): Promise<Media | null>;
+  attachToPost(postId: number, mediaIds: string[]): Promise<void>;
+  detachFromPost(postId: number): Promise<void>;
 }
 
 export interface CreateMediaData {
@@ -29,6 +34,8 @@ export interface CreateMediaData {
   width?: number;
   height?: number;
   alt?: string;
+  position?: number;
+  blurhash?: string;
 }
 
 export function createMediaService(db: Database): MediaService {
@@ -44,6 +51,8 @@ export function createMediaService(db: Database): MediaService {
       width: row.width,
       height: row.height,
       alt: row.alt,
+      position: row.position,
+      blurhash: row.blurhash,
       createdAt: row.createdAt,
     };
   }
@@ -58,6 +67,45 @@ export function createMediaService(db: Database): MediaService {
       return result[0] ? toMedia(result[0]) : null;
     },
 
+    async getByIds(ids) {
+      if (ids.length === 0) return [];
+      const rows = await db.select().from(media).where(inArray(media.id, ids));
+      return rows.map(toMedia);
+    },
+
+    async getByPostId(postId) {
+      const rows = await db
+        .select()
+        .from(media)
+        .where(eq(media.postId, postId))
+        .orderBy(asc(media.position));
+      return rows.map(toMedia);
+    },
+
+    async getByPostIds(postIds) {
+      const result = new Map<number, Media[]>();
+      if (postIds.length === 0) return result;
+
+      const rows = await db
+        .select()
+        .from(media)
+        .where(inArray(media.postId, postIds))
+        .orderBy(asc(media.position));
+
+      for (const row of rows) {
+        const m = toMedia(row);
+        if (m.postId === null) continue;
+        const list = result.get(m.postId);
+        if (list) {
+          list.push(m);
+        } else {
+          result.set(m.postId, [m]);
+        }
+      }
+
+      return result;
+    },
+
     async getByR2Key(r2Key) {
       const result = await db
         .select()
@@ -93,6 +141,8 @@ export function createMediaService(db: Database): MediaService {
           width: data.width ?? null,
           height: data.height ?? null,
           alt: data.alt ?? null,
+          position: data.position ?? 0,
+          blurhash: data.blurhash ?? null,
           createdAt: timestamp,
         })
         .returning();
@@ -101,6 +151,31 @@ export function createMediaService(db: Database): MediaService {
       return toMedia(result[0]!);
     },
 
+    async attachToPost(postId, mediaIds) {
+      // Clear existing attachments
+      await db
+        .update(media)
+        .set({ postId: null, position: 0 })
+        .where(eq(media.postId, postId));
+
+      // Set new attachments with position = array index
+      for (let i = 0; i < mediaIds.length; i++) {
+        const mediaId = mediaIds[i];
+        if (!mediaId) continue;
+        await db
+          .update(media)
+          .set({ postId, position: i })
+          .where(eq(media.id, mediaId));
+      }
+    },
+
+    async detachFromPost(postId) {
+      await db
+        .update(media)
+        .set({ postId: null, position: 0 })
+        .where(eq(media.postId, postId));
+    },
+
     async delete(id) {
       const result = await db.delete(media).where(eq(media.id, id)).returning();
       return result.length > 0;

package/src/theme/components/MediaGallery.tsx

@@ -0,0 +1,128 @@
+/**
+ * Media Gallery Component
+ *
+ * Renders media attachments on public post pages.
+ * Layout adapts based on the number of images.
+ */
+
+import type { FC } from "hono/jsx";
+import type { MediaAttachment } from "../../types.js";
+
+export interface MediaGalleryProps {
+  attachments: MediaAttachment[];
+}
+
+export const MediaGallery: FC<MediaGalleryProps> = ({ attachments }) => {
+  const images = attachments.filter((a) => a.mimeType.startsWith("image/"));
+  if (images.length === 0) return null;
+
+  if (images.length === 1) {
+    const [img] = images;
+    if (!img) return null;
+    return (
+      <div class="mt-3">
+        <a href={img.url} target="_blank" rel="noopener noreferrer">
+          <img
+            src={img.previewUrl}
+            alt={img.alt || ""}
+            width={img.width ?? undefined}
+            height={img.height ?? undefined}
+            class="rounded-lg max-w-full h-auto"
+            loading="lazy"
+          />
+        </a>
+      </div>
+    );
+  }
+
+  if (images.length === 2) {
+    return (
+      <div class="mt-3 grid grid-cols-2 gap-1 rounded-lg overflow-hidden">
+        {images.map((img) => (
+          <a
+            key={img.id}
+            href={img.url}
+            target="_blank"
+            rel="noopener noreferrer"
+            class="aspect-square"
+          >
+            <img
+              src={img.previewUrl}
+              alt={img.alt || ""}
+              class="w-full h-full object-cover"
+              loading="lazy"
+            />
+          </a>
+        ))}
+      </div>
+    );
+  }
+
+  if (images.length === 3) {
+    const [first, ...rest] = images;
+    if (!first) return null;
+    return (
+      <div class="mt-3 grid grid-cols-2 gap-1 rounded-lg overflow-hidden">
+        <a
+          href={first.url}
+          target="_blank"
+          rel="noopener noreferrer"
+          class="row-span-2"
+        >
+          <img
+            src={first.previewUrl}
+            alt={first.alt || ""}
+            class="w-full h-full object-cover"
+            loading="lazy"
+          />
+        </a>
+        {rest.map((img) => (
+          <a
+            key={img.id}
+            href={img.url}
+            target="_blank"
+            rel="noopener noreferrer"
+            class="aspect-square"
+          >
+            <img
+              src={img.previewUrl}
+              alt={img.alt || ""}
+              class="w-full h-full object-cover"
+              loading="lazy"
+            />
+          </a>
+        ))}
+      </div>
+    );
+  }
+
+  // 4+ images: 2-column grid, show first 4 with remaining count
+  const shown = images.slice(0, 4);
+  const remaining = images.length - 4;
+
+  return (
+    <div class="mt-3 grid grid-cols-2 gap-1 rounded-lg overflow-hidden">
+      {shown.map((img, i) => (
+        <a
+          key={img.id}
+          href={img.url}
+          target="_blank"
+          rel="noopener noreferrer"
+          class="relative aspect-square"
+        >
+          <img
+            src={img.previewUrl}
+            alt={img.alt || ""}
+            class="w-full h-full object-cover"
+            loading="lazy"
+          />
+          {i === 3 && remaining > 0 && (
+            <div class="absolute inset-0 bg-black/50 flex items-center justify-center text-white text-xl font-semibold">
+              +{remaining}
+            </div>
+          )}
+        </a>
+      ))}
+    </div>
+  );
+};