dirk-cfx-react 1.1.91 → 1.1.93

package/dist/components/index.cjs

@@ -1265,11 +1265,11 @@ var colorNames = {
   Yellow: { r: 255, g: 255, b: 0 },
   YellowGreen: { r: 154, g: 205, b: 50 }
 };
-function colorWithAlpha(color, alpha17) {
+function colorWithAlpha(color, alpha18) {
   const lowerCasedColor = color.toLowerCase();
   if (colorNames[lowerCasedColor]) {
     const rgb = colorNames[lowerCasedColor];
-    return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${alpha17})`;
+    return `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, ${alpha18})`;
   }
   if (/^#([A-Fa-f0-9]{6})$/.test(color)) {
     const hex = color.slice(1);
@@ -1277,12 +1277,12 @@ function colorWithAlpha(color, alpha17) {
     const r = bigint >> 16 & 255;
     const g = bigint >> 8 & 255;
     const b = bigint & 255;
-    return `rgba(${r}, ${g}, ${b}, ${alpha17})`;
+    return `rgba(${r}, ${g}, ${b}, ${alpha18})`;
   }
   if (/^rgb\((\d{1,3}), (\d{1,3}), (\d{1,3})\)$/.test(color)) {
     const result = color.match(/^rgb\((\d{1,3}), (\d{1,3}), (\d{1,3})\)$/);
     if (result) {
-      return `rgba(${result[1]}, ${result[2]}, ${result[3]}, ${alpha17})`;
+      return `rgba(${result[1]}, ${result[2]}, ${result[3]}, ${alpha18})`;
     }
   }
   return color;
@@ -4452,11 +4452,11 @@ function cloneConfig(value) {
   return JSON.parse(JSON.stringify(value));
 }
 function ServerOnlyFetcher() {
-  const { fetchConfig } = getScriptConfigInstance();
+  const { fetchServerOnly } = getScriptConfigInstance();
   const { reinitialize } = useFormActions();
   react.useEffect(() => {
     let cancelled = false;
-    fetchConfig().then((full) => {
+    fetchServerOnly().then((full) => {
       if (!cancelled && full) reinitialize(full);
     }).catch(() => {
     });
@@ -4480,7 +4480,7 @@ function ConfigPanel(props) {
         if (isSaving) return;
         setIsSaving(true);
         try {
-          const result = await updateConfig(form.values);
+          const result = await updateConfig(form.values, form.changedFields);
           if (result?.success) {
             form.reinitialize(cloneConfig(form.values));
             dirkQueryClient.invalidateQueries({ queryKey: ["scriptConfigHistory"] });
@@ -5907,6 +5907,7 @@ function formatLabel(p) {
   }
   return parts.join(" \xB7 ");
 }
+var COMMON_ACE_GROUPS = ["group.admin", "group.mod", "group.superadmin"];
 var t = (key, fallback) => {
   const v = locale(key);
   return v === key ? fallback : v;
@@ -5929,7 +5930,6 @@ function AccessOverrideSection({
   schemaKey = "access",
   title,
   description,
-  groupType,
   includeOffline = true
 }) {
   const mantineTheme = core.useMantineTheme();
@@ -5944,14 +5944,19 @@ function AccessOverrideSection({
   const [addingGroup, setAddingGroup] = react.useState(false);
   const [addingPlayer, setAddingPlayer] = react.useState(false);
   const commitGroup = (name) => {
-    if (!name) return;
-    set("groups", [...value.groups, name]);
+    const g = name.trim();
+    if (!g) return;
+    if (!value.groups.includes(g)) set("groups", [...value.groups, g]);
     setAddingGroup(false);
   };
   const setGroup = (index, name) => {
     const next = [...value.groups];
     next[index] = name;
-    set("groups", next.filter((g) => g !== ""));
+    set("groups", next);
+  };
+  const quickAddGroup = (name) => {
+    if (value.groups.includes(name)) return;
+    set("groups", [...value.groups, name]);
   };
   const removeGroup = (index) => set("groups", value.groups.filter((_, i) => i !== index));
   const commitIdentifier = (id) => {
@@ -5983,19 +5988,68 @@ function AccessOverrideSection({
         ),
         /* @__PURE__ */ jsxRuntime.jsx(core.Text, { ff: "Akrobat Bold", size: "xxs", c: "rgba(255,255,255,0.4)", children: description || t(
           "AccessOverrideDesc",
-          "Grant access to this resource's admin panel to specific groups and players, in addition to your global dirk_lib admins. Enforcement is server-side."
+          "Grant access to this resource's admin panel to specific ACE groups and players, in addition to your global dirk_lib admins. Enforcement is server-side."
         ) }),
-        /* @__PURE__ */ jsxRuntime.jsx(SectionLabel, { icon: lucideReact.Users, label: t("AccessGroups", "Groups") }),
+        /* @__PURE__ */ jsxRuntime.jsx(SectionLabel, { icon: lucideReact.Users, label: t("AccessGroups", "Admin groups (ACE)") }),
+        /* @__PURE__ */ jsxRuntime.jsx(core.Flex, { gap: "xs", wrap: "wrap", children: COMMON_ACE_GROUPS.map((g) => {
+          const added = value.groups.includes(g);
+          return /* @__PURE__ */ jsxRuntime.jsxs(
+            core.Flex,
+            {
+              align: "center",
+              gap: "xxs",
+              onClick: added ? void 0 : () => quickAddGroup(g),
+              role: "button",
+              tabIndex: added ? -1 : 0,
+              "aria-disabled": added,
+              onKeyDown: (e) => {
+                if (added) return;
+                if (e.key === "Enter" || e.key === " ") {
+                  e.preventDefault();
+                  quickAddGroup(g);
+                }
+              },
+              px: "xs",
+              py: "xxs",
+              style: {
+                cursor: added ? "default" : "pointer",
+                opacity: added ? 0.4 : 1,
+                background: core.alpha(color, 0.12),
+                border: `0.1vh solid ${core.alpha(color, 0.4)}`,
+                borderRadius: "0.4vh",
+                transition: "background 0.15s, border-color 0.15s"
+              },
+              onMouseEnter: (e) => {
+                if (added) return;
+                e.currentTarget.style.background = core.alpha(color, 0.22);
+              },
+              onMouseLeave: (e) => {
+                if (added) return;
+                e.currentTarget.style.background = core.alpha(color, 0.12);
+              },
+              children: [
+                !added && /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Plus, { size: "1.2vh", color }),
+                /* @__PURE__ */ jsxRuntime.jsx(core.Text, { ff: "Akrobat Bold", size: "xxs", lts: "0.04em", c: color, children: g })
+              ]
+            },
+            g
+          );
+        }) }),
         /* @__PURE__ */ jsxRuntime.jsxs(core.Flex, { direction: "column", gap: "xxs", children: [
-          value.groups.length === 0 && !addingGroup && /* @__PURE__ */ jsxRuntime.jsx(EmptyHint, { text: t("AccessNoGroups", "No groups added.") }),
+          value.groups.length === 0 && !addingGroup && /* @__PURE__ */ jsxRuntime.jsx(
+            EmptyHint,
+            {
+              text: t("AccessNoGroups", "No ACE groups added. e.g. group.admin")
+            }
+          ),
           value.groups.map((name, i) => /* @__PURE__ */ jsxRuntime.jsxs(core.Flex, { align: "center", gap: "xs", children: [
             /* @__PURE__ */ jsxRuntime.jsx(
-              GroupName,
+              core.TextInput,
               {
                 value: name,
-                onChange: (v) => setGroup(i, v),
-                type: groupType,
-                placeholder: t("AccessPickGroup", "Pick a group\u2026"),
+                onChange: (e) => setGroup(i, e.currentTarget.value),
+                placeholder: t("AccessGroupPlaceholder", "ACE group or permission, e.g. group.admin"),
+                size: "xs",
                 style: { flex: 1 }
               }
             ),
@@ -6012,30 +6066,15 @@ function AccessOverrideSection({
               }
             )
           ] }, i)),
-          addingGroup && /* @__PURE__ */ jsxRuntime.jsxs(core.Flex, { align: "center", gap: "xs", children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              GroupName,
-              {
-                value: "",
-                onChange: (v) => commitGroup(v),
-                type: groupType,
-                placeholder: t("AccessPickGroup", "Pick a group\u2026"),
-                style: { flex: 1 }
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              core.ActionIcon,
-              {
-                variant: "subtle",
-                color: "red",
-                size: "md",
-                onClick: () => setAddingGroup(false),
-                title: t("Remove", "Remove"),
-                "aria-label": t("Remove", "Remove"),
-                children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { size: "1.4vh" })
-              }
-            )
-          ] })
+          addingGroup && /* @__PURE__ */ jsxRuntime.jsx(
+            AceGroupAddRow,
+            {
+              placeholder: t("AccessGroupPlaceholder", "ACE group or permission, e.g. group.admin"),
+              onCommit: commitGroup,
+              onCancel: () => setAddingGroup(false),
+              removeLabel: t("Remove", "Remove")
+            }
+          )
         ] }),
         !addingGroup && /* @__PURE__ */ jsxRuntime.jsx(AddRowButton, { label: t("AccessAddGroup", "Add group"), onClick: () => setAddingGroup(true) }),
         /* @__PURE__ */ jsxRuntime.jsx(SectionLabel, { icon: lucideReact.UserRound, label: t("AccessPlayers", "Players") }),
@@ -6135,6 +6174,53 @@ function AddRowButton({ label, onClick }) {
     }
   );
 }
+function AceGroupAddRow({
+  placeholder,
+  onCommit,
+  onCancel,
+  removeLabel
+}) {
+  const [draft, setDraft] = react.useState("");
+  const commit = () => {
+    if (draft.trim()) onCommit(draft);
+    else onCancel();
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(core.Flex, { align: "center", gap: "xs", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      core.TextInput,
+      {
+        value: draft,
+        onChange: (e) => setDraft(e.currentTarget.value),
+        onKeyDown: (e) => {
+          if (e.key === "Enter") {
+            e.preventDefault();
+            commit();
+          } else if (e.key === "Escape") {
+            e.preventDefault();
+            onCancel();
+          }
+        },
+        onBlur: commit,
+        placeholder,
+        size: "xs",
+        autoFocus: true,
+        style: { flex: 1 }
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      core.ActionIcon,
+      {
+        variant: "subtle",
+        color: "red",
+        size: "md",
+        onClick: onCancel,
+        title: removeLabel,
+        "aria-label": removeLabel,
+        children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Trash2, { size: "1.4vh" })
+      }
+    )
+  ] });
+}
 
 // src/utils/gtaAnimPostFx.ts
 var GTA_ANIM_POST_FX_GROUP_ORDER = [