Show reminders on dashboard

public/assets/css/style.css

@@ -114,7 +114,8 @@ a {
 }
 
 h1,
-h2 {
+h2,
+h3 {
     line-height: 1.2;
     margin: 0;
 }
@@ -127,6 +128,10 @@ h2 {
     font-size: 20px;
 }
 
+h3 {
+    font-size: 16px;
+}
+
 .button,
 button {
     background: var(--primary);
@@ -212,6 +217,7 @@ input.input-error {
     border: 1px solid var(--line);
     border-radius: 8px;
     display: flex;
+    flex-wrap: wrap;
     gap: 18px;
     justify-content: space-between;
     padding: 18px;
@@ -223,6 +229,7 @@ input.input-error {
 
 .habit-main {
     display: flex;
+    flex: 1 1 480px;
     gap: 14px;
 }
 
@@ -247,6 +254,71 @@ input.input-error {
     justify-content: flex-end;
 }
 
+.habit-reminders {
+    border-top: 1px solid var(--line);
+    flex-basis: 100%;
+    margin-top: 2px;
+    padding-top: 14px;
+}
+
+.reminder-heading {
+    align-items: center;
+    display: flex;
+    gap: 12px;
+    justify-content: space-between;
+}
+
+.reminder-empty,
+.form-help,
+.form small {
+    color: var(--muted);
+}
+
+.reminder-list {
+    display: grid;
+    gap: 8px;
+    list-style: none;
+    margin: 12px 0 0;
+    padding: 0;
+}
+
+.reminder-item {
+    align-items: center;
+    background: var(--bg);
+    border-radius: 6px;
+    display: grid;
+    gap: 12px;
+    grid-template-columns: 72px minmax(100px, 1fr) auto auto;
+    padding: 10px 12px;
+}
+
+.reminder-item.paused {
+    opacity: 0.68;
+}
+
+.reminder-time {
+    font-variant-numeric: tabular-nums;
+}
+
+.reminder-status {
+    color: var(--muted);
+    font-size: 14px;
+    font-weight: 700;
+}
+
+.reminder-actions {
+    align-items: center;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 10px;
+    justify-content: flex-end;
+}
+
+.reminder-actions button {
+    min-height: 36px;
+    padding: 6px 10px;
+}
+
 @media (max-width: 720px) {
     .topbar,
     .dashboard-head,
@@ -271,5 +343,19 @@ input.input-error {
     .habit-actions {
         justify-content: flex-start;
     }
+
+    .reminder-item {
+        align-items: start;
+        grid-template-columns: 72px 1fr;
+    }
+
+    .reminder-status,
+    .reminder-actions {
+        grid-column: 1 / -1;
+    }
+
+    .reminder-actions {
+        justify-content: flex-start;
+    }
 }