feat: introduce LinkButton component, refactor external link handling, and simplify StockDetail interface.

Author: DigHuang

frontend/src/app/home/stock.tsx

@@ -4,6 +4,7 @@ import { useNavigate, useParams } from "react-router";
 import { useGetStockDetail, useRemoveStockFromWatchlist } from "@/api/stock";
 import TradingViewAdvancedChart from "@/components/tradingview/tradingview-advanced-chart";
 import { Button } from "@/components/ui/button";
+import LinkButton from "@/components/valuecell/button/link-button";
 import type { Route } from "./+types/stock";
 
 function Stock() {
@@ -82,12 +83,6 @@ function Stock() {
         />
       </div>
 
-      {/* <div className="flex flex-col gap-4">
-        <h2 className="font-bold text-lg">Details</h2>
-
-        <StockDetailsList data={detailsData} />
-      </div> */}
-
       <div className="flex flex-col gap-4">
         <h2 className="font-bold text-lg">About</h2>
 
@@ -112,14 +107,12 @@ function Stock() {
             {stockDetailData.properties.website && (
               <div className="col-span-2">
                 <span className="text-muted-foreground">Website:</span>
-                <a
-                  href={stockDetailData.properties.website}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  className="ml-2 text-blue-600 hover:underline"
+                <LinkButton
+                  url={stockDetailData.properties.website}
+                  className="ml-2 text-blue-600"
                 >
                   {stockDetailData.properties.website}
-                </a>
+                </LinkButton>
               </div>
             )}
           </div>

frontend/src/app/setting/components/models/model-detail.tsx

@@ -1,6 +1,5 @@
 import { DialogDescription } from "@radix-ui/react-dialog";
 import { useForm } from "@tanstack/react-form";
-import { openUrl } from "@tauri-apps/plugin-opener";
 import { Eye, EyeOff, Plus, Trash2 } from "lucide-react";
 import { useEffect, useState } from "react";
 import { z } from "zod";
@@ -35,6 +34,7 @@ import {
   InputGroupInput,
 } from "@/components/ui/input-group";
 import { Switch } from "@/components/ui/switch";
+import LinkButton from "@/components/valuecell/button/link-button";
 import { useTauriInfo } from "@/hooks/use-tauri-info";
 
 const configSchema = z.object({
@@ -206,17 +206,12 @@ export function ModelDetail({ provider }: ModelDetailProps) {
                       </InputGroupButton>
                     </InputGroupAddon>
                   </InputGroup>
-                  <button
-                    type="button"
-                    onClick={() =>
-                      isTauriApp
-                        ? openUrl(providerDetail.api_key_url)
-                        : window.open(providerDetail.api_key_url, "_blank")
-                    }
-                    className="w-fit! cursor-pointer text-sm underline underline-offset-4 hover:text-gray-700"
+                  <LinkButton
+                    className="w-fit! hover:text-gray-700"
+                    url={providerDetail.api_key_url}
                   >
                     Click here to get the API key
-                  </button>
+                  </LinkButton>
                   <FieldError errors={field.state.meta.errors} />
                 </Field>
               )}

frontend/src/components/valuecell/button/link-button.tsx

@@ -0,0 +1,30 @@
+import { openUrl } from "@tauri-apps/plugin-opener";
+import type React from "react";
+import type { FC } from "react";
+import { useTauriInfo } from "@/hooks/use-tauri-info";
+import { cn } from "@/lib/utils";
+
+type LinkButtonProps = {
+  url: string;
+  className?: string;
+  children: React.ReactNode;
+};
+
+const LinkButton: FC<LinkButtonProps> = ({ className, url, children }) => {
+  const { isTauriApp } = useTauriInfo();
+
+  return (
+    <button
+      type="button"
+      className={cn(
+        "cursor-pointer text-sm underline underline-offset-4",
+        className,
+      )}
+      onClick={() => (isTauriApp ? openUrl(url) : window.open(url, "_blank"))}
+    >
+      {children}
+    </button>
+  );
+};
+
+export default LinkButton;

frontend/src/types/stock.ts

@@ -53,26 +53,7 @@ export interface StockHistory {
 }
 
 export interface StockDetail {
-  ticker: string;
-  asset_type: "stock" | "etf" | "index" | "crypto";
-  asset_type_display: string;
-  names: {
-    "en-US": string;
-    "en-GB": string;
-    "zh-Hans": string;
-    "zh-Hant": string;
-  };
   display_name: string;
-  descriptions: Record<string, string>;
-  market_info: {
-    exchange: string;
-    country: string;
-    currency: StockCurrency;
-    timezone: string;
-    trading_hours: string | null;
-    market_status: string;
-  };
-  source_mappings: Record<string, string>;
   properties: {
     sector: string;
     industry: string;
@@ -83,7 +64,4 @@ export interface StockDetail {
     website: string;
     business_summary: string;
   };
-  created_at: string;
-  updated_at: string;
-  is_active: boolean;
 }