Remove decorative icons and update CORS configuration

app/page.tsx

@@ -1,19 +1,18 @@
 'use client'
 
-import { useState, useEffect } from 'react';
-import { FilamentTable } from '../src/components/FilamentTable';
+import { useState, useEffect, useRef } from 'react';
 import { FilamentTableV2 } from '../src/components/FilamentTableV2';
 import { Filament } from '../src/types/filament';
-import axios from 'axios';
+import { filamentService } from '../src/services/api';
 
 export default function Home() {
   const [filaments, setFilaments] = useState<Filament[]>([]);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
-  const [lastUpdate, setLastUpdate] = useState<Date | null>(null);
   const [darkMode, setDarkMode] = useState(false);
   const [mounted, setMounted] = useState(false);
-  const [useV2, setUseV2] = useState(true); // Default to new UI
+  const [resetKey, setResetKey] = useState(0);
+  // Removed V1/V2 toggle - now only using V2
 
   // Initialize dark mode from localStorage after mounting
   useEffect(() => {
@@ -41,22 +40,11 @@ export default function Home() {
       setLoading(true);
       setError(null);
       
-      const apiUrl = process.env.NEXT_PUBLIC_API_URL;
-      if (!apiUrl) {
-        throw new Error('API URL not configured');
-      }
-      const url = `${apiUrl}/filaments`;
-      const headers = useV2 ? { 'X-Accept-Format': 'v2' } : {};
-      const response = await axios.get(url, { headers });
-      setFilaments(response.data);
-      setLastUpdate(new Date());
+      const filaments = await filamentService.getAll();
+      setFilaments(filaments);
     } catch (err) {
       console.error('API Error:', err);
-      if (axios.isAxiosError(err)) {
-        setError(`API Error: ${err.response?.status || 'Network'} - ${err.message}`);
-      } else {
-        setError(err instanceof Error ? err.message : 'Greška pri učitavanju filamenata');
-      }
+      setError(err instanceof Error ? err.message : 'Greška pri učitavanju filamenata');
     } finally {
       setLoading(false);
     }
@@ -64,51 +52,47 @@ export default function Home() {
 
   useEffect(() => {
     fetchFilaments();
-    
-    // Refresh every 5 minutes
-    const interval = setInterval(fetchFilaments, 5 * 60 * 1000);
-    
-    return () => clearInterval(interval);
   }, []);
 
+  const handleLogoClick = () => {
+    setResetKey(prev => prev + 1);
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+  };
+
   return (
     <div className="min-h-screen bg-gray-50 dark:bg-gray-900 transition-colors">
-      <header className="bg-white dark:bg-gray-800 shadow transition-colors">
-        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6">
-          <div className="flex justify-between items-center">
-            <h1 className="text-3xl font-bold text-gray-900 dark:text-white">
-              Filamenteka
-            </h1>
-            <div className="flex items-center gap-4">
-              {lastUpdate && (
-                <span className="text-sm text-gray-500 dark:text-gray-400">
-                  Poslednje ažuriranje: {lastUpdate.toLocaleTimeString('sr-RS')}
+      <header className="bg-gradient-to-r from-blue-50 to-orange-50 dark:from-gray-800 dark:to-gray-900 shadow-lg transition-all duration-300">
+        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-4">
+          <div className="flex flex-col sm:flex-row justify-between items-center gap-4">
+            <button
+              onClick={handleLogoClick}
+              className="group hover:scale-105 transition-transform duration-200"
+              title="Klikni za reset"
+            >
+              <h1 className="text-3xl font-bold bg-gradient-to-r from-blue-600 to-orange-600 dark:from-blue-400 dark:to-orange-400 bg-clip-text text-transparent group-hover:from-blue-700 group-hover:to-orange-700 dark:group-hover:from-blue-300 dark:group-hover:to-orange-300 transition-all">
+                Filamenteka
+              </h1>
+            </button>
+            
+            <div className="flex flex-col sm:flex-row items-center gap-3 text-sm">
+              <div className="flex flex-col sm:flex-row gap-3 text-center">
+                <span className="text-blue-700 dark:text-blue-300 font-medium animate-pulse whitespace-nowrap">
+                  Kupovina po gramu dostupna
                 </span>
-              )}
-              <button
-                onClick={fetchFilaments}
-                disabled={loading}
-                className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 disabled:opacity-50"
-              >
-                {loading ? 'Ažuriranje...' : 'Osveži'}
-              </button>
+                <span className="hidden sm:inline text-gray-400 dark:text-gray-600">•</span>
+                <span className="text-orange-700 dark:text-orange-300 font-medium animate-pulse whitespace-nowrap">
+                  Popust za 5+ komada
+                </span>
+              </div>
+              
               {mounted && (
-                <>
-                  <button
-                    onClick={() => setUseV2(!useV2)}
-                    className="px-4 py-2 bg-blue-200 dark:bg-blue-700 text-blue-800 dark:text-blue-200 rounded hover:bg-blue-300 dark:hover:bg-blue-600 transition-colors"
-                    title={useV2 ? 'Stari prikaz' : 'Novi prikaz'}
-                  >
-                    {useV2 ? 'V2' : 'V1'}
-                  </button>
-                  <button
-                    onClick={() => setDarkMode(!darkMode)}
-                    className="px-4 py-2 bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 rounded hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors"
-                    title={darkMode ? 'Svetla tema' : 'Tamna tema'}
-                  >
-                    {darkMode ? '☀️' : '🌙'}
-                  </button>
-                </>
+                <button
+                  onClick={() => setDarkMode(!darkMode)}
+                  className="p-2 bg-white/50 dark:bg-gray-700/50 backdrop-blur text-gray-800 dark:text-gray-200 rounded-full hover:bg-white/80 dark:hover:bg-gray-600/80 transition-all duration-200 hover:scale-110 shadow-md ml-2"
+                  title={darkMode ? 'Svetla tema' : 'Tamna tema'}
+                >
+                  {darkMode ? 'Svetla' : 'Tamna'}
+                </button>
               )}
             </div>
           </div>
@@ -116,19 +100,12 @@ export default function Home() {
       </header>
       
       <main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
-        {useV2 ? (
-          <FilamentTableV2 
-            filaments={filaments} 
-            loading={loading} 
-            error={error || undefined} 
-          />
-        ) : (
-          <FilamentTable 
-            filaments={filaments} 
-            loading={loading} 
-            error={error || undefined} 
-          />
-        )}
+        <FilamentTableV2 
+          key={resetKey}
+          filaments={filaments} 
+          loading={loading} 
+          error={error || undefined} 
+        />
       </main>
       
     </div>