Add tabnav, dedicated auths view to RS service page

Includes a nicer view and illustration for when no auths exist yet

app/controllers/services/remotestorage_controller.rb

@@ -8,8 +8,7 @@ class Services::RemotestorageController < Services::BaseController
     # unless current_user.service_enabled?(:remotestorage)
     #   redirect_to service_remotestorage_info_path
     # end
-    @rs_auths = current_user.remote_storage_authorizations
-    # TODO sort by app name
+    # @rs_apps_connected = current_user.remote_storage_authorizations.any?
   end
 
   private

app/controllers/services/rs_auths_controller.rb

@@ -3,7 +3,12 @@ class Services::RsAuthsController < Services::BaseController
   before_action :require_feature_enabled
   before_action :require_service_available
   # before_action :require_service_enabled
-  before_action :find_rs_auth
+  before_action :find_rs_auth, only: [:destroy, :launch_app]
+
+  def index
+    @rs_auths = current_user.remote_storage_authorizations
+    # TODO sort by app name?
+  end
 
   def destroy
     @auth.destroy!

app/views/services/remotestorage/show.html.erb

@@ -2,15 +2,35 @@
 
 <%= render MainSimpleComponent.new do %>
   <section>
-    <h3 class="mb-10">Connected Apps</h3>
-    <% if @rs_auths.any? %>
-    <div class="w-full grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-y-10 gap-x-12">
-    <% @rs_auths.each do |auth| %>
-      <%= render RsAuthComponent.new(auth: auth) %>
-    <% end %>
+    <p class="mb-6">
+      Store and synchronize your app data across different devices.
+    </p>
+  </section>
+
+  <%= render partial: "shared/tabnav_remotestorage" %>
+
+  <section>
+    <h3>Your Storage Address</h3>
+    <p class="mb-6">
+      In order to connect an app to your storage account, give it your address:
+    </p>
+    <p data-controller="clipboard" class="flex gap-1 sm:w-2/5">
+      <input type="text" id="user_address" class="grow"
+             value=<%= current_user.address %> disabled="disabled"
+             data-clipboard-target="source" />
+      <button id="copy-user-address" class="btn-md btn-icon btn-outline shrink-0"
+              data-clipboard-target="trigger" data-action="clipboard#copy"
+              title="Copy to clipboard">
+        <span class="content-initial">
+          <%= render partial: "icons/copy", locals: { custom_class: "text-blue-600 h-4 w-4 inline" } %>
+        </span>
+        <span class="content-active hidden">
+          <%= render partial: "icons/check", locals: { custom_class: "text-blue-600 h-4 w-4 inline" } %>
+        </span>
+      </button>
+    </p>
+  </section>
+
     </div>
-    <% else %>
-    <p>No apps connected yet.</p>
-    <% end %>
   </section>
 <% end %>

app/views/services/rs_auths/index.html.erb

@@ -0,0 +1,33 @@
+<%= render HeaderComponent.new(title: "Storage") %>
+
+<%= render MainSimpleComponent.new do %>
+  <section>
+    <p class="mb-6">
+      Store and synchronize your app data across different devices.
+    </p>
+  </section>
+
+  <%= render partial: "shared/tabnav_remotestorage" %>
+
+  <section>
+    <% if @rs_auths.any? %>
+      <div class="w-full grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-y-10 gap-x-12 mt-4">
+      <% @rs_auths.each do |auth| %>
+        <%= render RsAuthComponent.new(auth: auth) %>
+      <% end %>
+    </div>
+    <% else %>
+      <div class="text-center">
+        <p class="mt-4 mb-12 inline-flex align-center items-center">
+          <%= image_tag("/img/illustrations/undraw_friends_r511.svg", class: 'h-48') %>
+        </p>
+        <h3>
+          No apps connected
+        </h3>
+        <p class="text-gray-500">
+          When connected, your apps will show up here.
+        </p>
+      </div>
+    <% end %>
+  </section>
+<% end %>

app/views/shared/_tabnav_remotestorage.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: services_storage_path,
+        active: current_page?(services_storage_path)
+      ) %>
+      <%= render TabnavLinkComponent.new(
+        name: "Connected Apps", path: apps_services_storage_path,
+        active: current_page?(apps_services_storage_path)
+      ) %>
+    </nav>
+  </div>
+</section>

config/routes.rb

@@ -48,7 +48,8 @@ Rails.application.routes.draw do
     end
 
     resource :storage, controller: 'remotestorage', only: [:show] do
-      resources :rs_auths, only: [:destroy] do
+      get :apps, to: "rs_auths#index"
+      resources :rs_auths, only: [:index, :destroy] do
         member do
           get :revoke, to: 'rs_auths#destroy'
           get :launch_app