GUI adjustments on empty JSON doc

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>
 

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>

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" />
                         

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) {

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",