From 43be86bad4febefd60f868b76add81b544549d10 Mon Sep 17 00:00:00 2001
From: "Rodrigo Rodriguez (Pragmatismo)" <me@rodrigorodriguez.com>
Date: Mon, 12 Jan 2026 00:21:28 -0300
Subject: [PATCH] fix(social): add social.css to index.html and clean up HTML
 formatting

- Add social.css to main index.html CSS includes
- Remove redundant link tag from social.html
- Clean up HTML formatting
---
 ui/suite/index.html         |   1 +
 ui/suite/social/social.html | 403 ++++++++++++++++++++++++++----------
 2 files changed, 294 insertions(+), 110 deletions(-)

diff --git a/ui/suite/index.html b/ui/suite/index.html
index 285bf7b..a402a6b 100644
--- a/ui/suite/index.html
+++ b/ui/suite/index.html
@@ -38,6 +38,7 @@
         <link rel="stylesheet" href="products/products.css" />
         <link rel="stylesheet" href="tickets/tickets.css" />
         <link rel="stylesheet" href="docs/docs.css" />
+        <link rel="stylesheet" href="social/social.css" />
 
         <!-- Local Libraries (no external CDN dependencies) -->
         <script src="js/vendor/htmx.min.js"></script>
diff --git a/ui/suite/social/social.html b/ui/suite/social/social.html
index 654b99e..3f14e11 100644
--- a/ui/suite/social/social.html
+++ b/ui/suite/social/social.html
@@ -1,36 +1,82 @@
-<link rel="stylesheet" href="social/social.css" />
-
 <div class="social-app">
     <div class="social-header">
         <div class="social-tabs">
-            <button class="social-tab active" data-tab="feed" hx-get="/api/ui/social/feed" hx-target="#social-content" hx-swap="innerHTML">
-                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                    <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
-                    <polyline points="9 22 9 12 15 12 15 22"/>
+            <button
+                class="social-tab active"
+                data-tab="feed"
+                hx-get="/api/ui/social/feed"
+                hx-target="#social-content"
+                hx-swap="innerHTML"
+            >
+                <svg
+                    width="18"
+                    height="18"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                >
+                    <path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
+                    <polyline points="9 22 9 12 15 12 15 22" />
                 </svg>
                 <span data-i18n="social-feed">Feed</span>
             </button>
-            <button class="social-tab" data-tab="communities" hx-get="/api/ui/social/communities" hx-target="#social-content" hx-swap="innerHTML">
-                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                    <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/>
-                    <circle cx="9" cy="7" r="4"/>
-                    <path d="M23 21v-2a4 4 0 0 0-3-3.87"/>
-                    <path d="M16 3.13a4 4 0 0 1 0 7.75"/>
+            <button
+                class="social-tab"
+                data-tab="communities"
+                hx-get="/api/ui/social/communities"
+                hx-target="#social-content"
+                hx-swap="innerHTML"
+            >
+                <svg
+                    width="18"
+                    height="18"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                >
+                    <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" />
+                    <circle cx="9" cy="7" r="4" />
+                    <path d="M23 21v-2a4 4 0 0 0-3-3.87" />
+                    <path d="M16 3.13a4 4 0 0 1 0 7.75" />
                 </svg>
                 <span data-i18n="social-communities">Communities</span>
             </button>
-            <button class="social-tab" data-tab="announcements" hx-get="/api/ui/social/announcements" hx-target="#social-content" hx-swap="innerHTML">
-                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                    <path d="M22 17H2a3 3 0 0 0 3-3V9a7 7 0 0 1 14 0v5a3 3 0 0 0 3 3zm-8.27 4a2 2 0 0 1-3.46 0"/>
+            <button
+                class="social-tab"
+                data-tab="announcements"
+                hx-get="/api/ui/social/announcements"
+                hx-target="#social-content"
+                hx-swap="innerHTML"
+            >
+                <svg
+                    width="18"
+                    height="18"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                >
+                    <path
+                        d="M22 17H2a3 3 0 0 0 3-3V9a7 7 0 0 1 14 0v5a3 3 0 0 0 3 3zm-8.27 4a2 2 0 0 1-3.46 0"
+                    />
                 </svg>
                 <span data-i18n="social-announcements">Announcements</span>
             </button>
         </div>
         <div class="social-actions">
             <button class="btn-new-post" onclick="showNewPostModal()">
-                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                    <line x1="12" y1="5" x2="12" y2="19"/>
-                    <line x1="5" y1="12" x2="19" y2="12"/>
+                <svg
+                    width="18"
+                    height="18"
+                    viewBox="0 0 24 24"
+                    fill="none"
+                    stroke="currentColor"
+                    stroke-width="2"
+                >
+                    <line x1="12" y1="5" x2="12" y2="19" />
+                    <line x1="5" y1="12" x2="19" y2="12" />
                 </svg>
                 <span data-i18n="social-new-post">New Post</span>
             </button>
