@solhun/feedback-kit-web 0.10.0 → 0.12.0

package/dist/index.cjs

@@ -1117,6 +1117,11 @@ function hintSourceFrom(queue) {
   const cacheKey = adapter.hintsCacheKey ?? "default";
   return { fetchHints: adapter.fetchHints.bind(adapter), cacheKey };
 }
+function connectionSourceFrom(queue) {
+  const adapter = queue.adapter;
+  if (!adapter || typeof adapter.fetchConnection !== "function") return null;
+  return adapter.fetchConnection.bind(adapter);
+}
 function resolveHintProvider(opts) {
   if (opts.hintProvider) return opts.hintProvider;
   if (opts.hints) {
@@ -1202,6 +1207,7 @@ function createWebWidget(opts) {
     widget,
     picking,
     store,
+    fetchConnection: connectionSourceFrom(opts.queue),
     dispose() {
       picking.dispose();
       widget.dispose();
@@ -1214,7 +1220,7 @@ var import_feedback_kit_core4 = require("@solhun/feedback-kit-core");
 var import_react = require("react");
 
 // src/version.ts
-var VERSION = true ? "0.10.0" : "dev";
+var VERSION = true ? "0.12.0" : "dev";
 
 // src/dev-clipboard.ts
 var import_feedback_kit_core3 = require("@solhun/feedback-kit-core");
@@ -1292,6 +1298,36 @@ function resolveDevMode(propValue, stored) {
   if (stored !== null) return stored;
   return propValue === true;
 }
+var SETTINGS_FLAG = "fk-settings";
+var SESSION_KEY = "feedback-kit:settings-visible";
+function isSettingsRequested(search, session) {
+  const store = session === void 0 ? sessionStorageOrNull() : session;
+  let requested = false;
+  try {
+    requested = new URLSearchParams(search).get(SETTINGS_FLAG) === "1";
+  } catch {
+    requested = false;
+  }
+  if (requested) {
+    try {
+      store?.setItem(SESSION_KEY, "1");
+    } catch {
+    }
+    return true;
+  }
+  try {
+    return store?.getItem(SESSION_KEY) === "1";
+  } catch {
+    return false;
+  }
+}
+function sessionStorageOrNull() {
+  try {
+    return globalThis.sessionStorage ?? null;
+  } catch {
+    return null;
+  }
+}
 
 // src/feedback-kit.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
@@ -1789,10 +1825,15 @@ function FeedbackKit(props) {
   const [pickingState, setPickingState] = (0, import_react.useState)(INITIAL_PICKING_STATE);
   const [announcement, setAnnouncement] = (0, import_react.useState)(null);
   const [devMode, setDevMode] = (0, import_react.useState)(() => resolveDevMode(props.devMode, readDevPreference()));
-  const [devSettingsAvailable] = (0, import_react.useState)(
+  const [devToggleAvailable] = (0, import_react.useState)(
     () => props.devMode === true || isDevSettingsHost(globalThis.location?.hostname ?? "")
   );
+  const [devSettingsAvailable] = (0, import_react.useState)(
+    () => props.devMode === true || isDevSettingsHost(globalThis.location?.hostname ?? "") || isSettingsRequested(globalThis.location?.search ?? "")
+  );
   const [devSettingsOpen, setDevSettingsOpen] = (0, import_react.useState)(false);
+  const [connection, setConnection] = (0, import_react.useState)(null);
+  const [connectionState, setConnectionState] = (0, import_react.useState)("idle");
   const devClipsRef = (0, import_react.useRef)([]);
   const [devClipCount, setDevClipCount] = (0, import_react.useState)(0);
   const [devFallbackText, setDevFallbackText] = (0, import_react.useState)(null);
@@ -1952,6 +1993,20 @@ function FeedbackKit(props) {
     if (devClipsRef.current.length === 0) return;
     await putOnClipboard(renderDevClipList(devClipsRef.current));
   }
+  function openDevSettings() {
+    setDevSettingsOpen(true);
+    if (connectionState !== "idle") return;
+    const fetchConnection = activeKit.fetchConnection;
+    if (!fetchConnection) {
+      setConnectionState("fail");
+      return;
+    }
+    setConnectionState("loading");
+    void fetchConnection().then((value) => {
+      setConnection(value);
+      setConnectionState(value ? "done" : "fail");
+    }).catch(() => setConnectionState("fail"));
+  }
   function toggleDevMode(next) {
     writeDevPreference(next);
     setDevMode(next);
@@ -2073,7 +2128,7 @@ function FeedbackKit(props) {
                     "data-fk-dev-settings-toggle": "",
                     "aria-label": "\uD53C\uB4DC\uBC31 \uC124\uC815",
                     "aria-expanded": devSettingsOpen,
-                    onClick: () => setDevSettingsOpen((open) => !open),
+                    onClick: () => devSettingsOpen ? setDevSettingsOpen(false) : openDevSettings(),
                     style: {
                       ...baseButton,
                       width: 46,
@@ -2205,6 +2260,7 @@ function FeedbackKit(props) {
                         {
                           type: "checkbox",
                           checked: devMode,
+                          disabled: !devToggleAvailable,
                           onChange: (event) => toggleDevMode(event.currentTarget.checked),
                           style: { marginTop: 3 }
                         }
@@ -2218,11 +2274,61 @@ function FeedbackKit(props) {
                         ] })
                       ] })
                     ] }),
-                    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", { style: { margin: "12px 0 0", color: TOKENS.muted, fontSize: 12 }, children: [
-                      "\uC774 \uC124\uC815\uC740 \uB85C\uCEEC(",
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+                      "div",
+                      {
+                        "data-fk-connection": "",
+                        style: {
+                          marginTop: 12,
+                          paddingTop: 12,
+                          borderTop: `1px solid ${TOKENS.line}`,
+                          fontSize: 12.5
+                        },
+                        children: [
+                          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { fontWeight: 700, marginBottom: 6 }, children: "\uBCF4\uB0B4\uB294 \uACF3" }),
+                          connectionState === "loading" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { color: TOKENS.muted }, children: "\uD655\uC778\uD558\uB294 \uC911\u2026" }) : connectionState === "fail" || !connection ? (
+                            // 조용히 비우면 "연결이 없다"로 읽힌다. 못 물어봤다는 것과 없다는 것은 다르다.
+                            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { color: TOKENS.muted }, children: "\uD655\uC778\uD558\uC9C0 \uBABB\uD588\uC2B5\uB2C8\uB2E4(\uC218\uC9D1\uCC98\uAC00 \uC751\uB2F5\uD558\uC9C0 \uC54A\uC74C)." })
+                          ) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("ul", { style: { margin: 0, paddingLeft: 16, color: TOKENS.ink, lineHeight: 1.7 }, children: [
+                            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("li", { children: [
+                              "\uC218\uC9D1\uCC98 \xB7 ",
+                              connection.project.name ?? "\uC774\uB984 \uC5C6\uB294 \uD504\uB85C\uC81D\uD2B8"
+                            ] }),
+                            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("li", { children: [
+                              "Linear \xB7",
+                              " ",
+                              connection.linear.connected ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+                                connection.linear.teamName ?? "\uC5F0\uACB0\uB41C \uD300",
+                                connection.linear.projectName ? ` / ${connection.linear.projectName}` : "",
+                                " \u2014 ",
+                                /* @__PURE__ */ (0, import_jsx_runtime.jsx)("b", { children: connection.linear.autoExport ? "\uC81C\uBCF4\uAC00 \uC790\uB3D9\uC73C\uB85C \uB098\uAC11\uB2C8\uB2E4" : "\uC790\uB3D9 \uBC1C\uC1A1 \uAEBC\uC9D0" })
+                              ] }) : "\uC5F0\uACB0 \uC5C6\uC74C"
+                            ] }),
+                            /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("li", { children: [
+                              "Symphony \xB7",
+                              " ",
+                              connection.symphonySlug ? `${connection.symphonySlug} \uAC00 \uCC98\uB9AC` : "\uC790\uB3D9 \uCC98\uB9AC \uC548 \uD568"
+                            ] })
+                          ] }),
+                          devMode ? (
+                            // 개발용 모드가 켜져 있으면 위 목록은 "원래 가던 곳"일 뿐이다. 그대로 두면
+                            // 지금도 거기로 가는 줄 읽는다.
+                            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { marginTop: 8, color: TOKENS.warning, fontWeight: 700 }, children: "\uC9C0\uAE08\uC740 \uC5B4\uB514\uC5D0\uB3C4 \uC548 \uBCF4\uB0C5\uB2C8\uB2E4 \u2014 \uAC1C\uBC1C\uC6A9 \uBAA8\uB4DC\uAC00 \uCF1C\uC838 \uC788\uC2B5\uB2C8\uB2E4." })
+                          ) : null
+                        ]
+                      }
+                    ),
+                    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: { margin: "12px 0 0", color: TOKENS.muted, fontSize: 12 }, children: devToggleAvailable ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+                      "\uAC1C\uBC1C\uC6A9 \uBAA8\uB4DC\uB294 \uB85C\uCEEC(",
                       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("code", { children: "localhost" }),
