My code has memory leaks, but I have no idea how to fix it

[gouvinb]

Context

I am coding an application launcher to complete my shell. I don't know if the error is mine or if it comes from Ags/Astal. I code a launch, that's why I prefer not to open an issue for now.

Code

import Adw from "gi://Adw"
import AstalApps from "gi://AstalApps"
import GLib from "gi://GLib";
import Gio from "gi://Gio";

import {createBinding, createState, For, onCleanup} from "ags"
import app from "ags/gtk4/app"

import {Log} from "../lib/Logger"
import {Astal, Gdk, Gtk} from "ags/gtk4"

import {Shapes} from "../lib/ui/Shapes"
import {Dimensions} from "../lib/ui/Dimensions"
import {WM} from "../services/wm/WM";
import {Niri} from "../services/wm/impl/Niri";

export default function AppLauncher(apps: AstalApps.Apps, wm: WM) {
    const appsList = createBinding(apps, "list")
    const [searchText, setSearchText] = createState<string>("")
    const [filteredApps, setFilteredApps] = createState<AstalApps.Application[]>([])
    const [pinnedApps, setPinnedApps] = createState<string[]>([])

    let win: Astal.Window
    let searchEntry: Gtk.Entry
    let listBox: Gtk.ListBox

    const {TOP, LEFT, BOTTOM, RIGHT} = Astal.WindowAnchor

    const settings = new Gio.Settings({schema_id: "org.gnome.shell"})

    const settingsHandler: number[] = []

    function updatePinnedApps() {
        Log.d("App Launcher", "Pinned apps updated")
        const pinned = settings.get_strv("favorite-apps")
        setPinnedApps(pinned)
    }

    function isPinned(app: AstalApps.Application): boolean {
        const appId = app.entry.toLowerCase()
        return pinnedApps().some(pinned => {
            const pinnedId = pinned.toLowerCase()
            return pinnedId === appId || pinnedId === `${appId}.desktop`
        })
    }

    const togglePin = (app: AstalApps.Application) => {
        const appEntry = app.entry.endsWith(".desktop") ? app.entry : `${app.entry}.desktop`
        const currentPinned = settings.get_strv("favorite-apps")

        if (isPinned(app)) {
            Log.d("App Launcher", `Unpinned ${app.name}`)
            const filtered = currentPinned.filter(pinned => {
                const pinnedLower = pinned.toLowerCase()
                const appLower = appEntry.toLowerCase()
                return pinnedLower !== appLower && pinnedLower !== app.entry.toLowerCase()
            })
            settings.set_strv("favorite-apps", filtered)
        } else {
            Log.d("App Launcher", `Pinned ${app.name}`)
            settings.set_strv("favorite-apps", [...currentPinned, appEntry])
        }

        updatePinnedApps()
        updateFilteredApps()
    }


    function updateFilteredApps() {
        Log.d("App Launcher", "Filtered apps updated")

        const search = searchText().trim().toLowerCase()

        if (search === "") {
            setFilteredApps(appsList().toSorted((a, b) => {
                const aPinned = isPinned(a)
                const bPinned = isPinned(b)

                if (aPinned && !bPinned) return -1
                if (!aPinned && bPinned) return 1

                return a.name.localeCompare(b.name)
            }))
        } else {
            const searchResults = apps.fuzzy_query(search)

            setFilteredApps(searchResults.toSorted((a, b) => {
                const aPinned = isPinned(a)
                const bPinned = isPinned(b)
                const aNameLower = a.name.toLowerCase()
                const bNameLower = b.name.toLowerCase()

                // Priority 1: Exact or partial match on pinned app name
                const aPinnedMatch = aPinned && aNameLower.includes(search)
                const bPinnedMatch = bPinned && bNameLower.includes(search)

                if (aPinnedMatch && !bPinnedMatch) return -1
                if (!aPinnedMatch && bPinnedMatch) return 1

                // Priority 2: Exact or partial match on app name
                const aNameMatch = aNameLower.includes(search)
                const bNameMatch = bNameLower.includes(search)

                if (aNameMatch && !bNameMatch) return -1
                if (!aNameMatch && bNameMatch) return 1

                // Priority 3: Match on categories (already done by fuzzy_query)
                // Priority 4: Alphabetical ordering
                return a.name.localeCompare(b.name, undefined, {sensitivity: 'base'})
            }))
        }

        if (listBox) {
            const firstRow = listBox.get_row_at_index(0)
            if (firstRow) {
                listBox.select_row(firstRow)
            }
        }
    }

    function launchSelectedApp(index: number) {
        const apps = filteredApps()
        if (apps[index]) {
            Log.d("App Launcher", `Launching ${apps[index].name}`)
            if (wm as Niri) {
                (wm as Niri).spawnSh(apps[index].executable)
                    .then(() => {
                        Log.d("App Launcher", `Launched ${apps[index].name}`)
                    })
                    .catch((err) => {
                        Log.e("App Launcher", `Failed to launch ${apps[index].name}: ${err}`)
                    })
            } else {
                apps[index].launch()
            }
            win.close()
        }
    }

    function renderAppIcon(icon: string) {
        if (GLib.file_test(icon, GLib.FileTest.EXISTS)) {
            return (
                <Gtk.Image
                    file={icon}
                    pixelSize={Dimensions.appLauncherIconSize}
                />
            )
        }
        return (
            <Gtk.Image
                iconName={icon}
                pixelSize={Dimensions.appLauncherIconSize}
            />
        )
    }

    function renderPinnedAppButton(application: AstalApps.Application) {
        return (
            <Gtk.Button
                css={`
                    border-radius: ${Shapes.componentRadius}px;
                    background: transparent;
                    border: none;
                `}
                iconName={isPinned(application) ? "starred-symbolic" : "non-starred-symbolic"}
                onClicked={(self) => {
                    togglePin(application)
                    self.iconName = isPinned(application) ? "starred-symbolic" : "non-starred-symbolic"
                }}
            />
        )

    }

    onCleanup(() => {
        if (settingsHandler.length > 0) {
            settingsHandler.forEach(id => settings.disconnect(id))
            settingsHandler.splice(0, settingsHandler.length)
        }
        win.destroy()
    })

    const eventControllerKey = (
        <Gtk.EventControllerKey
            onKeyPressed={(_, keyval: number) => {
                if (keyval === Gdk.KEY_Escape) {
                    win.close()
                    return true
                }


                if (keyval === Gdk.KEY_Return || keyval === Gdk.KEY_KP_Enter) {
                    const selectedRow = listBox.get_selected_row();
                    launchSelectedApp(selectedRow?.get_index() || 0)
                    return true
                }

                if (keyval === Gdk.KEY_Up || keyval === Gdk.KEY_Down) {
                    if (listBox && !listBox.hasFocus) {
                        let selectedRow = listBox.get_selected_row();
                        if (!selectedRow) {
                            selectedRow = listBox.get_row_at_index(0)
                        }
                        selectedRow?.grab_focus()
                        listBox.vfunc_move_focus(keyval === Gdk.KEY_Up ? Gtk.DirectionType.UP : Gtk.DirectionType.DOWN)
                    }
                    return false
                }

                if (searchEntry && !searchEntry.hasFocus) {
                    const char = Gdk.keyval_to_unicode(keyval)
                    const pos = searchEntry.get_position()
                    if (keyval === Gdk.KEY_BackSpace) {
                        searchEntry.delete_text(pos - 1, pos)
                    } else if (char !== 0) {
                        const charStr = String.fromCharCode(char)
                        searchEntry.insert_text(charStr, -1, pos)
                    }

                    searchEntry.grab_focus()
                    if (char !== 0) {
                        searchEntry.set_position(pos + 1)
                    } else {
                        searchEntry.set_position(pos)
                    }
                    return false
                }

                return false
            }}
        />
    )

    const searchBar = (
        <box
            css={`
                padding: ${Dimensions.bigSpacing}px;
                border-bottom: 1px solid var(--border-color);
            `}
        >
            <Gtk.Entry
                $={(self) => searchEntry = self}
                css={`
                    border: none;
                    background-color: var(--view-bg-color);
                `}
                placeholderText="Search applications..."
                text={searchText()}
                onNotifyText={(self) => {
                    setSearchText(self.text || "")
                    updateFilteredApps()
                }}
                activatesDefault
                onActivate={() => {
                    launchSelectedApp(listBox.get_selected_row()?.get_index() || 0)
                }}
                hexpand
            />
        </box>
    )

    const appItems = (
        <For
            each={filteredApps}
            id={(application) => application.entry}
        >
            {(application) => {
                return (
                    <Adw.ActionRow
                        css={`
                            border-radius: ${Shapes.componentRadius}px;
                            padding: ${Dimensions.smallSpacing}px;
                        `}
                        title={GLib.markup_escape_text(application.name, -1)}
                        subtitle={GLib.markup_escape_text(application.description || `Run \`${application.executable}\``, -1)}
                        activatable
                    >
                        <Gtk.Box $type={"prefix"} spacing={Dimensions.normalSpacing}>
                            {renderAppIcon(application.iconName)}
                        </Gtk.Box>
                        <Gtk.Box $type={"suffix"}>
                            {renderPinnedAppButton(application)}
                        </Gtk.Box>
                    </Adw.ActionRow>
                )
            }}
        </For>
    )

    return (
        <window
            $={(self) => win = self}
            name="applauncher.gui"
            application={app}
            layer={Astal.Layer.OVERLAY}
            css={`background: transparent;`}
            anchor={TOP | LEFT | RIGHT | BOTTOM}
            modal
            onShow={() => {
                Log.d("App Launcher", "Window opened")

                setTimeout(() => {
                    if (searchEntry) {
                        searchEntry.delete_selection()
                        searchEntry.grab_focus()
                    }
                }, 50)

                if (settingsHandler.length === 0) {
                    settingsHandler.push(settings.connect("changed::favorite-apps", updatePinnedApps))
                    updatePinnedApps()
                }

                updateFilteredApps()
            }}
            onCloseRequest={(self) => {
                Log.d("App Launcher", "Window closed")

                // Clear filtered apps BEFORE hiding to free memory
                setSearchText("")
                if (searchEntry) {
                    searchEntry.set_text("")
                }

                if (settingsHandler.length > 0) {
                    settingsHandler.forEach(id => settings.disconnect(id))
                    settingsHandler.splice(0, settingsHandler.length)
                }

                setFilteredApps([])

                self.hide()
                return true
            }}
            onHide={() => {
                Log.d("App Launcher", "Window hidden")
            }}
            widthRequest={720}
            heightRequest={640}
            title="Application Launcher"
            keymode={Astal.Keymode.EXCLUSIVE}
        >
            {eventControllerKey}

            <Adw.Clamp
                orientation={Gtk.Orientation.VERTICAL}
                maximumSize={Dimensions.appLauncherHeight}
            >
                <Adw.Clamp
                    orientation={Gtk.Orientation.HORIZONTAL}
                    maximumSize={Dimensions.appLauncherWidth}
                >
                    <box
                        css={`
                            background-color: var(--window-bg-color);
                            border-radius: ${Shapes.windowRadius}px;
                            border: 1px solid var(--border-color);
                            box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3),
                            0 15px 12px rgba(0, 0, 0, 0.22);
                        `}
                        orientation={Gtk.Orientation.VERTICAL}
                    >

                        {searchBar}

                        <Gtk.ScrolledWindow
                            css={`
                                border-radius: ${Shapes.windowRadius}px;
                            `}
                            hscrollbarPolicy={Gtk.PolicyType.NEVER}
                            vscrollbarPolicy={Gtk.PolicyType.AUTOMATIC}
                            vexpand
                        >
                            <Gtk.ListBox
                                css={`
                                    padding: ${Dimensions.bigSpacing}px;
                                    border-radius: ${Shapes.windowRadius}px;
                                    background: transparent;
                                `}
                                $={(self) => listBox = self}
                                selectionMode={Gtk.SelectionMode.SINGLE}
                                activateOnSingleClick={false}
                                onRowActivated={(_, row) => {
                                    const index = row?.get_index()
                                    if (index !== undefined && index >= 0) {
                                        launchSelectedApp(index)
                                    }
                                }}
                            >
                                {appItems}
                            </Gtk.ListBox>
                        </Gtk.ScrolledWindow>
                    </box>

                </Adw.Clamp>
            </Adw.Clamp>
        </window>
    )
}

Additional information

• Each time the window is opened, appItems requires ~20MB of additional memory and does not unload when I close the window.
• I am using the latest versions of Ags and Astal available on AUR.