From 91a3a0f36aab27c4aef6beae7d1fc413209a8252 Mon Sep 17 00:00:00 2001
From: Niko PLP <niko@nextgraph.org>
Date: Fri, 5 Jul 2024 22:59:20 +0300
Subject: [PATCH] language selection for i18n

---
 ng-app/src/App.svelte                     |  2 +
 ng-app/src/lib/CenteredLayout.svelte      | 93 ++++++++++++++++++++---
 ng-app/src/lib/NoWallet.svelte            |  2 +-
 ng-app/src/routes/Install.svelte          |  2 +-
 ng-app/src/routes/NotFound.svelte         |  2 +-
 ng-app/src/routes/UserRegistered.svelte   |  2 +-
 ng-app/src/routes/WalletCreate.svelte     |  6 +-
 ng-app/src/routes/WalletLogin.svelte      |  4 +-
 ng-app/src/store.ts                       | 28 +++++++
 ng-oxigraph/src/oxigraph/sparql/update.rs |  4 +-
 ngaccount/web/src/routes/Create.svelte    |  2 +-
 ngaccount/web/src/routes/Delete.svelte    |  2 +-
 12 files changed, 125 insertions(+), 24 deletions(-)

diff --git a/ng-app/src/App.svelte b/ng-app/src/App.svelte
index e643f52..7edc732 100644
--- a/ng-app/src/App.svelte
+++ b/ng-app/src/App.svelte
@@ -19,6 +19,7 @@
     active_session,
     close_active_session,
     disconnections_subscribe,
+    select_default_lang,
   } from "./store";
 
   import Home from "./routes/Home.svelte";
