Redesign the attached Rooms elements

Handle Room creation errors

app/Conference.php

@@ -153,16 +153,18 @@ class Conference extends Model
         $this->bookmarkversion = (int)substr((string)$item->conference->attributes()->xmlns, -1, 1);
 
         if ($item->conference->extensions) {
-            if ($item->conference->extensions && $item->conference->extensions->notifications
-            && $item->conference->extensions->notifications->attributes()->xmlns == self::$xmlnsNotifications) {
-                $this->notify = (int)array_flip(self::$notifications)[
-                    (string)$item->conference->extensions->notifications->attributes()->notify
-                ];
+            if (
+                $item->conference->extensions && $item->conference->extensions->notifications
+                && $item->conference->extensions->notifications->attributes()->xmlns == self::$xmlnsNotifications
+            ) {
+                $this->notify = (int)array_flip(self::$notifications)[(string)$item->conference->extensions->notifications->attributes()->notify];
                 unset($item->conference->extensions->notifications);
             }
 
-            if ($item->conference->extensions && $item->conference->extensions->pinned
-            && in_array($item->conference->extensions->pinned->attributes()->xmlns, [self::$xmlnsPinned, 'xmpp:movim.eu/pinned:0'])) {
+            if (
+                $item->conference->extensions && $item->conference->extensions->pinned
+                && in_array($item->conference->extensions->pinned->attributes()->xmlns, [self::$xmlnsPinned, 'xmpp:movim.eu/pinned:0'])
+            ) {
                 $this->pinned = true;
                 unset($item->conference->extensions->pinned);
             }
@@ -243,7 +245,9 @@ class Conference extends Model
     public function currentMuji(): ?MujiCall
     {
         return $this->mujiCalls->filter(
-            function ($muji) { return $muji->joined; }
+            function ($muji) {
+                return $muji->joined;
+            }
         )->first();
     }
 

app/Widgets/Chat/_chat_header.tpl

@@ -31,7 +31,6 @@
             {/if}
                 </span>
 
-            {if="$conference && $conference->isGroupChat()"}
             {if="$conference  && $conference->info && $conference->info->related"}
                 {$related = $conference->info->related}
                 <span
@@ -41,7 +40,6 @@
                     <img src="{$related->getPicture(\Movim\ImageSize::M)}"/>
                 </span>
             {/if}
-            {/if}
 
             {if="$c->database('pgsql')"}
                 <span class="control icon active" onclick="ChatActions_ajaxShowSearchDialog('{$jid|echapJS}', true)">

app/Widgets/Rooms/_rooms_room.tpl

@@ -8,6 +8,8 @@
         {if="$conference->unreads_count > 0 || $conference->quoted_count > 0"}unread{/if}
         {if="$conference->mujiCalls->isNotEmpty()"}muc_call{/if}
     ">
+    <ul class="list thin">
+        <li>
             <span class="primary icon bubble small"
                 id="{$conference->conference|cleanupId}-rooms-primary"
                 style="background-image: url({$conference->getPicture()});">
@@ -62,12 +64,29 @@
                         {/if}
                     </span>
                 </p>
+            </div>
+            <span class="control icon active gray" onclick="event.stopPropagation(); RoomsUtils_ajaxRemove('{$conference->conference|echapJS}');">
+                <i class="material-symbols">delete</i>
+            </span>
+            <span class="control icon active gray" onclick="event.stopPropagation(); RoomsUtils_ajaxAdd('{$conference->conference|echapJS}');">
+                <i class="material-symbols">edit</i>
+            </span>
+        </li>
 
         {loop="$conference->mujiCalls"}
-            <p class="line" data-mujiid="{$value->id}">
+            <li>
+                <span class="primary icon r2 small">
+                    <i class="material-symbols icon gray">
+                        line_curve
+                    </i>
+                </span>
+                <span class="primary icon small">
                     <i class="material-symbols icon {if="$value->joined"}green blink{else}blue{/if}">
                         {$value->icon}
                     </i>
+                </span>
+                <div>
+                    <p class="line normal" data-mujiid="{$value->id}">
                         <span class="info">
                             {if="$value->joined"}
                                 {$value->presences->count()}
@@ -83,12 +102,8 @@
                             {$c->__('visio.by', $value->inviter->name)}
                         </span>
                     </p>
-        {/loop}
                 </div>
-    <span class="control icon active gray" onclick="event.stopPropagation(); RoomsUtils_ajaxRemove('{$conference->conference|echapJS}');">
-        <i class="material-symbols">delete</i>
-    </span>
-    <span class="control icon active gray" onclick="event.stopPropagation(); RoomsUtils_ajaxAdd('{$conference->conference|echapJS}');">
-        <i class="material-symbols">edit</i>
-    </span>
+            </li>
+        {/loop}
+    </ul>
 </li>

app/Widgets/Rooms/rooms.css

@@ -8,11 +8,48 @@
     animation: backgroundblink 1s;
 }
 
-#rooms > ul.list {
+#rooms>ul.list>li:has(ul) {
+    padding-left: 0;
+    padding-right: 0;
+}
+
+#rooms>ul.list>li>ul:has(li:nth-child(2)) {
+    padding-bottom: 1rem;
+}
+
+#rooms>ul.list>li>ul>li:not(:first-child)>span.icon,
+#rooms>ul.list>li>ul>li:not(:first-child)>div>p {
+    line-height: 3rem;
+    height: 3rem;
+}
+
+#rooms>ul.list>li>ul>li:not(:first-child)>div>p {
+    font-size: 1.9rem;
+}
+
+#rooms>ul.list>li>ul>li:not(:first-child)>span.icon>i {
+    font-size: 2.5rem;
+    line-height: 3rem;
+}
+
+#rooms>ul.list>li>ul>li:not(:first-child)>span.primary:first-child>i {
+    line-height: 2rem;
+}
+
+#rooms>ul.list>li>ul>li:not(:first-child)>span.primary:first-child {
+    margin-right: 0;
+    margin-left: 2rem;
+}
+
+#rooms>ul.list>li>ul>li:not(:first-child)>span.primary:not(:first-child) {
+    margin: 0;
+}
+
+#rooms>ul.list {
     order: 1;
 }
 
-#rooms > ul.list.head {
+#rooms>ul.list.head {
     order: 0;
 }
 
@@ -24,7 +61,7 @@
     min-height: 0;
 }
 
-#gateway_rooms:not(:empty) + div {
+#gateway_rooms:not(:empty)+div {
     display: none;
 }
 
@@ -37,74 +74,58 @@
     flex-direction: column;
 }
 
-#rooms ul.list.rooms li:not(.connected) span.primary {
+#rooms ul.list.rooms>li:not(.connected) span.primary {
     opacity: 0.25;
     filter: grayscale(0.5);
 }
 
-#rooms ul.toggle_show li div > p:first-child {
+#rooms ul.toggle_show li div>p:first-child {
     line-height: initial;
 }
 
-#rooms ul li.muc_call p:first-child {
-    padding-top: 0.75rem;
-}
-
-#rooms ul li.muc_call p:nth-child(2) {
-    padding: 1rem 0;
-}
-
-#rooms ul.list.rooms:empty ~ ul.toggle_show,
-#rooms ul.list.rooms:not(:empty):not(.all) ~ ul.toggle_show li span.primary i:first-child,
-#rooms ul.list.rooms:not(:empty).all ~ ul.toggle_show li span.primary i:last-child,
-#rooms ul.list.rooms:not(:empty):not(.all) ~ ul.list.head li span.control.toggle_show i:first-child,
-#rooms ul.list.rooms:not(:empty).all ~ ul.list.head li span.control.toggle_show i:last-child,
-#rooms ul.list.rooms:not(:empty):not(.all) ~ ul.toggle_show li div > p:first-child,
-#rooms ul.list.rooms:not(:empty).all ~ ul.toggle_show li div > p:last-child,
-#rooms ul.list.rooms:not(:empty) ~ ul.empty,
-#rooms ul.list.rooms:not(.different_states) ~ ul.toggle_show,
-#rooms ul.list.rooms:not(.all) li:not(.connected) {
+#rooms ul.list.rooms:empty~ul.toggle_show,
+#rooms ul.list.rooms:not(:empty):not(.all)~ul.toggle_show>li span.primary i:first-child,
+#rooms ul.list.rooms:not(:empty).all~ul.toggle_show>li span.primary i:last-child,
+#rooms ul.list.rooms:not(:empty):not(.all)~ul.list.head>li span.control.toggle_show i:first-child,
+#rooms ul.list.rooms:not(:empty).all~ul.list.head>li span.control.toggle_show i:last-child,
+#rooms ul.list.rooms:not(:empty):not(.all)~ul.toggle_show>li div>p:first-child,
+#rooms ul.list.rooms:not(:empty).all~ul.toggle_show>li div>p:last-child,
+#rooms ul.list.rooms:not(:empty)~ul.empty,
+#rooms ul.list.rooms:not(.different_states)~ul.toggle_show,
+#rooms ul.list.rooms:not(.all)>li:not(.connected) {
     display: none;
 }
 
