add combobox groups, add genre types, add rewatches badge

hikka-io · Mar 10, 2024 · 9775d1d · 9775d1d
1 parent c807c1a
commit 9775d1d
Show file tree

Hide file tree

Showing 7 changed files with 220 additions and 100 deletions.
diff --git a/app/(pages)/u/[username]/list/_components/list/_components/table-view.tsx b/app/(pages)/u/[username]/list/_components/list/_components/table-view.tsx
@@ -143,6 +143,7 @@ const Component = ({ data }: Props) => {
                             <NumberCell number={i + 1} />
                             <DetailsCell
                                 anime={res.anime}
+                                rewatches={res.rewatches}
                                 titleLanguage={titleLanguage!}
                             />
                             <EpisodesCell

diff --git a/app/(pages)/u/[username]/list/_components/list/_components/ui/details-cell.tsx b/app/(pages)/u/[username]/list/_components/list/_components/ui/details-cell.tsx
@@ -1,14 +1,16 @@
 import Link from 'next/link';
 
+import { Badge } from '@/components/ui/badge';
 import BaseCard from '@/components/ui/base-card';
 import { TableCell } from '@/components/ui/table';
 
 interface Props {
     anime: API.Anime;
+    rewatches: number;
     titleLanguage: 'title_en' | 'title_ua' | 'title_ja';
 }
 
-const Component = ({ anime, titleLanguage }: Props) => (
+const Component = ({ anime, rewatches, titleLanguage }: Props) => (
     <TableCell>
         <div className="flex gap-4">
             <div className="hidden w-12 lg:block">
@@ -25,6 +27,9 @@ const Component = ({ anime, titleLanguage }: Props) => (
                             anime.title_en ||
                             anime.title_ja}
                     </Link>
+                    {rewatches > 0 && (
+                        <Badge variant="outline">{rewatches}</Badge>
+                    )}
                 </div>
             </div>
         </div>

diff --git a/components/filters/filters.tsx b/components/filters/filters.tsx
@@ -18,7 +18,7 @@ import { Switch } from '@/components/ui/switch';
 import getAnimeGenres from '@/services/api/anime/getAnimeGenres';
 import { cn } from '@/utils';
 import {
-    AGE_RATING,
+    AGE_RATING, GENRE_TYPES,
     MEDIA_TYPE,
     RELEASE_STATUS,
     SEASON,
@@ -177,6 +177,10 @@ const Component = ({ className, type }: Props) => {
                             options={genresList.list.map((genre) => ({
                                 value: genre.slug,
                                 label: genre.name_ua || genre.name_en,
+                                group: {
+                                    label: GENRE_TYPES[genre.type].title_ua,
+                                    value: genre.type,
+                                }
                             }))}
                             multiple
                             value={genres}

diff --git a/components/ui/combobox.tsx b/components/ui/combobox.tsx
diff --git a/components/watchlist-button.tsx b/components/watchlist-button.tsx
@@ -37,6 +37,9 @@ const SETTINGS_BUTTON = {
     disableCheckbox: true,
     separator: true,
     title: 'Налаштування',
+    group: {
+        value: 'settings',
+    }
 };
 
 const OPTIONS = [

diff --git a/types/api.d.ts b/types/api.d.ts
@@ -173,11 +173,13 @@ declare global {
             comments_count: number;
         } & Anime;
 
+        type GenreType = 'theme' | 'explicit' | 'demographic' | 'genre';
+
         type Genre = {
             name_en: string;
             name_ua: string;
             slug: string;
-            type: string;
+            type: GenreType;
         };
 
         type Character = {

diff --git a/utils/constants.ts b/utils/constants.ts
@@ -259,6 +259,25 @@ export const EDIT_STATUS: Hikka.FilterProperty<API.EditStatus> = {
     },
 };
 
+export const GENRE_TYPES: Hikka.FilterProperty<API.GenreType> = {
+    theme: {
+        title_ua: 'Тематичне',
+        title_en: 'Theme',
+    },
+    explicit: {
+        title_ua: 'Для дорослих',
+        title_en: 'Explicit',
+    },
+    genre: {
+        title_ua: 'Основне',
+        title_en: 'General',
+    },
+    demographic: {
+        title_ua: 'Демографічне',
+        title_en: 'Demographic',
+    },
+};
+
 export const ERRORS: Record<string, Record<string, string>> = {
     auth: {
         activation_valid: