@itsmrtr/bunkoshelf 1.0.2 → 1.1.0

package/dist/src/components/profile/ProfileForm.tsx

@@ -1,17 +1,21 @@
 "use client";
 
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { useRouter } from "next/navigation";
+import { Trash2Icon } from "lucide-react";
 import { useToast } from "@/components/ToastProvider";
-import { updateUser } from "@/actions/users";
+import Avatar from "@/components/ui/Avatar";
+import { updateProfile } from "@/actions/profile";
+import { getProfileImageUrl } from "@/lib/profileImageUrl";
 import type { Session, DictionarySection } from "@/lib/types";
 
 interface ProfileFormProps {
+  lang: string;
   user: Session | null;
   intl: DictionarySection;
 }
 
-export default function ProfileForm({ user, intl }: ProfileFormProps) {
+export default function ProfileForm({ lang, user, intl }: ProfileFormProps) {
   const router = useRouter();
   const toast = useToast();
   if (!toast) throw new Error("ProfileForm must be used within ToastProvider");
@@ -22,32 +26,79 @@ export default function ProfileForm({ user, intl }: ProfileFormProps) {
     lastname: user?.lastname || "",
     password: "",
   });
+  const [profileImage, setProfileImage] = useState<File | null>(null);
+  const [removeProfileImage, setRemoveProfileImage] = useState(false);
+  const [profileImagePreview, setProfileImagePreview] = useState<string | null>(
+    getProfileImageUrl(user?.profileImage)
+  );
 
   const profile = intl.profile as DictionarySection;
   const toastUsers = intl.toastUsers as DictionarySection;
 
+  useEffect(() => {
+    if (removeProfileImage) {
+      setProfileImagePreview(null);
+      return;
+    }
+
+    if (!profileImage) {
+      setProfileImagePreview(getProfileImageUrl(user?.profileImage));
+      return;
+    }
+
+    const objectUrl = URL.createObjectURL(profileImage);
+    setProfileImagePreview(objectUrl);
+
+    return () => URL.revokeObjectURL(objectUrl);
+  }, [profileImage, removeProfileImage, user?.profileImage]);
+
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const { name, value } = e.target;
     setFormData((prevData) => ({ ...prevData, [name]: value }));
   };
 
+  const handleProfileImageChange = (file: File | null) => {
+    setRemoveProfileImage(false);
+    setProfileImage(file);
+  };
+
+  const handleRemoveProfileImage = () => {
+    setProfileImage(null);
+    setRemoveProfileImage(true);
+  };
+
   const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
 
-    const result = await updateUser(formData);
+    const payload = new FormData();
+    payload.set("name", formData.name);
+    payload.set("lastname", formData.lastname);
+    payload.set("password", formData.password);
+    payload.set("removeProfileImage", removeProfileImage ? "true" : "false");
+
+    if (profileImage) {
+      payload.set("profileImage", profileImage);
+    }
+
+    const result = await updateProfile(payload, lang);
 
     if (result.success) {
       setFormData((prevData) => ({ ...prevData, password: "" }));
+      setProfileImage(null);
+      setRemoveProfileImage(false);
       addToast({
         title: toastUsers.successTt as string,
         description: toastUsers.successUpdate as string,
         variant: "success",
       });
       router.refresh();
+      setTimeout(() => {
+        router.refresh();
+      }, 150);
     } else {
       addToast({
         title: toastUsers.errorTt as string,
-        description: toastUsers.errorUpdate as string,
+        description: (result.error as string) || (toastUsers.errorUpdate as string),
         variant: "error",
       });
     }
