-
-
- {selectedCharacters.length > 0 && (
-
- )}
+ {/* Top Bar: Title & Upload Trigger */}
+
+
+
+
+ FreeSR Protocol
+
+ JSON Importer
+
+
+ {transI18n("freeSRImport")}
+
- {Error && (
-
😭 {Error}
+
+ {/* File Dropzone / Active File Badge */}
+
+
+ {!validFreeSRData ? (
+
fileInputRef.current?.click()}
+ onDrop={handleDrop}
+ onDragOver={handleDragOver}
+ onDragLeave={handleDragLeave}
+ className={`flex items-center gap-3 px-4 py-2.5 rounded-xl border border-dashed cursor-pointer transition-all duration-200 select-none w-full sm:w-auto ${
+ isDragging
+ ? 'bg-primary/15 border-primary shadow-[0_0_20px_rgba(var(--color-primary-rgb,6,182,212),0.3)] scale-[1.02]'
+ : 'bg-base-200/50 hover:bg-base-200/80 border-white/20 hover:border-primary/50'
+ }`}
+ >
+
+
+
+
+
+ {transI18n("pickAFile")}
+ (.json)
+
+
+ {transI18n("onlySupportFreeSRJsonFile")}
+
+
+
+ ) : (
+
+
+
+
+ {fileName || "data.json"}
+
+
+ {availableCharacters.length} {transI18n("avatars")}
+
+
+
+
)}
-
- {/* Selection Info */}
-
-
-
- {transI18n("selectedCharacters")}:
-
-
- {selectedCharacters.length}
-
-
-
-
-
-
-
- {isLoading && (
-
-
+
+ {/* Error Message */}
+ {errorMsg && (
+
)}
+
+ {/* Floating Selection & Actions Bar */}
+ {validFreeSRData && (
+
+ {/* Left: Counter and Quick Select */}
+
+
+
+
+ {transI18n("selectedCharacters")}:
+
+
+ {selectedCharacters.length} / {availableCharacters.length}
+
+
+
+
+
+
+
+
+
+
+
+ {/* Right: Import CTA */}
+
+
+ )}
+
+ {/* Loading Shimmer State */}
+ {isLoading && (
+
+ {[1, 2, 3, 4, 5, 6].map((i) => (
+
+ ))}
+
+ )}
+
+ {/* Empty State (when no valid data is loaded) */}
+ {!isLoading && !validFreeSRData && (
+
fileInputRef.current?.click()}
+ onDrop={handleDrop}
+ onDragOver={handleDragOver}
+ onDragLeave={handleDragLeave}
+ className="relative overflow-hidden py-12 sm:py-16 px-4 sm:px-6 rounded-2xl border border-dashed border-white/15 bg-base-200/20 hover:bg-base-200/40 transition-all duration-300 text-center cursor-pointer group select-none"
+ >
+ {/* Ambient Glow */}
+
+
+
+
+
+
+
+
+
+ {transI18n("noFreeSRDataLoaded")}
+
+
+ {transI18n("dropFreeSRJsonHint")}
+
+
+
+ {/* Step hints */}
+
+
+
{transI18n("step1")}
+
{transI18n("exportJsonFromFreeSR")}
+
+
+
{transI18n("step2")}
+
{transI18n("dropOrSelectFile")}
+
+
+
{transI18n("step3")}
+
{transI18n("syncCharacterBuilds")}
+
+
+
+
+ )}
+
{/* Character Grid */}
-
- {validFreeSRData && Object.values(validFreeSRData.avatars).filter(it => mapAvatar?.[it.avatar_id]).map((character) => {
- return (
+ {!isLoading && validFreeSRData && (
+
+ {availableCharacters.map((character) => (
- )
- })}
-
+ ))}
+
+ )}
- )
+ );
}
+
diff --git a/src/components/quickView/index.tsx b/src/components/quickView/index.tsx
index 6a6459e..e338900 100644
--- a/src/components/quickView/index.tsx
+++ b/src/components/quickView/index.tsx
@@ -401,7 +401,8 @@ export default function QuickView() {
subAffix,
relicEffects,
mapRelicSet,
- avatarSkillTree
+ avatarSkillTree,
+ transI18n
])
return (
diff --git a/src/components/relicsInfo/index.tsx b/src/components/relicsInfo/index.tsx
index b910b6b..18b755f 100644
--- a/src/components/relicsInfo/index.tsx
+++ b/src/components/relicsInfo/index.tsx
@@ -1,6 +1,7 @@
/* eslint-disable react-hooks/exhaustive-deps */
"use client";
-import { useCallback, useEffect, useMemo } from "react";
+import { useCallback, useEffect, useMemo, useState } from "react";
+import Image from "next/image";
import RelicMaker from "../relicBar";
import useUserDataStore from "@/stores/userDataStore";
import { useTranslations } from "next-intl";
@@ -15,6 +16,8 @@ import useDetailDataStore from "@/stores/detailDataStore";
import { getLocaleName } from '@/helper';
import useLocaleStore from "@/stores/localeStore";
import { useShallow } from 'zustand/react/shallow';
+import { Trash2 } from "lucide-react";
+import { toast } from "react-toastify";
export default function RelicsInfo() {
const { avatars, setAvatar } = useUserDataStore(
@@ -78,6 +81,8 @@ export default function RelicsInfo() {
}))
)
+ const [relicSlotToDelete, setRelicSlotToDelete] = useState
(null);
+
const handleShow = (modalId: string) => {
const modal = document.getElementById(modalId) as HTMLDialogElement | null;
if (modal) {
@@ -125,6 +130,25 @@ export default function RelicsInfo() {
}
};
+ const requestDeleteRelic = (slot: string) => {
+ setRelicSlotToDelete(slot);
+ handleShow("delete_relic_confirm_modal");
+ };
+
+ const handleConfirmDelete = () => {
+ if (relicSlotToDelete) {
+ handlerDeleteRelic(relicSlotToDelete);
+ toast.success(transI18n("relicDeletedSuccessfully"));
+ handleCloseModal("delete_relic_confirm_modal");
+ setRelicSlotToDelete(null);
+ }
+ };
+
+ const handleCancelDelete = () => {
+ handleCloseModal("delete_relic_confirm_modal");
+ setRelicSlotToDelete(null);
+ };
+
const handlerChangeRelic = (slot: string) => {
const relic = getRelic(slot)
setSelectedRelicSlot(slot)
@@ -217,6 +241,7 @@ export default function RelicsInfo() {
for (const item of modalConfigs) {
handleCloseModal(item?.id || "")
}
+ handleCloseModal("delete_relic_confirm_modal")
}
};
@@ -250,23 +275,15 @@ export default function RelicsInfo() {