✨ feat(userDict): add remove function

summerscar · Oct 28, 2024 · f7019e5 · f7019e5
1 parent 9466f81
commit f7019e5
Show file tree

Hide file tree

Showing 6 changed files with 48 additions and 36 deletions.
diff --git a/app/(home)/page.tsx b/app/(home)/page.tsx
@@ -1,5 +1,5 @@
 import { HomeStatus } from "@/components/home-status";
-import { Dicts, dictList } from "@/types/dict";
+import { Dicts, dictNameList } from "@/types/dict";
 
 import { fetchDict } from "@/utils/api";
 
@@ -9,7 +9,7 @@ export default async function HomePage(props: {
 	const searchParams = await props.searchParams;
 	const targetDict =
 		searchParams &&
-		dictList.includes(searchParams.dict as unknown as Dicts) &&
+		dictNameList.includes(searchParams.dict as unknown as Dicts) &&
 		searchParams.dict !== Dicts.user
 			? (searchParams.dict as unknown as Dicts)
 			: Dicts.popular;

diff --git a/app/assets/svg/close.svg b/app/assets/svg/close.svg
diff --git a/app/components/header/_component/mobile-menu.tsx b/app/components/header/_component/mobile-menu.tsx
@@ -1,4 +1,6 @@
 "use client";
+import CloseIcon from "@/assets/svg/close.svg";
+import MenuIcon from "@/assets/svg/menu.svg";
 import clsx from "clsx";
 import type { Session } from "next-auth";
 import Link from "next/link";
@@ -27,26 +29,8 @@ const MobileMenu = ({
 					onChange={handleOnChange}
 					checked={isOpen}
 				/>
-				<svg
-					className="swap-off fill-current"
-					xmlns="http://www.w3.org/2000/svg"
-					width="32"
-					height="32"
-					viewBox="0 0 512 512"
-				>
-					<title>icon</title>
-					<path d="M64,384H448V341.33H64Zm0-106.67H448V234.67H64ZM64,128v42.67H448V128Z" />
-				</svg>
-				<svg
-					className="swap-on fill-current"
-					xmlns="http://www.w3.org/2000/svg"
-					width="32"
-					height="32"
-					viewBox="0 0 512 512"
-				>
-					<title>icon</title>
-					<polygon points="400 145.49 366.51 112 256 222.51 145.49 112 112 145.49 222.51 256 112 366.51 145.49 400 256 289.49 366.51 400 400 366.51 289.49 256 400 145.49" />
-				</svg>
+				<MenuIcon className="swap-off fill-current w-8 h-8" />
+				<CloseIcon className="swap-on fill-current w-8 h-8" />
 			</label>
 			<div
 				className={clsx(

diff --git a/app/components/home-drawer/index.tsx b/app/components/home-drawer/index.tsx
@@ -1,10 +1,13 @@
+import CloseIcon from "@/assets/svg/close.svg";
 import { ClientOnly } from "@/components/client-only";
-import type { Dict } from "@/types/dict";
+import { type Dict, Dicts } from "@/types/dict";
 import { getTranslation } from "@/utils/convert-input";
 import { isServer } from "@/utils/is-server";
+import { removeUserDict } from "@/utils/user-dict";
 import { useMemoizedFn } from "ahooks";
 import clsx from "clsx";
 import { useLocale } from "next-intl";
+import { useSearchParams } from "next/navigation";
 import { useEffect, useRef } from "react";
 import { createPortal } from "react-dom";
 import { DictMenu } from "./dict-menu";
@@ -25,6 +28,10 @@ const HomeDrawer = ({
 	onUserDictUpdate: () => void;
 }) => {
 	const locale = useLocale();
+	const searchParams = useSearchParams();
+	const currentDict = searchParams.get("dict") || Dicts.popular;
+	const isUserDict = currentDict === Dicts.user;
+
 	const controllerRef = useRef<HTMLInputElement>(null);
 	const open = useMemoizedFn(() => {
 		if (controllerRef.current) {
@@ -75,23 +82,35 @@ const HomeDrawer = ({
 							{dict.map((item, index) => (
 								<li
 									key={item.name}
-									className={clsx("cursor-pointer")}
-									onClick={() => onClick(index)}
+									className={clsx("cursor-pointer relative group")}
 								>
 									<div
 										className={clsx({
 											active: index === curWordIndex,
 										})}
 									>
-										<span>
-											{index + 1}. {item.name}
-										</span>
-										<span
-											className="text-right text-nowrap overflow-hidden text-ellipsis pl-12 text-gray-400"
-											title={getTranslation(item, locale)}
-										>
-											{getTranslation(item, locale)}
-										</span>
+										<div className="contents" onClick={() => onClick(index)}>
+											<span>
+												{index + 1}. {item.name}
+											</span>
+											<span
+												className="text-right text-nowrap overflow-hidden text-ellipsis pl-12 text-gray-400"
+												title={getTranslation(item, locale)}
+											>
+												{getTranslation(item, locale)}
+											</span>
+										</div>
+										{isUserDict && (
+											<div
+												className="absolute -top-1 -right-1 btn-circle btn btn-xs items-center justify-center opacity-0 pointer-events-none group-hover:opacity-100 group-hover:pointer-events-auto transition-opacity"
+												onClick={() => {
+													removeUserDict(item.name);
+													onUserDictUpdate();
+												}}
+											>
+												<CloseIcon className="w-4 h-4" />
+											</div>
+										)}
 									</div>
 								</li>
 							))}

diff --git a/app/components/home-status/index.tsx b/app/components/home-status/index.tsx
@@ -334,7 +334,7 @@ const HomeStatus = ({
 			<div className={clsx(notoKR.className, "text-4xl font-bold relative")}>
 				{displayName}
 				<div
-					className="tooltip tooltip-right absolute top-1/2 -right-10 -translate-x-1/2 -translate-y-1/2"
+					className="tooltip tooltip-top sm:tooltip-right absolute top-1/2 -right-10 -translate-x-1/2 -translate-y-1/2"
 					data-tip={`${romanized} / ${standardized}`}
 				>
 					<Pronunciation width={20} height={20} text={currentWord?.name} />

diff --git a/app/types/dict.ts b/app/types/dict.ts
@@ -21,7 +21,7 @@ export enum Dicts {
 	user = "_local",
 }
 
-export const dictList = Object.values(Dicts);
+export const dictNameList = Object.values(Dicts);
 
 export const DEFAULT_DICT = Dicts.popular;