Improve and fix layout issues in the Chat empty view

2 months ago · 2537149db7
6 changed files with 126 additions and 91 deletions
--- a/app/Contact.php
+++ b/app/Contact.php
@ -52,7 +52,7 @@ class Contact extends Model
            from presences
            group by jid) as presences
            '), 'presences.jid', '=', 'contacts.id')
-            ->orderBy('presences.value');
+            ->orderBy('presences.value', 'asc');
    }

    public function save(array $options = [])
--- a/app/Helpers/UtilsHelper.php
+++ b/app/Helpers/UtilsHelper.php
@ -10,8 +10,6 @@ use React\Http\Message\Response;
 use React\Promise\Promise;
 use React\Promise\PromiseInterface;

-use function React\Async\await;
-
 /**
 * Log an error
 */
--- a/app/Widgets/Chat/_chat_empty.tpl
+++ b/app/Widgets/Chat/_chat_empty.tpl
@ -2,49 +2,51 @@
    <i class="material-symbols fill">forum</i>
 </div>

-<ul class="list flex fifth card shadow compact middle active">
-    {if="$top->isNotEmpty()"}
-        <li class="subheader">
-            <div>
-                <p>{$c->__('chat.frequent')}</p>
-            </div>
-        </li>
-
-        {loop="$top"}
-            <li class="block {if="$value->last > 60"} inactive{/if}"
-                onclick="Chats_ajaxOpen('{$value->jid|echapJS}', true);">
-                <img class="main" src="{$value->getBanner(\Movim\ImageSize::L)}">
-                <span class="primary icon bubble
-                    {if="$value->presence"}
-                        status {$value->presence->presencekey}
-                    {/if}">
-                    <img src="{$value->getPicture()}">
-                </span>
+<div id="chat_frequent">
+    <ul class="list flex fifth card shadow compact middle active">
+        {if="$top->isNotEmpty()"}
+            <li class="subheader">
                <div>
-                    <p class="line" title="{$value->truename}">
-                        {$value->truename}
+                    <p>{$c->__('chat.frequent')}</p>
+                </div>
+            </li>

-                        {if="$value->presence && $value->presence->capability"}
-                            <span class="second" title="{$value->presence->capability->name}">
-                                <i class="material-symbols">{$value->presence->capability->getDeviceIcon()}</i>
-                            </span>
-                        {/if}
-                    </p>
+            {loop="$top"}
+                <li class="block {if="$value->last > 60"} inactive{/if}"
+                    onclick="Chats_ajaxOpen('{$value->jid|echapJS}', true);">
+                    <img class="main" src="{$value->getBanner(\Movim\ImageSize::L)}">
+                    <span class="primary icon bubble
+                        {if="$value->presence"}
+                            status {$value->presence->presencekey}
+                        {/if}">
+                        <img src="{$value->getPicture()}">
+                    </span>
+                    <div>
+                        <p class="line" title="{$value->truename}">
+                            {$value->truename}

-                    {if="$value->presence && $value->presence->seen"}
-                        <p class="line" title="{$c->__('last.title')} {$value->presence->seen|prepareDate:true,true}">
-                            {$c->__('last.title')} {$value->presence->seen|prepareDate:true,true}
+                            {if="$value->presence && $value->presence->capability"}
+                                <span class="second" title="{$value->presence->capability->name}">
+                                    <i class="material-symbols">{$value->presence->capability->getDeviceIcon()}</i>
+                                </span>
+                            {/if}
                        </p>
-                    {elseif="$value->presence"}
-                        <p class="line">{$value->presence->presencetext}</p>
-                    {else}
-                        <p></p>
-                    {/if}
-                </div>
-            </li>
-        {/loop}
-    {/if}
-</ul>
+
+                        {if="$value->presence && $value->presence->seen"}
+                            <p class="line" title="{$c->__('last.title')} {$value->presence->seen|prepareDate:true,true}">
+                                {$c->__('last.title')} {$value->presence->seen|prepareDate:true,true}
+                            </p>
+                        {elseif="$value->presence"}
+                            <p class="line">{$value->presence->presencetext}</p>
+                        {else}
+                            <p></p>
+                        {/if}
+                    </div>
+                </li>
+            {/loop}
+        {/if}
+    </ul>
+</div>

 <div id="chat_explore">
    {autoescape="off"}
--- a/app/Widgets/Chat/_chat_explore.tpl
+++ b/app/Widgets/Chat/_chat_explore.tpl
@ -1,5 +1,5 @@
 {if="$users->isNotEmpty()"}
-    <ul class="list" style="width: 100%;">
+    <ul class="list">
        <li class="subheader">
            <div>
                <p>{$c->__('explore.explore')}</p>
