added ctrl+s record form shortcut and updated user external auths panel with the new provider logos

ui/src/components/base/AutoExpandTextarea.svelte

@@ -16,7 +16,7 @@
         updateTimeoutId = setTimeout(() => {
             if (inputElem) {
                 inputElem.style.height = ""; // reset
-                inputElem.style.height = Math.min(inputElem.scrollHeight + 2, maxHeight) + "px";
+                inputElem.style.height = Math.min(inputElem.scrollHeight, maxHeight) + "px";
             }
         }, 0);
     }

ui/src/components/records/ExternalAuthsList.svelte

@@ -13,12 +13,12 @@
     let externalAuths = [];
     let isLoading = false;
 
-    function getProviderTitle(provider) {
-        return providersList[provider + "Auth"]?.title || CommonHelper.sentenize(provider, false);
+    function getProviderConfig(provider) {
+        return providersList.find((p) => p.key == provider + "Auth") || {};
     }
 
-    function getProviderIcon(provider) {
-        return providersList[provider + "Auth"]?.icon || `ri-${provider}-line`;
+    function getProviderTitle(provider) {
+        return getProviderConfig(provider)?.title || CommonHelper.sentenize(provider, false);
     }
 
     async function loadExternalAuths() {
@@ -69,7 +69,12 @@
     <div class="list">
         {#each externalAuths as auth}
             <div class="list-item">
-                <i class={getProviderIcon(auth.provider)} />
+                <figure class="provider-logo">
+                    <img
+                        src="{import.meta.env.BASE_URL}images/oauth2/{getProviderConfig(auth.provider)?.logo}"
+                        alt="Provider logo"
+                    />
+                </figure>
                 <span class="txt">{getProviderTitle(auth.provider)}</span>
                 <div class="txt-hint">ID: {auth.providerId}</div>
                 <button

ui/src/components/records/RecordUpsertPanel.svelte

@@ -151,7 +151,7 @@
         window.localStorage.removeItem(draftKey());
     }
 
-    function save() {
+    function save(hidePanel = true) {
         if (isSaving || !canSave || !collection?.id) {
             return;
         }
@@ -170,9 +170,13 @@
         request
             .then((result) => {
                 addSuccessToast(isNew ? "Successfully created record." : "Successfully updated record.");
-                confirmClose = false;
                 deleteDraft();
-                hide();
+                if (hidePanel) {
+                    confirmClose = false;
+                    hide();
+                } else {
+                    show(result);
+                }
                 dispatch("save", result);
             })
             .catch((err) => {
@@ -318,12 +322,21 @@
             }
         }
 
+        deleteDraft();
         show(clone);
 
         await tick();
 
         originalSerializedData = "";
     }
+
+    function handleFormKeydown(e) {
+        if (e.ctrlKey && e.code == "KeyS") {
+            e.preventDefault();
+            e.stopPropagation();
+            save(false);
+        }
+    }
 </script>
 
 <OverlayPanel
@@ -352,7 +365,7 @@
     on:show
 >
     <svelte:fragment slot="header">
-        <h4>
+        <h4 class="panel-title">
             {isNew ? "New" : "Edit"}
             <strong>{collection?.name}</strong> record
         </h4>
@@ -426,6 +439,7 @@
             class="tab-item"
             class:active={activeTab === tabFormKey}
             on:submit|preventDefault={save}
+            on:keydown={handleFormKeydown}
         >
             {#if !hasChanges && initialDraft}
                 <div class="block" out:slide={{ duration: 150 }}>
@@ -548,3 +562,9 @@
         </button>
     </svelte:fragment>
 </OverlayPanel>
+
+<style>
+    .panel-title {
+        line-height: var(--smBtnHeight);
+    }
+</style>

ui/src/components/settings/AuthProviderCard.svelte

@@ -43,36 +43,3 @@
         }
     }}
 />
-
-<style lang="scss">
-    .provider-logo {
-        $boxSize: 32px;
-        $imgSize: 20px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        flex-shrink: 0;
-        width: $boxSize;
-        height: $boxSize;
-        border-radius: var(--baseRadius);
-        background: var(--bodyColor);
-        padding: 0;
-        gap: 0;
-        img {
-            max-width: $imgSize;
-            max-height: $imgSize;
-            height: auto;
-            flex-shrink: 0;
-        }
-    }
-    .provider-card {
-        display: flex;
-        align-items: center;
-        width: 100%;
-        height: 100%;
-        gap: 10px;
-        padding: 10px;
-        border-radius: var(--baseRadius);
-        border: 1px solid var(--baseAlt1Color);
-    }
-</style>