0.4.0

Reviewed-on: #66

.drone.yml

@@ -1,3 +1,4 @@
+---
 kind: pipeline
 type: docker
 name: CI build
@@ -11,19 +12,23 @@ steps:
     settings:
       restore: true
       mount:
-      - vendor
+      - ./vendor
     when:
       branch:
         - master
   - name: rspec
-    image: guildeducation/rails:2.7.1-12.19.0
+    image: guildeducation/rails:2.7.2-12.22.0
+    environment:
+      RAILS_ENV: test
     commands:
-      - bundle install --jobs=3 --retry=3 --deployment
+      - bundle config unset deployment
+      - bundle config set cache_all 'true'
+      - bundle config set cache_path 'vendor/cache'
+      - bundle config set with 'development test'
+      - bundle install --jobs=3 --retry=3
       - yarn install
-      - bundle exec rspec
+      - rake css:build
-    when:
+      - rake spec
-      branch:
-        - master
   - name: rebuild-cache
     image: drillster/drone-volume-cache
     volumes:
@@ -32,7 +37,7 @@ steps:
     settings:
       rebuild: true
       mount:
-      - vendor
+      - ./vendor
     when:
       branch:
         - master
@@ -41,3 +46,8 @@ volumes:
   - name: cache
     host:
       path: /var/lib/drone/tmp
+---
+kind: signature
+hmac: f9a8cf97f6596625721365f6238f6f298aa5a7a4de10c3fb61c57202ae9d1ee1
+
+...

.env.test

@@ -1 +1,3 @@
 EJABBERD_API_URL='http://xmpp.example.com/api'
+LNDHUB_API_URL='http://localhost:3023'
+LNDHUB_PUBLIC_URL='https://lndhub.kosmos.org'

.gitignore

@@ -43,4 +43,5 @@ yarn-debug.log*
 # Ignore redis dumps from sidekiq
 dump.rdb
 
