From f954dfab61693f1b997274ec62bf7eeb7eb097d8 Mon Sep 17 00:00:00 2001
From: Sidharth Vinod <sidharthv96@gmail.com>
Date: Wed, 13 Nov 2024 21:07:57 +0530
Subject: [PATCH] feat: Retain toggle label positions

---
 src/lib/components/Navbar.svelte | 26 +++++++++++++++++---------
 src/lib/util/util.ts             |  6 ++++--
 src/routes/edit/+page.svelte     |  4 +---
 3 files changed, 22 insertions(+), 14 deletions(-)

diff --git a/src/lib/components/Navbar.svelte b/src/lib/components/Navbar.svelte
index 0fcdcdaa..f173a9a6 100644
--- a/src/lib/components/Navbar.svelte
+++ b/src/lib/components/Navbar.svelte
@@ -10,6 +10,7 @@
   import { env } from '$lib/util/env';
   import { dismissPromotion, getActivePromotion } from '$lib/util/promos/promo';
   import { stateStore } from '$lib/util/state';
+  import { MCBaseURL } from '$lib/util/util';
   import type { ComponentProps } from 'svelte';
   import DropdownNavMenu from './DropdownNavMenu.svelte';
   import Privacy from './Privacy.svelte';
@@ -18,7 +19,7 @@
   const { isEnabledMermaidChartLinks } = env;
 
   let isMenuOpen = $state(false);
-
+  const isReferral = document.referrer.includes(MCBaseURL);
   function toggleMenu() {
     isMenuOpen = !isMenuOpen;
   }
@@ -83,23 +84,30 @@
 {/if}
 
 <div class="navbar z-50 bg-primary p-0 shadow-lg">
-  <div class="mx-2 flex-1 px-2">
-    <span class="flex items-center justify-center gap-2 font-bold">
+  <div class="mx-2 flex flex-1 gap-2 px-2">
+    <a href="/"><img class="size-6" src="./favicon.svg" alt="Mermaid Live Editor" /></a>
+    <div
+      class="flex items-center justify-center gap-2 font-bold"
+      class:flex-row-reverse={isReferral}>
       <a href="/">Mermaid Live Editor</a>
       {#if isEnabledMermaidChartLinks}
         <input
           type="checkbox"
           class="toggle toggle-primary"
           id="editorMode"
+          checked={isReferral}
           onclick={() => {
-            logEvent('playgroundToggle');
-            window.location.href = `https://mermaidchart.com/play#${$stateStore.serialized}`;
+            logEvent('playgroundToggle', { isReferred: isReferral });
+            window.open(
+              `${MCBaseURL}/play#${$stateStore.serialized}`,
+              '_self',
+              // Do not send referrer header, if the user already came from playground
+              isReferral ? 'noreferrer' : ''
+            );
           }} />
-        <a href="https://mermaidchart.com/play#{$stateStore.serialized}">
-          Mermaid Chart Playground
-        </a>
+        <a href="{MCBaseURL}/play#{$stateStore.serialized}">Mermaid Chart Playground</a>
       {/if}
-    </span>
+    </div>
   </div>
 
   <label
diff --git a/src/lib/util/util.ts b/src/lib/util/util.ts
index 65769ff5..29760091 100644
--- a/src/lib/util/util.ts
+++ b/src/lib/util/util.ts
@@ -1,8 +1,9 @@
-import { initURLSubscription, loadState, updateCodeStore } from './state';
-import { plausible, initAnalytics } from './stats';
+import { dev } from '$app/environment';
 import { loadDataFromUrl } from './fileLoaders/loader';
 import { initLoading } from './loading';
 import { applyMigrations } from './migrations';
+import { initURLSubscription, loadState, updateCodeStore } from './state';
+import { initAnalytics, plausible } from './stats';
 
 export const loadStateFromURL = (): void => {
   loadState(window.location.hash.slice(1));
@@ -26,6 +27,7 @@ export const initHandler = async (): Promise<void> => {
 
 export const isMac = navigator.platform.toUpperCase().includes('MAC');
 export const cmdKey = isMac ? 'Cmd' : 'Ctrl';
+export const MCBaseURL = dev ? 'http://localhost:5174' : 'https://mermaidchart.com';
 
 let count = 0;
 export const errorDebug = (limit = 1000) => {
diff --git a/src/routes/edit/+page.svelte b/src/routes/edit/+page.svelte
index 9fe0e873..0df73c5c 100644
--- a/src/routes/edit/+page.svelte
+++ b/src/routes/edit/+page.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { dev } from '$app/environment';
   import { base } from '$app/paths';
   import Actions from '$lib/components/Actions.svelte';
   import Card from '$lib/components/Card/Card.svelte';
@@ -11,10 +10,9 @@
   import type { DocumentationConfig, EditorMode, Tab, ValidatedState } from '$lib/types';
   import { env } from '$lib/util/env';
   import { inputStateStore, stateStore, updateCodeStore } from '$lib/util/state';
-  import { cmdKey, initHandler, syncDiagram } from '$lib/util/util';
+  import { cmdKey, initHandler, MCBaseURL, syncDiagram } from '$lib/util/util';
   import { onMount } from 'svelte';
 
-  const MCBaseURL = dev ? 'http://localhost:5174' : 'https://mermaidchart.com';
   const docURLBase = 'https://mermaid.js.org';
   const docMap: DocumentationConfig = {
     graph: {