From 81eeae89472f31484a4227fa1fd106180079d5ab Mon Sep 17 00:00:00 2001
From: Niko PLP <niko@nextgraph.org>
Date: Tue, 13 Aug 2024 14:23:52 +0300
Subject: [PATCH] added edit button on viewer header

---
 ng-app/src/lib/Document.svelte | 10 ++++++++--
 ng-app/src/locales/en.json     |  3 ++-
 ng-app/src/tab.ts              |  2 +-
 3 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/ng-app/src/lib/Document.svelte b/ng-app/src/lib/Document.svelte
index 0e54ddb..f3e93f5 100644
--- a/ng-app/src/lib/Document.svelte
+++ b/ng-app/src/lib/Document.svelte
@@ -19,12 +19,13 @@
   
   import {
     Pencil,
+    PencilSquare
   } from "svelte-heros-v2";
 
   import { t } from "svelte-i18n";
   import { Button, Progressbar, Spinner, Alert } from "flowbite-svelte";
   import { inview } from 'svelte-inview';
-  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 { cur_tab, cur_tab_view_or_edit, cur_tab_doc_can_edit, 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, set_view_or_edit } from "../tab";
   import NavIcon from "./icons/NavIcon.svelte";
 
   export let nuri = ""; 
@@ -71,12 +72,17 @@
                         class:"w-8 h-8 mr-2 mb-2 flex-none focus:outline-none"
                     }}/>
                     {/if}
+                    {#if $cur_tab_view_or_edit && $cur_tab_doc_can_edit}
+                      <button class="p-1 mr-2 mb-2 w-8 h-8 flex-none" on:click={()=>{set_view_or_edit(false);}} title={$t("doc.header.buttons.edit")}>
+                        <PencilSquare tabindex=-1 class="w-5 h-5 focus:outline-none" />
+                      </button> 
+                    {/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_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" />
-                        
                     </button>{#if !$header_title}<span role="button" on:click={openEditHeader} on:keypress={openEditHeader} tabindex="-1" class="h-8 py-1 inline-block align-middle ">{$t($edit_header_button)}</span>  {/if}
+
                     {/if}
                     {#if $header_title}
                         <h1 class="grow text-left text-2xl">{$header_title}</h1>
diff --git a/ng-app/src/locales/en.json b/ng-app/src/locales/en.json
index fc3e7fd..e47c572 100644
--- a/ng-app/src/locales/en.json
+++ b/ng-app/src/locales/en.json
@@ -56,7 +56,8 @@
     "cannot_load_offline": "You are offline and using the web app. There is currently a limitation on local storage within the Web App, and you need to connect to the broker every time you login with the Web App.<br/><br/>For now, the Web App does not keep a local copy of your documents. due to the limit of 5MB in localStorage. We will remove this limitation soon. Stay tuned!<br/><br/>Check your connectivity status in the ",
     "header": {
       "buttons": {
-        "edit": "Edit title & intro",
+        "edit": "Edit",
+        "edit_intro": "Edit title & intro",
         "edit_profile": "Edit profile",
         "bookmarked": "Saved",
         "all_docs": "All Docs",
diff --git a/ng-app/src/tab.ts b/ng-app/src/tab.ts
index 2368670..cdc0c09 100644
--- a/ng-app/src/tab.ts
+++ b/ng-app/src/tab.ts
@@ -391,7 +391,7 @@ export const cur_tab_view_or_edit = derived(cur_tab, ($cur_tab) => {
 });
 
 export const edit_header_button = derived(cur_tab, ($cur_tab) => {
-    return ($cur_tab.doc.is_store && ( $cur_tab.store.store_type === "public" || $cur_tab.store.store_type === "protected"))? "doc.header.buttons.edit_profile" : "doc.header.buttons.edit";
+    return ($cur_tab.doc.is_store && ( $cur_tab.store.store_type === "public" || $cur_tab.store.store_type === "protected"))? "doc.header.buttons.edit_profile" : "doc.header.buttons.edit_intro";
 });
 
 export const header_title = derived(cur_tab, ($cur_tab) => {