@@ -41,19 +87,34 @@
         <aside class="social-sidebar">
             <div class="sidebar-section">
                 <h3 data-i18n="social-my-communities">My Communities</h3>
-                <div id="my-communities" hx-get="/api/ui/social/my-communities" hx-trigger="load" hx-swap="innerHTML">
+                <div
+                    id="my-communities"
+                    hx-get="/api/ui/social/my-communities"
+                    hx-trigger="load"
+                    hx-swap="innerHTML"
+                >
                     <div class="loading-placeholder"></div>
                 </div>
             </div>
             <div class="sidebar-section">
                 <h3 data-i18n="social-trending">Trending</h3>
-                <div id="trending-topics" hx-get="/api/ui/social/trending" hx-trigger="load" hx-swap="innerHTML">
+                <div
+                    id="trending-topics"
+                    hx-get="/api/ui/social/trending"
+                    hx-trigger="load"
+                    hx-swap="innerHTML"
+                >
                     <div class="loading-placeholder"></div>
                 </div>
             </div>
             <div class="sidebar-section">
                 <h3 data-i18n="social-suggested">Suggested Communities</h3>
-                <div id="suggested-communities" hx-get="/api/ui/social/suggested" hx-trigger="load" hx-swap="innerHTML">
+                <div
+                    id="suggested-communities"
+                    hx-get="/api/ui/social/suggested"
+                    hx-trigger="load"
+                    hx-swap="innerHTML"
+                >
                     <div class="loading-placeholder"></div>
                 </div>
             </div>
@@ -65,32 +126,69 @@
                     <div class="avatar-placeholder"></div>
                 </div>
                 <div class="composer-input" onclick="showNewPostModal()">
-                    <span data-i18n="social-whats-on-mind">What's on your mind?</span>
+                    <span data-i18n="social-whats-on-mind"
+                        >What's on your mind?</span
+                    >
                 </div>
                 <div class="composer-actions">
                     <button class="composer-btn" title="Add image">
-                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                            <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
-                            <circle cx="8.5" cy="8.5" r="1.5"/>
-                            <polyline points="21 15 16 10 5 21"/>
+                        <svg
+                            width="20"
+                            height="20"
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            stroke-width="2"
+                        >
+                            <rect
+                                x="3"
+                                y="3"
+                                width="18"
+                                height="18"
+                                rx="2"
+                                ry="2"
+                            />
+                            <circle cx="8.5" cy="8.5" r="1.5" />
+                            <polyline points="21 15 16 10 5 21" />
                         </svg>
                     </button>
                     <button class="composer-btn" title="Add poll">
-                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                            <line x1="18" y1="20" x2="18" y2="10"/>
-                            <line x1="12" y1="20" x2="12" y2="4"/>
-                            <line x1="6" y1="20" x2="6" y2="14"/>
+                        <svg
+                            width="20"
+                            height="20"
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            stroke-width="2"
+                        >
+                            <line x1="18" y1="20" x2="18" y2="10" />
+                            <line x1="12" y1="20" x2="12" y2="4" />
+                            <line x1="6" y1="20" x2="6" y2="14" />
                         </svg>
                     </button>
                     <button class="composer-btn" title="Send praise">
-                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                            <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
+                        <svg
+                            width="20"
+                            height="20"
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            stroke-width="2"
+                        >
+                            <path
+                                d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"
+                            />
                         </svg>
                     </button>
                 </div>
             </div>
 
-            <div id="social-content" hx-get="/api/ui/social/feed" hx-trigger="load" hx-swap="innerHTML">
+            <div
+                id="social-content"
+                hx-get="/api/ui/social/feed"
+                hx-trigger="load"
+                hx-swap="innerHTML"
+            >
                 <div class="loading-state">
                     <div class="spinner"></div>
                     <span data-i18n="loading">Loading...</span>
@@ -101,13 +199,23 @@
         <aside class="social-right-sidebar">
             <div class="sidebar-section">
                 <h3 data-i18n="social-recent-activity">Recent Activity</h3>
-                <div id="recent-activity" hx-get="/api/ui/social/activity" hx-trigger="load" hx-swap="innerHTML">
+                <div
+                    id="recent-activity"
+                    hx-get="/api/ui/social/activity"
+                    hx-trigger="load"
+                    hx-swap="innerHTML"
+                >
                     <div class="loading-placeholder"></div>
                 </div>
             </div>
             <div class="sidebar-section">
                 <h3 data-i18n="social-people">People to Follow</h3>
