fix: chart interval, short tp/sl labels, position count

package.json

@@ -9,7 +9,8 @@
     "test": "vitest run",
     "lint": "biome check . && tsc",
     "format": "biome format --write .",
-    "generate-client-factory": "tsx --env-file .env scripts/generate-client-factory.ts"
+    "generate-client-factory": "tsx --env-file .env scripts/generate-client-factory.ts",
+    "generate-routes": "tsr generate"
   },
   "dependencies": {
     "@base-ui/react": "^1.1.0",
@@ -46,6 +47,7 @@
     "@biomejs/biome": "2.3.12",
     "@effect/language-service": "^0.72.0",
     "@tanstack/devtools-vite": "^0.4.1",
+    "@tanstack/router-cli": "^1.157.15",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/react": "^16.3.2",
     "@tim-smart/openapi-gen": "^0.4.13",

src/components/modules/Home/index.tsx

@@ -8,7 +8,10 @@ import {
 } from "lucide-react";
 import { useState } from "react";
 import hyperliquid from "@/assets/hyperliquid.png";
-import { selectedProviderBalancesAtom } from "@/atoms/portfolio-atoms";
+import {
+  positionsAtom,
+  selectedProviderBalancesAtom,
+} from "@/atoms/portfolio-atoms";
 import { providersAtom, selectedProviderAtom } from "@/atoms/providers-atoms";
 import { walletAtom } from "@/atoms/wallet-atom";
 import { AssetList } from "@/components/modules/Home/AssetList";
@@ -49,6 +52,22 @@ const ProviderBalancesDisplay = ({ wallet }: { wallet: WalletConnected }) => {
   return null;
 };
 
+const PositionsTabLabel = ({ wallet }: { wallet: WalletConnected }) => {
+  const positionsResult = useAtomValue(
+    positionsAtom(wallet.currentAccount.address),
+  );
+  const positionsCount = positionsResult.pipe(
+    Result.map((positions) => positions.length),
+    Result.getOrElse(() => 0),
+  );
+
+  return (
+    <span className="font-semibold text-sm tracking-tight">
+      Positions ({positionsCount})
+    </span>
+  );
+};
+
 export const Home = () => {
   const [activeTab, setActiveTab] = useState<"trade" | "positions">("trade");
   const wallet = useAtomValue(walletAtom).pipe(Result.getOrElse(() => null));
@@ -118,9 +137,13 @@ export const Home = () => {
             </TabsTrigger>
             <TabsTrigger value="positions" className="gap-2">
               <ChartNoAxesColumnIncreasing className="w-3.5 h-3.5" />
-              <span className="font-semibold text-sm tracking-tight">
-                Positions
-              </span>
+              {walletConnected ? (
+                <PositionsTabLabel wallet={wallet} />
+              ) : (
+                <span className="font-semibold text-sm tracking-tight">
+                  Positions (0)
+                </span>
+              )}
             </TabsTrigger>
           </TabsList>
 

src/components/modules/Order/Overview/index.tsx

@@ -207,6 +207,7 @@ function OrderContent({
                   entryPrice={currentPrice}
                   currentPrice={currentPrice}
                   liquidationPrice={calculations.liquidationPrice}
+                  side={side}
                   isLiquidationPriceEstimate
                 >
                   <CardSection
@@ -219,7 +220,7 @@ function OrderContent({
                     <Info className="w-3.5 h-3.5 text-gray-2" />
                     <div className="flex-1" />
                     <span className="text-gray-2 text-sm font-normal tracking-tight">
-                      {formatTPOrSLSettings(tpOrSLSettings)}
+                      {formatTPOrSLSettings(tpOrSLSettings, side)}
                     </span>
                     <ChevronRight className="w-4 h-4 text-gray-2" />
                   </CardSection>

src/components/modules/Order/Overview/leverage-dialog.tsx

@@ -1,6 +1,7 @@
 import type { DialogRootActions } from "@base-ui/react/dialog";
 import { X } from "lucide-react";
 import { useRef, useState } from "react";
+import { ToggleGroup } from "@/components/molecules/toggle-group";
 import { Button } from "@/components/ui/button";
 import { Dialog } from "@/components/ui/dialog";
 import { Divider } from "@/components/ui/divider";
@@ -33,7 +34,7 @@ export const LeverageDialog = (props: LeverageDialogProps) => {
 
   return (
     <Dialog.Root actionsRef={actionsRef}>
-      <Dialog.Trigger>{props.children}</Dialog.Trigger>
+      <Dialog.Trigger render={props.children} />
 
       <Dialog.Portal>
         <Dialog.Backdrop />
@@ -93,8 +94,7 @@ export function LeverageDialogContent({
     getPriceChangePercentToLiquidation({ currentPrice, liquidationPrice }),
   );
 
-  const handleLeverageClick = (leverage: number) => setLocalLeverage(leverage);
-  const handleStopClick = (stopValue: number) => setLocalLeverage(stopValue);
+  const leverageButtons = generateLeverageButtons(maxLeverage);
 
   const handleConfirm = () => {
     onLeverageChange(localLeverage);
@@ -168,72 +168,30 @@ export function LeverageDialogContent({
       </div>
 
       {/* Leverage Slider */}
-      <div className="flex flex-col gap-2.5 py-6">
-        <div className="px-1.5">
-          <Slider
-            value={leveragePercent}
-            onValueChange={(value) => {
-              const v = Array.isArray(value) ? value[0] : value;
-              const leverageValue = Math.round(
-                MIN_LEVERAGE + (v / 100) * (maxLeverage - MIN_LEVERAGE),
-              );
-              setLocalLeverage(leverageValue);
-            }}
-            min={0}
-            max={100}
-            stops={leverageStops.map(
-              (stop) =>
-                ((stop - MIN_LEVERAGE) / (maxLeverage - MIN_LEVERAGE)) * 100,
-            )}
-            onStopClick={(stopPercent) => {
-              const leverageValue = Math.round(
-                MIN_LEVERAGE +
-                  (stopPercent / 100) * (maxLeverage - MIN_LEVERAGE),
-              );
-              setLocalLeverage(leverageValue);
-            }}
-          />
-        </div>
-
-        {/* Leverage Labels */}
-        <div className="flex justify-between text-gray-2 text-xs font-semibold tracking-[-0.36px]">
-          {leverageStops.map((stop, index) => (
-            <button
-              type="button"
-              key={stop}
-              data-testid={`leverage-stop-${stop}`}
-              className={`cursor-pointer inline flex-0 hover:text-white transition-colors ${
-                index === 0
-                  ? "w-12 text-left"
-                  : index === leverageStops.length - 1
-                    ? "w-12 text-right"
-                    : "text-center"
-              }`}
-              onClick={() => handleStopClick(stop)}
-            >
-              {stop}x
-            </button>
-          ))}
-        </div>
-      </div>
-
-      {/* Leverage Buttons */}
-      <div className="flex gap-2 h-[38px]">
-        {generateLeverageButtons(maxLeverage).map((leverage) => (
-          <button
-            key={leverage}
-            type="button"
-            data-testid={`leverage-button-${leverage}`}
-            onClick={() => handleLeverageClick(leverage)}
-            className={`flex-1 flex items-center justify-center h-9 rounded-[10px] text-sm font-normal tracking-[-0.42px] transition-colors cursor-pointer ${
-              localLeverage === leverage
-                ? "bg-white text-black"
-                : "bg-white/5 text-gray-2 hover:bg-white/10"
-            }`}
-          >
-            {leverage}x
-          </button>
-        ))}
+      <div className="flex flex-col gap-4 py-6">
+        <Slider
+          value={leveragePercent}
+          onValueChange={(value) => {
+            const v = Array.isArray(value) ? value[0] : value;
+            const leverageValue = Math.round(
+              MIN_LEVERAGE + (v / 100) * (maxLeverage - MIN_LEVERAGE),
+            );
+            setLocalLeverage(leverageValue);
+          }}
+          min={0}
+          max={100}
+          stops={leverageStops}
+        />
+
+        {/* Leverage Buttons */}
+        <ToggleGroup
+          options={leverageButtons.map((stop) => ({
+            value: stop.toString(),
+            label: `${stop}x`,
+          }))}
+          value={localLeverage.toString()}
+          onValueChange={(value) => setLocalLeverage(Number(value))}
+        />
       </div>
 
       {/* Confirm Button */}

src/components/modules/Order/Overview/limit-price-dialog.tsx

@@ -31,7 +31,7 @@ export const LimitPriceDialog = (props: LimitPriceDialogProps) => {
 
   return (
     <Dialog.Root actionsRef={actionsRef}>
-      <Dialog.Trigger>{props.children}</Dialog.Trigger>
+      <Dialog.Trigger render={props.children} />
 
       <Dialog.Portal>
         <Dialog.Backdrop />

src/components/modules/Order/Overview/utils.ts

@@ -1,16 +1,23 @@
 import { Option } from "effect";
 import type { TPOrSLSettings } from "@/components/molecules/tp-sl-dialog";
 
-export function formatTPOrSLSettings(settings: TPOrSLSettings): string {
+export function formatTPOrSLSettings(
+  settings: TPOrSLSettings,
+  side: "long" | "short" = "long",
+): string {
   const tp = Option.fromNullable(settings.takeProfit.percentage).pipe(
     Option.filter((percentage) => percentage !== 0),
-    Option.map((percentage) => `TP +${percentage}%`),
+    Option.map((percentage) =>
+      side === "short" ? `TP -${percentage}%` : `TP +${percentage}%`,
+    ),
     Option.getOrElse(() => "TP Off"),
   );
 
   const sl = Option.fromNullable(settings.stopLoss.percentage).pipe(
     Option.filter((percentage) => percentage !== 0),
-    Option.map((percentage) => `SL -${percentage}%`),
+    Option.map((percentage) =>
+      side === "short" ? `SL +${percentage}%` : `SL -${percentage}%`,
+    ),
     Option.getOrElse(() => "SL Off"),
   );
 

src/components/modules/PositionDetails/Overview/Position/index.tsx

@@ -46,11 +46,13 @@ function PositionCardContent({
       amount: tpSlOrders.takeProfit?.triggerPrice ?? undefined,
       entryPrice: position.entryPrice,
       tpOrSl: "takeProfit",
+      side: position.side,
     }),
     stopLoss: getTPOrSLConfigurationFromPosition({
       amount: tpSlOrders.stopLoss?.triggerPrice ?? undefined,
       entryPrice: position.entryPrice,
       tpOrSl: "stopLoss",
+      side: position.side,
     }),
   };
 
@@ -205,6 +207,7 @@ function PositionCardContent({
               entryPrice={position.entryPrice}
               currentPrice={position.markPrice}
               liquidationPrice={position.liquidationPrice}
+              side={position.side}
               mode="takeProfit"
             >
               <Button
@@ -227,6 +230,7 @@ function PositionCardContent({
               entryPrice={position.entryPrice}
               currentPrice={position.markPrice}
               liquidationPrice={position.liquidationPrice}
+              side={position.side}
               mode="stopLoss"
             >
               <Button