# HG changeset patch
# User Goffi <goffi@goffi.org>
# Date 1747834860 -7200
# Node ID 5016fb0ff62f2315e87dcba26ea14769308a493f
# Parent  66f98ee041d89c55d81703f514d0f84f4db49f9d
Blog redesign: work in progress redesign of the blog.

Some templates have been moved from chat to components to be re-used in other features,
like blog here.

Blog follows same global design as chat with a left panel to search/open blogs.

diff -r 66f98ee041d8 -r 5016fb0ff62f sat_templates/templates/bulma/base/base.html
--- a/sat_templates/templates/bulma/base/base.html	Tue May 06 00:37:41 2025 +0200
+++ b/sat_templates/templates/bulma/base/base.html	Wed May 21 15:41:00 2025 +0200
@@ -86,7 +86,7 @@
 </head>
 <body{{ {'onload': body_onload} | xmlattr }} class="{{' body--fullscreen' if full_screen_body}}{{' has-navbar-fixed-top' if menu_fixed_top}}">
     {% if atom_url is defined %}
-        {{ icon_defs('feed') }}
+        {{ icon_defs('rss') }}
     {% endif %}
     {% if loading_screen %}
         <div id="loading_screen" class="modal is-active">
diff -r 66f98ee041d8 -r 5016fb0ff62f sat_templates/templates/bulma/blog/blog.html
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/sat_templates/templates/bulma/blog/blog.html	Wed May 21 15:41:00 2025 +0200
@@ -0,0 +1,72 @@
+{# blog_page indicate if blog is included in an other page or if it is the main one #}
+{% if not embedded %}{% extends 'base/base.html' %}{% set blog_page = True %}{% endif %}
+{% set single = blog_items['items']|length == 1 %}
+{% set dates_format='relative' if single else 'short' %}
+{% import 'components/avatar.html' as avatar with context %}
+{% import 'blog/macros.html' as blog with context %}
+{% import 'input/navigation.html' as navigation with context %}
+{% import 'input/textbox.html' as textbox with context %}
+
+{%- block title scoped -%}
+    {%- if blog_page -%}
+        {%- if single -%}
+            {{- blog_items['items'][0].title|default(blog_items['items'][0].content, true)|truncate(60, True, '…') + ' - ' + C.APP_NAME -}}
+        {%- else -%}
+            {{C.APP_NAME}}
+            {# {{- super() -}}
+               FIXME: super() is failing if blog is embedded (i.e. base/base.html is not its direct parent)
+                      not sure what's the best way to avoid that, so just using C.APP_NAME for now #}
+        {%- endif -%}
+    {%- endif -%}
+{%- endblock title -%}
+
+{% block body %}
+    {{ icon_defs(
+    "ellipsis", "regular face-smile", "reply", "share", "star"
+    ) }}
+
+
+<div class="columns is-gapless blog-container">
+    <!-- Left Panel -->
+    <div class="column is-2 left-sidebar has-background-dark" id="left_panel">
+        {% include 'blog/discover_panel.html' %}
+    </div>
+    <div class="column is-8 main-panel blog-main" id="main_panel">
+        <div class="panel-header">
+            <div class="level is-mobile">
+                <div class="level-left">
+                    <div class="level-item">
+                        <button class="button is-small" id="left_panel-toggle" aria-label="Toggle left panel">
+                            <span class="icon"><i class="fas fa-bars"></i></span>
+                        </button>
+                    </div>
+                </div>
+                <div class="level-right">
+                    <div class="level-item">
+                        <button class="button is-small is-primary">
+                            <span class="icon"><i class="fas fa-circle-plus"></i></span>
+                            <span>New Post</span>
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+        {% if blog_items['items'] %}
+            <div class="container mt-4">
+                <div id="blog_items" class="columns">
+                    <div class="column">
+                        {{ blog.show_items(blog_items['items'], expanded=single) }}
+                    </div>
+                </div>
+            </div>
+        {% else %}
+            <div class="message mt-4">
+                <div class="message-body">
+                    {% trans %}No articles found in this blog!{% endtrans %}
+                </div>
+            </div>
+        {% endif %}
+    </div>
+</div>
+
+{% endblock body %}
diff -r 66f98ee041d8 -r 5016fb0ff62f sat_templates/templates/bulma/blog/discover.html
--- a/sat_templates/templates/bulma/blog/discover.html	Tue May 06 00:37:41 2025 +0200
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,49 +0,0 @@
-{% extends 'base/base.html' %}
-{% import 'components/block.html' as block %}
-{% import 'components/images.html' as images with context %}
-{% import 'components/avatar.html' as avatar with context %}
-{% import 'input/form.html' as form with context %}
-{% import 'input/field.html' as field with context %}
-
-{% block body %}
-{{ icon_defs('blog', 'pencil') }}
-
-<section class="section">
-    {% if url_blog_edit is defined %}
-            <div class="content has-items-centered is-flex">
-            {{ component.action_button(url_blog_edit, _("new post"), "pencil") }}
-            </div>
-    {% endif %}
-    <article class="message has-text-centered">
-        <div class="message-body">
-            {% trans %}
-            Please select the blog you want to consult
-            {% endtrans %}
-        </div>
-    </article>
-    <div class="columns is-mobile is-multiline">
-        {% for entity in disco_entities %}
-            <div class="column is-2-desktop is-4-touch">
-                <div class="card x-is-hoverable">
-                    <a href="{{entities_url[entity]}}" class="items_vert--centered">
-                        <div class="card-image is-flex has-items-centered px-1 py-1">
-                            {{ avatar.avatar(entity, "is-64x64") }}
-                        </div>
-                        <div class="card-content has-text-centered has-text-shortenable px-1 py-1">
-                            <span>{{ identities[entity].nicknames[0] if identities[entity].nicknames else entity }}</span>
-                        </div>
-                    </a>
-                </div>
-            </div>
-        {% endfor %}
-    </div>
-</section>
-
-<section class="section">
-    <p class="content">{% trans %}Or enter the jid of a blog writer{% endtrans %}</p>
-    {% call form.form(class="form--single") %}
-        {{ field.text("jid", _("blog writer jid"), required=true)}}
-        {{ field.submit(_("Consult")) }}
-    {% endcall %}
-</section>
-{% endblock body %}
diff -r 66f98ee041d8 -r 5016fb0ff62f sat_templates/templates/bulma/blog/discover_panel.html
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/sat_templates/templates/bulma/blog/discover_panel.html	Wed May 21 15:41:00 2025 +0200
@@ -0,0 +1,28 @@
+{% import 'components/avatar.html' as avatar with context %}
+{% import 'input/form.html' as form with context %}
+{% import 'input/field.html' as field with context %}
+
+{{ icon_defs('blog', 'pencil') }}
+
+<aside class="menu mt-4 px-4 has-text-light">
+
+
+    <p class="menu-label has-text-grey-light">{% trans %}Blog Search{% endtrans %}</p>
+    <div class="field">
+        <p class="help">Use names, JIDs, or keywords.</p>
+        <div class="control has-icons-left has-icons-right">
+            <input class="input search-input" type="search"
+                                              placeholder="Search blogs…">
+            <span class="icon is-small is-left">
+                <i class="fa-solid fa-magnifying-glass"></i>
+            </span>
+            <span class="icon is-right action_clear_search">
+                <a role="button" class="delete is-small" aria-label="Clear search"></a>
+            </span>
+        </div>
+    </div>
+    <p class="menu-label has-text-grey-light">
+    {% trans %}Contact Blogs{% endtrans %}
+    </p>
+    <div id="contact-blogs"></div>
+</aside>
diff -r 66f98ee041d8 -r 5016fb0ff62f sat_templates/templates/bulma/blog/item.html
--- a/sat_templates/templates/bulma/blog/item.html	Tue May 06 00:37:41 2025 +0200
+++ b/sat_templates/templates/bulma/blog/item.html	Wed May 21 15:41:00 2025 +0200
@@ -15,7 +15,7 @@
     {# we may display items in different language in a specific way #}
     {% set other_lang = " other_lang" if expanded else " other_lang state_init" %}
 {% endif %}
-    <article id="{{item.id}}" class="media has-background-white px-4 py-3" >
+    <article id="{{item.id}}" class="blog-item media px-4 py-3" >
         {% if identities is defined %}
             {% if avatar is defined %}
                 <div class="media-left">
@@ -69,6 +69,47 @@
                         {{- item.content|urlize -}}
                     </p>
                 {% endif %}
+
+                <div class="blog-item-footer"></div>
+
+                {# Actions #}
+                <div class="level mb-0 mt-1">
+                    <div class="level-left">
+                        <div class="level-item">
+                            {#
+                                <button
+                                    class="button is-small is-text has-text-grey is-rounded mr-2"
+                                    aria-label="{% trans %}Reply{% endtrans %}"
+                                >
+                                {{ icon('reply', cls='icon is-small') }}
+                                </button>
+                            #}
+
+                            <button
+                                class="reaction-button button is-small is-text has-text-grey is-rounded mr-2"
+                                aria-label="{% trans %}React{% endtrans %}"
+                            >
+                                {{ icon('regular face-smile', cls='icon is-small') }}
+                            </button>
+
+                            <button
+                                class="button is-small is-text has-text-grey is-rounded mr-2"
+                                aria-label="{% trans %}Mark the post as noticed{% endtrans %}"
+                            >
+                                {{ icon('star', cls='icon is-small') }}
+                            </button>
+
+                            <button
+                                class="button is-small is-text has-text-grey is-rounded"
+                                aria-label="{% trans %}More options{% endtrans %}"
+                            >
+                                {{ icon('ellipsis', cls='icon is-small') }}
+                            </button>
+                        </div>
+                    </div>
+                </div>
+
+                {# comments #}
                 {% for comments_data in item.comments %}
                     {% for item in comments_data['items'] %}
                         {% include 'blog/item.html' %}
diff -r 66f98ee041d8 -r 5016fb0ff62f sat_templates/templates/bulma/chat/chat.html
--- a/sat_templates/templates/bulma/chat/chat.html	Tue May 06 00:37:41 2025 +0200
+++ b/sat_templates/templates/bulma/chat/chat.html	Wed May 21 15:41:00 2025 +0200
@@ -13,7 +13,7 @@
 
     <div class="columns is-gapless chat-container">
         <!-- Left Panel -->
-        <div class="column is-2-desktop is-3-tablet chat-sidebar has-background-dark" id="left_panel">
+        <div class="column is-2 left-sidebar has-background-dark" id="left_panel">
             <aside class="menu pl-4">
                 <button class="button is-ghost has-text-grey-light mb-2 pl-1 is-align-items-center is-justify-content-start is-fullwidth" id="new_chat_btn" aria-label="Start new discussion">
                     <span class="icon">
@@ -39,8 +39,8 @@
         </div>
 
         <!-- Main Chat Area -->
-        <div class="column is-8-desktop is-6-tablet chat-main" id="main_panel">
-                <div class="chat-header">
+        <div class="column is-8 main-panel chat-main" id="main_panel">
+                <div class="panel-header">
                     <div class="level is-mobile">
                         <div class="level-left">
                             <div class="level-item">
@@ -107,7 +107,7 @@
 
         <!-- Right Panel -->
 
-        <div class="column is-2-desktop is-3-tablet chat-details {{ 'is-hidden' if chat_type != 'group' }}" id="right_panel">
+        <div class="column is-2-desktop is-3-tablet right-sidebar {{ 'is-hidden' if chat_type != 'group' }}" id="right_panel">
             <div class="box is-shadowless has-background-white-bis is-full-height">
                 <h3 class="title is-5 has-text-centered mb-4">Room Details</h3>
 
diff -r 66f98ee041d8 -r 5016fb0ff62f sat_templates/templates/bulma/chat/direct_messages.html
--- a/sat_templates/templates/bulma/chat/direct_messages.html	Tue May 06 00:37:41 2025 +0200
+++ b/sat_templates/templates/bulma/chat/direct_messages.html	Wed May 21 15:41:00 2025 +0200
@@ -2,6 +2,6 @@
 <ul class="menu-list">
     {% for contact_jid, contact_data in roster.items() %}
         {%- set name = identities[contact_jid].nicknames[0] | default(contact_jid) -%}
-        <li><a {{ {'href': chat_url + '/' + contact_jid}|xmlattr}} class="has-background-inherit has-text-white"><span class="icon"><i class="fas fa-circle has-text-success"></i></span>{{name}}</a></li>
+        <li><a {{ {'href': chat_url + '/' + contact_jid}|xmlattr}} class="has-text-white"><span class="icon"><i class="fas fa-circle has-text-success"></i></span>{{name}}</a></li>
     {% endfor %}
 </ul>
diff -r 66f98ee041d8 -r 5016fb0ff62f sat_templates/templates/bulma/chat/message.html
--- a/sat_templates/templates/bulma/chat/message.html	Tue May 06 00:37:41 2025 +0200
+++ b/sat_templates/templates/bulma/chat/message.html	Wed May 21 15:41:00 2025 +0200
@@ -78,7 +78,7 @@
                 <div id="msg_reactions_{{msg.id}}">
                     {% if msg.extra.reactions is defined %}
                         {% set reactions = msg.extra.get("reactions") %}
-                        {% include 'chat/reactions.html' %}
+                        {% include 'components/reactions.html' %}
                     {% endif %}
                 </div>
             </div>
diff -r 66f98ee041d8 -r 5016fb0ff62f sat_templates/templates/bulma/chat/reactions.html
--- a/sat_templates/templates/bulma/chat/reactions.html	Tue May 06 00:37:41 2025 +0200
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,19 +0,0 @@
-<div class="reactions-container is-flex-wrap-wrap">
-
-    {% if chat_type == "group" %}
-        {% set local_jid = own_local_jid %}
-    {% else %}
-        {% set local_jid = own_local_jid|bare_jid %}
-    {% endif %}
-
-    {% for emoji, jids in reactions.items() %}
-        {% set own_reaction = local_jid in jids %}
-        <div
-                class="reaction is-inline-flex is-align-items-center {{ 'own-reaction' if own_reaction }}"
-                data-jids='{{jids|tojson}}'
-                >
-            <span class="emoji has-text-weight-semibold">{{ emoji }}</span>
-            <span class="counter">{{ jids|length }}</span>
-        </div>
-    {% endfor %}
-</div>
diff -r 66f98ee041d8 -r 5016fb0ff62f sat_templates/templates/bulma/chat/reactions_details.html
--- a/sat_templates/templates/bulma/chat/reactions_details.html	Tue May 06 00:37:41 2025 +0200
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,12 +0,0 @@
-{% import 'components/avatar.html' as avatar with context %}
-
-<div class="reacting-users-list">
-    {% for jid in reacting_jids %}
-        <div class="reacting-user-item is-flex is-align-items-center mb-2">
-            {{ avatar.avatar(jid, "is-24x24") }}
-            <span class="reacting-user-nickname ml-2">
-                {{ identities[jid].nicknames[0] if identities[jid].nicknames else jid }}
-            </span>
-        </div>
-    {% endfor %}
-</div>
diff -r 66f98ee041d8 -r 5016fb0ff62f sat_templates/templates/bulma/components/avatar.html
--- a/sat_templates/templates/bulma/components/avatar.html	Tue May 06 00:37:41 2025 +0200
+++ b/sat_templates/templates/bulma/components/avatar.html	Wed May 21 15:41:00 2025 +0200
@@ -3,7 +3,7 @@
         {% set identity = identities.get(jid) %}
         {%- if identity and identity.avatar.filename %}
             <div class="avatar image {{class}}">
-                <img src="/cache/common/{{identity.avatar.filename}}">
+                <img class="is-rounded" src="/cache/common/{{identity.avatar.filename}}">
             </div>
         {% else %}
             {% set nick = identity.nicknames[0] if identity.nicknames else jid %}
diff -r 66f98ee041d8 -r 5016fb0ff62f sat_templates/templates/bulma/components/contacts_links.html
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/sat_templates/templates/bulma/components/contacts_links.html	Wed May 21 15:41:00 2025 +0200
@@ -0,0 +1,20 @@
+{% import 'components/avatar.html' as avatar with context %}
+
+<ul>
+    {% for contact_jid, contact_data in roster.items() %}
+
+        {%- set name = identities[contact_jid].nicknames[0] | default(contact_jid) -%}
+        <li class="pl-2 py-1">
+            <a {{ {'href': base_url + '/' + contact_jid}|xmlattr}} class="has-text-white">
+                <div class="is-flex is-align-items-center my-1">
+                    <div class="mr-2">
+                        {{ avatar.avatar(contact_jid) }}
+                    </div>
+                    <div class="is-flex-grow-1">
+                        <p class="mb-0">{{name}}</p>
+                    </div>
+                </div>
+            </a>
+        </li>
+    {% endfor %}
+</ul>
diff -r 66f98ee041d8 -r 5016fb0ff62f sat_templates/templates/bulma/components/reactions.html
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/sat_templates/templates/bulma/components/reactions.html	Wed May 21 15:41:00 2025 +0200
@@ -0,0 +1,13 @@
+<div class="reactions-container is-flex-wrap-wrap">
+
+    {% for emoji, jids in reactions.items() %}
+        {% set own_reaction = own_jid in jids %}
+        <div
+                class="reaction is-inline-flex is-align-items-center {{ 'own-reaction' if own_reaction }}"
+                data-jids='{{jids|tojson}}'
+                >
+            <span class="emoji has-text-weight-semibold">{{ emoji }}</span>
+            <span class="counter">{{ jids|length }}</span>
+        </div>
+    {% endfor %}
+</div>
diff -r 66f98ee041d8 -r 5016fb0ff62f sat_templates/templates/bulma/components/reactions_details.html
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/sat_templates/templates/bulma/components/reactions_details.html	Wed May 21 15:41:00 2025 +0200
@@ -0,0 +1,12 @@
+{% import 'components/avatar.html' as avatar with context %}
+
+<div class="reacting-users-list">
+    {% for jid in reacting_jids %}
+        <div class="reacting-user-item is-flex is-align-items-center mb-2">
+            {{ avatar.avatar(jid, "is-24x24") }}
+            <span class="reacting-user-nickname ml-2">
+                {{ identities[jid].nicknames[0] if identities[jid].nicknames else jid }}
+            </span>
+        </div>
+    {% endfor %}
+</div>
diff -r 66f98ee041d8 -r 5016fb0ff62f sat_templates/templates/bulma/static/chat.css
--- a/sat_templates/templates/bulma/static/chat.css	Tue May 06 00:37:41 2025 +0200
+++ b/sat_templates/templates/bulma/static/chat.css	Wed May 21 15:41:00 2025 +0200
@@ -13,24 +13,6 @@
     --message-background: #f5f5f5;
     --message-hover-background: #e8e8e8;
 
-    /* Reaction colors */
-    --reaction-background: #ffffff;
-    --reaction-hover-background: #f5f5f5;
-    --reaction-border: #dbdbdb;
-
-    /* User reaction colors */
-    --reaction-user-background: #eef6fc;
-    --reaction-user-hover-background: #e3f1fc;
-    --reaction-user-border: #3273dc;
-
-    /* Spacing */
-    --reaction-padding: 0.25rem 0.5rem;
-    --reaction-gap: 0.5rem;
-    --reaction-margin-top: 0.5rem;
-
-    /* Typography */
-    --reaction-font-size: 0.875rem;
-    --reaction-counter-font-size: 0.75rem;
 }
 
 [data-theme="dark"] .chat-main {
@@ -40,13 +22,6 @@
     --message-background: #363636;
     --message-hover-background: #404040;
 
-    --reaction-background: #2c2c2c;
-    --reaction-hover-background: #404040;
-    --reaction-border: #4a4a4a;
-
-    --reaction-user-background: #1a3b5c;
-    --reaction-user-hover-background: #234875;
-    --reaction-user-border: #3273dc;
 }
 
 .chat-container {
@@ -60,42 +35,6 @@
     flex-direction: column;
 }
 
-.chat-header {
-    border-bottom: 1px solid #dbdbdb;
-    padding: 0.5rem 1rem;
-}
-
-
-/* Sidebar toggle transitions */
-.chat-sidebar, .chat-details {
-    transition: transform 0.3s ease, max-width 0.3s ease, opacity 0.3s ease;
-    overflow-x: hidden;
-}
-
-.chat-sidebar.is-collapsed {
-    transform: translateX(-100%);
-    max-width: 0;
-    padding: 0;
-    margin: 0;
-    opacity: 0;
-}
-
-.chat-details.is-collapsed {
-    transform: translateX(100%);
-    max-width: 0;
-    padding: 0;
-    margin: 0;
-    opacity: 0;
-}
-
-.chat-main.is-expanded-left {
-    margin-left: 0;
-}
-
-.chat-main.is-expanded-right {
-    margin-right: 0;
-}
-
 .columns.is-gapless.chat-container {
     flex-wrap: nowrap;
 }
@@ -113,10 +52,6 @@
     background-color: inherit;
 }
 
-#left_panel a:hover {
-    background-color: #444;
-}
-
 .chat-input {
     border-top: 1px solid #dbdbdb;
     padding: 1rem;
@@ -153,41 +88,6 @@
     display: flex;
 }
 
-.reactions-container {
-    gap: var(--reaction-gap);
-    margin-top: var(--reaction-margin-top);
-}
-.reaction {
-    padding: var(--reaction-padding);
-    border-radius: 1rem;
-    background-color: var(--reaction-background);
-    font-size: var(--reaction-font-size);
-    cursor: pointer;
-    transition: all 0.2s ease;
-    border: 1px solid var(--reaction-border);
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
-}
-
-.reaction:hover {
-    background-color: var(--reaction-hover-background);
-}
-
-.reaction .counter {
-    margin-left: 0.25rem;
-    font-size: var(--reaction-counter-font-size);
-    color: var(--color-text);
-}
-
-.reaction.own-reaction {
-    background-color: var(--reaction-user-background);
-    border-color: var(--reaction-user-border);
-}
-
-.reaction.own-reaction:hover {
-    background-color: var(--reaction-user-hover-background);
-}
-
-
 #attachments {
     overflow-x: auto;
     white-space: nowrap;
diff -r 66f98ee041d8 -r 5016fb0ff62f sat_templates/templates/bulma/static/styles.css
--- a/sat_templates/templates/bulma/static/styles.css	Tue May 06 00:37:41 2025 +0200
+++ b/sat_templates/templates/bulma/static/styles.css	Wed May 21 15:41:00 2025 +0200
@@ -1,5 +1,33 @@
 :root {
   --selected-item-bg: deepskyblue;
+  /* Reaction colors */
+  --reaction-background: #ffffff;
+  --reaction-hover-background: #f5f5f5;
+  --reaction-border: #dbdbdb;
+
+  /* User reaction colors */
+  --reaction-user-background: #eef6fc;
+  --reaction-user-hover-background: #e3f1fc;
+  --reaction-user-border: #3273dc;
+
+  /* Spacing */
+  --reaction-padding: 0.25rem 0.5rem;
+  --reaction-gap: 0.5rem;
+  --reaction-margin-top: 0.5rem;
+
+  /* Typography */
+  --reaction-font-size: 0.875rem;
+  --reaction-counter-font-size: 0.75rem;
+}
+
+[data-theme="dark"] {
+    --reaction-background: #2c2c2c;
+    --reaction-hover-background: #404040;
+    --reaction-border: #4a4a4a;
+
+    --reaction-user-background: #1a3b5c;
+    --reaction-user-hover-background: #234875;
+    --reaction-user-border: #3273dc;
 }
 
 html, body {
@@ -79,3 +107,84 @@
 .collapsible-icon {
     transition: transform 0.2s ease-out;
 }
+
+/* Panels */
+
+.panel-header {
+    border-bottom: 1px solid #dbdbdb;
+    padding: 0.5rem 1rem;
+}
+
+
+#left_panel li:hover {
+    background-color: #444;
+}
+
+
+/* Sidebar toggle transitions */
+.left-sidebar, .right-sidebar {
+    transition: transform 0.3s ease, max-width 0.3s ease, opacity 0.3s ease;
+    overflow-x: hidden;
+}
+
+.left-sidebar.is-collapsed {
+    transform: translateX(-100%);
+    max-width: 0;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+}
+
+.right-sidebar.is-collapsed {
+    transform: translateX(100%);
+    max-width: 0;
+    padding: 0;
+    margin: 0;
+    opacity: 0;
+}
+
+.main-panel.is-expanded-left {
+    margin-left: 0;
+}
+
+.main-panel.is-expanded-right {
+    margin-right: 0;
+}
+
+/* Common components */
+/* Reactions */
+.reactions-container {
+    gap: var(--reaction-gap);
+    margin-top: var(--reaction-margin-top);
+}
+.reaction {
+    padding: var(--reaction-padding);
+    border-radius: 1rem;
+    background-color: var(--reaction-background);
+    font-size: var(--reaction-font-size);
+    cursor: pointer;
+    transition: all 0.2s ease;
+    border: 1px solid var(--reaction-border);
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+}
+
+.reaction:hover {
+    background-color: var(--reaction-hover-background);
+}
+
+.reaction .counter {
+    margin-left: 0.25rem;
+    font-size: var(--reaction-counter-font-size);
+    color: var(--color-text);
+}
+
+.reaction.own-reaction {
+    background-color: var(--reaction-user-background);
+    border-color: var(--reaction-user-border);
+}
+
+.reaction.own-reaction:hover {
+    background-color: var(--reaction-user-hover-background);
+}
+
+