-                      ")\uC5D0\uC11C\uB9CC \uBCF4\uC785\uB2C8\uB2E4. \uBC30\uD3EC\uB41C \uD654\uBA74\uC5D0\uC11C\uB294 \uC2E4\uC0AC\uC6A9\uC790\uAC00 \uCF24 \uC218 \uC5C6\uC5B4\uC57C \uD574\uC11C \uC544\uC608 \uB744\uC6B0\uC9C0 \uC54A\uC2B5\uB2C8\uB2E4."
-                    ] }),
+                      ")\uC5D0\uC11C\uB9CC \uCF24 \uC218 \uC788\uC2B5\uB2C8\uB2E4. \uBC30\uD3EC\uB41C \uD654\uBA74\uC5D0\uC11C \uC2E4\uC0AC\uC6A9\uC790\uAC00 \uCF1C\uBA74 \uADF8 \uC0AC\uB78C \uC81C\uBCF4\uAC00 \uC5B4\uB514\uC5D0\uB3C4 \uC548 \uB0A8\uAE30 \uB54C\uBB38\uC785\uB2C8\uB2E4."
+                    ] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+                      "\uC5EC\uAE30\uC11C\uB294 ",
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("b", { children: "\uBCF4\uAE30\uB9CC" }),
+                      " \uB429\uB2C8\uB2E4. \uAC1C\uBC1C\uC6A9 \uBAA8\uB4DC\uB294 \uB85C\uCEEC(",
+                      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("code", { children: "localhost" }),
+                      ")\uC5D0\uC11C\uB9CC \uCF24 \uC218 \uC788\uC2B5\uB2C8\uB2E4 \u2014 \uC2E4\uC0AC\uC6A9\uC790\uAC00 \uCF1C\uBA74 \uADF8 \uC0AC\uB78C \uC81C\uBCF4\uAC00 \uC5B4\uB514\uC5D0\uB3C4 \uC548 \uB0A8\uAE30 \uB54C\uBB38\uC785\uB2C8\uB2E4."
+                    ] }) }),
                     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { display: "flex", justifyContent: "flex-end", marginTop: 12 }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", style: baseButton, onClick: () => setDevSettingsOpen(false), children: "\uB2EB\uAE30" }) })
                   ]
                 }