[Feat] Add feedback and about to viewer

backend/LexBoxApi/Controllers/FeedbackController.cs

@@ -0,0 +1,17 @@
+using Microsoft.AspNetCore.Mvc;
+
+namespace LexBoxApi.Controllers;
+
+[ApiController]
+[Route("/api/feedback")]
+public class FeedbackController() : ControllerBase
+{
+    [HttpGet]
+    public IResult RedirectToFieldWorksLiteFeedbackForm()
+    {
+        var version = "alpha";
+        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);
+    }
+}

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 { writable } from 'svelte/store';
 
 function prepareEntriesForUi(entries: IEntry[]): void {
   entries.forEach(entry => {
@@ -35,7 +36,10 @@ export class LfClassicLexboxApi implements LexboxApiClient {
   }
 
   SupportedFeatures(): LexboxApiFeatures {
-    return {};
+    return {
+      feedback: true,
+      about: writable(aboutMarkdown),
+    };
   }
 
   async GetWritingSystems(): Promise<WritingSystems> {
@@ -143,3 +147,37 @@ export class LfClassicLexboxApi implements LexboxApiClient {
   }
 
 }
+
+const aboutMarkdown =
+`## What is this?
+
+This is a beta version of a new dictionary building tool that is currently under development.
+
+The data you see here reflects the current data in the corresponding [Language Forge](https://languageforge.org/) project.
+
+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.
+
+## It can edit FieldWorks projects!
+
+It's true! There's already another version of the tool that you can use today to open and edit your data in FieldWorks.
+It's also loaded with additional features! We're calling it [FieldWorks Lite](https://lexbox.org/fw-lite).
+So, please download and try out the alpha version of [FieldWorks Lite](https://lexbox.org/fw-lite) as well.
+
+## Should I be excited?
+
+Yes! FieldWorks Lite will be revolutionary in multiple ways. It will be:
+
+- Cross-platform: it will work on Windows, Linux, Mac and eventually mobile
+- Usable offline: you won't need an internet connection
+- Collaborative: you will see any changes other users make as they work
+- Faster than you're used to - we're quite confident about that 😀
+
+Eventually, FieldWorks Lite will replace both [WeSay](https://software.sil.org/wesay/) and [Language Forge](https://languageforge.org/).
+
+So, please send us your [feedback](/api/feedback). We want this tool to serve you as well as possible.
+
+## FieldWorks Lite is not
+
+- A replacement for [FieldWorks](https://software.sil.org/fieldworks/)
+- A replacement for [Dictionary App Builder](https://software.sil.org/dictionaryappbuilder/)
+- A replacement for [Webonary](https://www.webonary.org/)`;

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

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,6 +287,9 @@
       {#if $features.history}
         <ActivityView {projectName}/>
       {/if}
+      {#if $features.about}
+        <AboutDialog text={$features.about} />
+      {/if}
       {#if $features.feedback}
         <Button
           href="/api/feedback"

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

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>

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>

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 {

frontend/viewer/tailwind.config.cjs

@@ -14,6 +14,7 @@ module.exports = {
       collections: getIconCollections(['mdi']),
     }),
     svelteUx({ colorSpace: 'oklch' }),
+    require('@tailwindcss/typography'),
   ],
   ux: {
     themeRoot: ':root, :host',