✨ Feat: Add theme options

This commit introduces the ability to store and retrieve theme options in the database.

The `themes` table in the database has been updated to include an `options` column, which stores the theme options as a JSON string. The `addTheme` function now accepts an `options` parameter and stores it in the database. A new function `getThemeOptions` has been added to retrieve the theme options for a given theme.

This change allows for more flexible and customizable themes.

Author: Its4Nik

src/core/database/database.ts

@@ -105,6 +105,7 @@ export function init() {
       name TEXT PRIMARY KEY,
       creator TEXT NOT NULL,
       vars TEXT NOT NULL,
+      options TEXT NOT NULL,
       tags TEXT NOT NULL
     )
   `);
@@ -135,10 +136,23 @@ export function init() {
     }
   `;
 
+  const defaultThemeOptions = {
+    backgroundAnimation: {
+      enabled: true,
+      from: ["#c084fc", "#818cf9", "#60a5fa"],
+    },
+  };
+
   if (themeRows.count === 0) {
     db.prepare(
-      "INSERT INTO themes (name, creator, vars, tags) VALUES (?,?,?,?)",
-    ).run("default", "Its4Nik", defaultCss, "default, dark");
+      "INSERT INTO themes (name, creator, vars, options, tags) VALUES (?,?,?,?,?)",
+    ).run(
+      "default",
+      "Its4Nik",
+      defaultCss,
+      JSON.stringify(defaultThemeOptions),
+      "default, dark",
+    );
   }
 
   const configRow = db

src/core/database/themes.ts

@@ -1,34 +1,55 @@
-import type { Theme } from "~/typings/database";
+import type { Theme, ThemeOptions } from "~/typings/database";
 import { logger } from "../utils/logger";
 import { db } from "./database";
 import { executeDbOperation } from "./helper";
 
 const stmt = {
-	insert: db.prepare(`
-      INSERT INTO themes (name, creator, vars, tags) VALUES (?, ?, ?, ?)
+  insert: db.prepare(`
+      INSERT INTO themes (name, creator, vars, options, tags) VALUES (?, ?, ?, ?, ?)
     `),
-	remove: db.prepare("DELETE FROM themes WHERE name = ?"),
-	read: db.prepare("SELECT * FROM themes WHERE name = ?"),
-	readAll: db.prepare("SELECT * FROM themes"),
+  remove: db.prepare("DELETE FROM themes WHERE name = ?"),
+  read: db.prepare(
+    "SELECT name, creator, vars, tags FROM themes WHERE name = ?",
+  ),
+  readOptions: db.prepare("SELECT options FROM themes WHERE name = ?"),
+  readAll: db.prepare("SELECT * FROM themes"),
 };
 
 export function getThemes() {
-	return executeDbOperation("Get Themes", () => stmt.readAll.all()) as Theme[];
+  return executeDbOperation("Get Themes", () => stmt.readAll.all()) as Theme[];
 }
 
-export function addTheme({ name, creator, vars, tags }: Theme) {
-	return executeDbOperation("Save Theme", () =>
-		stmt.insert.run(name, creator, vars, tags.toString()),
-	);
+export function addTheme({ name, creator, options, vars, tags }: Theme) {
+  return executeDbOperation("Save Theme", () =>
+    stmt.insert.run(
+      name,
+      creator,
+      vars,
+      JSON.stringify(options),
+      tags.toString(),
+    ),
+  );
 }
+
 export function getSpecificTheme(name: string): Theme {
-	return executeDbOperation(
-		"Getting specific Theme",
-		() => stmt.read.get(name) as Theme,
-	);
+  return executeDbOperation(
+    "Getting specific Theme",
+    () => stmt.read.get(name) as Theme,
+  );
+}
+
+export function getThemeOptions(name: string): ThemeOptions {
+  const data = executeDbOperation(
+    "Getting Theme Options",
+    () => (stmt.readOptions.get(name) as { options: string }).options,
+  );
+
+  logger.debug(`RAW DB: ${JSON.stringify(stmt.readOptions.get(name))}`);
+
+  return JSON.parse(data);
 }
 
 export function deleteTheme(name: string) {
-	logger.debug(`Removing ${name} from themes  `);
-	return executeDbOperation("Remove Theme", () => stmt.remove.run(name));
+  logger.debug(`Removing ${name} from themes  `);
+  return executeDbOperation("Remove Theme", () => stmt.remove.run(name));
 }

src/handlers/themes.ts

@@ -1,42 +1,48 @@
 import { dbFunctions } from "~/core/database";
-import type { Theme } from "~/typings/database";
+import { logger } from "~/core/utils/logger";
+import type { Theme, ThemeOptions } from "~/typings/database";
 
 class themeHandler {
-	getThemes(): Theme[] {
-		return dbFunctions.getThemes();
-	}
-	addTheme(theme: Theme) {
-		try {
-			const rawVars =
-				typeof theme.vars === "string" ? JSON.parse(theme.vars) : theme.vars;
+  getThemes(): Theme[] {
+    return dbFunctions.getThemes();
+  }
+  addTheme(theme: Theme) {
+    try {
+      const rawVars =
+        typeof theme.vars === "string" ? JSON.parse(theme.vars) : theme.vars;
 
-			const cssVars = Object.entries(rawVars)
-				.map(([key, value]) => `--${key}: ${value};`)
-				.join(" ");
+      const cssVars = Object.entries(rawVars)
+        .map(([key, value]) => `--${key}: ${value};`)
+        .join(" ");
 
-			const varsString = `.root, #root, #docs-root { ${cssVars} }`;
+      const varsString = `.root, #root, #docs-root { ${cssVars} }`;
 
-			return dbFunctions.addTheme({
-				...theme,
-				vars: varsString,
-			});
-		} catch (error) {
-			throw new Error(
-				`Could not save theme ${JSON.stringify(theme)}, error: ${error}`,
-			);
-		}
-	}
-	deleteTheme(name: string) {
-		try {
-			dbFunctions.deleteTheme(name);
-			return "Deleted theme";
-		} catch (error) {
-			throw new Error(`Could not save theme ${name}, error: ${error}`);
-		}
-	}
-	getTheme(name: string): Theme {
-		return dbFunctions.getSpecificTheme(name);
-	}
+      return dbFunctions.addTheme({
+        ...theme,
+        vars: varsString,
+      });
+    } catch (error) {
+      throw new Error(
+        `Could not save theme ${JSON.stringify(theme)}, error: ${error}`,
+      );
+    }
+  }
+  deleteTheme(name: string) {
+    try {
+      dbFunctions.deleteTheme(name);
+      return "Deleted theme";
+    } catch (error) {
+      throw new Error(`Could not save theme ${name}, error: ${error}`);
+    }
+  }
+  getTheme(name: string): Theme {
+    return dbFunctions.getSpecificTheme(name);
+  }
+  getThemeOptions(name: string): ThemeOptions {
+    const data = dbFunctions.getThemeOptions(name);
+    logger.debug(`Received ${JSON.stringify(data)}`);
+    return data;
+  }
 }
 
 export const ThemeHandler = new themeHandler();