-                <div id="people-suggestions" hx-get="/api/ui/social/people" hx-trigger="load" hx-swap="innerHTML">
+                <div
+                    id="people-suggestions"
+                    hx-get="/api/ui/social/people"
+                    hx-trigger="load"
+                    hx-swap="innerHTML"
+                >
                     <div class="loading-placeholder"></div>
                 </div>
             </div>
@@ -120,49 +228,117 @@
     <div class="modal-content">
         <div class="modal-header">
             <h3 data-i18n="social-create-post">Create Post</h3>
-            <button class="btn-close" onclick="closeNewPostModal()">&times;</button>
+            <button class="btn-close" onclick="closeNewPostModal()">
+                &times;
+            </button>
         </div>
-        <form id="newPostForm" hx-post="/api/social/posts" hx-swap="none" hx-on::after-request="handlePostCreated(event)">
+        <form
+            id="newPostForm"
+            hx-post="/api/social/posts"
+            hx-swap="none"
+            hx-on::after-request="handlePostCreated(event)"
+        >
             <div class="modal-body">
                 <div class="post-author-row">
                     <div class="avatar-placeholder"></div>
                     <div class="author-info">
-                        <span class="author-name" id="currentUserName">User</span>
+                        <span class="author-name" id="currentUserName"
+                            >User</span
+                        >
                         <select name="visibility" class="visibility-select">
-                            <option value="organization" data-i18n="social-org-only">Organization</option>
-                            <option value="community" data-i18n="social-community-only">Community Only</option>
-                            <option value="public" data-i18n="social-public">Public</option>
+                            <option
+                                value="organization"
+                                data-i18n="social-org-only"
+                            >
+                                Organization
+                            </option>
+                            <option
+                                value="community"
+                                data-i18n="social-community-only"
+                            >
+                                Community Only
+                            </option>
+                            <option value="public" data-i18n="social-public">
+                                Public
+                            </option>
                         </select>
                     </div>
                 </div>
-                <textarea name="content" class="post-textarea" placeholder="What's on your mind?" rows="5" required></textarea>
+                <textarea
+                    name="content"
+                    class="post-textarea"
+                    placeholder="What's on your mind?"
+                    rows="5"
+                    required
+                ></textarea>
                 <div class="post-attachments" id="postAttachments"></div>
                 <div class="post-options">
                     <select name="community_id" class="community-select">
-                        <option value="" data-i18n="social-no-community">No Community</option>
+                        <option value="" data-i18n="social-no-community">
+                            No Community
+                        </option>
                     </select>
                 </div>
             </div>
             <div class="modal-footer">
                 <div class="post-tools">
                     <button type="button" class="tool-btn" title="Add image">
-                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                            <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
-                            <circle cx="8.5" cy="8.5" r="1.5"/>
-                            <polyline points="21 15 16 10 5 21"/>
+                        <svg
+                            width="20"
+                            height="20"
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            stroke-width="2"
+                        >
+                            <rect
+                                x="3"
+                                y="3"
+                                width="18"
+                                height="18"
+                                rx="2"
+                                ry="2"
+                            />
+                            <circle cx="8.5" cy="8.5" r="1.5" />
+                            <polyline points="21 15 16 10 5 21" />
                         </svg>
                     </button>
-                    <button type="button" class="tool-btn" title="Add poll" onclick="togglePollCreator()">
-                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                            <line x1="18" y1="20" x2="18" y2="10"/>
-                            <line x1="12" y1="20" x2="12" y2="4"/>
-                            <line x1="6" y1="20" x2="6" y2="14"/>
+                    <button
+                        type="button"
+                        class="tool-btn"
+                        title="Add poll"
+                        onclick="togglePollCreator()"
+                    >
+                        <svg
+                            width="20"
+                            height="20"
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            stroke-width="2"
+                        >
+                            <line x1="18" y1="20" x2="18" y2="10" />
+                            <line x1="12" y1="20" x2="12" y2="4" />
+                            <line x1="6" y1="20" x2="6" y2="14" />
                         </svg>
                     </button>
-                    <button type="button" class="tool-btn" title="Mention someone">
-                        <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
-                            <circle cx="12" cy="12" r="4"/>
-                            <path d="M16 8v5a3 3 0 0 0 6 0v-1a10 10 0 1 0-3.92 7.94"/>
+                    <button
+                        type="button"
+                        class="tool-btn"
+                        title="Mention someone"
+                    >
+                        <svg
+                            width="20"
+                            height="20"
+                            viewBox="0 0 24 24"
+                            fill="none"
+                            stroke="currentColor"
+                            stroke-width="2"
+                        >
+                            <circle cx="12" cy="12" r="4" />
+                            <path
+                                d="M16 8v5a3 3 0 0 0 6 0v-1a10 10 0 1 0-3.92 7.94"
+                            />
                         </svg>
                     </button>
                 </div>
