Add recommended apps for Chat/XMPP

app/components/app_info_component.html.erb

@@ -0,0 +1,15 @@
+<div class="flex">
+  <div class="<%= @icon_container_class %>">
+    <%= image_tag(@icon_path, class: 'h-full w-full') %>
+  </div>
+  <div class="flex-1 px-4">
+    <h4 class="sm:pt-2 mb-2 text-lg font-bold"><%= @name %></h4>
+    <p class="leading-snug"><%= @description %></p>
+    <p class="leading-snug flex flex-wrap gap-3">
+      <% @links.each do |link| %>
+        <a href="<%= link[1] %>" target="_blank"
+           class="flex-0 btn-sm btn-gray"><%= link[0] %></a>
+      <% end %>
+    </p>
+  </div>
+</div>

app/components/app_info_component.rb

@@ -0,0 +1,19 @@
+# frozen_string_literal: true
+
+class AppInfoComponent < ViewComponent::Base
+  def initialize(name:, description:, icon_path: , icon_fill_box: false, links: [])
+    @name = name
+    @description = description
+    @icon_path = icon_path
+    @icon_container_class = icon_container_class(icon_fill_box)
+    @links = links
+  end
+
+  def icon_container_class(icon_fill_box)
+    str = "flex-0 h-16 w-16 sm:h-28 sm:w-28 bg-white rounded-3xl overflow-hidden"
+    unless icon_fill_box
+      str += " p-2 border border-gray-200"
+    end
+    str
+  end
+end

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

@@ -7,7 +7,7 @@
       join public channels or private rooms.
     </p>
   </section>
-  <section>
+  <section data-controller="modal">
     <h3>Your Chat Address</h3>
     <p class="mb-6">
       When you exchange contacts with people, give them your
@@ -27,7 +27,12 @@
           <%= render partial: "icons/check", locals: { custom_class: "text-blue-600 h-4 w-4 inline" } %>
         </span>
       </button>
+      <button class="btn-md btn-icon btn-outline shrink-0 w-auto"
+              data-action="click->modal#open" title="Show QR code">
+          <%= render partial: "icons/qr_code", locals: { custom_class: "text-blue-600 h-4 w-4 inline" } %>
+      </button>
     </p>
+    <%= render QrCodeModalComponent.new(qr_content: "xmpp:"+current_user.address) %>
   </section>
   <section>
     <h3>Chat Apps</h3>
@@ -41,13 +46,9 @@
     <h3>Recommended Apps</h3>
     <div data-controller="tabs"
          data-tabs-active-tab="-mb-px border-gray-200 border-l border-t border-r rounded-t text-indigo-600 hover:text-indigo-600"
-         data-tabs-inactive-tab="text-gray-500 hover:text-gray-700">
-      <ul class="list-reset flex border-gray-200 border-b">
-        <li class="mr-2" data-tabs-target="tab" data-action="click->tabs#change">
-          <a href="#" class="bg-white inline-block py-2 px-4 font-semibold no-underline">
-            Web
-          </a>
-        </li>
+         data-tabs-inactive-tab="text-gray-500 hover:text-gray-700"
+         class="mb-12">
+      <ul class="list-reset flex mb-8 border-gray-200 border-b">
         <li class="mr-2" data-tabs-target="tab" data-action="click->tabs#change">
           <a href="#" class="bg-white inline-block py-2 px-4 font-semibold no-underline">
             Android
@@ -73,26 +74,109 @@
             macOS
           </a>
         </li>
+        <!-- <li class="mr&#45;2" data&#45;tabs&#45;target="tab" data&#45;action="click&#45;>tabs#change"> -->
+        <!--   <a href="#" class="bg&#45;white inline&#45;block py&#45;2 px&#45;4 font&#45;semibold no&#45;underline"> -->
+        <!--     Web -->
+        <!--   </a> -->
+        <!-- </li> -->
       </ul>
 
-      <div class="hidden" data-tabs-target="panel">
-        Web
+      <div class="hidden grid grid-cols-1 gap-6" data-tabs-target="panel">
+        <%= render AppInfoComponent.new(
+          name: "Conversations",
+          description: "The gold standard for Jabber on mobile devices",
+          icon_path: "/img/logos/icon_conversations.png",
+          links: [
+            ["Website", "https://conversations.im"],
+            ["Google Play", "https://play.google.com/store/apps/details?id=eu.siacs.conversations"],
+            ["F-Droid", "https://f-droid.org/en/packages/eu.siacs.conversations/"],
+          ]
+        ) %>
       </div>
