Use details disclosure element to show the list of third-party services

template/templates/views/integrations.html

@@ -6,14 +6,15 @@
     {{ template "settings_menu" dict "user" .user }}
 </section>
 
-<form method="post" autocomplete="off" action="{{ route "updateIntegration" }}">
+<form method="post" autocomplete="off" action="{{ route "updateIntegration" }}" class="integration-form">
     <input type="hidden" name="csrf" value="{{ .csrf }}">
 
     {{ if .errorMessage }}
         <div class="alert alert-error">{{ t .errorMessage }}</div>
     {{ end }}
 
-    <h3>Fever</h3>
+    <details {{ if .form.FeverEnabled }}open{{ end }}>
+        <summary>Fever</summary>
         <div class="form-section">
             <label>
                 <input type="checkbox" name="fever_enabled" value="1" {{ if .form.FeverEnabled }}checked{{ end }}> {{ t "form.integration.fever_activate" }}
@@ -31,8 +32,10 @@
                 <button type="submit" class="button button-primary" data-label-loading="{{ t "form.submit.saving" }}">{{ t "action.update" }}</button>
             </div>
         </div>
+    </details>
 
-    <h3>Google Reader</h3>
+    <details {{ if .form.GoogleReaderEnabled }}open{{ end }}>
+        <summary>Google Reader</summary>
         <div class="form-section">
             <label>
                 <input type="checkbox" name="googlereader_enabled" value="1" {{ if .form.GoogleReaderEnabled }}checked{{ end }}> {{ t "form.integration.googlereader_activate" }}
@@ -50,9 +53,10 @@
                 <button type="submit" class="button button-primary" data-label-loading="{{ t "form.submit.saving" }}">{{ t "action.update" }}</button>
             </div>
         </div>
+    </details>
 
-    <!-- -->
-    <h3>Pinboard</h3>
+    <details {{ if .form.PinboardEnabled }}open{{ end }}>
+        <summary>Pinboard</summary>
         <div class="form-section">
             <label>
                 <input type="checkbox" name="pinboard_enabled" value="1" {{ if .form.PinboardEnabled }}checked{{ end }}> {{ t "form.integration.pinboard_activate" }}
@@ -72,8 +76,10 @@
                 <button type="submit" class="button button-primary" data-label-loading="{{ t "form.submit.saving" }}">{{ t "action.update" }}</button>
             </div>
         </div>
+    </details>
 
-    <h3>Instapaper</h3>
+    <details {{ if .form.InstapaperEnabled }}open{{ end }}>
+        <summary>Instapaper</summary>
         <div class="form-section">
             <label>
                 <input type="checkbox" name="instapaper_enabled" value="1" {{ if .form.InstapaperEnabled }}checked{{ end }}> {{ t "form.integration.instapaper_activate" }}
@@ -89,8 +95,10 @@
                 <button type="submit" class="button button-primary" data-label-loading="{{ t "form.submit.saving" }}">{{ t "action.update" }}</button>
             </div>
         </div>
+    </details>
 
-    <h3>Pocket</h3>
+    <details {{ if .form.PocketEnabled }}open{{ end }}>
+        <summary>Pocket</summary>
         <div class="form-section">
             <label>
                 <input type="checkbox" name="pocket_enabled" value="1" {{ if .form.PocketEnabled }}checked{{ end }}> {{ t "form.integration.pocket_activate" }}
@@ -112,8 +120,10 @@
                 <button type="submit" class="button button-primary" data-label-loading="{{ t "form.submit.saving" }}">{{ t "action.update" }}</button>
             </div>
         </div>
+    </details>
 
-    <h3>Wallabag</h3>
+    <details {{ if .form.WallabagEnabled }}open{{ end }}>
+        <summary>Wallabag</summary>
         <div class="form-section">
             <label>
                 <input type="checkbox" name="wallabag_enabled" value="1" {{ if .form.WallabagEnabled }}checked{{ end }}> {{ t "form.integration.wallabag_activate" }}
@@ -142,7 +152,10 @@
                 <button type="submit" class="button button-primary" data-label-loading="{{ t "form.submit.saving" }}">{{ t "action.update" }}</button>
             </div>
         </div>
-    <h3>Notion</h3>
+    </details>
+
+    <details {{ if .form.NotionEnabled }}open{{ end }}>
+        <summary>Notion</summary>
         <div class="form-section">
             <label>
                 <input type="checkbox" name="notion_enabled" value="1" {{ if .form.NotionEnabled }}checked{{ end }}> {{ t "form.integration.notion_activate" }}
@@ -158,7 +171,10 @@
                 <button type="submit" class="button button-primary" data-label-loading="{{ t "form.submit.saving" }}">{{ t "action.update" }}</button>
             </div>
         </div>
