Oled theme (rift, you might wanna chnage this idk if you'll like it)

database_assets/styles/com.nebula.oled.css

@@ -0,0 +1,19 @@
+:root {
+    --background-primary: #000000 /* #191724 */;
+    --background-lighter: #000000;
+    --navbar-color: #19172f;
+    --navbar-height: 60px;
+    --navbar-text-color: #ffffff;
+    --navbar-link-color: #ffffff;
+    --navbar-link-hover-color: gray;
+    --navbar-font: "Roboto";
+    --input-text-color: #e0def4;
+    --input-placeholder-color: white;
+    --input-background-color: #000000;
+    --input-border-color: #eb6f92;
+    --input-border-size: 1.3px;
+    --navbar-logo-filter: none;
+    --dropdown-option-hover-color: #000000;
+    --tab-color: #000000;
+    --border-color: #ffffff;
+}

package.json

@@ -1,7 +1,7 @@
 {
   "name": "nebula-astro",
   "type": "module",
-  "version": "0.0.1",
+  "version": "9.0.0",
   "scripts": {
     "dev": "concurrently \"astro dev\" \"tsx --watch server/server.ts\"",
     "start": "node server/server.js",

server/dbSetup.ts

@@ -16,7 +16,7 @@ async function installItems(db: ModelStatic<CatalogModel>, items: Items[]) {
             title: item.title,
             image: item.image,
             author: item.author,
-            version: item.author,
+            version: item.version,
             description: item.description,
             tags: item.tags,
             payload: item.payload,
@@ -40,6 +40,17 @@ async function setupDB(db: ModelStatic<CatalogModel>) {
             tags: ["Theme", "Simple"],
             payload: "com.nebula.gruvbox.css",
             type: 'theme'
+        },
+        {
+            package_name: 'com.nebula.oled',
+            title: 'Oled theme',
+            image: 'com.nebula.oled.jpg',
+            author: 'Nebula Services',
+            version: '1.0.0',
+            description: 'A sleek & simple Oled theme for Nebula',
+            tags: ['Theme', 'Simple', 'Sleek'],
+            payload: 'com.nebula.oled.css',
+            type: 'theme'
         }
     ]
     const dbItems = await db.findAll();

server/server.ts

@@ -24,6 +24,8 @@ const db = new Sequelize(parsedDoc.db.name, parsedDoc.db.username, parsedDoc.db.
     storage: 'database.sqlite' //this is sqlite only
 });
 
+type CatalogType = "theme" | "plugin"
+
 interface Catalog {
     package_name: string
     title: string
@@ -35,7 +37,7 @@ interface Catalog {
     background_image: string
     background_video: string 
     payload: string
-    type: string
+    type: CatalogType
 }
 
 interface CatalogModel extends Catalog, Model<InferAttributes<CatalogModel>, InferCreationAttributes<CatalogModel>> {};

src/layouts/SettingsLayout.astro

@@ -9,7 +9,7 @@ import { Icon } from "astro-icon/components";
 
 <div class="flex flex-row">
   <div class="text-text-color mt-16 fixed inset-0 h-[calc(100%-4rem)] z-0 bg-primary flex-col flex md:flex-row">
-    <div class="items-center p-3 flex flex-row border-border-color gap-5 border-r-2 md:w-2/12 md:flex-col md:bg-navbar-color md:gap-0 md:p-0">
+      <div class="items-center p-3 flex flex-row border-border-color gap-5 border-r-2 md:w-2/12 md:flex-col md:bg-navbar-color md:gap-0 md:p-0">
       <SidebarButton title={t("settings.appearance")} route={`/${lang}/settings/appearance`}>
         <Icon name="ph:palette" class="h-6 w-6 text-text-color transition duration-500 group-hover:text-text-hover-color md:h-6 md:w-6" />
       </SidebarButton>
@@ -19,6 +19,9 @@ import { Icon } from "astro-icon/components";
       <SidebarButton title={t("settings.tab")} route={`/${lang}/settings/tab/`}>
         <Icon name="ph:laptop-fill" class="h-6 w-6 text-text-color transition duration-500 group-hover:text-text-hover-color md:h-6 md:w-6" />
       </SidebarButton>
+      <SidebarButton title="Misc" route={`/${lang}/settings/misc`}>
+        <Icon name="ph:gear" class="h-6 w-6 text-text-color transistion duration-500 group-hover:text-text-hover-color md:h-6 md:w=6" />
+      </SidebarButton>
     </div>
     <div class="p-8 md:w-10/12 overflow-y-auto">
       <p class="text-5xl font-semibold mb-5">{t("settings.settings")}</p>

src/pages/[lang]/settings/misc.astro

@@ -0,0 +1,59 @@
+---
+import SettingsCard from "@components/settings/SettingsCard.astro";
+import Toast from "@components/toasts/Toast.svelte";
+import ToastWrapper from "@components/toasts/ToastWrapper.svelte";
+import Layout from "@layouts/Layout.astro";
+import SettingsLayout from "@layouts/SettingsLayout.astro";
+import SettingsSection from "@layouts/SettingsSection.astro";
+import { getLangFromUrl, useTranslations } from "../../../i18n/utils";
+
+const lang = getLangFromUrl(Astro.url);
+const t = useTranslations(lang);
+export function getStaticPaths() {
+    const STATIC_PATHS = [{ params: { lang: "en_US" } }, { params: { lang: "jp" } }];
+    return STATIC_PATHS;
+}
+export const prerender = true;
+---
+
+<Layout title="Settings">
+  <SettingsLayout title="Miscellaneous">
+  <SettingsSection title="Misc" subtitle="All of our miscellaneous settings">
+    <div class="w-full h-full flex flex-col items-center justify-center flex-wrap md:flex-row md:items-start md:justify-start gap-4">
+        <SettingsCard 
+            title="Language"
+            description="Choose your language"
+            input={{input:false}}
+            button={{name: 'Change Language', id: 'setlang'}}
+            select={{
+                select: true,
+                name: 'lang',
+                options: [
+                    {name: 'English', value: 'en_US', disabled: false},
+                    {name: 'Japanese', value: 'jp', disabled: false},
+                ]
+            }}
+        />
+    </SettingsSection>
+  </SettingsLayout>
+<script>
+    import { toast } from "@utils/toast.ts";
+    import { settings, Settings as SettingsEnum } from "@utils/settings/index";
+    import { pageLoad } from "@utils/events";
+    import { navigate } from "astro:transitions/client";
+    function setup() {
+        const lang = JSON.parse(localStorage.getItem('selectedLanguage') as string || '{ value: "en_US" }');
+        const languageVal = document.getElementById('lang') as HTMLSelectElement;
+        languageVal!.value = lang.value;
+    }
+    pageLoad(() => {
+        setup();
+        const languageChange = document.getElementById('setlang') as HTMLButtonElement;
+        const languageVal = document.getElementById('lang') as HTMLSelectElement;
+        languageChange?.addEventListener('click', () => {
+            const language = {value: languageVal.value}
+            localStorage.setItem("selectedLanguage", JSON.stringify(language));
+            navigate(`${window.location.origin}/${languageVal.value}/settings/misc`)
+        });
+    })
+</script>

src/pages/catalog/[...page].astro

@@ -16,7 +16,10 @@ const lastPage = assetsJson.pages;
 
 <Layout title="Catalog">
   <div class="flex mt-16 w-full fixed inset-0 h-[calc(100%-4rem)] z-0 bg-primary flex-col items-center overflow-auto">
-    <div> The Nebula Catalog is a place for you to find user-created themes and plugins. </div>
+      <div class="w-full flex flex-col gap-4 jusitfy-center items-center text-text-color mt-9"> 
+          <h1 class="text-5xl font-bold"> Nebula Catalog </h1>
+          <p class="text-xl"> The Nebula Catalog is a place for you to find user-created themes and plugins. </p>
+      </div>
     <CatalogCard client:only="svelte" page={page} />
     <div class="flex flex-row pb-8 gap-4 roboto">
       {/* The first page. If the user is on this page, or the one after it, don't show it. */}

src/utils/events.ts

@@ -1,9 +1,9 @@
-function pageLoad(fn: () => void) {
+function pageLoad(fn: () => void, logging?: boolean) {
     document.addEventListener("astro:page-load", () => {
         try {
             fn();
         }
-        catch (err) { /* DEBUGGING ONLY: console.error(err) */ }
+        catch (err) { if (logging) { console.error(err) } }
     });
 }