Merge pull request #1853 from NullVoxPopuli/share-menu

Fix Share Menu, add indicator of copied status
NullVoxPopuli · Nov 3, 2024 · 47f23ed · 47f23ed
2 parents 741ea16 + b0a21a6
commit 47f23ed
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 11 deletions.
diff --git a/apps/repl/app/components/limber/save.gts b/apps/repl/app/components/limber/save.gts
@@ -3,21 +3,24 @@ import { tracked } from '@glimmer/tracking';
 import { registerDestructor } from '@ember/destroyable';
 import { service } from '@ember/service';
 
+import type { TOC } from '@ember/component/template-only';
 import type Owner from '@ember/owner';
 import type EditorService from 'limber/services/editor';
 
-const SHOW_TIME = 2000;
+export const SHOW_TIME = 2000;
+
+export const SaveBanner = <template>
+  <div
+    class="w-full p-10 absolute text-2xl backdrop-blur-md bg-slate-800/30 border-y border-slate-800/50 transition-all duration-300 pointer-events-none text-white text-center shadow-2xl shadow-stone-900/50 z-[100] top-[39%]
+      {{if @isShowing 'opacity-100' 'opacity-0'}}
+      "
+  >
+    URL copied to clipboard
+  </div>
+</template> satisfies TOC<{ Args: { isShowing: boolean } }>;
 
 export default class Save extends Component {
-  <template>
-    <div
-      class="w-full p-10 absolute text-2xl backdrop-blur-md bg-slate-800/30 border-y border-slate-800/50 transition-all duration-300 pointer-events-none text-white text-center shadow-2xl shadow-stone-900/50 z-[100] top-[39%]
-        {{if this.isShowing 'opacity-100' 'opacity-0'}}
-        "
-    >
-      URL copied to clipboard
-    </div>
-  </template>
+  <template><SaveBanner @isShowing={{this.isShowing}} /></template>
 
   @service declare editor: EditorService;
 

diff --git a/apps/repl/app/components/limber/share.gts b/apps/repl/app/components/limber/share.gts
@@ -10,14 +10,18 @@ import FaIcon from '@fortawesome/ember-fontawesome/components/fa-icon';
 // @ts-expect-error womp types
 import { focusTrap } from 'ember-focus-trap';
 import { Modal } from 'ember-primitives/components/dialog';
+import { cell } from 'ember-resources';
 
 import { shortenUrl } from 'limber/utils/editor-text';
 
 import { FlatButton } from './help';
+import { SaveBanner, SHOW_TIME } from './save';
 
 import type { TOC } from '@ember/component/template-only';
 import type RouterService from '@ember/routing/router-service';
 
+const isShowing = cell(false);
+
 const { Boolean } = globalThis;
 
 export class Share extends Component {
@@ -27,9 +31,11 @@ export class Share extends Component {
         Share
         <FaIcon @icon="share-from-square" @prefix="fas" />
       </button>
+
       <m.Dialog class="preem" {{focusTrap isActive=m.isOpen}}>
-        <header><h2>Share</h2>
+        <SaveBanner @isShowing={{isShowing.current}} />
 
+        <header><h2>Share</h2>
           <FlatButton {{on "click" m.close}} aria-label="close this share modal">
             <FaIcon @size="xs" @icon="xmark" class="aspect-square" />
           </FlatButton>
@@ -81,13 +87,18 @@ export class Share extends Component {
 
     try {
       url = await shortenUrl(url);
+      this.shortUrl = url;
     } catch (e) {
       console.error(`Could not shorten the URL`);
       console.error(e);
       throw e;
     }
 
+    isShowing.set(true);
     await navigator.clipboard.writeText(url);
+
+    await new Promise((resolve) => setTimeout(resolve, SHOW_TIME));
+    isShowing.set(false);
   };
 
   handleSubmit = async (event: SubmitEvent) => {
@@ -116,7 +127,10 @@ export class Share extends Component {
 }
 
 async function writeToClipboard(text: string) {
+  isShowing.set(true);
   await navigator.clipboard.writeText(text);
+  await new Promise((resolve) => setTimeout(resolve, SHOW_TIME));
+  isShowing.set(false);
 }
 
 // "with copy" / @copyable={{true}}?

diff --git a/apps/repl/tsconfig.json b/apps/repl/tsconfig.json
@@ -23,6 +23,8 @@
     "noEmit": true,
     "inlineSourceMap": true,
     "inlineSources": true,
+    "declaration": false,
+    "declarationMap": false,
     "baseUrl": ".",
     "experimentalDecorators": true,
     "paths": {