From 51bf7b6f7e4c2bcbd4266f207280aecf05bbb2f9 Mon Sep 17 00:00:00 2001
From: nihonium <nihonium@nekoea.red>
Date: Tue, 25 Nov 2025 05:36:57 +0300
Subject: [PATCH] fix: UserTitle cards

---
 api/schemas/UserTitle.yaml                    |  1 -
 modules/frontend/src/api/models/Image.ts      |  5 ++++-
 modules/frontend/src/api/models/User.ts       |  6 ++---
 modules/frontend/src/api/models/UserTitle.ts  | 12 +++++++++-
 .../src/api/services/DefaultService.ts        |  1 +
 .../frontend/src/components/Header/Header.tsx |  2 +-
 .../cards/UserTitleCardHorizontal.tsx         | 22 +++++++++++++++++++
 .../components/cards/UserTitleCardSquare.tsx  | 22 +++++++++++++++++++
 .../frontend/src/pages/UserPage/UserPage.tsx  |  4 ++--
 .../src/pages/UsersIdPage/UsersIdPage.tsx     | 10 ++++-----
 10 files changed, 70 insertions(+), 15 deletions(-)
 create mode 100644 modules/frontend/src/components/cards/UserTitleCardHorizontal.tsx
 create mode 100644 modules/frontend/src/components/cards/UserTitleCardSquare.tsx

diff --git a/api/schemas/UserTitle.yaml b/api/schemas/UserTitle.yaml
index 3beaec6..ef619cb 100644
--- a/api/schemas/UserTitle.yaml
+++ b/api/schemas/UserTitle.yaml
@@ -20,4 +20,3 @@ properties:
   ctime:
     type: string
     format: date-time
-additionalProperties: true
diff --git a/modules/frontend/src/api/models/Image.ts b/modules/frontend/src/api/models/Image.ts
index 1317db7..a94de74 100644
--- a/modules/frontend/src/api/models/Image.ts
+++ b/modules/frontend/src/api/models/Image.ts
@@ -4,7 +4,10 @@
 /* eslint-disable */
 export type Image = {
     id?: number;
-    storage_type?: string;
+    /**
+     * Image storage type
+     */
+    storage_type?: 's3' | 'local';
     image_path?: string;
 };
 
diff --git a/modules/frontend/src/api/models/User.ts b/modules/frontend/src/api/models/User.ts
index cd76dbe..969023f 100644
--- a/modules/frontend/src/api/models/User.ts
+++ b/modules/frontend/src/api/models/User.ts
@@ -2,15 +2,13 @@
 /* istanbul ignore file */
 /* tslint:disable */
 /* eslint-disable */
+import type { Image } from './Image';
 export type User = {
     /**
      * Unique user ID (primary key)
      */
     id?: number;
-    /**
-     * ID of the user avatar (references images table)
-     */
-    avatar_id?: number;
+    image?: Image;
     /**
      * User email
      */
diff --git a/modules/frontend/src/api/models/UserTitle.ts b/modules/frontend/src/api/models/UserTitle.ts
index 26d5ddc..42b7919 100644
--- a/modules/frontend/src/api/models/UserTitle.ts
+++ b/modules/frontend/src/api/models/UserTitle.ts
@@ -2,4 +2,14 @@
 /* istanbul ignore file */
 /* tslint:disable */
 /* eslint-disable */
-export type UserTitle = Record<string, any>;
+import type { Title } from './Title';
+import type { UserTitleStatus } from './UserTitleStatus';
+export type UserTitle = {
+    user_id: number;
+    title?: Title;
+    status: UserTitleStatus;
+    rate?: number;
+    review_id?: number;
+    ctime?: string;
+};
+
diff --git a/modules/frontend/src/api/services/DefaultService.ts b/modules/frontend/src/api/services/DefaultService.ts
index bb42012..874971e 100644
--- a/modules/frontend/src/api/services/DefaultService.ts
+++ b/modules/frontend/src/api/services/DefaultService.ts
@@ -238,6 +238,7 @@ export class DefaultService {
             },
             errors: {
                 400: `Request params are not correct`,
+                404: `User not found`,
                 500: `Unknown server error`,
             },
         });
