From ff379ccf653477fa1b9451058fb04b4ba99436d3 Mon Sep 17 00:00:00 2001
From: Niko PLP <niko@nextgraph.org>
Date: Thu, 18 Jul 2024 06:25:30 +0300
Subject: [PATCH] menu and NavBar

---
 ng-app/src/lib/FullLayout.svelte          | 148 +++++++++++++++++-----
 ng-app/src/lib/Home.svelte                |  17 ++-
 ng-app/src/lib/Login.svelte               |  16 +--
 ng-app/src/lib/MobileBottomBar.svelte     |   2 +-
 ng-app/src/lib/components/MenuItem.svelte |   2 +-
 ng-app/src/lib/components/NavBar.svelte   |  77 +++++++++++
 ng-app/src/lib/components/NavIcon.svelte  |  54 ++++++++
 ng-app/src/locales/de.json                |   3 -
 ng-app/src/locales/en.json                |   7 +-
 ng-app/src/routes/NURI.svelte             |  24 +++-
 ng-app/src/styles.css                     |   2 +
 ng-app/src/tab.ts                         |  40 ++++++
 12 files changed, 333 insertions(+), 59 deletions(-)
 create mode 100644 ng-app/src/lib/components/NavBar.svelte
 create mode 100644 ng-app/src/lib/components/NavIcon.svelte

diff --git a/ng-app/src/lib/FullLayout.svelte b/ng-app/src/lib/FullLayout.svelte
index 5d45c4e..b3aed69 100644
--- a/ng-app/src/lib/FullLayout.svelte
+++ b/ng-app/src/lib/FullLayout.svelte
@@ -21,6 +21,7 @@
   import { link, location } from "svelte-spa-router";
   import MobileBottomBarItem from "./MobileBottomBarItem.svelte";
   import MobileBottomBar from "./MobileBottomBar.svelte";
+  import NavIcon from "./components/NavIcon.svelte";
   // @ts-ignore
   import Logo from "./components/Logo.svelte";
   import MenuItem from "./components/MenuItem.svelte";
@@ -29,7 +30,7 @@
   import { onMount, tick } from "svelte";
   import { cur_branch_has_discrete, cur_tab, cur_viewer, cur_editor, toggle_graph_discrete, open_doc, 
           available_editors, available_viewers, set_editor, set_viewer, set_view_or_edit, toggle_live_edit,
-          has_editor_chat } from "../tab";
+          has_editor_chat, all_files_count, all_comments_count, nav_bar, save, hideMenu } from "../tab";
   import ZeraIcon from "./ZeraIcon.svelte";
   import {
     Home,
@@ -74,12 +75,15 @@
     Beaker,
     WrenchScrewdriver,
     Sparkles,
+    PaperClip,
   } from "svelte-heros-v2";
+    import NavBar from "./components/NavBar.svelte";
+
+  export let withoutNavBar = false;
 
   let width: number;
   let breakPoint: number = 662;
   let mobile = false;
-  let show_menu = true;
   let open_view_as = false;
   let open_edit_with = false;
   let open_share = false;
@@ -92,14 +96,19 @@
   }
 
   let top;
-  let topMenu;
+  let shareMenu;
+  let toolsMenu;
   async function scrollToTop() {
     await tick();
     top.scrollIntoView();
   }
