Improve UI for mobile device

Author: BWJ2310

src/components/Footer.tsx

@@ -16,12 +16,12 @@ const Footer = () => {
                   <img
                     src="/goose.png"
                     alt="TradingGoose Logo"
-                    className="h-5 w-5 sm:h-10 sm:w-10"
+                    className="h-8 w-8 sm:h-10 sm:w-10"
                   />
                 </div>
                 <div>
                   <h1 className="text-xl sm:text-2xl font-bold" style={{ color: '#FFCC00' }}>TradingGoose</h1>
-                  <p className="text-xs sm:text-sm text-muted-foreground hidden sm:block">
+                  <p className="text-xs sm:text-sm text-muted-foreground">
                     AI-Powered Portfolio Management
                   </p>
                 </div>

src/components/Header.tsx

@@ -53,7 +53,7 @@ export default function Header() {
     if (!hasAiConfig && hasAlpacaConfig) {
       return { dotClass: 'bg-yellow-500', message: 'AI Config Required' };
     }
-    return { dotClass: 'bg-red-500', message: 'Require API Configurations' };
+    return { dotClass: 'bg-red-500', message: 'Configurations Required' };
   }, [hasAiConfig, hasAlpacaConfig]);
   const primaryRole = getPrimaryRole();
 
@@ -125,11 +125,11 @@ export default function Header() {
             <div className="flex items-center gap-2 sm:gap-4">
               <div className="flex items-center gap-2 sm:gap-3">
                 <div className="p-2 rounded-lg">
-                  <img src="/goose.png" alt="TradingGoose Logo" className="h-5 w-5 sm:h-10 sm:w-10" />
+                  <img src="/goose.png" alt="TradingGoose Logo" className="h-8 w-8 sm:h-10 sm:w-10" />
                 </div>
                 <div>
                   <h1 className="text-xl sm:text-2xl font-bold" style={{ color: '#FFCC00' }}>TradingGoose</h1>
-                  <p className="text-xs sm:text-sm text-muted-foreground hidden sm:block">AI-Powered Portfolio Management</p>
+                  <p className="text-xs sm:text-sm text-muted-foreground">AI-Powered Portfolio Management</p>
                 </div>
               </div>
 

src/components/PerformanceChart.tsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect, useCallback, useMemo, useRef } from "react"
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, ReferenceLine } from "recharts";
-import { X, Loader2, AlertCircle, Settings } from "lucide-react";
+import { X, Loader2, AlertCircle, Settings, Eye } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { Badge } from "@/components/ui/badge";
 import { Alert, AlertDescription } from "@/components/ui/alert";
@@ -11,9 +11,11 @@ import { useAuth, isSessionValid, hasAlpacaCredentials } from "@/lib/auth";
 import { useToast } from "@/hooks/use-toast";
 import { fetchPortfolioDataForPeriod, fetchStockDataForPeriod, type PortfolioData, type StockData, type PortfolioDataPoint } from "@/lib/portfolio-data";
 import { useNavigate } from "react-router-dom";
+import StockTickerAutocomplete from "@/components/StockTickerAutocomplete";
 
 interface PerformanceChartProps {
   selectedStock?: string;
+  selectedStockDescription?: string;
   onClearSelection?: () => void;
 }
 
@@ -57,7 +59,7 @@ const formatValue = (value: number | undefined, isMobile: boolean = false): stri
 
 // Remove the old hardcoded function - we'll create a dynamic one in the component
 
