add spool count in locations with a setting to enable / disable the display

client/src/pages/locations/components/location.tsx

@@ -9,6 +9,7 @@ import { ISpool } from "../../spools/model";
 import { DragItem, ItemTypes, SpoolDragItem } from "../dnd";
 import { EMPTYLOC } from "../functions";
 import { SpoolList } from "./spoolList";
+import { useGetSetting } from "../../../utils/querySettings";
 
 const { useToken } = theme;
 
@@ -139,6 +140,10 @@ export function Location({
   const titleStyle = {
     color: canEditTitle ? undefined : token.colorTextTertiary,
   };
+  const showSpoolCount = JSON.parse(useGetSetting("show_spool_count").data?.value ?? "false");
+  const spoolCountStyle = {
+    color: token.colorTextQuaternary,
+  };
 
   return (
     <div
@@ -169,8 +174,11 @@ export function Location({
               setEditTitle(true);
             }}
             style={titleStyle}
-          >
+            >
             {displayTitle}
+            {showSpoolCount && (
+              <span style={spoolCountStyle}>{" "}({spools.length})</span>
+            )}
           </span>
         )}
         {showDelete && <Button icon={<DeleteOutlined />} size="small" type="text" onClick={onDelete} />}

client/src/pages/settings/generalSettings.tsx

@@ -8,6 +8,7 @@ export function GeneralSettings() {
   const setBaseUrl = useSetSetting("base_url");
   const setCurrency = useSetSetting("currency");
   const setRoundPrices = useSetSetting("round_prices");
+  const setShowSpoolCount = useSetSetting("show_spool_count");
   const [form] = Form.useForm();
   const [messageApi, contextHolder] = message.useMessage();
   const t = useTranslate();
@@ -19,6 +20,7 @@ export function GeneralSettings() {
         currency: JSON.parse(settings.data.currency.value),
         base_url: JSON.parse(settings.data.base_url.value),
         round_prices: JSON.parse(settings.data.round_prices.value),
+        show_spool_count: JSON.parse(settings.data.show_spool_count.value),
       });
     }
   }, [settings.data, form]);
@@ -31,7 +33,7 @@ export function GeneralSettings() {
   }, [setCurrency.isSuccess, messageApi, t]);
 
   // Handle form submit
-  const onFinish = (values: { currency: string; base_url: string, round_prices: boolean }) => {
+  const onFinish = (values: { currency: string; base_url: string, round_prices: boolean, show_spool_count: boolean }) => {
     // Check if the currency has changed
     if (settings.data?.currency.value !== JSON.stringify(values.currency)) {
       setCurrency.mutate(values.currency);
@@ -45,6 +47,11 @@ export function GeneralSettings() {
     if (settings.data?.round_prices.value !== JSON.stringify(values.round_prices)) {
       setRoundPrices.mutate(values.round_prices);
     }
+
+    // Check if the setting to show spool count has changed
+    if (settings.data?.show_spool_count.value !== JSON.stringify(values.show_spool_count)) {
+      setShowSpoolCount.mutate(values.show_spool_count);
+    }
   };
 
   return (<>
@@ -55,6 +62,8 @@ export function GeneralSettings() {
       initialValues={{
         currency: settings.data?.currency.value,
         round_prices: settings.data?.round_prices.value,
+        base_url: settings.data?.base_url.value,
+        show_spool_count: settings.data?.show_spool_count.value,
       }}
       onFinish={onFinish}
       style={{
@@ -102,6 +111,15 @@ export function GeneralSettings() {
         <Checkbox />
       </Form.Item>
 
+      <Form.Item
+        label={t("settings.general.show_spool_count.label")}
+        tooltip={t("settings.general.show_spool_count.tooltip")}
+        name="show_spool_count"
+        valuePropName="checked"
+      >
+        <Checkbox />
+      </Form.Item>
+
       <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
         <Button type="primary" htmlType="submit" loading={settings.isFetching || setCurrency.isLoading}>
           {t("buttons.save")}