@ -16,16 +16,14 @@
            {/if}
        </li>
    </ul>
-    <ul class="list flex middle active">
+    <ul class="list card shadow flex fourth compact middle active">
        {if="$users->count() > $pagination"}
            {$user = $users->pop()}
        {/if}
        {loop="$users"}
            <li class="block" title="{$value->jid}"
                onclick="Chats_ajaxOpen('{$value->jid|echapJS}', true);">
-                <span class="control icon gray">
-                    <i class="material-symbols">comment</i>
-                </span>
+                <img class="main" src="{$value->getBanner(\Movim\ImageSize::L)}">
                <span class="primary icon bubble {if="$value->value"}status {$presencestxt[$value->value]}{/if}">
                    <img src="{$value->getPicture(\Movim\ImageSize::M)}">
                </span>
@ -33,7 +31,11 @@
                    <p class="normal line">
                        {$value->truename}
                    </p>
-                    {if="!empty($value->description)"}
+                    {if="!empty($value->status)"}
+                        <p class="line" title="{$value->status|strip_tags}">
+                            {$value->status|strip_tags|truncate:80}
+                        </p>
+                    {elseif="!empty($value->description)"}
                        <p class="line" title="{$value->description|strip_tags}">
                            {$value->description|strip_tags|truncate:80}
                        </p>
--- a/app/Widgets/Chat/chat.css
+++ b/app/Widgets/Chat/chat.css
@ -9,11 +9,12 @@ main:not(.enabled) #chat_widget {
    overflow-y: auto;
 }

+#chat_frequent,
 #chat_explore {
    width: 100%;
 }

-#chat_widget>div:not(#chat_explore),
+#chat_widget>div:not(#chat_explore):not(#chat_frequent),
 #chat_widget>header {
    max-width: 100%;
    width: 100%;
@ -40,6 +41,10 @@ main:not(.enabled) #chat_widget {
    position: relative;
 }

+#chat_widget ul.list.flex {
+    width: 100%;
+}
+
 #chat_widget .contained:before {
    position: absolute;
    display: block;