-    <h3>Nunux Keeper</h3>
+    </details>
+
+    <details {{ if .form.NunuxKeeperEnabled }}open{{ end }}>
+        <summary>Nunux Keeper</summary>
         <div class="form-section">
             <label>
                 <input type="checkbox" name="nunux_keeper_enabled" value="1" {{ if .form.NunuxKeeperEnabled }}checked{{ end }}> {{ t "form.integration.nunux_keeper_activate" }}
@@ -174,8 +190,10 @@
                 <button type="submit" class="button button-primary" data-label-loading="{{ t "form.submit.saving" }}">{{ t "action.update" }}</button>
             </div>
         </div>
+    </details>
 
-    <h3>Espial</h3>
+    <details {{ if .form.EspialEnabled }}open{{ end }}>
+        <summary>Espial</summary>
         <div class="form-section">
             <label>
                 <input type="checkbox" name="espial_enabled" value="1" {{ if .form.EspialEnabled }}checked{{ end }}> {{ t "form.integration.espial_activate" }}
@@ -194,8 +212,10 @@
                 <button type="submit" class="button button-primary" data-label-loading="{{ t "form.submit.saving" }}">{{ t "action.update" }}</button>
             </div>
         </div>
+    </details>
 
-    <h3>Readwise Reader</h3>
+    <details {{ if .form.ReadwiseEnabled }}open{{ end }}>
+        <summary>Readwise Reader</summary>
         <div class="form-section">
             <label>
                 <input type="checkbox" name="readwise_enabled" value="1" {{ if .form.ReadwiseEnabled }}checked{{ end }}> {{ t "form.integration.readwise_activate" }}
@@ -210,8 +230,10 @@
                 <button type="submit" class="button button-primary" data-label-loading="{{ t "form.submit.saving" }}">{{ t "action.update" }}</button>
             </div>
         </div>
+    </details>
 
-    <h3>Linkding</h3>
+    <details {{ if .form.LinkdingEnabled }}open{{ end }}>
+        <summary>Linkding</summary>
         <div class="form-section">
             <label>
                 <input type="checkbox" name="linkding_enabled" value="1" {{ if .form.LinkdingEnabled }}checked{{ end }}> {{ t "form.integration.linkding_activate" }}
@@ -234,7 +256,10 @@
                 <button type="submit" class="button button-primary" data-label-loading="{{ t "form.submit.saving" }}">{{ t "action.update" }}</button>
             </div>
         </div>
-    <h3>Apprise</h3>
+    </details>
+
+    <details {{ if .form.AppriseEnabled }}open{{ end }}>
+        <summary>Apprise</summary>
         <div class="form-section">
             <label>
                 <input type="checkbox" name="apprise_enabled" value="1" {{ if .form.AppriseEnabled }}checked{{ end }}> {{ t "form.integration.apprise_activate" }}
@@ -254,7 +279,10 @@
                 <button type="submit" class="button button-primary" data-label-loading="{{ t "form.submit.saving" }}">{{ t "action.update" }}</button>
             </div>
         </div>
-    <h3>Telegram Bot</h3>
+    </details>
+
+    <details {{ if .form.TelegramBotEnabled }}open{{ end }}>
+        <summary>Telegram Bot</summary>
         <div class="form-section">
             <label>
                 <input type="checkbox" name="telegram_bot_enabled" value="1" {{ if .form.TelegramBotEnabled }}checked{{ end }}> {{ t "form.integration.telegram_bot_activate" }}
@@ -270,8 +298,10 @@
                 <button type="submit" class="button button-primary" data-label-loading="{{ t "form.submit.saving" }}">{{ t "action.update" }}</button>
             </div>
         </div>
+    </details>
 
-    <h3>Matrix Bot</h3>
+    <details {{ if .form.MatrixBotEnabled }}open{{ end }}>
+        <summary>Matrix Bot</summary>
         <div class="form-section">
             <label>
                 <input type="checkbox" name="matrix_bot_enabled" value="1" {{ if .form.MatrixBotEnabled }}checked{{ end }}> {{ t "form.integration.matrix_bot_activate" }}
@@ -293,7 +323,7 @@
                 <button type="submit" class="button button-primary" data-label-loading="{{ t "form.submit.saving" }}">{{ t "action.update" }}</button>
             </div>
         </div>
-
+    </details>
 </form>
 
 <h3>{{ t "page.integration.bookmarklet" }}</h3>

ui/static/css/common.css

@@ -1093,6 +1093,18 @@ details.entry-enclosures {
     opacity: 20%;
 }
 
-audio,video {
+audio, video {
     width: 100%;
 }
+
+.integration-form summary {
+    font-weight: 700;
+}
+
+.integration-form details {
+    margin-bottom: 15px;
+}
+
+.integration-form details .form-section {
+    margin-top: 15px;
+}