add share button to toolbar

src/livecodes/UI/selectors.ts

@@ -52,6 +52,8 @@ export const getCustomSettingsBtn = /* @__PURE__ */ () =>
   document.querySelector('#editor-tools #custom-settings-btn') as HTMLElement;
 export const getEditorSettingsBtn = /* @__PURE__ */ () =>
   document.querySelector('#editor-tools #editor-settings-btn') as HTMLElement;
+export const getShareButton = /* @__PURE__ */ () =>
+  document.querySelector('#share-button') as HTMLElement;
 export const getResultButton = /* @__PURE__ */ () =>
   document.querySelector('#result-button') as HTMLElement;
 export const getFullscreenButton = /* @__PURE__ */ () =>

src/livecodes/UI/share.ts

@@ -70,6 +70,7 @@ export const createShareContainer = async (
           <img
             src="${getAbsoluteUrl(baseUrl) + 'assets/icons/' + service.icon}"
             alt="${service.name}"
+            ${service.name === 'X / Twitter' ? 'class="twitter"' : ''}
           />
         </span>
         ${service.name}
@@ -102,8 +103,8 @@ export const createShareContainer = async (
       createShareUrl: ({ url }) => `https://www.facebook.com/sharer.php?u=${encode(url)}`,
     },
     {
-      name: 'Twitter',
-      icon: 'twitter.svg',
+      name: 'X / Twitter',
+      icon: 'x.svg',
       createShareUrl: ({ url, title }) =>
         `https://twitter.com/intent/tweet?url=${encode(url)}&text=${encode(title)}`,
     },

src/livecodes/core.ts

@@ -2140,6 +2140,10 @@ const handleResultButton = () => {
   eventsManager.addEventListener(UI.getResultButton(), 'click', () => split?.show('output', true));
 };
 
+const handleShareButton = () => {
+  eventsManager.addEventListener(UI.getShareButton(), 'click', () => showScreen('share'));
+};
+
 const handleEditorTools = () => {
   if (!configureEditorTools(getActiveEditor().getLanguage())) return;
 
@@ -3883,6 +3887,7 @@ const basicHandlers = () => {
   handleHotKeys();
   handleRunButton();
   handleResultButton();
+  handleShareButton();
   handleEditorTools();
   handleProcessors();
   handleResultLoading();

src/livecodes/html/app.html

@@ -65,12 +65,27 @@
               loading="lazy"
             />
           </a>
+          <a
+            href="javascript:void(0)"
+            id="share-button"
+            class="button hint--bottom"
+            data-hint="Share"
+            tabindex="10"
+          >
+            <img
+              width="20"
+              height="20"
+              alt="Run"
+              src="{{baseUrl}}assets/images/share.svg"
+              loading="lazy"
+            />
+          </a>
           <a
             href="javascript:void(0)"
             id="result-button"
             class="button hint--bottom"
             data-hint="Toggle Result"
-            tabindex="10"
+            tabindex="11"
           >
             <img
               width="28"
@@ -85,7 +100,7 @@
             id="fullscreen-button"
             class="button hint--bottom"
             data-hint="Full Screen"
-            tabindex="11"
+            tabindex="12"
           >
             <img
               width="28"
@@ -100,7 +115,7 @@
             id="settings-button"
             class="button"
             aria-label="Menu"
-            tabindex="12"
+            tabindex="13"
           >
             <img
               width="30"

src/livecodes/styles/app.scss

@@ -112,8 +112,6 @@
 
 // scrollbar
 * {
-  scrollbar-width: thin;
-
   &::-webkit-scrollbar {
     height: 10px;
     width: 10px;
@@ -309,6 +307,10 @@ a {
   #toolbar {
     font-size: 0.8em;
 
+    #share-button {
+      display: none;
+    }
+
     #buttons > .button {
       margin: 3px;
       width: 35px;
@@ -391,10 +393,8 @@ a {
     display: flex !important;
   }
 
-  #settings-button {
-    display: none;
-  }
-
+  #share-button,
+  #settings-button,
   #editor-settings-btn,
   #project-info-btn,
   #custom-settings-btn {
@@ -2772,6 +2772,10 @@ i.arrow {
           margin-right: 0.5em;
           width: 21px;
         }
+
+        img.twitter {
+          height: 23px;
+        }
       }
     }
   }