-  async function scrollToTopMenu() {
+  async function scrollToMenuShare() {
+    await tick();
+    shareMenu.scrollIntoView();
+  }
+  async function scrollToMenuTools() {
     await tick();
-    topMenu.scrollIntoView();
+    toolsMenu.scrollIntoView();
   }
   onMount(async () => {await open_doc(""); await scrollToTop()});
 
@@ -107,37 +116,37 @@
 
   const launchAppStore = (class_name:string) => {
     //TODO
-    show_menu = false;
+    hideMenu();
   };
 
   const openAction = (action:string) => {
     // TODO
-    show_menu = false;
+    hideMenu();
   }
 
   const openPane = (pane:string) => {
     // TODO
-    show_menu = false;
+    hideMenu();
   }
 
   const openShare = (share:string) => {
     // TODO
-    show_menu = false;
+    hideMenu();
   }
 
   const find = (share:string) => {
     // TODO
-    show_menu = false;
+    hideMenu();
   }
 
   const bookmark = (share:string) => {
     // TODO
-    show_menu = false;
+    hideMenu();
   }
 
   const annotate = (share:string) => {
     // TODO
-    show_menu = false;
+    hideMenu();
   }
 
   const share_items = [
@@ -174,14 +183,14 @@
 
 <Modal id="menu-modal"
     outsideclose
-    bind:open={show_menu}
+    bind:open={$cur_tab.show_menu}
     size = 'xs'
     placement = 'top-right'
     backdropClass="bg-gray-900 bg-opacity-50 dark:bg-opacity-80 menu-bg-modal"
   >
 
   <aside style="width:295px;" class="bg-white" aria-label="Sidebar">
-    <div class="bg-gray-60 overflow-y-auto dark:bg-gray-800" bind:this={topMenu}>
+    <div class="bg-gray-60 overflow-y-auto dark:bg-gray-800">
       <ul class="space-y-1 space-x-0 mb-10">
         {#if $cur_branch_has_discrete}
         <li>
@@ -196,7 +205,7 @@
         </li>
         {/if}
         {#if $cur_viewer}
-          <MenuItem selected={$cur_tab.view_or_edit} title={$cur_viewer["ng:a"]} clickable={($available_viewers.length > 1 || !$cur_tab.view_or_edit) && function () { if ($available_viewers.length > 1) { open_view_as = !open_view_as; } else { set_view_or_edit(true); show_menu = false; } open_edit_with=false;} }>
+          <MenuItem selected={$cur_tab.view_or_edit} title={$cur_viewer["ng:a"]} clickable={($available_viewers.length > 1 || !$cur_tab.view_or_edit) && function () { if ($available_viewers.length > 1) { open_view_as = !open_view_as; } else { set_view_or_edit(true); hideMenu(); } open_edit_with=false;} }>
             <Eye
               tabindex="-1"
               class="w-7 h-7 text-gray-700  focus:outline-none  dark:text-white  "
@@ -205,7 +214,7 @@
           </MenuItem>
           {#if open_view_as && $available_viewers.length > 1 }
             {#each $available_viewers as viewer}
-              <MenuItem title={viewer["ng:a"]} extraClass="submenu" clickable={(viewer["ng:g"] !== $cur_viewer["ng:g"] || !$cur_tab.view_or_edit) && function () { set_view_or_edit(true); set_viewer(viewer["ng:g"]); show_menu = false; open_view_as = false} }>
+              <MenuItem title={viewer["ng:a"]} extraClass="submenu" clickable={(viewer["ng:g"] !== $cur_viewer["ng:g"] || !$cur_tab.view_or_edit) && function () { set_view_or_edit(true); set_viewer(viewer["ng:g"]); hideMenu(); open_view_as = false} }>
                 <ZeraIcon
                   zera={viewer["ng:u"]}
                   config={{
@@ -220,7 +229,7 @@
         {/if}
         {#if $cur_tab.doc.can_edit}
           {#if $cur_editor}
-            <MenuItem title={$cur_editor["ng:a"]} selected={!$cur_tab.view_or_edit} clickable={ ($available_editors.length > 1 || $cur_tab.view_or_edit) && function () { if ($available_editors.length > 1) { open_edit_with = !open_edit_with;  } else { set_view_or_edit(false); show_menu = false; } open_view_as=false;} }>
+            <MenuItem title={$cur_editor["ng:a"]} selected={!$cur_tab.view_or_edit} clickable={ ($available_editors.length > 1 || $cur_tab.view_or_edit) && function () { if ($available_editors.length > 1) { open_edit_with = !open_edit_with;  } else { set_view_or_edit(false); hideMenu(); } open_view_as=false;} }>
               <PencilSquare
                 tabindex="-1"
                 class="w-7 h-7 text-gray-700  focus:outline-none  dark:text-white  "
@@ -229,7 +238,7 @@
             </MenuItem>
             {#if open_edit_with && $available_editors.length > 1 }
               {#each $available_editors as editor}
-                <MenuItem title={editor["ng:a"]} extraClass="submenu" clickable={(editor["ng:g"] !== $cur_editor["ng:g"] || $cur_tab.view_or_edit) && function () { set_view_or_edit(false); set_editor(editor["ng:g"]); show_menu = false; open_edit_with = false} }>
+                <MenuItem title={editor["ng:a"]} extraClass="submenu" clickable={(editor["ng:g"] !== $cur_editor["ng:g"] || $cur_tab.view_or_edit) && function () { set_view_or_edit(false); set_editor(editor["ng:g"]); hideMenu(); open_edit_with = false} }>
                   <ZeraIcon
                     zera={editor["ng:u"]}
                     config={{
@@ -262,6 +271,7 @@
             </MenuItem>
           {/if}
         {/if}
+
         {#if $cur_tab.doc.can_edit}
           <MenuItem title={$t("doc.menu.items.new_block.desc")} clickable={ ()=> openAction("new_block") }>
             <PlusCircle
@@ -280,6 +290,15 @@
             <span class="ml-3">{$t("doc.menu.items.editor_chat.label")}</span>
           </MenuItem>
         {/if}
+
+        <MenuItem title={$t("doc.menu.items.mc.desc")} clickable={ ()=> openPane("mc") }>
+          <Sparkles
+            tabindex="-1"
+            class="w-7 h-7 text-gray-700  focus:outline-none dark:text-white"
+          />
+          <span class="ml-3">{$t("doc.menu.items.mc.label")}</span>
+        </MenuItem>
+
         <MenuItem title={$t("doc.menu.items.folders.desc")} clickable={ ()=> openPane("folders") }>
           <FolderOpen
             tabindex="-1"
@@ -294,15 +313,15 @@
           />
           <span class="ml-3">{$t("doc.menu.items.toc.label")}</span>
         </MenuItem>
-        <MenuItem title={$t("doc.menu.items.mc.desc")} clickable={ ()=> openPane("mc") }>
-          <Sparkles
+        <MenuItem title={$t("doc.menu.items.files.desc")} clickable={ ()=> openPane("files") }>
+          <PaperClip
             tabindex="-1"
             class="w-7 h-7 text-gray-700  focus:outline-none dark:text-white"
           />
-          <span class="ml-3">{$t("doc.menu.items.mc.label")}</span>
+          <span class="ml-3">{$t("doc.menu.items.files.label")} {$all_files_count}</span>
         </MenuItem>
-        
-        <MenuItem title={$t("doc.menu.items.share.desc")} clickable={ () => open_share = !open_share }>
+        <div style="padding:0;" bind:this={shareMenu}></div>
+        <MenuItem title={$t("doc.menu.items.share.desc")} clickable={ () => { open_share = !open_share; scrollToMenuShare(); } }>
           <Share
             tabindex="-1"
             class="w-7 h-7 text-gray-700  focus:outline-none  dark:text-white"
@@ -323,7 +342,7 @@
             tabindex="-1"
             class="w-7 h-7 text-gray-700  focus:outline-none dark:text-white"
           />
-          <span class="ml-3">{$t("doc.menu.items.comments.label")}</span>
+          <span class="ml-3">{$t("doc.menu.items.comments.label")} {$all_comments_count}</span>
         </MenuItem>
 
         <MenuItem title={$t("doc.menu.items.branches.desc")} clickable={ ()=> openPane("branches") }>
@@ -405,8 +424,8 @@
           />
           <span class="ml-3">{$t("doc.menu.items.settings.label")}</span>
         </MenuItem>
-
-        <MenuItem title={$t("doc.menu.items.tools.desc")} clickable={ () => open_tools = !open_tools }>
+        <div style="padding:0;" bind:this={toolsMenu}></div>
+        <MenuItem title={$t("doc.menu.items.tools.desc")} clickable={ () => {open_tools = !open_tools; scrollToMenuTools();} } >
           <WrenchScrewdriver
             tabindex="-1"
             class="w-7 h-7 text-gray-700  focus:outline-none  dark:text-white"
@@ -428,25 +447,32 @@
 
 {#if mobile}
   <div class="full-layout">
-    <main class="pb-14" bind:this={top}>
+    {#if !withoutNavBar} 
+      <div class="fixed top-0 left-0 right-0">
+        <NavBar {scrollToTop}/>
+      </div>
+    {/if}
+    <div bind:this={top}></div>
+    <main class:mt-12={!withoutNavBar} class="pb-14 bg-white dark:bg-black">
       <slot />
     </main>
     <MobileBottomBar {activeUrl}>
-      <MobileBottomBarItem href="#/" icon={Home} on:click={scrollToTop}>
+      <MobileBottomBarItem href="#/" icon={Home} on:click={scrollToTop} >
         <span
           class="inline-flex justify-center items-center p-3 mt-1 -ml-2 w-3 h-3 text-sm font-medium text-primary-600 bg-primary-200 rounded-full dark:bg-primary-900 dark:text-primary-200"
         >
           13
         </span>
       </MobileBottomBarItem>
-      <MobileBottomBarItem href="#/stream" icon={Bolt} on:click={scrollToTop} />
+      <MobileBottomBarItem href="#/stream" icon={Bolt} on:click={scrollToTop}  />
       <MobileBottomBarItem
         href="#/search"
         icon={MagnifyingGlass}
         on:click={scrollToTop}
+        
       />
       <MobileBottomBarItem href="#/create" icon={PlusCircle} />
-      <MobileBottomBarItem href="#/site" icon={User} on:click={scrollToTop} />
+      <MobileBottomBarItem href="#/site" icon={User} on:click={scrollToTop}  />
     </MobileBottomBar>
   </div>
 {:else}
@@ -464,7 +490,7 @@
           <SidebarItem
             label={$t("pages.full_layout.home")}
             href="#/"
-            on:click={scrollToTop}
+            on:click={scrollToTop} on:keypress={scrollToTop} 
             class="py-1 tall-xs:p-2"
           >
             <svelte:fragment slot="icon">
@@ -538,6 +564,7 @@
             label={$t("pages.full_layout.messages")}
             href="#/messages"
             class="py-1 tall-xs:p-2"
+            on:click={scrollToTop} on:keypress={scrollToTop}
           >
             <svelte:fragment slot="icon">
               <PaperAirplane
@@ -555,6 +582,7 @@
             label={$t("pages.full_layout.notifications")}
             href="#/notifications"
             class="mt-1 py-1 tall-xs:p-2"
+            on:click={scrollToTop} on:keypress={scrollToTop}
           >
             <svelte:fragment slot="icon">
               <Bell
@@ -572,7 +600,61 @@
       </SidebarWrapper>
     </Sidebar>
 
-    <main class="ml-48" bind:this={top}>
+<!--   $: nav_bar = {
+    icon: false,
+    title: "",
+    back: true,
+    newest: 0,
+    save: undefined,
+  };-->
+
+    <!-- <div style="background-color: #f6f6f6;" class="fixed top-0 left-48 right-0 h-10 flex text-center text-gray-900 dark:text-white">
+      {#if $nav_bar.back}
+        <div role="button" tabindex="0" on:click={back} on:keypress={back} class="flex-none w-10 flex justify-center items-center">
+          <ArrowLeft tabindex="-1" class="w-8 h-8 focus:outline-none"/>
+        </div>
+      {/if}
+      {#if $nav_bar.icon}
+        <div style="cursor:pointer;" class="flex-none w-8 m-1 " on:click={scrollToTop} on:keypress={scrollToTop}>
+          <NavIcon img={$nav_bar.icon} config={{
+            tabindex:"-1",
+            class:"w-8 h-8 focus:outline-none"
+          }}/>
+        </div>
+      {/if}
+      <div style="cursor:pointer;" class="grow w-10 items-center flex px-1"><span class="inline-block truncate" on:click={scrollToTop} on:keypress={scrollToTop}> {$nav_bar.title} </span></div>
+      {#if $nav_bar.newest}
+        <div role="button" tabindex="0" class="flex-none m-1 rounded-full bg-primary-700 text-white dark:bg-primary-700" on:click={scrollToTop}>
+          <div class="flex items-center grow pr-2"> 
+            <ChevronDoubleUp tabindex="-1" class="w-6 h-6 m-1 focus:outline-none"/>
+            <span class="inline-block">{@html $nav_bar.newest < 100 ? "+ "+$nav_bar.newest : "<span class=\"text-xl\">&infin;</span>"}</span>
+          </div>
+        </div>
+      {/if}
+      {#if $nav_bar.save !== undefined}
+        
+        {#if $nav_bar.save }
+          <div class="flex-none w-10" role="button" on:click={save} on:keypress={save} title="Save">
+            <CheckCircle variation="solid" tabindex="-1" strokeWidth="3" class="w-10 h-10  text-primary-400 focus:outline-none"/>
+          </div>
+        {:else}
+          <div class="flex-none w-10" title="Saved!">
+            <CheckBadge tabindex="-1" class="w-8 h-8 m-1 text-green-500 focus:outline-none"/>
+          </div>
+        {/if}
+ 
+      {/if}
+      <div class="flex-none w-10 " role="button" title="Open Menu" on:click={()=>show_menu = true} on:keypress={()=>show_menu = true}>
+        <EllipsisVertical tabindex="-1" class="w-8 h-8 my-1 mr-2"/>
+      </div>
+    </div> -->
+    <div class="fixed top-0 left-48 right-0">
+      <NavBar {scrollToTop}/>
+    </div>
+
+
+    <div bind:this={top}></div>
+    <main class="ml-48 mt-12 bg-white dark:bg-black" >
       <slot />
     </main>
   </div>
@@ -585,7 +667,7 @@
     overflow: auto;
   }
   main {
-    overflow: hidden;
+    overflow-x: clip;
     overflow-wrap: break-word;
   }
   .graph-discrete-toggle button {
diff --git a/ng-app/src/lib/Home.svelte b/ng-app/src/lib/Home.svelte
index 55bee20..25872c0 100644
--- a/ng-app/src/lib/Home.svelte
+++ b/ng-app/src/lib/Home.svelte
@@ -19,7 +19,9 @@
     Users,
   } from "svelte-heros-v2";
   import Logo from "./components/Logo.svelte";
+    import NavBar from "./components/NavBar.svelte";
 
+  let top;
   let width: number;
   let breakPoint: number = 662;
   let mobile = false;
@@ -28,12 +30,16 @@
   } else {
     mobile = true;
   }
+
+  function scrollToTop() {
+    top.scrollIntoView();
+  }
 </script>
 
-<FullLayout>
+<FullLayout withoutNavBar={true}>
   {#if mobile}
-    <nav
-      class="border-t border-solid border-gray-200 bg-white dark:bg-gray-900 text-gray-700 dark:text-gray-200 dark:border-gray-700 divide-gray-100 dark:divide-gray-700 px-2 sm:px-4 py-2.5 w-full"
+    <nav bind:this={top}
+      style="background-color: #f6f6f6;"  class="border-t border-solid border-gray-200  text-gray-700 dark:text-gray-200 dark:border-gray-700 divide-gray-100 dark:divide-gray-700 px-2 sm:px-4 py-2.5 w-full"
     >
       <div
         class="mx-auto flex flex-wrap justify-between items-center w-full xxs:px-8 xs:px-10"
@@ -78,6 +84,11 @@
         </div>
       </div>
     </nav>
+    <div class="sticky top-0 w-full">
+
+      <NavBar {scrollToTop}/>
+      
+    </div>
   {/if}
 
   <Test />
diff --git a/ng-app/src/lib/Login.svelte b/ng-app/src/lib/Login.svelte
index 2a563a4..623d380 100644
--- a/ng-app/src/lib/Login.svelte
+++ b/ng-app/src/lib/Login.svelte
@@ -343,8 +343,8 @@
 
 <div
   class="flex-col justify-center md:max-w-2xl py-4 sm:px-8"
-  class:h-screen={step !== "load" && height > 660}
-  class:flex={height > 660}
+  class:h-screen={step !== "load" && height > 640}
+  class:flex={height > 640}
   bind:this={top}
 >
   {#if step == "load"}
@@ -460,8 +460,8 @@
   {:else if step == "pazzle" || step == "order" || step == "pin" || step == "mnemonic"}
     <div
       class="flex-col justify-center h-screen"
-      class:flex={height > 660}
-      class:min-w-[310px]={mobile}
+      class:flex={height > 640}
+      class:min-w-[300px]={mobile}
       class:min-w-[500px]={!mobile}
       class:max-w-[370px]={mobile}
       class:max-w-[600px]={!mobile}
@@ -585,7 +585,7 @@
                   tabindex="0"
                   class="pindigit m-1 disabled:opacity-15 disabled:text-gray-200 select-none align-bottom text-7xl p-0 w-full aspect-square border-0"
                   class:h-[160px]={!mobile}
-                  class:h-[100px]={mobile}
+                  class:h-[93px]={mobile}
                   class:text-8xl={!mobile}
                   on:click={async () => await on_pin_key(num)}
                   disabled={pin_code.length >= 4}
@@ -601,7 +601,7 @@
               tabindex="0"
               class="pindigit disabled:opacity-15 m-1 disabled:text-gray-200 select-none align-bottom text-7xl p-0 w-full aspect-square border-0"
               class:h-[160px]={!mobile}
-              class:h-[100px]={mobile}
+              class:h-[93px]={mobile}
               class:text-8xl={!mobile}
               on:click={async () => await on_pin_key(shuffle_pin[9])}
               disabled={pin_code.length >= 4}
@@ -620,7 +620,7 @@
               />
             </Button>
           </div>
-          <span class="mt-3 text-9xl min-h-[8rem] text-center"
+          <span class="select-none text-9xl h-[4rem] text-center"
             >{#each pin_code as pin_key}*{/each}</span
           >
         {/if}
@@ -727,7 +727,7 @@
 
 <style>
   .pindigit {
-    min-height: 99px;
+    min-height: 93px;
   }
 
   /* .pazzleline {
diff --git a/ng-app/src/lib/MobileBottomBar.svelte b/ng-app/src/lib/MobileBottomBar.svelte
index 1716121..5c406c2 100644
--- a/ng-app/src/lib/MobileBottomBar.svelte
+++ b/ng-app/src/lib/MobileBottomBar.svelte
@@ -24,7 +24,7 @@
 </script>
 
 <nav
-  class="border-t border-solid border-gray-200 bg-white dark:bg-gray-900 text-gray-700 dark:text-gray-200 dark:border-gray-700 divide-gray-100 dark:divide-gray-700 px-2 sm:px-4 py-2.5 w-full fixed bottom-0 left-0 z-20"
+  style="background-color: #f6f6f6;" class="border-t border-solid border-gray-200  text-gray-700 dark:text-gray-200 dark:border-gray-700 divide-gray-100 dark:divide-gray-700 px-2 sm:px-4 py-2.5 w-full fixed bottom-0 left-0 z-20"
 >
   <div
     class="mx-auto flex flex-wrap justify-between items-center w-full px-2 xxs:px-8 xs:px-10"
diff --git a/ng-app/src/lib/components/MenuItem.svelte b/ng-app/src/lib/components/MenuItem.svelte
index 87ec59d..f5bcce1 100644
--- a/ng-app/src/lib/components/MenuItem.svelte
+++ b/ng-app/src/lib/components/MenuItem.svelte
@@ -22,7 +22,7 @@
 {#if clickable}
     <li {title} role="menuitem" tabindex="0" class:text-primary-600={selected} class:text-gray-800={!selected} class:dark:text-white={!selected} class:dark:text-primary-300={selected} 
         class="{extraClass} select-none clickable focus:outline-2 focus:outline flex items-center px-2 py-1 text-base font-normal rounded-lg  hover:bg-gray-200 dark:hover:bg-gray-700 mt-1"
-        on:click={clickable} on:keypress={clickable} on:keydown={(e) => {if (e.code=='Space') { e.preventDefault(); clickable();} }}>
+        on:click={(e) => { e.currentTarget.blur(); clickable();}} on:keypress={clickable} on:keydown={(e) => {if (e.code=='Space') { e.preventDefault(); clickable();} }}>
         <slot />
     </li>
 {:else}
diff --git a/ng-app/src/lib/components/NavBar.svelte b/ng-app/src/lib/components/NavBar.svelte
new file mode 100644
index 0000000..817bd73
--- /dev/null
+++ b/ng-app/src/lib/components/NavBar.svelte
@@ -0,0 +1,77 @@
+<!--
+// Copyright (c) 2022-2024 Niko Bonnieure, Par le Peuple, NextGraph.org developers
+// All rights reserved.
+// Licensed under the Apache License, Version 2.0
+// <LICENSE-APACHE2 or http://www.apache.org/licenses/LICENSE-2.0>
+// or the MIT license <LICENSE-MIT or http://opensource.org/licenses/MIT>,
+// at your option. All files in the project carrying such
+// notice may not be copied, modified, or distributed except
+// according to those terms.
+-->
+
+<!--
+    @component DeviceIcon
+    Display an icon for a device class provided by the `device` attribute.
+    Pass `config` for custom attributes.
+-->
+
+<script lang="ts">
+  import {
+    ArrowLeft,
+    ChevronDoubleUp,
+    CheckCircle,
+    CheckBadge,
+    EllipsisVertical,
+  } from "svelte-heros-v2";
+  import NavIcon from "./NavIcon.svelte";
+
+  import {save, nav_bar, showMenu} from "../../tab";
+
+  export let scrollToTop = () => {};
+
+  const back = () => {
+    // going back
+    window.history.go(-1);
+  }
+</script>
+  
+<div style="background-color: #f6f6f6;" class="h-12 pb-2 flex text-center text-gray-900 dark:text-white">
+    {#if $nav_bar.back}
+        <div role="button" tabindex="0" on:click={back} on:keypress={back} class="flex-none w-10 flex justify-center items-center">
+        <ArrowLeft tabindex="-1" class="w-8 h-8 focus:outline-none"/>
+        </div>
+    {/if}
+    {#if $nav_bar.icon}
+        <div style="cursor:pointer;" class:w-10={!$nav_bar.back} class:ml-3={!$nav_bar.back} class="flex-none w-8 m-1 " on:click={scrollToTop} on:keypress={scrollToTop}>
+        <NavIcon img={$nav_bar.icon} config={{
+            tabindex:"-1",
+            class:"w-8 h-8 focus:outline-none"
+        }}/>
+        </div>
+    {/if}
+    <div style="cursor:pointer;" class:pl-3={!$nav_bar.back && !$nav_bar.icon} class="grow w-10 items-center flex px-1"><span class="inline-block truncate" on:click={scrollToTop} on:keypress={scrollToTop}> {$nav_bar.title} </span></div>
+    {#if $nav_bar.newest}
+        <div role="button" tabindex="0" class="flex-none m-1 rounded-full bg-primary-700 text-white dark:bg-primary-700" on:click={scrollToTop} on:keypress={scrollToTop}>
+        <div class="flex items-center grow pr-2"> 
+            <ChevronDoubleUp tabindex="-1" class="w-6 h-6 m-1 focus:outline-none"/>
+            <span class="inline-block">{@html $nav_bar.newest < 100 ? "+ "+$nav_bar.newest : "<span class=\"text-xl\">&infin;</span>"}</span>
+        </div>
+        </div>
+    {/if}
+    {#if $nav_bar.save !== undefined}
+        
+        {#if $nav_bar.save }
+        <div tabindex="0" class="flex-none w-10" role="button" on:click={save} on:keypress={save} title="Save">
+            <CheckCircle variation="solid" tabindex="-1" strokeWidth="3" class="w-10 h-10  text-primary-400 focus:outline-none"/>
+        </div>
+        {:else}
+        <div class="flex-none w-10" title="Saved!">
+            <CheckBadge tabindex="-1" class="w-8 h-8 m-1 text-green-500 focus:outline-none"/>
+        </div>
+        {/if}
+
+    {/if}
+    <div tabindex="0" class="flex-none w-10 " role="button" title="Open Menu" on:click={showMenu} on:keypress={showMenu}>
+        <EllipsisVertical tabindex="-1" class="w-8 h-8 my-1 mr-2"/>
+    </div>
+</div>
\ No newline at end of file
diff --git a/ng-app/src/lib/components/NavIcon.svelte b/ng-app/src/lib/components/NavIcon.svelte
new file mode 100644
index 0000000..20c00ed
--- /dev/null
+++ b/ng-app/src/lib/components/NavIcon.svelte
@@ -0,0 +1,54 @@
+<!--
+// Copyright (c) 2022-2024 Niko Bonnieure, Par le Peuple, NextGraph.org developers
+// All rights reserved.
+// Licensed under the Apache License, Version 2.0
+// <LICENSE-APACHE2 or http://www.apache.org/licenses/LICENSE-2.0>
+// or the MIT license <LICENSE-MIT or http://opensource.org/licenses/MIT>,
+// at your option. All files in the project carrying such
+// notice may not be copied, modified, or distributed except
+// according to those terms.
+-->
+
+<!--
+    @component DeviceIcon
+    Display an icon for a device class provided by the `device` attribute.
+    Pass `config` for custom attributes.
+-->
+
+<script lang="ts">
+    import {
+      Icon,
+      Bolt,
+      Megaphone,
+      QuestionMarkCircle,
+      Key,
+    } from "svelte-heros-v2";
+  
+    import DataClassIcon from "../DataClassIcon.svelte";
+
+    export let config = {};
+    export let img: string;
+  
+    const mapping = {
+      stream: Bolt,
+      channel: Megaphone,
+      private: Key,
+    };
+  
+    const find = (dataClass: string) => {
+      return mapping[dataClass] || QuestionMarkCircle;
+    };
+</script>
+  
+{#if img.startsWith("blob:")}
+    <img style="aspect-ratio:1;" class="rounded-full" src={img} alt="profile"/>
+{:else if img.startsWith("class:")}
+    <DataClassIcon {config} dataClass={img.slice(6)} />
+{:else if img.startsWith("nav:")}
+    <Icon {...config} variation="outline" color="currentColor" icon={find(img.slice(4))} />
+{:else}
+    <QuestionMarkCircle {...config}/>
+{/if}
+
+  
+  
\ No newline at end of file
diff --git a/ng-app/src/locales/de.json b/ng-app/src/locales/de.json
index 7b01a2d..3f9b390 100644
--- a/ng-app/src/locales/de.json
+++ b/ng-app/src/locales/de.json
@@ -4,9 +4,6 @@
       "title": "Seite nicht gefunden",
       "message": "Die gesuchte Seite existiert nicht."
     },
-    "nextgraph_uri": {
-      "message": "Nextgraph Link {uri}"
-    },
     "user_panel": {
       "title": "Nutzerbereich",
       "personal": "Privat"
diff --git a/ng-app/src/locales/en.json b/ng-app/src/locales/en.json
index 482c156..2ae5cc4 100644
--- a/ng-app/src/locales/en.json
+++ b/ng-app/src/locales/en.json
@@ -25,6 +25,10 @@
           "label": "Table of Content",
           "desc": "Table of Content for Graph and Document"
         },
+        "files": {
+          "label": "Attachments and Files",
+          "desc": "List all attached files and resources files, and download them if needed"
+        },
         "share": {
           "label": "Share",
           "desc": "Share with others, or react"
@@ -157,9 +161,6 @@
       "title": "Page Not Found",
       "message": "The page you are looking for does not exist."
     },
-    "nextgraph_uri": {
-      "message": "Nextgraph URI {uri}"
-    },
     "user_panel": {
       "title": "User Panel",
       "personal": "Personal"
diff --git a/ng-app/src/routes/NURI.svelte b/ng-app/src/routes/NURI.svelte
index 59171fd..b5aaebf 100644
--- a/ng-app/src/routes/NURI.svelte
+++ b/ng-app/src/routes/NURI.svelte
@@ -9,17 +9,27 @@
 // according to those terms.
 -->
 <script>
+  import { onMount } from "svelte";
+  import { push } from "svelte-spa-router";
+  import FullLayout from "../lib/FullLayout.svelte";
   import { t } from "svelte-i18n";
   // The params prop contains values matched from the URL
   export let params = {};
+  import {
+    active_session,
+  } from "../store";
 
   console.log(params);
+
+  onMount(async () => {
+    if (!$active_session) {
+      push("#/");
+    } else {
+      //await scrollToTop();
+    }
+  });
 </script>
 
-<div class="fix">
-  <div
-    class="h-screen aspect-[3/5] pazzleline max-w-[720px] bg-yellow-300 inner"
-  >
-    <p>{$t("pages.nextgraph_uri.message", { values: { uri: params[1] } })}</p>
-  </div>
-</div>
+<FullLayout>
+  { params[1] }
+</FullLayout>
\ No newline at end of file
diff --git a/ng-app/src/styles.css b/ng-app/src/styles.css
index 9b374c3..90e1c17 100644
--- a/ng-app/src/styles.css
+++ b/ng-app/src/styles.css
@@ -34,6 +34,8 @@
 }
 #menu-modal li {
     margin: 0;
+    margin-top: 5px;
+    margin-bottom: 5px;
 }
 #menu-modal li.submenu {
     padding-left: 30px;
diff --git a/ng-app/src/tab.ts b/ng-app/src/tab.ts
index 13e3a4b..7f4e2a3 100644
--- a/ng-app/src/tab.ts
+++ b/ng-app/src/tab.ts
@@ -230,6 +230,46 @@ export const cur_tab = writable({
     right_pane: false, // "folders", "toc", "branches", "files", "history", "comments", "info", "chat", "mc"
     action: false, // "repost", "dm", "react",  "author", "copy", "forward", "links", "qr", "download", "embed", "new_block", "notifs", "schema", "signature", "permissions", "settings", "print", "console", "source", "services", "dev",
 
+    show_menu: false,
+});
+
+
+export const showMenu = () => {
+    cur_tab.update(ct => {
+        ct.show_menu = true;
+        return ct;
+    });
+}
+
+export const hideMenu = () => {
+    cur_tab.update(ct => {
+        ct.show_menu = false;
+        return ct;
+    });
+}
+
+export const nav_bar = writable({
+    //icon: "class:post/rich",
+    icon: "nav:private",
+    //icon: "blob:http://localhost:1421/be6f968f-ff51-4e8f-bd32-36c60b7af49a",
+    title: "Private Store",
+    back: false,
+    newest: 0,
+    save: true,
+});
+
+export const save = async () => {
+    // saving the doc
+}
+
+export const all_files_count = derived(cur_tab, ($cur_tab) => {
+    let total = $cur_tab.cur_branch.attachments + $cur_tab.cur_branch.files;
+    return total ? `(${total})` : "";
+});
+
+export const all_comments_count = derived(cur_tab, ($cur_tab) => {
+    let total = $cur_tab.cur_branch.comments;
+    return total ? `(${total})` : "";
 });
 
 export const has_editor_chat = derived(cur_tab, ($cur_tab) => {