Feature/app setting panel notifications

package.json

@@ -13,8 +13,10 @@
   "dependencies": {
     "@radix-ui/react-slot": "^1.2.4",
     "@tailwindcss/vite": "^4.1.18",
+    "@types/js-cookie": "^3.0.6",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "js-cookie": "^3.0.5",
     "lucide-react": "^0.563.0",
     "radix-ui": "^1.4.3",
     "react": "^19.2.0",

src/hooks/useNotifications.ts

@@ -1,11 +1,15 @@
 import { useState } from "react";
+import Cookies from "js-cookie";
+import { NOTIFICATION_TITLE_TO_ID } from "../lib/notificationConfig";
 
 // Interfejs dla powiadomienia
 export interface AppNotification {
   title: string;
   options?: NotificationOptions;
 }
 
+const COOKIE_KEY = "user_notifications_preferences";
+
 export const useNotifications = () => {
   const [permission, setPermission] =
     useState<NotificationPermission>("default");
@@ -23,6 +27,21 @@ export const useNotifications = () => {
       return;
     }
 
+    // Sprawdenie czy ten typ powiadomienia jest włączony w COOKIES
+    const id = NOTIFICATION_TITLE_TO_ID[notification.title];
+    if (id) {
+      const saved = Cookies.get(COOKIE_KEY);
+      if (saved) {
+        try {
+          const prefs = JSON.parse(saved);
+          // powiadomienie zostaje wyłączone przez użytkowika - nie wysyla sie 
+          if (prefs[id] === false) return; 
+        } catch (error) {
+          console.error("Błąd podczas odczytywania cookies:", error);
+        }
+      }
+    }
+
     try {
       new Notification(notification.title, notification.options);
     } catch (error) {

src/lib/notificationConfig.ts

@@ -0,0 +1,17 @@
+export interface AppNotificationConfig {
+    id: string;
+    title: string;
+  }
+
+  export const NOTIFICATIONS: AppNotificationConfig[] = [
+    { id: "1", title: "Cykliczne powiadomienie ⏰" },
+    { id: "2", title: "Czas na przerwę! ☕" },
+    { id: "3", title: "Czas na ćwiczenie! 🔵" },
+    { id: "4", title: "Zadbaj o nawodnienie! 💧" },
+  ];
+
+  // Mapowanie tytułu na id – używane w useNotifications
+  export const NOTIFICATION_TITLE_TO_ID: Record<string, string> = Object.fromEntries(
+    NOTIFICATIONS.map((n) => [n.title, n.id])
+  );
+

src/pages/Powiadomienia.tsx

@@ -0,0 +1,114 @@
+import { Bell, SquareArrowLeft } from "lucide-react";
+import { useState } from "react";
+import { Link } from "react-router-dom";
+import Cookies from "js-cookie";
+import { NOTIFICATIONS } from "../lib/notificationConfig";
+
+
+interface UstawieniaPowiadomien {
+    id: string;
+    title: string;
+    active: boolean;
+    icon: React.ReactNode;
+}
+
+const COOKIE_KEY = "user_notifications_preferences";
+
+function Powiadomienia() {
+
+    // Stan przechowujący wybory użytkownika
+    const [settings, setSettings] = useState<UstawieniaPowiadomien[]>(() => {
+        const savedCookies = Cookies.get(COOKIE_KEY);
+
+        const defaultSettings = NOTIFICATIONS.map((n) => ({
+            ...n,
+            active: true,
+            icon: <Bell size={17} />,
+        }));
+
+
+        if (savedCookies) {
+            try {
+                const parsed = JSON.parse(savedCookies);
+                // Łączymy ikony z zapisanymi stanami powiadomien
+                return defaultSettings.map(ds => ({
+                    ...ds,
+                    active: parsed[ds.id] ?? ds.active
+                }));
+            } catch (error) {
+                // W przypadku wystąpienia błędu przy cookies, ustawiamy domyśne ustawienia
+                console.error("Błąd podczas odczytywania cookies:", error); // wyswietlenie bledu
+                return defaultSettings;
+            }
+        }
+        return defaultSettings;
+    });
+
+    // Funkcja przełączająca stan konkretnego powiadomienia i zapisująca nowy stan do COOKIES   
+    const toggle = (id: string) => {
+        const newSettings = settings.map(item =>
+            item.id === id ? { ...item, active: !item.active } : item
+        );
+
+        setSettings(newSettings);
+
+
+        // Zapisywanie uproszczonego obiektu do COOKIES {id, active}
+        const configToSave = newSettings.reduce((acc, curr) => ({
+            ...acc, [curr.id]: curr.active
+        }), {});
+
+        // Po 365 dniach COOKIES zostaje usuniete
+        Cookies.set(COOKIE_KEY, JSON.stringify(configToSave), { expires: 365 });
+    };
+
+    return (
+        <div className="min-h-screen w-full bg-gray-100 flex flex-col items-center p-10 relative">
+
+            {/* Przycisk powrotu */}
+            <Link
+                to="/Ustawienia"
+                className="absolute left-6 top-10 p-3 bg-white text-black rounded-full shadow-lg active:scale-95 transition-all hover:bg-gray-50"
+            >
+                <SquareArrowLeft size={20} />
+            </Link>
+
+            {/* Nagłówek strony */}
+            <div className="w-full max-w-md flex items-center mb-8">
+                <h1 className="text-4xl font-bold text-gray-800">Powiadomienia</h1>
+            </div>
+
+            {/* Lista opcji do wyboru */}
+            <div className="w-full max-w-md space-y-3">
+                {settings.map((item) => (
+                    <div
+                        key={item.id}
+                        onClick={() => toggle(item.id)}
+                        className="flex items-center justify-between p-4 bg-white rounded-2xl shadow-sm cursor-pointer active:bg-gray-50 transition-colors"
+                    >
+                        {/* Ikonka i naglowek powiadomienia */}
+                        <div className="flex items-center gap-4">
+                            <div className="p-2 bg-blue-50 text-blue-600 rounded-lg">
+                                {item.icon}
+                            </div>
+
+                            <span className="font-medium text-gray-600">
+                                {item.title}</span>
+                        </div>
+
+                        {/* Toggle - przycisk switch */}
+                        <div className={`w-12 h-6 rounded-full transition-colors relative ${item.active ? 'bg-green-500' : 'bg-gray-300'}`}>
+                            <div className={`absolute top-1 w-4 h-4 bg-white rounded-full transition-all ${item.active ? 'left-7' : 'left-1'}`} />
+                        </div>
+                    </div>
+                ))}
+            </div>
+
+            <div className="mt-auto mb-6 text-gray-400 text-sm text-center px-4">
+                Powiadomienia zostały włączone
+            </div>
+        </div>
+    );
+}
+
+export default Powiadomienia

src/pages/footer_Ustawienia.tsx

@@ -1,7 +1,19 @@
+import { Link } from "react-router-dom";
+
+
 function Ustawienia() {
   return (
     <div className="min-h-screen w-full px-8 text-center bg-gray-400 flex flex-col justify-center">
       <h1 className="text-5xl font-bold">Ustawienia</h1>
+
+      {/* Powiadomienia */}
+      <Link
+        to="/Powiadomienia"
+        className="px-6 py-3 bg-white text-black rounded-full shadow-lg active:scale-95 transition-all font-semibold"
+      >
+        Powiadomienia
+      </Link>
+
     </div>
   );
 }