Allow to change name of game space from the header

holochain-apps · Nov 3, 2024 · e9faa19 · e9faa19
1 parent fd8ac44
commit e9faa19
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 3 deletions.
diff --git a/ui/src/GameSpace/GameSpace.svelte b/ui/src/GameSpace/GameSpace.svelte
@@ -91,11 +91,20 @@
   function handleAddToPocket() {
     addToPocket(gameSpace);
   }
+
+  function handleNameChange(name: string) {
+    gameSpace.change({ type: 'set-name', name });
+  }
 </script>
 
 {#if $state}
   {#if !asAsset}
-    <LayoutBar title={$state.name + ($permissions.isArchived ? ' (view only)' : '')} />
+    <LayoutBar
+      onChangeTitle={handleNameChange}
+      canChangeTitle={$permissions.canEditSpace}
+      title={$state.name}
+      sub={$permissions.isArchived ? ' (view only)' : ''}
+    />
   {/if}
   <div class="h-full flex flex-col">
     {#if !$permissions.isArchived}
@@ -142,7 +151,7 @@
             <SpaceConfigurator
               creator={$state.creator}
               name={$state.name}
-              onNameChange={(name) => gameSpace.change({ type: 'set-name', name })}
+              onNameChange={handleNameChange}
               canEdit={$permissions.canEditSpace}
             />
           {/if}

diff --git a/ui/src/Layout/LayoutBar.svelte b/ui/src/Layout/LayoutBar.svelte
@@ -10,6 +10,7 @@
   import { type Board } from '~/lib/store';
   import { route, goBack } from '~/lib/routes';
   import { tooltip } from '~/shared/tooltip';
+  import { cx } from '~/lib/util';
 
   import AboutDialog from './AboutDialog.svelte';
   import AvatarDialog from './AvatarDialog.svelte';
@@ -21,6 +22,9 @@
 
   export let activeBoard: Board = null;
   export let title = 'Board Gamez';
+  export let canChangeTitle: boolean = false;
+  export let onChangeTitle = (name: string) => {};
+  export let sub: string = null;
 
   let aboutDialog;
   let editAvatarDialog;
@@ -32,6 +36,16 @@
   const editAvatar = () => {
     editAvatarDialog.open();
   };
+
+  function handleTitleBlur(ev: { currentTarget: HTMLHeadingElement }) {
+    onChangeTitle(ev.currentTarget.innerText);
+  }
+
+  function handleTitleKeydown(ev: KeyboardEvent & { currentTarget: HTMLHeadingElement }) {
+    if (ev.key === 'Enter') {
+      ev.currentTarget.blur();
+    }
+  }
 </script>
 
 <AboutDialog bind:this={aboutDialog} />
@@ -46,9 +60,20 @@
       <ArrowLeftIcon />
     </button>
   {/if}
-  <h1 class="font-bold text-2xl" style="text-shadow: 0 1px 0 rgba(0,0,0,.5)">
+  <h1
+    class={cx('font-bold text-2xl px2 py1 rounded-md outline-main-500', {
+      'hocus:(bg-gray-100 text-black/80 text-shadow-none!)': canChangeTitle,
+    })}
+    on:keydown={handleTitleKeydown}
+    style="text-shadow: 0 1px 0 rgba(0,0,0,.5)"
+    contenteditable={canChangeTitle}
+    on:blur={handleTitleBlur}
+  >
     {title}
   </h1>
+  {#if sub}
+    <span class="opacity-50">{sub}</span>
+  {/if}
 
   <div class="flex-grow"></div>
 

diff --git a/ui/src/lib/util.ts b/ui/src/lib/util.ts
@@ -1,4 +1,5 @@
 import type { WeaveUrl } from '@theweave/api';
+import classnames from 'classnames';
 import { readable } from 'svelte/store';
 import type { Readable } from 'svelte/store';
 
@@ -65,3 +66,5 @@ export function waitUntilAvailable<T>(readable: Readable<T | null>): Promise<T>
     }, 5000);
   });
 }
+
+export const cx = classnames;