feat:

api/_build/openapi.yaml

@@ -158,7 +158,12 @@ paths:
         - in: query
           name: status
           schema:
-            $ref: '#/components/schemas/TitleStatus'
+            type: array
+            items:
+              $ref: '#/components/schemas/TitleStatus'
+          description: List of title statuses to filter
+          style: form
+          explode: false
         - in: query
           name: watch_status
           schema:
@@ -424,9 +429,8 @@ components:
         user_id:
           type: integer
           format: int64
-        title_id:
-          type: integer
-          format: int64
+        title:
+          $ref: '#/components/schemas/Title'
         status:
           $ref: '#/components/schemas/UserTitleStatus'
         rate:

api/api.gen.go

@@ -143,7 +143,7 @@ type UserTitle struct {
 
 	// Status User's title status
 	Status               UserTitleStatus        `json:"status"`
-	TitleId              int64                  `json:"title_id"`
+	Title                *Title                 `json:"title,omitempty"`
 	UserId               int64                  `json:"user_id"`
 	AdditionalProperties map[string]interface{} `json:"-"`
 }
@@ -183,9 +183,11 @@ type GetUsersUserIdParams struct {
 
 // GetUsersUserIdTitlesParams defines parameters for GetUsersUserIdTitles.
 type GetUsersUserIdTitlesParams struct {
-	Cursor        *Cursor          `form:"cursor,omitempty" json:"cursor,omitempty"`
-	Word          *string          `form:"word,omitempty" json:"word,omitempty"`
-	Status        *TitleStatus     `form:"status,omitempty" json:"status,omitempty"`
+	Cursor *Cursor `form:"cursor,omitempty" json:"cursor,omitempty"`
+	Word   *string `form:"word,omitempty" json:"word,omitempty"`
+
+	// Status List of title statuses to filter
+	Status        *[]TitleStatus   `form:"status,omitempty" json:"status,omitempty"`
 	WatchStatus   *UserTitleStatus `form:"watch_status,omitempty" json:"watch_status,omitempty"`
 	Rating        *float64         `form:"rating,omitempty" json:"rating,omitempty"`
 	ReleaseYear   *int32           `form:"release_year,omitempty" json:"release_year,omitempty"`
@@ -493,12 +495,12 @@ func (a *UserTitle) UnmarshalJSON(b []byte) error {
 		delete(object, "status")
 	}
 
-	if raw, found := object["title_id"]; found {
-		err = json.Unmarshal(raw, &a.TitleId)
+	if raw, found := object["title"]; found {
+		err = json.Unmarshal(raw, &a.Title)
 		if err != nil {
-			return fmt.Errorf("error reading 'title_id': %w", err)
+			return fmt.Errorf("error reading 'title': %w", err)
 		}
-		delete(object, "title_id")
+		delete(object, "title")
 	}
 
 	if raw, found := object["user_id"]; found {
@@ -554,9 +556,11 @@ func (a UserTitle) MarshalJSON() ([]byte, error) {
 		return nil, fmt.Errorf("error marshaling 'status': %w", err)
 	}
 
-	object["title_id"], err = json.Marshal(a.TitleId)
-	if err != nil {
-		return nil, fmt.Errorf("error marshaling 'title_id': %w", err)
+	if a.Title != nil {
+		object["title"], err = json.Marshal(a.Title)
+		if err != nil {
+			return nil, fmt.Errorf("error marshaling 'title': %w", err)
+		}
 	}
 
 	object["user_id"], err = json.Marshal(a.UserId)
@@ -809,7 +813,7 @@ func (siw *ServerInterfaceWrapper) GetUsersUserIdTitles(c *gin.Context) {
 
 	// ------------- Optional query parameter "status" -------------
 
-	err = runtime.BindQueryParameter("form", true, false, "status", c.Request.URL.Query(), &params.Status)
+	err = runtime.BindQueryParameter("form", false, false, "status", c.Request.URL.Query(), &params.Status)
 	if err != nil {
 		siw.ErrorHandler(c, fmt.Errorf("Invalid format for parameter status: %w", err), http.StatusBadRequest)
 		return

api/paths/users-id-titles.yaml

@@ -14,7 +14,12 @@ get:
   - in: query
     name: status
     schema:
-      $ref: '../schemas/enums/TitleStatus.yaml'
+      type: array
+      items:
+        $ref: '../schemas/enums/TitleStatus.yaml'
+    description: List of title statuses to filter
+    style: form
+    explode: false
   - in: query
     name: watch_status
     schema:

api/schemas/UserTitle.yaml

@@ -7,9 +7,8 @@ properties:
   user_id:
     type: integer
     format: int64
-  title_id:
-    type: integer
-    format: int64
+  title:
+    $ref: ./Title.yaml
   status:
     $ref: ./enums/UserTitleStatus.yaml
   rate:

modules/backend/handlers/common.go

@@ -1,6 +1,10 @@
 package handlers
 
 import (
+	"context"
+	"encoding/json"
+	"fmt"
+	oapi "nyanimedb/api"
 	sqlc "nyanimedb/sql"
 	"strconv"
 )
@@ -13,70 +17,75 @@ func NewServer(db *sqlc.Queries) Server {
 	return Server{db: db}
 }
 
-// type Cursor interface {
-// 	ParseCursor(sortBy oapi.TitleSort, data oapi.Cursor) (Cursor, error)
+func (s Server) mapTitle(ctx context.Context, title sqlc.SearchTitlesRow) (oapi.Title, error) {
 
-// 	Values() map[string]interface{}
-// 	// for logs only
-// 	Type() string
-// }
+	title_names := make(map[string][]string, 0)
+	err := json.Unmarshal(title.TitleNames, &title_names)
+	if err != nil {
+		return oapi.Title{}, fmt.Errorf("unmarshal TitleNames: %v", err)
+	}
 
-// type CursorByID struct {
-// 	ID int64
-// }
+	episodes_lens := make(map[string]float64, 0)
+	err = json.Unmarshal(title.EpisodesLen, &episodes_lens)
+	if err != nil {
+		return oapi.Title{}, fmt.Errorf("unmarshal EpisodesLen: %v", err)
+	}
 
-// func (c CursorByID) ParseCursor(sortBy oapi.TitleSort, data oapi.Cursor) (Cursor, error) {
-//     var cur CursorByID
-//     if err := json.Unmarshal(data, &cur); err != nil {
-//         return nil, fmt.Errorf("invalid cursor (id): %w", err)
-//     }
-//     if cur.ID == 0 {
-//         return nil, errors.New("cursor id must be non-zero")
-//     }
-//     return cur, nil
-// }
+	oapi_tag_names := make(oapi.Tags, 0)
+	err = json.Unmarshal(title.TagNames, &oapi_tag_names)
+	if err != nil {
+		return oapi.Title{}, fmt.Errorf("unmarshalling title_tag: %v", err)
+	}
 
-// func (c CursorByID) Values() map[string]interface{} {
-//     return map[string]interface{}{
-//         "cursor_id":     c.ID,
-//         "cursor_year":   nil,
-//         "cursor_rating": nil,
-//     }
-// }
+	var oapi_studio oapi.Studio
 
-// func (c CursorByID) Type() string { return "id" }
+	oapi_studio.Id = title.StudioID
+	if title.StudioName != nil {
+		oapi_studio.Name = *title.StudioName
+	}
+	oapi_studio.Description = title.StudioDesc
+	if title.StudioIllustID != nil {
+		oapi_studio.Poster.Id = title.StudioIllustID
+		oapi_studio.Poster.ImagePath = title.StudioImagePath
+		oapi_studio.Poster.StorageType = &title.StudioStorageType
+	}
 
-// func NewCursor(sortBy string) (Cursor, error) {
-// 	switch Type(sortBy) {
-// 	case TypeID:
-// 		return CursorByID{}, nil
-// 	case TypeYear:
-// 		return CursorByYear{}, nil
-// 	case TypeRating:
-// 		return CursorByRating{}, nil
-// 	default:
-// 		return nil, fmt.Errorf("unsupported sort_by: %q", sortBy)
-// 	}
-// }
+	var oapi_image oapi.Image
 
-// decodes a base64-encoded JSON string into a CursorObj
-// Returns the parsed CursorObj and an error
-// func parseCursor(encoded oapi.Cursor) (*oapi.CursorObj, error) {
+	if title.PosterID != nil {
+		oapi_image.Id = title.PosterID
+		oapi_image.ImagePath = title.TitleImagePath
+		oapi_image.StorageType = &title.TitleStorageType
+	}
 
-// 	// Decode base64
-// 	decoded, err := base64.StdEncoding.DecodeString(encoded)
-// 	if err != nil {
-// 		return nil, fmt.Errorf("parseCursor: %v", err)
-// 	}
+	var release_season oapi.ReleaseSeason
+	if title.ReleaseSeason != nil {
+		release_season = oapi.ReleaseSeason(*title.ReleaseSeason)
+	}
 
-// 	// Parse JSON
-// 	var cursor oapi.CursorObj
-// 	if err := json.Unmarshal(decoded, &cursor); err != nil {
-// 		return nil, fmt.Errorf("parseCursor: %v", err)
-// 	}
+	oapi_status, err := TitleStatus2oapi(&title.TitleStatus)
+	if err != nil {
+		return oapi.Title{}, fmt.Errorf("TitleStatus2oapi: %v", err)
+	}
+	oapi_title := oapi.Title{
+		EpisodesAired: title.EpisodesAired,
+		EpisodesAll:   title.EpisodesAired,
+		EpisodesLen:   &episodes_lens,
+		Id:            title.ID,
+		Poster:        &oapi_image,
+		Rating:        title.Rating,
+		RatingCount:   title.RatingCount,
+		ReleaseSeason: &release_season,
+		ReleaseYear:   title.ReleaseYear,
+		Studio:        &oapi_studio,
+		Tags:          oapi_tag_names,
+		TitleNames:    title_names,
+		TitleStatus:   oapi_status,
+		// AdditionalProperties:
+	}
 
-// 	return &cursor, nil
-// }
+	return oapi_title, nil
+}
 
 func parseInt64(s string) (int32, error) {
 	i, err := strconv.ParseInt(s, 10, 64)

modules/backend/handlers/titles.go

@@ -26,12 +26,12 @@ type SqlcStatus struct {
 	planned  string
 }
 
-func TitleStatus2Sqlc(s []oapi.TitleStatus) (*SqlcStatus, error) {
-	if s == nil {
-		return nil, nil
-	}
+func TitleStatus2Sqlc(s *[]oapi.TitleStatus) (*SqlcStatus, error) {
 	var sqlc_status SqlcStatus
-	for _, t := range s {
+	if s == nil {
+		return &sqlc_status, nil
+	}
+	for _, t := range *s {
 		switch t {
 		case oapi.TitleStatusFinished:
 			sqlc_status.finished = "finished"
@@ -158,78 +158,6 @@ func (s Server) GetStudio(ctx context.Context, id int64) (*oapi.Studio, error) {
 	return &oapi_studio, nil
 }
 
-func (s Server) mapTitle(ctx context.Context, title sqlc.SearchTitlesRow) (oapi.Title, error) {
-
-	// var oapi_title oapi.Title
-
-	title_names := make(map[string][]string, 0)
-	err := json.Unmarshal(title.TitleNames, &title_names)
-	if err != nil {
-		return oapi.Title{}, fmt.Errorf("unmarshal TitleNames: %v", err)
-	}
-
-	episodes_lens := make(map[string]float64, 0)
-	err = json.Unmarshal(title.EpisodesLen, &episodes_lens)
-	if err != nil {
-		return oapi.Title{}, fmt.Errorf("unmarshal EpisodesLen: %v", err)
-	}
-
-	oapi_tag_names := make(oapi.Tags, 0)
-	err = json.Unmarshal(title.TagNames, &oapi_tag_names)
-	if err != nil {
-		return oapi.Title{}, fmt.Errorf("unmarshalling title_tag: %v", err)
-	}
-
-	var oapi_studio oapi.Studio
-
-	oapi_studio.Id = title.StudioID
-	if title.StudioName != nil {
-		oapi_studio.Name = *title.StudioName
-	}
-	oapi_studio.Description = title.StudioDesc
-	if title.StudioIllustID != nil {
-		oapi_studio.Poster.Id = title.StudioIllustID
-		oapi_studio.Poster.ImagePath = title.StudioImagePath
-		oapi_studio.Poster.StorageType = &title.StudioStorageType
-	}
-
-	var oapi_image oapi.Image
-
-	if title.PosterID != nil {
-		oapi_image.Id = title.PosterID
-		oapi_image.ImagePath = title.TitleImagePath
-		oapi_image.StorageType = &title.TitleStorageType
-	}
-
-	var release_season oapi.ReleaseSeason
-	if title.ReleaseSeason != nil {
-		release_season = oapi.ReleaseSeason(*title.ReleaseSeason)
-	}
-
-	oapi_status, err := TitleStatus2oapi(&title.TitleStatus)
-	if err != nil {
-		return oapi.Title{}, fmt.Errorf("TitleStatus2oapi: %v", err)
-	}
-	oapi_title := oapi.Title{
-		EpisodesAired: title.EpisodesAired,
-		EpisodesAll:   title.EpisodesAired,
-		EpisodesLen:   &episodes_lens,
-		Id:            title.ID,
-		Poster:        &oapi_image,
-		Rating:        title.Rating,
-		RatingCount:   title.RatingCount,
-		ReleaseSeason: &release_season,
-		ReleaseYear:   title.ReleaseYear,
-		Studio:        &oapi_studio,
-		Tags:          oapi_tag_names,
-		TitleNames:    title_names,
-		TitleStatus:   oapi_status,
-		// AdditionalProperties:
-	}
-
-	return oapi_title, nil
-}
-
 func (s Server) GetTitlesTitleId(ctx context.Context, request oapi.GetTitlesTitleIdRequestObject) (oapi.GetTitlesTitleIdResponseObject, error) {
 	var oapi_title oapi.Title
 
@@ -276,11 +204,12 @@ func (s Server) GetTitles(ctx context.Context, request oapi.GetTitlesRequestObje
 	opai_titles := make([]oapi.Title, 0)
 
 	word := Word2Sqlc(request.Params.Word)
-	status, err := TitleStatus2Sqlc(*request.Params.Status)
+	status, err := TitleStatus2Sqlc(request.Params.Status)
 	if err != nil {
 		log.Errorf("%v", err)
 		return oapi.GetTitles400Response{}, err
 	}
+
 	season, err := ReleaseSeason2sqlc(request.Params.ReleaseSeason)
 	if err != nil {
 		log.Errorf("%v", err)
@@ -338,7 +267,7 @@ func (s Server) GetTitles(ctx context.Context, request oapi.GetTitlesRequestObje
 		if request.Params.Sort != nil {
 			switch string(*request.Params.Sort) {
 			case "year":
-				tmp := fmt.Sprint("%d", *t.ReleaseYear)
+				tmp := fmt.Sprint(*t.ReleaseYear)
 				new_cursor.Param = &tmp
 			case "rating":
 				tmp := strconv.FormatFloat(*t.Rating, 'f', -1, 64)

modules/backend/handlers/users.go

@@ -2,12 +2,15 @@ package handlers
 
 import (
 	"context"
+	"fmt"
 	oapi "nyanimedb/api"
 	sqlc "nyanimedb/sql"
 	"time"
 
 	"github.com/jackc/pgx/v5"
+	"github.com/jackc/pgx/v5/pgtype"
 	"github.com/oapi-codegen/runtime/types"
+	log "github.com/sirupsen/logrus"
 )
 
 // type Server struct {
@@ -50,33 +53,120 @@ func (s Server) GetUsersUserId(ctx context.Context, req oapi.GetUsersUserIdReque
 	return oapi.GetUsersUserId200JSONResponse(mapUser(user)), nil
 }
 
+func sqlDate2oapi(p_date pgtype.Timestamptz) (time.Time, error) {
+	return time.Time{}, nil
+}
+
+type SqlcUserStatus struct {
+	dropped     string
+	finished    string
+	planned     string
+	in_progress string
+}
+
+func UserTitleStatus2Sqlc(s *[]oapi.UserTitleStatus) (*SqlcUserStatus, error) {
+	var sqlc_status SqlcUserStatus
+	if s == nil {
+		return &sqlc_status, nil
+	}
+	for _, t := range *s {
+		switch t {
+		case oapi.UserTitleStatusFinished:
+			sqlc_status.finished = "finished"
+		case oapi.UserTitleStatusDropped:
+			sqlc_status.dropped = "dropped"
+		case oapi.UserTitleStatusPlanned:
+			sqlc_status.planned = "planned"
+		case oapi.UserTitleStatusInProgress:
+			sqlc_status.in_progress = "in-progress"
+		default:
+			return nil, fmt.Errorf("unexpected tittle status: %s", t)
+		}
+	}
+	return &sqlc_status, nil
+}
+
 func (s Server) GetUsersUserIdTitles(ctx context.Context, request oapi.GetUsersUserIdTitlesRequestObject) (oapi.GetUsersUserIdTitlesResponseObject, error) {
 
-	var rate int32 = 9
-	var review_id int64 = 3
-	time := time.Date(2025, 1, 15, 10, 30, 0, 0, time.UTC)
+	oapi_usertitles := make([]oapi.UserTitle, 0)
 
-	var userTitles = []oapi.UserTitle{
-		{
-			UserId:  101,
-			TitleId: 2001,
-			Status:  oapi.UserTitleStatusFinished,
-			Rate:    &rate,
-			Ctime:   &time,
-		},
-		{
-			UserId:   102,
-			TitleId:  2002,
-			Status:   oapi.UserTitleStatusInProgress,
-			ReviewId: &review_id,
-			Ctime:    &time,
-		},
-		{
-			UserId:  103,
-			TitleId: 2003,
-			Status:  oapi.UserTitleStatusDropped,
-			Ctime:   &time,
-		},
+	word := Word2Sqlc(request.Params.Word)
+	status, err := TitleStatus2Sqlc(request.Params.Status)
+	if err != nil {
+		log.Errorf("%v", err)
+		return oapi.GetUsersUserIdTitles400Response{}, err
+	}
+
+	season, err := ReleaseSeason2sqlc(request.Params.ReleaseSeason)
+	if err != nil {
+		log.Errorf("%v", err)
+		return oapi.GetUsersUserIdTitles400Response{}, err
+	}
+
+	params := sqlc.SearchUserTitlesParams{
+		Forward: true,
+		SortBy:  "id",
+		// CursorYear    :
+		// CursorID      *int64          `json:"cursor_id"`
+		// CursorRating  *float64        `json:"cursor_rating"`
+		// Word          *string         `json:"word"`
+		// Ongoing       string          `json:"ongoing"`
+		// Planned       string          `json:"planned"`
+		// Dropped       string          `json:"dropped"`
+		// InProgress    string          `json:"in-progress"`
+		// Finished      string          `json:"finished"`
+		// Rate          *int32          `json:"rate"`
+		// Rating        *float64        `json:"rating"`
+		// ReleaseYear   *int32          `json:"release_year"`
+		// ReleaseSeason *ReleaseSeasonT `json:"release_season"`
+		// Limit         *int32          `json:"limit"`
+	}
+
+	if request.Params.SortForward != nil {
+		params.Forward = *request.Params.SortForward
+	}
+	if request.Params.Sort != nil {
+		params.SortBy = string(*request.Params.Sort)
+		if request.Params.Cursor != nil {
+			err := ParseCursorInto(string(*request.Params.Sort), string(*request.Params.Cursor), &params)
+			if err != nil {
+				log.Errorf("%v", err)
+				return oapi.GetUsersUserIdTitles400Response{}, nil
+			}
+		}
+	}
+	// param = nil means it will not be used
+	titles, err := s.db.SearchUserTitles(ctx, params)
+	if err != nil {
+		log.Errorf("%v", err)
+		return oapi.GetUsersUserIdTitles500Response{}, nil
+	}
+	if len(titles) == 0 {
+		return oapi.GetUsersUserIdTitles204Response{}, nil
+	}
+	for _, title := range titles {
+		_sqlc_title := sqlc.SearchTitlesRow{
+			ID:                sqlc_title.ID,
+			StudioID:          sqlc_title.StudioID,
+			PosterID:          sqlc_title.PosterID,
+			TitleStatus:       sqlc_title.TitleStatus,
+			Rating:            sqlc_title.Rating,
+			RatingCount:       sqlc_title.RatingCount,
+			ReleaseYear:       sqlc_title.ReleaseYear,
+			ReleaseSeason:     sqlc_title.ReleaseSeason,
+			Season:            sqlc_title.Season,
+			EpisodesAired:     sqlc_title.EpisodesAired,
+			EpisodesAll:       sqlc_title.EpisodesAll,
+			EpisodesLen:       sqlc_title.EpisodesLen,
+			TitleStorageType:  sqlc_title.TitleStorageType,
+			TitleImagePath:    sqlc_title.TitleImagePath,
+			TagNames:          sqlc_title.TitleNames,
+			StudioName:        sqlc_title.StudioName,
+			StudioIllustID:    sqlc_title.StudioIllustID,
+			StudioDesc:        sqlc_title.StudioDesc,
+			StudioStorageType: sqlc_title.StudioStorageType,
+			StudioImagePath:   sqlc_title.StudioImagePath,
+		}
 	}
 
 	return oapi.GetUsersUserIdTitles200JSONResponse(userTitles), nil

modules/backend/queries.sql

@@ -78,7 +78,10 @@ SELECT
     t.*,
     i.storage_type::text                    as title_storage_type,
     i.image_path                            as title_image_path,
-    jsonb_agg_strict(g.tag_name)'[]'::jsonb as tag_names,
+    COALESCE(
+        jsonb_agg(g.tag_names) FILTER (WHERE g.tag_names IS NOT NULL),
+        '[]'::jsonb
+    )::jsonb                                as tag_names,
     s.studio_name                           as studio_name,
     s.illust_id                             as studio_illust_id,
     s.studio_desc                           as studio_desc,
@@ -86,13 +89,13 @@ SELECT
     si.image_path                           as studio_image_path
 
 FROM titles          as t
-LEFT JOIN images     as i    ON (t.image_id = i.id)
+LEFT JOIN images     as i    ON (t.poster_id = i.id)
 LEFT JOIN title_tags as tt   ON (t.id = tt.title_id)
 LEFT JOIN tags       as g    ON (tt.tag_id = g.id)
 LEFT JOIN studios    as s    ON (t.studio_id = s.id)
 LEFT JOIN images     as si   ON (s.illust_id = si.id)
 
-WHERE id = sqlc.arg('title_id')::bigint
+WHERE t.id = sqlc.arg('title_id')::bigint
 GROUP BY 
     t.id, i.id, s.id, si.id;
 
@@ -101,7 +104,10 @@ SELECT
     t.*,
     i.storage_type::text                    as title_storage_type,
     i.image_path                            as title_image_path,
-    jsonb_agg_strict(g.tag_name)'[]'::jsonb as tag_names,
+    COALESCE(
+        jsonb_agg(g.tag_names) FILTER (WHERE g.tag_names IS NOT NULL),
+        '[]'::jsonb
+    )::jsonb                                as tag_names,
     s.studio_name                           as studio_name,
     s.illust_id                             as studio_illust_id,
     s.studio_desc                           as studio_desc,
@@ -109,7 +115,7 @@ SELECT
     si.image_path                           as studio_image_path
 
 FROM titles          as t
-LEFT JOIN images     as i    ON (t.image_id = i.id)
+LEFT JOIN images     as i    ON (t.poster_id = i.id)
 LEFT JOIN title_tags as tt   ON (t.id = tt.title_id)
 LEFT JOIN tags       as g    ON (tt.tag_id = g.id)
 LEFT JOIN studios    as s    ON (t.studio_id = s.id)
@@ -181,7 +187,13 @@ WHERE
         END
     )
 
-    AND (t.title_status::text IN (sqlc.arg('ongoing')::text, sqlc.arg('finished')::text, sqlc.arg('planned')::text))
+    AND (
+    -- Если массив пуст (NULL или []) — не фильтруем
+    cardinality(sqlc.arg('title_statuses')::text[]) = 0
+    OR
+    -- Иначе: статус есть в списке
+    t.title_status = ANY(sqlc.arg('title_statuses')::text[])
+)
     AND (sqlc.narg('rating')::float IS NULL OR t.rating >= sqlc.narg('rating')::float)
     AND (sqlc.narg('release_year')::int IS NULL OR t.release_year = sqlc.narg('release_year')::int)
     AND (sqlc.narg('release_season')::release_season_t IS NULL OR t.release_season = sqlc.narg('release_season')::release_season_t)
@@ -210,37 +222,125 @@ ORDER BY
 LIMIT COALESCE(sqlc.narg('limit')::int, 100); -- 100 is default limit
 
 -- name: SearchUserTitles :many
-SELECT 
-    *
-FROM usertitles as u
-JOIN titles as t ON (u.title_id = t.id)
-WHERE 
-    CASE 
-        WHEN sqlc.narg('word')::text IS NOT NULL THEN
-            (
-                SELECT bool_and(
-                    EXISTS (
-                        SELECT 1 
-                        FROM jsonb_each_text(t.title_names) AS t(key, val)
-                        WHERE val ILIKE pattern
-                    )
-                )
-                FROM unnest(
-                    ARRAY(
-                        SELECT '%' || trim(w) || '%'
-                        FROM unnest(string_to_array(sqlc.narg('word')::text, ' ')) AS w
-                        WHERE trim(w) <> ''
-                    )
-                ) AS pattern
-            )
-        ELSE true
+SELECT
+    t.*,
+    u.user_id                               as user_id,
+    u.status                                as usertitle_status,
+    u.rate                                  as user_rate,
+    u.review_id                             as review_id,
+    u.ctime                                 as user_ctime,
+    i.storage_type::text                    as title_storage_type,
+    i.image_path                            as title_image_path,
+    jsonb_agg(g.tag_name)'[]'::jsonb        as tag_names,
+    s.studio_name                           as studio_name,
+    s.illust_id                             as studio_illust_id,
+    s.studio_desc                           as studio_desc,
+    si.storage_type::text                   as studio_storage_type,
+    si.image_path                           as studio_image_path
+
+FROM      usertitles as u
+LEFT JOIN titles     as t    ON (u.title_id = t.id)
+LEFT JOIN images     as i    ON (t.poster_id = i.id)
+LEFT JOIN title_tags as tt   ON (t.id = tt.title_id)
+LEFT JOIN tags       as g    ON (tt.tag_id = g.id)
+LEFT JOIN studios    as s    ON (t.studio_id = s.id)
+LEFT JOIN images     as si   ON (s.illust_id = si.id)
+
+WHERE
+    CASE
+        WHEN sqlc.arg('forward')::boolean THEN
+        -- forward: greater than cursor (next page)
+            CASE sqlc.arg('sort_by')::text
+                WHEN 'year' THEN
+                    (sqlc.narg('cursor_year')::int IS NULL) OR
+                    (t.release_year > sqlc.narg('cursor_year')::int) OR
+                    (t.release_year = sqlc.narg('cursor_year')::int AND t.id > sqlc.narg('cursor_id')::bigint)
+
+                WHEN 'rating' THEN
+                        (sqlc.narg('cursor_rating')::float IS NULL) OR
+                        (t.rating > sqlc.narg('cursor_rating')::float) OR
+                        (t.rating = sqlc.narg('cursor_rating')::float AND t.id > sqlc.narg('cursor_id')::bigint)
+
+                WHEN 'id' THEN
+                    (sqlc.narg('cursor_id')::bigint IS NULL) OR
+                    (t.id > sqlc.narg('cursor_id')::bigint)
+
+                ELSE true  -- fallback
+            END
+
+    ELSE
+        -- backward: less than cursor (prev page)
+        CASE sqlc.arg('sort_by')::text
+            WHEN 'year' THEN
+                (sqlc.narg('cursor_year')::int IS NULL) OR
+                (t.release_year < sqlc.narg('cursor_year')::int) OR
+                (t.release_year = sqlc.narg('cursor_year')::int AND t.id < sqlc.narg('cursor_id')::bigint)
+
+            WHEN 'rating' THEN
+                (sqlc.narg('cursor_rating')::float IS NULL) OR
+                (t.rating < sqlc.narg('cursor_rating')::float) OR
+                (t.rating = sqlc.narg('cursor_rating')::float AND t.id < sqlc.narg('cursor_id')::bigint)
+
+            WHEN 'id' THEN
+                (sqlc.narg('cursor_id')::bigint IS NULL) OR
+                (t.id < sqlc.narg('cursor_id')::bigint)
+
+            ELSE true
+        END
     END
 
-    AND (sqlc.narg('status')::title_status_t IS NULL OR t.title_status = sqlc.narg('status')::title_status_t)
+    AND (
+        CASE 
+            WHEN sqlc.narg('word')::text IS NOT NULL THEN
+                (
+                    SELECT bool_and(
+                        EXISTS (
+                            SELECT 1 
+                            FROM jsonb_each_text(t.title_names) AS t(key, val)
+                            WHERE val ILIKE pattern
+                        )
+                    )
+                    FROM unnest(
+                        ARRAY(
+                            SELECT '%' || trim(w) || '%'
+                            FROM unnest(string_to_array(sqlc.narg('word')::text, ' ')) AS w
+                            WHERE trim(w) <> ''
+                        )
+                    ) AS pattern
+                )
+            ELSE true
+        END
+    )
+
+    AND (u.status::text IN (sqlc.arg('ongoing')::text, sqlc.arg('planned')::text, sqlc.arg('dropped')::text, sqlc.arg('in-progress')::text))
+    AND (t.title_status::text IN (sqlc.arg('ongoing')::text, sqlc.arg('finished')::text, sqlc.arg('planned')::text))
+    AND (sqlc.narg('rate')::int IS NULL OR u.rate >= sqlc.narg('rate')::int)
     AND (sqlc.narg('rating')::float IS NULL OR t.rating >= sqlc.narg('rating')::float)
     AND (sqlc.narg('release_year')::int IS NULL OR t.release_year = sqlc.narg('release_year')::int)
     AND (sqlc.narg('release_season')::release_season_t IS NULL OR t.release_season = sqlc.narg('release_season')::release_season_t)
-    AND (sqlc.narg('usertitle_status')::usertitle_status_t IS NULL OR u.usertitle_status = sqlc.narg('usertitle_status')::usertitle_status_t)
+
+GROUP BY 
+    t.id, i.id, s.id, si.id
+
+ORDER BY
+    CASE WHEN sqlc.arg('forward')::boolean THEN
+        CASE
+            WHEN sqlc.arg('sort_by')::text = 'id' THEN t.id
+            WHEN sqlc.arg('sort_by')::text = 'year' THEN t.release_year
+            WHEN sqlc.arg('sort_by')::text = 'rating' THEN t.rating
+            WHEN sqlc.arg('sort_by')::text = 'rate' THEN u.rate
+        END
+    END ASC,
+    CASE WHEN NOT sqlc.arg('forward')::boolean THEN
+        CASE
+            WHEN sqlc.arg('sort_by')::text = 'id' THEN t.id
+            WHEN sqlc.arg('sort_by')::text = 'year' THEN t.release_year
+            WHEN sqlc.arg('sort_by')::text = 'rating' THEN t.rating
+            WHEN sqlc.arg('sort_by')::text = 'rate' THEN u.rate
+        END
+    END DESC,
+
+    CASE WHEN sqlc.arg('sort_by')::text <> 'id' THEN t.id END ASC
 
 LIMIT COALESCE(sqlc.narg('limit')::int, 100); -- 100 is default limit
 

modules/frontend/package.json

@@ -10,10 +10,14 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@headlessui/react": "^2.2.9",
+    "@heroicons/react": "^2.2.0",
+    "@tailwindcss/vite": "^4.1.17",
     "axios": "^1.12.2",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
-    "react-router-dom": "^7.9.4"
+    "react-router-dom": "^7.9.4",
+    "tailwindcss": "^4.1.17"
   },
   "devDependencies": {
     "@eslint/js": "^9.36.0",

modules/frontend/src/App.css

@@ -1,42 +0,0 @@
-#root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
-}
-
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
-}
-
-.card {
-  padding: 2em;
-}
-
-.read-the-docs {
-  color: #888;
-}

modules/frontend/src/App.tsx

@@ -2,10 +2,13 @@ import React from "react";
 import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 import UserPage from "./pages/UserPage/UserPage";
 import TitlesPage from "./pages/TitlesPage/TitlesPage";
+import { Header } from "./components/Header/Header";
 
 const App: React.FC = () => {
+  const username = "nihonium";
   return (
     <Router>
+      <Header username={username} />
       <Routes>
         <Route path="/users/:id" element={<UserPage />} />
         <Route path="/titles" element={<TitlesPage />} />

modules/frontend/src/api/index.ts

@@ -8,16 +8,19 @@ export { OpenAPI } from './core/OpenAPI';
 export type { OpenAPIConfig } from './core/OpenAPI';
 
 export type { cursor } from './models/cursor';
+export type { CursorObj } from './models/CursorObj';
 export type { Image } from './models/Image';
-export { ReleaseSeason } from './models/ReleaseSeason';
+export type { ReleaseSeason } from './models/ReleaseSeason';
 export type { Review } from './models/Review';
 export type { Studio } from './models/Studio';
 export type { Tag } from './models/Tag';
 export type { Tags } from './models/Tags';
 export type { Title } from './models/Title';
-export { TitleStatus } from './models/TitleStatus';
+export type { title_sort } from './models/title_sort';
+export type { TitleSort } from './models/TitleSort';
+export type { TitleStatus } from './models/TitleStatus';
 export type { User } from './models/User';
 export type { UserTitle } from './models/UserTitle';
-export { UserTitleStatus } from './models/UserTitleStatus';
+export type { UserTitleStatus } from './models/UserTitleStatus';
 
 export { DefaultService } from './services/DefaultService';

modules/frontend/src/api/models/CursorObj.ts

@@ -2,4 +2,8 @@
 /* istanbul ignore file */
 /* tslint:disable */
 /* eslint-disable */
-export type cursor = string;
+export type CursorObj = {
+    id: number;
+    param?: string;
+};
+

modules/frontend/src/api/models/ReleaseSeason.ts

@@ -5,9 +5,4 @@
 /**
  * Title release season
  */
-export enum ReleaseSeason {
-    WINTER = 'winter',
-    SPRING = 'spring',
-    SUMMER = 'summer',
-    FALL = 'fall',
-}
+export type ReleaseSeason = 'winter' | 'spring' | 'summer' | 'fall';

modules/frontend/src/api/models/TitleSort.ts

@@ -2,8 +2,7 @@
 /* istanbul ignore file */
 /* tslint:disable */
 /* eslint-disable */
-import type { Tag } from './Tag';
 /**
- * Array of localized tags
+ * Title sort order
  */
-export type Tags = Array<Tag>;
+export type TitleSort = 'id' | 'year' | 'rating' | 'views';

modules/frontend/src/api/models/TitleStatus.ts

@@ -5,8 +5,4 @@
 /**
  * Title status
  */
-export enum TitleStatus {
-    FINISHED = 'finished',
-    ONGOING = 'ongoing',
-    PLANNED = 'planned',
-}
+export type TitleStatus = 'finished' | 'ongoing' | 'planned';

modules/frontend/src/api/models/User.ts

@@ -6,11 +6,11 @@ export type User = {
     /**
      * Unique user ID (primary key)
      */
-    id: number;
+    id?: number;
     /**
      * ID of the user avatar (references images table)
      */
-    avatar_id?: number | null;
+    avatar_id?: number;
     /**
      * User email
      */

modules/frontend/src/api/models/UserTitleStatus.ts

@@ -5,9 +5,4 @@
 /**
  * User's title status
  */
-export enum UserTitleStatus {
-    FINISHED = 'finished',
-    PLANNED = 'planned',
-    DROPPED = 'dropped',
-    IN_PROGRESS = 'in-progress',
-}
+export type UserTitleStatus = 'finished' | 'planned' | 'dropped' | 'in-progress';

modules/frontend/src/api/models/title_sort.ts

@@ -2,4 +2,5 @@
 /* istanbul ignore file */
 /* tslint:disable */
 /* eslint-disable */
-export type Title = Record<string, any>;
+import type { TitleSort } from './TitleSort';
+export type title_sort = TitleSort;

modules/frontend/src/api/services/DefaultService.ts

@@ -2,17 +2,23 @@
 /* istanbul ignore file */
 /* tslint:disable */
 /* eslint-disable */
+import type { CursorObj } from '../models/CursorObj';
 import type { ReleaseSeason } from '../models/ReleaseSeason';
 import type { Title } from '../models/Title';
+import type { TitleSort } from '../models/TitleSort';
 import type { TitleStatus } from '../models/TitleStatus';
 import type { User } from '../models/User';
 import type { UserTitle } from '../models/UserTitle';
+import type { UserTitleStatus } from '../models/UserTitleStatus';
 import type { CancelablePromise } from '../core/CancelablePromise';
 import { OpenAPI } from '../core/OpenAPI';
 import { request as __request } from '../core/request';
 export class DefaultService {
     /**
      * Get titles
+     * @param cursor
+     * @param sort
+     * @param sortForward
      * @param word
      * @param status
      * @param rating
@@ -21,10 +27,13 @@ export class DefaultService {
      * @param limit
      * @param offset
      * @param fields
-     * @returns Title List of titles
+     * @returns any List of titles with cursor
      * @throws ApiError
      */
     public static getTitles(
+        cursor?: string,
+        sort?: TitleSort,
+        sortForward: boolean = true,
         word?: string,
         status?: TitleStatus,
         rating?: number,
@@ -33,11 +42,20 @@ export class DefaultService {
         limit: number = 10,
         offset?: number,
         fields: string = 'all',
-    ): CancelablePromise<Array<Title>> {
+    ): CancelablePromise<{
+        /**
+         * List of titles
+         */
+        data: Array<Title>;
+        cursor: CursorObj;
+    }> {
         return __request(OpenAPI, {
             method: 'GET',
             url: '/titles',
             query: {
+                'cursor': cursor,
+                'sort': sort,
+                'sort_forward': sortForward,
                 'word': word,
                 'status': status,
                 'rating': rating,
@@ -111,9 +129,13 @@ export class DefaultService {
      * Get user titles
      * @param userId
      * @param cursor
-     * @param query
+     * @param word
+     * @param status
+     * @param watchStatus
+     * @param rating
+     * @param releaseYear
+     * @param releaseSeason
      * @param limit
-     * @param offset
      * @param fields
      * @returns UserTitle List of user titles
      * @throws ApiError
@@ -121,22 +143,30 @@ export class DefaultService {
     public static getUsersTitles(
         userId: string,
         cursor?: string,
-        query?: string,
+        word?: string,
+        status?: TitleStatus,
+        watchStatus?: UserTitleStatus,
+        rating?: number,
+        releaseYear?: number,
+        releaseSeason?: ReleaseSeason,
         limit: number = 10,
-        offset?: number,
         fields: string = 'all',
     ): CancelablePromise<Array<UserTitle>> {
         return __request(OpenAPI, {
             method: 'GET',
-            url: '/users/{user_id}/titles',
+            url: '/users/{user_id}/titles/',
             path: {
                 'user_id': userId,
             },
             query: {
                 'cursor': cursor,
-                'query': query,
+                'word': word,
+                'status': status,
+                'watch_status': watchStatus,
+                'rating': rating,
+                'release_year': releaseYear,
+                'release_season': releaseSeason,
                 'limit': limit,
-                'offset': offset,
                 'fields': fields,
             },
             errors: {

modules/frontend/src/api_/core/ApiError.ts

@@ -1,25 +0,0 @@
-/* generated using openapi-typescript-codegen -- do not edit */
-/* istanbul ignore file */
-/* tslint:disable */
-/* eslint-disable */
-import type { ApiRequestOptions } from './ApiRequestOptions';
-import type { ApiResult } from './ApiResult';
-
-export class ApiError extends Error {
-    public readonly url: string;
-    public readonly status: number;
-    public readonly statusText: string;
-    public readonly body: any;
-    public readonly request: ApiRequestOptions;
-
-    constructor(request: ApiRequestOptions, response: ApiResult, message: string) {
-        super(message);
-
-        this.name = 'ApiError';
-        this.url = response.url;
-        this.status = response.status;
-        this.statusText = response.statusText;
-        this.body = response.body;
-        this.request = request;
-    }
-}

modules/frontend/src/api_/core/ApiRequestOptions.ts

@@ -1,17 +0,0 @@
-/* generated using openapi-typescript-codegen -- do not edit */
-/* istanbul ignore file */
-/* tslint:disable */
-/* eslint-disable */
-export type ApiRequestOptions = {
-    readonly method: 'GET' | 'PUT' | 'POST' | 'DELETE' | 'OPTIONS' | 'HEAD' | 'PATCH';
-    readonly url: string;
-    readonly path?: Record<string, any>;
-    readonly cookies?: Record<string, any>;
-    readonly headers?: Record<string, any>;
-    readonly query?: Record<string, any>;
-    readonly formData?: Record<string, any>;
-    readonly body?: any;
-    readonly mediaType?: string;
-    readonly responseHeader?: string;
-    readonly errors?: Record<number, string>;
-};

modules/frontend/src/api_/core/ApiResult.ts

@@ -1,11 +0,0 @@
-/* generated using openapi-typescript-codegen -- do not edit */
-/* istanbul ignore file */
-/* tslint:disable */
-/* eslint-disable */
-export type ApiResult = {
-    readonly url: string;
-    readonly ok: boolean;
-    readonly status: number;
-    readonly statusText: string;
-    readonly body: any;
-};

modules/frontend/src/api_/core/CancelablePromise.ts

@@ -1,131 +0,0 @@
-/* generated using openapi-typescript-codegen -- do not edit */
-/* istanbul ignore file */
-/* tslint:disable */
-/* eslint-disable */
-export class CancelError extends Error {
-
-    constructor(message: string) {
-        super(message);
-        this.name = 'CancelError';
-    }
-
-    public get isCancelled(): boolean {
-        return true;
-    }
-}
-
-export interface OnCancel {
-    readonly isResolved: boolean;
-    readonly isRejected: boolean;
-    readonly isCancelled: boolean;
-
-    (cancelHandler: () => void): void;
-}
-
-export class CancelablePromise<T> implements Promise<T> {
-    #isResolved: boolean;
-    #isRejected: boolean;
-    #isCancelled: boolean;
-    readonly #cancelHandlers: (() => void)[];
-    readonly #promise: Promise<T>;
-    #resolve?: (value: T | PromiseLike<T>) => void;
-    #reject?: (reason?: any) => void;
-
-    constructor(
-        executor: (
-            resolve: (value: T | PromiseLike<T>) => void,
-            reject: (reason?: any) => void,
-            onCancel: OnCancel
-        ) => void
-    ) {
-        this.#isResolved = false;
-        this.#isRejected = false;
-        this.#isCancelled = false;
-        this.#cancelHandlers = [];
-        this.#promise = new Promise<T>((resolve, reject) => {
-            this.#resolve = resolve;
-            this.#reject = reject;
-
-            const onResolve = (value: T | PromiseLike<T>): void => {
-                if (this.#isResolved || this.#isRejected || this.#isCancelled) {
-                    return;
-                }
-                this.#isResolved = true;
-                if (this.#resolve) this.#resolve(value);
-            };
-
-            const onReject = (reason?: any): void => {
-                if (this.#isResolved || this.#isRejected || this.#isCancelled) {
-                    return;
-                }
-                this.#isRejected = true;
-                if (this.#reject) this.#reject(reason);
-            };
-
-            const onCancel = (cancelHandler: () => void): void => {
-                if (this.#isResolved || this.#isRejected || this.#isCancelled) {
-                    return;
-                }
-                this.#cancelHandlers.push(cancelHandler);
-            };
-
-            Object.defineProperty(onCancel, 'isResolved', {
-                get: (): boolean => this.#isResolved,
-            });
-
-            Object.defineProperty(onCancel, 'isRejected', {
-                get: (): boolean => this.#isRejected,
-            });
-
-            Object.defineProperty(onCancel, 'isCancelled', {
-                get: (): boolean => this.#isCancelled,
-            });
-
-            return executor(onResolve, onReject, onCancel as OnCancel);
-        });
-    }
-
-    get [Symbol.toStringTag]() {
-        return "Cancellable Promise";
-    }
-
-    public then<TResult1 = T, TResult2 = never>(
-        onFulfilled?: ((value: T) => TResult1 | PromiseLike<TResult1>) | null,
-        onRejected?: ((reason: any) => TResult2 | PromiseLike<TResult2>) | null
-    ): Promise<TResult1 | TResult2> {
-        return this.#promise.then(onFulfilled, onRejected);
-    }
-
-    public catch<TResult = never>(
-        onRejected?: ((reason: any) => TResult | PromiseLike<TResult>) | null
-    ): Promise<T | TResult> {
-        return this.#promise.catch(onRejected);
-    }
-
-    public finally(onFinally?: (() => void) | null): Promise<T> {
-        return this.#promise.finally(onFinally);
-    }
-
-    public cancel(): void {
-        if (this.#isResolved || this.#isRejected || this.#isCancelled) {
-            return;
-        }
-        this.#isCancelled = true;
-        if (this.#cancelHandlers.length) {
-            try {
-                for (const cancelHandler of this.#cancelHandlers) {
-                    cancelHandler();
-                }
-            } catch (error) {
-                console.warn('Cancellation threw an error', error);
-                return;
-            }
-        }
-        this.#cancelHandlers.length = 0;
-        if (this.#reject) this.#reject(new CancelError('Request aborted'));
-    }
-
-    public get isCancelled(): boolean {
-        return this.#isCancelled;
-    }
-}

modules/frontend/src/api_/core/OpenAPI.ts

@@ -1,32 +0,0 @@
-/* generated using openapi-typescript-codegen -- do not edit */
-/* istanbul ignore file */
-/* tslint:disable */
-/* eslint-disable */
-import type { ApiRequestOptions } from './ApiRequestOptions';
-
-type Resolver<T> = (options: ApiRequestOptions) => Promise<T>;
-type Headers = Record<string, string>;
-
-export type OpenAPIConfig = {
-    BASE: string;
-    VERSION: string;
-    WITH_CREDENTIALS: boolean;
-    CREDENTIALS: 'include' | 'omit' | 'same-origin';
-    TOKEN?: string | Resolver<string> | undefined;
-    USERNAME?: string | Resolver<string> | undefined;
-    PASSWORD?: string | Resolver<string> | undefined;
-    HEADERS?: Headers | Resolver<Headers> | undefined;
-    ENCODE_PATH?: ((path: string) => string) | undefined;
-};
-
-export const OpenAPI: OpenAPIConfig = {
-    BASE: '/api/v1',
-    VERSION: '1.0.0',
-    WITH_CREDENTIALS: false,
-    CREDENTIALS: 'include',
-    TOKEN: undefined,
-    USERNAME: undefined,
-    PASSWORD: undefined,
-    HEADERS: undefined,
-    ENCODE_PATH: undefined,
-};

modules/frontend/src/api_/core/request.ts

@@ -1,323 +0,0 @@
-/* generated using openapi-typescript-codegen -- do not edit */
-/* istanbul ignore file */
-/* tslint:disable */
-/* eslint-disable */
-import axios from 'axios';
-import type { AxiosError, AxiosRequestConfig, AxiosResponse, AxiosInstance } from 'axios';
-import FormData from 'form-data';
-
-import { ApiError } from './ApiError';
-import type { ApiRequestOptions } from './ApiRequestOptions';
-import type { ApiResult } from './ApiResult';
-import { CancelablePromise } from './CancelablePromise';
-import type { OnCancel } from './CancelablePromise';
-import type { OpenAPIConfig } from './OpenAPI';
-
-export const isDefined = <T>(value: T | null | undefined): value is Exclude<T, null | undefined> => {
-    return value !== undefined && value !== null;
-};
-
-export const isString = (value: any): value is string => {
-    return typeof value === 'string';
-};
-
-export const isStringWithValue = (value: any): value is string => {
-    return isString(value) && value !== '';
-};
-
-export const isBlob = (value: any): value is Blob => {
-    return (
-        typeof value === 'object' &&
-        typeof value.type === 'string' &&
-        typeof value.stream === 'function' &&
-        typeof value.arrayBuffer === 'function' &&
-        typeof value.constructor === 'function' &&
-        typeof value.constructor.name === 'string' &&
-        /^(Blob|File)$/.test(value.constructor.name) &&
-        /^(Blob|File)$/.test(value[Symbol.toStringTag])
-    );
-};
-
-export const isFormData = (value: any): value is FormData => {
-    return value instanceof FormData;
-};
-
-export const isSuccess = (status: number): boolean => {
-    return status >= 200 && status < 300;
-};
-
-export const base64 = (str: string): string => {
-    try {
-        return btoa(str);
-    } catch (err) {
-        // @ts-ignore
-        return Buffer.from(str).toString('base64');
-    }
-};
-
-export const getQueryString = (params: Record<string, any>): string => {
-    const qs: string[] = [];
-
-    const append = (key: string, value: any) => {
-        qs.push(`${encodeURIComponent(key)}=${encodeURIComponent(String(value))}`);
-    };
-
-    const process = (key: string, value: any) => {
-        if (isDefined(value)) {
-            if (Array.isArray(value)) {
-                value.forEach(v => {
-                    process(key, v);
-                });
-            } else if (typeof value === 'object') {
-                Object.entries(value).forEach(([k, v]) => {
-                    process(`${key}[${k}]`, v);
-                });
-            } else {
-                append(key, value);
-            }
-        }
-    };
-
-    Object.entries(params).forEach(([key, value]) => {
-        process(key, value);
-    });
-
-    if (qs.length > 0) {
-        return `?${qs.join('&')}`;
-    }
-
-    return '';
-};
-
-const getUrl = (config: OpenAPIConfig, options: ApiRequestOptions): string => {
-    const encoder = config.ENCODE_PATH || encodeURI;
-
-    const path = options.url
-        .replace('{api-version}', config.VERSION)
-        .replace(/{(.*?)}/g, (substring: string, group: string) => {
-            if (options.path?.hasOwnProperty(group)) {
-                return encoder(String(options.path[group]));
-            }
-            return substring;
-        });
-
-    const url = `${config.BASE}${path}`;
-    if (options.query) {
-        return `${url}${getQueryString(options.query)}`;
-    }
-    return url;
-};
-
-export const getFormData = (options: ApiRequestOptions): FormData | undefined => {
-    if (options.formData) {
-        const formData = new FormData();
-
-        const process = (key: string, value: any) => {
-            if (isString(value) || isBlob(value)) {
-                formData.append(key, value);
-            } else {
-                formData.append(key, JSON.stringify(value));
-            }
-        };
-
-        Object.entries(options.formData)
-            .filter(([_, value]) => isDefined(value))
-            .forEach(([key, value]) => {
-                if (Array.isArray(value)) {
-                    value.forEach(v => process(key, v));
-                } else {
-                    process(key, value);
-                }
-            });
-
-        return formData;
-    }
-    return undefined;
-};
-
-type Resolver<T> = (options: ApiRequestOptions) => Promise<T>;
-
-export const resolve = async <T>(options: ApiRequestOptions, resolver?: T | Resolver<T>): Promise<T | undefined> => {
-    if (typeof resolver === 'function') {
-        return (resolver as Resolver<T>)(options);
-    }
-    return resolver;
-};
-
-export const getHeaders = async (config: OpenAPIConfig, options: ApiRequestOptions, formData?: FormData): Promise<Record<string, string>> => {
-    const [token, username, password, additionalHeaders] = await Promise.all([
-        resolve(options, config.TOKEN),
-        resolve(options, config.USERNAME),
-        resolve(options, config.PASSWORD),
-        resolve(options, config.HEADERS),
-    ]);
-
-    const formHeaders = typeof formData?.getHeaders === 'function' && formData?.getHeaders() || {}
-
-    const headers = Object.entries({
-        Accept: 'application/json',
-        ...additionalHeaders,
-        ...options.headers,
-        ...formHeaders,
-    })
-    .filter(([_, value]) => isDefined(value))
-    .reduce((headers, [key, value]) => ({
-        ...headers,
-        [key]: String(value),
-    }), {} as Record<string, string>);
-
-    if (isStringWithValue(token)) {
-        headers['Authorization'] = `Bearer ${token}`;
-    }
-
-    if (isStringWithValue(username) && isStringWithValue(password)) {
-        const credentials = base64(`${username}:${password}`);
-        headers['Authorization'] = `Basic ${credentials}`;
-    }
-
-    if (options.body !== undefined) {
-        if (options.mediaType) {
-            headers['Content-Type'] = options.mediaType;
-        } else if (isBlob(options.body)) {
-            headers['Content-Type'] = options.body.type || 'application/octet-stream';
-        } else if (isString(options.body)) {
-            headers['Content-Type'] = 'text/plain';
-        } else if (!isFormData(options.body)) {
-            headers['Content-Type'] = 'application/json';
-        }
-    }
-
-    return headers;
-};
-
-export const getRequestBody = (options: ApiRequestOptions): any => {
-    if (options.body) {
-        return options.body;
-    }
-    return undefined;
-};
-
-export const sendRequest = async <T>(
-    config: OpenAPIConfig,
-    options: ApiRequestOptions,
-    url: string,
-    body: any,
-    formData: FormData | undefined,
-    headers: Record<string, string>,
-    onCancel: OnCancel,
-    axiosClient: AxiosInstance
-): Promise<AxiosResponse<T>> => {
-    const source = axios.CancelToken.source();
-
-    const requestConfig: AxiosRequestConfig = {
-        url,
-        headers,
-        data: body ?? formData,
-        method: options.method,
-        withCredentials: config.WITH_CREDENTIALS,
-        withXSRFToken: config.CREDENTIALS === 'include' ? config.WITH_CREDENTIALS : false,
-        cancelToken: source.token,
-    };
-
-    onCancel(() => source.cancel('The user aborted a request.'));
-
-    try {
-        return await axiosClient.request(requestConfig);
-    } catch (error) {
-        const axiosError = error as AxiosError<T>;
-        if (axiosError.response) {
-            return axiosError.response;
-        }
-        throw error;
-    }
-};
-
-export const getResponseHeader = (response: AxiosResponse<any>, responseHeader?: string): string | undefined => {
-    if (responseHeader) {
-        const content = response.headers[responseHeader];
-        if (isString(content)) {
-            return content;
-        }
-    }
-    return undefined;
-};
-
-export const getResponseBody = (response: AxiosResponse<any>): any => {
-    if (response.status !== 204) {
-        return response.data;
-    }
-    return undefined;
-};
-
-export const catchErrorCodes = (options: ApiRequestOptions, result: ApiResult): void => {
-    const errors: Record<number, string> = {
-        400: 'Bad Request',
-        401: 'Unauthorized',
-        403: 'Forbidden',
-        404: 'Not Found',
-        500: 'Internal Server Error',
-        502: 'Bad Gateway',
-        503: 'Service Unavailable',
-        ...options.errors,
-    }
-
-    const error = errors[result.status];
-    if (error) {
-        throw new ApiError(options, result, error);
-    }
-
-    if (!result.ok) {
-        const errorStatus = result.status ?? 'unknown';
-        const errorStatusText = result.statusText ?? 'unknown';
-        const errorBody = (() => {
-            try {
-                return JSON.stringify(result.body, null, 2);
-            } catch (e) {
-                return undefined;
-            }
-        })();
-
-        throw new ApiError(options, result,
-            `Generic Error: status: ${errorStatus}; status text: ${errorStatusText}; body: ${errorBody}`
-        );
-    }
-};
-
-/**
- * Request method
- * @param config The OpenAPI configuration object
- * @param options The request options from the service
- * @param axiosClient The axios client instance to use
- * @returns CancelablePromise<T>
- * @throws ApiError
- */
-export const request = <T>(config: OpenAPIConfig, options: ApiRequestOptions, axiosClient: AxiosInstance = axios): CancelablePromise<T> => {
-    return new CancelablePromise(async (resolve, reject, onCancel) => {
-        try {
-            const url = getUrl(config, options);
-            const formData = getFormData(options);
-            const body = getRequestBody(options);
-            const headers = await getHeaders(config, options, formData);
-
-            if (!onCancel.isCancelled) {
-                const response = await sendRequest<T>(config, options, url, body, formData, headers, onCancel, axiosClient);
-                const responseBody = getResponseBody(response);
-                const responseHeader = getResponseHeader(response, options.responseHeader);
-
-                const result: ApiResult = {
-                    url,
-                    ok: isSuccess(response.status),
-                    status: response.status,
-                    statusText: response.statusText,
-                    body: responseHeader ?? responseBody,
-                };
-
-                catchErrorCodes(options, result);
-
-                resolve(result.body);
-            }
-        } catch (error) {
-            reject(error);
-        }
-    });
-};

modules/frontend/src/api_/index.ts

@@ -1,23 +0,0 @@
-/* generated using openapi-typescript-codegen -- do not edit */
-/* istanbul ignore file */
-/* tslint:disable */
-/* eslint-disable */
-export { ApiError } from './core/ApiError';
-export { CancelablePromise, CancelError } from './core/CancelablePromise';
-export { OpenAPI } from './core/OpenAPI';
-export type { OpenAPIConfig } from './core/OpenAPI';
-
-export type { cursor } from './models/cursor';
-export type { Image } from './models/Image';
-export { ReleaseSeason } from './models/ReleaseSeason';
-export type { Review } from './models/Review';
-export type { Studio } from './models/Studio';
-export type { Tag } from './models/Tag';
-export type { Tags } from './models/Tags';
-export type { Title } from './models/Title';
-export { TitleStatus } from './models/TitleStatus';
-export type { User } from './models/User';
-export type { UserTitle } from './models/UserTitle';
-export { UserTitleStatus } from './models/UserTitleStatus';
-
-export { DefaultService } from './services/DefaultService';

modules/frontend/src/api_/models/Image.ts

@@ -1,10 +0,0 @@
-/* generated using openapi-typescript-codegen -- do not edit */
-/* istanbul ignore file */
-/* tslint:disable */
-/* eslint-disable */
-export type Image = {
-    id?: number;
-    storage_type?: string;
-    image_path?: string;
-};
-

modules/frontend/src/api_/models/ReleaseSeason.ts

@@ -1,13 +0,0 @@
-/* generated using openapi-typescript-codegen -- do not edit */
-/* istanbul ignore file */
-/* tslint:disable */
-/* eslint-disable */
-/**
- * Title release season
- */
-export enum ReleaseSeason {
-    WINTER = 'winter',
-    SPRING = 'spring',
-    SUMMER = 'summer',
-    FALL = 'fall',
-}

modules/frontend/src/api_/models/Review.ts

@@ -1,5 +0,0 @@
-/* generated using openapi-typescript-codegen -- do not edit */
-/* istanbul ignore file */
-/* tslint:disable */
-/* eslint-disable */
-export type Review = Record<string, any>;

modules/frontend/src/api_/models/Studio.ts

@@ -1,12 +0,0 @@
-/* generated using openapi-typescript-codegen -- do not edit */
-/* istanbul ignore file */
-/* tslint:disable */
-/* eslint-disable */
-import type { Image } from './Image';
-export type Studio = {
-    id: number;
-    name: string;
-    poster?: Image;
-    description?: string;
-};
-

modules/frontend/src/api_/models/Tag.ts

@@ -1,8 +0,0 @@
-/* generated using openapi-typescript-codegen -- do not edit */
-/* istanbul ignore file */
-/* tslint:disable */
-/* eslint-disable */
-/**
- * A localized tag: keys are language codes (ISO 639-1), values are tag names
- */
-export type Tag = Record<string, string>;

modules/frontend/src/api_/models/TitleStatus.ts

@@ -1,12 +0,0 @@
-/* generated using openapi-typescript-codegen -- do not edit */
-/* istanbul ignore file */
-/* tslint:disable */
-/* eslint-disable */
-/**
- * Title status
- */
-export enum TitleStatus {
-    FINISHED = 'finished',
-    ONGOING = 'ongoing',
-    PLANNED = 'planned',
-}

modules/frontend/src/api_/models/User.ts

@@ -1,35 +0,0 @@
-/* generated using openapi-typescript-codegen -- do not edit */
-/* istanbul ignore file */
-/* tslint:disable */
-/* eslint-disable */
-export type User = {
-    /**
-     * Unique user ID (primary key)
-     */
-    id: number;
-    /**
-     * ID of the user avatar (references images table)
-     */
-    avatar_id?: number | null;
-    /**
-     * User email
-     */
-    mail?: string;
-    /**
-     * Username (alphanumeric + _ or -)
-     */
-    nickname: string;
-    /**
-     * Display name
-     */
-    disp_name?: string;
-    /**
-     * User description
-     */
-    user_desc?: string;
-    /**
-     * Timestamp when the user was created
-     */
-    creation_date?: string;
-};
-

modules/frontend/src/api_/models/UserTitle.ts

@@ -1,5 +0,0 @@
-/* generated using openapi-typescript-codegen -- do not edit */
-/* istanbul ignore file */
-/* tslint:disable */
-/* eslint-disable */
-export type UserTitle = Record<string, any>;

modules/frontend/src/api_/models/UserTitleStatus.ts

@@ -1,13 +0,0 @@
-/* generated using openapi-typescript-codegen -- do not edit */
-/* istanbul ignore file */
-/* tslint:disable */
-/* eslint-disable */
-/**
- * User's title status
- */
-export enum UserTitleStatus {
-    FINISHED = 'finished',
-    PLANNED = 'planned',
-    DROPPED = 'dropped',
-    IN_PROGRESS = 'in-progress',
-}

modules/frontend/src/api_/services/DefaultService.ts

@@ -1,148 +0,0 @@
-/* generated using openapi-typescript-codegen -- do not edit */
-/* istanbul ignore file */
-/* tslint:disable */
-/* eslint-disable */
-import type { ReleaseSeason } from '../models/ReleaseSeason';
-import type { Title } from '../models/Title';
-import type { TitleStatus } from '../models/TitleStatus';
-import type { User } from '../models/User';
-import type { UserTitle } from '../models/UserTitle';
-import type { CancelablePromise } from '../core/CancelablePromise';
-import { OpenAPI } from '../core/OpenAPI';
-import { request as __request } from '../core/request';
-export class DefaultService {
-    /**
-     * Get titles
-     * @param word
-     * @param status
-     * @param rating
-     * @param releaseYear
-     * @param releaseSeason
-     * @param limit
-     * @param offset
-     * @param fields
-     * @returns Title List of titles
-     * @throws ApiError
-     */
-    public static getTitles(
-        word?: string,
-        status?: TitleStatus,
-        rating?: number,
-        releaseYear?: number,
-        releaseSeason?: ReleaseSeason,
-        limit: number = 10,
-        offset?: number,
-        fields: string = 'all',
-    ): CancelablePromise<Array<Title>> {
-        return __request(OpenAPI, {
-            method: 'GET',
-            url: '/titles',
-            query: {
-                'word': word,
-                'status': status,
-                'rating': rating,
-                'release_year': releaseYear,
-                'release_season': releaseSeason,
-                'limit': limit,
-                'offset': offset,
-                'fields': fields,
-            },
-            errors: {
-                400: `Request params are not correct`,
-                500: `Unknown server error`,
-            },
-        });
-    }
-    /**
-     * Get title description
-     * @param titleId
-     * @param fields
-     * @returns Title Title description
-     * @throws ApiError
-     */
-    public static getTitles1(
-        titleId: number,
-        fields: string = 'all',
-    ): CancelablePromise<Title> {
-        return __request(OpenAPI, {
-            method: 'GET',
-            url: '/titles/{title_id}',
-            path: {
-                'title_id': titleId,
-            },
-            query: {
-                'fields': fields,
-            },
-            errors: {
-                400: `Request params are not correct`,
-                404: `Title not found`,
-                500: `Unknown server error`,
-            },
-        });
-    }
-    /**
-     * Get user info
-     * @param userId
-     * @param fields
-     * @returns User User info
-     * @throws ApiError
-     */
-    public static getUsers(
-        userId: string,
-        fields: string = 'all',
-    ): CancelablePromise<User> {
-        return __request(OpenAPI, {
-            method: 'GET',
-            url: '/users/{user_id}',
-            path: {
-                'user_id': userId,
-            },
-            query: {
-                'fields': fields,
-            },
-            errors: {
-                400: `Request params are not correct`,
-                404: `User not found`,
-                500: `Unknown server error`,
-            },
-        });
-    }
-    /**
-     * Get user titles
-     * @param userId
-     * @param cursor
-     * @param query
-     * @param limit
-     * @param offset
-     * @param fields
-     * @returns UserTitle List of user titles
-     * @throws ApiError
-     */
-    public static getUsersTitles(
-        userId: string,
-        cursor?: string,
-        query?: string,
-        limit: number = 10,
-        offset?: number,
-        fields: string = 'all',
-    ): CancelablePromise<Array<UserTitle>> {
-        return __request(OpenAPI, {
-            method: 'GET',
-            url: '/users/{user_id}/titles',
-            path: {
-                'user_id': userId,
-            },
-            query: {
-                'cursor': cursor,
-                'query': query,
-                'limit': limit,
-                'offset': offset,
-                'fields': fields,
-            },
-            errors: {
-                400: `Request params are not correct`,
-                500: `Unknown server error`,
-            },
-        });
-    }
-}

modules/frontend/src/components/Header/Header.tsx

@@ -0,0 +1,90 @@
+import React, { useState } from "react";
+import { Link } from "react-router-dom";
+import { Bars3Icon, XMarkIcon } from "@heroicons/react/24/solid";
+
+type HeaderProps = {
+  username?: string;
+};
+
+export const Header: React.FC<HeaderProps> = ({ username }) => {
+  const [menuOpen, setMenuOpen] = useState(false);
+
+  const toggleMenu = () => setMenuOpen(!menuOpen);
+
+  return (
+    <header className="w-full bg-white shadow-md fixed 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">
+
+          {/* Левый блок — логотип / название */}
+          <div className="flex-shrink-0">
+            <Link to="/" className="text-xl font-bold text-gray-800 hover:text-blue-600">
+              NyanimeDB
+            </Link>
+          </div>
+
+          {/* Центр — ссылки на разделы (desktop) */}
+          <nav className="hidden md:flex space-x-4">
+            <Link to="/titles" className="text-gray-700 hover:text-blue-600">
+              Titles
+            </Link>
+            <Link to="/users" className="text-gray-700 hover:text-blue-600">
+              Users
+            </Link>
+            <Link to="/about" className="text-gray-700 hover:text-blue-600">
+              About
+            </Link>
+          </nav>
+
+          {/* Правый блок — профиль */}
+          <div className="hidden md:flex items-center space-x-4">
+            {username ? (
+              <Link to="/profile" className="text-gray-700 hover:text-blue-600 font-medium">
+                {username}
+              </Link>
+            ) : (
+              <Link to="/login" className="text-gray-700 hover:text-blue-600 font-medium">
+                Login
+              </Link>
+            )}
+          </div>
+
+          {/* Бургер для мобильного */}
+          <div className="md:hidden flex items-center">
+            <button
+              onClick={toggleMenu}
+              className="p-2 rounded-md hover:bg-gray-200 transition"
+            >
+              {menuOpen ? (
+                <XMarkIcon className="w-6 h-6 text-gray-800" />
+              ) : (
+                <Bars3Icon className="w-6 h-6 text-gray-800" />
+              )}
+            </button>
+          </div>
+
+        </div>
+      </div>
+
+      {/* Мобильное меню */}
+      {menuOpen && (
+        <div className="md:hidden bg-white border-t border-gray-200 shadow-md">
+          <nav className="flex flex-col p-4 space-y-2">
+            <Link to="/titles" className="text-gray-700 hover:text-blue-600" onClick={() => setMenuOpen(false)}>Titles</Link>
+            <Link to="/users" className="text-gray-700 hover:text-blue-600" onClick={() => setMenuOpen(false)}>Users</Link>
+            <Link to="/about" className="text-gray-700 hover:text-blue-600" onClick={() => setMenuOpen(false)}>About</Link>
+            {username ? (
+              <Link to="/profile" className="text-gray-700 hover:text-blue-600 font-medium" onClick={() => setMenuOpen(false)}>
+                {username}
+              </Link>
+            ) : (
+              <Link to="/login" className="text-gray-700 hover:text-blue-600 font-medium" onClick={() => setMenuOpen(false)}>
+                Login
+              </Link>
+            )}
+          </nav>
+        </div>
+      )}
+    </header>
+  );
+};

modules/frontend/src/components/LayoutSwitch/LayoutSwitch.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import { Squares2X2Icon, Bars3Icon } from "@heroicons/react/24/solid";
+
+export type LayoutSwitchProps = {
+  layout: "square" | "horizontal"
+  setLayout: (value: React.SetStateAction<"square" | "horizontal">) => void
+};
+
+export function LayoutSwitch({
+    layout,
+    setLayout
+}: LayoutSwitchProps) {
+
+  return (
+      <div className="flex justify-end">
+        <button
+          className="p-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition"
+          onClick={() =>
+            setLayout(prev => (prev === "square" ? "horizontal" : "square"))
+          }>
+          {layout === "square"
+            ? <Squares2X2Icon className="w-6 h-6" />
+            : <Bars3Icon className="w-6 h-6" />
+          }
+        </button>
+      </div>
+  );
+}

modules/frontend/src/components/ListView/ListView.tsx

@@ -1,52 +1,48 @@
 import React from "react";
 
-interface ListViewProps<TItem> {
-  hook: ReturnType<typeof import("./useListView.tsx").useListView<TItem>>;
-  renderHorizontal: (item: TItem) => React.ReactNode;
-  renderSquare: (item: TItem) => React.ReactNode;
-}
+export type ListViewProps<T> = {
+  items: T[];
+  layout:  "square" | "horizontal";
+  renderItem: (item: T, layout: "square" | "horizontal") => React.ReactNode;
+  onLoadMore: () => void;
+  hasMore: boolean;
+  loadingMore: boolean;
+};
 
-export function ListView<TItem>({
-  hook,
-  renderHorizontal,
-  renderSquare
-}: ListViewProps<TItem>) {
-  const { items, search, setSearch, viewMode, setViewMode, loadMore, hasMore } = hook;
+export function ListView<T>({
+  items,
+  layout,
+  renderItem,
+  onLoadMore,
+  hasMore,
+  loadingMore
+}: ListViewProps<T>) {
 
   return (
-    <div>
-      {/* Search + Layout Switcher */}
-      <div style={{ display: "flex", gap: 8, marginBottom: 16 }}>
-        <input
-          placeholder="Search..."
-          value={search}
-          onChange={e => setSearch(e.target.value)}
-        />
-
-        <button onClick={() => setViewMode("horizontal")}>Horizontal</button>
-        <button onClick={() => setViewMode("square")}>Square</button>
-      </div>
-
+    <div className="w-full flex flex-col items-center">
       {/* Items */}
       <div
-        style={{
-          display: "grid",
-          gridTemplateColumns: viewMode === "square" ? "repeat(auto-fill, 160px)" : "1fr",
-          gap: 12
-        }}
+        className={`w-full sm:w-4/5 grid gap-6 ${
+          layout === "square"
+            ? "grid-cols-1 sm:grid-cols-2 lg:grid-cols-4"
+            : "grid-cols-1"
+        }`}
       >
-        {items.map(item =>
-          viewMode === "horizontal"
-            ? renderHorizontal(item)
-            : renderSquare(item)
-        )}
+        {items.map(item => renderItem(item, layout))}
       </div>
 
+      {/* Load More */}
       {hasMore && (
-        <button onClick={loadMore} style={{ marginTop: 16 }}>
-          Load More
-        </button>
+        <div className="mt-8">
+          <button
+            className="px-6 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition disabled:opacity-50"
+            disabled={loadingMore}
+            onClick={onLoadMore}
+          >
+            {loadingMore ? "Loading..." : "Load More"}
+          </button>
+        </div>
       )}
     </div>
   );
-}
+}

modules/frontend/src/components/ListView/useListView.tsx

@@ -1,37 +0,0 @@
-import { useState, useEffect } from "react";
-import type { FetchFunction } from "../../types/list";
-
-export function useListView<TItem>(fetchFn: FetchFunction<TItem>) {
-  const [items, setItems] = useState<TItem[]>([]);
-  const [cursor, setCursor] = useState<string | undefined>();
-  const [search, setSearch] = useState("");
-  const [viewMode, setViewMode] = useState<"horizontal" | "square">("horizontal");
-  const [isLoading, setIsLoading] = useState(false);
-
-  useEffect(() => {
-    loadItems(true);
-  }, [search]);
-
-  const loadItems = async (reset = false) => {
-    setIsLoading(true);
-    const result = await fetchFn({
-      search,
-      cursor: reset ? undefined : cursor,
-    });
-
-    setItems(prev => reset ? result.items : [...prev, ...result.items]);
-    setCursor(result.nextCursor);
-    setIsLoading(false);
-  };
-
-  return {
-    items,
-    search,
-    setSearch,
-    viewMode,
-    setViewMode,
-    loadMore: () => loadItems(),
-    hasMore: Boolean(cursor),
-    isLoading,
-  };
-}

modules/frontend/src/components/SearchBar/SearchBar.tsx

@@ -0,0 +1,34 @@
+type SearchBarProps = {
+  placeholder?: string;
+  search: string;
+  setSearch: (value: string) => void;
+};
+
+export function SearchBar({
+  placeholder = "Search...",
+  search,
+  setSearch,
+}: SearchBarProps) {
+  return (
+    <div className="w-full">
+      <input
+        type="text"
+        value={search}
+        placeholder={placeholder}
+        onChange={(e) => setSearch(e.target.value)}
+        className="
+          w-full 
+          px-4 
+          py-2 
+          border 
+          border-gray-300 
+          rounded-lg 
+          focus:outline-none 
+          focus:ring-2 
+          focus:ring-blue-500 
+          text-black
+        "
+      />
+    </div>
+  );
+}

modules/frontend/src/components/TitlesSortBox/TitlesSortBox.tsx

@@ -0,0 +1,67 @@
+import { useState } from "react";
+import type { TitleSort } from "../../api";
+import { ChevronDownIcon, ArrowUpIcon, ArrowDownIcon } from "@heroicons/react/24/solid";
+
+type TitlesSortBoxProps = {
+  sort: TitleSort;
+  setSort: (value: TitleSort) => void;
+  sortForward: boolean;
+  setSortForward: (value: boolean) => void;
+};
+
+const SORT_OPTIONS: TitleSort[] = ["id", "rating", "year", "views"];
+
+export function TitlesSortBox({
+  sort,
+  setSort,
+  sortForward,
+  setSortForward,
+}: TitlesSortBoxProps) {
+  const [open, setOpen] = useState(false);
+
+  const toggleSortDirection = () => setSortForward(!sortForward);
+  const handleSortSelect = (newSort: TitleSort) => {
+    setSort(newSort);
+    setOpen(false);
+  };
+
+  return (
+    <div className="inline-flex relative z-50">
+      {/* Левая часть — смена направления */}
+      <button
+        onClick={toggleSortDirection}
+        className="px-4 py-2 flex items-center justify-center bg-gray-100 hover:bg-gray-200 border border-gray-300 rounded-l-lg transition"
+      >
+        {sortForward ? <ArrowUpIcon className="w-4 h-4 mr-1" /> : <ArrowDownIcon className="w-4 h-4 mr-1" />}
+        <span className="text-sm font-medium">Order</span>
+      </button>
+
+      {/* Правая часть — выбор параметра */}
+      <button
+        onClick={() => setOpen(!open)}
+        className="px-4 py-2 flex items-center justify-center bg-gray-100 hover:bg-gray-200 border border-gray-300 border-l-0 rounded-r-lg transition"
+      >
+        <span className="text-sm font-medium">{sort}</span>
+        <ChevronDownIcon className="w-4 h-4 ml-1" />
+      </button>
+
+      {/* Dropdown */}
+      {open && (
+        <ul className="absolute top-full left-0 mt-1 w-40 bg-white border border-gray-300 rounded-md shadow-lg z-[1000]">
+          {SORT_OPTIONS.map(option => (
+            <li key={option}>
+              <button
+                className={`w-full text-left px-4 py-2 hover:bg-gray-100 transition ${
+                  option === sort ? "font-bold bg-gray-100" : ""
+                }`}
+                onClick={() => handleSortSelect(option)}
+              >
+                {option}
+              </button>
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  );
+}

modules/frontend/src/components/cards/TitleCardHorizontal.tsx

@@ -9,13 +9,13 @@ export function TitleCardHorizontal({ title }: { title: Title }) {
       border: "1px solid #ddd",
       borderRadius: 8
     }}>
-      {title.posterUrl && (
-        <img src={title.posterUrl} width={80} />
+      {title.poster?.image_path && (
+        <img src={title.poster.image_path} width={80} />
       )}
       <div>
-        <h3>{title.name}</h3>
-        <p>{title.year} · {title.season} · Rating: {title.rating}</p>
-        <p>Status: {title.status}</p>
+        <h3>{title.title_names["en"]}</h3>
+        <p>{title.release_year} · {title.release_season} · Rating: {title.rating}</p>
+        <p>Status: {title.title_status}</p>
       </div>
     </div>
   );

modules/frontend/src/components/cards/TitleCardSquare.tsx

@@ -10,12 +10,12 @@ export function TitleCardSquare({ title }: { title: Title }) {
       borderRadius: 8,
       textAlign: "center"
     }}>
-      {title.posterUrl && (
-        <img src={title.posterUrl} width={140} />
+      {title.poster?.image_path && (
+        <img src={title.poster.image_path} width={140} />
       )}
       <div>
-        <h4>{title.name}</h4>
-        <small>{title.year} • {title.rating}</small>
+        <h4>{title.title_names["en"]}</h4>
+        <small>{title.release_year} • {title.rating}</small>
       </div>
     </div>
   );

modules/frontend/src/index.css

@@ -1,68 +1,9 @@
-:root {
-  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
+@import "tailwindcss";
 
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
-body {
+html, body, #root {
   margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
-}
+  padding: 0;
+  width: 100%;
+  height: 100%;
+  @apply text-black bg-white;
+}

modules/frontend/src/pages/TitlesPage/TitlesPage.module.css

@@ -1,59 +1 @@
-.container {
-  padding: 24px;
-}
-
-.header {
-  display: flex;
-  justify-content: space-between;
-  margin-bottom: 16px;
-}
-
-.searchInput {
-  padding: 8px;
-  width: 240px;
-}
-
-.list {
-  display: grid;
-  gap: 12px;
-}
-
-.card {
-  display: flex;
-  padding: 10px;
-  border: 1px solid #ddd;
-  border-radius: 8px;
-  gap: 12px;
-}
-
-.poster {
-  width: 80px;
-  height: 120px;
-  object-fit: cover;
-  border-radius: 4px;
-}
-
-.posterPlaceholder {
-  width: 80px;
-  height: 120px;
-  background: #eee;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.cardInfo {
-  display: flex;
-  flex-direction: column;
-}
-
-.loadMore {
-  margin-top: 16px;
-  padding: 8px 16px;
-}
-
-.loader,
-.error {
-  padding: 20px;
-  text-align: center;
-}
+@import "tailwindcss";

modules/frontend/src/pages/TitlesPage/TitlesPage.tsx

@@ -1,114 +1,154 @@
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
+import { ListView } from "../../components/ListView/ListView";
+import { SearchBar } from "../../components/SearchBar/SearchBar";
+import { TitlesSortBox } from "../../components/TitlesSortBox/TitlesSortBox";
 import { DefaultService } from "../../api/services/DefaultService";
-import type { Title } from "../../api/models/Title";
-import styles from "./TitlesPage.module.css";
+import { TitleCardSquare } from "../../components/cards/TitleCardSquare";
+import { TitleCardHorizontal } from "../../components/cards/TitleCardHorizontal";
+import type { CursorObj, Title, TitleSort } from "../../api";
+import { LayoutSwitch } from "../../components/LayoutSwitch/LayoutSwitch";
 
-const LIMIT = 20;
+const PAGE_SIZE = 10;
 
-const TitlesPage: React.FC = () => {
+export default function TitlesPage() {
   const [titles, setTitles] = useState<Title[]>([]);
+  const [nextPage, setNextPage] = useState<Title[]>([]);
+  const [cursor, setCursor] = useState<CursorObj | null>(null);
   const [search, setSearch] = useState("");
-  const [offset, setOffset] = useState(0);
-
   const [loading, setLoading] = useState(true);
   const [loadingMore, setLoadingMore] = useState(false);
-  const [error, setError] = useState<string | null>(null);
+  const [sort, setSort] = useState<TitleSort>("id");
+  const [sortForward, setSortForward] = useState(true);
+  const [layout, setLayout] = useState<"square" | "horizontal">("square");
+
+  const fetchPage = async (cursorObj: CursorObj | null) => {
+    const cursorStr = cursorObj ? btoa(JSON.stringify(cursorObj)).replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '') : "";
 
-  const fetchTitles = async (reset: boolean) => {
     try {
-      if (reset) {
-        setLoading(true);
-        setOffset(0);
-      } else {
-        setLoadingMore(true);
-      }
-
       const result = await DefaultService.getTitles(
-        search || undefined,
-        undefined,  // status
-        undefined,  // rating
-        undefined,  // release_year
-        undefined,  // release_season
-        LIMIT,
-        reset ? 0 : offset,
+        cursorStr,
+        sort,
+        sortForward,
+        search.trim() || undefined,
+        undefined,
+        undefined,
+        undefined,
+        undefined,
+        PAGE_SIZE,
+        undefined,
         "all"
       );
 
-      if (reset) {
-        setTitles(result);
-      } else {
-        setTitles(prev => [...prev, ...result]);
+      if ((result === undefined) || !result.data?.length) {
+        return { items: [], nextCursor: null };
       }
-
-      if (result.length > 0) {
-        setOffset(prev => prev + LIMIT);
+      return {
+        items: result.data ?? [],
+        nextCursor: result.cursor ?? null
+      };
+    } catch (err: any) {
+      if (err.status === 204) {
+        return { items: [], nextCursor: null };
       }
-
-    } catch (err) {
-      console.error(err);
-      setError("Failed to fetch titles.");
-    } finally {
-      setLoading(false);
-      setLoadingMore(false);
+      throw err;
     }
   };
 
+  // Инициализация: загружаем сразу две страницы
   useEffect(() => {
-    fetchTitles(true);
-  }, [search]);
+    const initLoad = async () => {
+      setLoading(true);
+      setTitles([]);
+      setNextPage([]);
+      setCursor(null);
+
+      const firstPage = await fetchPage(null);
+      const secondPage = firstPage.nextCursor ? await fetchPage(firstPage.nextCursor) : { items: [], nextCursor: null };
+
+      setTitles(firstPage.items);
+      setNextPage(secondPage.items);
+      setCursor(secondPage.nextCursor);
+      setLoading(false);
+    };
+
+    initLoad();
+  }, [search, sort, sortForward]);
+
+
+const handleLoadMore = async () => {
+  if (nextPage.length === 0) {
+    setLoadingMore(false);
+    return;
+  }
+
+  setLoadingMore(true);
+
+  setTitles(prev => [...prev, ...nextPage]);
+  setNextPage([]);
+
+  // Подгружаем следующую страницу с сервера
+  if (cursor) {
+    try {
+      const next = await fetchPage(cursor);
+      if (next.items.length > 0) {
+        setNextPage(next.items);
+      }
+      setCursor(next.nextCursor);
+    } catch (err) {
+      console.error(err);
+    }
+  }
+
+  // Любой сценарий – выключаем loadingMore
+  setLoadingMore(false);
+};
+
 
-  if (loading) return <div className={styles.loader}>Loading...</div>;
-  if (error) return <div className={styles.error}>{error}</div>;
 
   return (
-    <div className={styles.container}>
-      <div className={styles.header}>
-        <h1>Titles</h1>
+    <div className="w-full min-h-screen bg-gray-50 p-6 flex flex-col items-center">
 
-        <input
-          className={styles.searchInput}
-          placeholder="Search titles..."
-          value={search}
-          onChange={e => setSearch(e.target.value)}
+      <h1 className="text-4xl font-bold mb-6 text-center text-black">Titles</h1>
+
+      <div className="w-full sm:w-4/5 flex flex-col sm:flex-row gap-4 mb-6 items-center">
+        <SearchBar placeholder="Search titles..." search={search} setSearch={setSearch} />
+        <LayoutSwitch layout={layout} setLayout={setLayout} />
+        <TitlesSortBox
+          sort={sort}
+          setSort={setSort}
+          sortForward={sortForward}
+          setSortForward={setSortForward}
         />
       </div>
 
-      <div className={styles.list}>
-        {titles.map((t) => (
-          <div key={t.id} className={styles.card}>
-            {t.poster_id ? (
-              <img
-                src={`/images/${t.poster_id}.png`}
-                alt="Poster"
-                className={styles.poster}
-              />
-            ) : (
-              <div className={styles.posterPlaceholder}>No Image</div>
-            )}
+      {loading && <div className="mt-20 font-medium text-black">Loading...</div>}
 
-            <div className={styles.cardInfo}>
-              <h3 className={styles.titleName}>{t.name}</h3>
-              <p className={styles.meta}>
-                {t.release_year} • {t.release_season}
-              </p>
-              <p className={styles.rating}>Rating: {t.rating}</p>
-              <p className={styles.status}>{t.status}</p>
-            </div>
-          </div>
-        ))}
-      </div>
+      {!loading && titles.length === 0 && (
+        <div className="mt-20 font-medium text-black">No titles found.</div>
+      )}
 
       {titles.length > 0 && (
-        <button
-          className={styles.loadMore}
-          onClick={() => fetchTitles(false)}
-          disabled={loadingMore}
-        >
-          {loadingMore ? "Loading..." : "Load More"}
-        </button>
+        <>
+          <ListView<Title>
+            items={titles}
+            layout={layout}
+            hasMore={!!cursor || nextPage.length > 1}
+            loadingMore={loadingMore}
+            onLoadMore={handleLoadMore}
+            renderItem={(title, layout) =>
+              layout === "square"
+                ? <TitleCardSquare title={title} />
+                : <TitleCardHorizontal title={title} />
+            }
+          />
+
+          {!cursor && nextPage.length == 0 && (
+            <div className="mt-6 font-medium text-black">
+              Результатов больше нет, было найдено {titles.length} тайтлов.
+            </div>
+          )}
+        </>
       )}
     </div>
   );
-};
-
-export default TitlesPage;
+}

modules/frontend/vite.config.ts

@@ -1,11 +1,15 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
+import tailwindcss from '@tailwindcss/vite'
 
 // https://vite.dev/config/
 export default defineConfig({
-  plugins: [react()],
+  plugins: [
+    react(), 
+    tailwindcss()
+  ],
   server: {
-    host: '127.0.0.1',
+    host: '0.0.0.0',
     port: 8083,
   },
 })

sql/models.go

@@ -6,6 +6,7 @@ package sqlc
 
 import (
 	"database/sql/driver"
+	"encoding/json"
 	"fmt"
 	"time"
 
@@ -223,11 +224,11 @@ type ReviewImage struct {
 }
 
 type Signal struct {
-	ID         int64  `json:"id"`
-	TitleID    *int64 `json:"title_id"`
-	RawData    []byte `json:"raw_data"`
-	ProviderID int64  `json:"provider_id"`
-	Pending    bool   `json:"pending"`
+	ID         int64           `json:"id"`
+	TitleID    *int64          `json:"title_id"`
+	RawData    json.RawMessage `json:"raw_data"`
+	ProviderID int64           `json:"provider_id"`
+	Pending    bool            `json:"pending"`
 }
 
 type Studio struct {
@@ -238,13 +239,13 @@ type Studio struct {
 }
 
 type Tag struct {
-	ID       int64  `json:"id"`
-	TagNames []byte `json:"tag_names"`
+	ID       int64           `json:"id"`
+	TagNames json.RawMessage `json:"tag_names"`
 }
 
 type Title struct {
 	ID            int64           `json:"id"`
-	TitleNames    []byte          `json:"title_names"`
+	TitleNames    json.RawMessage `json:"title_names"`
 	StudioID      int64           `json:"studio_id"`
 	PosterID      *int64          `json:"poster_id"`
 	TitleStatus   TitleStatusT    `json:"title_status"`

sql/queries.sql.go

@@ -7,6 +7,7 @@ package sqlc
 
 import (
 	"context"
+	"encoding/json"
 	"time"
 
 	"github.com/jackc/pgx/v5/pgtype"
@@ -120,7 +121,10 @@ SELECT
     t.id, t.title_names, t.studio_id, t.poster_id, t.title_status, t.rating, t.rating_count, t.release_year, t.release_season, t.season, t.episodes_aired, t.episodes_all, t.episodes_len,
     i.storage_type::text                    as title_storage_type,
     i.image_path                            as title_image_path,
-    jsonb_agg_strict(g.tag_name)'[]'::jsonb as tag_names,
+    COALESCE(
+        jsonb_agg(g.tag_names) FILTER (WHERE g.tag_names IS NOT NULL),
+        '[]'::jsonb
+    )::jsonb                                as tag_names,
     s.studio_name                           as studio_name,
     s.illust_id                             as studio_illust_id,
     s.studio_desc                           as studio_desc,
@@ -128,20 +132,20 @@ SELECT
     si.image_path                           as studio_image_path
 
 FROM titles          as t
-LEFT JOIN images     as i    ON (t.image_id = i.id)
+LEFT JOIN images     as i    ON (t.poster_id = i.id)
 LEFT JOIN title_tags as tt   ON (t.id = tt.title_id)
 LEFT JOIN tags       as g    ON (tt.tag_id = g.id)
 LEFT JOIN studios    as s    ON (t.studio_id = s.id)
 LEFT JOIN images     as si   ON (s.illust_id = si.id)
 
-WHERE id = $1::bigint
+WHERE t.id = $1::bigint
 GROUP BY 
     t.id, i.id, s.id, si.id
 `
 
 type GetTitleByIDRow struct {
 	ID                int64           `json:"id"`
-	TitleNames        []byte          `json:"title_names"`
+	TitleNames        json.RawMessage `json:"title_names"`
 	StudioID          int64           `json:"studio_id"`
 	PosterID          *int64          `json:"poster_id"`
 	TitleStatus       TitleStatusT    `json:"title_status"`
@@ -155,7 +159,7 @@ type GetTitleByIDRow struct {
 	EpisodesLen       []byte          `json:"episodes_len"`
 	TitleStorageType  string          `json:"title_storage_type"`
 	TitleImagePath    *string         `json:"title_image_path"`
-	TagNames          []byte          `json:"tag_names"`
+	TagNames          json.RawMessage `json:"tag_names"`
 	StudioName        *string         `json:"studio_name"`
 	StudioIllustID    *int64          `json:"studio_illust_id"`
 	StudioDesc        *string         `json:"studio_desc"`
@@ -224,15 +228,15 @@ JOIN title_tags as t ON(t.tag_id = g.id)
 WHERE t.title_id = $1::bigint
 `
 
-func (q *Queries) GetTitleTags(ctx context.Context, titleID int64) ([][]byte, error) {
+func (q *Queries) GetTitleTags(ctx context.Context, titleID int64) ([]json.RawMessage, error) {
 	rows, err := q.db.Query(ctx, getTitleTags, titleID)
 	if err != nil {
 		return nil, err
 	}
 	defer rows.Close()
-	items := [][]byte{}
+	items := []json.RawMessage{}
 	for rows.Next() {
-		var tag_names []byte
+		var tag_names json.RawMessage
 		if err := rows.Scan(&tag_names); err != nil {
 			return nil, err
 		}
@@ -309,7 +313,7 @@ VALUES (
 RETURNING id, tag_names
 `
 
-func (q *Queries) InsertTag(ctx context.Context, tagNames []byte) (Tag, error) {
+func (q *Queries) InsertTag(ctx context.Context, tagNames json.RawMessage) (Tag, error) {
 	row := q.db.QueryRow(ctx, insertTag, tagNames)
 	var i Tag
 	err := row.Scan(&i.ID, &i.TagNames)
@@ -341,7 +345,10 @@ SELECT
     t.id, t.title_names, t.studio_id, t.poster_id, t.title_status, t.rating, t.rating_count, t.release_year, t.release_season, t.season, t.episodes_aired, t.episodes_all, t.episodes_len,
     i.storage_type::text                    as title_storage_type,
     i.image_path                            as title_image_path,
-    jsonb_agg_strict(g.tag_name)'[]'::jsonb as tag_names,
+    COALESCE(
+        jsonb_agg(g.tag_names) FILTER (WHERE g.tag_names IS NOT NULL),
+        '[]'::jsonb
+    )::jsonb                                as tag_names,
     s.studio_name                           as studio_name,
     s.illust_id                             as studio_illust_id,
     s.studio_desc                           as studio_desc,
@@ -349,7 +356,7 @@ SELECT
     si.image_path                           as studio_image_path
 
 FROM titles          as t
-LEFT JOIN images     as i    ON (t.image_id = i.id)
+LEFT JOIN images     as i    ON (t.poster_id = i.id)
 LEFT JOIN title_tags as tt   ON (t.id = tt.title_id)
 LEFT JOIN tags       as g    ON (tt.tag_id = g.id)
 LEFT JOIN studios    as s    ON (t.studio_id = s.id)
@@ -421,10 +428,16 @@ WHERE
         END
     )
 
-    AND (t.title_status::text IN ($7::text, $8::text, $9::text))
-    AND ($10::float IS NULL OR t.rating >= $10::float)
-    AND ($11::int IS NULL OR t.release_year = $11::int)
-    AND ($12::release_season_t IS NULL OR t.release_season = $12::release_season_t)
+    AND (
+    -- Если массив пуст (NULL или []) — не фильтруем
+    cardinality($7::text[]) = 0
+    OR
+    -- Иначе: статус есть в списке
+    t.title_status = ANY($7::text[])
+)
+    AND ($8::float IS NULL OR t.rating >= $8::float)
+    AND ($9::int IS NULL OR t.release_year = $9::int)
+    AND ($10::release_season_t IS NULL OR t.release_season = $10::release_season_t)
 
 GROUP BY 
     t.id, i.id, s.id, si.id
@@ -447,7 +460,7 @@ ORDER BY
 
     CASE WHEN $2::text <> 'id' THEN t.id END ASC
 
-LIMIT COALESCE($13::int, 100)
+LIMIT COALESCE($11::int, 100)
 `
 
 type SearchTitlesParams struct {
@@ -457,9 +470,7 @@ type SearchTitlesParams struct {
 	CursorID      *int64          `json:"cursor_id"`
 	CursorRating  *float64        `json:"cursor_rating"`
 	Word          *string         `json:"word"`
-	Ongoing       string          `json:"ongoing"`
-	Finished      string          `json:"finished"`
-	Planned       string          `json:"planned"`
+	TitleStatuses []string        `json:"title_statuses"`
 	Rating        *float64        `json:"rating"`
 	ReleaseYear   *int32          `json:"release_year"`
 	ReleaseSeason *ReleaseSeasonT `json:"release_season"`
@@ -468,7 +479,7 @@ type SearchTitlesParams struct {
 
 type SearchTitlesRow struct {
 	ID                int64           `json:"id"`
-	TitleNames        []byte          `json:"title_names"`
+	TitleNames        json.RawMessage `json:"title_names"`
 	StudioID          int64           `json:"studio_id"`
 	PosterID          *int64          `json:"poster_id"`
 	TitleStatus       TitleStatusT    `json:"title_status"`
@@ -482,7 +493,7 @@ type SearchTitlesRow struct {
 	EpisodesLen       []byte          `json:"episodes_len"`
 	TitleStorageType  string          `json:"title_storage_type"`
 	TitleImagePath    *string         `json:"title_image_path"`
-	TagNames          []byte          `json:"tag_names"`
+	TagNames          json.RawMessage `json:"tag_names"`
 	StudioName        *string         `json:"studio_name"`
 	StudioIllustID    *int64          `json:"studio_illust_id"`
 	StudioDesc        *string         `json:"studio_desc"`
@@ -498,9 +509,7 @@ func (q *Queries) SearchTitles(ctx context.Context, arg SearchTitlesParams) ([]S
 		arg.CursorID,
 		arg.CursorRating,
 		arg.Word,
-		arg.Ongoing,
-		arg.Finished,
-		arg.Planned,
+		arg.TitleStatuses,
 		arg.Rating,
 		arg.ReleaseYear,
 		arg.ReleaseSeason,
@@ -548,82 +557,195 @@ func (q *Queries) SearchTitles(ctx context.Context, arg SearchTitlesParams) ([]S
 
 const searchUserTitles = `-- name: SearchUserTitles :many
 
-SELECT 
-    user_id, title_id, status, rate, review_id, ctime, id, title_names, studio_id, poster_id, title_status, rating, rating_count, release_year, release_season, season, episodes_aired, episodes_all, episodes_len
-FROM usertitles as u
-JOIN titles as t ON (u.title_id = t.id)
-WHERE 
-    CASE 
-        WHEN $1::text IS NOT NULL THEN
-            (
-                SELECT bool_and(
-                    EXISTS (
-                        SELECT 1 
-                        FROM jsonb_each_text(t.title_names) AS t(key, val)
-                        WHERE val ILIKE pattern
-                    )
-                )
-                FROM unnest(
-                    ARRAY(
-                        SELECT '%' || trim(w) || '%'
-                        FROM unnest(string_to_array($1::text, ' ')) AS w
-                        WHERE trim(w) <> ''
-                    )
-                ) AS pattern
-            )
-        ELSE true
+SELECT
+    t.id, t.title_names, t.studio_id, t.poster_id, t.title_status, t.rating, t.rating_count, t.release_year, t.release_season, t.season, t.episodes_aired, t.episodes_all, t.episodes_len,
+    u.user_id                               as user_id,
+    u.status                                as usertitle_status,
+    u.rate                                  as user_rate,
+    u.review_id                             as review_id,
+    u.ctime                                 as user_ctime,
+    i.storage_type::text                    as title_storage_type,
+    i.image_path                            as title_image_path,
+    jsonb_agg(g.tag_name)'[]'::jsonb        as tag_names,
+    s.studio_name                           as studio_name,
+    s.illust_id                             as studio_illust_id,
+    s.studio_desc                           as studio_desc,
+    si.storage_type::text                   as studio_storage_type,
+    si.image_path                           as studio_image_path
+
+FROM      usertitles as u
+LEFT JOIN titles     as t    ON (u.title_id = t.id)
+LEFT JOIN images     as i    ON (t.poster_id = i.id)
+LEFT JOIN title_tags as tt   ON (t.id = tt.title_id)
+LEFT JOIN tags       as g    ON (tt.tag_id = g.id)
+LEFT JOIN studios    as s    ON (t.studio_id = s.id)
+LEFT JOIN images     as si   ON (s.illust_id = si.id)
+
+WHERE
+    CASE
+        WHEN $1::boolean THEN
+        -- forward: greater than cursor (next page)
+            CASE $2::text
+                WHEN 'year' THEN
+                    ($3::int IS NULL) OR
+                    (t.release_year > $3::int) OR
+                    (t.release_year = $3::int AND t.id > $4::bigint)
+
+                WHEN 'rating' THEN
+                        ($5::float IS NULL) OR
+                        (t.rating > $5::float) OR
+                        (t.rating = $5::float AND t.id > $4::bigint)
+
+                WHEN 'id' THEN
+                    ($4::bigint IS NULL) OR
+                    (t.id > $4::bigint)
+
+                ELSE true  -- fallback
+            END
+
+    ELSE
+        -- backward: less than cursor (prev page)
+        CASE $2::text
+            WHEN 'year' THEN
+                ($3::int IS NULL) OR
+                (t.release_year < $3::int) OR
+                (t.release_year = $3::int AND t.id < $4::bigint)
+
+            WHEN 'rating' THEN
+                ($5::float IS NULL) OR
+                (t.rating < $5::float) OR
+                (t.rating = $5::float AND t.id < $4::bigint)
+
+            WHEN 'id' THEN
+                ($4::bigint IS NULL) OR
+                (t.id < $4::bigint)
+
+            ELSE true
+        END
     END
 
-    AND ($2::title_status_t IS NULL OR t.title_status = $2::title_status_t)
-    AND ($3::float IS NULL OR t.rating >= $3::float)
-    AND ($4::int IS NULL OR t.release_year = $4::int)
-    AND ($5::release_season_t IS NULL OR t.release_season = $5::release_season_t)
-    AND ($6::usertitle_status_t IS NULL OR u.usertitle_status = $6::usertitle_status_t)
+    AND (
+        CASE 
+            WHEN $6::text IS NOT NULL THEN
+                (
+                    SELECT bool_and(
+                        EXISTS (
+                            SELECT 1 
+                            FROM jsonb_each_text(t.title_names) AS t(key, val)
+                            WHERE val ILIKE pattern
+                        )
+                    )
+                    FROM unnest(
+                        ARRAY(
+                            SELECT '%' || trim(w) || '%'
+                            FROM unnest(string_to_array($6::text, ' ')) AS w
+                            WHERE trim(w) <> ''
+                        )
+                    ) AS pattern
+                )
+            ELSE true
+        END
+    )
 
-LIMIT COALESCE($7::int, 100)
+    AND (u.status::text IN ($7::text, $8::text, $9::text, $10::text))
+    AND (t.title_status::text IN ($7::text, $11::text, $8::text))
+    AND ($12::int IS NULL OR u.rate >= $12::int)
+    AND ($13::float IS NULL OR t.rating >= $13::float)
+    AND ($14::int IS NULL OR t.release_year = $14::int)
+    AND ($15::release_season_t IS NULL OR t.release_season = $15::release_season_t)
+
+GROUP BY 
+    t.id, i.id, s.id, si.id
+
+ORDER BY
+    CASE WHEN $1::boolean THEN
+        CASE
+            WHEN $2::text = 'id' THEN t.id
+            WHEN $2::text = 'year' THEN t.release_year
+            WHEN $2::text = 'rating' THEN t.rating
+            WHEN $2::text = 'rate' THEN u.rate
+        END
+    END ASC,
+    CASE WHEN NOT $1::boolean THEN
+        CASE
+            WHEN $2::text = 'id' THEN t.id
+            WHEN $2::text = 'year' THEN t.release_year
+            WHEN $2::text = 'rating' THEN t.rating
+            WHEN $2::text = 'rate' THEN u.rate
+        END
+    END DESC,
+
+    CASE WHEN $2::text <> 'id' THEN t.id END ASC
+
+LIMIT COALESCE($16::int, 100)
 `
 
 type SearchUserTitlesParams struct {
-	Word            *string              `json:"word"`
-	Status          *TitleStatusT        `json:"status"`
-	Rating          *float64             `json:"rating"`
-	ReleaseYear     *int32               `json:"release_year"`
-	ReleaseSeason   *ReleaseSeasonT      `json:"release_season"`
-	UsertitleStatus NullUsertitleStatusT `json:"usertitle_status"`
-	Limit           *int32               `json:"limit"`
+	Forward       bool            `json:"forward"`
+	SortBy        string          `json:"sort_by"`
+	CursorYear    *int32          `json:"cursor_year"`
+	CursorID      *int64          `json:"cursor_id"`
+	CursorRating  *float64        `json:"cursor_rating"`
+	Word          *string         `json:"word"`
+	Ongoing       string          `json:"ongoing"`
+	Planned       string          `json:"planned"`
+	Dropped       string          `json:"dropped"`
+	InProgress    string          `json:"in-progress"`
+	Finished      string          `json:"finished"`
+	Rate          *int32          `json:"rate"`
+	Rating        *float64        `json:"rating"`
+	ReleaseYear   *int32          `json:"release_year"`
+	ReleaseSeason *ReleaseSeasonT `json:"release_season"`
+	Limit         *int32          `json:"limit"`
 }
 
 type SearchUserTitlesRow struct {
-	UserID        int64              `json:"user_id"`
-	TitleID       int64              `json:"title_id"`
-	Status        UsertitleStatusT   `json:"status"`
-	Rate          *int32             `json:"rate"`
-	ReviewID      *int64             `json:"review_id"`
-	Ctime         pgtype.Timestamptz `json:"ctime"`
-	ID            int64              `json:"id"`
-	TitleNames    []byte             `json:"title_names"`
-	StudioID      int64              `json:"studio_id"`
-	PosterID      *int64             `json:"poster_id"`
-	TitleStatus   TitleStatusT       `json:"title_status"`
-	Rating        *float64           `json:"rating"`
-	RatingCount   *int32             `json:"rating_count"`
-	ReleaseYear   *int32             `json:"release_year"`
-	ReleaseSeason *ReleaseSeasonT    `json:"release_season"`
-	Season        *int32             `json:"season"`
-	EpisodesAired *int32             `json:"episodes_aired"`
-	EpisodesAll   *int32             `json:"episodes_all"`
-	EpisodesLen   []byte             `json:"episodes_len"`
+	ID                *int64             `json:"id"`
+	TitleNames        []byte             `json:"title_names"`
+	StudioID          *int64             `json:"studio_id"`
+	PosterID          *int64             `json:"poster_id"`
+	TitleStatus       *TitleStatusT      `json:"title_status"`
+	Rating            *float64           `json:"rating"`
+	RatingCount       *int32             `json:"rating_count"`
+	ReleaseYear       *int32             `json:"release_year"`
+	ReleaseSeason     *ReleaseSeasonT    `json:"release_season"`
+	Season            *int32             `json:"season"`
+	EpisodesAired     *int32             `json:"episodes_aired"`
+	EpisodesAll       *int32             `json:"episodes_all"`
+	EpisodesLen       []byte             `json:"episodes_len"`
+	UserID            int64              `json:"user_id"`
+	UsertitleStatus   UsertitleStatusT   `json:"usertitle_status"`
+	UserRate          *int32             `json:"user_rate"`
+	ReviewID          *int64             `json:"review_id"`
+	UserCtime         pgtype.Timestamptz `json:"user_ctime"`
+	TitleStorageType  string             `json:"title_storage_type"`
+	TitleImagePath    *string            `json:"title_image_path"`
+	TagNames          json.RawMessage    `json:"tag_names"`
+	StudioName        *string            `json:"studio_name"`
+	StudioIllustID    *int64             `json:"studio_illust_id"`
+	StudioDesc        *string            `json:"studio_desc"`
+	StudioStorageType string             `json:"studio_storage_type"`
+	StudioImagePath   *string            `json:"studio_image_path"`
 }
 
 // 100 is default limit
 func (q *Queries) SearchUserTitles(ctx context.Context, arg SearchUserTitlesParams) ([]SearchUserTitlesRow, error) {
 	rows, err := q.db.Query(ctx, searchUserTitles,
+		arg.Forward,
+		arg.SortBy,
+		arg.CursorYear,
+		arg.CursorID,
+		arg.CursorRating,
 		arg.Word,
-		arg.Status,
+		arg.Ongoing,
+		arg.Planned,
+		arg.Dropped,
+		arg.InProgress,
+		arg.Finished,
+		arg.Rate,
 		arg.Rating,
 		arg.ReleaseYear,
 		arg.ReleaseSeason,
-		arg.UsertitleStatus,
 		arg.Limit,
 	)
 	if err != nil {
@@ -634,12 +756,6 @@ func (q *Queries) SearchUserTitles(ctx context.Context, arg SearchUserTitlesPara
 	for rows.Next() {
 		var i SearchUserTitlesRow
 		if err := rows.Scan(
-			&i.UserID,
-			&i.TitleID,
-			&i.Status,
-			&i.Rate,
-			&i.ReviewID,
-			&i.Ctime,
 			&i.ID,
 			&i.TitleNames,
 			&i.StudioID,
@@ -653,6 +769,19 @@ func (q *Queries) SearchUserTitles(ctx context.Context, arg SearchUserTitlesPara
 			&i.EpisodesAired,
 			&i.EpisodesAll,
 			&i.EpisodesLen,
+			&i.UserID,
+			&i.UsertitleStatus,
+			&i.UserRate,
+			&i.ReviewID,
+			&i.UserCtime,
+			&i.TitleStorageType,
+			&i.TitleImagePath,
+			&i.TagNames,
+			&i.StudioName,
+			&i.StudioIllustID,
+			&i.StudioDesc,
+			&i.StudioStorageType,
+			&i.StudioImagePath,
 		); err != nil {
 			return nil, err
 		}

sql/sqlc.yaml

@@ -14,6 +14,8 @@ sql:
         emit_pointers_for_null_types: true
         emit_empty_slices: true #slices returned by :many queries will be empty instead of nil
         overrides:
+          - db_type: "jsonb"
+            go_type: "encoding/json.RawMessage"
           - db_type: "uuid"
             nullable: false
             go_type: