feat: stock detail page ui

frontend/.gitignore

@@ -21,3 +21,4 @@ dist-ssr
 # custom
 !lib
 .react-router
+.vite

frontend/package.json

@@ -6,13 +6,12 @@
   "scripts": {
     "dev": "react-router dev",
     "build": "react-router build",
-    "start": "react-router-serve ./build/server/index.js",
+    "start": "vite preview --outDir build/client",
     "tauri": "tauri"
   },
   "dependencies": {
     "@radix-ui/react-avatar": "^1.1.10",
     "@radix-ui/react-dialog": "^1.1.15",
-    "@radix-ui/react-scroll-area": "^1.2.10",
     "@radix-ui/react-separator": "^1.1.7",
     "@radix-ui/react-slot": "^1.2.3",
     "@radix-ui/react-tooltip": "^1.2.8",
@@ -21,17 +20,19 @@
     "@tauri-apps/plugin-opener": "^2.5.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "dayjs": "^1.11.18",
     "echarts": "^6.0.0",
     "isbot": "^5",
     "lucide-react": "^0.544.0",
+    "overlayscrollbars": "^2.12.0",
+    "overlayscrollbars-react": "^0.5.6",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
     "tailwind-merge": "^3.3.1"
   },
   "devDependencies": {
     "@biomejs/biome": "^2.2.4",
     "@react-router/dev": "^7.8.2",
-    "@react-router/fs-routes": "^7.8.2",
     "@react-router/serve": "^7.8.2",
     "@tailwindcss/vite": "^4.1.13",
     "@tauri-apps/cli": "^2.8.4",

frontend/src/app/home/_layout.tsx

@@ -0,0 +1,54 @@
+import { Plus } from "lucide-react";
+import { Outlet, useLocation } from "react-router";
+import { Button } from "@/components/ui/button";
+import {
+  StockMenu,
+  StockMenuGroup,
+  StockMenuGroupHeader,
+  StockMenuHeader,
+  StockMenuListItem,
+} from "@/components/valuecell/menus/stock-menus";
+import ScrollContainer from "@/components/valuecell/scroll-container";
+import { stockData } from "@/mock/stock-data";
+
+export default function HomeLayout() {
+  const { pathname } = useLocation();
+
+  // Extract stock symbol (e.g., AAPL) from path like /stock/AAPL
+  const stockSymbol = pathname.split("/")[2];
+
+  return (
+    <div className="flex flex-1 overflow-hidden">
+      <ScrollContainer className="flex-1">
+        <Outlet />
+      </ScrollContainer>
+
+      <aside className="flex h-full flex-col justify-between border-l">
+        <StockMenu>
+          <StockMenuHeader>My Stocks</StockMenuHeader>
+          <ScrollContainer>
+            {stockData.map((group) => (
+              <StockMenuGroup key={group.title}>
+                <StockMenuGroupHeader>{group.title}</StockMenuGroupHeader>
+                {group.stocks.map((stock) => (
+                  <StockMenuListItem
+                    key={stock.symbol}
+                    stock={stock}
+                    to={`/stock/${stock.symbol}`}
+                    isActive={stockSymbol === stock.symbol}
+                    replace={!!stockSymbol}
+                  />
+                ))}
+              </StockMenuGroup>
+            ))}
+          </ScrollContainer>
+        </StockMenu>
+
+        <Button variant="secondary" className="mx-5 mb-6 font-bold text-sm">
+          <Plus size={16} />
+          Add Stocks
+        </Button>
+      </aside>
+    </div>
+  );
+}

frontend/src/app/_home/components/index.tsx → frontend/src/app/home/components/index.tsx

@@ -1,3 +1,4 @@
 export * from "./agent-recommend-list";
 export * from "./agent-suggestions-list";
 export * from "./sparkline-stock-list";
+export * from "./stock-details-list";

frontend/src/app/_home/components/sparkline-stock-list.tsx → frontend/src/app/home/components/sparkline-stock-list.tsx

@@ -1,14 +1,15 @@
-import { MiniSparkline } from "@valuecell/charts/mini-sparkline";
+import MiniSparkline from "@valuecell/charts/mini-sparkline";
+import { STOCK_COLORS } from "@/constants/stock";
 import { cn, formatChange, formatPrice, getChangeType } from "@/lib/utils";
-import type { StockChangeType } from "@/types/stock";
+import type { SparklineData } from "@/types/chart";
 
 export interface SparklineStock {
   symbol: string;
   price: number;
   currency: string;
   changeAmount: number;
   changePercent: number;
-  sparklineData: number[];
+  sparklineData: SparklineData;
 }
 
 interface SparklineStockListProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -20,18 +21,6 @@ interface SparklineStockItemProps
   stock: SparklineStock;
 }
 
-const BASE_COLOR: Record<StockChangeType, string> = {
-  positive: "#3F845F",
-  negative: "#E25C5C",
-  neutral: "#707070",
-};
-
-const GRADIENT_COLORS: Record<StockChangeType, [string, string]> = {
-  positive: ["rgba(63, 132, 95, 0.5)", "rgba(63, 132, 95, 0)"],
-  negative: ["rgba(226, 92, 92, 0.5)", "rgba(226, 92, 92, 0)"],
-  neutral: ["rgba(112, 112, 112, 0.5)", "rgba(112, 112, 112, 0)"],
-};
-
 function SparklineStockItem({
   className,
   stock,
@@ -54,21 +43,27 @@ function SparklineStockItem({
           </p>
         </div>
         <p
-          className="font-semibold text-[20px] leading-[26px]"
-          style={{ color: BASE_COLOR[changeType] }}
+          className={`font-semibold text-[20px] leading-[26px]`}
+          style={{
+            color: STOCK_COLORS[changeType],
+          }}
         >
           {formatPrice(stock.price, stock.currency)}
         </p>
         <div className="flex items-start gap-1">
           <span
-            className="font-normal text-[12px] leading-[16px]"
-            style={{ color: BASE_COLOR[changeType] }}
+            className={`font-normal text-[12px] leading-[16px]`}
+            style={{
+              color: STOCK_COLORS[changeType],
+            }}
           >
             {formatChange(stock.changeAmount)}
           </span>
           <span
-            className="font-normal text-[12px] leading-[16px]"
-            style={{ color: BASE_COLOR[changeType] }}
+            className={`font-normal text-[12px] leading-[16px]`}
+            style={{
+              color: STOCK_COLORS[changeType],
+            }}
           >
             {formatChange(stock.changePercent, "%")}
           </span>
@@ -78,8 +73,7 @@ function SparklineStockItem({
       <MiniSparkline
         className="pointer-events-none"
         data={stock.sparklineData}
-        color={BASE_COLOR[changeType]}
-        gradientColors={GRADIENT_COLORS[changeType]}
+        changeType={changeType}
         width={140}
         height={64}
       />