[svelte] simple demo of a document layout component

dist/index.html

@@ -13,6 +13,7 @@
         <div id="portal"></div>
         <script src="js/jquery.js"></script>
         <script src="js/bootstrap@4.6.2/bootstrap.bundle.min.js"></script>
+	<script src="js/ggtx-svelte/DocumentLayout.min.js"></script>
         <script src="bundle.min.js"></script>
     </body>
 </html>

src/Gargantext/Components/Document/Layout.purs

@@ -22,9 +22,10 @@ import Gargantext.Components.NgramsTable.AutoSync (useAutoSync)
 import Gargantext.Components.Node (NodePoly(..))
 import Gargantext.Core.NgramsTable.Functions (addNewNgramA, applyNgramsPatches, coreDispatch, findNgramRoot, setTermListA, computeCache)
 import Gargantext.Core.NgramsTable.Types (CoreAction(..), NgramsTerm, Versioned(..), replace)
+import Gargantext.Ends (Backend(..))
 import Gargantext.Hooks.LinkHandler (useLinkHandler)
 import Gargantext.Hooks.Loader (useLoader)
-import Gargantext.Sessions (Session)
+import Gargantext.Sessions (Session(..))
 import Gargantext.Utils as U
 import Gargantext.Utils.Reactix as R2
 import Reactix as R
@@ -102,6 +103,7 @@ layoutWithContextNgramsCpt = here.component "layoutWithContextNgrams" cpt
           , document: NodePoly { hyperdata: Document doc }
           }
     , path
+    , session
     , sideControlsSlot
     }
     _ = do
@@ -197,6 +199,8 @@ layoutWithContextNgramsCpt = here.component "layoutWithContextNgrams" cpt
     --   let NgramsTable { ngrams_repo_elements: nre' } = ngrams'
     --   here.log2 "[layoutWithContextNgrams] ngrams (after apply patches)" $ A.fromFoldable $ Map.keys nre'
 
+    let Session { backend: Backend { baseUrl }, token } = session
+
     -- | Render
     -- |
     pure $
@@ -206,9 +210,15 @@ layoutWithContextNgramsCpt = here.component "layoutWithContextNgrams" cpt
         --[ H.pre { rows: 30 } [
         --    H.text (stringifyWithIndent 2 (encodeJson (fst state)))
         --  ] ] <>
-        [
-          -- Header
-          H.div
+        [ R2.ggtxDocumentLayout
+            { contextId: path.nodeId
+            , host: baseUrl
+            , token
+            }
+            []
+
+        -- Header
+        , H.div
             { className: "document-layout__header" }
             [ H.div
                 { className: "document-layout__main-controls" }

src/Gargantext/Utils/Reactix.purs

@@ -289,6 +289,9 @@ frameset = createDOM "frameset"
 keyCode :: forall event. event -> Effect Int
 keyCode = runEffectFn1 _keyCode
 
+ggtxDocumentLayout :: ElemFactory
+ggtxDocumentLayout = createDOM "ggtx-document-layout"
+
 foreign import _keyCode
   :: forall e. EffectFn1 e Int