Implement new sharing layout

app/assets/stylesheets/components/_inbox-entry.scss

@@ -1,6 +1,10 @@
+@use "sass:map";
+
 .inbox-entry {
   $this: &;
 
+  position: relative;
+
   &--new {
     box-shadow: 0 0.125rem 0.25rem var(--primary);
 
@@ -22,6 +26,24 @@
     }
   }
 
+  &__close {
+    position: absolute;
+    top: map.get($spacers, 3);
+    right: map.get($spacers, 3);
+  }
+
+  &__sharing {
+    position: absolute;
+    display: flex;
+    background-color: rgba(var(--raised-bg-rgb), 0.9);
+    backdrop-filter: blur(3px);
+    border-radius: var(--card-inner-border-radius);
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+  }
+
   .format-help {
     opacity: .3;
   }
@@ -30,7 +52,7 @@
   &:hover .format-help {
     opacity: 1;
   }
-  
+
   .card-header {
     position: relative;
   }

app/views/inbox/_entry.html.haml

@@ -33,19 +33,22 @@
           = t("voc.answer")
         %button.btn.btn-danger.me-sm-1{ name: "ib-destroy", data: { ib_id: i.id } }
           = t("voc.delete")
-        %button.btn.btn-default.px-1{ name: "ib-options", data: { ib_id: i.id, state: :hidden } }
-          %i.fa.fa-chevron-down
-          %span.pe-none= t(".options")
         %p.format-help.ms-auto.align-self-center.mt-2.mt-sm-0.text-center
           = render "shared/format_link"
-    .card-footer.d-none{ id: "ib-options-#{i.id}" }
+    - if current_user.sharing_enabled
-      %h4= t(".sharing.heading")
+      .inbox-entry__sharing.text-center.p-2.justify-content-center.d-none{ data: { controller: "inbox-sharing", inbox_sharing_config_value: "{}", inbox_sharing_auto_close_value: current_user.sharing_autoclose.to_s }}
-      - if services.count.positive?
+        %button.btn-close.inbox-entry__close{ data: { action: "inbox-sharing#close" } }
-        .row
+          %span.visually-hidden= t("voc.close")
-          - services.each do |service|
+        %div.align-self-center
-            .col-md-3.col-sm-4.col-xs-6
+          %p.fs-3.fw-bold= t(".sharing.heading")
-              %label
+          %p
-                %input{ type: "checkbox", name: "ib-share", checked: :checked, data: { ib_id: i.id, service: service.provider } }
+            %a.btn.btn-primary{ href: "https://twitter.com/intent/tweet?text=", data: { inbox_sharing_target: "twitter" }, target: "_blank" }
-                = raw t(".sharing.post_to", service: service.provider.capitalize)
+              %i.fab.fa-twitter.fa-fw
-      - else
+              Twitter
-        %p= t(".sharing.none_html", settings: link_to(t(".sharing.settings"), services_path))
+            %a.btn.btn-primary{ href: "#", data: { inbox_sharing_target: "tumblr" }, target: "_blank" }
+              %i.fab.fa-tumblr.fa-fw
+              Tumblr
+            - if current_user.sharing_custom_url
+              %a.btn.btn-primary{ href: current_user.sharing_custom_url, data: { inbox_sharing_target: "custom" }, target: "_blank" }
+                = current_user.display_sharing_custom_url
+          %p.text-muted= t(".sharing.hint_html", settings: link_to(t(".sharing.settings"), settings_sharing_path))

config/locales/views.en.yml

@@ -214,10 +214,10 @@ en:
       options: "Sharing Options"
       placeholder: "Write your answer here…"
       sharing:
-        heading: "Sharing"
+        heading: "Share answer on..."
         post_to: "Post to %{service}"
-        none_html: "You have not connected any services yet. Visit your %{settings} to connect one."
+        hint_html: "You can customize sharing in your %{settings}"
-        settings: "service settings"
+        settings: "settings"
     show:
       empty: "Nothing to see here."
     actions: