Docker/Maybe
Docker/Maybe
1
0
Fork 0
mirror of https://github.com/maybe-finance/maybe.git synced 2025-08-09 07:25:19 +02:00
Code Issues Releases Activity Actions

New Design System + Codebase Refresh (#1823)

Browse source 
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
This commit is contained in:
Zach Gollwitzer 2025-02-21 11:57:59 -05:00 • committed by GitHub
parent 8539ac7dec
commit d75be2282b
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
278 changed files with 3428 additions and 4354 deletions
Download patch file Download diff file Expand all files Collapse all files

118
app/views/layouts/_sidebar.html.erb
View file

@ -1,118 +0,0 @@
<div class="flex items-center justify-between">
<%= link_to root_path do %>
<%= image_tag "logo.svg", alt: "Maybe", class: "h-[22px]" %>
<% end %>
<div id="user-menu" data-controller="menu">
<button data-menu-target="button">
<div class="w-9 h-9">
<%= render "settings/user_avatar", user: Current.user, variant: :small %>
</div>
</button>
<div data-menu-target="content" class="hidden absolute w-[240px] z-10 left-[255px] top-[72px] bg-white rounded-sm shadow-xs border border-alpha-black-25">
<div class="p-3 flex items-center gap-3">
<div class="w-9 h-9 shrink-0">
<%= render "settings/user_avatar", user: Current.user, variant: :small, lazy: true %>
</div>
<div class="overflow-hidden text-ellipsis">
<span class="text-primary font-medium text-sm"><%= Current.user.display_name %></span>
<% if Current.user.display_name != Current.user.email %>
<span class="text-secondary text-sm"><%= Current.user.email %></span>
<% end %>
</div>
</div>
<div class="border-t border-b border-tertiary p-1">
<%= link_to settings_profile_path(return_to: request.fullpath), class: "flex gap-2 items-center hover:bg-gray-50 rounded-lg px-3 py-2" do %>
<%= lucide_icon("settings", class: "w-5 h-5 text-secondary shrink-0") %>
<span class="text-primary text-sm">Settings</span>
<% end %>
<div class="flex justify-between items-center gap-2">
<div class="flex items-center gap-2 rounded-lg px-3 py-2">
<%= lucide_icon("app-window", class: "w-5 h-5 text-secondary shrink-0") %>
<div>
<span class="text-primary text-sm">Demo mode</span>
<span class="text-secondary text-xs block">Coming soon...</span>
</div>
</div>
<%# TODO: This will be a form toggle when implemented %>
<div class="relative inline-block cursor-not-allowed" title="Coming soon...">
<label class="cursor-not-allowed block bg-gray-100 w-9 h-5 rounded-full after:content-[''] after:block after:absolute after:top-0.5 after:left-0.5 after:bg-white after:w-4 after:h-4 after:rounded-full after:transition-transform after:duration-300 after:ease-in-out peer-checked:bg-green-600 peer-checked:after:translate-x-4"></label>
</div>
</div>
</div>
<div class="border-t border-b border-tertiary p-1">
<%= link_to changelog_path, class: "flex gap-2 items-center hover:bg-gray-50 rounded-lg px-3 py-2" do %>
<%= lucide_icon("box", class: "w-5 h-5 text-secondary shrink-0") %>
<span class="text-primary text-sm">Changelog</span>
<% end %>
<%= link_to feedback_path, class: "flex gap-2 items-center hover:bg-gray-50 rounded-lg px-3 py-2" do %>
<%= lucide_icon("megaphone", class: "w-5 h-5 text-secondary shrink-0") %>
<span class="text-primary text-sm">Feedback</span>
<% end %>
<% if self_hosted? %>
<%= link_to "https://link.maybe.co/discord", class: "flex gap-2 items-center hover:bg-gray-50 rounded-lg px-3 py-2" do %>
<%= lucide_icon("message-square-more", class: "w-5 h-5 text-secondary shrink-0") %>
<span class="text-primary text-sm">Contact</span>
<% end %>
<% else %>
<%= link_to "mailto:hello@maybefinance.com", class: "flex gap-2 items-center hover:bg-gray-50 rounded-lg px-3 py-2", onclick: "Intercom('showNewMessage'); return false;" do %>
<%= lucide_icon("message-square-more", class: "w-5 h-5 text-secondary shrink-0") %>
<span class="text-primary text-sm">Contact</span>
<% end %>
<% end %>
</div>
<div class="p-1">
<%= button_to session_path(Current.session), method: :delete, class: "w-full text-red-400 flex gap-1 items-center hover:bg-gray-50 rounded-lg px-3 py-2" do %>
<%= lucide_icon("log-out", class: "w-5 h-5 shrink-0") %>
<span class="text-sm">Logout</span>
<% end %>
</div>
</div>
</div>
</div>
<nav>
<ul class="mt-6 space-y-1">
<li>
<%= sidebar_link_to t(".dashboard"), root_path, icon: "layout-grid" %>
</li>
<li>
<%= sidebar_link_to t(".accounts"), summary_accounts_path, icon: "layers" %>
</li>
<li>
<%= sidebar_link_to t(".transactions"), transactions_path, icon: "credit-card" %>
</li>
<li>
<%= sidebar_link_to t(".budgeting"), budgets_path, icon: "map" %>
</li>
</ul>
</nav>
<div class="flex flex-col mt-6">
<div class="flex items-center justify-between px-3 py-2 mb-2">
<div class="flex items-center gap-2 text-xs uppercase text-secondary">
<%= link_to accounts_path, class: "text-xs uppercase text-secondary font-bold tracking-wide" do %>
<%= t(".portfolio") %>
<% end %>
<span class="font-bold tracking-wide">&bull;</span>
<%= form_with url: list_accounts_path, method: :get, data: { controller: Current.family.accounts.any? ? "auto-submit-form" : nil, turbo_frame: "account-list" } do |form| %>
<%= period_select form: form, selected: "last_30_days", classes: "w-full border-none pl-2 pr-7 text-xs bg-transparent gap-1 cursor-pointer font-semibold tracking-wide focus:outline-hidden focus:ring-0" %>
<% end %>
</div>
<%= link_to new_account_path, id: "sidebar-new-account", class: "block hover:bg-gray-100 font-semibold text-primary flex items-center rounded p-1", title: t(".new_account"), data: { turbo_frame: "modal" } do %>
<%= lucide_icon("plus", class: "w-5 h-5 text-secondary") %>
<% end %>
</div>
<%= turbo_frame_tag "account-list", target: "_top" do %>
<% if Current.family.accounts.any? %>
<% account_groups.each do |group| %>
<%= render "accounts/account_list", group: group %>
<% end %>
<% else %>
<%= link_to new_account_path, class: "flex items-center min-h-10 gap-4 px-3 py-2 mb-1 text-secondary text-sm font-medium rounded-[10px] hover:bg-gray-100", data: { turbo_frame: "modal" } do %>
<%= lucide_icon("plus", class: "w-5 h-5") %>
<%= tag.p t(".new_account") %>
<% end %>
<% end %>
<% end %>
</div>

92
app/views/layouts/application.html.erb
View file

@ -1,57 +1,51 @@
<!DOCTYPE html>
<html class="font-sans text-primary h-full <%= @os %>" lang="en">
<head>
<title><%= content_for(:title) || "Maybe" %></title>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag "tailwind", "data-turbo-track": "reload" %>
<%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
<%= javascript_include_tag "https://cdn.plaid.com/link/v2/stable/link-initialize.js" %>
<%= combobox_style_tag %>
<%= javascript_importmap_tags %>
<%= turbo_refreshes_with method: :morph, scroll: :preserve %>
<meta name="viewport"
content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="Maybe">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="theme-color" content="#ffffff">
<%= yield :head %>
</head>
<body class="h-full">
<%= render "impersonation_sessions/super_admin_bar" if Current.true_user&.super_admin? && show_super_admin_bar? %>
<%= render "impersonation_sessions/approval_bar" if Current.true_user&.impersonated_support_sessions&.initiated&.any? %>
<div class="fixed z-50 bottom-6 left-6">
<div id="notification-tray" class="space-y-1">
<%= render_flash_notifications %>
<% if Current.family&.syncing? %>
<%= render "shared/syncing_notice" %>
<%= render "layouts/shared/htmldoc" do %>
<div class="flex h-full bg-gray-50">
<nav class="flex flex-col shrink-0 w-[84px] py-4 mr-3">
<div class="pl-2 mb-3">
<%= link_to root_path, class: "block" do %>
<%= image_tag "logomark-color.svg", class: "w-9 h-9 mx-auto" %>
<% end %>
</div>
</div>
<%= family_notifications_stream %>
<%= family_stream %>
<ul class="space-y-0.5">
<li>
<%= render "layouts/sidebar/nav_item", name: "Home", path: root_path, icon_key: "pie-chart" %>
</li>
<%= content_for?(:content) ? yield(:content) : yield %>
<li>
<%= render "layouts/sidebar/nav_item", name: "Transactions", path: transactions_path, icon_key: "credit-card" %>
</li>
<%= turbo_frame_tag "modal" %>
<%= turbo_frame_tag "drawer" %>
<li>
<%= render "layouts/sidebar/nav_item", name: "Budgets", path: budgets_path, icon_key: "layout-grid" %>
</li>
</ul>
<%= render "shared/confirm_modal" %>
<div class="pl-2 mt-auto mx-auto">
<%= render "users/user_menu", user: Current.user %>
</div>
</nav>
<% if self_hosted? && Current.user&.onboarded_at.present? %>
<%= render "shared/app_version" %>
<%= tag.div class: class_names("py-4 shrink-0 h-full overflow-y-auto transition-all duration-300", Current.user.show_sidebar? ? "w-[260px]" : "w-0"), data: { sidebar_target: "panel" } do %>
<% if content_for?(:sidebar) %>
<%= yield :sidebar %>
<% else %>
<div id="account-sidebar-tabs" data-turbo-permanent>
<%= render "accounts/account_sidebar_tabs", family: Current.family %>
</div>
<% end %>
<% end %>
</body>
</html>
<%= tag.main class: class_names("px-10 py-4 grow h-full", require_upgrade? ? "relative overflow-hidden" : "overflow-y-auto") do %>
<% if require_upgrade? %>
<div class="absolute inset-0 px-10 h-full w-full z-50">
<%= render "shared/subscribe_modal" %>
</div>
<% end %>
<%= tag.div class: class_names("mx-auto w-full h-full", Current.user.show_sidebar? ? "max-w-4xl" : "max-w-5xl"), data: { sidebar_target: "content" } do %>
<%= yield %>
<% end %>
<% end %>
</div>
<% end %>

54
app/views/layouts/auth.html.erb
View file

@ -1,35 +1,35 @@
<%= content_for :content do %>
<div class="flex flex-col h-screen px-6 py-12 bg-gray-25">
<div class="grow flex flex-col justify-center">
<div class="sm:mx-auto sm:w-full sm:max-w-md">
<div class="flex justify-center mb-6">
<%= image_tag "logo-color.png", class: "w-16 mb-6" %>
<%= render "layouts/shared/htmldoc" do %>
<div class="flex flex-col h-dvh">
<div class="flex flex-col h-screen px-6 py-12 bg-gray-25">
<div class="grow flex flex-col justify-center">
<div class="sm:mx-auto sm:w-full sm:max-w-md">
<div class="flex justify-center mb-6">
<%= image_tag "logo-color.png", class: "w-16 mb-6" %>
</div>
<div class="space-y-2">
<h2 class="text-3xl font-medium text-primary text-center">
<%= content_for?(:header_title) ? yield(:header_title).html_safe : t(".your_account") %>
</h2>
<% if controller_name == "sessions" %>
<p class="text-sm text-center">
<%= tag.span t(".no_account"), class: "text-secondary" %> <%= link_to t(".sign_up"), new_registration_path, class: "font-medium text-primary hover:underline transition" %>
</p>
<% elsif controller_name == "registrations" %>
<p class="text-sm text-center text-gray-600">
<%= t(".existing_account") %> <%= link_to t(".sign_in"), new_session_path, class: "font-medium text-primary hover:underline transition" %>
</p>
<% end %>
</div>
</div>
<div class="space-y-2">
<h2 class="text-3xl font-medium text-primary text-center">
<%= content_for?(:header_title) ? yield(:header_title).html_safe : t(".your_account") %>
</h2>
<% if controller_name == "sessions" %>
<p class="text-sm text-center">
<%= tag.span t(".no_account"), class: "text-secondary" %> <%= link_to t(".sign_up"), new_registration_path, class: "font-medium text-primary hover:underline transition" %>
</p>
<% elsif controller_name == "registrations" %>
<p class="text-sm text-center text-gray-600">
<%= t(".existing_account") %> <%= link_to t(".sign_in"), new_session_path, class: "font-medium text-primary hover:underline transition" %>
</p>
<% end %>
<div class="mt-8 sm:mx-auto sm:w-full sm:max-w-lg">
<%= yield %>
</div>
</div>
<div class="mt-8 sm:mx-auto sm:w-full sm:max-w-lg">
<%= yield %>
</div>
<%= render "layouts/shared/footer" %>
</div>
<%= render "layouts/footer" %>
</div>
<% end %>
<%= render template: "layouts/application" %>

4
app/views/layouts/imports.html.erb
View file

@ -1,4 +1,4 @@
<%= content_for :content do %>
<%= render "layouts/shared/htmldoc" do %>
<div class="flex flex-col h-dvh">
<header class="flex items-center justify-between p-8">
<%= link_to content_for(:previous_path) || imports_path do %>
@ -19,5 +19,3 @@
</main>
</div>
<% end %>
<%= render template: "layouts/application" %>

24
app/views/layouts/issues.html.erb
View file

@ -1,15 +1,15 @@
<%= drawer do %>
<article class="prose">
<%= tag.h2 do %>
<%= yield :title %>
<% end %>
<%= render "layouts/shared/htmldoc" do %>
<%= drawer do %>
<article class="prose">
<%= tag.h2 do %>
<%= yield :title %>
<% end %>
<%= tag.h3 t(".description") %>
<%= yield :description %>
<%= tag.h3 "Issue Description" %>
<%= yield :description %>
<%= tag.h3 t(".action") %>
<%= yield :action %>
</article>
<%= tag.h3 "How to fix this issue" %>
<%= yield :action %>
</article>
<% end %>
<% end %>
<%= render template: "layouts/application" %>

3
app/views/layouts/onboardings.html.erb Normal file
View file

@ -0,0 +1,3 @@
<%= render "layouts/shared/htmldoc" do %>
<%= yield %>
<% end %>

25
app/views/layouts/settings.html.erb Normal file
View file

@ -0,0 +1,25 @@
<%= render "layouts/shared/htmldoc" do %>
<div class="flex h-full bg-gray-25">
<div class="p-4 w-[260px] shrink-0 h-full overflow-y-auto">
<%= render "settings/settings_nav" %>
</div>
<main class="py-4 px-10 grow flex h-full overflow-y-auto">
<div class="relative max-w-4xl mx-auto flex flex-col w-full h-full">
<div class="grow space-y-4 overflow-y-auto -mx-1 px-1 pb-12">
<% if content_for?(:page_title) %>
<h1 class="text-primary text-xl font-medium">
<%= content_for :page_title %>
</h1>
<% end %>
<%= yield %>
</div>
<div class="mt-4">
<%= settings_nav_footer %>
</div>
</div>
</main>
</div>
<% end %>

6
app/views/layouts/shared/_fixed_content.html.erb Normal file
View file

@ -0,0 +1,6 @@
<%= turbo_frame_tag "modal" %>
<%= turbo_frame_tag "drawer" %>
<%= render "shared/confirm_modal" %>
<%= render "impersonation_sessions/super_admin_bar" if Current.true_user&.super_admin? && show_super_admin_bar? %>
<%= render "impersonation_sessions/approval_bar" if Current.true_user&.impersonated_support_sessions&.initiated&.any? %>

0
app/views/layouts/_footer.html.erb → app/views/layouts/shared/_footer.html.erb
View file

26
app/views/layouts/shared/_head.html.erb Normal file
View file

@ -0,0 +1,26 @@
<head>
<title><%= content_for(:title) || "Maybe" %></title>
<%= csrf_meta_tags %>
<%= csp_meta_tag %>
<%= stylesheet_link_tag "tailwind", "data-turbo-track": "reload" %>
<%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>
<%= javascript_include_tag "https://cdn.plaid.com/link/v2/stable/link-initialize.js" %>
<%= combobox_style_tag %>
<%= javascript_importmap_tags %>
<%= turbo_refreshes_with method: :morph, scroll: :preserve %>
<meta name="viewport"
content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="Maybe">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="theme-color" content="#ffffff">
<%= yield :head %>
</head>

35
app/views/layouts/shared/_htmldoc.html.erb Normal file
View file

@ -0,0 +1,35 @@
<!DOCTYPE html>
<html class="h-full text-primary font-sans <%= @os %>" lang="en">
<head>
<%= render "layouts/shared/head" %>
<%= yield :head %>
</head>
<body class="h-full antialiased" data-controller="sidebar" data-sidebar-user-id-value="<%= Current.user&.id %>">
<div class="fixed z-50 bottom-6 left-6">
<div id="notification-tray" class="space-y-1">
<%= render_flash_notifications %>
<% if Current.family&.syncing? %>
<%= render "shared/syncing_notice" %>
<% end %>
</div>
</div>
<%= family_notifications_stream %>
<%= family_stream %>
<% if self_hosted? && (upgrade = get_upgrade_for_notification(Current.user, Setting.upgrades_mode)) %>
<%= render partial: "shared/upgrade_notification", locals: { upgrade: upgrade } %>
<% end %>
<%= turbo_frame_tag "modal" %>
<%= turbo_frame_tag "drawer" %>
<%= render "shared/confirm_modal" %>
<%= render "impersonation_sessions/super_admin_bar" if Current.true_user&.super_admin? && show_super_admin_bar? %>
<%= render "impersonation_sessions/approval_bar" if Current.true_user&.impersonated_support_sessions&.initiated&.any? %>
<%= yield %>
</body>
</html>

16
app/views/layouts/shared/_notifications.html.erb Normal file
View file

@ -0,0 +1,16 @@
<div class="fixed z-50 bottom-6 left-6">
<div id="notification-tray" class="space-y-1">
<%= render_flash_notifications %>
<% if Current.family&.syncing? %>
<%= render "shared/syncing_notice" %>
<% end %>
</div>
</div>
<%= family_notifications_stream %>
<%= family_stream %>
<% if self_hosted? && (upgrade = get_upgrade_for_notification(Current.user, Setting.upgrades_mode)) %>
<%= render partial: "shared/upgrade_notification", locals: { upgrade: upgrade } %>
<% end %>

17
app/views/layouts/sidebar/_nav_item.html.erb Normal file
View file

@ -0,0 +1,17 @@
<%# locals: (name:, path:, icon_key:) %>
<%= link_to path, class: "space-y-1 py-1 group block" do %>
<div class="grow flex gap-1 items-center">
<%= tag.div class: class_names("w-1 h-4 rounded-tr-sm rounded-br-sm", "bg-gray-900" => page_active?(path)) %>
<%= tag.div class: class_names("w-8 h-8 flex items-center justify-center mx-auto rounded-lg", page_active?(path) ? "bg-white shadow-xs text-primary" : "group-hover:bg-gray-100 text-secondary") do %>
<%= icon(icon_key) %>
<% end %>
</div>
<div class="grow pl-2">
<%= tag.p class: class_names("text-center font-medium text-[11px]", page_active?(path) ? "text-primary" : "text-secondary") do %>
<%= name %>
<% end %>
</div>
<% end %>

25
app/views/layouts/with_sidebar.html.erb
View file

@ -1,25 +0,0 @@
<%= content_for :content do %>
<div class="flex h-full bg-gray-25">
<div class="p-6 pb-20 w-[368px] shrink-0 h-full overflow-y-auto">
<% if content_for?(:sidebar) %>
<%= yield :sidebar %>
<% else %>
<%= render "layouts/sidebar" %>
<% end %>
</div>
<main class="grow px-20 py-6 h-full <%= require_upgrade? ? "relative overflow-hidden" : "overflow-y-auto" %>">
<% if require_upgrade? %>
<%= render "shared/subscribe_modal" %>
<% end %>
<%= yield %>
</main>
</div>
<% if (upgrade = get_upgrade_for_notification(Current.user, Setting.upgrades_mode)) %>
<%= render partial: "shared/upgrade_notification", locals: { upgrade: upgrade } %>
<% end %>
<% end %>
<%= render template: "layouts/application" %>

4
app/views/layouts/wizard.html.erb
View file

@ -1,4 +1,4 @@
<%= content_for :content do %>
<%= render "layouts/shared/htmldoc" do %>
<div class="flex flex-col h-dvh">
<header class="flex items-center justify-between p-8">
<%= link_to content_for(:previous_path) || root_path do %>
@ -19,5 +19,3 @@
</main>
</div>
<% end %>
<%= render template: "layouts/application" %>