refactor(explore): extract components from ExploreView into src/components/explore/

To de-godify \ExploreView.tsx\, the inline components \ClusterCloud\, \ExploreLoadingPanel\, \TagAtlas\, and \TagManageList\, along with shared constants in \layout.ts\, have been extracted into independent files. This improves modularity and maintainability.
2026-07-04 18:09:41 +01:00
parent 2c0b928bf5
commit 58ecb03070
6 changed files with 1115 additions and 1092 deletions
@@ -0,0 +1,41 @@
+import { motion } from "framer-motion";
+import type { ExploreMode } from "../../store";
+
+function Spinner() {
+  return (
+    <motion.div
+      className="explore-spinner h-5 w-5 rounded-full border-2 border-white/15 border-t-white/50"
+      animate={{ rotate: 360 }}
+      transition={{ duration: 0.85, repeat: Infinity, ease: "linear" }}
+    />
+  );
+}
+
+export function ExploreLoadingPanel({ mode }: { mode: ExploreMode }) {
+  const title = mode === "visual" ? "Building visual clusters" : "Reading tag frequencies";
+  const subtitle =
+    mode === "visual"
+      ? "Grouping similar images into browsable clusters."
+      : "Collecting tags from the current library scope.";
+
+  return (
+    <div className="flex flex-1 items-center justify-center px-8">
+      <div className="flex max-w-sm flex-col items-center text-center">
+        <div className="mb-4 flex items-center justify-center gap-3 text-white/65">
+          <Spinner />
+          <span className="text-sm font-medium">{title}</span>
+        </div>
+        <p className="text-sm leading-relaxed text-white/25">{subtitle}</p>
+        <div className="mt-6 h-px w-40 overflow-hidden rounded-full bg-white/[0.06]">
+          <motion.div
+            className="h-full w-16 rounded-full bg-white/25"
+            animate={{ x: [-72, 184] }}
+            transition={{ duration: 1.4, repeat: Infinity, ease: "easeInOut" }}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+