-/config/credentials/development.key
+/app/assets/builds/*
+!/app/assets/builds/.keep

.ruby-version

@@ -1 +1 @@
-2.6.1
+2.7.2

Gemfile

@@ -2,15 +2,21 @@ source 'https://rubygems.org'
 git_source(:github) { |repo| "https://github.com/#{repo}.git" }
 
 # Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
-gem 'rails', '~> 6.0.3', '>= 6.0.3.4'
+gem 'rails', '~> 7.0.2'
 # Use Puma as the app server
 gem 'puma', '~> 4.1'
-# Use SCSS for stylesheets
+# View components
-gem 'sass-rails', '>= 6'
+gem "view_component"
-# Transpile app-like JavaScript. Read more: https://github.com/rails/webpacker
+# Separate dependency since Rails 7.0
-gem 'webpacker', '~> 4.0'
+gem 'sprockets-rails'
-# Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks
+# Allows custom JS build tasks to integrate with the asset pipeline
-gem 'turbolinks', '~> 5'
+gem 'cssbundling-rails'
+# Use JavaScript with ESM import maps [https://github.com/rails/importmap-rails]
+gem "importmap-rails"
+# Hotwire's SPA-like page accelerator [https://turbo.hotwired.dev]
+gem "turbo-rails"
+# Hotwire's modest JavaScript framework [https://stimulus.hotwired.dev]
+gem "stimulus-rails"
 # Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder
 gem 'jbuilder', '~> 2.7'
 # Use Redis adapter to run Action Cable in production
@@ -18,9 +24,6 @@ gem 'jbuilder', '~> 2.7'
 # Use Active Model has_secure_password
 # gem 'bcrypt', '~> 3.1.7'
 
-# Reduces boot times through caching; required in config/boot.rb
-gem 'bootsnap', '>= 1.4.2', require: false
-
 # Configuration
 gem 'dotenv-rails'
 
@@ -46,23 +49,18 @@ gem 'sidekiq-scheduler'
 group :development, :test do
   # Use sqlite3 as the database for Active Record
   gem 'sqlite3', '~> 1.4'
-  # Call 'byebug' anywhere in the code to stop execution and get a debugger console
+  gem 'rspec-rails'
-  gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
 end
 
 group :development do
   # Access an interactive console on exception pages or by calling 'console' anywhere in the code.
   gem 'web-console', '>= 3.3.0'
   gem 'listen', '~> 3.2'
-  # Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
-  gem 'spring'
-  gem 'spring-watcher-listen', '~> 2.0.0'
   gem 'letter_opener'
   gem 'letter_opener_web'
 end
 
 group :test do
-  gem 'rspec-rails'
   gem 'factory_bot_rails'
   gem 'capybara'
   gem 'database_cleaner'

Gemfile.lock

@@ -1,69 +1,76 @@
 GEM
   remote: https://rubygems.org/
   specs:
-    actioncable (6.0.4.1)
+    actioncable (7.0.2.2)
-      actionpack (= 6.0.4.1)
+      actionpack (= 7.0.2.2)
+      activesupport (= 7.0.2.2)
       nio4r (~> 2.0)
       websocket-driver (>= 0.6.1)
-    actionmailbox (6.0.4.1)
+    actionmailbox (7.0.2.2)
-      actionpack (= 6.0.4.1)
+      actionpack (= 7.0.2.2)
-      activejob (= 6.0.4.1)
+      activejob (= 7.0.2.2)
-      activerecord (= 6.0.4.1)
+      activerecord (= 7.0.2.2)
-      activestorage (= 6.0.4.1)
+      activestorage (= 7.0.2.2)
-      activesupport (= 6.0.4.1)
+      activesupport (= 7.0.2.2)
       mail (>= 2.7.1)
-    actionmailer (6.0.4.1)
+      net-imap
-      actionpack (= 6.0.4.1)
+      net-pop
-      actionview (= 6.0.4.1)
+      net-smtp
-      activejob (= 6.0.4.1)
+    actionmailer (7.0.2.2)
+      actionpack (= 7.0.2.2)
+      actionview (= 7.0.2.2)
+      activejob (= 7.0.2.2)
+      activesupport (= 7.0.2.2)
       mail (~> 2.5, >= 2.5.4)
+      net-imap
+      net-pop
+      net-smtp
       rails-dom-testing (~> 2.0)
-    actionpack (6.0.4.1)
+    actionpack (7.0.2.2)
-      actionview (= 6.0.4.1)
+      actionview (= 7.0.2.2)
-      activesupport (= 6.0.4.1)
+      activesupport (= 7.0.2.2)
-      rack (~> 2.0, >= 2.0.8)
+      rack (~> 2.0, >= 2.2.0)
       rack-test (>= 0.6.3)
       rails-dom-testing (~> 2.0)
       rails-html-sanitizer (~> 1.0, >= 1.2.0)
-    actiontext (6.0.4.1)
+    actiontext (7.0.2.2)
-      actionpack (= 6.0.4.1)
+      actionpack (= 7.0.2.2)
-      activerecord (= 6.0.4.1)
+      activerecord (= 7.0.2.2)
-      activestorage (= 6.0.4.1)
+      activestorage (= 7.0.2.2)
-      activesupport (= 6.0.4.1)
+      activesupport (= 7.0.2.2)
+      globalid (>= 0.6.0)
       nokogiri (>= 1.8.5)
-    actionview (6.0.4.1)
+    actionview (7.0.2.2)
-      activesupport (= 6.0.4.1)
+      activesupport (= 7.0.2.2)
       builder (~> 3.1)
       erubi (~> 1.4)
       rails-dom-testing (~> 2.0)
       rails-html-sanitizer (~> 1.1, >= 1.2.0)
-    activejob (6.0.4.1)
+    activejob (7.0.2.2)
-      activesupport (= 6.0.4.1)
+      activesupport (= 7.0.2.2)
       globalid (>= 0.3.6)
-    activemodel (6.0.4.1)
+    activemodel (7.0.2.2)
-      activesupport (= 6.0.4.1)
+      activesupport (= 7.0.2.2)
-    activerecord (6.0.4.1)
+    activerecord (7.0.2.2)
-      activemodel (= 6.0.4.1)
+      activemodel (= 7.0.2.2)
-      activesupport (= 6.0.4.1)
+      activesupport (= 7.0.2.2)
-    activestorage (6.0.4.1)
+    activestorage (7.0.2.2)
-      actionpack (= 6.0.4.1)
+      actionpack (= 7.0.2.2)
-      activejob (= 6.0.4.1)
+      activejob (= 7.0.2.2)
-      activerecord (= 6.0.4.1)
+      activerecord (= 7.0.2.2)
-      marcel (~> 1.0.0)
+      activesupport (= 7.0.2.2)
-    activesupport (6.0.4.1)
+      marcel (~> 1.0)
+      mini_mime (>= 1.1.0)
+    activesupport (7.0.2.2)
       concurrent-ruby (~> 1.0, >= 1.0.2)
-      i18n (>= 0.7, < 2)
+      i18n (>= 1.6, < 2)
-      minitest (~> 5.1)
+      minitest (>= 5.1)
-      tzinfo (~> 1.1)
+      tzinfo (~> 2.0)
-      zeitwerk (~> 2.2, >= 2.2.2)
     addressable (2.8.0)
       public_suffix (>= 2.0.2, < 5.0)
     bcrypt (3.1.16)
     bindex (0.8.1)
-    bootsnap (1.9.1)
-      msgpack (~> 1.0)
     builder (3.2.4)
-    byebug (11.1.3)
     capybara (3.36.0)
       addressable
       matrix
@@ -79,13 +86,15 @@ GEM
     crack (0.4.5)
       rexml
     crass (1.0.6)
+    cssbundling-rails (1.0.0)
+      railties (>= 6.0.0)
     database_cleaner (2.0.1)
       database_cleaner-active_record (~> 2.0.0)
     database_cleaner-active_record (2.0.1)
       activerecord (>= 5.a)
       database_cleaner-core (~> 2.0.0)
     database_cleaner-core (2.0.1)
-    devise (4.8.0)
+    devise (4.8.1)
       bcrypt (~> 3.0)
       orm_adapter (~> 0.1)
       railties (>= 4.1.0)
@@ -94,7 +103,8 @@ GEM
     devise_ldap_authenticatable (0.8.7)
       devise (>= 3.4.1)
       net-ldap (>= 0.16.0)
-    diff-lcs (1.4.4)
+    diff-lcs (1.5.0)
+    digest (3.1.0)
     dotenv (2.7.6)
     dotenv-rails (2.7.6)
       dotenv (= 2.7.6)
@@ -108,49 +118,40 @@ GEM
     factory_bot_rails (6.2.0)
       factory_bot (~> 6.2.0)
       railties (>= 5.0.0)
-    faraday (1.8.0)
+    faraday (2.2.0)
-      faraday-em_http (~> 1.0)
+      faraday-net_http (~> 2.0)
-      faraday-em_synchrony (~> 1.0)
-      faraday-excon (~> 1.1)
-      faraday-httpclient (~> 1.0.1)
-      faraday-net_http (~> 1.0)
-      faraday-net_http_persistent (~> 1.1)
-      faraday-patron (~> 1.0)
-      faraday-rack (~> 1.0)
-      multipart-post (>= 1.2, < 3)
       ruby2_keywords (>= 0.0.4)
-    faraday-em_http (1.0.0)
+    faraday-net_http (2.0.1)
-    faraday-em_synchrony (1.0.0)
+    ffi (1.15.5)
-    faraday-excon (1.1.0)
-    faraday-httpclient (1.0.1)
-    faraday-net_http (1.0.1)
-    faraday-net_http_persistent (1.2.0)
-    faraday-patron (1.0.0)
-    faraday-rack (1.0.0)
-    ffi (1.15.4)
     fugit (1.5.2)
       et-orbi (~> 1.1, >= 1.1.8)
       raabro (~> 1.4)
-    globalid (0.5.2)
+    globalid (1.0.0)
       activesupport (>= 5.0)
     hashdiff (1.0.1)
-    i18n (1.8.11)
+    i18n (1.9.1)
       concurrent-ruby (~> 1.0)
-    jbuilder (2.11.3)
+    importmap-rails (1.0.2)
+      actionpack (>= 6.0.0)
+      railties (>= 6.0.0)
+    io-wait (0.2.1)
+    jbuilder (2.11.5)
+      actionview (>= 5.0.0)
       activesupport (>= 5.0.0)
     launchy (2.5.0)
       addressable (~> 2.7)
     letter_opener (1.7.0)
       launchy (~> 2.2)
-    letter_opener_web (1.4.1)
+    letter_opener_web (2.0.0)
-      actionmailer (>= 3.2)
+      actionmailer (>= 5.2)
-      letter_opener (~> 1.0)
+      letter_opener (~> 1.7)
-      railties (>= 3.2)
+      railties (>= 5.2)
-    listen (3.7.0)
+      rexml
+    listen (3.7.1)
       rb-fsevent (~> 0.10, >= 0.10.3)
       rb-inotify (~> 0.9, >= 0.9.10)
-    lockbox (0.6.6)
+    lockbox (0.6.8)
-    loofah (2.12.0)
+    loofah (2.14.0)
       crass (~> 1.0.2)
       nokogiri (>= 1.5.9)
     mail (2.7.1)
@@ -159,74 +160,85 @@ GEM
     matrix (0.4.2)
     method_source (1.0.0)
     mini_mime (1.1.2)
-    minitest (5.14.4)
+    minitest (5.15.0)
-    msgpack (1.4.2)
+    net-imap (0.2.3)
-    multipart-post (2.1.1)
+      digest
+      net-protocol
+      strscan
     net-ldap (0.17.0)
+    net-pop (0.1.1)
+      digest
+      net-protocol
+      timeout
+    net-protocol (0.1.2)
+      io-wait
+      timeout
+    net-smtp (0.3.1)
+      digest
+      net-protocol
+      timeout
     nio4r (2.5.8)
-    nokogiri (1.12.5-x86_64-linux)
+    nokogiri (1.13.1-x86_64-linux)
       racc (~> 1.4)
     orm_adapter (0.5.0)
     pg (1.2.3)
     public_suffix (4.0.6)
-    puma (4.3.10)
+    puma (4.3.11)
       nio4r (~> 2.0)
     raabro (1.4.0)
     racc (1.6.0)
     rack (2.2.3)
-    rack-proxy (0.7.0)
-      rack
     rack-test (1.1.0)
       rack (>= 1.0, < 3)
-    rails (6.0.4.1)
+    rails (7.0.2.2)
-      actioncable (= 6.0.4.1)
+      actioncable (= 7.0.2.2)
-      actionmailbox (= 6.0.4.1)
+      actionmailbox (= 7.0.2.2)
-      actionmailer (= 6.0.4.1)
+      actionmailer (= 7.0.2.2)
-      actionpack (= 6.0.4.1)
+      actionpack (= 7.0.2.2)
-      actiontext (= 6.0.4.1)
+      actiontext (= 7.0.2.2)
-      actionview (= 6.0.4.1)
+      actionview (= 7.0.2.2)
-      activejob (= 6.0.4.1)
+      activejob (= 7.0.2.2)
-      activemodel (= 6.0.4.1)
+      activemodel (= 7.0.2.2)
-      activerecord (= 6.0.4.1)
+      activerecord (= 7.0.2.2)
-      activestorage (= 6.0.4.1)
+      activestorage (= 7.0.2.2)
-      activesupport (= 6.0.4.1)
+      activesupport (= 7.0.2.2)
-      bundler (>= 1.3.0)
+      bundler (>= 1.15.0)
-      railties (= 6.0.4.1)
+      railties (= 7.0.2.2)
-      sprockets-rails (>= 2.0.0)
     rails-dom-testing (2.0.3)
       activesupport (>= 4.2.0)
       nokogiri (>= 1.6)
     rails-html-sanitizer (1.4.2)
       loofah (~> 2.3)
-    railties (6.0.4.1)
+    railties (7.0.2.2)
-      actionpack (= 6.0.4.1)
+      actionpack (= 7.0.2.2)
-      activesupport (= 6.0.4.1)
+      activesupport (= 7.0.2.2)
       method_source
-      rake (>= 0.8.7)
+      rake (>= 12.2)
-      thor (>= 0.20.3, < 2.0)
+      thor (~> 1.0)
+      zeitwerk (~> 2.5)
     rake (13.0.6)
-    rb-fsevent (0.11.0)
+    rb-fsevent (0.11.1)
     rb-inotify (0.10.1)
       ffi (~> 1.0)
-    redis (4.5.1)
+    redis (4.6.0)
-    regexp_parser (2.1.1)
+    regexp_parser (2.2.1)
     responders (3.0.1)
       actionpack (>= 5.0)
       railties (>= 5.0)
     rexml (3.2.5)
-    rqrcode (2.1.0)
+    rqrcode (2.1.1)
       chunky_png (~> 1.0)
       rqrcode_core (~> 1.0)
     rqrcode_core (1.2.0)
-    rspec-core (3.10.1)
+    rspec-core (3.11.0)
-      rspec-support (~> 3.10.0)
+      rspec-support (~> 3.11.0)
-    rspec-expectations (3.10.1)
+    rspec-expectations (3.11.0)
       diff-lcs (>= 1.2.0, < 2.0)
-      rspec-support (~> 3.10.0)
+      rspec-support (~> 3.11.0)
-    rspec-mocks (3.10.2)
+    rspec-mocks (3.11.0)
       diff-lcs (>= 1.2.0, < 2.0)
-      rspec-support (~> 3.10.0)
+      rspec-support (~> 3.11.0)
-    rspec-rails (5.0.2)
+    rspec-rails (5.1.0)
       actionpack (>= 5.2)
       activesupport (>= 5.2)
       railties (>= 5.2)
@@ -234,53 +246,45 @@ GEM
       rspec-expectations (~> 3.10)
       rspec-mocks (~> 3.10)
       rspec-support (~> 3.10)
-    rspec-support (3.10.3)
+    rspec-support (3.11.0)
     ruby2_keywords (0.0.5)
-    rufus-scheduler (3.8.0)
+    rufus-scheduler (3.8.1)
       fugit (~> 1.1, >= 1.1.6)
-    sass-rails (6.0.0)
+    sidekiq (6.4.1)
-      sassc-rails (~> 2.1, >= 2.1.1)
-    sassc (2.4.0)
-      ffi (~> 1.9)
-    sassc-rails (2.1.2)
-      railties (>= 4.0.0)
-      sassc (>= 2.0)
-      sprockets (> 3.0)
-      sprockets-rails
-      tilt
-    sidekiq (6.3.1)
       connection_pool (>= 2.2.2)
       rack (~> 2.0)
       redis (>= 4.2.0)
-    sidekiq-scheduler (3.1.0)
+    sidekiq-scheduler (3.1.1)
       e2mmap
       redis (>= 3, < 5)
       rufus-scheduler (~> 3.2)
       sidekiq (>= 3)
       thwait
       tilt (>= 1.4.0)
-    spring (2.1.1)
-    spring-watcher-listen (2.0.1)
-      listen (>= 2.7, < 4.0)
-      spring (>= 1.2, < 3.0)
     sprockets (4.0.2)
       concurrent-ruby (~> 1.0)
       rack (> 1, < 3)
-    sprockets-rails (3.4.0)
+    sprockets-rails (3.4.2)
       actionpack (>= 5.2)
       activesupport (>= 5.2)
       sprockets (>= 3.0.0)
     sqlite3 (1.4.2)
-    thor (1.1.0)
+    stimulus-rails (1.0.2)
-    thread_safe (0.3.6)
+      railties (>= 6.0.0)
+    strscan (3.0.1)
+    thor (1.2.1)
     thwait (0.2.0)
       e2mmap
     tilt (2.0.10)
-    turbolinks (5.2.1)
+    timeout (0.2.0)
-      turbolinks-source (~> 5.2)
+    turbo-rails (1.0.1)
-    turbolinks-source (5.2.0)
+      actionpack (>= 6.0.0)
-    tzinfo (1.2.9)
+      railties (>= 6.0.0)
-      thread_safe (~> 0.1)
+    tzinfo (2.0.4)
+      concurrent-ruby (~> 1.0)
+    view_component (2.49.0)
+      activesupport (>= 5.0.0, < 8.0)
+      method_source (~> 1.0)
     warden (1.2.9)
       rack (>= 2.0.9)
     web-console (4.2.0)
@@ -292,31 +296,26 @@ GEM
       addressable (>= 2.8.0)
       crack (>= 0.3.2)
       hashdiff (>= 0.4.0, < 2.0.0)
-    webpacker (4.3.0)
-      activesupport (>= 4.2)
-      rack-proxy (>= 0.6.1)
-      railties (>= 4.2)
     websocket-driver (0.7.5)
       websocket-extensions (>= 0.1.0)
     websocket-extensions (0.1.5)
     xpath (3.2.0)
       nokogiri (~> 1.8)
-    zeitwerk (2.5.1)
+    zeitwerk (2.5.4)
 
 PLATFORMS
-  ruby
   x86_64-linux
 
 DEPENDENCIES
-  bootsnap (>= 1.4.2)
-  byebug
   capybara
+  cssbundling-rails
   database_cleaner
   devise
   devise_ldap_authenticatable
   dotenv-rails
   factory_bot_rails
   faraday
+  importmap-rails
   jbuilder (~> 2.7)
   letter_opener
   letter_opener_web
@@ -325,21 +324,20 @@ DEPENDENCIES
   net-ldap
   pg (~> 1.2.3)
   puma (~> 4.1)
-  rails (~> 6.0.3, >= 6.0.3.4)
+  rails (~> 7.0.2)
   rqrcode (~> 2.0)
   rspec-rails
-  sass-rails (>= 6)
   sidekiq
   sidekiq-scheduler
-  spring
+  sprockets-rails
-  spring-watcher-listen (~> 2.0.0)
   sqlite3 (~> 1.4)
-  turbolinks (~> 5)
+  stimulus-rails
+  turbo-rails
   tzinfo-data
+  view_component
   warden
   web-console (>= 3.3.0)
   webmock
-  webpacker (~> 4.0)
 
 BUNDLED WITH
-   2.2.2
+   2.3.7

Procfile.dev

@@ -0,0 +1,2 @@
+web: bin/rails server -p 3000
+css: yarn build:css --watch

README.md

@@ -1,27 +1,10 @@
+[![Build Status](https://drone.kosmos.org/api/badges/kosmos/akkounts/status.svg)](https://drone.kosmos.org/kosmos/akkounts)
+
 # Akkounts
 
 This app allows Kosmos/LDAP users to manage their accounts, including
 credentials, invites, donations, etc..
 
-## Features
-
-* [x] Log in with existing LDAP account
-* [x] Reset account password by providing both username and email address
-* [x] Reset account password when logged in, via reset email
-* [x] Log in with admin permissions
-* [x] View LDAP users as admin
-* [x] Sign up for a new account via invitation
-* [x] List my donations
-* [x] Invite new users from your account
-* [x] Create new Lightning (lndhub) wallet for new users
-* [x] See Lightning wallet balance and setup code for Blue Wallet
-* [ ] Sign up for a new account by donating upfront
-* [ ] Sign up for a new account via proving contributions (via cryptographic signature)
-* [ ] ...
-
-_Planned features are not at all a complete or static list, of course.
-Suggestions and pull requests welcome!_
-
 ## Development
 
 ### Rails app
@@ -36,9 +19,9 @@ Setting up local database (SQLite):
     bundle exec rails db:create
     bundle exec rails db:migrate
 
-Running the dev server:
+Running the dev server and auto-building CSS files on change:
 
-    bundle exec rails server
+    bin/dev
 
 Running the background workers (requires Redis):
 
@@ -62,11 +45,6 @@ manual LDIF imports etc. (or provide a staging instance)
 
 * [Tailwind CSS](https://tailwindcss.com/)
 
-**Caveat:** if you only add Tailwind classes/directives to templates or
-helpers, but there's no change in the stylesheet files, then the new directives
-won't be compiled in production. In this case, count up the version comment at
-the top of `app/javascript/stylesheets/application.scss` to trigger compilation.
-
 ### Testing
 
 * [RSpec](https://rspec.info/documentation/)

app/assets/config/manifest.js

@@ -1,2 +1,3 @@
 //= link_tree ../images
-//= link_directory ../stylesheets .css
+//= link_tree ../../javascript .js
+//= link_tree ../builds

app/assets/stylesheets/_mediaqueries.scss

@@ -1,33 +0,0 @@
-$breakpoints-max: (
-  small: 600px,
-  medium: 960px,
-  large: 1280px
-);
-
-$breakpoints-min: (
-  small: 601px,
-  medium: 961px,
-  large: 1281px
-);
-
-@mixin media-max($screen-size) {
-  @if map-has-key($breakpoints-max, $screen-size) {
-    @media (max-width: map-get($breakpoints-max, $screen-size)) {
-      @content;
-    }
-  } @else {
-    // Debugging
-    @warn "'#{$screen-size}' has not been declared as a breakpoint."
-  }
-}
-
-@mixin media-min($screen-size) {
-  @if map-has-key($breakpoints-min, $screen-size) {
-    @media (min-width: map-get($breakpoints-min, $screen-size)) {
-      @content;
-    }
-  } @else {
-    // Debugging
-    @warn "'#{$screen-size}' has not been declared as a breakpoint."
-  }
-}

app/assets/stylesheets/_variables.scss

@@ -1,13 +0,0 @@
-$content-width: 800px;
-$content-max-width: 100%;
-
-$text-color-body: #222;
-$text-color-discreet: #888;
-
-$background-color-notice: #efffc4;
-$background-color-alert: #fff4c2;
-
-$color-blue: #0d4f99;
-$color-purple: #8955a0;
-$color-red-bright: #c00;
-$color-red-dark: #990c0e;

app/assets/stylesheets/admin.scss

@@ -1,25 +0,0 @@
-@import "variables";
-
-body#admin-panel {
-  #wrapper {
-    > header {
-      background: $color-red-bright;
-      background: linear-gradient(35deg, rgba(255,0,255,0.2) 0, rgba(153,12,14,0.9) 100%),
-                  url('/img/bg-1.jpg');
-    }
-  }
-
-  #main-nav {
-    ul {
-      grid-template-columns: repeat(4, 1fr);
-
-      li {
-        a {
-          &.active {
-            border-bottom: 2px solid $color-red-bright;
-          }
-        }
-      }
-    }
-  }
-}

app/assets/stylesheets/application.css

@@ -1,15 +0,0 @@
-/*
- * This is a manifest file that'll be compiled into application.css, which will include all the files
- * listed below.
- *
- * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
- * vendor/assets/stylesheets directory can be referenced here using a relative path.
- *
- * You're free to add application-wide styles to this file and they'll appear at the bottom of the
- * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
- * files in this directory. Styles in this file should be added after the last require_* statement.
- * It is generally better to create a new file per style scope.
- *
- *= require_tree .
- *= require_self
- */