-      <div class="hidden" data-tabs-target="panel">
-        Android
+      <div class="hidden grid grid-cols-1 gap-6" data-tabs-target="panel">
+        <%= render AppInfoComponent.new(
+          name: "Siskin IM",
+          description: "Lightweight and powerful chat app for iPhone and iPad",
+          icon_path: "/img/logos/logo_siskin.png",
+          links: [
+            ["Website", "https://siskin.im"],
+            ["App Store", "https://apps.apple.com/us/app/tigase-messenger/id1153516838"]
+          ]
+        ) %>
+        <%= render AppInfoComponent.new(
+          name: "Monal",
+          description: "A chat app for iOS, iPadOS, and macOS",
+          icon_path: "/img/logos/icon_monal.svg",
+          icon_fill_box: true,
+          links: [
+            ["Website", "https://monal-im.org"],
+            ["App Store", "https://apps.apple.com/app/id317711500"]
+          ]
+        ) %>
       </div>
-      <div class="hidden" data-tabs-target="panel">
-        iOS
+      <div class="hidden grid grid-cols-1 gap-6" data-tabs-target="panel">
+        <%= render AppInfoComponent.new(
+          name: "Dino",
+          description: "A modern and simple chat app for Linux (good for GNOME)",
+          icon_path: "/img/logos/icon_dino.svg",
+          links: [
+            ["Website", "https://dino.im"],
+            ["Install from package", "https://github.com/dino/dino/wiki/Distribution-Packages"]
+          ]
+        ) %>
+        <%= render AppInfoComponent.new(
+          name: "Kaidan",
+          description: "A fairly new, user-friendly chat app for all devices (good for KDE)",
+          icon_path: "/img/logos/icon_kaidan.svg",
+          links: [
+            ["Website", "https://kaidan.im"],
+          ]
+        ) %>
+        <%= render AppInfoComponent.new(
+          name: "Gajim",
+          description: "A fully-featured chat app for Linux and Windows",
+          icon_path: "/img/logos/icon_gajim.png",
+          links: [
+            ["Website", "https://gajim.org/"]
+          ]
+        ) %>
       </div>
-      <div class="hidden" data-tabs-target="panel">
-        Linux
+      <div class="hidden grid grid-cols-1 gap-6" data-tabs-target="panel">
+        <%= render AppInfoComponent.new(
+          name: "Gajim",
+          description: "A fully-featured chat app for Linux and Windows",
+          icon_path: "/img/logos/icon_gajim.png",
+          links: [
+            ["Website", "https://gajim.org/"],
+            ["Microsoft Store", "https://apps.microsoft.com/store/detail/9PGGF6HD43F9?launch=true&mode=mini"],
+            ["Download options", "https://gajim.org/download/"]
+          ]
+        ) %>
       </div>
-      <div class="hidden" data-tabs-target="panel">
-        Windows
-      </div>
-      <div class="hidden" data-tabs-target="panel">
-        macOS
+      <div class="hidden grid grid-cols-1 gap-6" data-tabs-target="panel">
+        <%= render AppInfoComponent.new(
+          name: "Beagle IM",
+          description: "Lightweight and powerful chat app for macOS",
+          icon_path: "/img/logos/logo_beagle.png",
+          links: [
+            ["Website", "https://beagle.im"],
+            ["App Store", "https://apps.apple.com/us/app/beagleim-by-tigase-inc/id1445349494"]
+          ]
+        ) %>
+        <%= render AppInfoComponent.new(
+          name: "Monal",
+          description: "A chat app for iOS, iPadOS, and macOS",
+          icon_path: "/img/logos/icon_monal.svg",
+          icon_fill_box: true,
+          links: [
+            ["Website", "https://monal-im.org"],
+            ["App Store", "https://apps.apple.com/app/id1637078500"]
+          ]
+        ) %>
       </div>
+      <!-- <div class="hidden grid grid&#45;cols&#45;1 gap&#45;4 sm:gap&#45;6" data&#45;tabs&#45;target="panel"> -->
+      <!--   Web -->
+      <!-- </div> -->
     </div>
   </section>
 <% end %>