studiocms 0.3.0 → 0.4.0

package/frontend/components/dashboard/configuration/ConfigForm.astro

@@ -19,7 +19,10 @@ const { config } = Astro.props as Props;
 
 const { data } = config;
 
-const ogSelectOptions = validImages.map(({ label, name: value }) => ({ label, value }));
+const ogSelectOptions = validImages.map(({ label, name: value }) => ({
+	label,
+	value,
+}));
 
 const currentLoginPageBg = validImages.find(
 	({ name }) => name === data.loginPageBackground && name !== 'custom'
@@ -61,39 +64,90 @@ const lang = Astro.locals.StudioCMS.defaultLang;
 const t = useTranslations(lang, '@studiocms/dashboard:configuration');
 ---
 
-<form id="site-config-form" action={Astro.locals.StudioCMS.routeMap.endpointLinks.config}>
+<form id="site-config-form">
     <div class="form-content">
-
         <div class="form-row">
-            <Input label={t('input-site-title')} name='site-title' placeholder='My Awesome Website' value={data.title} isRequired />
-            <Input label={t('input-site-description')} name='site-description' placeholder='Built with StudioCMS!' value={data.description} isRequired />
+            <Input
+                label={t("input-site-title")}
+                name="site-title"
+                placeholder="My Awesome Website"
+                value={data.title}
+                isRequired
+            />
+            <Input
+                label={t("input-site-description")}
+                name="site-description"
+                placeholder="Built with StudioCMS!"
+                value={data.description}
+                isRequired
+            />
         </div>
 
         <div class="form-row">
-            <StorageInput label={t('input-og-image')} name="default-og-image" placeholder="'https://...' for local, or '/...' for public/ folder" value={data.defaultOgImage} />
-            <StorageInput label="Site Icon (Public facing Favicon)" name="site-icon" placeholder="'https://...' for local, or '/...' for public/ folder" value={data.siteIcon} />
+            <StorageInput
+                label={t("input-og-image")}
+                name="default-og-image"
+                placeholder="'https://...' for local, or '/...' for public/ folder"
+                value={data.defaultOgImage}
+            />
+            <StorageInput
+                label="Site Icon (Public facing Favicon)"
+                name="site-icon"
+                placeholder="'https://...' for local, or '/...' for public/ folder"
+                value={data.siteIcon}
+            />
         </div>
 
         <div class="form-row">
-            <Select label={t('select-page-diff-tracking')} name="diff-enabled" defaultValue={`${data.enableDiffs}`} options={[{ label: 'True', value: 'true' }, { label: 'False', value: 'false' }]} fullWidth />
-            <Input label={t('input-diff-tracking-limit')} name="diff-per-page" placeholder="10" value={data.diffPerPage} />
+            <Select
+                label={t("select-page-diff-tracking")}
+                name="diff-enabled"
+                defaultValue={`${data.enableDiffs}`}
+                options={[
+                    { label: "True", value: "true" },
+                    { label: "False", value: "false" },
+                ]}
+                fullWidth
+            />
+            <Input
+                label={t("input-diff-tracking-limit")}
+                name="diff-per-page"
+                placeholder="10"
+                value={data.diffPerPage}
+            />
         </div>
 
         <div class="form-row">
-            <Select label={t('select-smtp-mailer')} name="enable-mailer" defaultValue={`${data.enableMailer}`} options={[{ label: 'True', value: 'true' }, { label: 'False', value: 'false' }]} fullWidth />
+            <Select
+                label={t("select-smtp-mailer")}
+                name="enable-mailer"
+                defaultValue={`${data.enableMailer}`}
+                options={[
+                    { label: "True", value: "true" },
+                    { label: "False", value: "false" },
+                ]}
+                fullWidth
+            />
         </div>
 
         <Divider />
 
         <span>
-            <t-config-form key="dashboard-grid-label">{t('dashboard-grid-label')}</t-config-form>
+            <t-config-form key="dashboard-grid-label"
+                >{t("dashboard-grid-label")}</t-config-form
+            >
         </span>
 
         <div class="grid-items-container">
             {
                 gridItemOptions.map(({ enabled, label, name }) => (
                     <Card style="background-color: var(--background-step-2);">
-                        <Toggle {label} {name} color='primary' defaultChecked={enabled} />
+                        <Toggle
+                            {label}
+                            {name}
+                            color="primary"
+                            defaultChecked={enabled}
+                        />
                     </Card>
                 ))
             }
@@ -102,16 +156,35 @@ const t = useTranslations(lang, '@studiocms/dashboard:configuration');
         <Divider />
 
         <div class="form-row">
-            <Select label={t('select-login-page-bg')} name='login-page-background' defaultValue={data.loginPageBackground} options={ogSelectOptions} fullWidth />
-            <StorageInput label={t('input-custom-login-page')} name="login-page-background-custom" placeholder="'https://...' for local, or '/...' for public/ folder" value={data.loginPageCustomImage} disabled={data.loginPageBackground !== 'custom'} />
+            <Select
+                label={t("select-login-page-bg")}
+                name="login-page-background"
+                defaultValue={data.loginPageBackground}
+                options={ogSelectOptions}
+                fullWidth
+            />
+            <StorageInput
+                label={t("input-custom-login-page")}
+                name="login-page-background-custom"
+                placeholder="'https://...' for local, or '/...' for public/ folder"
+                value={data.loginPageCustomImage}
+                disabled={data.loginPageBackground !== "custom"}
+            />
         </div>
 
-        <LoginPreview light={currentLoginPageBg?.light} dark={currentLoginPageBg?.dark} />
-
+        <LoginPreview
+            light={currentLoginPageBg?.light}
+            dark={currentLoginPageBg?.dark}
+        />
     </div>
 </form>
 
-<div id="grid-items-data-list" data-items={JSON.stringify(gridItemOptions.map(({ name }) => name))} style="display: none;"></div>
+<div
+    id="grid-items-data-list"
+    data-items={JSON.stringify(gridItemOptions.map(({ name }) => name))}
+    style="display: none;"
+>
+</div>
 
 <script>
     import {
@@ -122,44 +195,49 @@ const t = useTranslations(lang, '@studiocms/dashboard:configuration');
         makeTranslation,
         updateElmLabel,
         updateSelectElmLabel,
-updateTrueFalseSelectOptions,
-    } from 'studiocms:i18n/client';
-    import { $pluginI18n } from 'studiocms:i18n/plugins';
+        updateTrueFalseSelectOptions,
+    } from "studiocms:i18n/client";
+    import { $pluginI18n } from "studiocms:i18n/plugins";
 