@@ -59,6 +60,7 @@
 
   onMount(async () => {
     try {
+      await select_default_lang();
       await disconnections_subscribe();
     } catch (e) {
       //console.log("called disconnections_subscribe twice");
diff --git a/ng-app/src/lib/CenteredLayout.svelte b/ng-app/src/lib/CenteredLayout.svelte
index 4db2a7b..42d7abf 100644
--- a/ng-app/src/lib/CenteredLayout.svelte
+++ b/ng-app/src/lib/CenteredLayout.svelte
@@ -11,19 +11,89 @@
 
 <script lang="ts">
   import ng from "../api";
-  import { onMount } from "svelte";
+  import { onMount, tick } from "svelte";
+  import { current_lang, available_languages } from "../store";
+  import { Language } from "svelte-heros-v2";
 
-  let locales = [];
-  onMount(async () => {
-    locales = await ng.locales();
-  });
+  export let displayFooter = false;
+
+  let changingLang = false;
+
+  const changeLang = () => {
+    changingLang = true;
+    scrollToTop();
+  };
+
+  let top;
+  function scrollToTop() {
+    top.scrollIntoView();
+  }
+
+  const selectLang = async (lang) => {
+    current_lang.set(lang);
+    changingLang = false;
+    await tick();
+    scrollToTop();
+  };
+
+  let tauri_platform = import.meta.env.TAURI_PLATFORM;
+
+  const displayPopup = async (url, title) => {
+    if (!tauri_platform || tauri_platform == "android") {
+      window.open(url, "_blank").focus();
+    } else {
+      await ng.open_window(url, "viewer", title);
+    }
+  };
+
+  const displayNextgraphOrg = async () => {
+    await displayPopup("https://nextgraph.org", "NextGraph.org");
+  };
 </script>
 
-<div class="centered">
-  {#each locales as loc}
-    {loc}&nbsp;
-  {/each}
-  <slot />
+<div bind:this={top}>
+  {#if !changingLang}
+    <div class="centered">
+      <slot />
+    </div>
+    {#if displayFooter}
+      <div class="centered">
+        <div class="mb-20 mt-10">
+          <button
+            on:click={changeLang}
+            class="text-primary-700 bg-[#f6f6f6] bg-none ring-0 hover:bg-primary-100/90 focus:ring-4 focus:ring-primary-100/50 font-medium rounded-lg text-lg px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-primary-100/55"
+          >
+            <Language
+              tabindex="-1"
+              class="w-7 h-7 mr-2 transition duration-75  "
+            />Change language <!--note to translator: DO NOT TRANSLATE! it should stay in english always-->
+          </button>
+          <br />
+          <button
+            on:click={displayNextgraphOrg}
+            class="text-primary-700 bg-[#f6f6f6] bg-none ring-0 hover:bg-primary-100/90 focus:ring-4 focus:ring-primary-100/50 font-medium rounded-lg px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-primary-100/55 mb-2"
+            >About NextGraph
+          </button>
+        </div>
+      </div>
+    {/if}
+  {:else}
+    <div class="centered">
+      <ul class="mb-20 mt-10">
+        {#each Object.entries(available_languages) as lang}
+          <li
+            tabindex="0"
+            role="menuitem"
+            class="flex items-center p-2 text-lg mb-2 font-normal text-gray-900 clickable rounded-lg dark:text-white hover:bg-gray-200 dark:hover:bg-gray-700"
+            on:keypress={() => selectLang(lang[0])}
+            on:click={() => selectLang(lang[0])}
+          >
+            <span class="mx-3">{lang[1]}</span>
+          </li>
+        {/each}
+      </ul>
+    </div>
+  {/if}
 </div>
 
 <style>
@@ -34,4 +104,7 @@
     text-align: center;
     width: fit-content;
   }
+  li.clickable {
+    cursor: pointer;
+  }
 </style>
diff --git a/ng-app/src/lib/NoWallet.svelte b/ng-app/src/lib/NoWallet.svelte
index 12aa7a1..60fb913 100644
--- a/ng-app/src/lib/NoWallet.svelte
+++ b/ng-app/src/lib/NoWallet.svelte
@@ -16,7 +16,7 @@
   import CenteredLayout from "./CenteredLayout.svelte";
 </script>
 
-<CenteredLayout>
+<CenteredLayout displayFooter={true}>
   <div class="container3">
     <div class="row">
       <Logo class="logo block h-40" alt="NextGraph Logo" />
diff --git a/ng-app/src/routes/Install.svelte b/ng-app/src/routes/Install.svelte
index 38bf2d7..a63edfe 100644
--- a/ng-app/src/routes/Install.svelte
+++ b/ng-app/src/routes/Install.svelte
@@ -25,6 +25,6 @@
   onDestroy(() => {});
 </script>
 
-<CenteredLayout>
+<CenteredLayout displayFooter={true}>
   <Install {display_has_wallets_warning} />
 </CenteredLayout>
diff --git a/ng-app/src/routes/NotFound.svelte b/ng-app/src/routes/NotFound.svelte
index 906e146..4b233b9 100644
--- a/ng-app/src/routes/NotFound.svelte
+++ b/ng-app/src/routes/NotFound.svelte
@@ -14,7 +14,7 @@
   import CenteredLayout from "../lib/CenteredLayout.svelte";
 </script>
 
-<CenteredLayout>
+<CenteredLayout displayFooter={true}>
   <div class="p-8">
     <Alert color="red">
       <span class="font-medium">404</span> Page not found.
diff --git a/ng-app/src/routes/UserRegistered.svelte b/ng-app/src/routes/UserRegistered.svelte
index 870308d..d0aa237 100644
--- a/ng-app/src/routes/UserRegistered.svelte
+++ b/ng-app/src/routes/UserRegistered.svelte
@@ -45,7 +45,7 @@
   });
 </script>
 
-<CenteredLayout>
+<CenteredLayout displayFooter={true}>
   <div class="container3">
     <div class="row">
       <a href="#/">
diff --git a/ng-app/src/routes/WalletCreate.svelte b/ng-app/src/routes/WalletCreate.svelte
index 0e0dfa1..ddfebf2 100644
--- a/ng-app/src/routes/WalletCreate.svelte
+++ b/ng-app/src/routes/WalletCreate.svelte
@@ -396,7 +396,7 @@
   };
 </script>
 
-<CenteredLayout>
+<CenteredLayout displayFooter={true}>
   {#if wait}
     <div class=" max-w-6xl lg:px-8 mx-auto px-4 text-primary-700">
       {#if wait === true}
@@ -705,7 +705,7 @@
             </ul>
           </div>
         </div>
-        <div class="row mb-20">
+        <div class="row mb-10">
           <button
             on:click|once={create_wallet}
             class="text-white bg-primary-700 hover:bg-primary-700/90 focus:ring-4 focus:ring-primary-700/50 font-medium rounded-lg text-lg px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-primary-700/55 mb-2"
@@ -1424,7 +1424,7 @@
           {/if}
           <button
             on:click|once={do_wallet}
-            class="mt-10 mb-20 text-white bg-primary-700 hover:bg-primary-700/90 focus:ring-4 focus:ring-primary-700/50 font-medium rounded-lg text-lg px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-primary-700/55"
+            class="mt-10 mb-10 text-white bg-primary-700 hover:bg-primary-700/90 focus:ring-4 focus:ring-primary-700/50 font-medium rounded-lg text-lg px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-primary-700/55"
           >
             <svg
               class="w-8 h-8 mr-2 -ml-1"
diff --git a/ng-app/src/routes/WalletLogin.svelte b/ng-app/src/routes/WalletLogin.svelte
index fe54473..6a1f027 100644
--- a/ng-app/src/routes/WalletLogin.svelte
+++ b/ng-app/src/routes/WalletLogin.svelte
@@ -186,7 +186,7 @@
 </script>
 
 <div bind:this={top}>
-  <CenteredLayout>
+  <CenteredLayout displayFooter={!wallet}>
     {#if error}
       <div class=" max-w-6xl lg:px-8 mx-auto px-4 text-red-800">
         <svg
@@ -232,7 +232,7 @@
         <Logo class="logo block h-40" alt="NextGraph Logo" />
       </div>
       <h2 class="pb-5 text-xl">Select a wallet to login with</h2>
-      <div class="flex flex-wrap justify-center gap-5 mb-20">
+      <div class="flex flex-wrap justify-center gap-5 mb-10">
         {#each Object.entries($wallets) as wallet_entry}
           <div
             class="wallet-box"
diff --git a/ng-app/src/store.ts b/ng-app/src/store.ts
index 7478766..dffb46e 100644
--- a/ng-app/src/store.ts
+++ b/ng-app/src/store.ts
@@ -14,6 +14,34 @@ import { official_apps, official_services } from "./zeras";
 
 let all_branches = {};
 
+export const available_languages = {
+    "en": "English",
+    "de": "Deutsch",
+    "fr": "Français",
+    "ru": "Русский",
+    "es": "Español",
+    "it": "Italiano",
+    "zh": "中文",
+    "pt": "Português",
+};
+
+export const current_lang = writable("en");
+
+export const select_default_lang = async() => {
+    let locales = await ng.locales();
+    for (let lo of locales) {
+        if (available_languages[lo]) {
+            // exact match (if locales is a 2 chars lang code, or if we support regionalized translations)
+            current_lang.set(lo);
+            return;
+        }
+        lo = lo.substr(0,2);
+        if (available_languages[lo]) {
+            current_lang.set(lo);
+            return;
+        }
+    }
+};
 
 let loaded_external_apps = {};
 
diff --git a/ng-oxigraph/src/oxigraph/sparql/update.rs b/ng-oxigraph/src/oxigraph/sparql/update.rs
index 996238a..6943dea 100644
--- a/ng-oxigraph/src/oxigraph/sparql/update.rs
+++ b/ng-oxigraph/src/oxigraph/sparql/update.rs
@@ -214,9 +214,7 @@ impl<'a, 'b: 'a> SimpleUpdateEvaluator<'a, 'b> {
             GraphName::NamedNode(graph_name) => graph_name.into(),
             GraphName::DefaultGraph => {
                 if let Some(default_graph) = &self.options.query_options.default_graph {
-                    crate::oxrdf::GraphNameRef::NamedNode(NamedNodeRef::new_unchecked(
-                        &default_graph,
-                    ))
+                    GraphNameRef::NamedNode(NamedNodeRef::new_unchecked(&default_graph))
                 } else {
                     return Err(EvaluationError::NoDefaultGraph);
                 }
diff --git a/ngaccount/web/src/routes/Create.svelte b/ngaccount/web/src/routes/Create.svelte
index cf7ffe6..7aba033 100644
--- a/ngaccount/web/src/routes/Create.svelte
+++ b/ngaccount/web/src/routes/Create.svelte
@@ -375,7 +375,7 @@
         </div>
       </div>
       {#if ca}
-        <div class="row mb-20">
+        <div class="row mb-10">
           <button
             on:click|once={accept}
             class="mr-5 text-white bg-primary-700 hover:bg-primary-700/90 focus:ring-4 focus:ring-primary-700/50 font-medium rounded-lg text-lg px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-primary-700/55 mb-2"
diff --git a/ngaccount/web/src/routes/Delete.svelte b/ngaccount/web/src/routes/Delete.svelte
index 874bfa7..c1585eb 100644
--- a/ngaccount/web/src/routes/Delete.svelte
+++ b/ngaccount/web/src/routes/Delete.svelte
@@ -154,7 +154,7 @@
         </ul>
       </div>
     </div>
-    <div class="row mb-20">
+    <div class="row mb-10">
       <button
         on:click|once={accept}
         class="mr-5 text-white bg-primary-700 hover:bg-primary-700/90 focus:ring-4 focus:ring-primary-700/50 font-medium rounded-lg text-lg px-5 py-2.5 text-center inline-flex items-center dark:focus:ring-primary-700/55 mb-2"