Add changelog

Author: Edwinexd

CHANGELOG.md

@@ -0,0 +1,16 @@
+# Changelog
+
+## 2026-03-19 - Changelog added
+A changelog has been added to the app to keep you updated on new features and bug fixes.
+
+## 2026-03-16 - Support for 0-results in aggregate questions
+Aggregate questions (e.g. COUNT) now also accept solutions that include rows with 0-results via OUTER JOIN or UNION. Both variants (with and without 0-rows) are accepted.
+
+## 2026-03-11 - Multi-language support (Swedish & English)
+The validator now supports both Swedish and English. Select language in the menu above the schema.
+
+## 2026-03-11 - Language check in save files
+Import/export of save files now checks that the language matches. A warning is shown if the save file was created with a different language.
+
+## 2026-02-01 - Merge support for imports
+When importing save files you can now choose between overwriting or merging with existing answers.

src/App.tsx

@@ -32,6 +32,7 @@ import initSqlJs from "sql.js";
 import ViewsTable, { View } from "./ViewsTable";
 
 import { Info, Settings, XCircle, CheckCircle2, Eye, EyeOff } from "lucide-react";
+import ChangelogDialog from "./ChangelogDialog";
 import { Button } from "@/components/ui/button";
 import {
   DropdownMenu,
@@ -1034,6 +1035,7 @@ function App() {
             <span>-</span>
             <a href="https://github.com/Edwinexd/sql-validator?tab=GPL-3.0-1-ov-file" target="_blank" rel="noopener noreferrer" className="text-blue-600 dark:text-blue-400 hover:underline">GPL-3.0</a>
             <a href="https://github.com/Edwinexd/sql-validator/issues" target="_blank" rel="noopener noreferrer" className="text-blue-600 dark:text-blue-400 hover:underline">Report Issue</a>
+            <ChangelogDialog />
             <PrivacyNoticeToggle></PrivacyNoticeToggle>
           </div>
         </footer>

src/ChangelogDialog.tsx

@@ -0,0 +1,92 @@
+import { useState, useEffect, useMemo } from "react";
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { useLanguage } from "./i18n/context";
+import changelogRaw from "../CHANGELOG.md?raw";
+
+interface ChangelogEntry {
+  date: string;
+  title: string;
+  description: string;
+}
+
+function parseChangelog(raw: string): ChangelogEntry[] {
+  const entries: ChangelogEntry[] = [];
+  for (const block of raw.split(/^## /m).slice(1)) {
+    const [heading, ...rest] = block.split("\n");
+    const match = heading.match(/^(\d{4}-\d{2}-\d{2})\s*-\s*(.+)$/);
+    if (!match) continue;
+    entries.push({
+      date: match[1],
+      title: match[2].trim(),
+      description: rest.join("\n").trim(),
+    });
+  }
+  return entries;
+}
+
+const CHANGELOG_VERSION_KEY = "changelog-last-seen";
+
+const ChangelogDialog = () => {
+  const { t } = useLanguage();
+  const [open, setOpen] = useState(false);
+  const [hasNew, setHasNew] = useState(false);
+  const entries = useMemo(() => parseChangelog(changelogRaw), []);
+
+  useEffect(() => {
+    if (entries.length === 0) return;
+    const lastSeen = localStorage.getItem(CHANGELOG_VERSION_KEY);
+    if (!lastSeen) {
+      localStorage.setItem(CHANGELOG_VERSION_KEY, entries[0].date);
+    } else if (lastSeen < entries[0].date) {
+      setHasNew(true);
+    }
+  }, [entries]);
+
+  const handleOpen = () => {
+    setOpen(true);
+    setHasNew(false);
+    if (entries.length > 0) {
+      localStorage.setItem(CHANGELOG_VERSION_KEY, entries[0].date);
+    }
+  };
+
+  return (
+    <>
+      <button
+        onClick={handleOpen}
+        className="text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 cursor-pointer bg-transparent border-0 p-0 relative"
+      >
+        {t("changelog")}
+        {hasNew && (
+          <span className="absolute -top-1.5 -right-3 bg-red-500 text-white text-[10px] font-bold px-1 rounded-full leading-tight">
+            !
+          </span>
+        )}
+      </button>
+      <Dialog open={open} onOpenChange={setOpen}>
+        <DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle className="text-2xl">{t("changelog")}</DialogTitle>
+          </DialogHeader>
+          <div className="space-y-4">
+            {entries.map((entry, i) => (
+              <div key={i} className="border-b border-gray-200 dark:border-slate-700 pb-3 last:border-0">
+                <span className="text-xs text-gray-500 dark:text-gray-400 font-mono">{entry.date}</span>
+                <h3 className="font-semibold text-base">{entry.title}</h3>
+                <p className="text-sm text-gray-600 dark:text-gray-400 mt-1">{entry.description}</p>
+              </div>
+            ))}
+          </div>
+          <div className="text-right mt-2">
+            <Button variant="ghost" onClick={() => setOpen(false)}>
+              {t("close")}
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+    </>
+  );
+};
+
+export default ChangelogDialog;

src/i18n/ui-strings.ts

@@ -76,6 +76,7 @@ export const uiStrings: Record<string, Record<string, string>> = {
     conflicts: "conflicts",
     languageMismatchWarning: "Warning: This save file was created with a different language ({{fileLang}}). Importing may cause issues.",
     viewLabel: "View",
+    changelog: "Changelog",
   },
 
   en: {
@@ -150,5 +151,6 @@ export const uiStrings: Record<string, Record<string, string>> = {
     conflicts: "conflicts",
     languageMismatchWarning: "Warning: This save file was created with a different language ({{fileLang}}). Importing may cause issues.",
     viewLabel: "View",
+    changelog: "Changelog",
   },
 };