added hideControls setting

ui/src/App.svelte

@@ -10,7 +10,7 @@
     import Toasts from "@/components/base/Toasts.svelte";
     import Toggler from "@/components/base/Toggler.svelte";
     import Confirmation from "@/components/base/Confirmation.svelte";
-    import { pageTitle, appName } from "@/stores/app";
+    import { pageTitle, appName, hideControls } from "@/stores/app";
     import { admin } from "@/stores/admin";
     import { setErrors } from "@/stores/errors";
     import { resetConfirmation } from "@/stores/confirmation";
@@ -20,7 +20,7 @@
     let showAppSidebar = false;
 
     $: if ($admin?.id) {
-        loadAppName();
+        loadSettings();
     }
 
     function handleRouteLoading(e) {
@@ -42,18 +42,19 @@
         replace("/");
     }
 
-    async function loadAppName() {
+    async function loadSettings() {
         if (!$admin?.id) {
             return;
         }
 
         try {
             const settings = await ApiClient.settings.getAll({
-                $cancelKey: "loadAppName",
+                $cancelKey: "initialAppSettings",
             });
             $appName = settings?.meta?.appName || "";
+            $hideControls = !!settings?.meta?.hideControls;
         } catch (err) {
-            console.warn("Failed to load app name.", err);
+            console.warn("Failed to load app settings.", err);
         }
     }
 

ui/src/components/collections/CollectionsSidebar.svelte

@@ -1,4 +1,5 @@
 <script>
+    import { hideControls } from "@/stores/app";
     import { collections, activeCollection } from "@/stores/collections";
     import CollectionUpsertPanel from "@/components/collections/CollectionUpsertPanel.svelte";
 
@@ -63,12 +64,14 @@
         {/each}
     </div>
 
-    <footer class="sidebar-footer">
-        <button type="button" class="btn btn-block btn-outline" on:click={() => collectionPanel?.show()}>
-            <i class="ri-add-line" />
-            <span class="txt">New collection</span>
-        </button>
-    </footer>
+    {#if !$hideControls}
+        <footer class="sidebar-footer">
+            <button type="button" class="btn btn-block btn-outline" on:click={() => collectionPanel?.show()}>
+                <i class="ri-add-line" />
+                <span class="txt">New collection</span>
+            </button>
+        </footer>
+    {/if}
 </aside>
 
 <CollectionUpsertPanel bind:this={collectionPanel} />

ui/src/components/records/PageRecords.svelte

@@ -7,7 +7,7 @@
         loadCollections,
     } from "@/stores/collections";
     import tooltip from "@/actions/tooltip";
-    import { pageTitle } from "@/stores/app";
+    import { pageTitle, hideControls } from "@/stores/app";
     import PageWrapper from "@/components/base/PageWrapper.svelte";
     import Searchbar from "@/components/base/Searchbar.svelte";
     import RefreshButton from "@/components/base/RefreshButton.svelte";
@@ -68,15 +68,19 @@
             <div class="icon">
                 <i class="ri-database-2-line" />
             </div>
-            <h1 class="m-b-10">Create your first collection to add records!</h1>
-            <button
-                type="button"
-                class="btn btn-expanded-lg btn-lg"
-                on:click={() => collectionUpsertPanel?.show()}
-            >
-                <i class="ri-add-line" />
-                <span class="txt">Create new collection</span>
-            </button>
+            {#if $hideControls}
+                <h1 class="m-b-10">You don't have any collections yet.</h1>
+            {:else}
+                <h1 class="m-b-10">Create your first collection to add records!</h1>
+                <button
+                    type="button"
+                    class="btn btn-expanded-lg btn-lg"
+                    on:click={() => collectionUpsertPanel?.show()}
+                >
+                    <i class="ri-add-line" />
+                    <span class="txt">Create new collection</span>
+                </button>
+            {/if}
         </div>
     </PageWrapper>
 {:else}
@@ -90,14 +94,16 @@
             </nav>
 
             <div class="inline-flex gap-5">
-                <button
-                    type="button"
-                    class="btn btn-secondary btn-circle"
-                    use:tooltip={{ text: "Edit collection", position: "right" }}
-                    on:click={() => collectionUpsertPanel?.show($activeCollection)}
-                >
-                    <i class="ri-settings-4-line" />
-                </button>
+                {#if !$hideControls}
+                    <button
+                        type="button"
+                        class="btn btn-secondary btn-circle"
+                        use:tooltip={{ text: "Edit collection", position: "right" }}
+                        on:click={() => collectionUpsertPanel?.show($activeCollection)}
+                    >
+                        <i class="ri-settings-4-line" />
+                    </button>
+                {/if}
 
                 <RefreshButton on:refresh={() => recordsList?.load()} />
             </div>

ui/src/components/settings/PageApplication.svelte

@@ -1,8 +1,9 @@
 <script>
     import ApiClient from "@/utils/ApiClient";
     import CommonHelper from "@/utils/CommonHelper";
-    import { pageTitle, appName } from "@/stores/app";
+    import { pageTitle, appName, hideControls } from "@/stores/app";
     import { addSuccessToast } from "@/stores/toasts";
+    import tooltip from "@/actions/tooltip";
     import PageWrapper from "@/components/base/PageWrapper.svelte";
     import Field from "@/components/base/Field.svelte";
     import SettingsSidebar from "@/components/settings/SettingsSidebar.svelte";
@@ -54,6 +55,7 @@
 
     function init(settings = {}) {
         $appName = settings?.meta?.appName;
+        $hideControls = !!settings?.meta?.hideControls;
 
         formSettings = {
             meta: settings?.meta || {},
@@ -108,6 +110,20 @@
                         <input type="number" id={uniqueId} required bind:value={formSettings.logs.maxDays} />
                     </Field>
 
+                    <Field class="form-field form-field-toggle" name="meta.hideControls" let:uniqueId>
+                        <input type="checkbox" id={uniqueId} bind:checked={formSettings.meta.hideControls} />
+                        <label for={uniqueId}>
+                            <span class="txt">Hide collection create and edit controls</span>
+                            <i
+                                class="ri-information-line link-hint"
+                                use:tooltip={{
+                                    text: `This is useful to prevent making accidental schema changes on a production environment.`,
+                                    position: "right",
+                                }}
+                            />
+                        </label>
+                    </Field>
+
                     <div class="col-lg-12 flex">
                         <div class="flex-fill" />
                         {#if hasChanges}

ui/src/components/users/PageUsers.svelte

@@ -4,7 +4,7 @@
     import ApiClient from "@/utils/ApiClient";
     import CommonHelper from "@/utils/CommonHelper";
     import tooltip from "@/actions/tooltip";
-    import { pageTitle } from "@/stores/app";
+    import { pageTitle, hideControls } from "@/stores/app";
     import PageWrapper from "@/components/base/PageWrapper.svelte";
     import Searchbar from "@/components/base/Searchbar.svelte";
     import RefreshButton from "@/components/base/RefreshButton.svelte";
@@ -116,14 +116,16 @@
                 <div class="breadcrumb-item">{$pageTitle}</div>
             </nav>
 
-            <button
-                type="button"
-                class="btn btn-secondary btn-circle"
-                use:tooltip={{ text: "Edit profile collection", position: "right" }}
-                on:click={() => collectionUpsertPanel?.show(profileCollection)}
-            >
-                <i class="ri-settings-4-line" />
-            </button>
+            {#if !$hideControls}
+                <button
+                    type="button"
+                    class="btn btn-secondary btn-circle"
+                    use:tooltip={{ text: "Edit profile collection", position: "right" }}
+                    on:click={() => collectionUpsertPanel?.show(profileCollection)}
+                >
+                    <i class="ri-settings-4-line" />
+                </button>
+            {/if}
 
             <RefreshButton on:refresh={() => loadUsers()} />
 

ui/src/stores/app.js

@@ -3,3 +3,5 @@ import { writable } from "svelte/store";
 export const pageTitle = writable('');
 
 export const appName = writable('');
+
+export const hideControls = writable(false);