Add Mastodon service page

app/controllers/services/mastodon_controller.rb

@@ -0,0 +1,14 @@
+class Services::MastodonController < Services::BaseController
+  before_action :authenticate_user!
+  before_action :require_service_available
+
+  def show
+    @service_enabled = current_user.services_enabled.include?(:mastodon)
+  end
+
+  private
+
+    def require_service_available
+      http_status :not_found unless Setting.ejabberd_enabled?
+    end
+end

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

@@ -3,7 +3,7 @@
 <%= render MainSimpleComponent.new do %>
   <section>
     <p class="mb-6">
-      Chat with anyone on the open Jabber network. Message people directly, or
+      Chat with anyone on the open Jabber (XMPP) network. Message people directly, or
       join public channels or private rooms.
     </p>
   </section>
@@ -37,9 +37,9 @@
   <section>
     <h3>Chat Apps</h3>
     <p>
-      Use your Kosmos account with many different apps, and on any devices
-      you wish! When opening an app for the first time, just enter your
-      user address and password to log in.
+      Use your account with many different apps, and on any devices you wish!
+      When opening an app for the first time, just enter your user address and
+      password to log in.
     </p>
   </section>
   <section>

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

@@ -0,0 +1,206 @@
+<%= render HeaderComponent.new(title: "Social") %>
+
+<%= render MainSimpleComponent.new do %>
+  <section>
+    <p class="mb-6">
+      Follow and interact with anyone on the open social web, from your Kosmos Mastodon account.
+    </p>
+  </section>
+  <section data-controller="modal">
+    <h3>Your User Address</h3>
+    <p class="mb-6">
+      Others can follow you under this 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>
+      <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: current_user.address) %>
+  </section>
+  <section>
+    <h3>Social Apps</h3>
+    <p>
+      Use your Mastodon account with many different apps, and on any devices
+      you wish! When adding your account to an app, you will log in via <a
+        href="https://kosmos.social">kosmos.social</a>.
+    </p>
+  </section>
+  <section>
+    <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"
+         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">
+            Web
+          </a>
+        </li>
+        <li class="mr-2" data-tabs-target="tab" data-action="click->tabs#change">
+          <a href="#" class="bg-white inline-block py-2 px-5 font-semibold no-underline">
+            Android
+          </a>
+        </li>
+        <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">
+            iOS
+          </a>
+        </li>
+        <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">
+            Linux
+          </a>
+        </li>
+        <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">
+            Windows
+          </a>
+        </li>
+        <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">
+            macOS
+          </a>
+        </li>
+      </ul>
+
+      <div class="hidden grid grid-cols-1 gap-6" data-tabs-target="panel">
+        <%= render AppInfoComponent.new(
+          name: "kosmos.social",
+          description: "The official Web app",
+          icon_path: "/img/logos/icon_mastodon-2.svg",
+          links: [
+            ["Launch", "https://kosmos.social"]
+          ]
+        ) %>
+        <%= render AppInfoComponent.new(
+          name: "Elk",
+          description: " A nimble Mastodon web client",
+          icon_path: "/img/logos/icon_elk.svg",
+          links: [
+            ["Launch", "https://elk.zone"],
+            ["GitHub", "https://github.com/elk-zone/elk"]
+          ]
+        ) %>
+        <%= render AppInfoComponent.new(
+          name: "Sengi",
+          description: "A cross-platform app, inspired by TweetDeck",
+          icon_path: "/img/logos/icon_sengi.png",
+          links: [
+            ["Website", "https://nicolasconstant.github.io/sengi/"],
+            ["GitHub", "https://github.com/NicolasConstant/sengi"]
+          ]
+        ) %>
+      </div>
+      <div class="hidden grid grid-cols-1 gap-6" data-tabs-target="panel">
+        <%= render AppInfoComponent.new(
+          name: "Mastodon for Android",
+          description: "Android client by the Mastodon core team",
+          icon_path: "/img/logos/icon_mastodon-2.svg",
+          links: [
+            ["Website", "https://joinmastodon.org/apps"],
+            ["Google Play", "https://play.google.com/store/apps/details?id=org.joinmastodon.android"]
+          ]
+        ) %>
+        <%= render AppInfoComponent.new(
+          name: "Fedilab",
+          description: "Android client with many features",
+          icon_path: "/img/logos/icon_fedilab.png",
+          links: [
+            ["Website", "https://fedilab.app"],
+            ["Google Play", "https://play.google.com/store/apps/details?id=app.fedilab.android"],
+            ["F-Droid", "https://f-droid.org/packages/fr.gouv.etalab.mastodon"],
+          ]
+        ) %>
+        <%= render AppInfoComponent.new(
+          name: "Megalodon",
+          description: "A popular fork of the official Android app",
+          icon_path: "/img/logos/icon_megalodon.png",
+          icon_fill_box: true,
+          links: [
+            ["Website", "https://sk22.github.io/megalodon/"],
+            ["Google Play", "https://play.google.com/store/apps/details?id=org.joinmastodon.android.sk"]
+          ]
+        ) %>
+      </div>
+      <div class="hidden grid grid-cols-1 gap-6" data-tabs-target="panel">
+        <%= render AppInfoComponent.new(
+          name: "Mastodon for iOS",
+          description: "iOS client by the Mastodon core team",
+          icon_path: "/img/logos/icon_mastodon-2.svg",
+          links: [
+            ["Website", "https://joinmastodon.org/apps"],
+            ["App Store", "https://apps.apple.com/us/app/mastodon-for-iphone/id1571998974"]
+          ]
+        ) %>
+        <%= render AppInfoComponent.new(
+          name: "Ice Cubes",
+          description: "Slick, fast, open source, and with customizable UI",
+          icon_path: "/img/logos/icon_icecubes.png",
+          icon_fill_box: true,
+          links: [
+            ["App Store", "https://apps.apple.com/us/app/ice-cubes-for-mastodon/id6444915884"],
+            ["GitHub", "https://github.com/Dimillian/IceCubesApp"]
+          ]
+        ) %>
+        <%= render AppInfoComponent.new(
+          name: "Mammoth",
+          description: " Powerful, fast, feature-rich",
+          icon_path: "/img/logos/icon_mammoth.png",
+          links: [
+            ["Website", "https://getmammoth.app/"],
+            ["App Store", "https://apps.apple.com/app/mammoth-for-mastodon/id1667573899"]
+          ]
+        ) %>
+      </div>
+      <div class="hidden grid grid-cols-1 gap-6" data-tabs-target="panel">
+        <%= render AppInfoComponent.new(
+          name: "Tuba",
+          description: "A simple, fast Mastodon app for Linux (good on GNOME)",
+          icon_path: "/img/logos/icon_tuba.svg",
+          links: [
+            ["Website", "https://tuba.geopjr.dev"],
+            ["Flathub", "https://flathub.org/apps/dev.geopjr.Tuba"],
+          ]
+        ) %>
+      </div>
+      <div class="hidden grid grid-cols-1 gap-6" data-tabs-target="panel">
+        <%= render AppInfoComponent.new(
+          name: "Sengi",
+          description: "A cross-platform app, inspired by TweetDeck",
+          icon_path: "/img/logos/icon_sengi.png",
+          links: [
+            ["Website", "https://nicolasconstant.github.io/sengi/"],
+            ["GitHub", "https://github.com/NicolasConstant/sengi"]
+          ]
+        ) %>
+      </div>
+      <div class="hidden grid grid-cols-1 gap-6" data-tabs-target="panel">
+        <%= render AppInfoComponent.new(
+          name: "Mastonaut",
+          description: "Simple, elegant, and native Mastodon client for Mac",
+          icon_path: "/img/logos/icon_mastonaut.png",
+          links: [
+            ["Launch", "https://www.mastonaut.app"],
+            ["Mac App Store", "https://apps.apple.com/app/mastonaut/id1450757574"]
+          ]
+        ) %>
+      </div>
+    </div>
+  </section>
+<% end %>