--- a/composer.lock
+++ b/composer.lock
@ -5442,16 +5442,16 @@
        },
        {
            "name": "symfony/config",
-            "version": "v6.4.22",
+            "version": "v6.4.24",
            "source": {
                "type": "git",
                "url": "https://github.com/symfony/config.git",
-                "reference": "af5917a3b1571f54689e56677a3f06440d2fe4c7"
+                "reference": "80e2cf005cf17138c97193be0434cdcfd1b2212e"
            },
            "dist": {
                "type": "zip",
-                "url": "https://api.github.com/repos/symfony/config/zipball/af5917a3b1571f54689e56677a3f06440d2fe4c7",
-                "reference": "af5917a3b1571f54689e56677a3f06440d2fe4c7",
+                "url": "https://api.github.com/repos/symfony/config/zipball/80e2cf005cf17138c97193be0434cdcfd1b2212e",
+                "reference": "80e2cf005cf17138c97193be0434cdcfd1b2212e",
                "shasum": ""
            },
            "require": {
@ -5497,7 +5497,7 @@
            "description": "Helps you find, load, combine, autofill and validate configuration values of any kind",
            "homepage": "https://symfony.com",
            "support": {
-                "source": "https://github.com/symfony/config/tree/v6.4.22"
+                "source": "https://github.com/symfony/config/tree/v6.4.24"
            },
            "funding": [
                {
@ -5508,25 +5508,29 @@
                    "url": "https://github.com/fabpot",
                    "type": "github"
                },
+                {
+                    "url": "https://github.com/nicolas-grekas",
+                    "type": "github"
+                },
                {
                    "url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
                    "type": "tidelift"
                }
            ],
-            "time": "2025-05-14T06:00:01+00:00"
+            "time": "2025-07-26T13:50:30+00:00"
        },
        {
            "name": "symfony/console",
-            "version": "v6.4.23",
+            "version": "v6.4.24",
            "source": {
                "type": "git",
                "url": "https://github.com/symfony/console.git",
-                "reference": "9056771b8eca08d026cd3280deeec3cfd99c4d93"
+                "reference": "59266a5bf6a596e3e0844fd95e6ad7ea3c1d3350"
            },
            "dist": {
                "type": "zip",
-                "url": "https://api.github.com/repos/symfony/console/zipball/9056771b8eca08d026cd3280deeec3cfd99c4d93",
-                "reference": "9056771b8eca08d026cd3280deeec3cfd99c4d93",
+                "url": "https://api.github.com/repos/symfony/console/zipball/59266a5bf6a596e3e0844fd95e6ad7ea3c1d3350",
+                "reference": "59266a5bf6a596e3e0844fd95e6ad7ea3c1d3350",
                "shasum": ""
            },
            "require": {
@ -5591,7 +5595,7 @@
                "terminal"
            ],
            "support": {
-                "source": "https://github.com/symfony/console/tree/v6.4.23"
+                "source": "https://github.com/symfony/console/tree/v6.4.24"
            },
            "funding": [
                {
@ -5602,12 +5606,16 @@
                    "url": "https://github.com/fabpot",
                    "type": "github"
                },
+                {
+                    "url": "https://github.com/nicolas-grekas",
+                    "type": "github"
+                },
                {
                    "url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
                    "type": "tidelift"
                }
            ],
-            "time": "2025-06-27T19:37:22+00:00"
+            "time": "2025-07-30T10:38:54+00:00"
        },
        {
            "name": "symfony/deprecation-contracts",
@ -5678,16 +5686,16 @@
        },
        {
            "name": "symfony/filesystem",
-            "version": "v7.3.0",
+            "version": "v7.3.2",
            "source": {
                "type": "git",
                "url": "https://github.com/symfony/filesystem.git",
-                "reference": "b8dce482de9d7c9fe2891155035a7248ab5c7fdb"
+                "reference": "edcbb768a186b5c3f25d0643159a787d3e63b7fd"
            },
            "dist": {
                "type": "zip",
-                "url": "https://api.github.com/repos/symfony/filesystem/zipball/b8dce482de9d7c9fe2891155035a7248ab5c7fdb",
-                "reference": "b8dce482de9d7c9fe2891155035a7248ab5c7fdb",
+                "url": "https://api.github.com/repos/symfony/filesystem/zipball/edcbb768a186b5c3f25d0643159a787d3e63b7fd",
+                "reference": "edcbb768a186b5c3f25d0643159a787d3e63b7fd",
                "shasum": ""
            },
            "require": {
@ -5724,7 +5732,7 @@
            "description": "Provides basic utilities for the filesystem",
            "homepage": "https://symfony.com",
            "support": {
-                "source": "https://github.com/symfony/filesystem/tree/v7.3.0"
+                "source": "https://github.com/symfony/filesystem/tree/v7.3.2"
            },
            "funding": [
                {
@ -5735,25 +5743,29 @@
                    "url": "https://github.com/fabpot",
                    "type": "github"
                },
+                {
+                    "url": "https://github.com/nicolas-grekas",
+                    "type": "github"
+                },
                {
                    "url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
                    "type": "tidelift"
                }
            ],
-            "time": "2024-10-25T15:15:23+00:00"
+            "time": "2025-07-07T08:17:47+00:00"
        },
        {
            "name": "symfony/http-foundation",
-            "version": "v7.3.1",
+            "version": "v7.3.2",
            "source": {
                "type": "git",
                "url": "https://github.com/symfony/http-foundation.git",
-                "reference": "23dd60256610c86a3414575b70c596e5deff6ed9"
+                "reference": "6877c122b3a6cc3695849622720054f6e6fa5fa6"
            },
            "dist": {
                "type": "zip",
-                "url": "https://api.github.com/repos/symfony/http-foundation/zipball/23dd60256610c86a3414575b70c596e5deff6ed9",
-                "reference": "23dd60256610c86a3414575b70c596e5deff6ed9",
+                "url": "https://api.github.com/repos/symfony/http-foundation/zipball/6877c122b3a6cc3695849622720054f6e6fa5fa6",
+                "reference": "6877c122b3a6cc3695849622720054f6e6fa5fa6",
                "shasum": ""
            },
            "require": {
@ -5803,7 +5815,7 @@
            "description": "Defines an object-oriented layer for the HTTP specification",
            "homepage": "https://symfony.com",
            "support": {
-                "source": "https://github.com/symfony/http-foundation/tree/v7.3.1"
+                "source": "https://github.com/symfony/http-foundation/tree/v7.3.2"
            },
            "funding": [
                {
@ -5814,12 +5826,16 @@
                    "url": "https://github.com/fabpot",
                    "type": "github"
                },
+                {
+                    "url": "https://github.com/nicolas-grekas",
+                    "type": "github"
+                },
                {
                    "url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
                    "type": "tidelift"
                }
            ],
-            "time": "2025-06-23T15:07:14+00:00"
+            "time": "2025-07-10T08:47:49+00:00"
        },
        {
            "name": "symfony/polyfill-ctype",
@ -6298,16 +6314,16 @@
        },
        {
            "name": "symfony/routing",
-            "version": "v7.3.0",
+            "version": "v7.3.2",
            "source": {
                "type": "git",
                "url": "https://github.com/symfony/routing.git",
-                "reference": "8e213820c5fea844ecea29203d2a308019007c15"
+                "reference": "7614b8ca5fa89b9cd233e21b627bfc5774f586e4"
            },
            "dist": {
                "type": "zip",
-                "url": "https://api.github.com/repos/symfony/routing/zipball/8e213820c5fea844ecea29203d2a308019007c15",
-                "reference": "8e213820c5fea844ecea29203d2a308019007c15",
+                "url": "https://api.github.com/repos/symfony/routing/zipball/7614b8ca5fa89b9cd233e21b627bfc5774f586e4",
+                "reference": "7614b8ca5fa89b9cd233e21b627bfc5774f586e4",
                "shasum": ""
            },
            "require": {
@ -6359,7 +6375,7 @@
                "url"
            ],
            "support": {
-                "source": "https://github.com/symfony/routing/tree/v7.3.0"
+                "source": "https://github.com/symfony/routing/tree/v7.3.2"
            },
            "funding": [
                {
@ -6370,12 +6386,16 @@
                    "url": "https://github.com/fabpot",
                    "type": "github"
                },
+                {
+                    "url": "https://github.com/nicolas-grekas",
+                    "type": "github"
+                },
                {
                    "url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
                    "type": "tidelift"
                }
            ],
-            "time": "2025-05-24T20:43:28+00:00"
+            "time": "2025-07-15T11:36:08+00:00"
        },
        {
            "name": "symfony/service-contracts",
@ -6462,16 +6482,16 @@
        },
        {
            "name": "symfony/string",
-            "version": "v7.3.0",
+            "version": "v7.3.2",
            "source": {
                "type": "git",
                "url": "https://github.com/symfony/string.git",
-                "reference": "f3570b8c61ca887a9e2938e85cb6458515d2b125"
+                "reference": "42f505aff654e62ac7ac2ce21033818297ca89ca"
            },
            "dist": {
                "type": "zip",
-                "url": "https://api.github.com/repos/symfony/string/zipball/f3570b8c61ca887a9e2938e85cb6458515d2b125",
-                "reference": "f3570b8c61ca887a9e2938e85cb6458515d2b125",
+                "url": "https://api.github.com/repos/symfony/string/zipball/42f505aff654e62ac7ac2ce21033818297ca89ca",
+                "reference": "42f505aff654e62ac7ac2ce21033818297ca89ca",
                "shasum": ""
            },
            "require": {
@ -6529,7 +6549,7 @@
                "utf8"
            ],
            "support": {
-                "source": "https://github.com/symfony/string/tree/v7.3.0"
+                "source": "https://github.com/symfony/string/tree/v7.3.2"
            },
            "funding": [
                {
@ -6540,25 +6560,29 @@
                    "url": "https://github.com/fabpot",
                    "type": "github"
                },
+                {
+                    "url": "https://github.com/nicolas-grekas",
+                    "type": "github"
+                },
                {
                    "url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
                    "type": "tidelift"
                }
            ],
-            "time": "2025-04-20T20:19:01+00:00"
+            "time": "2025-07-10T08:47:49+00:00"
        },
        {
            "name": "symfony/translation",
-            "version": "v7.3.1",
+            "version": "v7.3.2",
            "source": {
                "type": "git",
                "url": "https://github.com/symfony/translation.git",
-                "reference": "241d5ac4910d256660238a7ecf250deba4c73063"
+                "reference": "81b48f4daa96272efcce9c7a6c4b58e629df3c90"
            },
            "dist": {
                "type": "zip",
-                "url": "https://api.github.com/repos/symfony/translation/zipball/241d5ac4910d256660238a7ecf250deba4c73063",
-                "reference": "241d5ac4910d256660238a7ecf250deba4c73063",
+                "url": "https://api.github.com/repos/symfony/translation/zipball/81b48f4daa96272efcce9c7a6c4b58e629df3c90",
+                "reference": "81b48f4daa96272efcce9c7a6c4b58e629df3c90",
                "shasum": ""
            },
            "require": {
@ -6625,7 +6649,7 @@
            "description": "Provides tools to internationalize your application",
            "homepage": "https://symfony.com",
            "support": {
-                "source": "https://github.com/symfony/translation/tree/v7.3.1"
+                "source": "https://github.com/symfony/translation/tree/v7.3.2"
            },
            "funding": [
                {
@ -6636,12 +6660,16 @@
                    "url": "https://github.com/fabpot",
                    "type": "github"
                },
+                {
+                    "url": "https://github.com/nicolas-grekas",
+                    "type": "github"
+                },
                {
                    "url": "https://tidelift.com/funding/github/packagist/symfony/symfony",
                    "type": "tidelift"
                }
            ],
-            "time": "2025-06-27T19:55:54+00:00"
+            "time": "2025-07-30T17:31:46+00:00"
        },
        {
            "name": "symfony/translation-contracts",