app/assets/stylesheets/application.tailwind.css

@@ -0,0 +1,10 @@
+@import "tailwindcss/base";
+@import "tailwindcss/components";
+@import "tailwindcss/utilities";
+
+@import "components/base";
+@import "components/buttons";
+@import "components/forms";
+@import "components/links";
+@import "components/notifications";
+@import "components/tables";

app/assets/stylesheets/components/base.css

@@ -0,0 +1,42 @@
+@layer base {
+  body {
+    @apply leading-none bg-cover bg-fixed;
+    background-image: linear-gradient(35deg, rgba(255,0,255,0.2) 0, rgba(13,79,153,0.8) 100%), url('/img/bg-1.jpg');
+  }
+
+  body#admin {
+    background-image: linear-gradient(35deg, rgba(255,0,255,0.2) 0, rgba(153,12,14,0.9) 100%), url('/img/bg-1.jpg');
+  }
+
+  h1 {
+    @apply text-3xl uppercase;
+  }
+
+  h2 {
+    @apply text-2xl mb-8;
+  }
+
+  h3 {
+    @apply text-xl mb-6;
+  }
+
+  main section {
+    @apply pt-8 sm:pt-12;
+  }
+
+  main section:first-of-type {
+    @apply pt-0;
+  }
+
+  main p {
+    @apply mb-4 leading-6;
+  }
+
+  main ul {
+    @apply mb-6;
+  }
+
+  main ul li {
+    @apply leading-6;
+  }
+}

app/assets/stylesheets/components/buttons.css

@@ -1,6 +1,6 @@
 @layer components {
   .btn {
-    @apply font-semibold rounded-md leading-none cursor-pointer
+    @apply font-semibold rounded-md leading-none cursor-pointer text-center
            transition-colors duration-75 focus:outline-none focus:ring-4;
   }
 

app/assets/stylesheets/components/forms.css

@@ -0,0 +1,16 @@
+@layer components {
+  input[type=text], input[type=email], input[type=password],
+  input[type=number], select {
+    @apply mt-1 rounded-md bg-gray-100 focus:bg-white
+           border-transparent focus:border-transparent focus:ring-2
+           focus:ring-blue-600 focus:ring-opacity-75;
+  }
+
+  .field_with_errors {
+    @apply inline-block;
+  }
+
+  .error-msg {
+    @apply text-red-700;
+  }
+}

app/assets/stylesheets/components/notifications.css

@@ -0,0 +1,39 @@
+@layer components {
+  @keyframes notification-countdown {
+    from { width: 100%; }
+    to   { width: 0; }
+  }
+
+  .notification-enter {
+    @apply transform ease-out duration-300 transition;
+  }
+
+  .notification-enter-from {
+    @apply translate-y-2 opacity-0;
+  }
+
+  .notification-enter-to {
+    @apply translate-y-0 opacity-100;
+  }
+
+  @screen sm {
+    .notification-enter-from {
+      @apply translate-y-0 translate-x-2;
+    }
+    .notification-enter-to {
+      @apply translate-x-0;
+    }
+  }
+
+  .notification-leave {
+    @apply transition ease-in duration-100;
+  }
+
+  .notification-leave-from {
+    @apply opacity-100;
+  }
+
+  .notification-leave-to {
+    @apply opacity-0;
+  }
+}

app/assets/stylesheets/components/tables.css

@@ -0,0 +1,22 @@
+@layer components {
+  table {
+    @apply w-full;
+  }
+
+  table thead tr {
+    @apply text-left;
+  }
+
+  table th {
+    @apply pb-3.5 text-sm font-normal uppercase text-gray-500;
+  }
+
+  table th:not(:last-of-type),
+  table td:not(:last-of-type) {
+    @apply pr-2;
+  }
+
+  table td {
+    @apply py-2;
+  }
+}

app/assets/stylesheets/donations.scss

@@ -1,40 +0,0 @@
-ul.donations {
-  list-style: none;
-
-  li {
-    margin-bottom: 2rem;
-    display: grid;
-    grid-row-gap: 0.5rem;
-    grid-column-gap: 2rem;
-    grid-template-columns: 1fr 1fr;
-    grid-template-areas:
-      "date amount-btc"
-      "public-name amounts-fiat";
-
-    h3 {
-      grid-area: "date";
-      margin-bottom: 0;
-    }
-
-    p {
-      margin-bottom: 0;
-
-      &.amount-btc {
-        grid-area: amount-btc;
-        text-align: right;
-        font-family: monospace;
-        font-size: 1.25rem;
-      }
-      &.amounts-fiat {
-        grid-area: amounts-fiat;
-        text-align: right;
-        font-family: monospace;
-        font-size: 0.85rem;
-        color: #888;
-      }
-      &.public-name {
-        grid-area: public-name;
-      }
-    }
-  }
-}

app/assets/stylesheets/layout.scss

@@ -1,149 +0,0 @@
-@import "variables";
-@import "mediaqueries";
-
-#wrapper {
-  width: 100%;
-  text-align: center;
-
-  > header {
-    margin: 0 auto;
-    padding: 4rem 0;
-    text-align: center;
-    background: linear-gradient(35deg, rgba(255,0,255,0.2) 0, rgba(13,79,153,0.8) 100%),
-                url('/img/bg-1.jpg');
-    background-size: cover;
-
-    @include media-max(small) {
-      padding: 3rem 0;
-    }
-
-    h1 {
-      color: #fff;
-
-      span.project-name {
-        display: none;
-      }
-
-      span.icon {
-        svg {
-          display: inline-block;
-          height: 1.875rem;
-          vertical-align: top;
-          width: auto;
-        }
-
-        margin-right: 0.5rem;
-      }
-    }
-
-    p.current-user {
-      color: rgba(255,255,255,0.6);
-
-      @include media-max(small) {
-        font-size: 0.85rem;
-      }
-    }
-
-    a {
-      color: rgba(255,255,255,0.6);
-      transition: color 0.1s linear;
-
-      &:hover, &:active {
-        color: #fff;
-      }
-    }
-  }
-}
-
-.flash-msg {
-  width: 100%;
-  text-align: center;
-  padding: 2rem 0;
-
-  &.notice {
-    background: $background-color-notice;
-  }
-
-  &.alert {
-    background: $background-color-alert;
-  }
-}
-
-main {
-  width: $content-width;
-  max-width: $content-max-width;
-  margin: 4rem auto 6rem auto;
-  text-align: left;
-
-  @include media-max(medium) {
-    max-width: 90%;
-  }
-
-  @include media-max(small) {
-    margin: 3rem auto;
-  }
-
-  p {
-    line-height: 1.5rem;
-    margin-bottom: 1rem;
-
-    &.notice {
-      text-align: center;
-    }
-  }
-
-  ul {
-    margin-bottom: 1.5rem;
-
-    li {
-      line-height: 1.5rem;
-    }
-  }
-
-  section {
-    margin-bottom: 3rem;
-
-    h2 {
-      display: none;
-    }
-  }
-
-  table {
-    width: 100%;
-
-    th, td {
-      &.hide-small {
-        @include media-max(small) {
-          display: none;
-        }
-      }
-    }
-
-    th {
-      color: $text-color-discreet;
-      font-weight: normal;
-      text-transform: uppercase;
-      font-size: 0.85rem;
-      padding-bottom: 0.825rem;
-    }
-
-    td {
-      padding-top: 0.5rem;
-      padding-bottom: 0.5rem;
-    }
-  }
-}
-
-.grid {
-  display: grid;
-
-  &.services {
-    grid-template-columns: 1fr 1fr 1fr;
-    grid-row-gap: 1rem;
-    grid-column-gap: 2rem;
-
-    @include media-max(small) {
-      grid-template-columns: 1fr;
-    }
-  }
-}

