New Design System + Codebase Refresh (#1823)

Since the very first 0.1.0-alpha.1 release, we've been moving quickly to add new features to the Maybe app. In doing so, some parts of the codebase have become outdated, unnecessary, or overly-complex as a natural result of this feature prioritization.

Now that "core" Maybe is complete, we're moving into a second phase of development where we'll be working hard to improve the accuracy of existing features and build additional features on top of "core". This PR is a quick overhaul of the existing codebase aimed to:

- Establish the brand new and simplified dashboard view (pictured above)
- Establish and move towards the conventions introduced in Cursor rules and project design overview #1788
- Consolidate layouts and improve the performance of layout queries
- Organize the core models of the Maybe domain (i.e. Account::Entry, Account::Transaction, etc.) and break out specific traits of each model into dedicated concerns for better readability
- Remove stale / dead code from codebase
- Remove overly complex code paths in favor of simpler ones

app/assets/tailwind/application.css

@@ -8,7 +8,7 @@
 @plugin "@tailwindcss/typography";
 @plugin "@tailwindcss/forms";
 
-@utility combobox {
+.combobox {
   .hw-combobox__main__wrapper,
   .hw-combobox__input {
     @apply w-full;
@@ -40,6 +40,35 @@
   --hw-handle-offset-right: 0px;
 }
 
+/* Typography */
+.prose {
+  @apply max-w-none;
+
+  h2 {
+    @apply text-xl font-medium;
+  }
+
+  h3 {
+    @apply text-lg font-medium;
+  }
+
+  li {
+    @apply m-0;
+  }
+
+  details {
+    @apply mb-4 rounded-xl mt-3.5;
+  }
+
+  summary {
+    @apply flex items-center gap-1;
+  }
+
+  video {
+    @apply m-0 rounded-b-xl;
+  }
+}
+
 .prose--github-release-notes {
   .octicon {
     @apply inline-block overflow-visible align-text-bottom fill-current;

app/assets/tailwind/maybe-design-system.css

@@ -256,23 +256,43 @@
 }
 
 @utility bg-surface {
-  @apply bg-gray-50 hover:bg-gray-100;
+  @apply bg-gray-50;
+}
+
+@utility bg-surface-hover {
+  @apply bg-gray-100;
 }
 
 @utility bg-surface-inset {
-  @apply bg-gray-100 hover:bg-gray-200;
+  @apply bg-gray-100;
+}
+
+@utility bg-surface-inset-hover {
+  @apply bg-gray-200;
 }
 
 @utility bg-container {
-  @apply bg-white hover:bg-gray-50;
+  @apply bg-white;
+}
+
+@utility bg-container-hover {
+  @apply bg-gray-50;
 }
 
 @utility bg-container-inset {
-  @apply bg-gray-50 hover:bg-gray-100;
+  @apply bg-gray-50;
+}
+
+@utility bg-container-inset-hover {
+  @apply bg-gray-100;
 }
 
 @utility bg-inverse {
-  @apply bg-gray-800 hover:bg-gray-700;
+  @apply bg-gray-800;
+}
+
+@utility bg-inverse-hover {
+  @apply bg-gray-700;
 }
 
 @utility bg-overlay {
@@ -291,7 +311,19 @@
   @apply border-alpha-black-100;
 }
 
+@utility border-subdued {
+  @apply border-alpha-black-50;
+}
+
 @layer base {
+  form>button {
+    @apply cursor-pointer;
+  }
+
+  hr {
+    @apply text-gray-200;
+  }
+
   details>summary::-webkit-details-marker {
     @apply hidden;
   }
@@ -337,7 +369,7 @@
   }
   
   .btn--ghost {
-    @apply border border-transparent text-gray-900 hover:bg-gray-50;
+    @apply border border-transparent text-gray-900 hover:bg-gray-100;
   }
 
   .btn--destructive {
@@ -412,35 +444,6 @@
     @apply peer-checked:bg-green-600 peer-checked:after:translate-x-4;
   }
 
-  /* Typography */
-  .prose {
-    @apply max-w-none;
-  
-    h2 {
-      @apply text-xl font-medium;
-    }
-  
-    h3 {
-      @apply text-lg font-medium;
-    }
-  
-    li {
-      @apply m-0;
-    }
-  
-    details {
-      @apply mb-4 rounded-xl mt-3.5;
-    }
-  
-    summary {
-      @apply flex items-center gap-1;
-    }
-  
-    video {
-      @apply m-0 rounded-b-xl;
-    }
-  }
-
   /* Tooltips */
   .tooltip {
     @apply hidden absolute;