Improved wals embed to be able to collapse them

holochain-apps · Dec 28, 2024 · 0184cf7 · 0184cf7
1 parent 05da684
commit 0184cf7
Show file tree

Hide file tree

Showing 7 changed files with 101 additions and 58 deletions.
diff --git a/ui/src/GameSpace/ConfigMenu/WalsControls.svelte b/ui/src/GameSpace/ConfigMenu/WalsControls.svelte
@@ -37,7 +37,10 @@
       {@const wal = weaveUrlToWAL(attachment)}
       <div class="flexcc">
         {#await store.weaveClient.assets.assetInfo(wal)}
-          <div title={`Resolving WAL: ${hrlToString(wal.hrl)}?${JSON.stringify(wal.context)}`}>
+          <div
+            class="flex-grow"
+            title={`Resolving WAL: ${hrlToString(wal.hrl)}?${JSON.stringify(wal.context)}`}
+          >
             ...</div
           >
         {:then data}

diff --git a/ui/src/GameSpace/Element/Element.svelte b/ui/src/GameSpace/Element/Element.svelte
@@ -190,7 +190,7 @@
       class="absolute z-100 -inset-1 pointer-events-none bg-blue-5/10 b b-dashed b-blue-5/40 rounded-md"
     ></div>
   {/if}
-  {#if el.wals.length > 0}
+  {#if el.wals.length > 0 && el.type !== 'EmbedWal'}
     <button
       on:click={onContextMenu}
       use:tooltip={`${el.wals.length} attachments`}

diff --git a/ui/src/GameSpace/GameSpace.svelte b/ui/src/GameSpace/GameSpace.svelte
@@ -187,11 +187,13 @@
           ><BookIcon /></div
         >
       {/if}
-      <NameTitleInput
-        value={$state.name}
-        disabled={$permissions.isArchived}
-        onChange={handleNameChange}
-      />
+      {#if !asAsset}
+        <NameTitleInput
+          value={$state.name}
+          disabled={$permissions.isArchived}
+          onChange={handleNameChange}
+        />
+      {/if}
       <div class="flex-grow"></div>
       {#if !$permissions.isArchived}
         <PeopleBar

diff --git a/ui/src/GameSpace/elements/EmbedWal/ConfigMenu.svelte b/ui/src/GameSpace/elements/EmbedWal/ConfigMenu.svelte
@@ -1,17 +1,18 @@
 <script lang="ts">
-  // import { type EmbedWalElement } from './type';
+  import Checkbox from '~/GameSpace/ui/Checkbox.svelte';
+
+  import { type EmbedWalElement } from './type';
   // import Input from '../../ui/Input.svelte';
 
-  // export let el: EmbedWalElement;
-  // export let onUpdate: (el: Partial<EmbedWalElement>) => void;
+  export let el: EmbedWalElement;
+  export let onUpdate: (el: Partial<EmbedWalElement>) => void;
   $$restProps; // This prevents Svelte warnings from unused props
 </script>
 
 <div>
-  <!-- <Input
-    disabled={el.lock.config}
-    label="URL"
-    value={el.url}
-    onInput={(url) => onUpdate({ uuid: el.uuid, url })}
-  /> -->
+  <Checkbox
+    value={el.preview}
+    label={'Preview'}
+    onInput={(preview) => onUpdate({ uuid: el.uuid, preview })}
+  />
 </div>
diff --git a/ui/src/GameSpace/elements/EmbedWal/Element.svelte b/ui/src/GameSpace/elements/EmbedWal/Element.svelte
@@ -1,12 +1,14 @@
 <script lang="ts">
-  import MoveIcon from '~icons/fa6-solid/up-down-left-right';
-  import { weaveUrlToLocation, stringifyHrl, encodeContext } from '@theweave/api';
+  import CaretDownIcon from '~icons/fa6-solid/caret-down';
+  import ArrowUpRightFromSquareIcon from '~icons/fa6-solid/arrow-up-right-from-square';
+  import { weaveUrlToLocation, stringifyHrl, encodeContext, type WAL } from '@theweave/api';
   import { urlFromAppletHash, appletOrigin } from '@theweave/elements/dist/utils';
-  import { getContext } from '~/store';
+  import { getContext, type GameSpaceSyn } from '~/store';
   import type { EmbedWalElement } from './type';
+  import { cx } from '~/lib/util';
 
   export let el: EmbedWalElement;
-  // export let gameSpace: any = null;
+  export let gameSpace: GameSpaceSyn;
   let klass: string = '';
   export { klass as class };
   $$restProps; // This prevents Svelte warnings from unused props
@@ -17,7 +19,12 @@
   let previousWals: string[] = [];
 
   // Only recompute firstValidAsset if el.wals changes
-  let firstValidAssetSrc: string | null = null;
+  let displayAsset: {
+    src: string;
+    name: string;
+    icon: string;
+    wal: WAL;
+  } | null = null;
 
   function walsAreEqual(a: string[], b: string[]) {
     if (a.length !== b.length) return false;
@@ -30,12 +37,12 @@
   $: if (!walsAreEqual(el.wals, previousWals)) {
     previousWals = el.wals; // Update the reference to avoid triggering again
     firstValidAsset()
-      .then((src) => {
-        firstValidAssetSrc = src;
+      .then((val) => {
+        displayAsset = val;
       })
       .catch((err) => {
         console.error(err);
-        firstValidAssetSrc = null;
+        displayAsset = null;
       });
   }
 
@@ -58,39 +65,63 @@
           info.appletDevPort
         }?${queryString}#${urlFromAppletHash(info.appletHash)}`
       : `${appletOrigin(info.appletHash)}?${queryString}`;
-    return iframeSrc;
+    return { src: iframeSrc, name: info.assetInfo.name, icon: info.assetInfo.icon_src, wal };
+  }
+
+  function handleTogglePreview() {
+    const height = el.preview ? 30 : el.storedHeight;
+    const storedHeight = el.preview ? el.height : el.storedHeight;
+    const y = el.y + (el.preview ? -(storedHeight - 30) / 2 : (storedHeight - el.height) / 2);
+    gameSpace.change({
+      type: 'update-element',
+      element: { uuid: el.uuid, preview: !el.preview, height, storedHeight, y },
+    });
+  }
+
+  function handleOpenWal() {
+    weaveClient.openAsset(displayAsset.wal);
   }
 </script>
 
-<div class={`${klass} bg-gray-100 rounded-md w-full h-full flex`}>
-  {#if el.url}
-    <iframe
-      title="Embedded URL"
-      class="h-full w-full"
-      src={el.url}
-      frameborder="0"
-      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
-      referrerpolicy="strict-origin-when-cross-origin"
-      allowfullscreen
-    ></iframe>
-  {:else if firstValidAssetSrc}
-    <iframe
-      title="Embedded WAL"
-      class="h-full w-full"
-      src={firstValidAssetSrc}
-      frameborder="0"
-      allow="clipboard-write;"
-      allowfullscreen
-    ></iframe>
-  {:else}
-    <div
-      class="w-full h-full flexcc"
-      style={`font-size: ${Math.min(Math.min(el.width, el.height) * 0.5, 200)}px;`}>📎</div
-    >
-  {/if}
-  <div
-    class="absolute -top-4 -right-4 rounded-full b b-black/10 shadow-md text-lg font-bold bg-red-500 text-white flexcc h8 w8 cursor-move"
-  >
-    <MoveIcon />
+<div
+  class={`${klass} bg-gray-100 rounded-md w-full h-full flex flex-col b b-main-300 shadow-lg overflow-hidden`}
+>
+  <div class="h8 flex-shrink-0 flex text-lg p1 bg-gray-200">
+    <div class="flex-grow h-full flexcs">
+      {#if displayAsset}
+        <button
+          class="flexcc h-full b b-black/0 hover:(b-black/10 bg-black/20 text-white) rounded-md p1"
+          on:click={handleOpenWal}
+        >
+          {#if displayAsset.icon}
+            <img class="h-full mr1" src={displayAsset.icon} />
+          {/if}
+          {displayAsset.name}
+          <ArrowUpRightFromSquareIcon class="h-full ml2 text-main-400" />
+        </button>
+      {:else}
+        No asset selected
+      {/if}
+    </div>
+    <button class="pr1" on:click={handleTogglePreview}>
+      <CaretDownIcon class={cx('transition', { '-rotate-180': el.preview })} />
+    </button>
   </div>
+  {#if el.preview}
+    {#if displayAsset}
+      <iframe
+        title="Embedded WAL"
+        class="h-full w-full flex-grow"
+        src={displayAsset.src}
+        frameborder="0"
+        allow="clipboard-write;"
+        allowfullscreen
+      ></iframe>
+    {:else}
+      <div
+        class="w-full h-full flexcc"
+        style={`font-size: ${Math.min(Math.min(el.width, el.height) * 0.5, 200)}px;`}>📎</div
+      >
+    {/if}
+  {/if}
 </div>
diff --git a/ui/src/GameSpace/elements/EmbedWal/config.ts b/ui/src/GameSpace/elements/EmbedWal/config.ts
@@ -1,14 +1,16 @@
-import { type EmbedWalElement } from './type';
+import { type EmbedWalElement, VERSION } from './type';
 
 const config = {
   type: 'EmbedWal',
-  version: 1,
+  version: VERSION,
   label: 'Embed',
   icon: '📎',
   build: (): Partial<EmbedWalElement> => ({
     height: 200,
     width: 200,
     url: '',
+    preview: true,
+    storedHeight: 200,
   }),
 };
 

diff --git a/ui/src/GameSpace/elements/EmbedWal/type.ts b/ui/src/GameSpace/elements/EmbedWal/type.ts
@@ -1,7 +1,11 @@
 import { type GElementBase } from '~/store';
 
+export const VERSION = 2;
+
 export type EmbedWalElement = GElementBase & {
   type: 'EmbedWal';
-  version: number;
+  version: typeof VERSION;
   url: string;
+  preview: boolean;
+  storedHeight: number;
 };