app/assets/stylesheets/main_nav.scss

@@ -1,54 +0,0 @@
-@import "variables";
-@import "mediaqueries";
-
-#main-nav {
-  width: 100%;
-  text-align: center;
-  background-color: #efefef;
-
-  .wrapper {
-    width: $content-width;
-    max-width: $content-max-width;
-    margin: 0 auto;
-  }
-
-  ul {
-    @include media-max(large) {
-      display: grid;
-      grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
-    }
-
-    li {
-      @include media-min(large) {
-        display: inline;
-      }
-
-      @include media-max(large) {
-        display: block;
-      }
-
-      a {
-        display: inline-block;
-        padding: 1.5rem 2rem;
-        text-decoration: none;
-        color: $text-color-discreet;
-
-        @include media-max(large) {
-          display: block;
-          text-align: center;
-          padding-left: 0;
-          padding-right: 0;
-        }
-
-        @include media-max(small) {
-          font-size: 0.85rem;
-        }
-
-        &.active {
-          color: $text-color-body;
-          border-bottom: 2px solid #4ea2df;
-        }
-      }
-    }
-  }
-}

app/components/header_compact_component.html.erb

@@ -0,0 +1,7 @@
+<header class="py-10">
+  <div class="max-w-xl mx-auto px-4 sm:px-6 lg:px-8">
+    <h1 class="text-3xl font-bold text-white text-center">
+      <%= @title %>
+    </h1>
+  </div>
+</header>

app/components/header_compact_component.rb

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

app/components/header_component.html.erb

@@ -0,0 +1,7 @@
+<header class="py-10">
+  <div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
+    <h1 class="text-3xl font-bold text-white">
+      <%= @title %>
+    </h1>
+  </div>
+</header>

app/components/header_component.rb

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

app/components/main_compact_component.html.erb

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

app/components/main_compact_component.rb

@@ -0,0 +1,5 @@
+# frozen_string_literal: true
+
+class MainCompactComponent < ViewComponent::Base
+
+end

app/components/main_simple_component.html.erb

@@ -0,0 +1,5 @@
+<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 px-6 sm:px-12 py-8 sm:py-12">
+    <%= content %>
+  </div>
+</main>

app/components/main_simple_component.rb

@@ -0,0 +1,5 @@
+# frozen_string_literal: true
+
+class MainSimpleComponent < ViewComponent::Base
+
+end

app/components/main_with_sidenav_component.html.erb

@@ -0,0 +1,15 @@
+<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="divide-y divide-gray-200 lg:grid lg:grid-cols-12 lg:divide-y-0 lg:divide-x">
+      <aside class="py-6 sm:py-8 lg:col-span-3">
+        <nav class="space-y-1">
+          <%= render partial: @sidenav_partial %>
+        </nav>
+      </aside>
+      <div class="lg:col-span-9 px-6 sm:px-12 py-8 sm:pt-10 sm:pb-12">
+        <%= content %>
+      </div>
+    </div>
+  </div>
+</main>
+

app/components/main_with_sidenav_component.rb

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

app/components/notification_component.html.erb

@@ -0,0 +1,49 @@
+<div class="flash-msg <%= @type %> hidden max-w-sm w-full bg-white shadow-lg rounded-lg pointer-events-auto mt-4"
+     data-turbo="false"
+     data-notification-action-url="<%= @data.dig(:action, :url) %>"
+     data-notification-action-method="<%= @data.dig(:action, :method) %>"
+     data-notification-timeout="<%= @data[:timeout] %>"
+     data-controller="notification">
+  <div class="rounded-lg shadow-xs overflow-hidden">
+    <div class="p-4">
+      <div class="flex items-start">
+        <div class="flex-shrink-0">
+          <span class="inline-block h-6 w-6 <%= @icon_color_class %>">
+            <%= render "icons/#{@icon_name}" %>
+          </span>
+        </div>
+        <div class="ml-3 w-0 flex-1 pt-0.5">
+          <p class="text-sm leading-5 font-medium text-gray-900">
+            <%= @data[:title] %>
+          </p>
+          <% if @data[:body].present? %>
+            <p class="mt-1 text-sm leading-5 text-gray-500">
+              <%= @data[:body] %>
+            </p>
+          <% end %>
+          <% if @data[:action].present? %>
+            <div class="mt-2" data-notification-target="buttons">
+              <a data-turbo-frame="_top" <% if @data.dig(:action, :method) == 'get' %> href="<%= @data.dig(:action, :url) %>" <% else %> href="#" data-action="notification#run" <% end %> class="text-sm leading-5 font-medium text-indigo-600 hover:text-indigo-500 focus:outline-none focus:underline transition ease-in-out duration-150">
+                <%= @data.dig(:action, :name) %>
+              </a>
+              <button data-action="notification#close" class="ml-6 text-sm leading-5 font-medium text-gray-700 hover:text-gray-500 focus:outline-none focus:underline transition ease-in-out duration-150">
+                <%= t('.dismiss') %>
+              </button>
+            </div>
+          <% end %>
+        </div>
+        <div class="ml-4 flex-shrink-0 flex">
+          <button class="inline-flex text-gray-400 focus:outline-none focus:text-gray-500 transition ease-in-out duration-150" data-action="notification#close">
+            <!-- Heroicon name: solid/x -->
+            <svg class="h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+              <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
+            </svg>
+          </button>
+        </div>
+      </div>
+    </div>
+    <% if @data[:countdown] %>
+      <div class="bg-indigo-600 rounded-lg h-1 w-0" data-notification-target="countdown"></div>
+    <% end %>
+  </div>
+</div>

app/components/notification_component.rb

@@ -0,0 +1,54 @@
+# frozen_string_literal: true
+
+# @param type [String] Classic notification type `error`, `alert` and `info` + custom `success`
+# @param data [String, Hash] `String` for backward compatibility,
+#   `Hash` for the new functionality `{title: '', body: '', timeout: 5, countdown: false, action: { url: '', method: '', name: ''}}`.
+#   The `title` attribute for `Hash` is mandatory.
+class NotificationComponent < ViewComponent::Base
+  def initialize(type:, data:)
+    @type = type
+    @data = prepare_data(data)
+    @icon_name = icon_name
+    @icon_color_class = icon_color_class
+
+    @data[:timeout] ||= 5
+    @data[:action][:method] ||= "get" if @data[:action]
+  end
+
+  private
+
+  def prepare_data(data)
+    case data
+    when Hash
+      data
+    else
+      { title: data }
+    end
+  end
+
+  def icon_name
+    case @type
+    when 'success'
+      'check-circle'
+    when 'error'
+      'alert-octagon'
+    when 'alert'
+      'alert-octagon'
+    else
+      'info'
+    end
+  end
+
+  def icon_color_class
+    case @type
+    when 'success'
+      'text-emerald-500'
+    when 'error'
+      'text-rose-600'
+    when 'alert'
+      'text-rose-600'
+    else
+      'text-gray-400'
+    end
+  end
+end

app/components/sidenav_link_component.html.erb

@@ -0,0 +1,4 @@
+<%= link_to @path, class: @link_class do %>
+  <%= render partial: "icons/#{@icon}", locals: { custom_class: @icon_class } %>
+  <span class="truncate"><%= @name %></span>
+<% end %>

app/components/sidenav_link_component.rb

