From 332e6d20f426ae4881ce5e1d5db69fb8e4f15c90 Mon Sep 17 00:00:00 2001
From: rajchales-monito <rajchales-monito@users.noreply.github.com>
Date: Thu, 30 Jul 2026 17:20:54 +0200
Subject: [PATCH] Add more launcher online effects

---
 public/admin.css  | 17 +++++++++++++++++
 public/admin.html |  3 +++
 public/admin.js   | 15 ++++++++++++---
 public/widget.js  | 15 +++++++++++++++
 server.js         |  3 +++
 5 files changed, 50 insertions(+), 3 deletions(-)

diff --git a/public/admin.css b/public/admin.css
index 91dc80b..5a580a9 100644
--- a/public/admin.css
+++ b/public/admin.css
@@ -283,6 +283,9 @@ label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
 .launcher-preview.notify-wiggle .launcher-preview-icon {
   animation: launcherPreviewWiggle .62s ease-in-out infinite;
 }
+.launcher-preview.effect-sway .launcher-preview-icon {
+  animation: launcherPreviewSway 4.8s ease-in-out infinite;
+}
 .launcher-preview-status {
   position: absolute;
   top: -3px;
@@ -293,6 +296,10 @@ label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
   border-radius: 50%;
   background: #c9d4ce;
   box-shadow: 0 0 0 4px rgb(201 212 206 / 24%);
+  display: none;
+}
+.launcher-preview.show-status .launcher-preview-status {
+  display: block;
 }
 .launcher-preview.online .launcher-preview-status {
   background: #2f9e44;
@@ -338,6 +345,10 @@ label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
   opacity: 1;
   transform: translateY(-50%) translateX(0);
 }
+.launcher-preview.label-always .launcher-preview-label {
+  opacity: 1;
+  transform: translateY(-50%) translateX(0);
+}
 .launcher-preview-icon,
 .launcher-preview-icon::before,
 .launcher-preview-icon::after {
@@ -470,6 +481,12 @@ label { display: grid; gap: 6px; color: var(--muted); font-size: 13px; }
   48% { transform: translateY(2px) rotate(3deg); }
   72% { transform: translateY(-1px) rotate(-2deg); }
 }
+@keyframes launcherPreviewSway {
+  0%, 72%, 100% { transform: translateX(0) rotate(0deg); }
+  78% { transform: translateX(-2px) rotate(-4deg); }
+  84% { transform: translateX(2px) rotate(4deg); }
+  90% { transform: translateX(-1px) rotate(-2deg); }
+}
 .widget-language-settings {
   grid-template-columns: 112px minmax(230px, 1fr);
 }
diff --git a/public/admin.html b/public/admin.html
index 064b1f1..94e04ba 100644
--- a/public/admin.html
+++ b/public/admin.html
@@ -173,6 +173,9 @@
                 <label><input name="launcherBreathe" type="checkbox"> jemne dychani</label>
                 <label><input name="launcherRing" type="checkbox"> svetelny prstenec</label>
                 <label><input name="launcherHoverLabel" type="checkbox"> napis pri najeti</label>
+                <label><input name="launcherStatusDot" type="checkbox"> stavova tecka</label>
+                <label><input name="launcherPersistentLabel" type="checkbox"> stitek stale</label>
+                <label><input name="launcherSway" type="checkbox"> jemne zhoupnuti</label>
                 <div class="launcher-preview-stage">
                   <button id="launcherPreview" class="launcher-preview" type="button" aria-label="Nahled online tlacitka">
                     <span class="launcher-preview-status" aria-hidden="true"></span>