@@ -56,6 +107,41 @@ export default function ProfileForm({ user, intl }: ProfileFormProps) {
   return (
     <div className="max-w-7xl mx-auto">
       <form onSubmit={handleSubmit} className="space-y-4">
+        <div className="flex flex-col md:flex-row md:items-center gap-6 mb-8">
+          <div className="relative group w-28 h-28 shrink-0">
+            <Avatar
+              name={formData.name || user?.name}
+              lastname={formData.lastname || user?.lastname}
+              imageUrl={profileImagePreview}
+              alt={`${formData.name || user?.name || user?.username || "User"} ${
+                formData.lastname || user?.lastname || ""
+              }`.trim()}
+              className="w-28 h-28 text-3xl"
+            />
+            {profileImagePreview && (
+              <button
+                type="button"
+                onClick={handleRemoveProfileImage}
+                title={profile.removePicture as string}
+                className="absolute top-1 right-1 opacity-0 group-hover:opacity-100 transition-opacity duration-200 rounded-full bg-red-700 hover:bg-red-800 text-white p-1.5 cursor-pointer"
+              >
+                <Trash2Icon size={14} />
+              </button>
+            )}
+          </div>
+          <div className="w-full">
+            <label className="block text-sm mb-2">{profile.picture as string}</label>
+            <input
+              type="file"
+              accept="image/png,image/jpeg,image/webp"
+              onChange={(e) => handleProfileImageChange(e.target.files?.[0] ?? null)}
+              className="text-sand bg-onix border border-neutral-700 hover:border-pearl rounded-lg w-full px-5 py-3 transition-all duration-300 file:mr-4 file:border-0 file:bg-lilah file:text-pearl file:px-4 file:py-2 file:rounded-md"
+            />
+            <p className="text-xs text-neutral-400 mt-2">
+              {profile.pictureHelp as string}
+            </p>
+          </div>
+        </div>
         <input
           name="name"
           value={formData.name}

package/dist/src/components/profile/UserAvatar.tsx

@@ -1,7 +1,8 @@
 import { connection } from "next/server";
-import clsx from "clsx";
 import { verifySession } from "@/lib/auth/verifySession";
 import { findUserSessionById } from "@/lib/db/users";
+import Avatar from "@/components/ui/Avatar";
+import { getProfileImageUrl } from "@/lib/profileImageUrl";
 import type { DictionarySection } from "@/lib/types";
 
 interface UserAvatarProps {
@@ -18,10 +19,6 @@ export default async function UserAvatar({ intl }: UserAvatarProps) {
 
   if (!user) return null;
 
-  const initials = `${user.name?.[0] ?? ""}${
-    user.lastname?.[0] ?? ""
-  }`.toUpperCase();
-
   const age =
     typeof user.birthYear === "number"
       ? new Date().getFullYear() - user.birthYear
@@ -32,15 +29,13 @@ export default async function UserAvatar({ intl }: UserAvatarProps) {
 
   return (
     <div className="flex flex-col items-center gap-4 text-center my-8 2xl:mb-12">
-      <div
-        className={clsx(
-          "rounded-full bg-lilah text-pearl flex items-center justify-center font-bold",
-          "text-5xl w-40 h-40",
-          "md:w-48 md:h-48 md:text-7xl"
-        )}
-      >
-        {initials}
-      </div>
+      <Avatar
+        name={user.name}
+        lastname={user.lastname}
+        imageUrl={getProfileImageUrl(user.profileImage)}
+        alt={`${user.name ?? user.username} ${user.lastname ?? ""}`.trim()}
+        className="text-5xl w-40 h-40 md:w-48 md:h-48 md:text-7xl"
+      />
 
       <div className="flex flex-col items-center justify-center mt-4">
         <h3 className="text-2xl md:text-3xl mb-2">

package/dist/src/components/sidebar/FooterNav.tsx

@@ -46,10 +46,10 @@ export default function FooterNav({
   versionData,
 }: FooterNavProps) {
   const [latestVersion, setLatestVersion] = useState<string | null>(
-    versionData.latestVersion
+    versionData.latestVersion,
   );
   const [updateAvailable, setUpdateAvailable] = useState(
-    versionData.updateAvailable
+    versionData.updateAvailable,
   );
   const [changelogUrl, setChangelogUrl] = useState(versionData.changelogUrl);
   const currentVersion = versionData.currentVersion;
@@ -91,7 +91,7 @@ export default function FooterNav({
     }
 
     checkVersion();
-    const interval = setInterval(checkVersion, 24 * 60 * 60 * 1000);
+    const interval = setInterval(checkVersion, 6 * 60 * 60 * 1000);
     return () => clearInterval(interval);
   }, []);
 
@@ -99,7 +99,7 @@ export default function FooterNav({
     {
       type: "link",
       icon: BookOpenIcon,
-      href: "https://bunko.am25.app/guides/manga",
+      href: "https://bunko.alemartir.com/guides/manga",
       target: "_blank",
       title: intl.tooltip.userGuide as string,
     },

package/dist/src/components/sidebar/SecondNav.tsx

@@ -10,7 +10,7 @@ interface SecondNavProps {
 export default function SecondNav({ intl, className }: SecondNavProps) {
   const links = [
     {
-      href: "https://bunko.am25.app/guides",
+      href: "https://bunko.alemartir.com",
       icon: BookOpenIcon,
       label: intl.noauth.guide as string,
       external: true,

package/dist/src/components/ui/Avatar.tsx

@@ -0,0 +1,50 @@
+import Image from "next/image";
+import clsx from "clsx";
+
+interface AvatarProps {
+  name?: string | null;
+  lastname?: string | null;
+  imageUrl?: string | null;
+  alt: string;
+  className?: string;
+  imageClassName?: string;
+  textClassName?: string;
+}
+
+export default function Avatar({
+  name,
+  lastname,
+  imageUrl,
+  alt,
+  className,
+  imageClassName,
+  textClassName,
+}: AvatarProps) {
+  const initials = `${name?.[0] ?? ""}${lastname?.[0] ?? ""}`.toUpperCase() || "?";
+
+  if (imageUrl) {
+    return (
+      <div className={clsx("relative overflow-hidden rounded-full bg-lilah", className)}>
+        <Image
+          src={imageUrl}
+          alt={alt}
+          fill
+          sizes="192px"
+          className={clsx("object-cover", imageClassName)}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <div
+      className={clsx(
+        "rounded-full bg-lilah text-pearl flex items-center justify-center font-bold",
+        className,
+        textClassName
+      )}
+    >
+      {initials}
+    </div>
+  );
+}

package/dist/src/lib/db/migrations/002_add_profile_image_to_users.sql

@@ -0,0 +1,2 @@
+ALTER TABLE users
+ADD COLUMN IF NOT EXISTS profile_image TEXT;

package/dist/src/lib/db/types.ts

@@ -10,6 +10,7 @@ export interface UserRow {
   name: string | null;
   lastname: string | null;
   birth_year: number | null;
+  profile_image: string | null;
 }
 
 export interface PublicUser {
@@ -20,4 +21,5 @@ export interface PublicUser {
   name: string | null;
   lastname: string | null;
   birthYear: number | null;
+  profileImage: string | null;
 }

package/dist/src/lib/db/users.ts

@@ -11,6 +11,7 @@ function mapUser(row: UserRow): PublicUser {
     name: row.name,
     lastname: row.lastname,
     birthYear: row.birth_year,
+    profileImage: row.profile_image,
   };
 }
 
@@ -31,6 +32,7 @@ export async function findUserByUsername(
   const row = await queryOne<UserRow>(
     `
       SELECT id, created_at, username, password, is_admin, role, name, lastname, birth_year
+      , profile_image
       FROM users
       WHERE username = $1
       LIMIT 1
@@ -45,6 +47,7 @@ export async function findUserSessionById(id: string): Promise<PublicUser | null
   const row = await queryOne<UserRow>(
     `
       SELECT id, created_at, username, password, is_admin, role, name, lastname, birth_year
+      , profile_image
       FROM users
       WHERE id = $1
       LIMIT 1
@@ -58,6 +61,7 @@ export async function findUserSessionById(id: string): Promise<PublicUser | null
 export async function listUsers(): Promise<PublicUser[]> {
   const rows = await query<UserRow>(`
     SELECT id, created_at, username, password, is_admin, role, name, lastname, birth_year
+    , profile_image
     FROM users
     ORDER BY COALESCE(name, username) ASC, username ASC
   `);
@@ -119,10 +123,11 @@ export async function createUserRecord(
         role,
         name,
         lastname,
-        birth_year
+        birth_year,
+        profile_image
       )
-      VALUES ($1, $2, $3, $4, $5, $6, $7, $8)
-      RETURNING id, created_at, username, password, is_admin, role, name, lastname, birth_year
+      VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9)
+      RETURNING id, created_at, username, password, is_admin, role, name, lastname, birth_year, profile_image
     `,
     [
       crypto.randomUUID(),
@@ -133,6 +138,7 @@ export async function createUserRecord(
       input.name ?? null,
       input.lastname ?? null,
       input.birthYear ?? null,
+      null,
     ]
   );
 
@@ -153,6 +159,7 @@ export async function updateUserRecord(
     birthYear?: number | null;
     isAdmin?: boolean;
     role?: Role;
+    profileImage?: string | null;
   }
 ): Promise<PublicUser | null> {
   const assignments: string[] = [];
@@ -193,6 +200,11 @@ export async function updateUserRecord(
     assignments.push(`role = $${values.length}`);
   }
 
+  if (input.profileImage !== undefined) {
+    values.push(input.profileImage);
+    assignments.push(`profile_image = $${values.length}`);
+  }
+
   if (assignments.length === 0) {
     return findUserSessionById(id);
   }
@@ -204,7 +216,7 @@ export async function updateUserRecord(
       UPDATE users
       SET ${assignments.join(", ")}
       WHERE id = $${values.length}
-      RETURNING id, created_at, username, password, is_admin, role, name, lastname, birth_year
+      RETURNING id, created_at, username, password, is_admin, role, name, lastname, birth_year, profile_image
     `,
     values
   );

package/dist/src/lib/i18n/dictionaries/en/profile.json

@@ -5,6 +5,9 @@
     "name": "Name",
     "lastname": "Lastname",
     "password": "New Password",
+    "picture": "Profile picture",
+    "pictureHelp": "PNG, JPG or WEBP. Max 5MB.",
+    "removePicture": "Remove profile picture",
     "save": "Save Changes",
     "greeting": "Hi,",
     "updateProfile": "Update Profile",

package/dist/src/lib/i18n/dictionaries/es/profile.json

@@ -5,6 +5,9 @@
     "name": "Nombre",
     "lastname": "Apellido",
     "password": "Nueva contraseña",
+    "picture": "Foto de perfil",
+    "pictureHelp": "PNG, JPG o WEBP. Máximo 5MB.",
+    "removePicture": "Eliminar foto de perfil",
     "save": "Guardar cambios",
     "greeting": "Hola,",
     "updateProfile": "Actualizar perfil",

package/dist/src/lib/profileImage.ts

@@ -0,0 +1,141 @@
+import path from "path";
+import fs from "fs/promises";
+import {
+  DeleteObjectCommand,
+  GetObjectCommand,
+  PutObjectCommand,
+} from "@aws-sdk/client-s3";
+import r2Client, { R2_BUCKET } from "@/lib/r2";
+const LIB_PROVIDER = process.env.LIB_PROVIDER || "local";
+const PROFILE_ROOT_DIR = "profile";
+const PROFILE_LOCAL_DIR = path.resolve(process.cwd(), "..", PROFILE_ROOT_DIR);
+const PROFILE_MAX_SIZE_BYTES = 5 * 1024 * 1024;
+
+const PROFILE_MIME_TYPES: Record<string, string> = {
+  "image/jpeg": ".jpg",
+  "image/png": ".png",
+  "image/webp": ".webp",
+};
+
+export function validateProfileImage(file: File): string | null {
+  if (!(file.type in PROFILE_MIME_TYPES)) {
+    return "Invalid image type";
+  }
+
+  if (file.size > PROFILE_MAX_SIZE_BYTES) {
+    return "Image too large";
+  }
+
+  return null;
+}
+
+function getProfileImageExtension(file: File): string {
+  const extensionFromMime = PROFILE_MIME_TYPES[file.type];
+
+  if (extensionFromMime) {
+    return extensionFromMime;
+  }
+
+  const extensionFromName = path.extname(file.name).toLowerCase();
+  return extensionFromName || ".jpg";
+}
+
+function buildProfileImageFilename(userId: string, file: File): string {
+  const extension = getProfileImageExtension(file);
+  return `${userId}-${crypto.randomUUID()}${extension}`;
+}
+
+function buildProfileImageKey(filename: string): string {
+  return `${PROFILE_ROOT_DIR}/${filename}`;
+}
+
+export async function saveProfileImage(file: File, userId: string): Promise<string> {
+  const filename = buildProfileImageFilename(userId, file);
+  const key = buildProfileImageKey(filename);
+  const buffer = Buffer.from(await file.arrayBuffer());
+
+  if (LIB_PROVIDER === "cloud") {
+    await r2Client.send(
+      new PutObjectCommand({
+        Bucket: R2_BUCKET,
+        Key: key,
+        Body: buffer,
+        ContentType: file.type,
+      })
+    );
+
+    return filename;
+  }
+
+  await fs.mkdir(PROFILE_LOCAL_DIR, { recursive: true });
+  await fs.writeFile(path.join(PROFILE_LOCAL_DIR, filename), buffer);
+
+  return filename;
+}
+
+export async function deleteProfileImage(filename: string | null | undefined): Promise<void> {
+  if (!filename) return;
+
+  if (LIB_PROVIDER === "cloud") {
+    await r2Client.send(
+      new DeleteObjectCommand({
+        Bucket: R2_BUCKET,
+        Key: buildProfileImageKey(filename),
+      })
+    );
+    return;
+  }
+
+  await fs.rm(path.join(PROFILE_LOCAL_DIR, filename), { force: true });
+}
+
+export async function readProfileImage(filename: string): Promise<Response | null> {
+  try {
+    if (LIB_PROVIDER === "cloud") {
+      const response = await r2Client.send(
+        new GetObjectCommand({
+          Bucket: R2_BUCKET,
+          Key: buildProfileImageKey(filename),
+        })
+      );
+
+      const bytes = await response.Body?.transformToByteArray();
+
+      if (!bytes) return null;
+
+      return new Response(Buffer.from(bytes), {
+        headers: {
+          "Content-Type": response.ContentType || getContentType(filename),
+          "Cache-Control": "public, max-age=31536000, immutable",
+        },
+      });
+    }
+
+    const file = await fs.readFile(path.join(PROFILE_LOCAL_DIR, filename));
+
+    return new Response(file, {
+      headers: {
+        "Content-Type": getContentType(filename),
+        "Cache-Control": "public, max-age=31536000, immutable",
+      },
+    });
+  } catch {
+    return null;
+  }
+}
+
+function getContentType(filePath: string): string {
+  const ext = path.extname(filePath).toLowerCase();
+
+  switch (ext) {
+    case ".jpg":
+    case ".jpeg":
+      return "image/jpeg";
+    case ".png":
+      return "image/png";
+    case ".webp":
+      return "image/webp";
+    default:
+      return "application/octet-stream";
+  }
+}

package/dist/src/lib/profileImageUrl.ts

@@ -0,0 +1,4 @@
+export function getProfileImageUrl(filename: string | null | undefined): string | null {
+  if (!filename) return null;
+  return `/api/profile/${encodeURIComponent(filename)}`;
+}

package/dist/src/lib/types/auth.ts

@@ -8,6 +8,7 @@ export interface Session {
   name: string | null;
   lastname: string | null;
   birthYear: number | null;
+  profileImage: string | null;
 }
 
 export type Permission =

package/dist/src/lib/versionInfo.ts

@@ -4,7 +4,7 @@ const PACKAGE_NAME = "@itsmrtr/bunkoshelf";
 const REPOSITORY_URL = "https://github.com/martirale/bunkoshelf";
 const RELEASES_URL = `${REPOSITORY_URL}/releases`;
 const REGISTRY_URL = `https://registry.npmjs.org/${encodeURIComponent(PACKAGE_NAME)}/latest`;
-const CACHE_TTL_MS = 24 * 60 * 60 * 1000;
+const CACHE_TTL_MS = 6 * 60 * 60 * 1000;
 
 export interface VersionInfo {
   currentVersion: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itsmrtr/bunkoshelf",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "description": "Self-hosted personal manga library.",
   "keywords": [
     "bunko",

package/runtime/cli.mjs

@@ -1,9 +1,30 @@
 const [, , command, ...args] = process.argv;
 
+function parseInitArgs(rawArgs) {
+  const options = {
+    cloud: false,
+  };
+  let projectName;
+
+  for (const arg of rawArgs) {
+    if (arg === "--cloud") {
+      options.cloud = true;
+      continue;
+    }
+
+    if (!projectName) {
+      projectName = arg;
+    }
+  }
+
+  return { projectName, options };
+}
+
 switch (command) {
   case "init": {
     const { init } = await import("./commands/init.mjs");
-    await init(args[0]);
+    const { projectName, options } = parseInitArgs(args);
+    await init(projectName, options);
     break;
   }
   case "start": {
@@ -19,7 +40,8 @@ switch (command) {
   default:
     if (command && !command.startsWith("-")) {
       const { init } = await import("./commands/init.mjs");
-      await init(command);
+      const { options } = parseInitArgs(args);
+      await init(command, options);
     } else {
       console.error("Usage: bunkoshelf <init|start|update> [project-name|version]");
       process.exit(1);

package/runtime/commands/init.mjs

@@ -15,17 +15,25 @@ function generateSecret() {
   return randomBytes(32).toString("hex");
 }
 
-function buildEnv(jwtSecret) {
-  return [
+export function buildEnv(jwtSecret, provider = "local") {
+  const lines = [
     "DATABASE_URL=postgresql://user:password@localhost:5432/bunkoshelf",
     `JWT_SECRET=${jwtSecret}`,
     `PORT=${DEFAULT_PORT}`,
     `SITE_URL=http://localhost:${DEFAULT_PORT}`,
-    "LIB_PROVIDER=local",
-    "VAPID_PUBLIC_KEY=",
-    "PUSH_SERVER_URL=",
-    "PUSH_API_KEY=",
-  ].join("\n") + "\n";
+    `LIB_PROVIDER=${provider}`,
+  ];
+
+  if (provider === "cloud") {
+    lines.push(
+      "R2_ENDPOINT=",
+      "R2_ACCESS_KEY_ID=",
+      "R2_SECRET_ACCESS_KEY=",
+      "R2_BUCKET_NAME=bunko-shelf "
+    );
+  }
+
+  return lines.join("\n") + "\n";
 }
 
 function buildPackageJson(name) {
@@ -43,8 +51,9 @@ function buildPackageJson(name) {
   };
 }
 
-export async function init(projectName) {
+export async function init(projectName, options = {}) {
   intro(chalk.bold("▲ Bunko Shelf"));
+  const provider = options.cloud ? "cloud" : "local";
 
   const useCurrentDir = projectName === ".";
   let name = useCurrentDir ? undefined : projectName;
@@ -88,7 +97,7 @@ export async function init(projectName) {
 
   progress.start("Creating project...");
   await fs.ensureDir(projectDir);
-  await fs.writeFile(join(projectDir, ".env"), buildEnv(generateSecret()));
+  await fs.writeFile(join(projectDir, ".env"), buildEnv(generateSecret(), provider));
   await fs.writeJson(join(projectDir, "package.json"), buildPackageJson(name), {
     spaces: 2,
   });