@@ -0,0 +1,33 @@
+# frozen_string_literal: true
+
+class SidenavLinkComponent < ViewComponent::Base
+  def initialize(name:, path:, icon:, active: false, disabled: false)
+    @name = name
+    @path = path
+    @icon = icon
+    @active = active
+    @disabled = disabled
+    @link_class = class_names_link(path)
+    @icon_class = class_names_icon(path)
+  end
+
+  def class_names_link(path)
+    if @active
+      "bg-teal-50 border-teal-500 text-teal-700 hover:bg-teal-50 hover:text-teal-700 group border-l-4 px-4 py-2 flex items-center text-base font-medium" 
+    elsif @disabled
+      "border-transparent text-gray-400 hover:bg-gray-50 group border-l-4 px-4 py-2 flex items-center text-base font-medium"
+    else
+      "border-transparent text-gray-900 hover:bg-gray-50 hover:text-gray-900 group border-l-4 px-4 py-2 flex items-center text-base font-medium"
+    end
+  end
+
+  def class_names_icon(path)
+    if @active
+      "text-teal-500 group-hover:text-teal-500 flex-shrink-0 -ml-1 mr-3 h-6 w-6"
+    elsif @disabled
+      "text-gray-300 group-hover:text-gray-300 flex-shrink-0 -ml-1 mr-3 h-6 w-6"
+    else
+      "text-gray-400 group-hover:text-gray-500 flex-shrink-0 -ml-1 mr-3 h-6 w-6"
+    end
+  end
+end

app/components/wallet_summary_component.html.erb

@@ -0,0 +1,18 @@
+<section class="w-full grid grid-cols-1 md:grid-cols-12 md:mb-0">
+  <div class="md:col-span-8">
+    <p>
+      Send and receive sats via the Bitcoin Lightning Network.
+    </p>
+  </div>
+  <div class="md:col-span-4 mt-4 md:mt-0">
+    <p class="font-mono md:text-right mb-0 p-4 border border-gray-300 rounded-lg overflow-hidden">
+    <% if @balance %>
+      <span class="text-xl"><%= number_with_delimiter @balance %> sats</span><br>
+      <span class="text-sm text-gray-500">Available balance</span>
+    <% else %>
+      <span class="text-xl">n/a sats</span><br>
+      <span class="text-sm text-gray-500">Balance unavailable</span>
+    <% end %>
+    </p>
+  </div>
+</section>

app/components/wallet_summary_component.rb

@@ -0,0 +1,8 @@
+# frozen_string_literal: true
+
+class WalletSummaryComponent < ViewComponent::Base
+  def initialize(balance:)
+    @balance = balance
+  end
+
+end

app/controllers/admin/base_controller.rb

@@ -2,7 +2,10 @@ class Admin::BaseController < ApplicationController
 
   before_action :authenticate_user!
   before_action :authorize_admin
+  before_action :set_context
 
-  layout "admin"
+  def set_context
+    @context = :admin
+  end
 
 end

app/controllers/admin/ldap_users_controller.rb

@@ -4,11 +4,9 @@ class Admin::LdapUsersController < Admin::BaseController
   def index
     attributes = %w{dn cn uid mail admin}
     filter = Net::LDAP::Filter.eq("uid", "*")
-    if params[:ou]
+
-      treebase = "ou=#{params[:ou]},cn=users,dc=kosmos,dc=org"
+    @ou = params[:ou] || "kosmos.org"
-    else
+    treebase = "ou=#{@ou},cn=users,dc=kosmos,dc=org"
-      treebase = "ou=kosmos.org,cn=users,dc=kosmos,dc=org"
-    end
 
     entries = ldap_client.search(base: treebase, filter: filter, attributes: attributes)
     entries.sort_by! { |e| e.cn[0] }

app/controllers/invitations_controller.rb

@@ -2,8 +2,6 @@ class InvitationsController < ApplicationController
   before_action :require_user_signed_in, except: ["show"]
   before_action :require_user_signed_out, only: ["show"]
 
-  layout "signup", only: ["show"]
-
   # GET /invitations
   def index
     @invitations_unused = current_user.invitations.unused

app/controllers/lnurlpay_controller.rb

@@ -1,34 +1,51 @@
 class LnurlpayController < ApplicationController
   before_action :find_user_by_address
 
+  MIN_SATS = 100
+  MAX_SATS = 1_000_000
+  MAX_COMMENT_CHARS = 100
+
   def index
     render json: {
       status: "OK",
       callback: "https://accounts.kosmos.org/lnurlpay/#{@user.address}/invoice",
       tag: "payRequest",
-      maxSendable: 1000000,
+      maxSendable: MAX_SATS * 1000, # msat
-      minSendable: 1000,
+      minSendable: MIN_SATS * 1000, # msat
       metadata: metadata(@user.address),
-      commentAllowed: 0
+      commentAllowed: MAX_COMMENT_CHARS
     }
   end
 
   def invoice
-    amount = params[:amount].to_i # msats
+    amount = params[:amount].to_i / 1000 # msats
     address = params[:address]
+    comment = params[:comment] || ""
 
-    validate_amount(amount)
+    if !valid_amount?(amount)
+      render json: { status: "ERROR", reason: "Invalid amount" }
+      return
+    end
+
+    if !valid_comment?(comment)
+      render json: { status: "ERROR", reason: "Comment too long" }
+      return
+    end
+
+    memo = "Sats for #{address}"
+    memo = "#{memo}: \"#{comment}\"" if comment.present?
 
     payment_request = @user.ln_create_invoice({
-      amount: amount / 1000, # we create invoices in sats
+      amount: amount, # we create invoices in sats
-      description_hash: Digest::SHA2.hexdigest(metadata(address))
+      memo: memo,
+      description_hash: Digest::SHA2.hexdigest(metadata(address)),
     })
 
     render json: {
       status: "OK",
       successAction: {
         tag: "message",
-        message: "Payment received. Thanks!"
+        message: "Sats received. Thank you!"
       },
       routes: [],
       pr: payment_request
@@ -44,14 +61,15 @@ class LnurlpayController < ApplicationController
   end
 
   def metadata(address)
-    "[[\"text/identifier\", \"#{address}\"], [\"text/plain\", \"Sats for #{address}\"]]"
+    "[[\"text/identifier\", \"#{address}\"], [\"text/plain\", \"Send sats, receive thanks.\"]]"
   end
 
-  def validate_amount(amount)
+  def valid_amount?(amount_in_sats)
-    if amount > 1000000 || amount < 1000
+    amount_in_sats <= MAX_SATS && amount_in_sats >= MIN_SATS
-      render json: { status: "ERROR", reason: "Invalid amount" }
-      return
   end
+
+  def valid_comment?(comment)
+    comment.length <= MAX_COMMENT_CHARS
   end
 
 end

app/controllers/signup_controller.rb

@@ -3,8 +3,7 @@ class SignupController < ApplicationController
   before_action :require_invitation
   before_action :set_invitation
   before_action :set_new_user, only: ["steps", "validate"]
-
+  before_action :set_context
-  layout "signup"
 
   def index
     @invited_by_name = @invitation.user.address
@@ -105,4 +104,8 @@ class SignupController < ApplicationController
       invitation: @invitation
     )
   end
+
+  def set_context
+    @context = :signup
+  end
 end

app/controllers/wallet_controller.rb

@@ -3,10 +3,10 @@ require "rqrcode"
 class WalletController < ApplicationController
   before_action :require_user_signed_in
   before_action :authenticate_with_lndhub
+  before_action :set_current_section
+  before_action :fetch_balance
 
   def index
-    @current_section = :wallet
-
     @wallet_url = "lndhub://#{current_user.ln_login}:#{current_user.ln_password}@#{ENV['LNDHUB_PUBLIC_URL']}"
 
     qrcode = RQRCode::QRCode.new(@wallet_url)
@@ -15,10 +15,15 @@ class WalletController < ApplicationController
       shape_rendering: "crispEdges",
       module_size: 6,
       standalone: true,
-      use_path: true
+      use_path: true,
+      svg_attributes: {
+        class: 'inline-block'
+      }
     )
+  end
 
-    @balance = fetch_balance rescue nil
+  def transactions
+    @transactions = fetch_transactions
   end
 
   private
@@ -36,9 +41,41 @@ class WalletController < ApplicationController
     # TODO add exception tracking
   end
 
+  def set_current_section
+    @current_section = :wallet
+  end
+
   def fetch_balance
     lndhub = Lndhub.new
     data = lndhub.balance @ln_auth_token
-    data["BTC"]["AvailableBalance"]
+    @balance = data["BTC"]["AvailableBalance"] rescue nil
+  end
+
+  def fetch_transactions
+    lndhub = Lndhub.new
+    txs = lndhub.gettxs @ln_auth_token
+    invoices = lndhub.getuserinvoices(@ln_auth_token).select{|i| i["ispaid"]}
+
+    process_transactions(txs + invoices)
+  end
+
+  def process_transactions(txs)
+    txs.collect do |tx|
+      if tx["type"] == "bitcoind_tx"
+        tx["amount_sats"] = (tx["amount"] * 100000000).to_i
+        tx["datetime"] = Time.at(tx["time"].to_i)
+        tx["title"] = "Received"
+        tx["description"] = "On-chain topup"
+        tx["received"] = true
+      else
+        tx["amount_sats"] = tx["value"] || tx["amt"]
+        tx["datetime"] = Time.at(tx["timestamp"].to_i)
+        tx["title"] = tx["type"] == "paid_invoice" ? "Sent" : "Received"
+        tx["description"] = tx["memo"] || tx["description"]
+        tx["received"] = tx["type"] == "user_invoice"
+      end
+    end
+
+    txs.sort{ |a,b| b["datetime"] <=> a["datetime"] }
   end
 end

app/helpers/application_helper.rb

@@ -2,4 +2,13 @@ module ApplicationHelper
   def sats_to_btc(sats)
     sats.to_f / 100000000
   end
+
+  def main_nav_class(current_section, link_to_section)
+    if current_section == link_to_section
+      "bg-gray-900/50 text-white px-3 py-2 rounded-md font-medium text-base md:text-sm block md:inline-block"
+    else
+      "text-gray-300 hover:bg-gray-900/30 hover:text-white active:bg-gray-900/30 active:text-white px-3 py-2 rounded-md font-medium text-base md:text-sm block md:inline-block"
+    end
+  end
 end
+

app/javascript/application.js

@@ -0,0 +1,3 @@
+// Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
+import "@hotwired/turbo-rails"
+import "controllers"

app/javascript/channels/consumer.js

@@ -1,6 +0,0 @@
-// Action Cable provides the framework to deal with WebSockets in Rails.
-// You can generate new channels where WebSocket features live using the `rails generate channel` command.
-
-import { createConsumer } from "@rails/actioncable"
-
-export default createConsumer()

app/javascript/channels/index.js

@@ -1,5 +0,0 @@
-// Load all the channels within this directory and all subdirectories.
-// Channel files must be named *_channel.js.
-
-const channels = require.context('.', true, /_channel\.js$/)
-channels.keys().forEach(channels)

