Use tabnav component for wallet view

Introduces components for tabbed navigation and adds a tab menu and item
for non-financial contributions to the donations/contributions page.

app/components/main_with_tabnav_component.html.erb

@@ -0,0 +1,10 @@
+<main class="w-full max-w-6xl mx-auto pb-12 px-4 md:px-6 lg:px-8">
+  <div class="bg-white rounded-lg shadow">
+    <div class="px-6 sm:px-12 pt-2 sm:pt-4">
+      <%= render partial: @tabnav_partial %>
+    </div>
+    <div class="px-6 sm:px-12 py-8 sm:py-12">
+      <%= content %>
+    </div>
+  </div>
+</main>

app/components/main_with_tabnav_component.rb

@@ -0,0 +1,7 @@
+# frozen_string_literal: true
+
+class MainWithTabnavComponent < ViewComponent::Base
+  def initialize(tabnav_partial:)
+    @tabnav_partial = tabnav_partial
+  end
+end

app/components/tabnav_link_component.html.erb

@@ -0,0 +1,3 @@
+<%= link_to @path, class: @link_class do %>
+  <%= @name %>
+<% end %>

app/components/tabnav_link_component.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+class TabnavLinkComponent < ViewComponent::Base
+  def initialize(name:, path:, active: false, disabled: false)
+    @name = name
+    @path = path
+    @active = active
+    @disabled = disabled
+    @link_class = class_names_link(path)
+  end
+
+  def class_names_link(path)
+    if @active
+      "border-indigo-500 text-indigo-600 w-1/2 py-4 px-1 text-center border-b-2"
+    elsif @disabled
+      "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 w-1/2 py-4 px-1 text-center border-b-2"
+    else
+      "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 w-1/2 py-4 px-1 text-center border-b-2"
+    end
+  end
+end

app/controllers/contributions/donations_controller.rb

@@ -1,4 +1,4 @@
-class DonationsController < ApplicationController
+class Contributions::DonationsController < ApplicationController
   before_action :require_user_signed_in
 
   # GET /donations

app/controllers/contributions/projects_controller.rb

@@ -0,0 +1,8 @@
+class Contributions::ProjectsController < ApplicationController
+  before_action :require_user_signed_in
+
+  # GET /contributions
+  def index
+    @current_section = :contributions
+  end
+end

app/views/contributions/donations/index.html.erb

@@ -1,6 +1,6 @@
-<%= render HeaderComponent.new(title: "Donations") %>
+<%= render HeaderComponent.new(title: "Contributions") %>
 
-<%= render MainSimpleComponent.new do %>
+<%= render MainWithTabnavComponent.new(tabnav_partial: "shared/tabnav_contributions") do %>
   <section>
     <p class="mb-12">
       Your financial contributions to the development and upkeep of Kosmos
@@ -34,7 +34,9 @@
       </ul>
     <% else %>
       <p class="text-gray-500">
-        No donations to show.
+        The donation process is not automated yet. Please
+        <a href="https://wiki.kosmos.org/Main_Page#Community_.2F_Getting_in_touch_.2F_Getting_involved" class="ks-text-link" target="_blank">contact us</a>
+        if you'd like to contribute this way right now.
       </p>
     <% end %>
   </section>

app/views/contributions/projects/index.html.erb

@@ -0,0 +1,16 @@
+<%= render HeaderComponent.new(title: "Contributions") %>
+
+<%= render MainWithTabnavComponent.new(tabnav_partial: "shared/tabnav_contributions") do %>
+  <section>
+    <p class="mb-8">
+      Project contributions are how we develop and run all Kosmos software and
+      services. Everything we create and provide is free and open-source
+      software, even the page you're looking at right now!
+    </p>
+    <p>
+      Soon you will find a summary of your contributions here. Until then,
+      please refer to the
+      <a href="https://kredits.kosmos.org/" class="ks-text-link" target="_blank">Kredits dashboard</a>.
+    </p>
+  </section>
+<% end %>

app/views/donations/index.json.jbuilder

@@ -1 +0,0 @@
-json.array! @donations, partial: "donations/donation", as: :donation

app/views/icons/_user.html.erb

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-user"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-user <%= custom_class %>"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>

app/views/invitations/index.html.erb

@@ -22,8 +22,8 @@
       </table>
     <% else %>
       <p>
-        You do not have any invitations to give away yet. All good
-        things come in time.
+        You do not have any invitations to give away yet. We will notify you,
+        as soon as you can invite others.
       </p>
     <% end %>
   </section>

