dirk-cfx-react 1.1.62 → 1.1.64

package/dist/components/index.js

@@ -1,12 +1,12 @@
-import { Flex, Text, Image, TextInput, Select, Box, useMantineTheme, alpha, Progress, RingProgress, Portal, Button, Loader, ActionIcon, Stack, Group, JsonInput } from '@mantine/core';
+import { Flex, Text, Image, TextInput, Select, Box, useMantineTheme, Tooltip, alpha, Progress, RingProgress, Portal, Button, Loader, ActionIcon, Stack, Group, JsonInput } from '@mantine/core';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { createContext, useContext, useRef, useState, useEffect, useMemo } from 'react';
 import { create, useStore, createStore } from 'zustand';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { motion, AnimatePresence, useMotionValue } from 'framer-motion';
+import { Info, X, AlertTriangle, Trash2, Check, FlaskConical, ChevronUp, ChevronDown, ArrowLeft, Undo2, Redo2, Save, History, XCircle, Code2, RotateCcw, Search, Filter, User } from 'lucide-react';
 import clickSoundUrl from '../click_sound-PNCRRTM4.mp3';
 import hoverSoundUrl from '../hover_sound-NBUA222C.mp3';
-import { X, AlertTriangle, Trash2, Check, FlaskConical, ChevronUp, ChevronDown, ArrowLeft, Undo2, Redo2, Save, History, XCircle, Code2, RotateCcw, Search, Filter, User } from 'lucide-react';
 import { QueryClient, QueryClientProvider, useInfiniteQuery } from '@tanstack/react-query';
 
 // src/components/BlipSelect.tsx
@@ -1267,13 +1267,24 @@ async function fetchNui(eventName, data, mockData) {
   }
   const overrideResourceName = useSettings.getState().overideResourceName;
   const resourceName = window.GetParentResourceName ? window.GetParentResourceName() : overrideResourceName ? overrideResourceName : "dirk-cfx-react";
-  const resp = await fetch(`https://${resourceName}/${eventName}`, options);
-  return await resp.json();
+  try {
+    const resp = await fetch(`https://${resourceName}/${eventName}`, options);
+    return await resp.json();
+  } catch {
+    return mockData ?? {};
+  }
 }
 async function registerInitialFetch(eventName, data, mockData) {
   const fetcher = () => fetchNui(eventName, data, mockData);
   return fetcher();
 }
+var reportedMissing = /* @__PURE__ */ new Set();
+function reportMissingLocale(key) {
+  if (!key || reportedMissing.has(key)) return;
+  reportedMissing.add(key);
+  fetchNui("REPORT_MISSING_LOCALE", { key }).catch(() => {
+  });
+}
 var localeStore = create((set, get) => {
   return {
     locales: {
@@ -1281,6 +1292,7 @@ var localeStore = create((set, get) => {
     },
     locale: (key, ...args) => {
       const exists = get().locales[key];
+      if (!exists) reportMissingLocale(key);
       let translation = exists || key;
       if (args.length) {
         translation = translation.replace(/%s/g, () => String(args.shift() || ""));
@@ -1294,6 +1306,14 @@ registerInitialFetch("GET_LOCALES", void 0).then((data) => {
   localeStore.setState({ locales: data });
 }).catch(() => {
 });
+if (typeof window !== "undefined") {
+  window.addEventListener("message", (event) => {
+    const msg = event.data;
+    if (!msg || msg.action !== "UPDATE_DIRK_LIB_LOCALES") return;
+    if (!msg.data || typeof msg.data !== "object") return;
+    localeStore.setState({ locales: msg.data });
+  });
+}
 var useItems = create(() => ({}));
 var useItemsList = (excludeItemNames = []) => {
   const excludeSet = new Set(excludeItemNames);
@@ -1933,8 +1953,8 @@ function InputContainer(props) {
               (props.title || props.description) && /* @__PURE__ */ jsxs(
                 Flex,
                 {
-                  direction: "column",
-                  gap: "xxs",
+                  align: "center",
+                  flex: 1,
                   p: props.p == "0" ? "sm" : 0,
                   children: [
                     props.title && /* @__PURE__ */ jsx(
@@ -1951,12 +1971,26 @@ function InputContainer(props) {
                       }
                     ),
                     props.description && /* @__PURE__ */ jsx(
-                      Text,
+                      Tooltip,
                       {
-                        size: "xs",
-                        c: "rgba(255, 255, 255, 0.8)",
-                        fw: 400,
-                        children: props.description
+                        label: props.description,
+                        position: "top-end",
+                        withArrow: true,
+                        multiline: true,
+                        maw: "22vh",
+                        styles: {
+                          tooltip: {
+                            background: alpha(theme.colors.dark[7], 0.95),
+                            border: `0.1vh solid rgba(255,255,255,0.1)`,
+                            color: "rgba(255,255,255,0.75)",
+                            fontFamily: "Akrobat Bold",
+                            fontSize: "1.3vh",
+                            lineHeight: 1.3,
+                            padding: "0.6vh 0.8vh",
+                            letterSpacing: "0.03em"
+                          }
+                        },
+                        children: /* @__PURE__ */ jsx(Flex, { align: "center", justify: "center", style: { marginLeft: "auto", cursor: "help" }, children: /* @__PURE__ */ jsx(Info, { size: "1.6vh", color: alpha(theme.colors[theme.primaryColor][5], 0.45) }) })
                       }
                     )
                   ]
@@ -1973,13 +2007,7 @@ function InputContainer(props) {
                   children: props.error
                 }
               ),
-              /* @__PURE__ */ jsx(
-                Flex,
-                {
-                  ml: "auto",
-                  children: props.rightSection
-                }
-              )
+              props.rightSection && /* @__PURE__ */ jsx(Flex, { children: props.rightSection })
             ]
           }
         ),