diff --git a/public/admin.js b/public/admin.js
index 6f13e48..0e5d57f 100644
--- a/public/admin.js
+++ b/public/admin.js
@@ -143,12 +143,12 @@ $("#settingsForm").defaultLanguage.addEventListener("change", () => {
   renderLauncherPreview();
 });
 $("#settingsForm").addEventListener("input", (event) => {
-  if (event.target.matches("[name='launcherShape'], [name='launcherBreathe'], [name='launcherRing'], [name='launcherHoverLabel'], [name='copyOnlineLabel'], [name='messagePulse'], [name='messageBadge'], [name='messageLabel'], [name='messageWiggle'], [name='copyNewReplyLabel']")) {
+  if (event.target.matches("[name='launcherShape'], [name='launcherBreathe'], [name='launcherRing'], [name='launcherHoverLabel'], [name='launcherStatusDot'], [name='launcherPersistentLabel'], [name='launcherSway'], [name='copyOnlineLabel'], [name='messagePulse'], [name='messageBadge'], [name='messageLabel'], [name='messageWiggle'], [name='copyNewReplyLabel']")) {
     renderLauncherPreview();
   }
 });
 $("#settingsForm").addEventListener("change", (event) => {
-  if (event.target.matches("[name='launcherShape'], [name='launcherBreathe'], [name='launcherRing'], [name='launcherHoverLabel'], [name='messagePulse'], [name='messageBadge'], [name='messageLabel'], [name='messageWiggle']")) {
+  if (event.target.matches("[name='launcherShape'], [name='launcherBreathe'], [name='launcherRing'], [name='launcherHoverLabel'], [name='launcherStatusDot'], [name='launcherPersistentLabel'], [name='launcherSway'], [name='messagePulse'], [name='messageBadge'], [name='messageLabel'], [name='messageWiggle']")) {
     renderLauncherPreview();
   }
 });
@@ -221,7 +221,10 @@ $("#settingsForm").addEventListener("submit", async (event) => {
     shape: form.get("launcherShape") || "bubble",
     breathe: form.get("launcherBreathe") === "on",
     ring: form.get("launcherRing") === "on",
-    hoverLabel: form.get("launcherHoverLabel") === "on"
+    hoverLabel: form.get("launcherHoverLabel") === "on",
+    statusDot: form.get("launcherStatusDot") === "on",
+    persistentLabel: form.get("launcherPersistentLabel") === "on",
+    sway: form.get("launcherSway") === "on"
   };
   settings.notifications = settings.notifications || {};
   settings.notifications.pulseOnAdminReply = form.get("messagePulse") === "on";
@@ -536,6 +539,9 @@ function renderSite() {
   form.launcherBreathe.checked = s.launcherEffects?.breathe !== false;
   form.launcherRing.checked = s.launcherEffects?.ring !== false;
   form.launcherHoverLabel.checked = s.launcherEffects?.hoverLabel !== false;
+  form.launcherStatusDot.checked = s.launcherEffects?.statusDot !== false;
+  form.launcherPersistentLabel.checked = Boolean(s.launcherEffects?.persistentLabel);
+  form.launcherSway.checked = Boolean(s.launcherEffects?.sway);
   form.messagePulse.checked = s.notifications?.pulseOnAdminReply !== false;
   form.messageBadge.checked = s.notifications?.badgeOnAdminReply !== false;
   form.messageLabel.checked = s.notifications?.labelOnAdminReply !== false;
@@ -659,6 +665,9 @@ function renderLauncherPreview() {
     $("#onlineToggle").checked ? "online" : "",
     form.launcherBreathe.checked ? "effect-breathe" : "",
     form.launcherRing.checked ? "effect-ring" : "",
+    form.launcherStatusDot.checked ? "show-status" : "",
+    form.launcherPersistentLabel.checked ? "label-always" : "",
+    form.launcherSway.checked ? "effect-sway" : "",
     form.launcherHoverLabel.checked ? "show-label" : ""
   ].filter(Boolean).join(" ");
   messagePreview.className = [
diff --git a/public/widget.js b/public/widget.js
index 1174741..2c11a9b 100644
--- a/public/widget.js
+++ b/public/widget.js
@@ -33,6 +33,7 @@
       <style>${styles(settings)}</style>
       <button class="mf-launcher ${launcherEffectClasses(settings, site.isOnline)}" type="button" aria-label="${escapeHtml(copy.title)}">
         <span class="mf-reply-pulse" aria-hidden="true"></span>
+        <span class="mf-status-dot" aria-hidden="true"></span>
         <span class="mf-launcher-icon"></span>
         <span class="mf-launcher-label">${escapeHtml(site.isOnline ? copy.onlineLabel : copy.offlineLabel)}</span>
         <span class="mf-message-badge" hidden>0</span>
@@ -546,6 +547,9 @@
       isOnline ? "mf-online" : "",
       isOnline && effects.breathe ? "mf-effect-breathe" : "",
       isOnline && effects.ring ? "mf-effect-ring" : "",
+      effects.statusDot ? "mf-effect-status-dot" : "",
+      effects.persistentLabel ? "mf-effect-persistent-label" : "",
+      isOnline && effects.sway ? "mf-effect-sway" : "",
       effects.hoverLabel ? "mf-effect-hover-label" : "",
     ].filter(Boolean).join(" ");
   }
@@ -638,13 +642,18 @@
       }
       .mf-launcher-label { position: absolute; ${labelOffset} top: 50%; transform: translateY(-50%) translateX(8px); opacity: 0; pointer-events: none; white-space: nowrap; border-radius: 999px; padding: 7px 10px; background: ${c.text}; color: white; font-size: 12px; box-shadow: 0 10px 24px rgb(0 0 0 / 18%); transition: opacity .18s ease, transform .18s ease; }
       .mf-online.mf-effect-hover-label:hover .mf-launcher-label { opacity: 1; transform: translateY(-50%) translateX(0); }
+      .mf-effect-persistent-label .mf-launcher-label { opacity: 1; transform: translateY(-50%) translateX(0); }
       .mf-message-label { position: absolute; ${labelOffset} top: 50%; transform: translateY(-50%) translateX(8px); opacity: 0; pointer-events: none; white-space: nowrap; border-radius: 999px; padding: 7px 10px; background: ${c.text}; color: white; font-size: 12px; font-weight: 700; box-shadow: 0 10px 24px rgb(0 0 0 / 18%); transition: opacity .18s ease, transform .18s ease; }
       .mf-show-message-label .mf-message-label { opacity: 1; transform: translateY(-50%) translateX(0); }
+      .mf-status-dot { position: absolute; top: -3px; left: -3px; width: 14px; height: 14px; display: none; border: 2px solid white; border-radius: 50%; background: #c9d4ce; box-shadow: 0 0 0 4px rgb(201 212 206 / 24%); }
+      .mf-effect-status-dot .mf-status-dot { display: block; }
+      .mf-online .mf-status-dot { background: #2f9e44; box-shadow: 0 0 0 4px rgb(47 158 68 / 16%); }
       .mf-message-badge { position: absolute; top: -5px; right: -5px; min-width: 22px; height: 22px; display: grid; place-items: center; border-radius: 999px; border: 2px solid white; background: #ff3b30; color: white; font-size: 12px; font-weight: 800; line-height: 1; box-shadow: 0 8px 18px rgb(0 0 0 / 18%); }
       .mf-message-badge[hidden] { display: none !important; }
       .mf-reply-pulse { position: absolute; inset: 0; border-radius: 50%; pointer-events: none; opacity: 0; }
       .mf-online.mf-effect-breathe { animation: mfBreathe 2.8s ease-in-out infinite; }
       .mf-online.mf-effect-ring:before { position: absolute; inset: -5px; border: 2px solid ${c.brand}; border-radius: 50%; opacity: .62; content: ""; animation: mfRing 2.2s ease-out infinite; }
+      .mf-online.mf-effect-sway .mf-launcher-icon { animation: mfSway 4.8s ease-in-out infinite; }
       .mf-offline { filter: grayscale(.2) saturate(.72); opacity: .86; }
       .mf-notify .mf-reply-pulse { animation: mfPulse 1.15s ease-out infinite; }
       .mf-wiggle .mf-launcher-icon { animation: mfWiggle .62s ease-in-out 2; }
@@ -709,6 +718,12 @@
         48% { transform: translateY(2px) rotate(3deg); }
         72% { transform: translateY(-1px) rotate(-2deg); }
       }
+      @keyframes mfSway {
+        0%, 72%, 100% { transform: translateX(0) rotate(0deg); }
+        78% { transform: translateX(-2px) rotate(-4deg); }
+        84% { transform: translateX(2px) rotate(4deg); }
+        90% { transform: translateX(-1px) rotate(-2deg); }
+      }
       @media (max-width: 640px) {
         .mf-launcher {
           ${mobile.side}: max(${mobile.sideOffsetPx}px, env(safe-area-inset-${mobile.side}, 0px));
diff --git a/server.js b/server.js
index 1848904..7153431 100644
--- a/server.js
+++ b/server.js
@@ -341,6 +341,9 @@ function defaultSettings() {
       breathe: true,
       ring: true,
       hoverLabel: true,
+      statusDot: true,
+      persistentLabel: false,
+      sway: false,
       avatar: false
     },
     notifications: {