feat: Wrap all 3rd party services in tooltip

src/lib/components/Actions.svelte

@@ -2,6 +2,7 @@
   import Card from '$/components/Card/Card.svelte';
   import CopyButton from '$/components/CopyButton.svelte';
   import CopyInput from '$/components/CopyInput.svelte';
+  import ExternalLinkWrapper from '$/components/ExternalLinkWrapper.svelte';
   import { Button } from '$/components/ui/button';
   import { Input } from '$/components/ui/input';
   import { Separator } from '$/components/ui/separator';
@@ -204,11 +205,11 @@ ${svgString}`);
       <DownloadIcon />
       {text}
     </Button>
-    {#if url}
+    <ExternalLinkWrapper labelPrefix="Opens your diagram in" domain="mermaid.ink" isVisible={!!url}>
       <Button class="rounded-l-none" href={url} target="_blank" rel="noreferrer noopener">
         <ExternalLinkIcon />
       </Button>
-    {/if}
+    </ExternalLinkWrapper>
   </div>
 {/snippet}
 
@@ -235,22 +236,27 @@ ${svgString}`);
     <div class="flex gap-2">
       {@render dualActionButton('PNG', onDownloadPNG, $urlsStore.png)}
       {@render dualActionButton('SVG', onDownloadSVG, $urlsStore.svg)}
