added crons web apis and ui listing

ui/src/components/settings/EmailTestPopup.svelte

@@ -105,6 +105,7 @@
             });
 
             collectionIdOrName = authCollections[0]?.id || "";
+            isAuthCollectionsLoading = false;
         } catch (err) {
             if (!err.isAbort) {
                 isAuthCollectionsLoading = false;
@@ -147,7 +148,6 @@
         {#if showAuthCollections}
             <Field class="form-field required" name="collection" let:uniqueId>
                 <label for={uniqueId}>Auth collection</label>
-
                 <ObjectSelect
                     id={uniqueId}
                     selectPlaceholder={isAuthCollectionsLoading

ui/src/components/settings/PageCrons.svelte

@@ -0,0 +1,133 @@
+<script>
+    import ApiClient from "@/utils/ApiClient";
+    import tooltip from "@/actions/tooltip";
+    import { pageTitle } from "@/stores/app";
+    import { addSuccessToast } from "@/stores/toasts";
+    import PageWrapper from "@/components/base/PageWrapper.svelte";
+    import RefreshButton from "@/components/base/RefreshButton.svelte";
+    import SettingsSidebar from "@/components/settings/SettingsSidebar.svelte";
+
+    $pageTitle = "Crons";
+
+    let crons = [];
+    let isLoading = false;
+    let isRunning = {};
+
+    loadCrons();
+
+    async function loadCrons() {
+        isLoading = true;
+
+        try {
+            crons = await ApiClient.crons.getFullList();
+            isLoading = false;
+        } catch (err) {
+            if (!err.isAbort) {
+                ApiClient.error(err);
+                isLoading = false;
+            }
+        }
+    }
+
+    async function cronRun(jobId) {
+        isRunning[jobId] = true;
+
+        try {
+            await ApiClient.crons.run(jobId);
+            addSuccessToast(`Successfully triggered ${jobId}.`);
+            isRunning[jobId] = false;
+        } catch (err) {
+            if (!err.isAbort) {
+                ApiClient.error(err);
+                isRunning[jobId] = false;
+            }
+        }
+    }
+</script>
+
+<SettingsSidebar />
+
+<PageWrapper>
+    <header class="page-header">
+        <nav class="breadcrumbs">
+            <div class="breadcrumb-item">Settings</div>
+            <div class="breadcrumb-item">{$pageTitle}</div>
+        </nav>
+    </header>
+
+    <div class="wrapper">
+        <div class="panel" autocomplete="off">
+            <div class="flex m-b-sm flex-gap-10">
+                <span class="txt-xl">Registered app cron jobs</span>
+                <RefreshButton class="btn-sm" tooltip={"Refresh"} on:refresh={loadCrons} />
+            </div>
+
+            <div class="list list-compact">
+                <div class="list-content">
+                    {#if isLoading}
+                        <div class="list-item list-item-loader">
+                            <span class="skeleton-loader skeleton-loader-lg" />
+                        </div>
+                        <div class="list-item list-item-loader">
+                            <span class="skeleton-loader skeleton-loader-lg" />
+                        </div>
+                        <div class="list-item list-item-loader">
+                            <span class="skeleton-loader skeleton-loader-lg" />
+                        </div>
+                        <div class="list-item list-item-loader">
+                            <span class="skeleton-loader skeleton-loader-lg" />
+                        </div>
+                    {:else}
+                        {#each crons as cron (cron.id)}
+                            <div class="list-item">
+                                <!-- <i class="ri-time-line"></i> -->
+                                <div class="content">
+                                    <span class="txt">{cron.id}</span>
+                                </div>
+                                <span class="txt-hint txt-nowrap txt-mono cron-expr m-r-xs">
+                                    {cron.expression}
+                                </span>
+                                <div class="actions">
+                                    <button
+                                        type="button"
+                                        class="btn btn-sm btn-circle btn-hint btn-transparent"
+                                        class:btn-loading={isRunning[cron.id]}
+                                        disabled={isRunning[cron.id]}
+                                        aria-label="Run"
+                                        use:tooltip={"Run"}
+                                        on:click|preventDefault={() => cronRun(cron.id)}
+                                    >
+                                        <i class="ri-play-large-line"></i>
+                                    </button>
+                                </div>
+                            </div>
+                        {:else}
+                            <div class="list-item list-item-placeholder">
+                                <span class="txt">No app crons found.</span>
+                            </div>
+                        {/each}
+                    {/if}
+                </div>
+            </div>
+
+            <p class="txt-hint m-t-xs">
+                App cron jobs can be registered only programmatically with
+                <a
+                    href="{import.meta.env.PB_DOCS_URL}/go-jobs-scheduling/"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                >
+                    Go
+                </a>
+                or
+                <a
+                    href="{import.meta.env.PB_DOCS_URL}/js-jobs-scheduling/"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                >
+                    JavaScript
+                </a>.
+            </p>
+        </div>
+    </div>
+</PageWrapper>

ui/src/components/settings/SettingsSidebar.svelte

@@ -39,6 +39,15 @@
             <i class="ri-archive-line" aria-hidden="true" />
             <span class="txt">Backups</span>
         </a>
+        <a
+            href="/settings/crons"
+            class="sidebar-list-item"
+            use:active={{ path: "/settings/crons/?.*" }}
+            use:link
+        >
+            <i class="ri-time-line" aria-hidden="true"></i>
+            <span class="txt">Crons</span>
+        </a>
 
         {#if !$hideControls}
             <div class="sidebar-title">