From c38585f87d2a47728a11c355c2a23906eb44fc2b Mon Sep 17 00:00:00 2001
From: Niko PLP <niko@nextgraph.org>
Date: Fri, 9 Aug 2024 22:02:08 +0300
Subject: [PATCH] GUI adjustments on empty JSON doc

---
 ng-app/src/apps/AutomergeEditor.svelte   | 27 ++++++++++++++++++++----
 ng-app/src/apps/SparqlQueryEditor.svelte |  2 +-
 ng-app/src/lib/Document.svelte           |  4 ++--
 ng-app/src/store.ts                      |  2 +-
 ng-app/src/zeras.ts                      |  1 +
 5 files changed, 28 insertions(+), 8 deletions(-)

diff --git a/ng-app/src/apps/AutomergeEditor.svelte b/ng-app/src/apps/AutomergeEditor.svelte
index 074d2a0..14d3769 100644
--- a/ng-app/src/apps/AutomergeEditor.svelte
+++ b/ng-app/src/apps/AutomergeEditor.svelte
@@ -23,11 +23,13 @@
     import { 
         cur_tab_register_on_save,
         cur_tab_deregister_on_save,
-        cur_tab_branch_class
+        cur_tab_doc_can_edit,
+        set_view_or_edit
     } from "../tab";
     import { t } from "svelte-i18n";
     import wasmUrl from "@automerge/automerge/automerge.wasm?url";
     import { next as A } from "@automerge/automerge/slim";
+    import{ PencilSquare } from "svelte-heros-v2";
 
     import AMap from "./automerge/AMap.svelte";
 
@@ -116,14 +118,31 @@
             toast_error(display_error(e));
         }
     }
+
+    const edit = () => {
+      set_view_or_edit(false);
+    }
   
   </script>
     {#if safari_error}
         <Alert class="m-2" color="red">{$t("errors.no_wasm_on_old_safari")}</Alert>
     {:else}
-        <div class="grow mb-20" style="min-height:300px;">
-            <AMap {readonly} value={doc} {doc} on:update={update} on:updateText={updateText} proxy={root_proxy}/>
-        </div>
+        {#if Object.keys(doc).length !== 0 || !readonly}
+            <div class="grow mb-20" style="min-height:300px;">
+                <AMap {readonly} value={doc} {doc} on:update={update} on:updateText={updateText} proxy={root_proxy}/>
+            </div>
+        {:else if $cur_tab_doc_can_edit}
+            <button
+                on:click={edit}
+                on:keypress={edit}
+                class="select-none ml-4 mt-2 mb-10 text-white bg-primary-700 hover:bg-primary-700/90 focus:ring-4 focus:ring-primary-500/50 rounded-lg text-base p-2 text-center inline-flex items-center dark:focus:ring-primary-700/55"
+            >
+                <PencilSquare class="mr-2 focus:outline-none" tabindex="-1" />
+                {$t("doc.start_editing")}
+            </button>
+        {:else}
+            <p class="ml-5">{$t("doc.empty")}</p>
+        {/if}
     {/if}
   <style>
 
diff --git a/ng-app/src/apps/SparqlQueryEditor.svelte b/ng-app/src/apps/SparqlQueryEditor.svelte
index eea765a..dc8bcb8 100644
--- a/ng-app/src/apps/SparqlQueryEditor.svelte
+++ b/ng-app/src/apps/SparqlQueryEditor.svelte
@@ -99,7 +99,7 @@
               <LineNumbers {highlighted} wrapLines hideBorder />
             </Highlight>
           {:else}
-          <span class="ml-2">{$t("doc.empty")}</span>
+            <span class="ml-2">{$t("doc.empty")}</span>
           {/if}
         {:else if results?.head} 
           <Table>
diff --git a/ng-app/src/lib/Document.svelte b/ng-app/src/lib/Document.svelte
index 0b00806..194843e 100644
--- a/ng-app/src/lib/Document.svelte
+++ b/ng-app/src/lib/Document.svelte
@@ -24,7 +24,7 @@
   import { t } from "svelte-i18n";
   import { Button, Progressbar, Spinner, Alert } from "flowbite-svelte";
   import { inview } from 'svelte-inview';
-  import { cur_tab, cur_tab_doc_can_edit, nav_bar, can_have_header, header_icon, header_title, header_description, cur_branch, set_header_in_view, edit_header_button, cur_app, load_official_app, nav_bar_reset_newest } from "../tab";
+  import { cur_tab, cur_tab_view_or_edit, nav_bar, can_have_header, header_icon, header_title, header_description, cur_branch, set_header_in_view, edit_header_button, cur_app, load_official_app, nav_bar_reset_newest } from "../tab";
   import NavIcon from "./icons/NavIcon.svelte";
 
   export let nuri = ""; 
@@ -72,7 +72,7 @@
                     }}/>
                     {/if}
                     {#if !$header_title} <span class="font-mono h-8 py-1 inline-block align-middle mr-2"> {$cur_tab.doc.nuri.substring(2,9)} </span>  {/if}
-                    {#if $cur_tab_doc_can_edit}
+                    {#if !$cur_tab_view_or_edit}
                     <button class="p-1 mr-2 mb-2 w-8 h-8 flex-none" on:click={openEditHeader} title={$t($edit_header_button)}>
                         <Pencil tabindex=-1 class="w-5 h-5 focus:outline-none" />
                         
diff --git a/ng-app/src/store.ts b/ng-app/src/store.ts
index 03f5028..c6d713a 100644
--- a/ng-app/src/store.ts
+++ b/ng-app/src/store.ts
@@ -533,7 +533,7 @@ export const branch_subscribe = function(nuri:string, in_tab:boolean) {
                             req.V0.session_id = session.session_id;
                             unsub = await ng.app_request_stream(req,
                                 async (response) => {
-                                    console.log("GOT APP RESPONSE", response);
+                                    //console.log("GOT APP RESPONSE", response);
                                     if (response.V0.TabInfo) {
                                         tab_update(nuri, ($cur_tab) => {
                                             if (response.V0.TabInfo.branch?.id) {
diff --git a/ng-app/src/zeras.ts b/ng-app/src/zeras.ts
index 0d73669..8120eaf 100644
--- a/ng-app/src/zeras.ts
+++ b/ng-app/src/zeras.ts
@@ -323,6 +323,7 @@ export const official_apps = {
         "ng:b": "AutomergeJsonSource", // displayed with highlight.js , with option to download
         "ng:o": ["data:json", "data:table", "doc:diagram:jsmind", "doc:diagram:gantt", "doc:diagram:excalidraw", "doc:viz:*", "doc:chart:*", "prod:cad"],
         "ng:w": [],
+        "full_width": true,
     },
     "n:g:z:crdt_source_viewer:ymap": { 
         "ng:n": "JSON Source",