From 690e9d8ed321406a756676b1ea75b325424e5733 Mon Sep 17 00:00:00 2001
From: sabaimran <narmiabas@gmail.com>
Date: Thu, 2 May 2024 09:55:04 +0530
Subject: [PATCH] Collapse the reminders after they're successfully scheduled

---
 .../interface/web/assets/icons/collapse.svg   | 17 +++++
 src/khoj/interface/web/base_config.html       |  2 +-
 src/khoj/interface/web/config_automation.html | 68 ++++++++++++++++---
 3 files changed, 77 insertions(+), 10 deletions(-)
 create mode 100644 src/khoj/interface/web/assets/icons/collapse.svg

diff --git a/src/khoj/interface/web/assets/icons/collapse.svg b/src/khoj/interface/web/assets/icons/collapse.svg
new file mode 100644
index 00000000..8b3f04cf
--- /dev/null
+++ b/src/khoj/interface/web/assets/icons/collapse.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
+
+    <title>collapse</title>
+    <desc>Created with Sketch Beta.</desc>
+    <defs>
+
+</defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
+        <g id="Icon-Set" sketch:type="MSLayerGroup" transform="translate(-360.000000, -1191.000000)" fill="#000000">
+            <path d="M387.887,1203.04 L381.326,1203.04 L392.014,1192.4 L390.614,1191.01 L379.938,1201.64 L379.969,1195.16 C379.969,1194.61 379.526,1194.17 378.979,1194.17 C378.433,1194.17 377.989,1194.61 377.989,1195.16 L377.989,1204.03 C377.989,1204.32 378.111,1204.56 378.302,1204.72 C378.481,1204.9 378.73,1205.01 379.008,1205.01 L387.887,1205.01 C388.434,1205.01 388.876,1204.57 388.876,1204.03 C388.876,1203.48 388.434,1203.04 387.887,1203.04 L387.887,1203.04 Z M372.992,1208.99 L364.113,1208.99 C363.566,1208.99 363.124,1209.43 363.124,1209.97 C363.124,1210.52 363.566,1210.96 364.113,1210.96 L370.674,1210.96 L359.986,1221.6 L361.386,1222.99 L372.063,1212.36 L372.031,1218.84 C372.031,1219.39 372.474,1219.83 373.021,1219.83 C373.567,1219.83 374.011,1219.39 374.011,1218.84 L374.011,1209.97 C374.011,1209.68 373.889,1209.44 373.697,1209.28 C373.519,1209.1 373.27,1208.99 372.992,1208.99 L372.992,1208.99 Z" id="collapse" sketch:type="MSShapeGroup">
+
+</path>
+        </g>
+    </g>
+</svg>
diff --git a/src/khoj/interface/web/base_config.html b/src/khoj/interface/web/base_config.html
index 5636eca1..451f4041 100644
--- a/src/khoj/interface/web/base_config.html
+++ b/src/khoj/interface/web/base_config.html
@@ -4,7 +4,7 @@
         <meta charset="utf-8">
         <meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=1.0">
         <link rel="icon" type="image/png" sizes="128x128" href="/static/assets/icons/favicon-128x128.png?v={{ khoj_version }}">
-        <title>Khoj - Settings</title>
+        <title>Khoj</title>
         <link rel="stylesheet" href="/static/assets/pico.min.css?v={{ khoj_version }}">
         <link rel="stylesheet" href="/static/assets/khoj.css?v={{ khoj_version }}">
         <script
diff --git a/src/khoj/interface/web/config_automation.html b/src/khoj/interface/web/config_automation.html
index cd848e3c..77595677 100644
--- a/src/khoj/interface/web/config_automation.html
+++ b/src/khoj/interface/web/config_automation.html
@@ -74,6 +74,38 @@
         transform: translateY(-5px);
     }
 
+    .hide-details {
+        display: none !important;
+    }
+
+    div.card-header {
+        display: grid;
+        grid-template-columns: 1fr auto;
+        grid-gap: 8px;
+        align-items: baseline;
+        padding: 8px;
+        background-color: var(--frosted-background-color);
+    }
+
+    div.card-header:hover {
+        cursor: pointer;
+    }
+
+    div.toggle-icon {
+        width: 24px;
+        height: 24px;
+    }
+
+    @keyframes confirmation {
+        0% { background-color: normal; transform: scale(1); }
+        50% { background-color: var(--primary); transform: scale(1.1); }
+        100% { background-color: normal; transform: scale(1); }
+    }
+
+    .confirmation {
+        animation: confirmation 1s;
+    }
+
 </style>
 <script>
     function deleteAutomation(automationId) {
@@ -108,30 +140,44 @@
         queryEl.value = automation.query_to_run;
     }
 
+    function onClickAutomationCard(automationId) {
+        const automationIDElements = document.querySelectorAll(`.${automationId}`);
+        automationIDElements.forEach(el => {
+            el.classList.toggle("hide-details");
+        });
+    }
+
     function generateAutomationRow(automation) {
         let automationId = automation.id;
         let automationNextRun = `Next run at ${automation.next}\nCron: ${automation.crontime}`;
         let automationEl = document.createElement("div");
         automationEl.innerHTML = `
             <div class="card automation" id="automation-card-${automationId}">
-                <input type="text"
-                       id="automation-subject-${automationId}"
-                       name="subject"
-                       data-original="${automation.subject}"
-                       value="${automation.subject}">
-                <label for="query-to-run">Your automation</label>
+                <div class="card-header" onclick="onClickAutomationCard('${automationId}')">
+                    <input type="text"
+                        id="automation-subject-${automationId}"
+                        name="subject"
+                        data-original="${automation.subject}"
+                        value="${automation.subject}">
+                    <div class="toggle-icon">
+                        <img src="/static/assets/icons/collapse.svg" alt="Toggle" class="toggle-icon">
+                    </div>
+                </div>
+                <label for="query-to-run" class="hide-details ${automationId}">Your automation</label>
                 <textarea id="automation-queryToRun-${automationId}"
+                          class="hide-details ${automationId}"
                           data-original="${automation.query_to_run}"
                           name="query-to-run">${automation.query_to_run}</textarea>
-                <label for="schedule">Schedule</label>
+                <label for="schedule" class="hide-details">Schedule</label>
                 <input type="text"
+                       class="hide-details ${automationId}"
                        id="automation-schedule-${automationId}"
                        name="schedule"
                        data-cron="${automation.crontime}"
                        data-original="${automation.schedule}"
                        title="${automationNextRun}"
                        value="${automation.schedule}">
-                <div class="automation-buttons">
+                <div class="hide-details automation-buttons ${automationId}">
                     <button type="button"
                             class="delete-automation-button negative-button"
                             id="delete-automation-button-${automationId}">Delete</button>
@@ -236,7 +282,11 @@
         .then(automation => {
             if (create) {
                 const automationEl = document.getElementById(`automation-card-${automationId}`);
-                automationEl.replaceWith(generateAutomationRow(automation));
+                // Create a more interesting confirmation animation.
+                automationEl.classList.add("confirmation")
+                setTimeout(function() {
+                    automationEl.replaceWith(generateAutomationRow(automation));
+                }, 1000);
             } else {
                 updateAutomationRow(automation);
             }