add visibility to collection page, add tags to edit page, fix colors …

…on edit page
hikka-io · Mar 21, 2024 · a329bc0 · a329bc0
1 parent bfd4ece
commit a329bc0
Show file tree

Hide file tree

Showing 21 changed files with 241 additions and 116 deletions.
diff --git a/app/(pages)/anime/[slug]/_components/media.tsx b/app/(pages)/anime/[slug]/_components/media.tsx
@@ -91,7 +91,7 @@ const Component = ({ extended }: Props) => {
                             key={ost.spotify}
                             href={ost.spotify || undefined}
                             title={ost.title}
-                            containerClassName="pt-[100%]"
+                            containerRatio={1}
                             description={
                                 OST[ost.ost_type].title_ua ||
                                 OST[ost.ost_type].title_en
@@ -113,7 +113,7 @@ const Component = ({ extended }: Props) => {
                                 href={video.url || '#'}
                                 title={video.title}
                                 poster={thumb}
-                                containerClassName="pt-[70%]"
+                                containerRatio={1.7}
                                 description={
                                     VIDEO[video.video_type].title_ua ||
                                     VIDEO[video.video_type].title_en

diff --git a/app/(pages)/anime/[slug]/_components/title.tsx b/app/(pages)/anime/[slug]/_components/title.tsx
@@ -1,52 +1,21 @@
 'use client';
 
-import clsx from 'clsx';
 import { useEffect, useRef } from 'react';
-import MaterialSymbolsEditRounded from '~icons/material-symbols/edit-rounded';
 import MaterialSymbolsStarRounded from '~icons/material-symbols/star-rounded';
 
 import Link from 'next/link';
 import { useParams, usePathname } from 'next/navigation';
 
-import EditListModal from '@/components/modals/editlist-modal';
+import EditButton from '@/components/edit-button';
 import H2 from '@/components/typography/h2';
 import P from '@/components/typography/p';
-import { Button } from '@/components/ui/button';
 import useAnimeInfo from '@/services/hooks/anime/useAnimeInfo';
 import useIsMobile from '@/services/hooks/useIsMobile';
 import { useAuthContext } from '@/services/providers/auth-provider';
-import { useModalContext } from '@/services/providers/modal-provider';
 import { useSettingsContext } from '@/services/providers/settings-provider';
 import { ANIME_NAV_ROUTES } from '@/utils/constants';
 
 
-const EditButton = ({ className }: { className?: string }) => {
-    const { openModal } = useModalContext();
-    const params = useParams();
-
-    return (
-        <Button
-            variant="outline"
-            size="icon-xs"
-            onClick={() =>
-                openModal({
-                    content: (
-                        <EditListModal
-                            content_type="anime"
-                            slug={String(params.slug)}
-                        />
-                    ),
-                    type: 'sheet',
-                    title: 'Список правок',
-                })
-            }
-            className={clsx(className)}
-        >
-            <MaterialSymbolsEditRounded />
-        </Button>
-    );
-};
-
 const Component = () => {
     const { titleLanguage } = useSettingsContext();
     const isMobile = useIsMobile();
@@ -95,7 +64,14 @@ const Component = () => {
                                 </span>
                             )}
                         </H2>
-                        {secret && <EditButton className="hidden lg:flex" />}
+                        {secret && (
+                            <EditButton
+                                key={String(params.slug)}
+                                slug={String(params.slug)}
+                                content_type="anime"
+                                className="hidden lg:flex"
+                            />
+                        )}
                     </div>
                     <P className="mt-2">{data.title_ja}</P>
                 </div>
@@ -109,7 +85,14 @@ const Component = () => {
                             <MaterialSymbolsStarRounded className="text-2xl" />
                         </div>
                     )}
-                    {secret && <EditButton className="flex lg:hidden" />}
+                    {secret && (
+                        <EditButton
+                            key={String(params.slug)}
+                            slug={String(params.slug)}
+                            content_type="anime"
+                            className="flex lg:hidden"
+                        />
+                    )}
                 </div>
             </div>
             {data.genres.length > 0 && (

diff --git a/app/(pages)/characters/[slug]/_components/title.tsx b/app/(pages)/characters/[slug]/_components/title.tsx
@@ -1,49 +1,18 @@
 'use client';
 
-import clsx from 'clsx';
 import { useEffect, useRef } from 'react';
-import MaterialSymbolsEditRounded from '~icons/material-symbols/edit-rounded';
 
 import { useParams, usePathname } from 'next/navigation';
 
-import EditListModal from '@/components/modals/editlist-modal';
+import EditButton from '@/components/edit-button';
 import H2 from '@/components/typography/h2';
 import P from '@/components/typography/p';
-import { Button } from '@/components/ui/button';
 import useCharacterInfo from '@/services/hooks/characters/useCharacterInfo';
 import useIsMobile from '@/services/hooks/useIsMobile';
 import { useAuthContext } from '@/services/providers/auth-provider';
-import { useModalContext } from '@/services/providers/modal-provider';
 import { CHARACTER_NAV_ROUTES } from '@/utils/constants';
 
 
-const EditButton = ({ className }: { className?: string }) => {
-    const { openModal } = useModalContext();
-    const params = useParams();
-
-    return (
-        <Button
-            variant="outline"
-            size="icon-xs"
-            onClick={() =>
-                openModal({
-                    content: (
-                        <EditListModal
-                            content_type="character"
-                            slug={String(params.slug)}
-                        />
-                    ),
-                    type: 'sheet',
-                    title: 'Список правок',
-                })
-            }
-            className={clsx(className)}
-        >
-            <MaterialSymbolsEditRounded />
-        </Button>
-    );
-};
-
 const Component = () => {
     const isMobile = useIsMobile();
     const pathname = usePathname();
@@ -81,12 +50,26 @@ const Component = () => {
                                 character.name_ja ||
                                 ''}{' '}
                         </H2>
-                        {secret && <EditButton className="hidden lg:flex" />}
+                        {secret && (
+                            <EditButton
+                                key={String(params.slug)}
+                                slug={String(params.slug)}
+                                content_type="character"
+                                className="hidden lg:flex"
+                            />
+                        )}
                     </div>
                     <P className="mt-2">{character.name_ja}</P>
                 </div>
                 <div className="flex flex-col items-end gap-2">
-                    {secret && <EditButton className="flex lg:hidden" />}
+                    {secret && (
+                        <EditButton
+                            key={String(params.slug)}
+                            slug={String(params.slug)}
+                            content_type="character"
+                            className="flex lg:hidden"
+                        />
+                    )}
                 </div>
             </div>
         </div>

diff --git a/app/(pages)/characters/[slug]/page.tsx b/app/(pages)/characters/[slug]/page.tsx
@@ -8,8 +8,8 @@ const Component = () => {
     return (
         <div className="relative flex flex-col gap-12 ">
             <Description />
-            <Voices />
             <Anime />
+            <Voices />
         </div>
     );
 };

diff --git a/app/(pages)/edit/_components/content/_components/details.tsx b/app/(pages)/edit/_components/content/_components/details.tsx
@@ -1,16 +1,21 @@
 import * as React from 'react';
 
-import { Label } from '@/components/ui/label';
 import P from '@/components/typography/p';
+import { Label } from '@/components/ui/label';
 
 interface Props {
-    content: API.AnimeInfo | API.Character;
+    content: API.AnimeInfo | API.Character | API.Person;
 }
 
 const Component = ({ content }: Props) => {
     const title_ua = 'title_ua' in content ? content.title_ua : content.name_ua;
     const title_en = 'title_en' in content ? content.title_en : content.name_en;
-    const title_ja = 'title_ja' in content ? content.title_ja : content.name_ja;
+    const title_ja =
+        'title_ja' in content
+            ? content.title_ja
+            : 'name_ja' in content
+              ? content.name_ja
+              : content.name_native;
 
     return (
         <div className="flex flex-col gap-4 rounded-md border border-secondary/60 bg-secondary/30 p-4">

diff --git a/app/(pages)/edit/_components/content/content.tsx b/app/(pages)/edit/_components/content/content.tsx
@@ -13,7 +13,7 @@ import Details from './_components/details';
 interface Props {
     slug: string;
     content_type: API.ContentType;
-    content?: API.AnimeInfo | API.Character;
+    content?: API.AnimeInfo | API.Character | API.Person;
 }
 
 const Component = ({ slug, content_type, content }: Props) => {

diff --git a/app/(pages)/edit/_components/edit-form.tsx b/app/(pages)/edit/_components/edit-form.tsx
@@ -4,26 +4,29 @@ import * as React from 'react';
 import { useRef } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 
+
+
 import { useRouter } from 'next/navigation';
 
+
+
 import { Turnstile, TurnstileInstance } from '@marsidev/react-turnstile';
 
+
+
 import { Button } from '@/components/ui/button';
 import addEdit from '@/services/api/edit/addEdit';
 import { useAuthContext } from '@/services/providers/auth-provider';
-import {
-    getEditGroups,
-    getEditParamSlugs,
-    getEditParams,
-    getFilteredEditParams,
-} from '@/utils/editParamUtils';
+import { getEditGroups, getEditParamSlugs, getEditParams, getFilteredEditParams } from '@/utils/editParamUtils';
+
+
 
 import EditGroup from '../_components/edit-group';
 import AutoButton from '../_components/ui/auto-button';
 import EditDescription from './edit-description';
 
 
-type FormValues = (Hikka.AnimeEditParams | Hikka.CharacterEditParams) & {
+type FormValues = Record<string, unknown> & {
     description: string;
     auto?: boolean;
 };
@@ -32,7 +35,7 @@ interface Props {
     slug: string;
     content_type: API.ContentType;
     mode?: 'view' | 'edit';
-    content: API.AnimeInfo | API.Character;
+    content: API.AnimeInfo | API.Character | API.Person;
 }
 
 const Component = ({ slug, content_type, content, mode = 'edit' }: Props) => {

diff --git a/app/(pages)/edit/_components/edit-top-stats/edit-top-stats.tsx b/app/(pages)/edit/_components/edit-top-stats/edit-top-stats.tsx
@@ -25,7 +25,7 @@ function Component() {
     const handleOpenModal = () => {
         openModal({
             content: <EditTopStatsModal />,
-            title: 'Топ контрибуторів',
+            title: 'Топ авторів',
             type: 'sheet',
         });
     };

diff --git a/app/(pages)/edit/_components/edit-view.tsx b/app/(pages)/edit/_components/edit-view.tsx
@@ -24,7 +24,7 @@ import {
 } from '@/utils/editParamUtils';
 
 
-type FormValues = (Hikka.AnimeEditParams | Hikka.CharacterEditParams) & {
+type FormValues = Record<string, unknown> & {
     description: string;
     auto?: boolean;
 };

diff --git a/app/(pages)/edit/new/page.tsx b/app/(pages)/edit/new/page.tsx
@@ -9,6 +9,7 @@ import Content from '@/app/(pages)/edit/_components/content/content';
 import SubHeader from '@/components/sub-header';
 import getAnimeInfo from '@/services/api/anime/getAnimeInfo';
 import getCharacterInfo from '@/services/api/characters/getCharacterInfo';
+import getPersonInfo from '@/services/api/people/getPersonInfo';
 import getQueryClient from '@/utils/getQueryClient';
 
 import EditForm from '../_components/edit-form';
@@ -45,7 +46,14 @@ const Component = async ({ searchParams: { content_type, slug } }: Props) => {
         });
     }
 
-    const content: API.AnimeInfo | API.Character | undefined =
+    if (content_type === 'person') {
+        await queryClient.prefetchQuery({
+            queryKey: ['person', slug],
+            queryFn: () => getPersonInfo({ slug: String(slug) }),
+        });
+    }
+
+    const content: API.AnimeInfo | API.Character | API.Person | undefined =
         queryClient.getQueryData([content_type, slug]);
 
     if (!content) {

diff --git a/app/(pages)/people/[slug]/_components/title.tsx b/app/(pages)/people/[slug]/_components/title.tsx
@@ -7,9 +7,16 @@ import { useParams } from 'next/navigation';
 import H2 from '@/components/typography/h2';
 import P from '@/components/typography/p';
 import usePersonInfo from '@/services/hooks/people/usePersonInfo';
-
+import { useModalContext } from '@/services/providers/modal-provider';
+import { Button } from '@/components/ui/button';
+import EditListModal from '@/components/modals/editlist-modal';
+import clsx from 'clsx';
+import MaterialSymbolsEditRounded from '~icons/*';
+import EditButton from '@/components/edit-button';
+import { useAuthContext } from '@/services/providers/auth-provider';
 
 const Component = () => {
+    const { secret } = useAuthContext();
     const divRef = useRef<HTMLDivElement>(null);
     const params = useParams();
     const { data: person } = usePersonInfo({ slug: String(params.slug) });
@@ -28,9 +35,27 @@ const Component = () => {
                                 person.name_en ||
                                 person.name_native}
                         </H2>
+                        {secret && (
+                            <EditButton
+                                key={String(params.slug)}
+                                slug={String(params.slug)}
+                                content_type="person"
+                                className="hidden lg:flex"
+                            />
+                        )}
                     </div>
                     <P className="mt-2">{person.name_native}</P>
                 </div>
+                <div className="flex flex-col items-end gap-2">
+                    {secret && (
+                        <EditButton
+                            key={String(params.slug)}
+                            slug={String(params.slug)}
+                            content_type="person"
+                            className="flex lg:hidden"
+                        />
+                    )}
+                </div>
             </div>
         </div>
     );

diff --git a/app/(pages)/u/[username]/_components/history/components/ui/history-item.tsx b/app/(pages)/u/[username]/_components/history/components/ui/history-item.tsx
@@ -28,7 +28,7 @@ const Component = ({ data, className }: Props) => {
     }
 
     return (
-        <div className={cn('flex gap-4', className)}>
+        <div className={cn('flex gap-4 items-center', className)}>
             <div className="w-12">
                 {data.content ? (
                     <BaseCard