diff --git a/modules/frontend/src/components/Header/Header.tsx b/modules/frontend/src/components/Header/Header.tsx
index 98b1295..26f1658 100644
--- a/modules/frontend/src/components/Header/Header.tsx
+++ b/modules/frontend/src/components/Header/Header.tsx
@@ -12,7 +12,7 @@ export const Header: React.FC<HeaderProps> = ({ username }) => {
   const toggleMenu = () => setMenuOpen(!menuOpen);
 
   return (
-    <header className="w-full bg-white shadow-md fixed top-0 left-0 z-50">
+    <header className="w-full bg-white shadow-md sticky top-0 left-0 z-50">
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <div className="flex justify-between h-16 items-center">
 
diff --git a/modules/frontend/src/components/cards/UserTitleCardHorizontal.tsx b/modules/frontend/src/components/cards/UserTitleCardHorizontal.tsx
new file mode 100644
index 0000000..ad7d5df
--- /dev/null
+++ b/modules/frontend/src/components/cards/UserTitleCardHorizontal.tsx
@@ -0,0 +1,22 @@
+import type { UserTitle } from "../../api";
+
+export function UserTitleCardHorizontal({ title }: { title: UserTitle }) {
+  return (
+    <div style={{
+      display: "flex",
+      gap: 12,
+      padding: 12,
+      border: "1px solid #ddd",
+      borderRadius: 8
+    }}>
+      {title.title?.poster?.image_path && (
+        <img src={title.title?.poster.image_path} width={80} />
+      )}
+      <div>
+        <h3>{title.title?.title_names["en"]}</h3>
+        <p>{title.title?.release_year} · {title.title?.release_season} · Rating: {title.title?.rating}</p>
+        <p>Status: {title.title?.title_status}</p>
+      </div>
+    </div>
+  );
+}
diff --git a/modules/frontend/src/components/cards/UserTitleCardSquare.tsx b/modules/frontend/src/components/cards/UserTitleCardSquare.tsx
new file mode 100644
index 0000000..edcf1d5
--- /dev/null
+++ b/modules/frontend/src/components/cards/UserTitleCardSquare.tsx
@@ -0,0 +1,22 @@
+import type { UserTitle } from "../../api";
+
+export function UserTitleCardSquare({ title }: { title: UserTitle }) {
+  return (
+    <div style={{
+      width: 160,
+      border: "1px solid #ddd",
+      padding: 8,
+      borderRadius: 8,
+      textAlign: "center"
+    }}>
+      {title.title?.poster?.image_path && (
+        <img src={title.title?.poster.image_path} width={140} />
+      )}
+      <div>
+        <h4>{title.title?.title_names["en"]}</h4>
+        <h5>{title.status}</h5>
+        <small>{title.title?.release_year} • {title.title?.rating}</small>
+      </div>
+    </div>
+  );
+}
diff --git a/modules/frontend/src/pages/UserPage/UserPage.tsx b/modules/frontend/src/pages/UserPage/UserPage.tsx
index 52c5574..2e39e6b 100644
--- a/modules/frontend/src/pages/UserPage/UserPage.tsx
+++ b/modules/frontend/src/pages/UserPage/UserPage.tsx
@@ -35,9 +35,9 @@ const UserPage: React.FC = () => {
     <div className={styles.container}>
       <div className={styles.header}>
         <div className={styles.avatarWrapper}>
-          {user.avatar_id ? (
+          {user.image?.image_path ? (
             <img
-              src={`/images/${user.avatar_id}.png`}
+              src={`/images/${user.image.image_path}.png`}
               alt="User Avatar"
               className={styles.avatarImg}
             />
diff --git a/modules/frontend/src/pages/UsersIdPage/UsersIdPage.tsx b/modules/frontend/src/pages/UsersIdPage/UsersIdPage.tsx
index b5a8336..342f22c 100644
--- a/modules/frontend/src/pages/UsersIdPage/UsersIdPage.tsx
+++ b/modules/frontend/src/pages/UsersIdPage/UsersIdPage.tsx
@@ -6,8 +6,8 @@ import { SearchBar } from "../../components/SearchBar/SearchBar";
 import { TitlesSortBox } from "../../components/TitlesSortBox/TitlesSortBox";
 import { LayoutSwitch } from "../../components/LayoutSwitch/LayoutSwitch";
 import { ListView } from "../../components/ListView/ListView";
-import { TitleCardSquare } from "../../components/cards/TitleCardSquare";
-import { TitleCardHorizontal } from "../../components/cards/TitleCardHorizontal";
+import { UserTitleCardSquare } from "../../components/cards/UserTitleCardSquare";
+import { UserTitleCardHorizontal } from "../../components/cards/UserTitleCardHorizontal";
 import type { User, UserTitle, CursorObj, TitleSort } from "../../api";
 
 const PAGE_SIZE = 10;
@@ -129,7 +129,7 @@ export default function UsersIdPage({ userId }: UsersIdPageProps) {
     setLoadingMore(false);
   };
 
-  const getAvatarUrl = (avatarId?: number) => (avatarId ? `/api/images/${avatarId}` : "/default-avatar.png");
+  // const getAvatarUrl = (avatarId?: number) => (avatarId ? `/api/images/${avatarId}` : "/default-avatar.png");
 
   return (
     <div className="w-full min-h-screen bg-gray-50 p-6 flex flex-col items-center">
@@ -139,7 +139,7 @@ export default function UsersIdPage({ userId }: UsersIdPageProps) {
       {errorUser && <div className="mt-10 text-red-600 font-medium">{errorUser}</div>}
       {user && (
         <div className="bg-white shadow-lg rounded-xl p-6 w-full max-w-sm flex flex-col items-center mb-8">
-          <img src={getAvatarUrl(user.avatar_id)} alt={user.nickname} className="w-32 h-32 rounded-full object-cover mb-4" />
+          <img src={user.image?.image_path} alt={user.nickname} className="w-32 h-32 rounded-full object-cover mb-4" />
           <h2 className="text-2xl font-bold mb-2">{user.disp_name || user.nickname}</h2>
           {user.mail && <p className="text-gray-600 mb-2">{user.mail}</p>}
           {user.user_desc && <p className="text-gray-700 text-center">{user.user_desc}</p>}
@@ -167,7 +167,7 @@ export default function UsersIdPage({ userId }: UsersIdPageProps) {
             loadingMore={loadingMore}
             onLoadMore={handleLoadMore}
             renderItem={(title, layout) =>
-              layout === "square" ? <TitleCardSquare title={title} /> : <TitleCardHorizontal title={title} />
+              layout === "square" ? <UserTitleCardSquare title={title} /> : <UserTitleCardHorizontal title={title} />
             }
           />