[Feat] Add feedback and about to viewer (#1115)

* Show Feedback button in viewer * Import and inject global styles using vite's style.css?inline feature * Add about dialog to viewer * change feedback path to specify application name * version stamp all fw lite dlls. use the version from the assembly as the feedback version * Make viewer about text translatable --------- Co-authored-by: Kevin Hahn <[email protected]>
sillsdev · Oct 16, 2024 · 37a6fdf · 37a6fdf
1 parent c68820f
commit 37a6fdf
Show file tree

Hide file tree

Showing 19 changed files with 150 additions and 26 deletions.
diff --git a/backend/FwLite/FwDataMiniLcmBridge/FwDataMiniLcmBridge.csproj b/backend/FwLite/FwDataMiniLcmBridge/FwDataMiniLcmBridge.csproj
@@ -4,6 +4,8 @@
         <TargetFramework>net8.0</TargetFramework>
         <ImplicitUsings>enable</ImplicitUsings>
         <Nullable>enable</Nullable>
+        <InformationalVersion>$(ApplicationDisplayVersion)</InformationalVersion>
+        <FileVersion>$(ApplicationDisplayVersion)</FileVersion>
     </PropertyGroup>
     <ItemGroup>
         <PackageReference Include="Microsoft.Extensions.Caching.Memory" Version="8.0.0" />

diff --git a/backend/FwLite/FwLiteProjectSync/FwLiteProjectSync.csproj b/backend/FwLite/FwLiteProjectSync/FwLiteProjectSync.csproj
@@ -6,6 +6,8 @@
         <ImplicitUsings>enable</ImplicitUsings>
         <Nullable>enable</Nullable>
         <SelfContained>true</SelfContained>
+        <InformationalVersion>$(ApplicationDisplayVersion)</InformationalVersion>
+        <FileVersion>$(ApplicationDisplayVersion)</FileVersion>
     </PropertyGroup>
 
     <ItemGroup>

diff --git a/backend/FwLite/LcmCrdt/LcmCrdt.csproj b/backend/FwLite/LcmCrdt/LcmCrdt.csproj
@@ -4,6 +4,8 @@
         <TargetFramework>net8.0</TargetFramework>
         <ImplicitUsings>enable</ImplicitUsings>
         <Nullable>enable</Nullable>
+        <InformationalVersion>$(ApplicationDisplayVersion)</InformationalVersion>
+        <FileVersion>$(ApplicationDisplayVersion)</FileVersion>
     </PropertyGroup>
 
     <ItemGroup>

diff --git a/backend/FwLite/LocalWebApp/LocalWebApp.csproj b/backend/FwLite/LocalWebApp/LocalWebApp.csproj
@@ -8,6 +8,8 @@
         <GenerateEmbeddedFilesManifest>true</GenerateEmbeddedFilesManifest>
         <ServerGarbageCollection>false</ServerGarbageCollection>
         <SelfContained>true</SelfContained>
+        <InformationalVersion>$(ApplicationDisplayVersion)</InformationalVersion>
+        <FileVersion>$(ApplicationDisplayVersion)</FileVersion>
     </PropertyGroup>
     <PropertyGroup Condition="'$(Configuration)' == 'Release' ">
 <!--        single file disabled as it's less efficient for updates-->

diff --git a/backend/FwLite/LocalWebApp/Routes/FeedbackRoute.cs b/backend/FwLite/LocalWebApp/Routes/FeedbackRoute.cs
@@ -1,12 +1,15 @@
-namespace LocalWebApp.Routes;
+using System.Reflection;
+
+namespace LocalWebApp.Routes;
 
 public static class FeedbackRoute
 {
     public static void MapFeedbackRoutes(this IEndpointRouteBuilder endpoints)
     {
-        endpoints.MapGet("/api/feedback", () =>
+        endpoints.MapGet("/api/feedback/fw-lite", () =>
         {
-            var version = "alpha";
+            var version = typeof(FeedbackRoute).Assembly
+                .GetCustomAttribute<AssemblyInformationalVersionAttribute>()?.InformationalVersion ?? "dev";
             var os = Environment.OSVersion.Platform switch
             {
                 PlatformID.Win32NT => "Windows",

diff --git a/backend/FwLite/MiniLcm/MiniLcm.csproj b/backend/FwLite/MiniLcm/MiniLcm.csproj
@@ -4,6 +4,8 @@
         <TargetFramework>net8.0</TargetFramework>
         <ImplicitUsings>enable</ImplicitUsings>
         <Nullable>enable</Nullable>
+        <InformationalVersion>$(ApplicationDisplayVersion)</InformationalVersion>
+        <FileVersion>$(ApplicationDisplayVersion)</FileVersion>
     </PropertyGroup>
 
     <ItemGroup>

diff --git a/backend/LexBoxApi/Controllers/FeedbackController.cs b/backend/LexBoxApi/Controllers/FeedbackController.cs
@@ -0,0 +1,18 @@
+using LexBoxApi.Services;
+using Microsoft.AspNetCore.Mvc;
+
+namespace LexBoxApi.Controllers;
+
+[ApiController]
+[Route("/api/feedback")]
+public class FeedbackController() : ControllerBase
+{
+    [HttpGet("fw-lite")]
+    public IResult RedirectToFieldWorksLiteFeedbackForm()
+    {
+        var version = AppVersionService.Version;
+        var os = "Web";
+        var url = $"https://docs.google.com/forms/d/e/1FAIpQLSdUdNufT3sdoBscY7vixguYnvtgpaw-hjX-z54BKi9KlYv4vw/viewform?usp=pp_url&entry.2102942583={version}&entry.1772086822={os}";
+        return Results.Redirect(url, preserveMethod: true);
+    }
+}
diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml
diff --git a/frontend/src/lib/i18n/locales/en.json b/frontend/src/lib/i18n/locales/en.json
@@ -720,5 +720,39 @@ If you don't see a dialog or already closed it, click the button below:",
     "any": "Any",
     "yes_no": "{value, select, true {Yes} false {No} other {Unknown}}",
     "did_you_know": "Did you know?",
+  },
+  "viewer": {
+    "about": "## What is this?\n\
+\
+This is a beta version of a new dictionary building tool that is currently under development.\n\
+\
+The data you see here reflects the current data in the corresponding [Language Forge](https://languageforge.org/) project.\n\
+\
+This read-only version of the new dictionary tool is primarily for gathering early feedback on its look and feel. So, please use the [Feedback](/api/feedback) button in the top right corner of the page.\n\
+\
+## It can edit FieldWorks projects!\n\
+\
+It's true! There's already another version of the tool that you can use today to open and edit your data in FieldWorks.\n\
+It's also loaded with additional features! We're calling it [FieldWorks Lite](https://lexbox.org/fw-lite).\n\
+So, please download and try out the alpha version of [FieldWorks Lite](https://lexbox.org/fw-lite) as well.\n\
+\
+## Should I be excited?\n\
+\
+Yes! FieldWorks Lite will be revolutionary in multiple ways. It will be:\n\
+\
+- Cross-platform: it will work on Windows, Linux, Mac and eventually mobile\n\
+- Usable offline: you won't need an internet connection\n\
+- Collaborative: you will see any changes other users make as they work\n\
+- Faster than you're used to - we're quite confident about that 😀\n\
+\
+Eventually, FieldWorks Lite will replace both [WeSay](https://software.sil.org/wesay/) and [Language Forge](https://languageforge.org/).\n\
+\
+So, please send us your [feedback](/api/feedback). We want this tool to serve you as well as possible.\n\
+\
+## FieldWorks Lite is not\n\
+\
+- A replacement for [FieldWorks](https://software.sil.org/fieldworks/)\n\
+- A replacement for [Dictionary App Builder](https://software.sil.org/dictionaryappbuilder/)\n\
+- A replacement for [Webonary](https://www.webonary.org/)"
   }
 }
diff --git a/frontend/src/routes/(authenticated)/project/[project_code]/viewer/+page.svelte b/frontend/src/routes/(authenticated)/project/[project_code]/viewer/+page.svelte
@@ -3,15 +3,18 @@
   import {LexboxService} from 'viewer/service-provider';
   import {LfClassicLexboxApi} from './lfClassicLexboxApi';
   import type {PageData} from './$types';
+  import t from '$lib/i18n';
+  import { derived } from 'svelte/store';
 
   export let data: PageData;
   $: project = data.project;
 
+  const about = derived(t, ($t) => $t('viewer.about'));
   const serviceProvider = window.lexbox.ServiceProvider;
   let service: LfClassicLexboxApi;
   $: {
     if (serviceProvider) {
-      let localService = new LfClassicLexboxApi($project.code);
+      let localService = new LfClassicLexboxApi($project.code, about);
       serviceProvider.setService(LexboxService.LexboxApi, localService);
       service = localService;
     }

diff --git a/frontend/src/routes/(authenticated)/project/[project_code]/viewer/lfClassicLexboxApi.ts b/frontend/src/routes/(authenticated)/project/[project_code]/viewer/lfClassicLexboxApi.ts
@@ -11,6 +11,7 @@ import {
   type SemanticDomain
 } from 'viewer/lexbox-api';
 import { SEMANTIC_DOMAINS_EN } from './semantic-domains.en.generated-data';
+import { type Readable } from 'svelte/store';
 
 function prepareEntriesForUi(entries: IEntry[]): void {
   entries.forEach(entry => {
@@ -31,11 +32,14 @@ function preparePartsOfSpeedForUi(partsOfSpeech: PartOfSpeech[]): void {
 }
 
 export class LfClassicLexboxApi implements LexboxApiClient {
-  constructor(private projectCode: string) {
+  constructor(private projectCode: string, private aboutMarkdown: Readable<string>) {
   }
 
   SupportedFeatures(): LexboxApiFeatures {
-    return {};
+    return {
+      feedback: true,
+      about: this.aboutMarkdown,
+    };
   }
 
   async GetWritingSystems(): Promise<WritingSystems> {

diff --git a/frontend/viewer/package.json b/frontend/viewer/package.json
@@ -11,7 +11,6 @@
   "main": "dist-web-component/viewer.js",
   "exports": {
     "./component": "./dist-web-component/viewer.js",
-    "./style": "./dist-web-component/style.css",
     "./lexbox-api": "./src/lib/services/lexbox-api.ts",
     "./service-provider": "./src/lib/services/service-provider.ts"
   },
@@ -29,6 +28,7 @@
     "@iconify-json/mdi": "^1.1.66",
     "@mdi/js": "^7.4.47",
     "@sveltejs/vite-plugin-svelte": "^3.1.1",
+    "@tailwindcss/typography": "^0.5.13",
     "@tsconfig/svelte": "^5.0.4",
     "svelte": "catalog:",
     "svelte-check": "catalog:",
@@ -44,6 +44,7 @@
     "autoprefixer": "^10.4.19",
     "fast-json-patch": "^3.1.1",
     "postcss": "catalog:",
+    "svelte-exmarkdown": "^3.0.5",
     "svelte-preprocess": "catalog:",
     "svelte-routing": "^2.12.0",
     "svelte-ux": "^0.66.8",

diff --git a/frontend/viewer/src/ProjectView.svelte b/frontend/viewer/src/ProjectView.svelte
@@ -36,6 +36,7 @@
   import {views} from './lib/entry-editor/view-data';
   import {initWritingSystems} from './lib/writing-systems';
   import {useEventBus} from './lib/services/event-bus';
+  import AboutDialog from './lib/about/AboutDialog.svelte';
 
   export let loading = false;
 
@@ -286,9 +287,12 @@
       {#if $features.history}
         <ActivityView {projectName}/>
       {/if}
+      {#if $features.about}
+        <AboutDialog text={$features.about} />
+      {/if}
       {#if $features.feedback}
         <Button
-          href="/api/feedback"
+          href="/api/feedback/fw-lite"
           target="_blank"
           size="sm"
           variant="outline"

diff --git a/frontend/viewer/src/WebComponent.svelte b/frontend/viewer/src/WebComponent.svelte
@@ -1,8 +1,8 @@
 <script lang="ts">
   import { onMount } from 'svelte';
   import ProjectView from './ProjectView.svelte';
-  import { fixBrokenNestedGlobalStyles } from './lib/utils/style-fix';
   import { getSettings } from 'svelte-ux';
+  import css from './app.postcss?inline';
 
   let loading = true;
 
@@ -11,7 +11,6 @@
   onMount(() => {
     const shadowRoot = document.querySelector('lexbox-svelte')?.shadowRoot;
     if (!shadowRoot) throw new Error('Could not find shadow root');
-    fixBrokenNestedGlobalStyles(shadowRoot);
 
     const abortController = new AbortController();
     window.addEventListener('popstate', () => {
@@ -39,9 +38,9 @@
 
 <svelte:options customElement={{ tag: 'lexbox-svelte' }} />
 
-<style global lang="postcss">
-  @import './app.postcss';
-</style>
+<svelte:element this="style">
+  {css}
+</svelte:element>
 
 <div class="app contents" class:dark={$currentTheme.dark}>
   <ProjectView {projectName} isConnected {loading} showHomeButton={false} />

diff --git a/frontend/viewer/src/lib/about/AboutDialog.svelte b/frontend/viewer/src/lib/about/AboutDialog.svelte
@@ -0,0 +1,36 @@
+<script lang="ts">
+  import { mdiInformationVariantCircle } from '@mdi/js';
+  import { Button, Dialog, Toggle } from 'svelte-ux';
+  import type { Readable } from 'svelte/store';
+  import Markdown from 'svelte-exmarkdown';
+  import NewTabLinkRenderer from './NewTabLinkRenderer.svelte';
+  import { onMount } from 'svelte';
+
+  export let text: Readable<string>;
+
+  let toggle: Toggle;
+
+  onMount(() => {
+    if (!localStorage.getItem('suppressAbout')) {
+      toggle.on = true;
+      localStorage.setItem('suppressAbout', 'true');
+    }
+  });
+</script>
+
+<Toggle bind:this={toggle} let:on={open} let:toggleOn let:toggleOff>
+  <Button on:click={toggleOn} size="sm" variant="outline" icon={mdiInformationVariantCircle}>
+    <div class="hidden sm:contents">
+      About
+    </div>
+  </Button>
+  <Dialog {open} on:close={toggleOff} class="w-[700px]">
+    <div class="m-6 prose">
+      <Markdown md={$text} plugins={[{ renderer: { a: NewTabLinkRenderer } }]} />
+    </div>
+    <div class="flex-grow"></div>
+    <div slot="actions">
+      <Button>Close</Button>
+    </div>
+  </Dialog>
+</Toggle>
diff --git a/frontend/viewer/src/lib/about/NewTabLinkRenderer.svelte b/frontend/viewer/src/lib/about/NewTabLinkRenderer.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+  export let href: string;
+  export let title: string | undefined = undefined;
+</script>
+
+<a {href} {title} target="_blank" class="external-link link link-hover">
+  <!-- &nbsp; prevents the link from ever being at the very beginning of a new line -->
+  <slot />&nbsp;<span class="i-mdi-open-in-new external-link-icon" />
+</a>
+
+<style>
+  .external-link-icon {
+    margin-bottom: -0.7%;
+    font-size: 0.9em;
+  }
+</style>
diff --git a/frontend/viewer/src/lib/services/lexbox-api.ts b/frontend/viewer/src/lib/services/lexbox-api.ts
@@ -1,6 +1,7 @@
 import type {IEntry, IExampleSentence, ISense, PartOfSpeech, QueryOptions, SemanticDomain, WritingSystem, WritingSystems} from '../mini-lcm';
 
 import type { Operation } from 'fast-json-patch';
+import type { Readable } from 'svelte/store';
 
 export type {IEntry, IExampleSentence, ISense, QueryOptions, WritingSystem, WritingSystems, PartOfSpeech, SemanticDomain} from '../mini-lcm';
 
@@ -17,6 +18,7 @@ export interface LexboxApiFeatures {
   openWithFlex?: boolean;
   feedback?: boolean;
   sync?: boolean;
+  about?: Readable<string>;
 }
 
 export interface LexboxApi {

diff --git a/frontend/viewer/src/lib/utils/style-fix.ts b/frontend/viewer/src/lib/utils/style-fix.ts
diff --git a/frontend/viewer/tailwind.config.cjs b/frontend/viewer/tailwind.config.cjs
@@ -14,6 +14,7 @@ module.exports = {
       collections: getIconCollections(['mdi']),
     }),
     svelteUx({ colorSpace: 'oklch' }),
+    require('@tailwindcss/typography'),
   ],
   ux: {
     themeRoot: ':root, :host',