Pierre smells like cheese

electron-app/src/main/index.ts

@@ -9,6 +9,12 @@ import { initDatabase, closeDatabase } from './database.js';
 const __filename = fileURLToPath(import.meta.url);
 const __dirname = path.dirname(__filename);
 
+// Set app name for notifications (must be before app ready)
+app.setName('rmtPocketWatcher');
+if (process.platform === 'win32') {
+  app.setAppUserModelId('com.lambdabanking.rmtpocketwatcher');
+}
+
 // Load environment variables from .env file
 // In dev: __dirname = dist/main, so go up to electron-app root
 // In prod: __dirname = resources/app.asar/dist/main, .env should be in resources

electron-app/src/renderer/App.tsx

@@ -44,6 +44,8 @@ export function App() {
   const [selectedRange, setSelectedRange] = useState('7d');
   const [zoomState, setZoomState] = useState<ZoomState | null>(null);
   const chartContainerRef = useRef<HTMLDivElement>(null);
+  const [animateChart, setAnimateChart] = useState(true);
+  const [hoveredSeller, setHoveredSeller] = useState<string | null>(null);
   
   // Price Alert State
   const [alerts, setAlerts] = useState<PriceAlert[]>([]);
@@ -262,6 +264,7 @@ export function App() {
     const handleWheel = (e: WheelEvent) => {
       e.preventDefault();
       e.stopPropagation();
+      setAnimateChart(false);
       
       const isZoomIn = e.deltaY < 0;
       const zoomFactor = isZoomIn ? 0.8 : 1.25; // Zoom in = smaller range, zoom out = larger range
@@ -334,11 +337,13 @@ export function App() {
   }, [fullChartData, zoomState, yAxisDomain]);
 
   const handleRangeChange = (range: string) => {
+    setAnimateChart(true);
     setSelectedRange(range);
     setZoomState(null);
   };
 
   const resetZoom = () => {
+    setAnimateChart(false);
     setZoomState(null);
   };
 
@@ -415,6 +420,7 @@ export function App() {
 
   const handleZoomIn = () => {
     if (!fullChartData.length) return;
+    setAnimateChart(false);
     
     // Keep current X range, only adjust Y max
     const currentXStart = zoomState?.xStart ?? fullChartData[0].timestamp;
@@ -434,6 +440,7 @@ export function App() {
 
   const handleZoomOut = () => {
     if (!fullChartData.length) return;
+    setAnimateChart(false);
     
     // Keep current X range, only adjust Y max
     const currentXStart = zoomState?.xStart ?? fullChartData[0].timestamp;
@@ -453,6 +460,7 @@ export function App() {
 
   const handleTimelineCompress = () => {
     if (!fullChartData.length) return;
+    setAnimateChart(false);
     
     const currentXStart = zoomState?.xStart ?? fullChartData[0].timestamp;
     const currentXEnd = zoomState?.xEnd ?? fullChartData[fullChartData.length - 1].timestamp;
@@ -491,6 +499,7 @@ export function App() {
 
   const handleTimelineExpand = () => {
     if (!fullChartData.length) return;
+    setAnimateChart(false);
     
     const currentXStart = zoomState?.xStart ?? fullChartData[0].timestamp;
     const currentXEnd = zoomState?.xEnd ?? fullChartData[fullChartData.length - 1].timestamp;
@@ -542,6 +551,7 @@ export function App() {
 
   const handleSliderChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     if (!fullChartData.length) return;
+    setAnimateChart(false);
     
     const position = parseFloat(e.target.value);
     const dataXStart = fullChartData[0].timestamp;
@@ -892,16 +902,60 @@ export function App() {
                       domain={yAxisDomain}
                       allowDataOverflow={true}
                     />
-                    <Tooltip 
-                      contentStyle={{ backgroundColor: '#1a1f3a', border: '1px solid #2a2f4a', borderRadius: '4px' }}
-                      labelStyle={{ color: '#fff' }}
-                      labelFormatter={(label, payload) => {
-                        if (payload && payload.length > 0 && payload[0].payload.fullTime) {
-                          return payload[0].payload.fullTime;
+                    <Tooltip
+                      content={({ active, payload }) => {
+                        if (!active || !payload || payload.length === 0) return null;
+                        const data = payload[0]?.payload;
+                        if (!data) return null;
+                        const seenNames = new Set<string>();
+                        const validSellers = payload
+                          .filter((p: any) => {
+                            if (p.value === undefined || p.value === null || isNaN(p.value)) return false;
+                            if (!p.name || String(p.name).trim() === '') return false;
+                            if (p.stroke === 'transparent') return false;
+                            // Deduplicate by name
+                            if (seenNames.has(p.name)) return false;
+                            seenNames.add(p.name);
+                            return true;
+                          })
+                          .sort((a: any, b: any) => a.value - b.value);
+                        if (validSellers.length === 0) return null;
+                        
+                        // If hovering over a specific line, show that seller and others with same price
+                        let displaySellers = validSellers;
+                        if (hoveredSeller) {
+                          const hoveredData = validSellers.find((s: any) => s.name === hoveredSeller);
+                          if (hoveredData) {
+                            const hoveredPrice = hoveredData.value;
+                            // Show hovered seller and any with same price (within 0.0001 tolerance)
+                            displaySellers = validSellers.filter((s: any) => 
+                              s.name === hoveredSeller || Math.abs(s.value - hoveredPrice) < 0.0001
+                            );
+                          }
                         }
-                        return label;
+                        
+                        return (
+                          <div style={{ backgroundColor: "#1a1f3a", border: "1px solid #50e3c2", borderRadius: "6px", padding: "12px", maxHeight: "300px", overflowY: "auto", minWidth: "200px" }}>
+                            <div style={{ color: "#fff", fontWeight: "bold", marginBottom: "8px", borderBottom: "1px solid #2a2f4a", paddingBottom: "6px" }}>
+                              {data.fullTime || data.time}
+                            </div>
+                            {!hoveredSeller && (
+                              <div style={{ fontSize: "11px", color: "#888", marginBottom: "6px" }}>
+                                {validSellers.length} seller{validSellers.length !== 1 ? "s" : ""} - Sorted by price
+                              </div>
+                            )}
+                            {displaySellers.slice(0, hoveredSeller ? 20 : 10).map((seller: any, idx: number) => (
+                              <div key={`${seller.name}-${idx}`} style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "4px 0", borderBottom: idx < displaySellers.length - 1 ? "1px solid #2a2f4a" : "none" }}>
+                                <span style={{ color: seller.color, fontSize: "12px", fontWeight: seller.name === hoveredSeller ? "bold" : "normal" }}>{seller.name}</span>
+                                <span style={{ color: "#50e3c2", fontWeight: "bold", fontSize: "12px", marginLeft: "10px" }}>${Number(seller.value).toFixed(4)}</span>
+                              </div>
+                            ))}
+                            {!hoveredSeller && validSellers.length > 10 && (
+                              <div style={{ color: "#888", fontSize: "11px", marginTop: "6px", textAlign: "center" }}>+{validSellers.length - 10} more sellers</div>
+                            )}
+                          </div>
+                        );
                       }}
-                      formatter={(value: any, name: string) => [`$${Number(value).toFixed(9)}`, name]}
                       wrapperStyle={{ zIndex: 1000 }}
                     />
                     <Legend 
@@ -914,15 +968,37 @@ export function App() {
                       }}
                       iconType="line"
                     />
+                    {/* Invisible wider lines for better hover detection */}
+                    {sellers.map((seller) => (
+                      <Line
+                        key={`${seller}-hitarea`}
+                        type="linear"
+                        dataKey={seller}
+                        stroke="transparent"
+                        strokeWidth={15}
+                        dot={false}
+                        connectNulls
+                        isAnimationActive={false}
+                        onMouseEnter={() => setHoveredSeller(seller)}
+                        onMouseLeave={() => setHoveredSeller(null)}
+                        style={{ cursor: 'pointer' }}
+                        legendType="none"
+                      />
+                    ))}
+                    {/* Visible lines */}
                     {sellers.map((seller) => (
                       <Line
                         key={seller}
-                        type="monotone"
+                        type="linear"
                         dataKey={seller}
                         stroke={COLORS[sellers.indexOf(seller) % COLORS.length]}
-                        strokeWidth={2}
+                        strokeWidth={hoveredSeller === seller ? 4 : 2}
                         dot={false}
+                        activeDot={{ r: 6 }}
                         connectNulls
+                        isAnimationActive={animateChart}
+                        style={{ pointerEvents: 'none' }}
+                        legendType="line"
                       />
                     ))}
                   </LineChart>

electron-app/src/renderer/components/TitleBar.tsx

@@ -56,6 +56,9 @@ export function TitleBar() {
         WebkitAppRegion: 'drag',
         userSelect: 'none',
         padding: '0 15px',
+        position: 'sticky',
+        top: 0,
+        zIndex: 1000,
       } as any}
     >
       <div style={{ display: 'flex', alignItems: 'center', gap: '10px' }}>