Change origin and styles

.github/workflows/deploy.yml

@@ -39,7 +39,7 @@ jobs:
         env:
           VITE_BASE_URL: '/${{ github.event.repository.name }}'
           VITE_YAHOO_API_URL: 'https://query1.finance.yahoo.com'
-          VITE_YAHOO_ORIGIN: 'https://finance.yahoo.com'
+          VITE_YAHOO_ORIGIN: '/${{ github.event.repository.name }}'
 
       - name: Create 404.html
         run: cp dist/index.html dist/404.html

README.md

@@ -12,8 +12,8 @@ Why this Project?
   - Portfolio Performance & Value
   - All assets (except the TTWOR and Portfolio-Value) are scaled by percentage of their price. Thus their referenced, scale is on the right. The referenced scale on the left is only for the portfolio-value
 
-![Dark Mode Preview](./docs/preview-dark.png)
+![Dark Mode Preview](./docs/dark-mode.png)
-![Light Mode Preview](./docs/preview-light.png)
+![Light Mode Preview](./docs/light-mode.png)
 
 ## Features
 

src/App.tsx

@@ -39,11 +39,11 @@ export default function App() {
                     </div>
                 </div>
 
-                <div className="grid grid-cols-4 gap-8 mb-8 dark:text-gray-300">
+                <div className="grid grid-cols-1 lg:grid-cols-4 gap-8 mb-8 dark:text-gray-300">
                     <div className="col-span-3">
                         <PortfolioChart/>
                     </div>
-                    <div className="col-span-1">
+                    <div className="col-span-3 lg:col-span-1">
                         <InvestmentFormWrapper />
                     </div>
                 </div>

src/components/AddAssetModal.tsx

@@ -86,6 +86,7 @@ export const AddAssetModal = ({ onClose }: { onClose: () => void }) => {
             placeholder="Search by symbol or name..."
             className="w-full p-2 pr-10 border rounded dark:bg-slate-800 dark:border-slate-700 dark:outline-none dark:text-gray-300"
             value={search}
+            autoFocus
             onChange={(e) => {
               setSearch(e.target.value);
               debouncedSearch(e.target.value);

src/components/InvestmentForm.tsx

@@ -19,7 +19,7 @@ export const InvestmentFormWrapper = () => {
 
     return (
         <div className="bg-white dark:bg-slate-800 rounded-lg shadow h-full dark:shadow-black/60">
-            <div className="p-6">
+            <div className="p-6 pb-2">
                 <div className="flex justify-between items-center mb-4">
                     <h2 className="text-xl font-bold dark:text-gray-200">Add Investment</h2>
                     {assets.length > 0 && (
@@ -50,8 +50,10 @@ export const InvestmentFormWrapper = () => {
             </div>
             {
                 selectedAsset && (
-                    <div className="overflow-y-scroll scrollbar-styled max-h-[380px] p-6 pr-3">
+                    <div className="flex-1 h-[calc(100%-120px)] overflow-hidden">
-                        <InvestmentForm assetId={selectedAsset} />
+                        <div className="p-6 pr-3 pt-0">
+                            <InvestmentForm assetId={selectedAsset} clearSelectedAsset={() => setSelectedAsset(null)} />
+                        </div>
                     </div>
                 )
             }
@@ -59,7 +61,7 @@ export const InvestmentFormWrapper = () => {
     );
 }
 
-const InvestmentForm = ({ assetId }: { assetId: string }) => {
+const InvestmentForm = ({ assetId, clearSelectedAsset }: { assetId: string, clearSelectedAsset: () => void }) => {
     const [type, setType] = useState<'single' | 'periodic'>('single');
     const [amount, setAmount] = useState('');
     const [date, setDate] = useState('');
@@ -114,6 +116,7 @@ const InvestmentForm = ({ assetId }: { assetId: string }) => {
         }
         // Reset form
         setAmount('');
+        clearSelectedAsset();
     };
 
     return (
@@ -134,6 +137,7 @@ const InvestmentForm = ({ assetId }: { assetId: string }) => {
                 <label className="block text-sm font-medium mb-1">Amount (€)</label>
                 <input
                     type="number"
+                    autoFocus
                     value={amount}
                     onChange={(e) => setAmount(e.target.value)}
                     className="w-full p-2 border rounded dark:bg-slate-800 dark:border-slate-700 dark:outline-none dark:text-gray-300"
@@ -168,7 +172,7 @@ const InvestmentForm = ({ assetId }: { assetId: string }) => {
                             required
                         />
                     </div>
-                    <label className="block text-sm font-medium mb-1">Sparplan-Start Date</label>
+                    <label className="block text-sm font-medium mb-1">SavingsPlan-Start Date</label>
                     <input
                         type="date"
                         value={date}

src/components/PortfolioChart.tsx

@@ -213,6 +213,12 @@ export const PortfolioChart = () => {
                             tickFormatter={(value) => `${value.toFixed(2)}%`}
                         />
                         <Tooltip
+                            contentStyle={{
+                                backgroundColor: isDarkMode ? '#1e293b' : '#fff',
+                                border: 'none',
+                                color: isDarkMode ? '#d1d5d1' : '#000000',
+                                boxShadow: '0 0 10px 0 rgba(0, 0, 0, 0.5)',
+                            }}
                             formatter={(value: number, name: string, item) => {
                                 const assetKey = name.split('_')[0] as keyof typeof assets;
                                 const processedKey = `${assets.find(a => a.name === name.replace(" (%)", ""))?.id}_price`;

src/components/PortfolioTable.tsx

@@ -177,12 +177,12 @@ export const PortfolioTable = () => {
                     {investment?.type === 'periodic' ? (
                       <span className="inline-flex items-center px-2 py-1 bg-blue-100 text-blue-800 dark:bg-blue-900 dark:text-blue-200 rounded-full">
                         <RefreshCw className="w-4 h-4 mr-1" />
-                        Sparplan
+                        SavingsPlan
                       </span>
                     ) : (
                       <span className="inline-flex items-center px-2 py-1 bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200 rounded-full">
                         <ShoppingBag className="w-4 h-4 mr-1" />
-                        Einmalig
+                        OneTime
                       </span>
                     )}
                   </td>

src/index.css

@@ -74,3 +74,51 @@ body {
 html, body {
   background: inherit;
 }
+
+/* Scrollbar Styling für Investment Form */
+.scrollbar-styled {
+  scrollbar-gutter: stable both-edges;
+  overflow-y: scroll !important;
+}
+
+.scrollbar-styled::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+  display: block;
+}
+
+.scrollbar-styled::-webkit-scrollbar-track {
+  background: transparent;
+  margin: 4px;
+}
+
+.scrollbar-styled::-webkit-scrollbar-thumb {
+  background-color: #94a3b8;
+  border-radius: 9999px;
+  border: 2px solid transparent;
+  background-clip: content-box;
+  min-height: 40px;
+}
+
+.scrollbar-styled::-webkit-scrollbar-thumb:hover {
+  background-color: #64748b;
+}
+
+/* Dark mode */
+.dark .scrollbar-styled::-webkit-scrollbar-thumb {
+  background-color: #475569;
+}
+
+.dark .scrollbar-styled::-webkit-scrollbar-thumb:hover {
+  background-color: #64748b;
+}
+
+/* Firefox */
+.scrollbar-styled {
+  scrollbar-width: thin;
+  scrollbar-color: #94a3b8 transparent;
+}
+
+.dark .scrollbar-styled {
+  scrollbar-color: #475569 transparent;
+}

src/services/yahooFinanceService.tsx

@@ -37,7 +37,8 @@ interface YahooChartResult {
   };
 }
 
-const API_BASE = import.meta.env.VITE_YAHOO_API_URL || '/yahoo';
+const isDev = import.meta.env.DEV;
+const API_BASE = isDev ? '/yahoo' : 'https://api.allorigins.win/raw?url=' + encodeURIComponent('https://query1.finance.yahoo.com');
 
 export const searchAssets = async (query: string): Promise<Asset[]> => {
   try {
@@ -47,11 +48,11 @@ export const searchAssets = async (query: string): Promise<Asset[]> => {
       type: 'equity,etf',
     });
 
-    const response = await fetch(`${API_BASE}/v1/finance/lookup?${params}`, {
+    const url = isDev
-      headers: {
+      ? `${API_BASE}/v1/finance/lookup?${params}`
-        'Origin': import.meta.env.VITE_YAHOO_ORIGIN || window.location.origin
+      : `${API_BASE}/v1/finance/lookup?${params}`;
-      }
+
-    });
+    const response = await fetch(url);
     if (!response.ok) throw new Error('Network response was not ok');
 
     const data = await response.json() as YahooSearchResponse;
@@ -96,7 +97,11 @@ export const getHistoricalData = async (symbol: string, startDate: string, endDa
       interval: '1d',
     });
 
-    const response = await fetch(`/yahoo/v8/finance/chart/${symbol}?${params}`);
+    const url = isDev
+      ? `/yahoo/v8/finance/chart/${symbol}?${params}`
+      : `${API_BASE}/v8/finance/chart/${symbol}?${params}`;
+
+    const response = await fetch(url);
     if (!response.ok) throw new Error('Network response was not ok');
 
     const data = await response.json();

vite.config.ts

@@ -5,6 +5,7 @@ import react from "@vitejs/plugin-react";
 // https://vitejs.dev/config/
 export default defineConfig(({ mode }) => {
   const env = loadEnv(mode, process.cwd(), '');
+  const isDev = mode === 'development';
 
   return {
     plugins: [react()],
@@ -12,16 +13,16 @@ export default defineConfig(({ mode }) => {
       exclude: ['lucide-react'],
     },
     server: {
-      proxy: {
+      proxy: isDev ? {
         '/yahoo': {
-          target: env.VITE_YAHOO_API_URL || 'https://query1.finance.yahoo.com',
+          target: 'https://query1.finance.yahoo.com',
           changeOrigin: true,
           rewrite: (path) => path.replace(/^\/yahoo/, ''),
           headers: {
-            'Origin': env.VITE_YAHOO_ORIGIN || 'https://finance.yahoo.com'
+            'Origin': 'https://finance.yahoo.com'
           }
         }
-      }
+      } : undefined
     },
     base: env.VITE_BASE_URL || '/',
   };