-#rooms > ul.list.rooms > li div p[data-mujiid] {
-    padding: 0.5rem 0;
-}
-
-#rooms > ul.list.rooms > li div p[data-mujiid]:last-child {
-    padding-bottom: 1rem;
-}
-
 /* Rooms order */
 
-#rooms > ul.list.rooms > li {
+#rooms>ul.list.rooms>li {
     order: 4;
 }
 
-#rooms > ul.list.rooms > li.groupchat {
+#rooms>ul.list.rooms>li.groupchat {
     order: 3;
 }
 
-#rooms > ul.list.rooms > li.pinned {
+#rooms>ul.list.rooms>li.pinned {
     order: 2;
 }
 
-#rooms > ul.list.rooms > li.unread {
+#rooms>ul.list.rooms>li.unread {
     order: 1;
 }
 
-#rooms > ul.list.rooms > li.connected {
+#rooms>ul.list.rooms>li.connected {
     order: 0;
 }
 
-#rooms > ul.list.rooms > li.connected.groupchat {
+#rooms>ul.list.rooms>li.connected.groupchat {
     order: -1;
 }
 
-#rooms > ul.list.rooms > li.connected.pinned {
+#rooms>ul.list.rooms>li.connected.pinned {
     order: -2;
 }
 
-#rooms > ul.list.rooms > li.connected.unread {
+#rooms>ul.list.rooms>li.connected.unread {
     order: -3;
 }

app/Widgets/Rooms/rooms.tpl

@@ -1,5 +1,5 @@
 <div id="rooms">
-    <ul class="list rooms divided spaced thin active spin"></ul>
+    <ul class="list rooms divided thin spaced active spin"></ul>
 
     <ul class="list head thin">
         <li class="subheader" title="{$c->__('page.configuration')}">

app/Widgets/RoomsUtils/RoomsUtils.php

@@ -48,6 +48,8 @@ class RoomsUtils extends Base
         $this->registerEvent('disco_items_errorregistrationrequired', 'onDiscoRegistrationRequired');
         $this->registerEvent('muc_creategroupchat_handle', 'onChatroomCreated');
         $this->registerEvent('muc_createchannel_handle', 'onChatroomCreated');
+        $this->registerEvent('muc_creategroupchat_error', 'onChatroomCreatedError');
+        $this->registerEvent('muc_createchannel_error', 'onChatroomCreatedError');
         $this->registerEvent('muc_changeaffiliation_handle', 'onAffiliationChanged');
         $this->registerEvent('muc_changeaffiliation_errornotallowed', 'onAffiliationChangeUnauthorized');
         $this->registerEvent('message_invite_error', 'onInviteError');
@@ -333,6 +335,14 @@ class RoomsUtils extends Base
         $this->rpc('Dialog_ajaxClear');
     }
 
+    /**
+     * @brief If a chatroom creation is failing
+     */
+    public function onChatroomCreatedError($packet)
+    {
+        Toast::send($packet->content);
+    }
+
     /**
      * @brief Get the subject form of a chatroom
      */
