refactor: Split CharacterSheet.tsx into separate components

src/components/ManagePage.tsx

@@ -0,0 +1,96 @@
+import React from "react";
+
+interface ManagePageProps {
+  isActive: boolean;
+  saveSheet: () => void;
+  loadSheet: () => void;
+  exportSheet: () => void;
+  handleImportFile: (e: React.ChangeEvent<HTMLInputElement>) => void;
+  importFileRef: React.RefObject<HTMLInputElement | null>;
+  copyShareURL: () => Promise<void>;
+  copyStatus: boolean;
+}
+
+export default function ManagePage({
+  isActive,
+  saveSheet,
+  loadSheet,
+  exportSheet,
+  handleImportFile,
+  importFileRef,
+  copyShareURL,
+  copyStatus,
+}: ManagePageProps) {
+  return (
+    <div className={`page${isActive ? " active" : ""}`} id="page-manage">
+      <div className="manage-grid">
+        <div className="section">
+          <div className="section-title">
+            <span className="icon">◈</span> Local Save
+          </div>
+          <p className="manage-desc">
+            Save your character sheet to your browser's local storage, or load a previously saved
+            sheet.
+          </p>
+          <div className="manage-btn-row">
+            <button type="button" className="btn-save btn-lg" onClick={saveSheet}>
+              ✦ Save to Browser
+            </button>
+            <button type="button" className="btn-load btn-lg" onClick={loadSheet}>
+              ↑ Load from Browser
+            </button>
+          </div>
+        </div>
+
+        <div className="section">
+          <div className="section-title">
+            <span className="icon">⊕</span> JSON File
+          </div>
+          <p className="manage-desc">
+            Export your character to a JSON file for backup or sharing, or import from a previously
+            exported file.
+          </p>
+          <div className="manage-btn-row">
+            <button type="button" className="btn-save btn-export btn-lg" onClick={exportSheet}>
+              ↓ Export JSON
+            </button>
+            <button
+              type="button"
+              className="btn-load btn-import btn-lg"
+              onClick={() => {
+                if (!importFileRef.current) return;
+                importFileRef.current.value = "";
+                importFileRef.current.click();
+              }}
+            >
+              ↑ Import JSON
+            </button>
+            <input
+              ref={importFileRef}
+              type="file"
+              accept=".json,application/json"
+              style={{ display: "none" }}
+              onChange={handleImportFile}
+            />
+          </div>
+        </div>
+
+        <div className="section col-span-2">
+          <div className="section-title">
+            <span className="icon">⎘</span> Share via URL
+          </div>
+          <p className="manage-desc">
+            Encode your character's current state into a shareable link. Anyone who opens the link
+            will see your character — auto-save is disabled for viewers.
+          </p>
+          <div className="manage-btn-row">
+            <button type="button" className="btn-save btn-export btn-lg" onClick={copyShareURL}>
+              ⎘ Copy URL
+            </button>
+            <span className={`save-status${copyStatus ? " show" : ""}`}>Copied!</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}