startup: wait for config to init

Also cleanup some stuff

app.tsx

@@ -2,7 +2,6 @@ import Bar from "@/modules/bar";
 import Launcher from "@/modules/launcher";
 import NotifPopups from "@/modules/notifpopups";
 import Osds from "@/modules/osds";
-import Popdowns from "@/modules/popdowns";
 import Session from "@/modules/session";
 import SideBar from "@/modules/sidebar";
 import Calendar from "@/services/calendar";
@@ -11,7 +10,6 @@ import Palette from "@/services/palette";
 import Players from "@/services/players";
 import Schemes from "@/services/schemes";
 import Wallpapers from "@/services/wallpapers";
-import type PopupWindow from "@/widgets/popupwindow";
 import { execAsync, idle, timeout, writeFileAsync } from "astal";
 import { App } from "astal/gtk3";
 import { style } from "config";
@@ -61,23 +59,22 @@ export const loadStyleAsync = () => styleLoader.run();
 App.start({
     instanceName: "caelestia",
     icons: "assets/icons",
-    main() {
+    async main() {
         const now = Date.now();
 
+        await initConfig();
+
         loadStyleAsync().catch(console.error);
         style.transparency.subscribe(() => loadStyleAsync().catch(console.error));
         Palette.get_default().connect("notify::colours", () => loadStyleAsync().catch(console.error));
         Palette.get_default().connect("notify::mode", () => loadStyleAsync().catch(console.error));
 
-        initConfig();
-
         <Launcher />;
         <NotifPopups />;
         <Osds />;
         <Session />;
         Monitors.get_default().forEach(m => <SideBar monitor={m} />);
         Monitors.get_default().forEach(m => <Bar monitor={m} />);
-        <Popdowns />;
 
         // Init services
         timeout(1000, () => {
@@ -89,23 +86,10 @@ App.start({
         console.log(`Caelestia started in ${Date.now() - now}ms`);
     },
     requestHandler(request, res) {
-        if (request === "quit") App.quit();
+        if (request === "reload-css") loadStyleAsync().catch(console.error);
-        else if (request === "reload-css") loadStyleAsync().catch(console.error);
         else if (request === "reload-config") updateConfig();
         else if (request.startsWith("show")) App.get_window(request.split(" ")[1])?.show();
-        else if (request === "toggle sideleft") {
+        else if (request === "media play-pause") Players.get_default().lastPlayer?.play_pause();
-            const window = App.get_window("sideleft") as PopupWindow | null;
-            if (window) {
-                if (window.visible) window.hide();
-                else window.popup_at_corner("top left");
-            }
-        } else if (request === "toggle sideright") {
-            const window = App.get_window("sideright") as PopupWindow | null;
-            if (window) {
-                if (window.visible) window.hide();
-                else window.popup_at_corner("top right");
-            }
-        } else if (request === "media play-pause") Players.get_default().lastPlayer?.play_pause();
         else if (request === "media next") Players.get_default().lastPlayer?.next();
         else if (request === "media previous") Players.get_default().lastPlayer?.previous();
         else if (request === "media stop") Players.get_default().lastPlayer?.stop();

scss/_lib.scss

@@ -43,57 +43,3 @@ $scale: 0.068rem;
 @mixin ease-in-out {
     transition-timing-function: cubic-bezier(0.85, 0, 0.15, 1);
 }
-
-@mixin popdown-window($colour) {
-    @include rounded(8);
-    @include border($colour, 0.4, 2);
-    @include shadow;
-    @include font.mono;
-
-    background-color: scheme.$mantle;
-    color: $colour;
-    padding: s(10) s(12);
-    font-size: s(14);
-
-    .header {
-        @include spacing(8);
-
-        padding: 0 s(5);
-        margin-bottom: s(8);
-        font-size: s(15);
-
-        button {
-            @include rounded(5);
-            @include element-decel;
-
-            padding: s(3) s(8);
-
-            &:hover,
-            &:focus {
-                background-color: scheme.$surface0;
-            }
-
-            &:active {
-                background-color: scheme.$surface1;
-            }
-
-            &.enabled {
-                background-color: $colour;
-                color: scheme.$base;
-
-                &:hover,
-                &:focus {
-                    background-color: color.mix($colour, scheme.$base, 80%);
-                }
-
-                &:active {
-                    background-color: color.mix($colour, scheme.$base, 70%);
-                }
-            }
-        }
-    }
-
-    .icon {
-        font-size: s(32);
-    }
-}

src/config/funcs.ts

@@ -88,9 +88,9 @@ export const updateConfig = async () => {
     loadStyleAsync().catch(console.error);
 };
 
-export const initConfig = () => {
+export const initConfig = async () => {
     monitorFile(CONFIG, () => updateConfig().catch(e => console.warn(`Invalid config: ${e}`)));
-    updateConfig().catch(e => console.warn(`Invalid config: ${e}`));
+    await updateConfig().catch(e => console.warn(`Invalid config: ${e}`));
 };
 
 export const setConfig = async (path: string, value: any) => {