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

<%= 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>
    <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">
      <img src="/img/logos/icon_remotestorage.svg"
           class="inline-block h-6 w-6 mr-1 self-center">
      <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>

  <section>
    <h3>Compatible Apps</h3>
    <p>
      Your Storage account is based on a new open standard called
      <a href="https://remotestorage.io" target="_blank">
        <img src="/img/logos/icon_remotestorage.svg" class="h-4 w-4 inline">
        <strong>remoteStorage</strong>
      </a>, which is not yet widely supported.  Look
      for the remoteStorage icon, or check the Sync settings in apps.
    </p>
    <p>
      If you want your favorite apps to support syncing data with your own
      Storage account, let the developers know! All relevant information is
      available on the
      <a href="https://remotestorage.io" target="_blank">remoteStorage website</a>.
    </p>
  </section>

  <section>
    <h3>Recommended Apps</h3>
    <div data-controller="tabs"
         data-tabs-active-tab-class="-mb-px border-gray-200 border-l border-t border-r rounded-t text-indigo-600 hover:text-indigo-600"
         data-tabs-inactive-tab-class="text-gray-500 hover:text-gray-700"
         class="mb-12">
      <select data-action="tabs#change" data-tabs-target="select"
              class="block w-full mb-8 sm:hidden">
        <option>Productivity</option>
        <option>Bookmarks</option>
        <option>Reading</option>
        <option>File sharing</option>
        <option>Learning</option>
      </select>
      <ul class="hidden sm:flex list-reset mb-8 border-gray-200 border-b">
        <li class="mr-2" data-tabs-target="tab" data-action="click->tabs#change:prevent">
          <a href="#" class="bg-white inline-block py-2 px-4 font-semibold no-underline">
            Productivity
          </a>
        </li>
        <li class="mr-2" data-tabs-target="tab" data-action="click->tabs#change:prevent">
          <a href="#" class="bg-white inline-block py-2 px-4 font-semibold no-underline">
            Bookmarks
          </a>
        </li>
        <li class="mr-2" data-tabs-target="tab" data-action="click->tabs#change:prevent">
          <a href="#" class="bg-white inline-block py-2 px-4 font-semibold no-underline">
            Reading
          </a>
        </li>
        <li class="mr-2" data-tabs-target="tab" data-action="click->tabs#change:prevent">
          <a href="#" class="bg-white inline-block py-2 px-4 font-semibold no-underline">
            File sharing
          </a>
        </li>
        <li class="mr-2" data-tabs-target="tab" data-action="click->tabs#change:prevent">
          <a href="#" class="bg-white inline-block py-2 px-4 font-semibold no-underline">
            Learning
          </a>
        </li>
      </ul>

      <div class="hidden grid grid-cols-1 gap-6" data-tabs-target="panel">
        <%= render AppInfoComponent.new(
          name: "Hyperdraft",
          description: "Create text notes and (optionally) turn them into a website",
          icon_path: "/img/app_icons/hyperdraft.png",
          links: [
            ["Website", "https://hyperdraft.rosano.ca"],
          ]
        ) %>
        <%= render AppInfoComponent.new(
          name: "Notes Together",
          description: "A powerful note-taking app, with support for attaching images and other files",
          icon_path: "/img/app_icons/notes-together.png",
          links: [
            ["Web App", "https://notestogether.hominidsoftware.com"],
          ]
        ) %>
        <%= render AppInfoComponent.new(
          name: "Papiers",
          description: "A simple note-taking app",
          icon_path: "/img/app_icons/papiers.png",
          links: [
            ["Web App", "https://papiers.gitlab.io"],
          ]
        ) %>
      </div>
      <div class="hidden grid grid-cols-1 gap-6" data-tabs-target="panel">
        <%= render AppInfoComponent.new(
          name: "Webmarks",
          description: "Archive your bookmarks in your remote storage",
          icon_path: "/img/app_icons/webmarks.png",
          links: [
            ["Web App", "https://webmarks.5apps.com"],
          ]
        ) %>
      </div>
      <div class="hidden grid grid-cols-1 gap-6" data-tabs-target="panel">
        <%= render AppInfoComponent.new(
          name: "Pétrolette",
          description: "A news aggregator that syncs with your remote storage",
          icon_path: "/img/app_icons/petrolette.png",
          links: [
            ["Web App", "https://petrolette.space"],
          ]
        ) %>
      </div>
      <div class="hidden grid grid-cols-1 gap-6" data-tabs-target="panel">
        <%= render AppInfoComponent.new(
          name: "Sharesome",
          description: "Quickly and easily share files from your remote storage",
          icon_path: "/img/app_icons/sharesome.png",
          links: [
            ["Web App", "https://sharesome.5apps.com"],
          ]
        ) %>
      </div>
      <div class="hidden grid grid-cols-1 gap-6" data-tabs-target="panel">
        <%= render AppInfoComponent.new(
          name: "Kommit",
          description: "Create flashcards and learn them with spaced-repetition",
          icon_path: "/img/app_icons/kommit.png",
          links: [
            ["Website", "https://kommit.rosano.ca"],
          ]
        ) %>
      </div>
    </div>
  </section>
<% end %>