-      {#if env.krokiRendererUrl}
+      <ExternalLinkWrapper
+        labelPrefix="Opens your diagram in"
+        domain="Kroki.io"
+        isVisible={!!env.krokiRendererUrl}>
         <a target="_blank" rel="noreferrer" class="flex-grow" href={$urlsStore.kroki}>
           <Button class="action-btn flex w-full items-center gap-2">
             <ExternalLinkIcon /> Kroki
           </Button>
         </a>
-      {/if}
+      </ExternalLinkWrapper>
     </div>
     <Separator />
     {#if isClipboardAvailable()}
       <CopyButton onclick={onCopyClipboard} label="Copy Image" />
     {/if}
-    {#if $urlsStore.mdCode}
+    <ExternalLinkWrapper
+      labelPrefix="Thumbnail generated by"
+      domain="mermaid.ink"
+      isVisible={!!$urlsStore.mdCode}>
       <CopyInput value={$urlsStore.mdCode} label="Copy Markdown" testID={TID.copyMarkdown} />
-    {/if}
-
+    </ExternalLinkWrapper>
     <div class="flex w-full items-center gap-2">
       <Input type="url" bind:value={gistURL} placeholder="Enter Gist URL" />
       <Button onclick={loadGist}>Load Gist</Button>

src/lib/components/ExternalLinkWrapper.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+  import { stateStore } from '$/util/state';
+  import * as Tooltip from '$lib/components/ui/tooltip';
+  import type { ComponentProps, Snippet } from 'svelte';
+  import ExternalLinkIcon from '~icons/material-symbols/open-in-new-rounded';
+
+  let {
+    children,
+    domain,
+    shouldCheckDiagramType = true,
+    side = 'bottom',
+    labelPrefix = 'Opens your diagram in',
+    isVisible = true,
+    sharesData = true
+  }: {
+    children: Snippet;
+    domain: string;
+    shouldCheckDiagramType?: boolean;
+    side?: ComponentProps<typeof Tooltip.Content>['side'];
+    labelPrefix?: string;
+    isVisible?: boolean;
+    sharesData?: boolean;
+  } = $props();
+
+  let shouldDisableComponent = $derived(
+    shouldCheckDiagramType && $stateStore.diagramType === 'zenuml'
+  );
+</script>
+
+{#if isVisible}
+  <Tooltip.Provider>
+    <Tooltip.Root delayDuration={100}>
+      <Tooltip.Trigger>
+        <div class={[shouldDisableComponent && 'pointer-events-none cursor-not-allowed grayscale']}>
+          {@render children()}
+        </div>
+      </Tooltip.Trigger>
+      <Tooltip.Content {side} class="bg-secondary shadow-xl">
+        <div
+          class="flex cursor-help items-center gap-2"
+          title={sharesData
+            ? 'Your diagram will be sent to the external service'
+            : 'Your diagram is not shared'}>
+          {#if shouldDisableComponent}
+            <div class="text-muted-foreground">
+              This diagram type is not supported in {domain}
+            </div>
+          {:else}
+            <ExternalLinkIcon />
+            <span class="flex items-center gap-1">
+              {labelPrefix}
+              <div class="text-accent">{domain}</div>
+            </span>
+          {/if}
+        </div>
+      </Tooltip.Content>
+    </Tooltip.Root>
+  </Tooltip.Provider>
+{/if}

src/lib/components/MainMenu.svelte

@@ -29,16 +29,20 @@
       href: $urlsStore.mermaidChart({ medium: 'main_menu' }).playground
     },
     {
-      label: 'Plugins',
-      icon: PluginIcon,
+      checkDiagramType: false,
       href: $urlsStore.mermaidChart({ medium: 'main_menu' }).plugins,
-      checkDiagramType: false
+      icon: PluginIcon,
+      label: 'Plugins',
+      sharesData: false,
+      tooltipPrefix: 'Opens a new tab in'
     },
     {
-      label: 'MermaidChart',
-      icon: MermaidChartIcon,
+      checkDiagramType: false,
       href: $urlsStore.mermaidChart({ medium: 'main_menu' }).home,
-      checkDiagramType: false
+      icon: MermaidChartIcon,
+      label: 'MermaidChart',
+      sharesData: false,
+      tooltipPrefix: 'Opens a new tab in'
     }
   ]);
 </script>
@@ -76,7 +80,11 @@
     </div>
 
     {#each mermaidChartMenuItems as item}
-      <McWrapper side="right" shouldCheckDiagramType={item.checkDiagramType}>
+      <McWrapper
+        side="right"
+        labelPrefix={item.tooltipPrefix}
+        sharesData={item.sharesData}
+        shouldCheckDiagramType={item.checkDiagramType}>
         {@render menuItem({
           ...item,
           class: 'text-accent bg-background hover:bg-muted'

src/lib/components/McWrapper.svelte

@@ -1,50 +1,17 @@
 <script lang="ts">
   import { env } from '$/util/env';
-  import { stateStore } from '$/util/state';
-  import * as Tooltip from '$lib/components/ui/tooltip';
-  import type { ComponentProps, Snippet } from 'svelte';
-  import ExternalLinkIcon from '~icons/material-symbols/open-in-new-rounded';
+  import type { ComponentProps } from 'svelte';
+  import ExternalLinkWrapper from './ExternalLinkWrapper.svelte';
 
   let {
     children,
-    shouldCheckDiagramType = true,
-    side = 'bottom',
-    labelPrefix = 'Opens a new tab in'
-  }: {
-    children: Snippet;
-    shouldCheckDiagramType?: boolean;
-    side?: ComponentProps<typeof Tooltip.Content>['side'];
-    labelPrefix?: string;
-  } = $props();
-
-  let shouldDisableComponent = $derived(
-    shouldCheckDiagramType && $stateStore.diagramType === 'zenuml'
-  );
+    ...props
+  }: Omit<ComponentProps<typeof ExternalLinkWrapper>, 'isVisible' | 'domain'> = $props();
 </script>
 
-{#if env.isEnabledMermaidChartLinks}
-  <Tooltip.Provider>
-    <Tooltip.Root delayDuration={100}>
-      <Tooltip.Trigger>
-        <div class={[shouldDisableComponent && 'pointer-events-none cursor-not-allowed grayscale']}>
-          {@render children()}
-        </div>
-      </Tooltip.Trigger>
-      <Tooltip.Content {side}>
-        <div class="flex items-center gap-2">
-          {#if shouldDisableComponent}
-            <div class="text-muted-foreground">
-              This diagram type is not supported in MermaidChart.com
-            </div>
-          {:else}
-            <ExternalLinkIcon />
-            <span class="flex items-center gap-1">
-              {labelPrefix}
-              <div class="text-accent">MermaidChart.com</div>
-            </span>
-          {/if}
-        </div>
-      </Tooltip.Content>
-    </Tooltip.Root>
-  </Tooltip.Provider>
-{/if}
+<ExternalLinkWrapper
+  {...props}
+  domain="MermaidChart.com"
+  isVisible={env.isEnabledMermaidChartLinks}>
+  {@render children()}
+</ExternalLinkWrapper>

src/lib/components/Navbar.svelte

@@ -96,7 +96,7 @@
         Live Editor
       </a>
 
-      <McWrapper labelPrefix="Opens the current diagram in">
+      <McWrapper>
         <div class="hidden items-center justify-center gap-4 md:flex">
           <Separator orientation="vertical" />
           <Switch