app/javascript/controllers/application.js

@@ -0,0 +1,9 @@
+import { Application } from "@hotwired/stimulus"
+
+const application = Application.start()
+
+// Configure Stimulus development experience
+application.debug = false
+window.Stimulus   = application
+
+export { application }

app/javascript/controllers/index.js

@@ -0,0 +1,11 @@
+// Import and register all your controllers from the importmap under controllers/*
+
+import { application } from "controllers/application"
+
+// Eager load all controllers defined in the import map under controllers/**/*_controller
+import { eagerLoadControllersFrom } from "@hotwired/stimulus-loading"
+eagerLoadControllersFrom("controllers", application)
+
+// Lazy load controllers as they appear in the DOM (remember not to preload controllers in import map!)
+// import { lazyLoadControllersFrom } from "@hotwired/stimulus-loading"
+// lazyLoadControllersFrom("controllers", application)

app/javascript/controllers/notification_controller.js

@@ -0,0 +1,110 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["buttons", "countdown"]
+
+  connect() {
+    const timeoutSeconds = parseInt(this.data.get("timeout"));
+
+    setTimeout(() => {
+      this.element.classList.remove('hidden');
+      this.element.classList.add('notification-enter', 'notification-enter-from');
+
+      // Trigger transition
+      setTimeout(() => {
+        this.element.classList.add('notification-enter-to');
+      }, 100);
+
+      // Trigger countdown
+      if (this.hasCountdownTarget) {
+        this.countdownTarget.style.animation = 'notification-countdown linear ' + timeoutSeconds + 's';
+      }
+
+    }, 500);
+    this.timeoutId = setTimeout(() => {
+      this.close();
+    }, timeoutSeconds * 1000 + 500);
+  }
+
+  run(e) {
+    e.preventDefault();
+    this.stop();
+    let _this = this;
+    this.buttonsTarget.innerHTML = '<span class="text-sm leading-5 font-medium text-grey-700">Processing...</span>';
+
+    // Call the action
+    fetch(this.data.get("action-url"), {
+      method: this.data.get("action-method").toUpperCase(),
+      dataType: 'script',
+      credentials: "include",
+      headers: {
+        "X-CSRF-Token": this.csrfToken
+      },
+    })
+      .then(response => {
+        if (!response.ok) {
+          throw Error(response.statusText);
+        }
+        return response;
+      })
+      .then(response => response.json())
+      .then(data => {
+        // Set new content
+        _this.buttonsTarget.innerHTML = '<span class="text-sm leading-5 font-medium text-green-700">' + data.message + '</span>';
+
+        // Remove hidden class and display the record
+        if (data.inline) {
+          document.getElementById(data.dom_id).classList.toggle('hidden');
+        }
+
+        // Close
+        setTimeout(() => {
+          if (data.inline) {
+            // Just close the notification
+            _this.close();
+          } else {
+            // Reload the page using Turbo
+            window.Turbo.visit(window.location.toString(), {action: 'replace'})
+          }
+        }, 1000);
+      })
+      .catch(error => {
+        console.log(error);
+        _this.buttonsTarget.innerHTML = '<span class="text-sm leading-5 font-medium text-red-700">Error!</span>';
+        setTimeout(() => {
+          _this.close();
+        }, 1000);
+      });
+  }
+
+  stop() {
+    clearTimeout(this.timeoutId)
+    this.timeoutId = null
+  }
+
+  continue() {
+    this.timeoutId = setTimeout(() => {
+      this.close();
+    }, parseInt(this.data.get("timeout")));
+  }
+
+  close() {
+    this.element.classList.remove('notification-enter', 'notification-enter-from', 'notification-enter-to');
+    this.element.classList.add('notification-leave', 'notification-leave-from')
+
+    // Trigger transition
+    setTimeout(() => {
+      this.element.classList.add('notification-leave-to');
+    }, 100);
+
+    // Remove element after transition
+    setTimeout(() => {
+      this.element.remove();
+    }, 300);
+  }
+
+  get csrfToken() {
+    const element = document.head.querySelector('meta[name="csrf-token"]')
+    return element.getAttribute("content")
+  }
+}

app/javascript/controllers/topbar_controller.js

@@ -0,0 +1,31 @@
+import { Controller } from "@hotwired/stimulus"
+
+function show (element) {
+  element.classList.add('block');
+  element.classList.remove('hidden');
+}
+
+function  hide (element) {
+  element.classList.remove('block');
+  element.classList.add('hidden');
+}
+
+export default class extends Controller {
+  static targets = [ 'mobileMenu', 'iconMobileMenuOpen', 'iconMobileMenuClose' ];
+
+  connect() {
+    this.mobileMenuTarget.classList.add('hidden');
+  }
+
+  toggleMobileNav() {
+    if (this.mobileMenuTarget.classList.contains('hidden')) {
+      show(this.mobileMenuTarget);
+      show(this.iconMobileMenuCloseTarget);
+      hide(this.iconMobileMenuOpenTarget);
+    } else {
+      hide(this.mobileMenuTarget);
+      hide(this.iconMobileMenuCloseTarget);
+      show(this.iconMobileMenuOpenTarget);
+    }
+  }
+}

app/javascript/packs/application.js

@@ -1,16 +0,0 @@
-// This file is automatically compiled by Webpack, along with any other files
-// present in this directory. You're encouraged to place your actual application logic in
-// a relevant structure within app/javascript and only use these pack files to reference
-// that code so it'll be compiled.
-
-require("@rails/ujs").start()
-require("turbolinks").start()
-require("channels")
-
-import "stylesheets/application"
-// Uncomment to copy all static images under ../images to the output folder and reference
-// them with the image_pack_tag helper in views (e.g <%= image_pack_tag 'rails.png' %>)
-// or the `imagePath` JavaScript helper below.
-//
-// const images = require.context('../images', true)
-// const imagePath = (name) => images(name, true)

app/javascript/stylesheets/application.scss

@@ -1,9 +0,0 @@
-// version 3
-@import "tailwindcss/base";
-@import "tailwindcss/components";
-@import "tailwindcss/utilities";
-
-@import "base";
-@import "buttons";
-@import "forms";
-@import "links";

app/javascript/stylesheets/base.scss

@@ -1,21 +0,0 @@
-@layer base {
-  body {
-    line-height: 1;
-  }
-
-  h1, h2, h3 {
-    @apply font-light;
-  }
-
-  h1 {
-    @apply text-3xl uppercase;
-  }
-
-  h2 {
-    @apply text-2xl mb-8;
-  }
-
-  h3 {
-    @apply text-xl mb-6;
-  }
-}

app/javascript/stylesheets/forms.scss

@@ -1,17 +0,0 @@
-@layer components {
-  form {
-    input[type=text], input[type=email], input[type=password],
-    input[type=number], select {
-      @apply mt-1 rounded-md bg-gray-100 focus:bg-white
-             border-transparent focus:border-gray-500 focus:ring-0;
-    }
-
-    .field_with_errors {
-      @apply inline-block;
-    }
-
-    .error-msg {
-      @apply text-red-700;
-    }
-  }
-}

app/javascript/stylesheets/tailwind.config.js

@@ -1,26 +0,0 @@
-const defaultTheme = require('tailwindcss/defaultTheme')
-
-module.exports = {
-  purge: {
-    layers: ['base', 'components', 'utilities'],
-    content: [
-      "./app/**/*.html.erb",
-      "./app/helpers/**/*.rb",
-      "./app/javascript/**/*.js"
-    ]
-  },
-  darkMode: false, // or 'media' or 'class'
-  theme: {
-    extend: {
-      fontFamily: {
-        sans: ['Open Sans', 'sans-serif']
-      }
-    },
-  },
-  variants: {
-    extend: {},
-  },
-  plugins: [
-    require('@tailwindcss/forms')
-  ],
-}

app/models/user.rb

@@ -10,8 +10,8 @@ class User < ApplicationRecord
   validates_uniqueness_of :email
   validates :email, email: true
 
-  encrypts :ln_login
+  lockbox_encrypts :ln_login
-  encrypts :ln_password
+  lockbox_encrypts :ln_password
 
   # Include default devise modules. Others available are:
   # :confirmable, :lockable, :timeoutable, :trackable and :omniauthable

app/services/create_account.rb

@@ -10,7 +10,7 @@ class CreateAccount < ApplicationService
   def call
     user = create_user_in_database
     add_ldap_document
-    create_lndhub_wallet
+    create_lndhub_wallet(user)
 
     if @invitation.present?
       update_invitation(user.id)
@@ -46,7 +46,21 @@ class CreateAccount < ApplicationService
     ExchangeXmppContactsJob.perform_later(@invitation.user, @username, @domain)
   end
 
-  def create_lndhub_wallet
+  def create_lndhub_wallet(user)
     CreateLndhubWalletJob.perform_later(user)
   end
+
+  def exchange_xmpp_contacts_between_inviter_and_invitee
+    ejabberd = EjabberdApiClient.new
+
+    EjabberdApiClient.add_roster_item({
+      "localuser": @username,
+      "localhost": @domain,
+      "user": @inviter.cn,
+      "host": @inviter.ou,
+      "nick": @username,
+      "group": "Friends",
+      "subs": "both"
+    })
+  end
 end

app/services/lndhub.rb

@@ -46,9 +46,18 @@ class Lndhub
     get "balance", user_token || auth_token
   end
 
+  def gettxs(user_token)
+    get "gettxs", user_token || auth_token
+  end
+
+  def getuserinvoices(user_token)
+    get "getuserinvoices", user_token || auth_token
+  end
+
   def addinvoice(payload)
     invoice = post "addinvoice", {
       amt: payload[:amount],
+      memo: payload[:memo],
       description_hash: payload[:description_hash]
     }
 

app/views/admin/dashboard/index.html.erb

@@ -1,3 +1,7 @@
-<p class="text-center">
+<%= render HeaderComponent.new(title: "Admin Panel") %>
+
+<%= render MainSimpleComponent.new do %>
+  <p class="text-center">
     With great power comes great responsibility.
-</p>
+  </p>
+<% end %>

app/views/admin/donations/edit.html.erb

@@ -1,8 +1,12 @@
-<h2>Editing Donation</h2>
+<%= render HeaderComponent.new(title: "Donations") %>
 
-<%= render 'form', donation: @donation, url: admin_donation_path(@donation) %>
+<%= render MainSimpleComponent.new do %>
+  <h2>Editing Donation</h2>
 
