Upgrade to Agsv2 + Astal (#533)

* migrate to astal

* Reorganize project structure.

* progress

* Migrate Dashboard and Window Title modules.

* Migrate clock and notification bar modules.

* Remove unused code

* Media menu

* Rework network and volume modules

* Finish custom modules.

* Migrate battery bar module.

* Update battery module and organize helpers.

* Migrate workspace module.

* Wrap up bar modules.

* Checkpoint before I inevitbly blow something up.

* Updates

* Fix event propagation logic.

* Type fixes

* More type fixes

* Fix padding for event boxes.

* Migrate volume menu and refactor scroll event handlers.

* network module WIP

* Migrate network service.

* Migrate bluetooth menu

* Updates

* Migrate notifications

* Update scrolling behavior for custom modules.

* Improve popup notifications and add timer functionality.

* Migration notifications menu header/controls.

* Migrate notifications menu and consolidate notifications menu code.

* Migrate power menu.

* Dashboard progress

* Migrate dashboard

* Migrate media menu.

* Reduce media menu nesting.

* Finish updating media menu bindings to navigate active player.

* Migrate battery menu

* Consolidate code

* Migrate calendar menu

* Fix workspace logic to update on client add/change/remove and consolidate code.

* Migrate osd

* Consolidate hyprland service connections.

* Implement startup dropdown menu position allocation.

* Migrate settings menu (WIP)

* Settings dialo menu fixes

* Finish Dashboard menu

* Type updates

* update submoldule for types

* update github ci

* ci

* Submodule update

* Ci updates

* Remove type checking for now.

* ci fix

* Fix a bunch of stuff, losing track... need rest. Brb coffee

* Validate dropdown menu before render.

* Consolidate code and add auto-hide functionality.

* Improve auto-hide behavior.

* Consolidate audio menu code

* Organize bluetooth code

* Improve active player logic

* Properly dismiss a notification on action button resolution.

* Implement CLI command engine and migrate CLI commands.

* Handle variable disposal

* Bar component fixes and add hyprland startup rules.

* Handle potentially null bindings network and bluetooth bindings.

* Handle potentially null wired adapter.

* Fix GPU stats

* Handle poller for GPU

* Fix gpu bar logic.

* Clean up logic for stat bars.

* Handle wifi and wired bar icon bindings.

* Fix battery percentages

* Fix switch behavior

* Wifi staging fixes

* Reduce redundant hyprland service calls.

* Code cleanup

* Document the option code and reduce redundant calls to optimize performance.

* Remove outdated comment.

* Add JSDocs

* Add meson to build hyprpanel

* Consistency updates

* Organize commands

* Fix images not showing up on notifications.

* Remove todo

* Move hyprpanel configuration to the ~/.config/hyprpanel directory and add utility commands.

* Handle SRC directory for the bundled/built hyprpanel.

* Add namespaces to all windows

* Migrate systray

* systray updates

* Update meson to include ts, tsx and scss files.

* Remove log from meson

* Fix file choose path and make it float.

* Added a command to check the dependency status

* Update dep names.

* Get scale directly from env

* Add todo

src/components/settings/shared/Option/PropertyLabel.tsx

@@ -0,0 +1,16 @@
+import { Gtk } from 'astal/gtk3';
+import { Label } from '../Label';
+
+export const PropertyLabel = ({ title, subtitle, subtitleLink }: PropertyLabelProps): JSX.Element => {
+    return (
+        <box halign={Gtk.Align.START} valign={Gtk.Align.CENTER} hexpand>
+            <Label title={title} subtitle={subtitle} subtitleLink={subtitleLink} />
+        </box>
+    );
+};
+
+interface PropertyLabelProps {
+    title: string;
+    subtitle?: string;
+    subtitleLink?: string;
+}

src/components/settings/shared/Option/ResetButton.tsx

@@ -0,0 +1,22 @@
+import { bind } from 'astal';
+import { Gtk } from 'astal/gtk3';
+import icons from 'src/lib/icons/icons';
+import { RowProps } from 'src/lib/types/options';
+import { isPrimaryClick } from 'src/lib/utils';
+
+export const ResetButton = <T extends string | number | boolean | object>({ ...props }: RowProps<T>): JSX.Element => {
+    return (
+        <button
+            className={'reset-options'}
+            onClick={(_, event) => {
+                if (isPrimaryClick(event)) {
+                    props.opt.reset();
+                }
+            }}
+            sensitive={bind(props.opt).as((v) => v !== props.opt.initial)}
+            valign={Gtk.Align.CENTER}
+        >
+            <icon icon={icons.ui.refresh} />
+        </button>
+    );
+};

src/components/settings/shared/Option/SettingInput.tsx

@@ -0,0 +1,30 @@
+import { Variable } from 'astal';
+import { RowProps } from 'src/lib/types/options';
+import { Inputter } from '../Inputter';
+
+export const SettingInput = <T extends string | number | boolean | object>({
+    className,
+    isUnsaved,
+    ...props
+}: SettingInputProps<T>): JSX.Element => {
+    return (
+        <Inputter
+            opt={props.opt}
+            type={props.type}
+            enums={props.enums}
+            disabledBinding={props.disabledBinding}
+            dependencies={props.dependencies}
+            exportData={props.exportData}
+            min={props.min}
+            max={props.max}
+            increment={props.increment}
+            className={className}
+            isUnsaved={isUnsaved}
+        />
+    );
+};
+
+interface SettingInputProps<T> extends RowProps<T> {
+    className?: string;
+    isUnsaved: Variable<boolean>;
+}

src/components/settings/shared/Option/index.tsx

@@ -0,0 +1,30 @@
+import { RowProps } from 'src/lib/types/options';
+import { Variable } from 'astal';
+import { PropertyLabel } from './PropertyLabel';
+import { ResetButton } from './ResetButton';
+import { SettingInput } from './SettingInput';
+
+export const Option = <T extends string | number | boolean | object>({
+    className,
+    ...props
+}: OptionProps<T>): JSX.Element => {
+    const isUnsaved = Variable(false);
+    return (
+        <box
+            className={'option-item'}
+            hexpand
+            onDestroy={() => {
+                isUnsaved.drop();
+            }}
+        >
+            <PropertyLabel title={props.title} subtitle={props.subtitle} subtitleLink={props.subtitleLink} />
+            <SettingInput isUnsaved={isUnsaved} className={className} {...props} />
+            <ResetButton {...props} />
+        </box>
+    );
+};
+
+interface OptionProps<T> extends RowProps<T> {
+    title: string;
+    className?: string;
+}