Polling frontend topic tools option

public/src/client/topic/poll.js

@@ -0,0 +1,99 @@
+'use strict';
+
+define('forum/topic/poll', ['components', 'translator', 'alerts'], function (components, translator, alerts) {
+    const Poll = {};
+
+    let pollModal;
+    let pollOptions = [];
+
+    Poll.init = function () {
+        if (pollModal) {
+            return;
+        }
+
+        app.parseAndTranslate('modals/create-poll', {}, function (html) {
+            pollModal = html;
+            $('body').append(pollModal);
+
+            const pollNameInput = pollModal.find('#pollName');
+            const pollOptionInput = pollModal.find('#pollOption');
+            const addOptionButton = pollModal.find('#addOption');
+            const createPollButton = pollModal.find('#createPoll');
+            const closePollButton = pollModal.find('#closePollModal');
+            const pollOptionsContainer = pollModal.find('#pollOptionsContainer');
+            const pollOptionsList = pollModal.find('#pollOptionsList');
+            const scrollIndicator = pollModal.find('#scrollIndicator');
+
+            // Add option when button is clicked
+            addOptionButton.on('click', function () {
+                const optionText = pollOptionInput.val().trim();
+                if (optionText) {
+                    pollOptions.push(optionText);
+                    pollOptionInput.val('');
+
+                    // Add option to the list
+                    const optionItem = $('<li class="list-group-item d-flex justify-content-between align-items-center"></li>')
+                        .text(optionText)
+                        .append($('<button class="btn btn-sm btn-danger">X</button>')
+                            .on('click', function () {
+                                pollOptions = pollOptions.filter(opt => opt !== optionText);
+                                optionItem.remove();
+                                checkScrollIndicator();
+                            })
+                        );
+                    pollOptionsList.append(optionItem);
+                    checkScrollIndicator();
+                }
+            });
+
+            // Check if scrollbar should be visible
+            function checkScrollIndicator() {
+                if (pollOptionsContainer[0].scrollHeight > pollOptionsContainer.innerHeight()) {
+                    scrollIndicator.show();
+                } else {
+                    scrollIndicator.hide();
+                }
+            }
+
+            // Listen for scrolling to hide indicator
+            pollOptionsContainer.on('scroll', function () {
+                if (pollOptionsContainer.scrollTop() + pollOptionsContainer.innerHeight() >= pollOptionsContainer[0].scrollHeight) {
+                    scrollIndicator.fadeOut();
+                } else {
+                    scrollIndicator.fadeIn();
+                }
+            });
+
+            // Close modal
+            closePollButton.on('click', function () {
+                pollModal.remove();
+                pollModal = null;
+            });
+
+            // Create Poll
+            createPollButton.on('click', function () {
+                const pollName = pollNameInput.val().trim();
+                if (!pollName) {
+                    return alerts.error('Please enter a poll name.');
+                }
+                if (pollOptions.length < 2) {
+                    return alerts.error('Please add at least two options.');
+                }
+
+                const pollData = {
+                    name: pollName,
+                    options: pollOptions
+                };
+
+                console.log('Poll Created:', pollData);
+                alerts.success('Poll Created Successfully!');
+
+                // Close modal after creating poll
+                pollModal.remove();
+                pollModal = null;
+            });
+        });
+    };
+
+    return Poll;
+});

public/src/client/topic/threadTools.js

@@ -136,6 +136,14 @@ define('forum/topic/threadTools', [
 			});
 		});
 
+		//create topic modal
+		topicContainer.on('click', '[component="topic/create-poll"]', function () {
+			require(['forum/topic/poll'], function (createPoll) {
+				createPoll.init();
+			});
+		});		
+
+
 		topicContainer.on('click', '[component="topic/following"]', function () {
 			changeWatching('follow');
 		});

src/views/modals/create-poll.tpl

@@ -0,0 +1,36 @@
+<div class="card tool-modal shadow" style="width: 800px; height: 650px;">
+    <h5 class="card-header">
+        Create Poll
+    </h5>
+
+    <!-- Modal Body (Scrollable) -->
+    <div class="card-body" style="overflow-y: auto; max-height: 550px;">
+        <!-- Poll Name -->
+        <p><strong>Poll Name:</strong></p>
+        <input id="pollName" type="text" class="form-control mb-3" placeholder="Enter poll name">
+
+        <!-- Poll Options -->
+        <p>Write your options below:</p>
+        <div>
+            <label class="form-label" for="pollOption"><strong>Options</strong></label>
+            <input id="pollOption" type="text" class="form-control">
+        </div>
+        <button class="btn btn-primary btn-sm mt-2" id="addOption">Add Option</button>
+
+        <!-- Scrollable Container for Options -->
+        <div id="pollOptionsContainer" class="border rounded p-2 mt-3 position-relative"
+            style="max-height: 250px; overflow-y: scroll; scrollbar-width: thin; scrollbar-color: #555 #eee;">
+            <ul id="pollOptionsList" class="list-group" style="margin-bottom: 0;"></ul>
+            <!-- Scroll Indicator -->
+            <div id="scrollIndicator" class="position-absolute bottom-0 start-0 w-100"
+                style="height: 20px; background: linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.1));">
+            </div>
+        </div>
+    </div>
+
+    <!-- Footer (Static) -->
+    <div class="card-footer text-end" style="position: absolute; bottom: 0; width: 100%; background: white;">
+        <button class="btn btn-link btn-sm" id="closePollModal">[[global:buttons.close]]</button>
+        <button class="btn btn-primary btn-sm" id="createPoll">Create Poll</button>
+    </div>
+</div>