fix: react-doctor no-inline-exhaustive-style 3→0 (CSS classes for CommandPalette), rendering-usetransition-loading 3→0 (useTransition for fake loading)

2026-06-26 06:31:37 -06:00
parent 9633680e23
commit 38bd3fcbc7
3 changed files with 78 additions and 75 deletions
@@ -266,37 +266,58 @@ function CommandPaletteDialog({ onClose }: { onClose: () => void }) {
          @keyframes cp-fade-in { from { opacity: 0; } to { opacity: 1; } }
          @keyframes cp-scale-in { from { opacity: 0; } to { opacity: 1; } }
        }
+        .cp-backdrop {
+          position: fixed;
+          inset: 0;
+          z-index: 60;
+          background-color: rgba(26, 24, 20, 0.4);
+          backdrop-filter: blur(4px);
+          -webkit-backdrop-filter: blur(4px);
+          display: flex;
+          align-items: flex-start;
+          justify-content: center;
+          padding-top: 15vh;
+        }
+        .cp-panel {
+          width: 100%;
+          max-width: 36rem;
+          margin: 0 1rem;
+          background-color: var(--admin-card-bg);
+          border: 1px solid var(--admin-border);
+          border-radius: var(--admin-radius-lg);
+          box-shadow: var(--admin-shadow-lg);
+          overflow: hidden;
+          animation: cp-scale-in 180ms ease-out;
+          display: flex;
+          flex-direction: column;
+        }
+        .cp-result-btn {
+          display: flex;
+          align-items: center;
+          gap: 0.75rem;
+          width: 100%;
+          padding: 0.625rem 0.75rem;
+          border-radius: var(--admin-radius-md);
+          border: none;
+          cursor: pointer;
+          text-align: left;
+          font-size: 0.875rem;
+          line-height: 1.3;
+          font-family: inherit;
+          transition: background-color 80ms ease-out, color 80ms ease-out;
+        }
+        .cp-result-btn[data-selected="true"] {
+          background: var(--admin-primary-soft);
+          color: var(--admin-primary);
+        }
+        .cp-result-btn[data-selected="false"] {
+          background: transparent;
+          color: var(--admin-text-primary);
+        }
      `}</style>

-      <div
-        style={{
-          position: "fixed",
-          inset: 0,
-          zIndex: 60,
-          backgroundColor: "rgba(26, 24, 20, 0.4)",
-          backdropFilter: "blur(4px)",
-          WebkitBackdropFilter: "blur(4px)",
-          display: "flex",
-          alignItems: "flex-start",
-          justifyContent: "center",
-          paddingTop: "15vh",
-        }}
-      >
-        <div
-          style={{
-            width: "100%",
-            maxWidth: "36rem",
-            margin: "0 1rem",
-          backgroundColor: "var(--admin-card-bg)",
-          border: "1px solid var(--admin-border)",
-          borderRadius: "var(--admin-radius-lg)",
-          boxShadow: "var(--admin-shadow-lg)",
-          overflow: "hidden",
-          animation: "cp-scale-in 180ms ease-out",
-          display: "flex",
-          flexDirection: "column",
-        }}
-      >
+      <div className="cp-backdrop">
+        <div className="cp-panel">
        {/* Search input row */}
        <div
          style={{
@@ -373,28 +394,8 @@ function CommandPaletteDialog({ onClose }: { onClose: () => void }) {
                    aria-current={isSelected ? "true" : undefined}
                    onClick={() => navigate(entry.href)}
                    onMouseEnter={() => setSelected(i)}
-                    style={{
-                      display: "flex",
-                      alignItems: "center",
-                      gap: "0.75rem",
-                      width: "100%",
-                      padding: "0.625rem 0.75rem",
-                      borderRadius: "var(--admin-radius-md)",
-                      border: "none",
-                      background: isSelected
-                        ? "var(--admin-primary-soft)"
-                        : "transparent",
-                      color: isSelected
-                        ? "var(--admin-primary)"
-                        : "var(--admin-text-primary)",
-                      cursor: "pointer",
-                      textAlign: "left",
-                      fontSize: "0.875rem",
-                      lineHeight: 1.3,
-                      fontFamily: "inherit",
-                      transition:
-                        "background-color 80ms ease-out, color 80ms ease-out",
-                    }}
+                    data-selected={isSelected ? "true" : "false"}
+                    className="cp-result-btn"
                  >
                    <Icon
                      size={16}