From 46151d30c75aa81a3d8102a0b1914397923d516c Mon Sep 17 00:00:00 2001
From: Antoine M <martinon.toinou@protonmail.com>
Date: Tue, 24 Feb 2026 15:15:11 +0100
Subject: [PATCH] FEATURE Introducing component

---
 resources/js/singles/post-toolbar.ts | 34 ++++++++++++++++++++++++++++
 1 file changed, 34 insertions(+)
 create mode 100644 resources/js/singles/post-toolbar.ts

diff --git a/resources/js/singles/post-toolbar.ts b/resources/js/singles/post-toolbar.ts
new file mode 100644
index 0000000..fa18c6a
--- /dev/null
+++ b/resources/js/singles/post-toolbar.ts
@@ -0,0 +1,34 @@
+export function handlePostToolbar() {
+  observeTabsButtons();
+}
+
+function observeTabsButtons(): void {
+  const toolbarButtons = document.querySelectorAll('#post-toolbar button[role="tab"]');
+  if (!toolbarButtons) return;
+
+  toolbarButtons.forEach((toolbarButton) => {
+    toolbarButton.addEventListener('click', () => {
+      const currentTabValue = toolbarButton.getAttribute('data-tab') as string;
+      toggleActiveTab(toolbarButton as HTMLElement);
+      handleActiveTabContent(currentTabValue as string);
+    });
+  });
+}
+
+function toggleActiveTab(toolbarButton: HTMLElement): void {
+  resetActiveToolbarButtons();
+  toolbarButton.setAttribute('aria-selected', 'true');
+}
+
+function resetActiveToolbarButtons(): void {
+  const toolbarButtons = document.querySelectorAll('#post-toolbar button[role="tab"]');
+  if (!toolbarButtons) return;
+  toolbarButtons.forEach((toolbarButton) => {
+    toolbarButton.setAttribute('aria-selected', 'false');
+  });
+}
+
+function handleActiveTabContent(tab: string): void {
+  const contentWrapper = document.querySelector('.content-wrapper');
+  contentWrapper?.setAttribute('data-active-tab', tab);
+}