UX: add illustrations for empty chat list + split into tabs on drawer (#26910)

Adds a placeholder image + CTA in chat, for empty channel and DM lists.

On desktop with drawer mode, we split chat into tabs (like mobile).

---------

Co-authored-by: Joffrey JAFFEUX <j.jaffeux@gmail.com>
Co-authored-by: David Battersby <info@davidbattersby.com>
Co-authored-by: Régis Hanol <regis@hanol.fr>

plugins/chat/spec/system/list_channels/mobile_spec.rb

@@ -155,10 +155,10 @@ RSpec.describe "List channels | mobile", type: :system, mobile: true do
   end
 
   context "when no category channels" do
-    it "hides the section" do
+    it "shows the empty channel list" do
       visit("/chat/channels")
 
-      expect(page).to have_no_css(".channels-list-container")
+      expect(page).to have_selector(".channel-list-empty-message")
     end
 
     context "when user can create channels" do

plugins/chat/spec/system/list_channels/no_sidebar_spec.rb

@@ -74,25 +74,30 @@ RSpec.describe "List channels | no sidebar", type: :system do
   end
 
   context "when no category channels" do
-    it "doesn’t show the section" do
+    it "shows the empty channel list" do
       visit("/chat")
-      expect(page).to have_no_css(".public-channels-section")
+      expect(page).to have_css(".c-list-empty-state")
+    end
+
+    it "does not show the create channel button" do
+      visit("/chat")
+      expect(page).to have_no_css(".-navbar__new-channel-button")
     end
 
     context "when user can create channels" do
       before { current_user.update!(admin: true) }
 
-      it "shows the section" do
+      it "shows the new channel button" do
         visit("/chat")
-        expect(page).to have_css(".public-channels-section")
+        expect(page).to have_css(".c-navbar__new-channel-button")
       end
     end
   end
 
   context "when no direct message channels" do
-    it "shows the section" do
+    it "shows the empty channel list" do
       visit("/chat")
-      expect(page).to have_css(".direct-message-channels-section")
+      expect(page).to have_css(".c-list-empty-state")
     end
   end