-const PerformanceChart = React.memo(({ selectedStock, onClearSelection }: PerformanceChartProps) => {
+const PerformanceChart = React.memo(({ selectedStock: propSelectedStock, selectedStockDescription, onClearSelection }: PerformanceChartProps) => {
   const navigate = useNavigate();
   const [selectedPeriod, setSelectedPeriod] = useState<TimePeriod>("1D");
   const [loading, setLoading] = useState(false);
@@ -71,12 +73,38 @@ const PerformanceChart = React.memo(({ selectedStock, onClearSelection }: Perfor
   const hasConfiguredAlpaca = useMemo(() => hasAlpacaCredentials(apiSettings), [apiSettings]);
   const [hasAlpacaConfig, setHasAlpacaConfig] = useState(hasConfiguredAlpaca);
   const { toast } = useToast();
+  
+  // Internal state for selected stock (can be from prop or from search)
+  const [internalSelectedStock, setInternalSelectedStock] = useState<string | undefined>(propSelectedStock);
+  const [tickerInput, setTickerInput] = useState<string>("");
+  const [stockDescription, setStockDescription] = useState<string>(selectedStockDescription || "");
+  
+  // Use prop or internal state
+  const selectedStock = propSelectedStock || internalSelectedStock;
 
   // Track if we've already fetched for current apiSettings and selectedStock
   const fetchedRef = useRef<string>('');
   const lastFetchTimeRef = useRef<number>(0);
   const metricsLoaded = useRef(false);
 
+  // Handle viewing a stock from the search bar
+  const handleViewStock = useCallback(() => {
+    if (tickerInput.trim()) {
+      setInternalSelectedStock(tickerInput.trim().toUpperCase());
+      setTickerInput("");
+    }
+  }, [tickerInput]);
+
+  // Handle clearing the selection
+  const handleClearSelection = useCallback(() => {
+    if (onClearSelection) {
+      onClearSelection();
+    }
+    setInternalSelectedStock(undefined);
+    setTickerInput("");
+    setStockDescription("");
+  }, [onClearSelection]);
+
   const fetchData = useCallback(async (period: string) => {
     // Debounce fetches - don't fetch if we just fetched less than 2 seconds ago
     const now = Date.now();
@@ -110,6 +138,22 @@ const PerformanceChart = React.memo(({ selectedStock, onClearSelection }: Perfor
             }
           }));
         }
+        
+        // Fetch stock description if not already fetched
+        if (!stockDescription && hasConfiguredAlpaca) {
+          try {
+            const assetInfo = await alpacaAPI.getAsset(selectedStock).catch(err => {
+              console.warn(`Could not fetch asset info for ${selectedStock}:`, err);
+              return null;
+            });
+            
+            if (assetInfo?.name) {
+              setStockDescription(assetInfo.name);
+            }
+          } catch (err) {
+            console.warn(`Could not fetch description for ${selectedStock}:`, err);
+          }
+        }
       } else {
         // Fetch portfolio data for this period if not cached
         if (!portfolioData[period]) {
@@ -250,6 +294,15 @@ const PerformanceChart = React.memo(({ selectedStock, onClearSelection }: Perfor
     setHasAlpacaConfig(hasConfiguredAlpaca);
   }, [hasConfiguredAlpaca]);
 
+  // Sync internal state with prop changes
+  useEffect(() => {
+    if (propSelectedStock !== internalSelectedStock) {
+      setInternalSelectedStock(propSelectedStock);
+      // Update description if provided, otherwise clear it
+      setStockDescription(selectedStockDescription || "");
+    }
+  }, [propSelectedStock, selectedStockDescription]);
+
   // Get real stock metrics from positions
   const getStockMetrics = useCallback((symbol: string) => {
     const position = positions.find((p: any) => p.symbol === symbol);
@@ -434,58 +487,89 @@ const PerformanceChart = React.memo(({ selectedStock, onClearSelection }: Perfor
     <Card>
       <CardHeader className="pb-4">
         <div className="space-y-2">
-          <div className="flex items-center justify-between">
-            <div className="flex items-center gap-2">
-              <CardTitle>Performance</CardTitle>
-              {selectedStock && (
-                <div className="flex items-center gap-2">
-                  <Badge variant="default">{selectedStock}</Badge>
-                  <Button
-                    variant="ghost"
-                    size="icon"
-                    className="h-6 w-6"
-                    onClick={onClearSelection}
-                  >
-                    <X className="h-3 w-3" />
-                  </Button>
-                </div>
-              )}
-            </div>
-          </div>
-          <div className="text-xs text-muted-foreground">
-            Data may be incomplete or delayed.{' '}
-            <a
-              href={selectedStock 
-                ? `https://app.alpaca.markets/trade/${selectedStock}`
-                : 'https://app.alpaca.markets/dashboard/overview'
-              }
-              target="_blank"
-              rel="noopener noreferrer"
-              className="text-primary hover:underline"
-            >
-              View on Alpaca →
-            </a>
-          </div>
-        </div>
-      </CardHeader>
-      <CardContent>
-        {!hasAlpacaConfig && (
-          <Alert className="mb-4">
-            <AlertCircle className="h-4 w-4" />
-            <AlertDescription className="flex items-center justify-between">
-              <span>Connect your Alpaca account to view live performance data</span>
+          {!hasAlpacaConfig ? (
+            <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3 rounded-lg border p-4 bg-background">
+              <div className="flex items-center gap-2">
+                <AlertCircle className="h-4 w-4 flex-shrink-0" />
+                <span className="text-sm">Connect your Alpaca account to view live performance data</span>
+              </div>
               <Button
                 variant="outline"
                 size="sm"
-                onClick={() => navigate('/settings?tab=trading')}
-                className="ml-4"
+                onClick={() => navigate('/settings')}
+                className="w-full sm:w-auto"
               >
                 <Settings className="h-4 w-4 mr-2" />
                 Configure API
               </Button>
-            </AlertDescription>
-          </Alert>
-        )}
+            </div>
+          ) : (
+            <>
+              {selectedStock ? (
+                <Badge variant="default" className="flex items-center justify-between w-full pr-1.5 py-2 px-4">
+                  <div className="flex-1" /> {/* Spacer */}
+                  <span className="text-base">
+                    <span className="font-bold">{selectedStock}</span>
+                    {stockDescription && (
+                      <span className="font-medium text-muted-foreground ml-2">
+                        {stockDescription}
+                      </span>
+                    )}
+                  </span>
+                  <div className="flex-1 flex justify-end"> {/* Right-aligned container */}
+                    <button
+                      className="ml-4 rounded-full hover:bg-primary/30 p-0.5 transition-colors"
+                      onClick={handleClearSelection}
+                      type="button"
+                      aria-label="Clear stock selection"
+                    >
+                      <X className="h-4 w-4" />
+                    </button>
+                  </div>
+                </Badge>
+              ) : (
+                <div className="flex items-center gap-2 w-full">
+                  <StockTickerAutocomplete
+                    value={tickerInput}
+                    onChange={setTickerInput}
+                    onEnterPress={handleViewStock}
+                    onSelect={(suggestion) => {
+                      setInternalSelectedStock(suggestion.symbol);
+                      setStockDescription(suggestion.description || "");
+                      setTickerInput("");
+                    }}
+                    placeholder="Search stock..."
+                    className="flex-1"
+                  />
+                  <Button 
+                    size="sm"
+                    onClick={handleViewStock}
+                    disabled={!tickerInput.trim()}
+                  >
+                    <Eye className="h-4 w-4 mr-1" />
+                    View
+                  </Button>
+                </div>
+              )}
+              <div className="text-xs text-muted-foreground">
+                Data may be incomplete or delayed.{' '}
+                <a
+                  href={selectedStock 
+                    ? `https://app.alpaca.markets/trade/${selectedStock}`
+                    : 'https://app.alpaca.markets/dashboard/overview'
+                  }
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="text-primary hover:underline"
+                >
+                  View on Alpaca →
+                </a>
+              </div>
+            </>
+          )}
+        </div>
+      </CardHeader>
+      <CardContent>
         <Tabs value={selectedPeriod} onValueChange={(value) => setSelectedPeriod(value as TimePeriod)} className="space-y-4">
           <TabsList className="grid w-full grid-cols-8 max-w-5xl mx-auto">
             {periods.map((period) => (

src/components/PortfolioPositions.tsx

@@ -41,10 +41,11 @@ interface Position {
   unrealizedPL: number;
   unrealizedPLPct: number;
   dayChange: number;
+  description?: string;
 }
 
 interface PortfolioPositionsProps {
-  onSelectStock?: (symbol: string) => void;
+  onSelectStock?: (symbol: string, description?: string) => void;
   selectedStock?: string;
 }
 
@@ -165,15 +166,16 @@ export default function PortfolioPositions({ onSelectStock, selectedStock }: Por
         return;
       }
 
-      // Get batch data for all positions to get today's open prices
+      // Get batch data for all positions to get today's open prices and asset info
       const symbols = alpacaPositions.map((pos: any) => pos.symbol);
       let batchData: any = {};
 
       if (symbols.length > 0) {
         try {
           batchData = await alpacaAPI.getBatchData(symbols, {
             includeQuotes: true,
-            includeBars: true
+            includeBars: true,
+            includeAssets: true // Add this to get company names
           });
         } catch (err) {
           console.warn('Could not fetch batch data for daily changes:', err);
@@ -198,6 +200,9 @@ export default function PortfolioPositions({ onSelectStock, selectedStock }: Por
           dayChangePercent = previousClose > 0 ? (priceChange / previousClose) * 100 : 0;
         }
 
+        // Get company description from asset data
+        const description = stockData?.asset?.name || pos.symbol;
+
         return {
           symbol: pos.symbol,
           shares: parseFloat(pos.qty),
@@ -206,7 +211,8 @@ export default function PortfolioPositions({ onSelectStock, selectedStock }: Por
           marketValue: parseFloat(pos.market_value),
           unrealizedPL: parseFloat(pos.unrealized_pl),
           unrealizedPLPct: parseFloat(pos.unrealized_plpc) * 100,
-          dayChange: dayChangePercent
+          dayChange: dayChangePercent,
+          description: description
         };
       });
 
@@ -600,7 +606,7 @@ export default function PortfolioPositions({ onSelectStock, selectedStock }: Por
                         key={position.symbol}
                         className={`cursor-pointer hover:bg-muted/50 transition-colors ${selectedStock === position.symbol ? 'bg-muted' : ''
                           }`}
-                        onClick={() => onSelectStock?.(position.symbol)}
+                        onClick={() => onSelectStock?.(position.symbol, position.description)}
                       >
                         <TableCell className="font-medium w-[60px]">
                           <Badge variant={selectedStock === position.symbol ? 'default' : 'outline'}>

src/components/StandaloneWatchlist.tsx

@@ -43,7 +43,7 @@ interface WatchlistItem {
 }
 
 interface StandaloneWatchlistProps {
-  onSelectStock?: (ticker: string) => void;
+  onSelectStock?: (ticker: string, description?: string) => void;
   selectedStock?: string;
 }
 
@@ -728,7 +728,7 @@ export default function StandaloneWatchlist({ onSelectStock, selectedStock }: St
                   onClick={(e) => {
                     // Only trigger selection if not clicking on buttons
                     if ((e.target as HTMLElement).closest('button')) return;
-                    onSelectStock?.(item.ticker);
+                    onSelectStock?.(item.ticker, item.description);
                   }}
                 >
                   {/* Mobile and Desktop: Left side - Stock info */}