feat: tools pages

Various other fixes:
- Better handeling of limit/since/before merging
- Expose timeout through request builder
- Expose PickN through request builder
- Fix tests

packages/app/src/Pages/settings/Menu.tsx

@@ -1,4 +1,4 @@
-import { useCallback } from "react";
+import { ReactNode, useCallback } from "react";
 import { FormattedMessage } from "react-intl";
 import { Link, useNavigate } from "react-router-dom";
 import Icon from "@/Icons/Icon";
@@ -7,6 +7,17 @@ import useLogin from "@/Hooks/useLogin";
 import classNames from "classnames";
 import { getCurrentSubscription } from "@/Subscription";
 
+export type SettingsMenuItems = Array<{
+  title: ReactNode,
+  items: Array<{
+    icon: string;
+    iconBg: string;
+    message: ReactNode,
+    path?: string;
+    action?: () => void;
+  }>
+}>;
+
 const SettingsIndex = () => {
   const login = useLogin();
   const navigate = useNavigate();
@@ -53,14 +64,20 @@ const SettingsIndex = () => {
         },
         ...(sub
           ? [
-              {
-                icon: "code-circle",
-                iconBg: "bg-indigo-500",
-                message: <FormattedMessage id="FvanT6" defaultMessage="Accounts" />,
-                path: "accounts",
-              },
-            ]
+            {
+              icon: "code-circle",
+              iconBg: "bg-indigo-500",
+              message: <FormattedMessage id="FvanT6" defaultMessage="Accounts" />,
+              path: "accounts",
+            },
+          ]
           : []),
+        {
+          icon: "tool",
+          iconBg: "bg-slate-800",
+          message: <FormattedMessage defaultMessage="Tools" id="nUT0Lv" />,
+          path: "tools"
+        }
       ],
     },
     {
@@ -109,23 +126,23 @@ const SettingsIndex = () => {
         },
         ...(CONFIG.features.subscriptions
           ? [
-              {
-                icon: "diamond",
-                iconBg: "bg-violet-500",
-                message: <FormattedMessage id="R/6nsx" defaultMessage="Subscription" />,
-                path: "/subscribe/manage",
-              },
-            ]
+            {
+              icon: "diamond",
+              iconBg: "bg-violet-500",
+              message: <FormattedMessage id="R/6nsx" defaultMessage="Subscription" />,
+              path: "/subscribe/manage",
+            },
+          ]
           : []),
         ...(CONFIG.features.zapPool
           ? [
-              {
-                icon: "piggy-bank",
-                iconBg: "bg-rose-500",
-                message: <FormattedMessage id="i/dBAR" defaultMessage="Zap Pool" />,
-                path: "/zap-pool",
-              },
-            ]
+            {
+              icon: "piggy-bank",
+              iconBg: "bg-rose-500",
+              message: <FormattedMessage id="i/dBAR" defaultMessage="Zap Pool" />,
+              path: "/zap-pool",
+            },
+          ]
           : []),
       ],
     },
@@ -140,11 +157,15 @@ const SettingsIndex = () => {
         },
       ],
     },
-  ];
+  ] as SettingsMenuItems;
 
+  return <SettingsMenuComponent menu={settingsGroups} />
+};
+
+export function SettingsMenuComponent({ menu }: { menu: SettingsMenuItems }) {
   return (
     <div className="flex flex-col">
-      {settingsGroups.map((group, groupIndex) => (
+      {menu.map((group, groupIndex) => (
         <div key={groupIndex} className="mb-4">
           <div className="p-2 font-bold uppercase text-secondary text-xs tracking-wide">{group.title}</div>
           {group.items.map(({ icon, iconBg, message, path, action }, index) => (
@@ -152,7 +173,6 @@ const SettingsIndex = () => {
               to={path || "#"}
               onClick={action}
               key={path || index}
-              end
               className={classNames("px-2.5 py-1.5 flex justify-between items-center border border-border-color", {
                 "rounded-t-xl": index === 0,
                 "rounded-b-xl": index === group.items.length - 1,
@@ -160,7 +180,7 @@ const SettingsIndex = () => {
               })}>
               <div className="flex items-center gap-3">
                 <div className={`p-1 ${iconBg} rounded-lg flex justify-center items-center text-white`}>
-                  <Icon name={icon} size={16} className="w-4 h-4 relative" />
+                  <Icon name={icon} size={18} className="relative" />
                 </div>
                 <span className="text-base font-semibold flex-grow">{message}</span>
               </div>
@@ -171,6 +191,6 @@ const SettingsIndex = () => {
       ))}
     </div>
   );
-};
+}
 
 export default SettingsIndex;