style: Update styling in notifications and apps pages

src/views/pages/apps-id-notifications.html

@@ -1,11 +1,29 @@
 <div style="display: flex; flex-direction: column; gap: 10px;">
   <h2>Notifications</h2>
 
-  <% if (app.notifications.length) { %>
-    <% app.notifications.forEach(n => { %>
-      <div style="border-radius: 5px; border-style: dashed; padding: 10px;">
-        <pre><%= JSON.stringify(n, null, 2) %></pre>
+  <% app.notifications.forEach(n => { %>
+    <div style="border-radius: 5px; border: dashed; padding: 10px;">
+
+      <div style="display: flex; align-items: baseline; gap: 10px;">
+
+        <p style="font-weight: bold;">
+          <%= new Date(n.created_at).toLocaleString() %>
+        </p>
+
+        <p><%= n.message %></p>
+
       </div>
-    <% }) %>
+
+      <details>
+        <summary style="cursor: pointer;">Details</summary>
+        <pre style="background-color: #f8f9fa; padding: 10px; border-radius: 5px; white-space: pre-wrap; word-break: break-word;"><%= JSON.stringify(n, null, 2) %></pre>
+      </details>
+    </div>
+  <% }) %>
+
+  <% if (!app.notifications.length) { %>
+    <div style="border-radius: 5px; border: dashed; padding: 10px;">
+      <p>There are no notifications currently</p>
+    </div>
   <% } %>
 </div>

src/views/pages/apps.html

@@ -1,25 +1,43 @@
 <div style="display: flex; flex-direction: column; gap: 10px;">
+
   <div style="display: flex; justify-content: space-between; align-items: center;">
     <div>
       <h2>Apps</h2>
       <p>Your apps</p>
     </div>
+
     <a href="/apps/create">Create a new app</a>
   </div>
 
   <div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;">
+
     <% if (apps.length) { %>
       <% apps.forEach(app => { %>
-        <article style="border-style: dashed; padding: 10px; border-radius: 5px;">
-          <a href="/apps/<%= app.id %>"><%= app.name %></a>
+        <article style="border: dashed; padding: 10px; border-radius: 5px;">
+
+          <h3>
+            <a href="/apps/<%= app.id %>"><%= app.name %></a>
+          </h3>
+
+          <div>
+            <p><%= app.is_active ? 'Active' : 'Inactive' %></p>
+          </div>
+
+          <div>
+            <a href="/apps/<%= app.id %>/channels">Channels</a> |
+            <a href="/apps/<%= app.id %>/notifications">Notifications</a>
+          </div>
+
         </article>
       <% }) %>
     <% } %>
 
     <% if (!apps.length) { %>
-      <article style="border-style: dashed; padding: 10px; border-radius: 5px;">
+      <article style="border: dashed; padding: 10px; border-radius: 5px;">
         <p>There are no apps currently</p>
-      </article>
+      /article>
     <% } %>
+
   </div>
+
 </div>