From e2a821839a63ef3a3b41e479cf3831c4574dc48c Mon Sep 17 00:00:00 2001
From: ivan <ivanminutillo@outlook.it>
Date: Mon, 2 Sep 2024 10:43:44 +0200
Subject: [PATCH] https://github.com/bonfire-networks/bonfire-app/issues/831

---
 .../components/label_widget/labelled_live.ex  |  1 +
 .../label_widget/labelled_live.sface          | 36 +++++++++++++------
 .../components/modal/content_label_live.sface |  9 ++---
 3 files changed, 32 insertions(+), 14 deletions(-)

diff --git a/lib/web/components/label_widget/labelled_live.ex b/lib/web/components/label_widget/labelled_live.ex
index d22eda5..f41df02 100644
--- a/lib/web/components/label_widget/labelled_live.ex
+++ b/lib/web/components/label_widget/labelled_live.ex
@@ -5,5 +5,6 @@ defmodule Bonfire.Label.Web.LabelledLive do
   prop label_id, :any, default: nil
   prop activity, :any, default: nil
   prop showing_within, :atom, default: nil
+  prop viewing_main_object, :boolean, default: false
   prop class, :css_class, default: ["flex items-center -ml-6 justify-start pb-2 mb-2"]
 end
diff --git a/lib/web/components/label_widget/labelled_live.sface b/lib/web/components/label_widget/labelled_live.sface
index 34699a7..336503b 100644
--- a/lib/web/components/label_widget/labelled_live.sface
+++ b/lib/web/components/label_widget/labelled_live.sface
@@ -1,19 +1,26 @@
 <div
+  x-data="{open: false}"
+  data-main-object={@viewing_main_object}
+  data-id={"labelled_widget"}
   data-type={@label_id}
   class={
     "border mt-3 rounded-lg border-base-content/30 ",
-    "border-info": @label_id == "1ABE10VTDATEDGET1ATESTNEWS",
-    "border-warning": @label_id == "1ABE1M1S1NF0RMEDGETZEFACTS",
-    "border-error": @label_id == "1ABE1M1S1EAD1NGBACK2S0VRCE"
+    "border-info/30": @label_id == "1ABE10VTDATEDGET1ATESTNEWS",
+    "border-warning/30": @label_id == "1ABE1M1S1NF0RMEDGETZEFACTS",
+    "border-error/30": @label_id == "1ABE1M1S1EAD1NGBACK2S0VRCE"
   }
 >
   <!-- :if={@showing_within not in [:group, :topic, :thread]} -->
-  <div class={
-    "bg-base-content/10 rounded-t-lg flex items-center gap-3 py-2 p-3 ",
+  <div 
+    x-on:click="open = !open"
+    :class="{'!rounded-b-none': open}"
+    class={
+    "bg-base-content/10 rounded-lg justify-between flex items-center gap-3 py-2 p-3 ",
     "bg-info text-info-content": @label_id == "1ABE10VTDATEDGET1ATESTNEWS",
     "bg-warning text-warning-content": @label_id == "1ABE1M1S1NF0RMEDGETZEFACTS",
     "bg-error text-error-content": @label_id == "1ABE1M1S1EAD1NGBACK2S0VRCE"
   }>
+  <div class="flex items-center gap-3">
     {#case @label_id || id(@label)}
       {#match "1ABE10VTDATEDGET1ATESTNEWS"}
         <#Icon iconify="ri:broadcast-fill" class="w-5 h-5" />
@@ -29,6 +36,17 @@
       {e(@label, :profile, :name, nil) || e(@label, :character, :username, nil)}
     </div>
   </div>
+  <button type="button" x-cloak class="btn btn-square btn-sm btn-ghost" x-show="open">
+    <#Icon iconify="fluent:triangle-12-filled" class="w-3 h-3" />
+  </button>
+  <button type="button" class="btn btn-square btn-sm btn-ghost" x-show="!open">
+    <#Icon iconify="fluent:triangle-down-12-filled" class="w-3 h-3" />
+  </button>
+  </div>
+
+
+<div  x-show="open" x-cloak x-collapse>
+
   {#case e(@activity, :labelled, :post_content, :html_body, nil)}
     {#match nil}
     {#match body}
@@ -40,17 +58,14 @@
       </div>
   {/case}
 
-  <div data-id="labelled_media" class="">
+  <div data-id="labelled_media" class="m-2">
     <StatelessComponent
       module={maybe_component(Bonfire.UI.Social.Activity.MediaLive)}
       showing_within={@showing_within}
       media={e(@activity, :labelled, :media, [])}
       small_icon
       css_borders={
-        "border-t py-2",
-        "border-info": @label_id == "1ABE10VTDATEDGET1ATESTNEWS",
-        "border-warning": @label_id == "1ABE1M1S1NF0RMEDGETZEFACTS",
-        "border-error": @label_id == "1ABE1M1S1EAD1NGBACK2S0VRCE"
+        "border rounded-md border-base-content/20"
       }
     />
   </div>
@@ -58,4 +73,5 @@
                 activity_inception={@activity_inception} -->
 
   {!-- </div> --}
+  </div>
 </div>
\ No newline at end of file
diff --git a/lib/web/components/modal/content_label_live.sface b/lib/web/components/modal/content_label_live.sface
index fa05479..69053f2 100644
--- a/lib/web/components/modal/content_label_live.sface
+++ b/lib/web/components/modal/content_label_live.sface
@@ -57,7 +57,7 @@
               <button
                 x-show="links.length < 3"
                 type="button"
-                class="btn btn-sm btn-outline border-base-content/30 btn-circle"
+                class="btn btn-sm btn-square btn-neutral"
               >
                 +
               </button>
@@ -67,12 +67,13 @@
                 <div class="label flex px-0 gap-2 py-1 items-center">
                   <input
                     name="links[]"
-                    class="input h-[2.5rem] text-sm input-bordered flex-1 w-full"
+                    autocomplete="off"
+                    class="input input-sm input-bordered flex-1 w-full"
                     placeholder="https://..."
                     x-model="links[index]"
                   />
-                  <button type="button" @click="links.splice(index, 1)" class="btn btn-ghost btn-circle">
-                    <#Icon iconify="ph:trash-fill" class="w-5 h-5" />
+                  <button type="button" @click="links.splice(index, 1)" class="btn btn-sm btn-square btn-neutral">
+                    <#Icon iconify="ph:trash-fill" class="w-4 h-4" />
                   </button>
                 </div>
               </label>