feat: improved error handling and confirmation dialog

Author: programmerg

index.css

@@ -62,6 +62,7 @@ body {
 
 body {
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
+    font-size: 12px;
     color: var(--color-ui-text);
     background-color: var(--color-ui);
     background-image: none;
@@ -713,6 +714,7 @@ input[type="search"]:focus::-webkit-search-cancel-button {
     max-width: 500px;
     box-shadow: 0 20px 40px rgb(0, 0, 0, 0.1);
     background: var(--color-bg);
+    font-size: 12px;
     color: var(--color-text);
     border-radius: var(--border-radius-lg);
     user-select: none;
@@ -777,7 +779,8 @@ input[type="search"]:focus::-webkit-search-cancel-button {
     font-weight: 600;
 }
 
-[role="dialog"] > .modal-content > .modal-header > .close-btn {
+[role="dialog"] > .modal-content > .modal-header > .close-btn,
+.toast > .close-btn {
     background: none;
     border: none;
     font-size: 24px;
@@ -1031,7 +1034,8 @@ fieldset {
  */
 
 .btn-primary,
-.btn-secondary {
+.btn-secondary,
+.btn-danger {
     padding: 10px 20px;
     border-radius: var(--border-radius-xl);
     font-size: 14px;
@@ -1059,6 +1063,58 @@ fieldset {
     background: var(--color-overlay);
 }
 
+.btn-danger {
+    color: white;
+    background: var(--color-danger);
+    border: 1px solid var(--color-danger);
+}
+
+.btn-danger:hover {
+    background: var(--color-danger-hover);
+}
+
+/*
+ * MARK: Toast
+ */
+
+.toasts {
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+    pointer-events: none;
+}
+
+.toast {
+    display: flex;
+    align-items: center !important;
+    width: 350px;
+    max-width: 100%;
+    margin: 0 auto 2rem auto;
+    color: var(--color-text);
+    pointer-events: auto;
+    background-clip: padding-box;
+    background-color: var(--color-bg);
+    border: 1px solid var(--color-ui-border);
+    box-shadow: rgb(32, 33, 36, 0.28) 0px 1px 6px 0px;
+    border-radius: var(--border-radius);
+    z-index: 1090;
+    opacity: 0;
+    transform: translateY(2rem);
+    transition: opacity 0.2s linear, transform 0.2s ease;
+}
+
+.toast.show {
+    opacity: 1;
+    transform: translateY(0);
+}
+
+.toast-body {
+    padding: 1.25rem 0.75rem;
+    word-wrap: break-word;
+    flex-grow: 1;
+    font-size: 1rem;
+}
+
 /*
  * MARK: Welcome modal
  */

index.html

@@ -149,6 +149,21 @@ <h2 class="modal-title"></h2>
         </form>
     </dialog>
 
+    <dialog id="removeModal" role="dialog" aria-modal="true">
+        <form class="modal-content" data-action="removeItem" method="dialog">
+            <div class="modal-header">
+                <h2 class="modal-title"></h2>
+            </div>
+
+            <div class="modal-body"></div>
+
+            <div class="modal-footer">
+                <button type="reset" class="btn-secondary" data-i18n="cancel"></button>
+                <button type="submit" class="btn-danger" data-i18n="delete"></button>
+            </div>
+        </form>
+    </dialog>
+
     <dialog id="settingsModal" role="dialog" aria-modal="true">
         <form class="modal-content" data-action="saveSettings" method="dialog">
             <div class="modal-header">
@@ -318,6 +333,8 @@ <h2 class="modal-title" data-i18n="settings"></h2>
         </form>
     </dialog>
 
+    <div id="toasts" class="toasts"></div>
+
     <svg xmlns="http://www.w3.org/2000/svg" class="hidden">
         <symbol id="spinner" viewBox="0 0 60 60"><g fill="none" fill-rule="evenodd" stroke="currentcolor"><g transform="translate(12 12)" stroke-width="4"><circle stroke-opacity=".15" cx="18" cy="18" r="18"/><path d="M36 18c0-9.94-8.06-18-18-18"><animateTransform attributeName="transform" type="rotate" from="0 18 18" to="360 18 18" dur="1s" repeatCount="indefinite"/></path></g></g></symbol>    
         <symbol id="search" viewBox="0 0 24 24" fill="currentcolor"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"></path></symbol>