@@ -175,70 +351,77 @@
 </div>
 
 <script>
-(function() {
-    "use strict";
+    (function () {
+        "use strict";
 
-    function showNewPostModal() {
-        document.getElementById("newPostModal").classList.add("active");
-        document.querySelector(".post-textarea").focus();
-    }
+        function showNewPostModal() {
+            document.getElementById("newPostModal").classList.add("active");
+            document.querySelector(".post-textarea").focus();
+        }
 
-    function closeNewPostModal() {
-        document.getElementById("newPostModal").classList.remove("active");
-        document.getElementById("newPostForm").reset();
-    }
+        function closeNewPostModal() {
+            document.getElementById("newPostModal").classList.remove("active");
+            document.getElementById("newPostForm").reset();
+        }
 
-    function handlePostCreated(event) {
-        if (event.detail.successful) {
-            closeNewPostModal();
-            htmx.trigger("#social-content", "refresh");
-            if (window.GBAlerts) {
-                window.GBAlerts.info("Social", "Post created successfully!");
+        function handlePostCreated(event) {
+            if (event.detail.successful) {
+                closeNewPostModal();
+                htmx.trigger("#social-content", "refresh");
+                if (window.GBAlerts) {
+                    window.GBAlerts.info(
+                        "Social",
+                        "Post created successfully!",
+                    );
+                }
             }
         }
-    }
 
-    function togglePollCreator() {
-        var attachments = document.getElementById("postAttachments");
-        var existing = attachments.querySelector(".poll-creator");
-        if (existing) {
-            existing.remove();
-            return;
+        function togglePollCreator() {
+            var attachments = document.getElementById("postAttachments");
+            var existing = attachments.querySelector(".poll-creator");
+            if (existing) {
+                existing.remove();
+                return;
+            }
+            var pollHtml =
+                '<div class="poll-creator">' +
+                '<input type="text" name="poll_question" placeholder="Ask a question..." class="poll-question" />' +
+                '<div class="poll-options">' +
+                '<input type="text" name="poll_option_1" placeholder="Option 1" />' +
+                '<input type="text" name="poll_option_2" placeholder="Option 2" />' +
+                '<button type="button" class="btn-add-option" onclick="addPollOption()">+ Add option</button>' +
+                "</div>" +
+                "</div>";
+            attachments.innerHTML = pollHtml;
         }
-        var pollHtml = '<div class="poll-creator">' +
-            '<input type="text" name="poll_question" placeholder="Ask a question..." class="poll-question" />' +
-            '<div class="poll-options">' +
-            '<input type="text" name="poll_option_1" placeholder="Option 1" />' +
-            '<input type="text" name="poll_option_2" placeholder="Option 2" />' +
-            '<button type="button" class="btn-add-option" onclick="addPollOption()">+ Add option</button>' +
-            '</div>' +
-            '</div>';
-        attachments.innerHTML = pollHtml;
-    }
 
-    function addPollOption() {
-        var options = document.querySelector(".poll-options");
-        var count = options.querySelectorAll("input").length + 1;
-        var input = document.createElement("input");
-        input.type = "text";
-        input.name = "poll_option_" + count;
-        input.placeholder = "Option " + count;
-        options.insertBefore(input, options.querySelector(".btn-add-option"));
-    }
+        function addPollOption() {
+            var options = document.querySelector(".poll-options");
+            var count = options.querySelectorAll("input").length + 1;
+            var input = document.createElement("input");
+            input.type = "text";
+            input.name = "poll_option_" + count;
+            input.placeholder = "Option " + count;
+            options.insertBefore(
+                input,
+                options.querySelector(".btn-add-option"),
+            );
+        }
 
-    document.querySelectorAll(".social-tab").forEach(function(tab) {
-        tab.addEventListener("click", function() {
-            document.querySelectorAll(".social-tab").forEach(function(t) {
-                t.classList.remove("active");
+        document.querySelectorAll(".social-tab").forEach(function (tab) {
+            tab.addEventListener("click", function () {
+                document.querySelectorAll(".social-tab").forEach(function (t) {
+                    t.classList.remove("active");
+                });
+                this.classList.add("active");
             });
-            this.classList.add("active");
         });
-    });
 
-    window.showNewPostModal = showNewPostModal;
-    window.closeNewPostModal = closeNewPostModal;
-    window.handlePostCreated = handlePostCreated;
-    window.togglePollCreator = togglePollCreator;
-    window.addPollOption = addPollOption;
-})();
+        window.showNewPostModal = showNewPostModal;
+        window.closeNewPostModal = closeNewPostModal;
+        window.handlePostCreated = handlePostCreated;
+        window.togglePollCreator = togglePollCreator;
+        window.addPollOption = addPollOption;
+    })();
 </script>