separated kanban and ts functionality

apps/launcher/ui/src/App.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import {Controller} from '@holo-host/talking-stickies'
+  import {Controller, BoardType} from '@holo-host/talking-stickies'
   const appId = process.env.SVELTE_APP_APP_ID ? process.env.SVELTE_APP_APP_ID : 'talking-stickies'
   const appPort = process.env.SVELTE_APP_APP_PORT ? process.env.SVELTE_APP_APP_PORT : 8888
   import { AppAgentWebsocket, AppWebsocket } from '@holochain/client';
@@ -28,7 +28,7 @@
 <svelte:head>
 </svelte:head>
 {#if connected}
-  <Controller client={client}></Controller>
+  <Controller client={client} boardType={BoardType.KanBan}></Controller>
 {:else}
   Loading
 {/if}

libs/ui/src/lib/BoardEditor.svelte

@@ -6,6 +6,7 @@
     import UpIcon from './icons/UpIcon.svelte'
     import DownIcon from './icons/DownIcon.svelte'
     import { Group, VoteType, BoardType } from './board';
+  import { onMount } from 'svelte';
   
     export let handleSave
     export let handleDelete = undefined
@@ -18,9 +19,8 @@
     let groupsTitle = "Groups"
     let defaultGroupName = "group"
 
-    const onTypeChange = (event) => {
-      boardType = event.currentTarget.value
-      if (boardType == BoardType.Stickies) {
+    const setBoardType = (newBoardType: BoardType) => {
+      if (newBoardType == BoardType.Stickies) {
         groupsTitle = "Groups"
         defaultGroupName = "group"
       } else {
@@ -31,6 +31,11 @@
         defaultGroupName = "column"
       }
     }
+
+ 
+    const onTypeChange = (event) => {
+      setBoardType(event.currentTarget.value)
+    }
     const addVoteType = () => {
       voteTypes.push(new VoteType(`🙂`, `description: edit-me`, 1))
       voteTypes = voteTypes
@@ -72,8 +77,12 @@
       groups.splice(index+1,0,g)
       groups = groups
     }
-    // let text = textA
-  </script>
+    
+    onMount( async () => {
+      setBoardType(boardType)
+    })
+
+</script>
 
   <style>
     .board-editor {
@@ -143,17 +152,6 @@
     <div class="edit-title">
       Title: <input class='textarea' bind:value={text} />
     </div>
-    {#if boardType !== undefined}
-    <div class="edit-type">
-      Type: 
-      <label>
-        <input checked={boardType===BoardType.Stickies} on:change={onTypeChange} type="radio" name="amount" value={BoardType.Stickies} /> Stickies
-      </label>
-      <label>
-        <input checked={boardType===BoardType.KanBan} on:change={onTypeChange} type="radio" name="amount" value={BoardType.KanBan}  /> KanBan
-      </label>
-    </div>
-    {/if}
     <div class="edit-groups">
       {groupsTitle}:
       <div class="add-item" on:click={() => addGroup()}>

libs/ui/src/lib/BoardList.svelte

@@ -18,6 +18,9 @@
   import type { Avatar } from './boardList';
   import Participants from './Participants.svelte';
   import {HoloIdenticon} from "@holochain-open-dev/elements";
+
+  export let boardType:BoardType = BoardType.Stickies
+
   if (!customElements.get('holo-identicon')){
       customElements.define('holo-identicon', HoloIdenticon)
     }
@@ -210,7 +213,7 @@
     </div>
     <div class='board-list'>
         {#if creating}
-        <BoardEditor handleSave={addBoard} {cancelEdit} boardType={BoardType.Stickies} voteTypes={editVoteTypes} />
+        <BoardEditor handleSave={addBoard} {cancelEdit} boardType={boardType} voteTypes={editVoteTypes} />
         {/if}
 
         {#each $boardList.boards as board }

libs/ui/src/lib/Controller.svelte

@@ -7,7 +7,9 @@
     import { setContext } from 'svelte';
     import type { AppAgentClient } from '@holochain/client';
     import type { SynStore } from '@holochain-syn/store';
-  import { BoardType } from './board';
+    import { BoardType } from './board';
+
+    export let boardType: BoardType = BoardType.Stickies
 
     // The debug drawer's ability to resized and hidden
     let resizeable
@@ -138,9 +140,9 @@
 
   <div class='app'>
     {#if tsStore}
-      <Toolbar />
+      <Toolbar title={boardType == BoardType.Stickies ? 'TalkingStickies' : 'KanBan' }/>
       {#if boardList}
-      <BoardList />
+      <BoardList boardType={boardType}/>
       {:else}
         Loading for board list...
       {/if}

libs/ui/src/lib/Toolbar.svelte

@@ -1,6 +1,6 @@
 <script>
   import LogoIcon from "./icons/LogoIcon.svelte";
-
+  export let title = ""
 
 </script>
 
@@ -21,5 +21,5 @@
 </style>
 
 <div class='toolbar'>
-  <div class="logo"><LogoIcon /></div><h1 class="logo-text">Boardz</h1>
+  <div class="logo"><LogoIcon /></div><h1 class="logo-text">{title}</h1>
 </div>

package.json

@@ -6,7 +6,7 @@
     "apps/*/ui"
   ],
   "scripts": {
-    "launch"      : "npm run build:happ && npm run build:ui && npm run launch:happ",
+    "launch"      : "npm run build:happ && npm run build:ui && WEBKIT_DISABLE_COMPOSITING_MODE=1 npm run launch:happ",
     "launch:happ" : "RUST_LOG=warn echo \"pass\" | hc launch --piped -n 1 ./apps/launcher/workdir/talking-stickies.happ -w --ui-path apps/launcher/ui/public network mdns",
     "network": "hc s clean && npm run build:happ && concurrently-repeat \"npm run start:agent:multi\"",
     "network:foo": "concurrently-repeat \"npm run start:foo\"",