Merge branch 'retrozinndev:ryo' into ryo

ags/runner/plugins/apps.ts

@@ -1,12 +1,14 @@
 import { ResultWidget, ResultWidgetProps } from "../../widget/runner/ResultWidget";
 import AstalApps from "gi://AstalApps";
-import { cleanExec, getAstalApps } from "../../scripts/apps";
+import { cleanExec, getAstalApps, updateApps } from "../../scripts/apps";
 import { Runner } from "../Runner";
 import { Astal } from "astal/gtk3";
 
 export const PluginApps = {
-    // Do not provide prefix, so it's always ran.
+    // Do not provide prefix, so it always runs.
     name: "Apps",
+    // asynchronously-refresh apps list on init
+    init: async () => updateApps(),
     handle: (text: string) => {
         return getAstalApps().fuzzy_query(text).map((app: AstalApps.Application) =>
             new ResultWidget({

ags/style/_control-center.scss

@@ -256,8 +256,8 @@ box.history {
   }
 }
 
-.tile-pages {
-  & > .page {
+.tile-pages .page {
+  transition: 180ms linear;
   margin-top: 10px;
 
   &.bluetooth {
@@ -265,7 +265,6 @@ box.history {
       background: colors.$bg-tertiary;
     }
   }
-  }
 
   &.revealed {
     padding-top: 12px;

ags/widget/control-center/Pages.ts

@@ -1,4 +1,4 @@
-import { property, register, timeout } from "astal";
+import { register, timeout } from "astal";
 import { Gtk, Widget } from "astal/gtk3";
 import { Page } from "./pages/Page";
 
@@ -7,26 +7,21 @@ export { Pages };
 export type PagesProps = {
     initialPage?: Page;
     className?: string;
-    transitionType?: Gtk.RevealerTransitionType;
     transitionDuration?: number;
 };
 
 @register({ GTypeName: "Pages" })
-class Pages extends Widget.Revealer {
+class Pages extends Widget.Box {
     #page: (Page|undefined);
+    #transDuration: number;
+    #transType: Gtk.RevealerTransitionType = Gtk.RevealerTransitionType.SLIDE_DOWN;
 
-    @property(Page)
-    get page(): Page | undefined { return this.#page; }
-    private set page(newPage: Page | undefined) {
-        this.#page = newPage;
-        this.notify("page");
-    }
-
-    get isOpen() { return this.revealChild; }
+    get isOpen() { return (this.get_children().length > 0); }
 
     constructor(props?: PagesProps) {
         super({
-            className: props?.className
+            className: props?.className,
+            orientation: Gtk.Orientation.VERTICAL
         });
 
         this.name = "pages";
@@ -34,47 +29,57 @@ class Pages extends Widget.Revealer {
         if(props?.className !== null && props?.className !== undefined)
             this.className = props?.className;
 
-        this.transitionType = props?.transitionType ?? 
-            Gtk.RevealerTransitionType.SLIDE_DOWN;
-        
-        this.transitionDuration = props?.transitionDuration ?? 350;
+        this.#transDuration = props?.transitionDuration ?? 280;
 
         if(props?.initialPage) 
             this.open(props.initialPage);
     }
 
-    toggle(newPage?: Page): void {
-        if(this.isOpen) {
-            if(newPage && this.#page!.id !== newPage.id) {
-                this.close(() => this.open(newPage));
+    toggle(newPage?: Page, onToggled?: () => void): void {
+        if(!newPage || (this.#page?.id === newPage?.id)) {
+            this.close(onToggled);
             return;
         }
 
+        if(!this.isOpen) {
+            newPage && this.open(newPage, onToggled);
+            return;
+        }
+
+        if(this.#page?.id !== newPage.id) {
             this.close();
-            return;
+            this.open(newPage, onToggled);
         }
-
-        newPage && this.open(newPage);
     }
 
     open(newPage: Page, onOpened?: () => void) {
-        if(this.get_child()) return;
+        this.add(new Widget.Revealer({
+            transitionDuration: this.#transDuration,
+            transitionType: this.#transType,
+            revealChild: false,
+            child: newPage
+        } as Widget.RevealerProps));
+        this.#page = newPage;
 
-        this.page = newPage;
-        this.add(newPage);
-        this.revealChild = true;
-        onOpened && timeout(this.transitionDuration, onOpened);
+        this.reorder_child(this.get_children()[this.get_children().length - 1], 0);
+        (this.get_children()[0] as Widget.Revealer).set_reveal_child(true);
+        onOpened?.();
     }
 
     close(onClosed?: () => void): void {
-        if(!this.get_child()) return;
+        (this.get_children() as Array<Widget.Revealer>).forEach((pageRevealer, i, pageRevealers) => {
+            pageRevealer.set_reveal_child(false);
+            if(this.#page?.id === (pageRevealer.get_child() as Page).id)
+                this.#page = undefined;
 
-        this.revealChild = false;
-        this.#page!.onClose?.();
-        timeout(this.transitionDuration, () => {
-            this.remove(this.#page!);
-            this.page = undefined;
+            timeout(this.#transDuration, () => {
+                pageRevealer.ref();
+                this.remove(pageRevealer);
+                pageRevealer.destroy();
+
+                i === (pageRevealers.length - 1) && 
                     onClosed?.();
             });
+        });
     }
 }

ags/widget/control-center/pages/Page.ts

@@ -168,7 +168,6 @@ class Page extends Widget.Box {
         this.#title = props.title;
         this.#description = props.description;
 
-        if(props.onClose)
         this.onClose = props.onClose;
     }
 }