-    const gridItemsDataElm = document.getElementById('grid-items-data-list') as HTMLDivElement;
+    const gridItemsDataElm = document.getElementById(
+        "grid-items-data-list",
+    ) as HTMLDivElement;
     const gridItemsData = gridItemsDataElm.dataset.items as string;
 
     const gridItems: `${string}/${string}`[] = JSON.parse(gridItemsData);
 
     const gridItemsList = gridItems.map((item) => {
-      const [id, component] = item.split('/');
-      return {
-        id,
-        // component name should replace underscores with hyphens
-        component: component.replace(/_/g, '-'),
-        selector: `label-${item}`
-      };
+        const [id, component] = item.split("/");
+        return {
+            id,
+            // component name should replace underscores with hyphens
+            component: component.replace(/_/g, "-"),
+            selector: `label-${item}`,
+        };
     });
 
-    const currentPage = '@studiocms/dashboard:configuration';
+    const currentPage = "@studiocms/dashboard:configuration";
 
     let lang = defaultLang;
 
     const i18n = $i18n(currentPage, baseTranslation[currentPage]);
 
-    const pluginI18n = (pluginId: string, component: string) => $pluginI18n(pluginId, component);
+    const pluginI18n = (pluginId: string, component: string) =>
+        $pluginI18n(pluginId, component);
 