config/routes.rb

@@ -29,6 +29,8 @@ Rails.application.routes.draw do
         get 'qr_lnurlp'
       end
     end
+
+    resource :mastodon, only: [:show], controller: 'mastodon'
   end
 
   resources :settings, param: 'section', only: ['index', 'show', 'update'] do

public/img/logos/icon_elk.svg

@@ -0,0 +1,42 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="250"
+   height="250"
+   fill="none"
+   version="1.1"
+   id="svg30"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs34" />
+  <mask
+     id="a"
+     width="240"
+     height="234"
+     x="4"
+     y="1"
+     maskUnits="userSpaceOnUse"
+     style="mask-type:alpha">
+    <path
+       fill="white"
+       d="M244 123c0 64.617-38.383 112-103 112-64.617 0-103-30.883-103-95.5C38 111.194-8.729 36.236 8 16 29.46-9.959 88.689 6 125 6c64.617 0 119 52.383 119 117Z"
+       id="path19" />
+  </mask>
+  <g
+     mask="url(#a)"
+     id="g28"
+     transform="matrix(0.90923731,0,0,1.0049564,13.520015,-3.1040835)">
+    <path
+       fill="#ea9e44"
+       d="m 116.94,88.1 c -13.344,1.552 -20.436,-2.019 -24.706,10.71 0,0 14.336,21.655 52.54,21.112 -2.135,8.848 -1.144,15.368 -1.144,23.207 0,26.079 -20.589,48.821 -65.961,48.821 -23.03,0 -51.015,4.191 -72.367,15.911 -15.175,8.305 -27.048,20.336 -32.302,37.023 l 5.956,8.461 11.4,0.155 v 47.889 l -13.91,21.966 3.998,63.645 H -6.364 L -5.22,335.773 C 1.338,331.892 16.36,321.802 29.171,306.279 46.557,285.4 59.902,255.052 44.193,217.486 l 11.744,-5.045 c 12.887,30.814 8.388,57.514 -2.898,79.013 21.58,-0.698 40.11,-2.095 55.819,-4.734 l -3.584,-43.698 12.659,-1.087 L 129.98,387 h 13.116 l 2.212,-94.459 c 10.447,-4.502 34.239,-21.034 45.372,-78.47 1.372,-6.986 2.135,-12.885 2.516,-17.93 1.754,-12.806 2.745,-27.243 3.051,-43.698 l -18.683,-5.976 h 57.42 l 5.567,-12.807 c -5.414,0.233 -11.896,-2.639 -11.896,-2.639 l 1.297,-6.209 H 242 L 176.801,90.428 c -7.244,2.794 -14.87,6.442 -20.208,10.866 -4.27,-3.105 -19.063,-12.807 -39.653,-13.195 z"
+       id="path22" />
+    <path
+       fill="#c16929"
+       d="M 6.217,24.493 18.494,21 c 5.948,21.577 13.345,33.375 22.648,39.352 8.388,5.099 19.75,5.239 31.799,4.579 C 69.433,63.767 66.154,62.137 63.104,59.886 56.317,54.841 50.522,46.458 46.175,31.246 l 12.201,-3.649 c 3.279,11.488 7.092,18.085 12.201,21.888 5.11,3.726 11.286,4.657 18.606,5.433 13.726,1.553 30.884,2.174 52.312,12.264 2.898,1.086 5.872,2.483 8.769,4.036 -0.381,-0.776 -0.762,-1.553 -1.296,-2.406 -3.66,-5.822 -10.828,-11.953 -24.097,-16.92 l 4.27,-12.109 c 21.581,7.917 30.121,19.171 33.553,28.097 3.965,10.168 1.525,18.124 1.525,18.124 -3.05,1.009 -6.1,2.406 -9.608,3.492 -6.634,-4.579 -12.887,-8.033 -18.835,-10.75 C 113.814,70.442 92.31,76.108 73.246,77.893 58.91,79.213 45.794,78.591 34.432,71.295 23.222,64.155 13.385,50.495 6.217,24.493 Z"
+       id="path24" />
+    <path
+       fill="#c16929"
+       d="M 90.098,45.294 C 87.582,39.55 86.057,32.487 86.743,23.794 l 12.659,0.932 c -0.763,10.555 2.897,17.696 7.015,22.353 -5.338,-0.931 -10.447,-1.04 -16.319,-1.785 z m 80.069,-1.32 8.312,-9.702 c 21.58,19.094 8.159,46.415 8.159,46.415 l -11.819,-1.32 c -0.382,-6.24 -1.144,-17.836 -6.635,-24.371 3.584,1.84 6.635,3.865 9.99,6.908 0,-5.666 -1.754,-12.341 -8.007,-17.93 z"
+       id="path26" />
+  </g>
+</svg>