@@ -455,6 +465,7 @@ class RoomsUtils extends Base
         } else {
             $m = new Muc;
             $m->enableCreate()
+                ->noNotify()
                 ->setTo(strtolower($form->jid->value))
                 ->setNickname($form->nick->value ?? $this->user->username)
                 ->request();

public/theme/css/icon.css

@@ -21,7 +21,19 @@ span.icon img {
     object-fit: cover;
 }
 
-span.icon.top {
+span.icon.r1 {
+    transform: rotate(90deg);
+}
+
+span.icon.r2 {
+    transform: rotate(180deg);
+}
+
+span.icon.r3 {
+    transform: rotate(270deg);
+}
+
+/*span.icon.top {
     position: relative;
     top: -1.5rem;
     width: 100%;
@@ -34,7 +46,7 @@ span.icon.top {
 
 span.icon.top.preview {
     height: 25rem;
-}
+}*/
 
 span.icon.primary.thumb,
 span.icon.control.thumb {

public/theme/css/listn.css

@@ -50,52 +50,52 @@ ul.list.thick li:not(.subheader)>div {
 
 /* Active list items */
 
-ul.list.active li:hover:not(.subheader),
-ul.list.active.all li:hover,
-ul.list li.active:hover,
-ul.list.active li.active:not(.subheader),
+ul.list.active>li:hover:not(.subheader),
+ul.list.active.all>li:hover,
+ul.list>li.active:hover,
+ul.list.active>li.active:not(.subheader),
 ul.tabs>li:hover {
     cursor: pointer;
     user-select: none;
 }
 
-ul.list.active li:hover:not(.subheader):not(.color),
-ul.list.active.all li:hover:not(.color),
-ul.list li.active:hover:not(.color),
-ul.list.active li.active:not(.subheader):not(.color) {
+ul.list.active>li:hover:not(.subheader):not(.color),
+ul.list.active.all>li:hover:not(.color),
+ul.list>li.active:hover:not(.color),
+ul.list.active>li.active:not(.subheader):not(.color) {
     background-color: rgba(var(--movim-element-action), 0.1);
 }
 
-ul.list li>span.active:hover {
+ul.list>li>span.active:hover {
     cursor: pointer;
     user-select: none;
 }
 
-ul.list li>span.bubble.active:hover {
+ul.list>li>span.bubble.active:hover {
     filter: grayscale(25%);
 }
 
-ul.list li>span:not(.bubble).active:hover,
-ul.list li>div.bubble:not(.file):hover {
+ul.list>li>span:not(.bubble).active:hover,
+ul.list>li>div.bubble:not(.file):hover {
     cursor: pointer;
     background-color: rgba(var(--movim-element-action), 0.1);
 }
 
 /* Clicked list items */
 
-ul.list.active li:active:not(.subheader),
-ul.list.active.all li:active,
+ul.list.active>li:active:not(.subheader),
+ul.list.active.all>li:active,
 ul.tabs>li:active {
     background-color: rgba(var(--movim-element-action), 0.2);
 }
 
 
-ul.list li>span.bubble.active:active {
+ul.list>li>span.bubble.active:active {
     filter: grayscale(50%);
 }
 
-ul.list li>span:not(.bubble).active:active,
-ul.list li>div.bubble:not(.file):active {
+ul.list>li>span:not(.bubble).active:active,
+ul.list>li>div.bubble:not(.file):active {
     cursor: pointer;
     background-color: rgba(var(--movim-element-action), 0.2);
     font-variation-settings: 'FILL' 1;

src/Moxl/Xec/Action/Muc/CreateChannel.php

@@ -32,4 +32,12 @@ class CreateChannel extends Action
         ]);
         $this->deliver();
     }
+
+    public function error(string $errorId, ?string $message = null)
+    {
+        if ($message) {
+            $this->pack($message);
+            $this->deliver();
+        }
+    }
 }

src/Moxl/Xec/Action/Muc/CreateGroupChat.php

@@ -32,4 +32,12 @@ class CreateGroupChat extends Action
         ]);
         $this->deliver();
     }
+
+    public function error(string $errorId, ?string $message = null)
+    {
+        if ($message) {
+            $this->pack($message);
+            $this->deliver();
+        }
+    }
 }