+
+
+
+ );
+}
\ No newline at end of file
diff --git a/TruthScan AI_frontend/app/dashboard/components/ChartsSection.tsx b/TruthScan AI_frontend/app/dashboard/components/ChartsSection.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..e0fb94d5e9dcf11e3c1b0660e336939419911a72
--- /dev/null
+++ b/TruthScan AI_frontend/app/dashboard/components/ChartsSection.tsx
@@ -0,0 +1,282 @@
+/**
+ * Sekcja dashboardu odpowiedzialna za wizualizację danych analitycznych.
+ *
+ * Komponent integruje:
+ * - wykres sentymentu emocjonalnego,
+ * - wykres prawdopodobieństwa fake newsów według źródeł,
+ * - mechanizm leniwego ładowania i cache po stronie klienta,
+ * - modal z listą artykułów dla wybranego źródła.
+ */
+
+"use client";
+
+import { useRef, useEffect, useState } from "react";
+import SourceSelector from "../../../components/SourceSelector";
+import EmotionalPieChart from "../../../components/EmotionalPieChart";
+import FakeNewsBarChart from "../../../components/FakeNewsBarChart";
+import ProgressBar from "../../../components/ProgressBar";
+import { useDashboardCharts } from "../../hooks/useDashboardCharts";
+import locales from "../../../lib/locales";
+import MiniSpinner from "./MiniSpinner";
+import ArticlesModal from "./ArticlesModal";
+
+import type { Lang } from "../../../lib/types";
+
+interface Props {
+ language: Lang;
+ selectedSource: string;
+ setSelectedSource: (source: string) => void;
+}
+
+const DASHBOARD_CHARTS_KEY = "dashboard:charts";
+
+type ChartsCache = {
+ barData: any[];
+ emotionData: any[];
+ totalSources: number;
+};
+
+export default function ChartsSection({
+ language,
+ selectedSource,
+ setSelectedSource,
+}: Props) {
+ const [isClient, setIsClient] = useState(false);
+ const [cachedCharts, setCachedCharts] = useState
+
+
+
+
+ + {language === "pl" ? "Artykuły z" : language === "no" ? "Artikler fra" : "Articles from"} {source} +
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {t.selectSource}
+
+ {effectiveChartsStarted && (
+
+ {chartsError}
+ ) : effectiveHasEmos ? (
+
+ {effectiveChartsStarted && (
+
+ {chartsError}
+ ) : effectiveHasBars ? (
+
+ {/* Gradientowy nagłówek AI */}
+
+ );
+}
+
+
diff --git a/TruthScan AI_frontend/app/dashboard/components/MiniSpinner.tsx b/TruthScan AI_frontend/app/dashboard/components/MiniSpinner.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..3fe212538e2fa3c1402e6d3de5c93cab46ea44d2
--- /dev/null
+++ b/TruthScan AI_frontend/app/dashboard/components/MiniSpinner.tsx
@@ -0,0 +1,19 @@
+/**
+ * Mały komponent prezentacyjny wyświetlający wskaźnik ładowania
+ * wraz z krótkim komunikatem tekstowym.
+ */
+
+"use client";
+
+interface Props {
+ text: string;
+}
+
+export default function MiniSpinner({ text }: Props) {
+ return (
+ + + TruthScan AI +
+ ++ {hydrated + ? isPl + ? "Narzędzie do analizy wiadomości z wielu źródeł, które pomaga ocenić emocjonalny wydźwięk treści oraz wykrywać potencjalnie wprowadzające w błąd informacje." + : isNo + ? "Verktøy for nyhetsanalyse fra flere kilder som hjelper deg å vurdere den emosjonelle tonen og oppdage potensielt villedende informasjon." + : "A tool for analyzing news from multiple sources that helps assess emotional tone and detect potentially misleading content." + : ""} +
+ ++ {hydrated + ? isPl + ? "W oparciu o automatyczną analizę treści TruthScan AI prezentuje wyniki w formie przejrzystych wykresów i zestawienia artykułów." + : isNo + ? "Basert på automatisk innholdsanalyse presenterer TruthScan AI resultater i form av tydelige diagrammer og artikkeloversikter." + : "Using automated content analysis, TruthScan AI presents results through clear charts and structured article summaries." + : ""} +
+
+
+ {text}
+
+ );
+}
\ No newline at end of file
diff --git a/TruthScan AI_frontend/app/dashboard/components/SourceComparison.tsx b/TruthScan AI_frontend/app/dashboard/components/SourceComparison.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..59308284496453a4cdc9cb7c436b070ddf72f5a3
--- /dev/null
+++ b/TruthScan AI_frontend/app/dashboard/components/SourceComparison.tsx
@@ -0,0 +1,53 @@
+/**
+ * Sekcja dashboardu umożliwiająca porównanie wielu źródeł informacyjnych.
+ *
+ * Renderuje zestaw bloków źródeł, pozwalając użytkownikowi analizować
+ * i porównywać dane pochodzące z różnych serwisów informacyjnych.
+ */
+
+"use client";
+
+import { useState } from "react";
+import SourceBlock from "../../../components/SourceBlock";
+import locales from "../../../lib/locales";
+
+import type { Lang } from "../../../lib/types";
+
+interface Props {
+ language: Lang;
+}
+
+const ALL_SOURCES = [
+ "BBC", "CNN", "NYTimes", "Guardian", "AlJazeera",
+ "Money", "PolsatNews", "GazetaPrawna", "SpidersWeb", "Bankier",
+ "NRK", "VG", "Dagbladet", "Aftenposten",
+] as const;
+
+export default function SourceComparison({ language }: Props) {
+ const [compareSources, setCompareSources] = useState+ {language === "pl" ? "Porównanie źródeł" : language === "no" ? "Kildesammenligning" : "Sources comparison"} +
+ +
+ {compareSources.map((src, idx) => (
+ updateCompareSource(idx, next)}
+ language={language}
+ locales={locales}
+ />
+ ))}
+
+
+
+ );
+}
diff --git a/TruthScan AI_frontend/app/dashboard/loading.tsx b/TruthScan AI_frontend/app/dashboard/loading.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..aa57bdba47b1f8217bbc9380bea196320722a94a
--- /dev/null
+++ b/TruthScan AI_frontend/app/dashboard/loading.tsx
@@ -0,0 +1,21 @@
+/**
+ * Komponent stanu ładowania dla widoku dashboardu.
+ */
+
+export default function Loading() {
+ return (
+ + ❌ {typeof window !== "undefined" && localStorage.getItem("lang") === "en" + ? "An error occurred in the dashboard" + : "Wystąpił błąd w dashboardzie"} +
+ +{error.message}
+ + +
+
+
+ );
+}
+
+
diff --git a/TruthScan AI_frontend/app/dashboard/page.tsx b/TruthScan AI_frontend/app/dashboard/page.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..04d02959b5bac535acb29e231a29f397cc7fbe87
--- /dev/null
+++ b/TruthScan AI_frontend/app/dashboard/page.tsx
@@ -0,0 +1,71 @@
+/**
+ * Główna strona dashboardu analitycznego aplikacji.
+ */
+
+"use client";
+
+import { useEffect, useState } from "react";
+import { RefreshCcw } from "lucide-react";
+import { useLanguage } from "../hooks/useLanguage";
+import DashboardHeader from "./components/DashboardHeader";
+import ChartsSection from "./components/ChartsSection";
+import SourceComparison from "./components/SourceComparison";
+
+
+
+import { useNewsCache, newsKey } from "../../app/stores/newsCache";
+
+export default function DashboardPage() {
+ const [hydrated, setHydrated] = useState(false);
+ const { language } = useLanguage();
+ const [selectedSource, setSelectedSource] = useState("BBC");
+ const cache = useNewsCache();
+ const [reloadKey, setReloadKey] = useState(0);
+ const REFRESH_TEXT = {
+ pl: "Odśwież ",
+ en: "Refresh ",
+ no: "Oppdater ",
+} as const;
+
+
+ useEffect(() => {
+ setHydrated(true);
+ }, []);
+
+ const handleRefresh = () => {
+ // Usunięcie danych z cache i ponowne pobranie
+ cache.del(newsKey(selectedSource, language));
+ setReloadKey((k) => k + 1);
+ };
+
+ return (
+
+
+
+
+
+ + ⏳ Ładowanie dashboardu... +
+
+
+ );
+}
+
+
\ No newline at end of file
diff --git a/TruthScan AI_frontend/app/error.tsx b/TruthScan AI_frontend/app/error.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..17411137cd341393c71a027b5e179c2781184a92
--- /dev/null
+++ b/TruthScan AI_frontend/app/error.tsx
@@ -0,0 +1,39 @@
+/**
+ * Globalny komponent obsługi błędów aplikacji (Next.js App Router).
+ */
+
+"use client";
+
+interface Props {
+ error: Error & { digest?: string };
+ reset: () => void;
+}
+
+export default function GlobalError({ error, reset }: Props) {
+
+ const lang =
+ typeof window !== "undefined" && localStorage.getItem("lang") === "en"
+ ? "en"
+ : "pl";
+
+ return (
+
+
+
+
+
+
+
+
+ + ❌ {lang === "en" + ? "An unexpected error occurred" + : "Wystąpił nieoczekiwany błąd"} +
+ +{error.message}
+ + + + + ); +} diff --git a/TruthScan AI_frontend/app/hooks/useArticleContent.ts b/TruthScan AI_frontend/app/hooks/useArticleContent.ts new file mode 100644 index 0000000000000000000000000000000000000000..e3f50793bfa55139c8374ae727979f78b9c1731f --- /dev/null +++ b/TruthScan AI_frontend/app/hooks/useArticleContent.ts @@ -0,0 +1,121 @@ +/** + * Hook odpowiedzialny za pobieranie i wstępne czyszczenie treści artykułów. + */ + +import { useCallback } from 'react'; + +export const useArticleContent = () => { + const fetchFullContent = useCallback(async (url: string): Promise
+ {children}
+
+
+
+
+
+ );
+}
diff --git a/TruthScan AI_frontend/app/page.tsx b/TruthScan AI_frontend/app/page.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..d709a7921dc24b348b02de1bd3c9db2966db1ba2
--- /dev/null
+++ b/TruthScan AI_frontend/app/page.tsx
@@ -0,0 +1,331 @@
+/**
+ * Strona główna aplikacji TruthScan AI.
+ */
+
+"use client";
+
+import { useEffect, useState } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import locales from "../lib/locales";
+import TipModal from "../app/TipModel";
+import type { Lang } from "../lib/types";
+
+export default function HomePage() {
+
+ const [language, setLanguage] = useState
+
+
+
+
+ TruthScan AI
+
+
+
+ {T(
+ "Inteligentny system do analizy wiarygodności newsów i wykrywania dezinformacji",
+ "Intelligent system for troverdighetanalyse av nyheter og oppdagelse av desinformasjon",
+ "Intelligent system for news credibility analysis and misinformation detection"
+ )}
+
+
+
+
+
+
+
+ {T("Przejdź do Dashboardu →", "Gå til dashbordet →", "Go to Dashboard →")}
+
+
+
+
+
+
+
+
+
+
+
+
+ {activeTip !== null && (
+ setActiveTip(null)}
+ />
+ )}
+
+
+);
+}
\ No newline at end of file
diff --git a/TruthScan AI_frontend/app/saved/page.tsx b/TruthScan AI_frontend/app/saved/page.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..7742305d13bd08092986503a02cd43e22ae9d086
--- /dev/null
+++ b/TruthScan AI_frontend/app/saved/page.tsx
@@ -0,0 +1,15 @@
+/**
+ * Strona aplikacji prezentująca zapisane przez użytkownika artykuły.
+ *
+ * Stanowi prosty wrapper routingu Next.js dla komponentu SavedArticlesPage.
+ */
+
+"use client";
+
+import SavedArticlesPage from "../../components/SavedArticlesPage";
+
+export default function Page() {
+ return
+
+ 10+
+
+ {T("Źródeł", "Kilder", "Sources")}
+
+
+
+ 2s
+
+ {T("Analiza", "Analyse", "Analysis")}
+
+
+
+ AI
+
+ {T("Modele NLP", "NLP-modeller", "NLP Models")}
+
+
+
+
+
+
+ + {T(" Dlaczego TruthScan AI?", " Hvorfor TruthScan AI?", " Why TruthScan AI?")} +
++ {T( + "Nowoczesne narzędzie wspierające krytyczne myślenie", + "Moderne verktøy som støtter kritisk tenkning", + "Modern tool supporting critical thinking" + )} +
+
+ {features.map((feature, index) => (
+
+
+ ))}
+
+ {feature.icon}
+ + {feature.title} +
++ {feature.description} +
+
+
+
+
+
+
+
+
+ + {T("🔍 Jak rozpoznać fake newsy?", "🔍 Hvordan gjenkjenne falske nyheter?", "🔍 How to Spot Fake News")} +
+ +
+ {tips.map((tip, i) => (
+
+ ))}
+
+
+
+ + {T("📚 Polecane źródła", "📚 Anbefalte kilder", "📚 Recommended Sources")} +
+ +
+ {sources.map((source) => (
+
+
+
+
+
+ ))}
+
+
+ {source.label}
+
+
+ {source.tag}
+
+
+
+ {hasFavicon ? (
+ 
+ ) : (
+
+ );
+
+ const renderDescription = () => (
+
+ {sourceInitial}
+
+ )}
+
+ + {article.title} +
++ {article.summary || article.description || + T("Brak opisu", "Ingen beskrivelse", "No description")} +
+ ); + + const renderMetadata = () => ( +
+
+ );
+
+ const renderActions = () => (
+ + 🕒 {T("Data", "Dato", "Date")}:{" "} + +
+📰 {T("Źródło", "Kilde", "Source")}: {article.source || "-"}
++ 💬 {T("Sentyment", "Sentimentanalyse", "Sentiment")}:{" "} + {sentimentLabel} +
++ ❓ {T("Prawdopodobieństwo Fake News", "Sannsynlighet for falske nyheter", "Fake News Probability")}:{" "} + {typeof article.fake_probability === "number" + ? `${article.fake_probability.toFixed(2)}%` + : T("Brak danych", "Ingen data", "No data")} +
+
+ {article.link && (
+
+ 🔗 {T("Pokaż artykuł", "Vis artikkel", "View article")}
+
+ )}
+
+ {savedView && (
+
+ )}
+
+ {savedView ? (
+
+ ) : onSave ? (
+
+ ) : null}
+
+ );
+
+ return (
+ <>
+ + {language === "pl" ? "Brak artykułów do wyświetlenia." : language === "no" ? "Ingen artikler å vise." : "No articles to display."} +
+ ); + } + + return ( +
+ {articles.map((article, idx) => (
+ onDelete(article.title) : undefined}
+ />
+ ))}
+
+ );
+}
+
+
+
+
+
diff --git a/TruthScan AI_frontend/components/DarkModeToggle.tsx b/TruthScan AI_frontend/components/DarkModeToggle.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..8459c7f29afe9f93d883f4ca413bd817d0500a60
--- /dev/null
+++ b/TruthScan AI_frontend/components/DarkModeToggle.tsx
@@ -0,0 +1,53 @@
+/**
+ * Komponent przełącznika trybu jasnego i ciemnego (dark mode).
+ *
+ * Odpowiada za:
+ * - zarządzanie stanem trybu kolorystycznego interfejsu,
+ * - synchronizację ustawienia z localStorage,
+ * - dynamiczne dodawanie klasy `dark` do elementu .
+ */
+
+"use client";
+
+import { useEffect, useState } from "react";
+import { Moon, Sun } from "lucide-react";
+
+export default function DarkModeToggle() {
+ const [darkMode, setDarkMode] = useState
+
+ );
+ }
+ return null;
+ };
+
+ if (translatedData.length === 0) {
+ return (
+ {data.name}
++ {language === "pl" ? "Liczba artykułów: " : language === "no" ? "Antall artikler: " : "Number of articles: "} + {data.value} +
++ {language === "pl" ? "Procent: " : language === "no" ? "Prosent: " : "Percentage: "} + {percentage.toFixed(1)}% +
+
+
+ );
+ }
+
+ return (
+ + {title || t.emotionsInArticles} +
+
+
+ + {language === "pl" ? "Brak danych do wyświetlenia" : language === "no" ? "Ingen data å vise" : "No data to display"} +
+
+
+ );
+}
\ No newline at end of file
diff --git a/TruthScan AI_frontend/components/FakeNewsBarChart.tsx b/TruthScan AI_frontend/components/FakeNewsBarChart.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..3cbf6451190ec0a1954c442e4617dde042f3f45e
--- /dev/null
+++ b/TruthScan AI_frontend/components/FakeNewsBarChart.tsx
@@ -0,0 +1,151 @@
+/**
+ * Komponent prezentujący porównawczy wykres słupkowy udziału fake newsów
+ * w poszczególnych źródłach informacyjnych.
+ *
+ * Odpowiada za:
+ * - wizualizację wyników analizy fake news w podziale na źródła,
+ * - obsługę wielojęzycznych etykiet i opisów,
+ * - czytelną prezentację danych z wykorzystaniem biblioteki Recharts,
+ * - informowanie użytkownika o braku lub niepełnych danych.
+ */
+
+"use client";
+
+import { useMemo } from "react";
+import {
+ ResponsiveContainer,
+ BarChart,
+ Bar,
+ XAxis,
+ YAxis,
+ Tooltip,
+ CartesianGrid,
+ Cell,
+} from "recharts";
+import { useLanguage } from "../app/hooks/useLanguage";
+import locales from "../lib/locales";
+
+interface Props {
+ data: { label: string; value: number }[];
+ title?: string;
+ footerNote?: string;
+}
+
+export default function FakeNewsBarChart({ data, title, footerNote }: Props) {
+
+ const { language } = useLanguage();
+ const t = locales[language];
+
+ const rows = useMemo(() => data.map((d) => ({ ...d })), [data]);
+
+ const NOTE_TEXT = {
+ pl: "Wykres przedstawia oszacowany udział artykułów oznaczonych jako fake news w poszczególnych źródłach.",
+ en: "The chart shows an estimated share of articles flagged as fake news across sources.",
+ no: "Diagrammet viser en estimert andel artikler flagget som falske nyheter per kilde.",
+ };
+
+ const METRIC_NAME = {
+ pl: "Prawdopodobieństwo fake news",
+ en: "Fake-news probability",
+ no: "Sannsynlighet for falske nyheter",
+ };
+
+ const NO_DATA_TEXT = {
+ pl: "Brak danych",
+ en: "No data",
+ no: "Ingen data",
+ };
+
+ const note = footerNote ?? NOTE_TEXT[language];
+ const metricName = METRIC_NAME[language];
+ const noDataText = NO_DATA_TEXT[language];
+ const formatTooltipValue = (v: number) => {
+ const valNum = Number(v);
+ const isEmpty = v == null || Number.isNaN(valNum) || valNum === 0;
+ return isEmpty ? noDataText : `${valNum.toFixed(2)}%`;
+ };
+
+ const formatTooltipLabel = (label: string, items: any[]) => {
+ const actualLabel = items?.[0]?.payload?.label ?? label;
+ const v = Number(items?.[0]?.value);
+ const empty = v == null || Number.isNaN(v) || v === 0;
+
+ const prefix = language === "pl" ? "Źródło: " : language === "no" ? "Kilde: " : "Source: ";
+ const suffix = empty
+ ? language === "pl" ? " (brak danych)" : language === "no" ? " (ingen data)" : " (no data)"
+ : "";
+
+ return `${prefix}${actualLabel}${suffix}`;
+ };
+
+ return (
+ + {title || t.emotionsInArticles} +
+ +
+
+
+
+ {translatedData.map((item, idx) => (
+ |
+ ))}
+
+
+
+
+
+
+ + {language === "pl" + ? "Wykres pokazuje rozkład emocji w analizowanych artykułach." + : language === "no" + ? "Diagrammet viser fordelingen av følelser i analyserte artikler." + : "This chart shows the distribution of detected emotions in articles."} +
+
+
+ );
+}
\ No newline at end of file
diff --git a/TruthScan AI_frontend/components/LanguageSwitcher.tsx b/TruthScan AI_frontend/components/LanguageSwitcher.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..b4c3deb37f093969e75800afc871ad030d7306e2
--- /dev/null
+++ b/TruthScan AI_frontend/components/LanguageSwitcher.tsx
@@ -0,0 +1,32 @@
+/**
+ * Komponent przełącznika języka interfejsu użytkownika.
+ *
+ * Odpowiada za:
+ * - umożliwienie użytkownikowi wyboru języka aplikacji (PL / EN),
+ * - przekazanie wybranego języka do komponentu nadrzędnego,
+ * - wizualną prezentację aktualnego języka w formie listy rozwijanej.
+ */
+
+
+import React from "react";
+import type { Lang } from "../lib/types";
+
+interface Props {
+ language: Lang;
+ setLanguage: (lang: Lang) => void;
+}
+
+export default function LanguageSwitcher({ language, setLanguage }: Props) {
+ return (
+
+ );
+}
+
diff --git a/TruthScan AI_frontend/components/LiveNewsFeed.tsx b/TruthScan AI_frontend/components/LiveNewsFeed.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..421bbdcb074480c469502fa72bbe41a46214c63d
--- /dev/null
+++ b/TruthScan AI_frontend/components/LiveNewsFeed.tsx
@@ -0,0 +1,157 @@
+/**
+ * Komponent strumieniowego wyświetlania artykułów z wybranego źródła.
+ *
+ * Odpowiada za:
+ * - odbiór danych w czasie rzeczywistym (streaming),
+ * - prezentację postępu przetwarzania artykułów,
+ * - animowane renderowanie listy artykułów,
+ * - umożliwienie zapisu pojedynczych artykułów.
+ */
+
+
+"use client";
+
+import React, { useEffect, useState, useMemo } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { useNewsStream } from "../app/hooks/useNewsStream";
+import type { Article } from "../lib/fetchNews";
+import ArticleCard from "./ArticleCard";
+
+import type { Lang } from "../lib/types";
+
+interface LiveNewsFeedProps {
+ source: string;
+ language: Lang;
+}
+
+const TEXT_CONTENT = {
+ pl: {
+ title: "Strumień wiadomości",
+ loading: "⏳ Ładowanie danych...",
+ error: "❌ Błąd połączenia z serwerem",
+ progress: (current: number, total: number) => `Przetworzono ${current} z ${total} artykułów`,
+ complete: "✅ Wszystkie artykuły załadowane!",
+ saveError: "❌ Błąd zapisu",
+ saveSuccess: "✅ Artykuł zapisany!",
+ connectionError: "❌ Błąd połączenia z backendem."
+ },
+ en: {
+ title: "News Stream",
+ loading: "⏳ Loading data...",
+ error: "❌ Server connection error",
+ progress: (current: number, total: number) => `Processed ${current} of ${total} articles`,
+ complete: "✅ All articles loaded!",
+ saveError: "❌ Save error",
+ saveSuccess: "✅ Article saved!",
+ connectionError: "❌ Connection error."
+ },
+ no: {
+ title: "Nyhetsstrøm",
+ loading: "⏳ Laster inn data...",
+ error: "❌ Tilkoblingsfeil til serveren",
+ progress: (current: number, total: number) => `Behandlet ${current} av ${total} artikler`,
+ complete: "✅ Alle artikler lastet!",
+ saveError: "❌ Lagringsfeil",
+ saveSuccess: "✅ Artikkel lagret!",
+ connectionError: "❌ Tilkoblingsfeil."
+ }
+};
+
+export default function LiveNewsFeed({ source, language }: LiveNewsFeedProps) {
+ const {
+ articles: rawArticles,
+ loading,
+ error,
+ progress = 0,
+ total = 0,
+ } = useNewsStream(source);
+
+ const [localArticles, setLocalArticles] = useState+ {title ?? t.fakeNewsSources} +
+ +
+
+
+ [formatTooltipValue(v), metricName]}
+ labelFormatter={formatTooltipLabel}
+ contentStyle={{
+ backgroundColor: "#1f2937",
+ color: "#fff",
+ borderRadius: 8,
+ border: "none",
+ }}
+ itemStyle={{ color: "#e5e7eb" }}
+ labelStyle={{ color: "#e5e7eb" }}
+ cursor={{ fill: "rgba(59,130,246,0.06)" }}
+ />
+
+
+ {rows.map((r, i) => (
+ |
+ ))}
+
+
+
+
+
+ + {note} +
+
+
+ {localArticles.map((a, i) => (
+
+
+ ))}
+
+
+ {progress === total && total > 0 && (
+
+ );
+}
\ No newline at end of file
diff --git a/TruthScan AI_frontend/components/NavBar.tsx b/TruthScan AI_frontend/components/NavBar.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..0061bc3fe44c1a9fe21e4ee674d24ac83ffc4261
--- /dev/null
+++ b/TruthScan AI_frontend/components/NavBar.tsx
@@ -0,0 +1,96 @@
+/**
+ * Globalny komponent nawigacji aplikacji.
+ *
+ * Odpowiada za:
+ * - prezentację głównej nawigacji między widokami,
+ * - obsługę zmiany języka interfejsu (PL / EN),
+ * - przełączanie trybu jasnego i ciemnego,
+ * - wizualne wskazanie aktywnej trasy.
+ */
+
+
+"use client";
+
+import { useEffect, useState } from "react";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { motion } from "framer-motion";
+import LanguageSwitcher from "./LanguageSwitcher";
+import DarkModeToggle from "./DarkModeToggle";
+
+type Lang = "pl" | "en" | "no";
+
+export default function NavBar() {
+ const pathname = usePathname();
+ const [language, setLanguage] = useState+ 📡 {t.title}: {source} +
+ + {loading &&{t.loading}
} + + {!!error && progress < total && ( +{t.error}
+ )} + +
+
+
+
+ + {progressText} +
+ ++ {t.complete} +
+ )} +
+ {showButton && (
+
+ );
+};
+
+export default PDFGenerator;
\ No newline at end of file
diff --git a/TruthScan AI_frontend/components/PDFModal.tsx b/TruthScan AI_frontend/components/PDFModal.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..eef1bfaedd82c9cf5a8024955b456ae38ade266c
--- /dev/null
+++ b/TruthScan AI_frontend/components/PDFModal.tsx
@@ -0,0 +1,161 @@
+/**
+ * Modal odpowiedzialny za prezentację i eksport analizy artykułu do formatu PDF.
+ *
+ * Odpowiada za:
+ * - wyświetlenie podglądu raportu analitycznego w oknie modalnym,
+ * - przekazanie danych artykułu do generatora PDF,
+ * - obsługę stanu ładowania pełnej treści artykułu,
+ * - inicjację i zakończenie procesu eksportu.
+ */
+
+"use client";
+
+import React from 'react';
+import PDFGenerator from './PDFGenerator';
+import { Article } from '../lib/fetchNews';
+import type { Lang } from '../lib/types';
+
+interface PDFModalProps {
+ article: Article;
+ language: Lang;
+ sentimentLabel: string;
+ sentimentColor: string;
+ fullContent: string;
+ isLoadingContent: boolean;
+ showPDF: boolean;
+ onClose: () => void;
+ onExportStart: () => void;
+ onExportEnd: () => void;
+}
+
+export default function PDFModal({
+ article,
+ language,
+ sentimentLabel,
+ sentimentColor,
+ fullContent,
+ isLoadingContent,
+ showPDF,
+ onClose,
+ onExportStart,
+ onExportEnd
+}: PDFModalProps) {
+ if (!showPDF) return null;
+
+ const T = (pl: string, no: string, en: string) =>
+ language === "pl" ? pl : language === "no" ? no : en;
+
+ return (
+
+
+
+ )}
+
+
+
+
+
+
+ {title}
+
+ Wygenerowano: {new Date().toLocaleDateString('pl-PL')}
+
+
+ {children}
+
+
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/TruthScan AI_frontend/components/PrintableArticle.tsx b/TruthScan AI_frontend/components/PrintableArticle.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..04d63836855cc30975f168a48426db0a3e5b94ef
--- /dev/null
+++ b/TruthScan AI_frontend/components/PrintableArticle.tsx
@@ -0,0 +1,202 @@
+/**
+ * Komponent odpowiedzialny za renderowanie artykułu w formacie przeznaczonym do druku.
+ *
+ * Odpowiada za:
+ * - prezentację treści artykułu w układzie zgodnym z wydrukiem / PDF,
+ * - ujednolicony layout raportu (nagłówek, metadane, treść, stopka),
+ * - obsługę wersji językowych (PL / EN),
+ * - współpracę z mechanizmami typu react-to-print lub eksport PDF.
+ */
+
+"use client";
+
+import React from 'react';
+import type { Lang } from '../lib/types';
+
+interface PrintableArticleProps {
+ article: {
+ title: string;
+ source: string;
+ published?: string;
+ summary?: string;
+ description?: string;
+ fake_probability?: number;
+ };
+ sentimentLabel: string;
+ language: Lang;
+ onClose?: () => void;
+}
+
+export const PrintableArticle: React.FC
+
+
+
+ + {T("Eksport PDF", "PDF-eksport", "PDF Export")} - {article.title} +
+ +
+
+
+
+
+
+
+
+ {article.link && (
+
+
+ )}
+
+
+
+
+
+
+
+ {article.title}
+
+
+
+ {T("Źródło", "Kilde", "Source")}:
+ {article.source} +
+ + {article.source} +
+ {T("Data publikacji", "Publiseringsdato", "Publication date")}:
+ {article.published} +
+ + {article.published} +
+ {T("Sentyment", "Sentimentanalyse", "Sentiment")}:
+ {sentimentLabel} +
+ + {sentimentLabel} +
+ {T("Prawd. Fake News", "Sannsynlighet falske nyheter", "Fake News Prob.")}:
+ {typeof article.fake_probability === "number" ? + `${article.fake_probability.toFixed(2)}%` : "N/A"} +
+ + {typeof article.fake_probability === "number" ? + `${article.fake_probability.toFixed(2)}%` : "N/A"} +
+ {T("Pełna treść artykułu", "Fullstendig artikkelinnhold", "Full Article Content")} +
+
+ {isLoadingContent ? (
+
+
+
+
+ ) : (
+ + {T("Pobieranie pełnej treści...", "Laster inn fullstendig innhold...", "Loading full content...")} +
+
+ {fullContent || article.summary || article.description ||
+ T("Brak dostępnej treści", "Ingen innhold tilgjengelig", "No content available")}
+
+ )}
+
+ {(fullContent && fullContent.length > 0) && (
+
+ ℹ️ {T(
+ "Treść pobrana automatycznie z oryginalnego źródła",
+ "Innhold automatisk hentet fra original kilde",
+ "Content automatically fetched from original source"
+ )}
+
+ )}
+ + {T("Link do oryginalnego artykułu", "Original artikkellenke", "Original Article Link")} +
+ +{T("Wygenerowano przez ThruScan Analysis", "Generert av ThruScan Analysis", "Generated by ThruScan Analysis")}
+{new Date().toLocaleDateString(language === "pl" ? "pl-PL" : language === "no" ? "no-NO" : "en-US", { + year: 'numeric', + month: 'long', + day: 'numeric', + hour: '2-digit', + minute: '2-digit' + })}
+
+ {/* Ten komponent będzie używany przez react-to-print */}
+
+ );
+};
\ No newline at end of file
diff --git a/TruthScan AI_frontend/components/ProgressBar.tsx b/TruthScan AI_frontend/components/ProgressBar.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..f333d1ce51e41becef6ed4f9eab0846bd2739a9b
--- /dev/null
+++ b/TruthScan AI_frontend/components/ProgressBar.tsx
@@ -0,0 +1,48 @@
+/**
+ * Komponent wizualizujący postęp ładowania danych analitycznych.
+ *
+ * Odpowiada za:
+ * - prezentację bieżącego stanu przetwarzania źródeł,
+ * - wyświetlenie wartości liczbowych i procentowych postępu,
+ * - dostosowanie komunikatów do wybranego języka interfejsu (PL / EN).
+ */
+
+
+"use client";
+
+import type { Lang } from "../lib/types";
+
+interface ProgressBarProps {
+ progressCount: number;
+ totalSources: number;
+ progressPct: number;
+ language: Lang;
+}
+
+export default function ProgressBar({
+ progressCount,
+ totalSources,
+ progressPct,
+ language
+}: ProgressBarProps) {
+ return (
+
+
+
+
+
+
+
+ ThruScan AI
+ {article.title}
+
+
+
+
+ 📅 {T("Data", "Dato", "Date")}:
+ {article.published || T("Brak daty", "Ingen dato", "No date")}
+
+
+ 📰 {T("Źródło", "Kilde", "Source")}:
+ {article.source || "-"}
+
+
+ 💬 {T("Sentyment", "Sentimentanalyse", "Sentiment")}:
+ {sentimentLabel}
+
+
+ ❓ Fake News:
+ {typeof article.fake_probability === "number" ? article.fake_probability.toFixed(2) + "%" : T("Brak danych", "Ingen data", "No data")}
+
+
+
+
+
+ 📝 {T("TREŚĆ ARTYKUŁU", "ARTIKKELINNHOLD", "ARTICLE CONTENT")}
+
+
+ {articleContent.split('\n').map((paragraph, index) =>
+ paragraph.trim() ?
+ {paragraph}
: null + )} +
+ {T("Wygenerowano przez ThruScan AI", "Generert av ThruScan AI", "Generated by ThruScan AI")} • {new Date().toLocaleDateString(language === "pl" ? "pl-PL" : language === "no" ? "no-NO" : "en-US")}
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/TruthScan AI_frontend/components/SavedArticlesPage.tsx b/TruthScan AI_frontend/components/SavedArticlesPage.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..dd693b99088df300014fc1abcd750f557f47bbd6
--- /dev/null
+++ b/TruthScan AI_frontend/components/SavedArticlesPage.tsx
@@ -0,0 +1,116 @@
+/**
+ * Widok zapisanych artykułów użytkownika.
+ *
+ * Odpowiada za:
+ * - pobieranie listy zapisanych artykułów z backendu,
+ * - synchronizację języka interfejsu (localStorage + event),
+ * - prezentację artykułów w formie kart,
+ * - obsługę usuwania zapisanych wpisów.
+ */
+
+
+"use client";
+
+import { useEffect, useState } from "react";
+import locales from "../lib/locales";
+import ArticleCard from "./ArticleCard";
+import { Article } from "../lib/fetchNews";
+import type { Lang } from "../lib/types";
+
+export default function SavedArticlesPage() {
+ const [savedArticles, setSavedArticles] = useState
+
+ {language === "pl"
+ ? `Postęp ładowania wykresów: ${progressCount} / ${totalSources}`
+ : language === "no"
+ ? `Lasteframgang for diagrammer: ${progressCount} / ${totalSources}`
+ : `Charts loading progress: ${progressCount} / ${totalSources}`}
+
+ {progressPct}%
+
+
+
+
+
+
+ );
+}
+
+
+
+
diff --git a/TruthScan AI_frontend/components/SourceBlock.tsx b/TruthScan AI_frontend/components/SourceBlock.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..8ed94c29be1d6418c19c94d4bbf4c63416325405
--- /dev/null
+++ b/TruthScan AI_frontend/components/SourceBlock.tsx
@@ -0,0 +1,105 @@
+/**
+ * Blok porównawczy pojedynczego źródła informacyjnego.
+ *
+ * Odpowiada za:
+ * - prezentację wybranego źródła wiadomości,
+ * - możliwość dynamicznej zmiany źródła w obrębie porównania,
+ * - wyświetlenie podstawowych metryk (liczba artykułów, ryzyko fake news),
+ * - osadzenie strumienia artykułów dla danego źródła.
+ */
+
+"use client";
+
+import SourceSelector from "./SourceSelector";
+import LiveNewsFeed from "./LiveNewsFeed";
+import type { Lang } from "../lib/types";
+
+export type SourceBlockProps = {
+ source: string;
+ onChangeSource: (s: string) => void;
+ language: Lang;
+ locales: any;
+ stats?: {
+ articlesCount?: number;
+ fakeRiskPercent?: number;
+ };
+ className?: string;
+};
+
+const STATS_TEXT = {
+ pl: {
+ articles: "Artykułów:",
+ fakeRisk: 'Ryzyko "fake":',
+ },
+ en: {
+ articles: "Articles:",
+ fakeRisk: "Fake risk:",
+ },
+ no: {
+ articles: "Artikler:",
+ fakeRisk: "Falsk-risiko:",
+ },
+};
+
+export default function SourceBlock({
+ source,
+ onChangeSource,
+ language,
+ locales,
+ stats,
+ className,
+}: SourceBlockProps) {
+ const t = STATS_TEXT[language];
+
+ return (
+ + 💾 {language === "pl" ? "Zapisane artykuły" : language === "no" ? "Lagrede artikler" : "Saved articles"} +
+ + {savedArticles.length === 0 ? ( ++ {language === "pl" ? "Brak zapisanych artykułów." : language === "no" ? "Ingen lagrede artikler." : "No saved articles."} +
+ ) : ( + savedArticles.map((article, index) => ( +
+
+ );
+}
+
diff --git a/TruthScan AI_frontend/components/SourceSelector.tsx b/TruthScan AI_frontend/components/SourceSelector.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..30de4cb88b5bd34d6b459c0c76181d3c0369b9a8
--- /dev/null
+++ b/TruthScan AI_frontend/components/SourceSelector.tsx
@@ -0,0 +1,55 @@
+/**
+ * Selektor źródła wiadomości.
+ *
+ * Odpowiada za:
+ * - wybór aktywnego źródła informacyjnego,
+ * - przekazanie zmiany wyboru do komponentu nadrzędnego,
+ * - prezentację listy dostępnych źródeł w aktualnym języku interfejsu.
+ */
+
+
+"use client";
+
+import React from "react";
+import type { Lang } from "../lib/types";
+
+interface Props {
+ selectedSource: string;
+ setSelectedSource: (src: string) => void;
+ language: Lang;
+ locales: Record
+
+
+ {stats && (stats.articlesCount != null || stats.fakeRiskPercent != null) && (
+
+
+
+ + {source} +
+
+
+
+ {stats.articlesCount != null && (
+
+
+ {t.articles}
+ {stats.articlesCount}
+
+ )}
+ {stats.fakeRiskPercent != null && (
+
+
+ {t.fakeRisk}
+
+ {stats.fakeRiskPercent.toFixed(2)}%
+
+
+ )}
+
+ )}
+
+ {/* Feed – remount przy zmianie źródła */}
+
+
+