public/img/logos/icon_mastodon-2.svg

@@ -0,0 +1,65 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg
+   width="100"
+   height="100"
+   viewBox="0 0 100 100"
+   fill="none"
+   version="1.1"
+   id="svg13"
+   sodipodi:docname="icon_mastodon-2.svg"
+   inkscape:version="1.2.2 (b0a8486541, 2022-12-01)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview15"
+     pagecolor="#ffffff"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:showpageshadow="2"
+     inkscape:pageopacity="0.0"
+     inkscape:pagecheckerboard="0"
+     inkscape:deskcolor="#d1d1d1"
+     showgrid="false"
+     inkscape:zoom="10.329114"
+     inkscape:cx="25.849265"
+     inkscape:cy="39.548407"
+     inkscape:window-width="1663"
+     inkscape:window-height="749"
+     inkscape:window-x="50"
+     inkscape:window-y="118"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg13" />
+  <a
+     id="a300"
+     transform="translate(12.930783,10.499984)">
+    <path
+       d="M 73.8393,17.4898 C 72.6973,9.00165 65.2994,2.31235 56.5296,1.01614 55.05,0.797115 49.4441,0 36.4582,0 h -0.097 C 23.3717,0 20.585,0.797115 19.1054,1.01614 10.5798,2.27644 2.79399,8.28712 0.904997,16.8758 -0.00358524,21.1056 -0.100549,25.7949 0.0682394,30.0965 0.308852,36.2651 0.355538,42.423 0.91577,48.5665 c 0.3873,4.0809 1.06295,8.1292 2.02186,12.1147 1.79562,7.3608 9.06427,13.4864 16.18567,15.9854 7.6245,2.6062 15.8241,3.0389 23.6806,1.2496 0.8643,-0.2011 1.7178,-0.4345 2.5606,-0.7002 1.9105,-0.6068 4.1478,-1.2855 5.7926,-2.4775 0.0226,-0.0168 0.0411,-0.0384 0.0541,-0.0632 0.0131,-0.0249 0.0204,-0.0524 0.0213,-0.0805 v -5.9532 c -4e-4,-0.0262 -0.0066,-0.052 -0.0183,-0.0755 -0.0117,-0.0235 -0.0284,-0.0441 -0.0491,-0.0603 -0.0207,-0.0162 -0.0447,-0.0275 -0.0703,-0.0332 -0.0256,-0.0057 -0.0522,-0.0056 -0.0777,3e-4 -5.0336,1.2021 -10.1917,1.8048 -15.3669,1.7953 -8.9063,0 -11.3016,-4.2262 -11.9876,-5.9856 -0.5513,-1.5206 -0.9014,-3.1067 -1.0414,-4.718 -0.0015,-0.0271 0.0035,-0.0541 0.0145,-0.0789 0.0109,-0.0248 0.0276,-0.0466 0.0486,-0.0637 0.021,-0.0172 0.0457,-0.0291 0.0722,-0.0349 0.0265,-0.0058 0.0539,-0.0053 0.0802,0.0015 4.9497,1.194 10.0237,1.7967 15.1155,1.7953 1.2246,0 2.4456,0 3.6702,-0.0323 5.1211,-0.1436 10.5187,-0.4057 15.5572,-1.3895 0.1257,-0.0252 0.2514,-0.0467 0.3591,-0.079 7.9474,-1.5261 15.5106,-6.3159 16.2791,-18.445 0.0287,-0.4775 0.1006,-5.0017 0.1006,-5.4972 0.0035,-1.684 0.5422,-11.946 -0.0791,-18.2511 z"
+       fill="url(#paint0_linear_549_34)"
+       id="path2"
+       style="fill:url(#paint0_linear_549_34)" />
+    <path
+       d="M 61.2484,27.0263 V 48.114 H 52.8916 V 27.6475 c 0,-4.3087 -1.7956,-6.5062 -5.4479,-6.5062 -4.015,0 -6.026,2.5996 -6.026,7.7342 V 40.0782 H 33.1111 V 28.8755 c 0,-5.1346 -2.0146,-7.7342 -6.0296,-7.7342 -3.6308,0 -5.4444,2.1975 -5.4444,6.5062 V 48.114 H 13.2839 V 27.0263 c 0,-4.3087 1.1001,-7.7317 3.3004,-10.2691 2.2696,-2.5314 5.2468,-3.8312 8.9421,-3.8312 4.2772,0 7.5093,1.6445 9.6641,4.9299 l 2.0793,3.4901 2.0829,-3.4901 c 2.1547,-3.2854 5.3868,-4.9299 9.6568,-4.9299 3.6918,0 6.6689,1.2998 8.9458,3.8312 2.1978,2.535 3.2955,5.958 3.2931,10.2691 z"
+       fill="#ffffff"
+       id="path4" />
+  </a>
+  <defs
+     id="defs11">
+    <linearGradient
+       id="paint0_linear_549_34"
+       x1="37.069199"
+       y1="0"
+       x2="37.069199"
+       y2="79"
+       gradientUnits="userSpaceOnUse">
+      <stop
+         stop-color="#6364FF"
+         id="stop6" />
+      <stop
+         offset="1"
+         stop-color="#563ACC"
+         id="stop8" />
+    </linearGradient>
+  </defs>
+</svg>