app/views/shared/_main_nav.html.erb

@@ -1,9 +1,9 @@
 <%= link_to "Services", root_path,
       class: main_nav_class(@current_section, :dashboard) %>
+<%= link_to "Contributions", contributions_donations_path,
+      class: main_nav_class(@current_section, :contributions) %>
 <%= link_to "Invitations", invitations_path,
       class: main_nav_class(@current_section, :invitations) %>
-<%= link_to "Donations", donations_path,
-      class: main_nav_class(@current_section, :contributions) %>
 <%= link_to "Wallet", wallet_path,
       class: main_nav_class(@current_section, :wallet) %>
 <%= link_to "Settings", security_path,

app/views/shared/_sidenav_settings.html.erb

@@ -1,5 +1,5 @@
 <%= render SidenavLinkComponent.new(
-  name: "Account", path: "#", icon: "settings", disabled: true
+  name: "Account", path: "#", icon: "user", disabled: true
 ) %>
 <%= render SidenavLinkComponent.new(
   name: "Password", path: security_path, icon: "key",

app/views/shared/_tabnav_contributions.html.erb

@@ -0,0 +1,12 @@
+<div class="border-b border-gray-200">
+  <nav class="-mb-px flex" aria-label="Tabs">
+    <%= render TabnavLinkComponent.new(
+      name: "Donations", path: contributions_donations_path,
+      active: current_page?(contributions_donations_path)
+    ) %>
+    <%= render TabnavLinkComponent.new(
+      name: "Projects", path: contributions_projects_path,
+      active: current_page?(contributions_projects_path)
+    ) %>
+  </nav>
+</div>

app/views/shared/_tabnav_wallet.html.erb

@@ -0,0 +1,14 @@
+<section>
+  <div class="border-b border-gray-200">
+    <nav class="-mb-px flex" aria-label="Tabs">
+      <%= render TabnavLinkComponent.new(
+        name: "Info", path: wallet_path,
+        active: current_page?(wallet_path)
+      ) %>
+      <%= render TabnavLinkComponent.new(
+        name: "Transactions", path: wallet_transactions_path,
+        active: current_page?(wallet_transactions_path)
+      ) %>
+    </nav>
+  </div>
+</section>

app/views/wallet/index.html.erb

@@ -3,14 +3,7 @@
 <%= render MainSimpleComponent.new do %>
   <%= render WalletSummaryComponent.new(balance: @balance) %>
 
-  <section>
-    <div class="border-b border-gray-200">
-      <nav class="-mb-px flex" aria-label="Tabs">
-        <%= link_to "Info", wallet_path, class: "border-indigo-500 text-indigo-600 w-1/2 py-4 px-1 text-center border-b-2", "aria-current": "page" %>
-        <%= link_to "Transactions", wallet_transactions_path, class: "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 w-1/2 py-4 px-1 text-center border-b-2" %>
-      </nav>
-    </div>
-  </section>
+  <%= render partial: "shared/tabnav_wallet" %>
 
   <section>
     <h3>Lightning Address</h3>

app/views/wallet/transactions.html.erb

@@ -3,14 +3,7 @@
 <%= render MainSimpleComponent.new do %>
   <%= render WalletSummaryComponent.new(balance: @balance) %>
 
-  <section>
-    <div class="border-b border-gray-200">
-      <nav class="-mb-px flex" aria-label="Tabs">
-        <%= link_to "Info", wallet_path, class: "border-transparent text-gray-500 hover:text-gray-700 hover:border-gray-300 w-1/2 py-4 px-1 text-center border-b-2" %>
-        <%= link_to "Transactions", wallet_transactions_path, class: "border-indigo-500 text-indigo-600 w-1/2 py-4 px-1 text-center border-b-2", "aria-current": "page" %>
-      </nav>
-    </div>
-  </section>
+  <%= render partial: "shared/tabnav_wallet" %>
 
   <section>
     <h3 class="hidden">Transactions</h3>

config/routes.rb

@@ -15,9 +15,13 @@ Rails.application.routes.draw do
 
   get 'security', to: 'security#index'
 
-  resources :invitations, only: ['index', 'show', 'create', 'destroy']
+  namespace :contributions do
+    root to: 'donations#index'
+    get 'projects', to: 'projects#index'
+    resources :donations, only: ['index']
+  end
 
-  resources :donations
+  resources :invitations, only: ['index', 'show', 'create', 'destroy']
 
   get 'wallet', to: 'wallet#index'
   get 'wallet/transactions', to: 'wallet#transactions'