✨ feat: add settings app

resources.gresource.xml

@@ -26,5 +26,7 @@
         <file alias="shield-danger-symbolic.svg">icons/shield-danger-symbolic.svg</file>
         <file alias="shield-safe-symbolic.svg">icons/shield-safe-symbolic.svg</file>
         <file alias="user-trash-symbolic.svg">icons/user-trash-symbolic.svg</file>
+        <file alias="collapse-rtl-symbolic.svg">icons/collapse-rtl-symbolic.svg</file>
+        <file alias="settings-symbolic.svg">icons/settings-symbolic.svg</file>
     </gresource>
 </gresources>

src/config/app/index.tsx

@@ -0,0 +1,33 @@
+import { Shell } from "../../app";
+import { Gtk } from "ags/gtk4";
+import Adw from "gi://Adw?version=1";
+
+
+export class ConfigWindow extends Adw.Window {
+
+    constructor() {
+        super({
+            title: "Colorshell Settings",
+            application: Shell.getDefault()
+        });
+
+        this.set_content(
+            <Adw.NavigationSplitView>
+                {/* sidebar */}
+                <Adw.NavigationPage $type="sidebar">
+                    <Adw.HeaderBar>
+                        <Gtk.Image iconName={"settings-symbolic"} $type="start" />
+                        <Gtk.Label label={"Settings"} $type="title" />
+                        <Gtk.Button iconName={"collapse-rtl-symbolic"} $type="end" 
+                          onClicked={(self) => {
+                              const window = this;
+
+
+                          }}
+                        />
+                    </Adw.HeaderBar>
+                </Adw.NavigationPage>
+            </Adw.NavigationSplitView> as Adw.NavigationSplitView
+        );
+    }
+}

src/config/app/widgets/TabButton.tsx

@@ -0,0 +1,57 @@
+import { gtype, property, register, signal } from "ags/gobject";
+import Adw from "gi://Adw?version=1";
+import { omitObjectKeys } from "../../../modules/utils";
+import { Gtk } from "ags/gtk4";
+import { createBinding } from "ags";
+import Pango from "gi://Pango?version=1.0";
+
+
+register({ GTypeName: "ClshTabButton" })
+export class TabButton extends Adw.Bin {
+
+    declare $signals: Adw.Bin.SignalSignatures & {
+        "clicked": (posX: number, posY: number) => void;
+    };
+
+    @signal(Number, Number)
+    clicked(_: number, __: number) {}
+
+    @property(String)
+    iconName: string;
+
+    @property(String)
+    label: string;
+
+    @property(gtype<Pango.EllipsizeMode>(Number))
+    ellipsize: Pango.EllipsizeMode = Pango.EllipsizeMode.END;
+
+    constructor(props: {
+        iconName: string;
+        label: string;
+        ellipsize?: Pango.EllipsizeMode;
+    } & Partial<Adw.Bin.ConstructorProps>) {
+        super({
+            cssName: "tabbutton",
+            ...omitObjectKeys(props, [
+                "iconName", 
+                "label", 
+                "ellipsize"
+            ])
+        });
+
+        this.iconName = props.iconName;
+        this.label = props.label;
+
+        if(props.ellipsize !== undefined)
+            this.ellipsize = props.ellipsize;
+
+        this.set_child(
+            <Gtk.Box cssName={"tabbuttonchild"} spacing={6}>
+                <Gtk.Image iconName={createBinding(this, "iconName")} hexpand={false} />
+                <Gtk.Label label={createBinding(this, "label")} hexpand 
+                  ellipsize={createBinding(this, "ellipsize")}
+                />
+            </Gtk.Box> as Gtk.Box
+        );
+    }
+}

src/config.ts → src/config/index.ts

@@ -1,5 +1,5 @@
-import { Config } from "./modules/config";
-import { WallpaperPositioning, WalMode } from "./modules/wallpaper";
+import { Config } from "../modules/config";
+import { WallpaperPositioning, WalMode } from "../modules/wallpaper";
 
 import GLib from "gi://GLib?version=2.0";