botui/ui/suite/social/social.html

<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" />
                </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" />
                </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"
                    />
                </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>
                <span data-i18n="social-new-post">New Post</span>
            </button>
        </div>
    </div>

    <div class="social-layout">
        <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 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 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 class="loading-placeholder"></div>
                </div>
            </div>
        </aside>

        <main class="social-main">
            <div class="post-composer">
                <div class="composer-avatar">
                    <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
                    >
                </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>
                    </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>
                    </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>
                    </button>
                </div>
            </div>

            <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>
                </div>
            </div>
        </main>

        <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 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 class="loading-placeholder"></div>
                </div>
            </div>
        </aside>
    </div>
</div>

<div class="modal" id="newPostModal">
    <div class="modal-backdrop" onclick="closeNewPostModal()"></div>
    <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>
        </div>
        <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
                        >
                        <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>
                        </select>
                    </div>
                </div>
                <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>
                    </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>
                    </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" />
                        </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"
                            />
                        </svg>
                    </button>
                </div>
                <button type="submit" class="btn-post">
                    <span data-i18n="social-post">Post</span>
                </button>
            </div>
        </form>
    </div>
</div>

<script>
    (function () {
        "use strict";

        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 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;
            }
            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"),
            );
        }

        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");
            });
        });

        window.showNewPostModal = showNewPostModal;
        window.closeNewPostModal = closeNewPostModal;
        window.handlePostCreated = handlePostCreated;
        window.togglePollCreator = togglePollCreator;
        window.addPollOption = addPollOption;
    })();
</script>