adds addToPocket button and removes title when not standalone

lightningrodlabs · Apr 18, 2024 · ceb930b · ceb930b
1 parent 3967f87
commit ceb930b
Show file tree

Hide file tree

Showing 8 changed files with 293 additions and 177 deletions.
diff --git a/Cargo.lock b/Cargo.lock
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -7,9 +7,9 @@
   "scripts": {
     "dev": "VITE_ADMIN_PORT=$(port) VITE_APP_PORT=$(port) SIGNAL_PORT=$(port) BOOTSTRAP_PORT=$(port) UI_PORT=8888 npm run x",
     "x": "hc s clean &&  npm run build:happ && UI_PORT=8888 concurrently \"npm start -w ui\" \"npm run start:happ\" \"hc run-local-services -b $BOOTSTRAP_PORT -s $SIGNAL_PORT\"",
-    "applet-dev": " UI_PORT=8888 npm run applet-devy",
-    "applet-devy": "concurrently \"npm start -w ui\" \"sleep 1 && we-dev-cli --agent-idx 1 --dev-config we_dev/config.ts\" \"sleep 10 && we-dev-cli --agent-idx 2 --dev-config we_dev/config.ts\"",
-    "applet-devx": "BPORT=46263 SPORT=46262; concurrently \"hc run-local-services -b $BPORT -s $SPORT\" \"npm start -w ui\" \"./we_dev/we.AppImage  --dev-config we_dev/config.json --agent-num 1 -b http://127.0.0.1:$BPORT -s ws://127.0.0.1:$SPORT\" \"sleep 10 && ./we_dev/we.AppImage --dev-config we_dev/config.json --agent-num 2 -b http://127.0.0.1:$BPORT -s ws://127.0.0.1:$SPORT\"",
+    "tool-dev": " UI_PORT=8888 npm run tool-devy",
+    "tool-devy": "concurrently \"npm start -w ui\" \"sleep 1 && we-dev-cli --agent-idx 1 --dev-config we_dev/config.ts\" \"sleep 10 && we-dev-cli --agent-idx 2 --dev-config we_dev/config.ts\"",
+    "tool-devx": "BPORT=46263 SPORT=46262; concurrently \"hc run-local-services -b $BPORT -s $SPORT\" \"npm start -w ui\" \"./we_dev/we.AppImage  --dev-config we_dev/config.json --agent-num 1 -b http://127.0.0.1:$BPORT -s ws://127.0.0.1:$SPORT\" \"sleep 10 && ./we_dev/we.AppImage --dev-config we_dev/config.json --agent-num 2 -b http://127.0.0.1:$BPORT -s ws://127.0.0.1:$SPORT\"",
     "start": "VITE_ADMIN_PORT=$(port) VITE_APP_PORT=$(port) UI_PORT=8888 npm run network",
     "network": "hc s clean && npm run build:happ && npm run start -w ui && hc-spin -n 2 --ui-port $UI_PORT 8888 ./workdir/notebooks.webhapp",
     "test": "npm run build:happ && cargo nextest run -j 1",
@@ -26,7 +26,7 @@
   "devDependencies": {
     "@holochain-playground/cli": "^0.1.1",
     "@holochain/hc-spin": "^0.100.3",
-    "@lightningrodlabs/we-dev-cli": "^0.11.0",
+    "@lightningrodlabs/we-dev-cli": "^0.11.8-dev.2",
     "bestzip": "^2.2.0",
     "concurrently": "^6.2.1",
     "cross-env": "^7.0.3",

diff --git a/ui/package.json b/ui/package.json
@@ -19,7 +19,7 @@
     "@holochain-syn/core": "^0.300.0-dev.0",
     "@holochain-syn/text-editor": "^0.300.0-dev.0",
     "@holochain/client": "^0.17.0-dev.7",
-    "@lightningrodlabs/we-applet": "^0.16.0",
+    "@lightningrodlabs/we-applet": "^0.16.1",
     "@lit/context": "^1.0.0",
     "@lit/localize": "^0.12.0",
     "@mdi/js": "^7.2.96",

diff --git a/ui/src/elements/markdown-note.ts b/ui/src/elements/markdown-note.ts
@@ -57,14 +57,17 @@ import { msg } from "@lit/localize";
 import { decode } from "@msgpack/msgpack";
 import { Marked } from "@ts-stack/markdown";
 import { mdiBookOpenOutline, mdiEye, mdiPencil } from "@mdi/js";
+import { isWeContext, WAL } from "@lightningrodlabs/we-applet";
 import { NoteMeta } from "../types.js";
+import { notebooksContext, NotebooksStore } from "../store";
 
 enum View {
   Edit,
   Both,
   View
 }
 
+const POCKET_ICON=`<svg width="20" height="20" viewBox="0 0 300 300" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M74.2273 83.9C71.7318 83.9 69.3386 84.8956 67.574 86.6678C65.8095 88.4401 64.8182 90.8437 64.8182 93.35V150.05C64.8182 172.607 73.74 194.239 89.6209 210.189C105.502 226.139 127.041 235.1 149.5 235.1C196.27 235.1 234.182 197.023 234.182 150.05V93.35C234.182 90.8437 233.191 88.4401 231.426 86.6678C229.661 84.8956 227.268 83.9 224.773 83.9H74.2273ZM54.2676 73.3035C59.5612 67.9869 66.7409 65 74.2273 65H224.773C232.259 65 239.439 67.9869 244.732 73.3035C250.026 78.6202 253 85.8311 253 93.35V150.05C253 207.461 206.663 254 149.5 254C122.05 254 95.7245 243.048 76.3144 223.554C56.9044 204.059 46 177.619 46 150.05V93.35C46 85.8311 48.9739 78.6202 54.2676 73.3035Z" fill="black"/><path d="M188.841 141.469H158.596V110.124C158.596 105.635 154.961 102 150.474 102C145.986 102 142.351 105.635 142.351 110.124V141.469H110.085C105.635 141.469 102 145.104 102 149.593C102 154.081 105.635 157.717 110.122 157.717H142.388V188.876C142.388 193.365 146.023 197 150.511 197C154.998 197 158.633 193.365 158.633 188.876V157.717H188.878C193.365 157.717 197 154.081 197 149.593C196.944 145.104 193.328 141.469 188.841 141.469Z" fill="black"/></svg>`
 customElements.define("markdown-renderer", MarkdownRenderer);
 
 const WORKSPACE_NOT_FOUND = "The requested workspace was not found";
@@ -75,6 +78,13 @@ export class MarkdownNote extends LitElement {
   @property()
   documentStore!: DocumentStore<TextEditorState, TextEditorEphemeralState>;
 
+  @consume({ context: notebooksContext, subscribe: true })  
+  @property()
+  notebooksStore!: NotebooksStore;
+
+  @property()
+  standalone = false
+
   _meta = new StoreSubscriber(
     this,
     () =>
@@ -280,6 +290,11 @@ export class MarkdownNote extends LitElement {
         : html``} `;
   }
 
+  copyWALToClipboard(documentHash: EntryHash) {
+    const attachment: WAL = { hrl: [this.notebooksStore.dnaHash, documentHash], context: {} }
+    this.notebooksStore.weClient?.walToPocket(attachment)
+  }
+
   renderNoteWorkspace(
     sessionStore: SessionStore<TextEditorState, TextEditorEphemeralState>,
     state: TextEditorState
@@ -294,15 +309,28 @@ export class MarkdownNote extends LitElement {
           style="align-items: center; background-color: white; padding: 8px;
           box-shadow: var(--sl-shadow-x-large); z-index: 10"
         >
-          ${this.renderTitle()}
-          <span style="flex: 1">
+          ${this.standalone ? this.renderTitle() :""}
+          <span class="controls">
             <sl-button-group  label="View Options">
             <sl-button variant=${this._view === View.Edit ? "primary" : "neutral"} @click=${() => { this._view = View.Edit }}><sl-icon .src=${wrapPathInSvg(mdiPencil)} label="Edit"></sl-icon></sl-button>
             <sl-button variant=${this._view === View.Both ? "primary" : "neutral"} @click=${() => { this._view = View.Both }}><sl-icon .src=${wrapPathInSvg(mdiBookOpenOutline)} label="Both"></sl-icon></sl-button>
             <sl-button variant=${this._view === View.View ? "primary" : "neutral"} @click=${() => { this._view = View.View }}><sl-icon .src=${wrapPathInSvg(mdiEye)} label="View"></sl-icon></sl-button>
             </sl-button-group>
+            ${ isWeContext() ? html`
+            <sl-button
+              style="margin-left: 16px;"
+              circle
+              size="small"
+              @click=${() => {
+                this.copyWALToClipboard(this.documentStore.documentHash);
+              }}
+            > 
+            <sl-icon style="font-size:20px;vertical-align:middle"
+            .src=${`data:image/svg+xml;charset=utf-8,${POCKET_ICON}`}
+
+             label="Edit">
+            </sl-icon>`:""}
           </span>
-
           <span style="margin: 0 8px">${msg("Participants:")}</span>
           <session-participants
             direction="row"
@@ -418,6 +446,12 @@ export class MarkdownNote extends LitElement {
         display: flex;
         flex: 1;
       }
+      .controls {
+        display: flex;
+        flex: 1;
+        flex-wrap: nowrap;
+        align-items: center;
+      }
       .marked {
         display:block;
         word-wrap: normal;

diff --git a/ui/src/notebooks-app.ts b/ui/src/notebooks-app.ts
@@ -68,6 +68,7 @@ import { createNote } from "./index.js";
 import { appletServices } from "./we-applet.js";
 import { NoteMeta, NoteWorkspace, Notebook, noteMetaB64ToRaw, noteMetaToB64 } from "./types.js";
 import { deserializeExport, exportNotes } from "./export.js";
+import { NotebooksStore, notebooksContext } from "./store.js";
 
 // @ts-ignore
 const appPort = import.meta.env.VITE_APP_PORT ? import.meta.env.VITE_APP_PORT : 8888
@@ -117,6 +118,10 @@ export class NotebooksApp extends LitElement {
   @property()
   _synStore!: SynStore;
 
+  @provide({ context: notebooksContext })
+  @property()
+  _notebooksStore!: NotebooksStore;
+
   @query('#settings')
   private _settings!: SlDialog;
 
@@ -149,6 +154,7 @@ export class NotebooksApp extends LitElement {
     view: View;
     client: AppAgentClient;
     profilesClient: ProfilesClient;
+    weClient: WeClient | undefined;
   }> {
     if ((import.meta as any).env.DEV) {
       try {
@@ -157,8 +163,9 @@ export class NotebooksApp extends LitElement {
         console.warn("Could not initialize applet hot-reloading. This is only expected to work in a We context in dev mode.")
       }
     }
+    let weClient: WeClient | undefined
     if (isWeContext()) {
-      const weClient = await WeClient.connect(appletServices);
+      weClient = await WeClient.connect(appletServices);
 
       // Then handle all the different types of views that you offer
       switch (weClient.renderInfo.type) {
@@ -172,6 +179,7 @@ export class NotebooksApp extends LitElement {
                 },
                 profilesClient: weClient.renderInfo.profilesClient as any,
                 client: weClient.renderInfo.appletClient,
+                weClient
               };
             case "block":
               throw new Error("Unknown applet-view block type");
@@ -191,6 +199,7 @@ export class NotebooksApp extends LitElement {
                             client: weClient.renderInfo.appletClient,
                             profilesClient: weClient.renderInfo
                               .profilesClient as any,
+                            weClient
                           };
                         default:
                           throw new Error(`Unknown entry type: ${weClient.renderInfo.view.entryType}`);
@@ -212,6 +221,7 @@ export class NotebooksApp extends LitElement {
                     client: weClient.renderInfo.appletClient,
                     profilesClient: weClient.renderInfo
                       .profilesClient as any,
+                    weClient
                   };
                 default: throw new Error(`Unknown creatable type: ${weClient.renderInfo.view.name}`);
               }
@@ -249,13 +259,20 @@ export class NotebooksApp extends LitElement {
       },
       client,
       profilesClient,
+      weClient
     };
   }
 
   async connectToHolochain() {
-    const { view, profilesClient, client } = await this.buildClient();
+    const { view, profilesClient, client, weClient } = await this.buildClient();
     this._synStore = new SynStore(new SynClient(client, "notebooks"));
 
+
+    const appInfo = await this._synStore.client.client.appInfo();
+    const dnaHash = (appInfo?.cell_info.notebooks[0] as any)[
+      CellType.Provisioned
+    ].cell_id[0];
+    this._notebooksStore = new NotebooksStore(dnaHash, weClient)
     this._profilesStore = new ProfilesStore(profilesClient);
 
     this._myProfile = new StoreSubscriber(
@@ -338,12 +355,9 @@ export class NotebooksApp extends LitElement {
           try {
             const title = this._createTitle.value
             const noteHash = await createNote(this._synStore, title, undefined, `# ${title}\n\n`);
-            const appInfo = await this._synStore.client.client.appInfo();
-            const dnaHash = (appInfo?.cell_info.notebooks[0] as any)[
-              CellType.Provisioned
-            ].cell_id[0];
+
             const hrlWithContext: WAL = {
-              hrl: [dnaHash, noteHash],
+              hrl: [this._notebooksStore.dnaHash, noteHash],
               context: {},
             }
             // @ts-ignore
@@ -362,7 +376,7 @@ export class NotebooksApp extends LitElement {
         <syn-document-context
           .documentstore=${this._synStore.documents.get(this.view.noteHash)}
         >
-          <markdown-note style="flex: 1;"></markdown-note>
+          <markdown-note .standalone=${this.view.type === "standalone-note"} style="flex: 1;"></markdown-note>
         </syn-document-context>
       `;
     return html`

diff --git a/ui/src/store.ts b/ui/src/store.ts
@@ -0,0 +1,10 @@
+import { DnaHash } from "@holochain/client";
+import { WeClient } from "@lightningrodlabs/we-applet";
+import { createContext } from "@lit/context";
+
+export class NotebooksStore  {
+    constructor(public dnaHash:DnaHash, public weClient: WeClient | undefined) {
+    }
+}
+export const notebooksContext = createContext<NotebooksStore>('notebooks-context');
+
diff --git a/we_dev/config.ts b/we_dev/config.ts
@@ -69,31 +69,31 @@ export default defineConfig({
         // uiPort: 8888,
       },
     },
-    // {
-    //     name: 'gamez',
-    //     subtitle: 'play!',
-    //     description: 'Real-time games based on syn',
-    //     icon: {
-    //       type: "https",
-    //       url: "https://raw.githubusercontent.com/holochain-apps/gamez/main/we_dev/gamez_icon.svg"
-    //     },
-    //     source: {
-    //       type: "https",
-    //       url: "https://github.com/holochain-apps/gamez/releases/download/v0.3.100/gamez.webhapp"
-    //     },
-    //   },
-    //   {
-    //   name: 'kando',
-    //   subtitle: 'kanban boards',
-    //   description: 'Real-time kanban based on syn',
-    //   icon: {
-    //     type: 'https',
-    //     url: 'https://raw.githubusercontent.com/holochain-apps/kando/main/we_dev/kando_icon.png',
-    //   },
-    //   source: {
-    //     type: 'https',
-    //     url: 'https://github.com/holochain-apps/kando/releases/download/v0.8.101/kando.webhapp',
-    //   },
-    // },
+    {
+        name: 'gamez',
+        subtitle: 'play!',
+        description: 'Real-time games based on syn',
+        icon: {
+          type: "https",
+          url: "https://raw.githubusercontent.com/holochain-apps/gamez/main/we_dev/gamez_icon.svg"
+        },
+        source: {
+          type: "https",
+          url: "https://github.com/holochain-apps/gamez/releases/download/v0.4.2/gamez.webhapp"
+        },
+      },
+      {
+      name: 'kando',
+      subtitle: 'kanban boards',
+      description: 'Real-time kanban based on syn',
+      icon: {
+        type: 'https',
+        url: 'https://raw.githubusercontent.com/holochain-apps/kando/main/we_dev/kando_icon.png',
+      },
+      source: {
+        type: 'https',
+        url: 'https://github.com/holochain-apps/kando/releases/download/v0.9.5/kando.webhapp',
+      },
+    },
   ],
 });