-<p class="mt-8">
+  <%= render 'form', donation: @donation, url: admin_donation_path(@donation) %>
+
+  <p class="mt-8">
     <%= link_to 'Show', admin_donation_path(@donation), class: 'ks-text-link' %> |
     <%= link_to 'Back', admin_donations_path, class: 'ks-text-link' %>
-<p>
+  <p>
+<% end %>

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

@@ -1,14 +1,15 @@
-<h2>Donations</h2>
+<%= render HeaderComponent.new(title: "Donations") %>
 
-<% if @donations.any? %>
+<%= render MainSimpleComponent.new do %>
+  <% if @donations.any? %>
     <table>
       <thead>
         <tr>
           <th>User</th>
-        <th>Amount BTC</th>
+          <th class="text-right">Amount BTC</th>
-        <th>in EUR</th>
+          <th class="text-right">in EUR</th>
-        <th>in USD</th>
+          <th class="text-right">in USD</th>
-        <th>Public name</th>
+          <th class="pl-2">Public name</th>
           <th>Date</th>
           <th colspan="3"></th>
         </tr>
@@ -17,25 +18,27 @@
       <tbody>
         <% @donations.each do |donation| %>
           <tr>
-          <td><%= donation.user.cn %></td>
+            <td><%= donation.user.address %></td>
-          <td><%= sats_to_btc donation.amount_sats %> BTC</td>
+            <td class="text-right"><%= sats_to_btc donation.amount_sats %></td>
-          <td><%= number_to_currency donation.amount_eur / 100, unit: "" %></td>
+            <td class="text-right"><% if donation.amount_eur.present? %><%= number_to_currency donation.amount_eur / 100, unit: "" %><% end %></td>
-          <td><%= number_to_currency donation.amount_usd / 100, unit: "" %></td>
+            <td class="text-right"><% if donation.amount_usd.present? %><%= number_to_currency donation.amount_usd / 100, unit: "" %><% end %></td>
-          <td><%= donation.public_name %></td>
+            <td class="pl-2"><%= donation.public_name %></td>
             <td><%= donation.paid_at ? donation.paid_at.strftime("%Y-%m-%d") : "" %></td>
             <td><%= link_to 'Show', admin_donation_path(donation), class: 'btn btn-sm btn-gray' %></td>
             <td><%= link_to 'Edit', edit_admin_donation_path(donation), class: 'btn btn-sm btn-gray' %></td>
-          <td><%= link_to 'Destroy', admin_donation_path(donation), class: 'btn btn-sm btn-red', method: :delete, data: { confirm: 'Are you sure?' } %></td>
+            <td><%= link_to 'Destroy', admin_donation_path(donation), class: 'btn btn-sm btn-red',
+                      data: { turbo_method: :delete, turbo_confirm: 'Are you sure?' } %></td>
           </tr>
         <% end %>
       </tbody>
     </table>
-<% else %>
+  <% else %>
     <p>
       No donations yet.
     </p>
-<% end %>
+  <% end %>
 
-<p class="mt-12">
+  <p class="mt-12">
     <%= link_to 'Record an out-of-system donation', new_admin_donation_path, class: 'btn-md btn-gray' %>
-</p>
+  </p>
+<% end %>

app/views/admin/donations/new.html.erb

@@ -1,7 +1,11 @@
-<h2>New Donation</h2>
+<%= render HeaderComponent.new(title: "Donations") %>
 
-<%= render 'form', donation: @donation, url: admin_donations_path %>
+<%= render MainSimpleComponent.new do %>
+  <h2>New Donation</h2>
 
-<p class="mt-8">
+  <%= render 'form', donation: @donation, url: admin_donations_path %>
+
+  <p class="mt-8">
     <%= link_to 'Back', admin_donations_path, class: 'ks-text-link' %>
-</p>
+  </p>
+<% end %>

app/views/admin/donations/show.html.erb

@@ -1,36 +1,38 @@
-<p id="notice"><%= notice %></p>
+<%= render HeaderComponent.new(title: "Donations") %>
 
-<p>
+<%= render MainSimpleComponent.new do %>
+  <p>
     <strong>User:</strong>
-  <%= @donation.user_id %>
+    <%= @donation.user.address %>
-</p>
+  </p>
 
-<p>
+  <p>
     <strong>Amount sats:</strong>
     <%= @donation.amount_sats %>
-</p>
+  </p>
 
-<p>
+  <p>
     <strong>Amount eur:</strong>
     <%= @donation.amount_eur %>
-</p>
+  </p>
 
-<p>
+  <p>
     <strong>Amount usd:</strong>
     <%= @donation.amount_usd %>
-</p>
+  </p>
 
-<p>
+  <p>
     <strong>Public name:</strong>
     <%= @donation.public_name %>
-</p>
+  </p>
 
-<p>
+  <p>
     <strong>Date:</strong>
     <%= @donation.paid_at %>
-</p>
+  </p>
 
-<p class="mt-8">
+  <p class="mt-8">
     <%= link_to 'Edit', edit_admin_donation_path(@donation), class: 'ks-text-link' %> |
     <%= link_to 'Back', admin_donations_path, class: 'ks-text-link' %>
-</p>
+  </p>
+<% end %>

app/views/admin/invitations/index.html.erb

@@ -1,13 +1,15 @@
-<section>
+<%= render HeaderComponent.new(title: "Invitations") %>
-  <h2>Invitations</h2>
+
+<%= render MainSimpleComponent.new do %>
+  <section>
     <p>
       There are currently <strong><%= @invitations_unused_count %>
       unused invitations</strong> available to existing users.
       <strong><%= @users_with_referrals_count %> users</strong> have successfully
       invited new users.
     </p>
-</section>
+  </section>
-<% if @invitations_used.any? %>
+  <% if @invitations_used.any? %>
     <section>
       <h3>Accepted (<%= @invitations_used.length %>)</h3>
       <table>
@@ -21,7 +23,7 @@
         <tbody>
           <% @invitations_used.each do |invitation| %>
             <tr>
-            <td class="overflow-ellipsis"><%= invitation.token %></td>
+              <td class="overflow-ellipsis font-mono"><%= invitation.token %></td>
               <td><%= invitation.used_at.strftime("%Y-%m-%d") %></td>
               <td><%= User.find(invitation.invited_user_id).address %></td>
             </tr>
@@ -29,4 +31,5 @@
         </tbody>
       </table>
     </section>
+  <% end %>
 <% end %>

app/views/admin/ldap_users/index.html.erb

@@ -1,11 +1,17 @@
-<h2>LDAP users</h2>
+<%= render HeaderComponent.new(title: "LDAP Users: #{@ou}") %>
 
-<ul>
+<%= render MainSimpleComponent.new do %>
-  <li><%= link_to 'kosmos.org', admin_ldap_users_path %></li>
+  <h3 class="hidden">Domains</h3>
-  <li><%= link_to '5apps.com', admin_ldap_users_path(ou: '5apps.com') %></li>
+  <ul class="mb-10">
-</ul>
+    <li class="inline-block">
+      <%= link_to 'kosmos.org', admin_ldap_users_path, class: "ks-text-link" %>
+    </li>
+    <li class="inline-block ml-6">
+      <%= link_to '5apps.com', admin_ldap_users_path(ou: '5apps.com'), class: "ks-text-link" %>
+    </li>
+  </ul>
 
-<table>
+  <table>
     <thead>
       <tr>
         <th>UID</th>
@@ -24,4 +30,5 @@
       </tr>
       <% end %>
     </tbody>
-</table>
+  </table>
+<% end %>

app/views/dashboard/index.html.erb

@@ -1,10 +1,12 @@
-<section>
+<%= render HeaderComponent.new(title: "Services") %>
-  <h2>Services</h2>
+
+<%= render MainSimpleComponent.new do %>
+  <section>
     <p>
       Your Kosmos account and password currently give you access to these
       services:
     </p>
-  <div class="grid services mt-12">
+    <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-6 services mt-12">
       <div>
         <h3 class="mb-3.5">
           <%= link_to "Chat", "https://wiki.kosmos.org/Services:Chat", class: "ks-text-link" %>
@@ -55,4 +57,5 @@
         </p>
       </div>
     </div>
-</section>
+  </section>
+<% end %>

app/views/devise/confirmations/new.html.erb

@@ -1,14 +1,22 @@
-<h2>Resend confirmation instructions</h2>
+<%= render HeaderCompactComponent.new(title: "Log in") %>
 
-<%= form_for(resource, as: resource_name, url: confirmation_path(resource_name), html: { method: :post }) do |f| %>
+<%= render MainCompactComponent.new do %>
+  <h2>Resend confirmation instructions</h2>
+
+  <%= form_for(resource, as: resource_name, url: confirmation_path(resource_name), html: { method: :post }) do |f| %>
     <%= render "devise/shared/error_messages", resource: resource %>
     <p>
-    <%= f.label :email, 'Email address', class: 'block mb-1' %>
+      <%= f.label :email, 'Email address', class: 'block mb-1 w-full' %>
-    <%= f.email_field :email, required: true, autofocus: true, autocomplete: "email", value: (resource.pending_reconfirmation? ? resource.unconfirmed_email : resource.email) %>
+      <%= f.email_field :email,
+        required: true, autofocus: true, autocomplete: "email",
+        value: (resource.pending_reconfirmation? ? resource.unconfirmed_email : resource.email),
+        class: "w-full" %>
     </p>
     <p class="mt-8">
-    <%= f.submit "Resend confirmation instructions", class: 'btn-md btn-blue' %>
+      <%= f.submit "Resend confirmation link",
+                   class: 'btn-md btn-blue w-full sm:w-auto' %>
     </p>
-<% end %>
+  <% end %>
 
-<%= render "devise/shared/links" %>
+  <%= render "devise/shared/links" %>
+<% end %>

app/views/devise/passwords/edit.html.erb

@@ -1,6 +1,9 @@
-<h2>Change your password</h2>
+<%= render HeaderCompactComponent.new(title: "Log in") %>
 
-<%= form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :put }) do |f| %>
+<%= render MainCompactComponent.new do %>
+  <h2>Change your password</h2>
+
+  <%= form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :put }) do |f| %>
     <%= render "devise/shared/error_messages", resource: resource %>
     <%= f.hidden_field :reset_password_token %>
 
@@ -22,6 +25,7 @@
     <p class="mt-8">
       <%= f.submit "Change my password", class: 'btn-md btn-blue' %>
     </p>
-<% end %>
+  <% end %>
 
-<%= render "devise/shared/links" %>
+  <%= render "devise/shared/links" %>
+<% end %>

app/views/devise/passwords/new.html.erb

@@ -1,18 +1,25 @@
-<h2>Forgot your password?</h2>
+<%= render HeaderCompactComponent.new(title: "Log in") %>
 