-    function registerGridItemSubscriptions(subscriptions: { id: string, component: string, selector: string }[]) {
-      for (const subscription of subscriptions) {
-        const sub = pluginI18n(subscription.id, subscription.component);
+    function registerGridItemSubscriptions(
+        subscriptions: { id: string; component: string; selector: string }[],
+    ) {
+        for (const subscription of subscriptions) {
+            const sub = pluginI18n(subscription.id, subscription.component);
 
-        sub.subscribe(comp => {
-          const elm = document.getElementById(subscription.selector);
-          if (elm) {
-            elm.textContent = comp['title'];
-          }
-        })
-      }
+            sub.subscribe((comp) => {
+                const elm = document.getElementById(subscription.selector);
+                if (elm) {
+                    elm.textContent = comp["title"];
+                }
+            });
+        }
     }
 
     registerGridItemSubscriptions(gridItemsList);
@@ -168,83 +246,113 @@ updateTrueFalseSelectOptions,
         lang = locale || defaultLang;
     });
 
-    i18n.subscribe(comp => {
-        updateElmLabel('site-title', comp['input-site-title']);
-        updateElmLabel('site-description', comp['input-site-description']);
-        updateElmLabel('default-og-image', comp['input-og-image']);
-        updateElmLabel('site-icon', comp['input-site-icon']);
-        updateElmLabel('diff-per-page', comp['input-diff-tracking-limit']);
-        updateElmLabel('login-page-background-custom', comp['input-custom-login-page']);
-        updateSelectElmLabel('login-page-background', comp['select-login-page-bg']);
-        updateSelectElmLabel('diff-enabled', comp['select-page-diff-tracking']);
-        updateSelectElmLabel('enable-mailer', comp['select-smtp-mailer']);
-
-        const trueFalseOptions = { true: comp['true-label'], false: comp['false-label'] };
-
-        updateTrueFalseSelectOptions('diff-enabled', trueFalseOptions);
-        updateTrueFalseSelectOptions('enable-mailer', trueFalseOptions);
+    i18n.subscribe((comp) => {
+        updateElmLabel("site-title", comp["input-site-title"]);
+        updateElmLabel("site-description", comp["input-site-description"]);
+        updateElmLabel("default-og-image", comp["input-og-image"]);
+        updateElmLabel("site-icon", comp["input-site-icon"]);
+        updateElmLabel("diff-per-page", comp["input-diff-tracking-limit"]);
+        updateElmLabel(
+            "login-page-background-custom",
+            comp["input-custom-login-page"],
+        );
+        updateSelectElmLabel(
+            "login-page-background",
+            comp["select-login-page-bg"],
+        );
+        updateSelectElmLabel("diff-enabled", comp["select-page-diff-tracking"]);
+        updateSelectElmLabel("enable-mailer", comp["select-smtp-mailer"]);
+
+        const trueFalseOptions = {
+            true: comp["true-label"],
+            false: comp["false-label"],
+        };
+
+        updateTrueFalseSelectOptions("diff-enabled", trueFalseOptions);
+        updateTrueFalseSelectOptions("enable-mailer", trueFalseOptions);
     });
 
-    if (!customElements.get('t-config-form')) {
-        customElements.define('t-config-form', makeTranslation(currentPage, i18n));
+    if (!customElements.get("t-config-form")) {
+        customElements.define(
+            "t-config-form",
+            makeTranslation(currentPage, i18n),
+        );
     }
 </script>
 
 <script>
     import { toast } from "studiocms:ui/components/toaster/client";
-        const configForm = document.querySelector('#site-config-form') as HTMLFormElement;
-
-        configForm.addEventListener('submit', async (e) => {
-            e.preventDefault();
-            try {
-                const formData = new FormData(configForm);
-                // Scope to grid container to avoid unrelated checkboxes
-                const gridItems = Array.from(document.querySelectorAll('.grid-items-container input[type="checkbox"]') as NodeListOf<HTMLInputElement>).map((input) => ({
-                    name: input.name,
-                    enabled: input.checked,
-                }));
-                const enabledGridItems = gridItems.filter((item) => item.enabled).map((item) => item.name);
-                const diffPerPageRaw = formData.get('diff-per-page') as string;
-                const diffPerPageParsed = Number.parseInt(diffPerPageRaw, 10);
-                const data = {
-                    title: formData.get('site-title') as string,
-                    description: formData.get('site-description') as string,
-                    defaultOgImage: formData.get('default-og-image') ?? null,
-                    siteIcon: formData.get('site-icon') ?? null,
-                    loginPageBackground: formData.get('login-page-background') as string,
-                    loginPageCustomImage: formData.get('login-page-background-custom') ?? null,
-                    enableDiffs: formData.get('diff-enabled') === 'true',
-                    diffPerPage: Number.isNaN(diffPerPageParsed) ? 10 : diffPerPageParsed,
-                    gridItems: enabledGridItems,
-                    enableMailer: formData.get('enable-mailer') === 'true',
-                };
-                const response = await fetch(configForm.action, {
-                    method: 'POST',
-                    body: JSON.stringify(data),
-                    headers: { 'Content-Type': 'application/json' },
-                });
-                const res: any = await response.json().catch(() => ({}));
-                if (!response.ok) {
-                    toast({
-                        title: 'Error',
-                        description: res?.error || res?.message || 'Request failed',
-                        type: 'danger'
-                    });
-                    return;
-                }
-                toast({
-                    title: 'Success',
-                    description: res?.message || 'Configuration saved',
-                    type: 'success'
-                });
-            } catch (err) {
-                toast({
-                    title: 'Network error',
-                    description: (err as Error)?.message ?? 'Unexpected error',
-                    type: 'danger'
-                });
-            }
-        });
+    import { dashboardClient, dashboardSharedCatchTags } from 'studiocms:client/apiClients';
+    import * as Effect from 'effect/Effect';
+
+    const configForm = document.querySelector(
+        "#site-config-form",
+    ) as HTMLFormElement;
+
+    configForm.addEventListener("submit", async (e) => {
+        e.preventDefault();
+
+        const formData = new FormData(configForm);
+        
+        // Scope to grid container to avoid unrelated checkboxes
+        const gridItems = Array.from(
+            document.querySelectorAll(
+                '.grid-items-container input[type="checkbox"]',
+            ) as NodeListOf<HTMLInputElement>,
+        ).map((input) => ({
+            name: input.name,
+            enabled: input.checked,
+        }));
+        
+        const enabledGridItems = gridItems
+            .filter((item) => item.enabled)
+            .map((item) => item.name);
+        
+        const diffPerPageRaw = formData.get("diff-per-page") as string;
+        const diffPerPageParsed = Number.parseInt(diffPerPageRaw, 10);
+        const data = {
+            title: formData.get("site-title") as string,
+            description: formData.get("site-description") as string,
+            defaultOgImage: (formData.get("default-og-image") ?? null) as string | null,
+            siteIcon: (formData.get("site-icon") ?? null) as string | null,
+            loginPageBackground: formData.get(
+                "login-page-background",
+            ) as string,
+            loginPageCustomImage:
+                (formData.get("login-page-background-custom") ?? null) as string | null,
+            enableDiffs: formData.get("diff-enabled") === "true",
+            diffPerPage: Number.isNaN(diffPerPageParsed)
+                ? 10
+                : diffPerPageParsed,
+            gridItems: enabledGridItems,
+            enableMailer: formData.get("enable-mailer") === "true",
+        };
+
+        const response = await dashboardClient.pipe(
+            Effect.flatMap((client) => 
+                client.config.updateSiteConfig({
+                    payload: data
+                })
+            ),
+            Effect.catchTags(dashboardSharedCatchTags),
+            Effect.runPromise
+        );
+
+        if ("error" in response) {
+            toast({
+                title: "Error",
+                description: response.error,
+                type: "danger",
+            });
+            return;
+        } else {
+            toast({
+                title: "Success",
+                description: response.message || "Configuration updated successfully",
+                type: "success",
+            });
+        }
+    });
 </script>
 
 <style>

package/frontend/components/dashboard/content-mgmt/ContentSearch.astro

@@ -34,6 +34,8 @@ const t = useTranslations(lang, '@studiocms/dashboard:content-sidebar');
         baseTranslation,
         updateElmPlaceholder,
     } from "studiocms:i18n/client";
+    import { dashboardClient } from "studiocms:client/apiClients";
+    import * as Effect from "effect/Effect";
 
     const currentPage = "@studiocms/dashboard:content-sidebar";
 
@@ -58,14 +60,14 @@ const t = useTranslations(lang, '@studiocms/dashboard:content-sidebar');
     ) as HTMLDivElement;
 
     type SearchItem = {
-        id: string;
-        name: string;
-        slug?: string;
-        type: "folder" | "page";
-        isDraft?: boolean;
+        readonly id: string;
+        readonly name: string;
+        readonly slug?: string | undefined;
+        readonly type: "folder" | "page";
+        readonly isDraft?: boolean | null | undefined;
     };
 
-    type SearchList = SearchItem[];
+    type SearchList = readonly SearchItem[];
 
     function getIcon(item: SearchItem) {
         if (item.type === "folder") {
@@ -95,21 +97,18 @@ const t = useTranslations(lang, '@studiocms/dashboard:content-sidebar');
         <svg xmlns="http://www.w3.org/2000/svg" height="20" width="20" viewBox="0 0 24 24" fill="currentColor" class="leaf-icon active"><path fill-rule="evenodd" d="M5.625 1.5c-1.036 0-1.875.84-1.875 1.875v17.25c0 1.035.84 1.875 1.875 1.875h12.75c1.035 0 1.875-.84 1.875-1.875V12.75A3.75 3.75 0 0 0 16.5 9h-1.875a1.875 1.875 0 0 1-1.875-1.875V5.25A3.75 3.75 0 0 0 9 1.5H5.625ZM7.5 15a.75.75 0 0 1 .75-.75h7.5a.75.75 0 0 1 0 1.5h-7.5A.75.75 0 0 1 7.5 15Zm.75 2.25a.75.75 0 0 0 0 1.5H12a.75.75 0 0 0 0-1.5H8.25Z" clip-rule="evenodd" /><path d="M12.971 1.816A5.23 5.23 0 0 1 14.25 5.25v1.875c0 .207.168.375.375.375H16.5a5.23 5.23 0 0 1 3.434 1.279 9.768 9.768 0 0 0-6.963-6.963Z" /></svg>`;
     }
 
-    async function getSearchList(searchItems: HTMLDivElement) {
-        console.log(
-            `Fetching search list from ${searchItems.dataset.searchlist}`,
+    async function getSearchList(): Promise<SearchList> {
+        return await Effect.runPromise(
+            Effect.orElse(
+                dashboardClient.pipe(
+                    Effect.flatMap((client) => client.search.searchList({})),
+                    Effect.tapError(Effect.logError)
+                ),
+                () => Effect.log("Failed to fetch search list, returning empty list").pipe(
+                    Effect.as([] as SearchList)
+                ),
+            ),
         );
-
-        const response = await fetch(searchItems.dataset.searchlist as string);
-
-        if (!response.ok) {
-            console.error("Failed to fetch search list");
-            return [];
-        }
-
-        const data: SearchList = await response.json();
-
-        return data;
     }
 
     function clearSearchParams(innerSidebarItemsSearch: HTMLDivElement) {
@@ -147,7 +146,7 @@ const t = useTranslations(lang, '@studiocms/dashboard:content-sidebar');
             <button class="context-menu-item" role="menuitem" data-action="edit">
                 <svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="leaf-icon default"><path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L6.832 19.82a4.5 4.5 0 0 1-1.897 1.13l-2.685.8.8-2.685a4.5 4.5 0 0 1 1.13-1.897L16.863 4.487Zm0 0L19.5 7.125" /></svg>
                 <span>
-                    <t-file-tree-renderer key="${item.type === 'page' ? 'edit-page' : 'edit-folder'}">Edit ${item.type === 'page' ? 'Page' : 'Folder'}</t-file-tree-renderer>
+                    <t-file-tree-renderer key="${item.type === "page" ? "edit-page" : "edit-folder"}">Edit ${item.type === "page" ? "Page" : "Folder"}</t-file-tree-renderer>
                 </span>
             </button>
         </div>
@@ -173,7 +172,7 @@ const t = useTranslations(lang, '@studiocms/dashboard:content-sidebar');
         currentUrl.searchParams.set("search", searchTerm);
         window.history.pushState({}, "", currentUrl);
 
-        const searchList = await getSearchList(searchItems);
+        const searchList = await getSearchList();
 
         const fuse = new Fuse(searchList, {
             keys: ["name", "slug"],