language selection for i18n

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");

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>

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

ng-app/src/routes/Install.svelte

@@ -25,6 +25,6 @@
   onDestroy(() => {});
 </script>
 
-<CenteredLayout>
+<CenteredLayout displayFooter={true}>
   <Install {display_has_wallets_warning} />
 </CenteredLayout>

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.

ng-app/src/routes/UserRegistered.svelte

@@ -45,7 +45,7 @@
   });
 </script>
 
-<CenteredLayout>
+<CenteredLayout displayFooter={true}>
   <div class="container3">
     <div class="row">
       <a href="#/">

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"

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"

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 = {};
 

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);
                 }

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"

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"