-<%= form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :post }) do |f| %>
+<%= render MainCompactComponent.new do %>
+  <h2>Forgot your password?</h2>
+
+  <%= form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :post }) do |f| %>
     <%= render "devise/shared/error_messages", resource: resource %>
     <p>
       <%= f.label :cn, 'User', class: 'block' %>
-    <%= f.text_field :cn, autofocus: true, autocomplete: "username", required: true %> @ kosmos.org
+      <%= f.text_field :cn, autofocus: true, autocomplete: "username",
+                            required: true, class: "w-full md:w-3/5"%>
+      <span class="ml-1 text-gray-500">@ kosmos.org</span>
     </p>
     <p>
       <%= f.label :email, 'Email address', class: 'block' %>
-    <%= f.email_field :email, autocomplete: "email", required: true %>
+      <%= f.email_field :email, autocomplete: "email", required: true,
+                                class: "w-full md:w-3/5"%>
     </p>
     <p class="mt-8">
-    <%= f.submit "Send me reset password instructions", class: 'btn-md btn-blue' %>
+      <%= f.submit "Send me a reset link", class: 'btn-md btn-blue w-full sm:w-auto' %>
     </p>
-<% end %>
+  <% end %>
 
-<%= render "devise/shared/links" %>
+  <%= render "devise/shared/links" %>
+<% end %>

app/views/devise/sessions/new.html.erb

@@ -1,18 +1,23 @@
-<h2>Log in</h2>
+<%= render HeaderCompactComponent.new(title: "Log in") %>
 
-<%= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
+<%= render MainCompactComponent.new do %>
+  <%= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
     <%= render "devise/shared/error_messages", resource: resource %>
     <p>
       <%= f.label :cn, 'User', class: 'block' %>
-    <%= f.text_field :cn, autofocus: true, autocomplete: "username" %> @ kosmos.org
+      <%= f.text_field :cn, autofocus: true, autocomplete: "username",
+                            class: "w-full md:w-3/5"%>
+      <span class="ml-1 text-gray-500">@ kosmos.org</span>
     </p>
     <p>
       <%= f.label :password, class: 'block' %>
-    <%= f.password_field :password, autocomplete: "current-password" %>
+      <%= f.password_field :password, autocomplete: "current-password",
+                                      class: "w-full md:w-3/5"%>
     </p>
     <p class="mt-8">
-    <%= f.submit "Log in", class: 'btn-md btn-blue' %>
+      <%= f.submit "Log in", class: 'btn-md btn-blue w-full sm:w-auto' %>
     </p>
-<% end %>
+  <% end %>
 
-<%= render "devise/shared/links" %>
+  <%= render "devise/shared/links" %>
+<% end %>

app/views/donations/index.html.erb

@@ -1,26 +1,28 @@
-<section>
+<%= render HeaderComponent.new(title: "Donations") %>
-  <h2>Donations</h2>
-  <p>
-    Your financial contributions to the development and
-    upkeep of Kosmos software and services.
-  </p>
-</section>
 
-<section>
+<%= render MainSimpleComponent.new do %>
+  <section>
+    <p class="mb-12">
+      Your financial contributions to the development and upkeep of Kosmos
+      software and services.
+    </p>
     <% if @donations.any? %>
-    <ul class="donations">
+      <ul class="list-none">
         <% @donations.each do |donation| %>
-        <li>
+          <li class="mb-8 grid gap-y-2 gap-x-8 grid-cols-2 items-center">
-          <h3>
+            <h3 class="mb-0">
               <%= donation.paid_at.strftime("%B %d, %Y") %>
             </h3>
-          <p class="amount-btc">
+            <p class="row-span-2 font-mono text-right mb-0">
-            <%= sats_to_btc donation.amount_sats %> BTC
+              <span class="text-xl">
-          </p>
+                <%= number_with_delimiter donation.amount_sats %> sats
-          <p class="amounts-fiat">
+              </span>
+              <br>
+              <span class="text-sm text-gray-500">
                 (~ <%= number_to_currency donation.amount_eur / 100, unit: "" %> EUR)
+              </span>
             </p>
-          <p class="public-name">
+            <p class="mb-0">
               <% if donation.public_name.present? %>
                 Public name: <%= donation.public_name %>
               <% else %>
@@ -31,8 +33,9 @@
         <% end %>
       </ul>
     <% else %>
-    <p>
+      <p class="text-gray-500">
         No donations to show.
       </p>
     <% end %>
-</section>
+  </section>
+<% end %>

app/views/icons/_activity.html.erb

@@ -0,0 +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-activity"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"></polyline></svg>

app/views/icons/_airplay.html.erb

@@ -0,0 +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-airplay"><path d="M5 17H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-1"></path><polygon points="12 15 17 21 7 21 12 15"></polygon></svg>

app/views/icons/_alert-circle.html.erb

@@ -0,0 +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-alert-circle"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>

app/views/icons/_alert-octagon.html.erb

@@ -0,0 +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-alert-octagon"><polygon points="7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2"></polygon><line x1="12" y1="8" x2="12" y2="12"></line><line x1="12" y1="16" x2="12.01" y2="16"></line></svg>

app/views/icons/_alert-triangle.html.erb

@@ -0,0 +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-alert-triangle"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>

app/views/icons/_align-center.html.erb

@@ -0,0 +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-align-center"><line x1="18" y1="10" x2="6" y2="10"></line><line x1="21" y1="6" x2="3" y2="6"></line><line x1="21" y1="14" x2="3" y2="14"></line><line x1="18" y1="18" x2="6" y2="18"></line></svg>

app/views/icons/_align-justify.html.erb

@@ -0,0 +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-align-justify"><line x1="21" y1="10" x2="3" y2="10"></line><line x1="21" y1="6" x2="3" y2="6"></line><line x1="21" y1="14" x2="3" y2="14"></line><line x1="21" y1="18" x2="3" y2="18"></line></svg>

app/views/icons/_align-left.html.erb

@@ -0,0 +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-align-left"><line x1="17" y1="10" x2="3" y2="10"></line><line x1="21" y1="6" x2="3" y2="6"></line><line x1="21" y1="14" x2="3" y2="14"></line><line x1="17" y1="18" x2="3" y2="18"></line></svg>

app/views/icons/_align-right.html.erb

@@ -0,0 +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-align-right"><line x1="21" y1="10" x2="7" y2="10"></line><line x1="21" y1="6" x2="3" y2="6"></line><line x1="21" y1="14" x2="3" y2="14"></line><line x1="21" y1="18" x2="7" y2="18"></line></svg>

app/views/icons/_anchor.html.erb

@@ -0,0 +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-anchor"><circle cx="12" cy="5" r="3"></circle><line x1="12" y1="22" x2="12" y2="8"></line><path d="M5 12H2a10 10 0 0 0 20 0h-3"></path></svg>

app/views/icons/_aperture.html.erb

@@ -0,0 +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-aperture"><circle cx="12" cy="12" r="10"></circle><line x1="14.31" y1="8" x2="20.05" y2="17.94"></line><line x1="9.69" y1="8" x2="21.17" y2="8"></line><line x1="7.38" y1="12" x2="13.12" y2="2.06"></line><line x1="9.69" y1="16" x2="3.95" y2="6.06"></line><line x1="14.31" y1="16" x2="2.83" y2="16"></line><line x1="16.62" y1="12" x2="10.88" y2="21.94"></line></svg>

app/views/icons/_archive.html.erb

@@ -0,0 +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-archive"><polyline points="21 8 21 21 3 21 3 8"></polyline><rect x="1" y="3" width="22" height="5"></rect><line x1="10" y1="12" x2="14" y2="12"></line></svg>

app/views/icons/_arrow-down-circle.html.erb

@@ -0,0 +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-arrow-down-circle"><circle cx="12" cy="12" r="10"></circle><polyline points="8 12 12 16 16 12"></polyline><line x1="12" y1="8" x2="12" y2="16"></line></svg>

app/views/icons/_arrow-down-left.html.erb

@@ -0,0 +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-arrow-down-left"><line x1="17" y1="7" x2="7" y2="17"></line><polyline points="17 17 7 17 7 7"></polyline></svg>

app/views/icons/_arrow-down-right.html.erb

@@ -0,0 +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-arrow-down-right"><line x1="7" y1="7" x2="17" y2="17"></line><polyline points="17 7 17 17 7 17"></polyline></svg>

app/views/icons/_arrow-down.html.erb

@@ -0,0 +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-arrow-down"><line x1="12" y1="5" x2="12" y2="19"></line><polyline points="19 12 12 19 5 12"></polyline></svg>

app/views/icons/_arrow-left-circle.html.erb

@@ -0,0 +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-arrow-left-circle"><circle cx="12" cy="12" r="10"></circle><polyline points="12 8 8 12 12 16"></polyline><line x1="16" y1="12" x2="8" y2="12"></line></svg>

app/views/icons/_arrow-left.html.erb

@@ -0,0 +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-arrow-left"><line x1="19" y1="12" x2="5" y2="12"></line><polyline points="12 19 5 12 12 5"></polyline></svg>

app/views/icons/_arrow-right-circle.html.erb

@@ -0,0 +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-arrow-right-circle"><circle cx="12" cy="12" r="10"></circle><polyline points="12 16 16 12 12 8"></polyline><line x1="8" y1="12" x2="16" y2="12"></line></svg>

app/views/icons/_arrow-right.html.erb

@@ -0,0 +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-arrow-right"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>

app/views/icons/_arrow-up-circle.html.erb

@@ -0,0 +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-arrow-up-circle"><circle cx="12" cy="12" r="10"></circle><polyline points="16 12 12 8 8 12"></polyline><line x1="12" y1="16" x2="12" y2="8"></line></svg>

app/views/icons/_arrow-up-left.html.erb

@@ -0,0 +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-arrow-up-left"><line x1="17" y1="17" x2="7" y2="7"></line><polyline points="7 17 7 7 17 7"></polyline></svg>

app/views/icons/_arrow-up-right.html.erb

@@ -0,0 +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-arrow-up-right"><line x1="7" y1="17" x2="17" y2="7"></line><polyline points="7 7 17 7 17 17"></polyline></svg>

app/views/icons/_arrow-up.html.erb

@@ -0,0 +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-arrow-up"><line x1="12" y1="19" x2="12" y2="5"></line><polyline points="5 12 12 5 19 12"></polyline></svg>

app/views/icons/_at-sign.html.erb

@@ -0,0 +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-at-sign"><circle cx="12" cy="12" r="4"></circle><path d="M16 8v5a3 3 0 0 0 6 0v-1a10 10 0 1 0-3.92 7.94"></path></svg>