Finalize shadcn buttons (#1670)

* Fix delete dialog close detection

* Wire up sidebar and hide unimplemented content

* Migrate home-page app-bar buttons to shadcn

* Use function instead of prop to open troubleshooting dialog

* Fix broken enter animation due to troubleshooting dialog resize after open.

* Introduce responsive-menu for entry-menu

* Add Open in FieldWorks button

* Fix logo doesn't respond to dark-mode

* Condense home-view app-bar

* Make radio buttons bigger on mobile

* only show Open In Flex button when supported

---------

Co-authored-by: Kevin Hahn <kevin_hahn@sil.org>

Author: myieye

backend/FwLite/FwLiteWeb/Routes/FwIntegrationRoutes.cs

@@ -20,7 +20,7 @@ public static IEndpointConventionBuilder MapFwIntegrationRoutes(this WebApplicat
                 });
                 return operation;
             });
-        group.MapGet("/open/entry/{id}",
+        group.MapGet("/link/entry/{id}",
             async ([FromServices] FwDataProjectContext context,
                 [FromServices] IHubContext<FwDataMiniLcmHub, ILexboxHubClient> hubContext,
                 [FromServices] FwDataFactory factory,
@@ -29,8 +29,8 @@ public static IEndpointConventionBuilder MapFwIntegrationRoutes(this WebApplicat
                 if (context.Project is null) return Results.BadRequest("No project is set in the context");
                 await hubContext.Clients.Group(context.Project.Name).OnProjectClosed(CloseReason.Locked);
                 factory.CloseProject(context.Project);
-                //need to use redirect as a way to not trigger flex until after we have closed the project
-                return Results.Redirect(FwLink.ToEntry(id, context.Project.Name));
+                var link = FwLink.ToEntry(id, context.Project.Name);
+                return Results.Text(link, "text/plain");
             });
         return group;
     }

frontend/viewer/src/home/HomeView.svelte

@@ -3,11 +3,8 @@
     mdiBookArrowLeftOutline,
     mdiBookEditOutline,
     mdiBookPlusOutline,
-    mdiChatQuestion,
     mdiChevronRight,
     mdiDelete,
-    mdiFaceAgent,
-    mdiRefresh,
     mdiTestTube,
   } from '@mdi/js';
   import {AppBar, Button as UxButton, ListItem, TextField} from 'svelte-ux';
@@ -30,6 +27,8 @@
   import type {IProjectModel} from '$lib/dotnet-types';
   import ThemePicker from '$lib/ThemePicker.svelte';
   import {Button} from '$lib/components/ui/button';
+  import {mode} from 'mode-watcher';
+  import * as ResponsiveMenu from '$lib/components/responsive-menu';
 
   const projectsService = useProjectsService();
   const importFwdataService = useImportFwdataService();
@@ -99,45 +98,39 @@
   }
 
   const supportsTroubleshooting = useTroubleshootingService();
-  let showTroubleshooting = false;
+  let troubleshootDialog: TroubleshootDialog | undefined;
 
 </script>
 
-<AppBar title={$t`Dictionaries`} class="bg-primary/25 min-h-12 shadow-md justify-between" menuIcon={null}>
+<AppBar title={$t`Dictionaries`} class="bg-primary/15 min-h-12 shadow-md justify-between" menuIcon={null}>
   <div slot="title" class="text-lg flex gap-2 items-center">
-    <picture>
-      <source srcset={logoLight} media="(prefers-color-scheme: dark)" />
-      <source srcset={logoDark} media="(prefers-color-scheme: light)" />
-      <img src={logoDark} alt={$t`Lexbox logo`} class="h-6" />
-    </picture>
+    <img src={mode.current === 'dark' ? logoLight : logoDark} alt={$t`Lexbox logo`} class="h-6 shrink-0" />
     <h3>{$t`Dictionaries`}</h3>
   </div>
-  <div slot="actions" class="flex gap-2">
-    <UxButton href={fwLiteConfig.feedbackUrl}
-              target="_blank"
-              size="sm"
-              variant="outline"
-              icon={mdiChatQuestion}
-              classes={{root: 'hover:bg-muted'}}>
-      {$t`Feedback`}
-    </UxButton>
-    {#if supportsTroubleshooting}
-      <UxButton
-        size="sm"
-        variant="outline"
-        classes={{root: 'hover:bg-muted'}}
-        icon={mdiFaceAgent}
-        title={$t`Troubleshoot`}
-        iconOnly={false}
-        on:click={() => (showTroubleshooting = !showTroubleshooting)}
-      ></UxButton>
-      <TroubleshootDialog bind:open={showTroubleshooting} />
-    {/if}
+  <div slot="actions" class="flex">
     <DevContent>
-      <UxButton href="/sandbox" size="sm" variant="outline" icon={mdiTestTube} class="hover:bg-muted">Sandbox</UxButton>
+      <Button href="/sandbox" variant="ghost" size="icon" icon="i-mdi-test-tube" />
     </DevContent>
     <LocalizationPicker/>
     <ThemePicker />
+    <ResponsiveMenu.Root>
+      <ResponsiveMenu.Trigger />
+      <ResponsiveMenu.Content>
+        <ResponsiveMenu.Item href={fwLiteConfig.feedbackUrl} icon="i-mdi-chat-question">
+          {$t`Feedback`}
+        </ResponsiveMenu.Item>
+        {#if supportsTroubleshooting}
+          <ResponsiveMenu.Item
+            icon="i-mdi-face-agent"
+            onSelect={() => troubleshootDialog?.open()}>
+            {$t`Troubleshoot`}
+          </ResponsiveMenu.Item>
+        {/if}
+      </ResponsiveMenu.Content>
+    </ResponsiveMenu.Root>
+    {#if supportsTroubleshooting}
+      <TroubleshootDialog bind:this={troubleshootDialog} />
+    {/if}
   </div>
 </AppBar>
 <div class="mx-auto md:w-full md:py-4 max-w-2xl">

frontend/viewer/src/lib/OpenInFieldWorksButton.svelte

@@ -1,39 +1,57 @@
 <script lang="ts">
   import flexLogo from '$lib/assets/flex-logo.png';
   import {AppNotification} from '$lib/notifications/notifications';
-  import {useAppLauncher} from '$lib/services/service-provider';
-  import {Button} from 'svelte-ux';
-  import {useProjectViewState} from '$lib/views/project-view-state-service';
+  import {useAppLauncherService} from './services/app-launcher-service';
+  import {useProjectContext} from './project-context.svelte';
+  import type {IEntry} from './dotnet-types';
+  import {buttonVariants, type ButtonProps} from './components/ui/button';
+  import {t} from 'svelte-i18n-lingui';
+  import {mergeProps} from 'bits-ui';
+  import {cn} from './utils';
 
-  const projectViewState = useProjectViewState();
-  const appLauncher = useAppLauncher();
+  type Props = {
+    entry: IEntry
+  // eslint-disable-next-line @typescript-eslint/no-redundant-type-constituents
+  } & ButtonProps;
 
-  export let show = false;
-  export let entryId: string;
-  export let projectName: string;
+  const {
+    entry,
+    class: className,
+    ...rest
+  }: Props = $props();
 
-  async function openInFlex(e: Event) {
+  const appLauncher = useAppLauncherService();
+  const projectContext = useProjectContext();
+
+  async function openInFlex() {
+    let opened = false;
     if (appLauncher) {
-      e.preventDefault();//don't follow the link
-      await appLauncher.openInFieldWorks(entryId, projectName);
+      opened = await appLauncher.openInFieldWorks(entry.id, projectContext.projectName);
+    } else {
+      // a 302 redirect to the protocol handler works, but sends the user to the home page 🤷
+      const fieldWorksUrlResponse = await fetch(`/api/fw/${projectContext.projectName}/link/entry/${entry.id}`);
+      if (fieldWorksUrlResponse.ok) {
+        opened = true;
+        window.location.href = await fieldWorksUrlResponse.text();
+      }
+    }
+    if (opened) {
+      AppNotification.displayAction($t`This project is now open in FieldWorks. To continue working in FieldWorks Lite, close the project in FieldWorks and click Reopen.`, 'warning', {
+        label: $t`Reopen`,
+        callback: () => window.location.reload()
+      });
+    } else {
+      AppNotification.display($t`Unable to open in FieldWorks`, 'error');
     }
-    AppNotification.displayAction('The project is open in FieldWorks. Please close it to reopen.', 'warning', {
-      label: 'Open',
-      callback: () => window.location.reload()
-    });
   }
+
+  const mergedProps = $derived(mergeProps({
+    onclick: openInFlex,
+  }, rest));
 </script>
-{#if show}
+
 <!--button must be a link otherwise it won't follow the redirect to a protocol handler-->
-  <Button
-    href={`/api/fw/${projectName}/open/entry/${entryId}`}
-    on:click={openInFlex}
-    variant="fill-light"
-    color="info"
-    size="sm">
-    <img src={flexLogo} alt="FieldWorks logo" class="h-6 max-w-fit"/>
-    <div class="sm-form:hidden" class:hidden={$projectViewState.rightToolbarCollapsed}>
-      Open in FieldWorks
-    </div>
-  </Button>
-{/if}
+<button class={cn(buttonVariants({ variant: 'ghost'}), className)} {...mergedProps}>
+  <img src={flexLogo} alt={$t`FieldWorks logo`} class="h-6 max-w-fit"/>
+  {$t`Open in FieldWorks`}
+</button>

frontend/viewer/src/lib/components/reorderer/reorderer.svelte

@@ -1,16 +1,6 @@
 <script lang="ts" module>
-  import type {Snippet} from 'svelte';
   import {Context} from 'runed';
 
-  export type ReordererProps<T> = {
-    item: T;
-    items: T[];
-    direction?: 'horizontal' | 'vertical';
-    getDisplayName: (item: T) => string | undefined;
-    onchange?: (value: T[], fromIndex: number, toIndex: number) => void;
-    children?: Snippet<[{first: boolean, last: boolean}]>;
-  };
-
   type ReordererRootStateProps<T = unknown> = {
     readonly item: T;
     items: T[];
@@ -42,10 +32,20 @@
 </script>
 
 <script lang="ts" generics="T">
+  import type {Snippet} from 'svelte';
   import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
   import ReordererTrigger from './reorderer-trigger.svelte';
   import ReordererItemList from './reorderer-item-list.svelte';
 
+  type ReordererProps<T> = {
+    item: T;
+    items: T[];
+    direction?: 'horizontal' | 'vertical';
+    getDisplayName: (item: T) => string | undefined;
+    onchange?: (value: T[], fromIndex: number, toIndex: number) => void;
+    children?: Snippet<[{first: boolean, last: boolean}]>;
+  };
+
   let {
     item,
     items = $bindable(),

frontend/viewer/src/lib/components/responsive-menu/index.ts

@@ -0,0 +1,16 @@
+import Content from './responsive-menu-content.svelte';
+import Item from './responsive-menu-item.svelte';
+import Root from './responsive-menu.svelte';
+import Trigger from './responsive-menu-trigger.svelte';
+
+export {
+  Root,
+  Item,
+  Trigger,
+  Content,
+  //
+  Root as ResponsiveMenu,
+  Item as ResponsiveMenuItem,
+  Trigger as ResponsiveMenuTrigger,
+  Content as ResponsiveMenuContent,
+};

frontend/viewer/src/lib/components/responsive-menu/responsive-menu-content.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+  import { Icon } from '$lib/components/ui/icon';
+  import { IsMobile } from '$lib/hooks/is-mobile.svelte';
+  import {buttonVariants} from '$lib/components/ui/button/button.svelte';
+  import {useResponsiveMenuContent} from './responsive-menu.svelte';
+  import {ContextMenuContent} from '../ui/context-menu';
+  import {DropdownMenuContent} from '../ui/dropdown-menu';
+  import * as Drawer from '../ui/drawer';
+  import type {Snippet} from 'svelte';
+  import type {ContextMenuContentProps, DropdownMenuContentProps} from 'bits-ui';
+  import type {DrawerContentProps} from 'vaul-svelte';
+
+  type Props = {
+    children?: Snippet;
+  } & ContextMenuContentProps & DropdownMenuContentProps & DrawerContentProps;
+
+  let {
+    children,
+    ref = $bindable(null),
+    ...rest
+  }: Props = $props();
+
+  const state = useResponsiveMenuContent();
+</script>
+
+{#if state.contextMenu}
+  <ContextMenuContent {...rest} bind:ref>
+    {@render children?.()}
+  </ContextMenuContent>
+{:else if !IsMobile.value}
+  <DropdownMenuContent align="end" {...rest} bind:ref>
+    {@render children?.()}
+  </DropdownMenuContent>
+{:else}
+  <Drawer.Content {...rest} bind:ref>
+    <div class="mx-auto w-full max-w-sm p-4">
+      <Drawer.Close class={buttonVariants({ variant: 'ghost', size: 'icon', class: 'absolute top-4 right-4 z-10' })}>
+        <Icon icon="i-mdi-close" />
+      </Drawer.Close>
+      <Drawer.Header class="justify-items-end">
+      </Drawer.Header>
+      <div class="flex flex-col gap-2">
+        {@render children?.()}
+      </div>
+    </div>
+  </Drawer.Content>
+{/if}

frontend/viewer/src/lib/components/responsive-menu/responsive-menu-item.svelte

@@ -0,0 +1,72 @@
+<script lang="ts">
+  import { Icon } from '$lib/components/ui/icon';
+  import { type IconClass } from '$lib/icon-class';
+  import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
+  import * as ContextMenu from '$lib/components/ui/context-menu';
+  import { IsMobile } from '$lib/hooks/is-mobile.svelte';
+  import Button, {buttonVariants} from '$lib/components/ui/button/button.svelte';
+  import type {Snippet} from 'svelte';
+  import {useResponsiveMenuItemList} from './responsive-menu.svelte';
+  import type {ButtonProps} from 'node_modules/bits-ui/dist/bits/toolbar/exports';
+  import {mergeProps, type ContextMenuItemProps} from 'bits-ui';
+  import {cn} from '$lib/utils';
+
+  type Props = {
+    children?: Snippet;
+    icon?: IconClass;
+    onSelect?: () => void;
+    href?: string;
+  } & ContextMenuItemProps & ButtonProps;
+
+  let {
+    icon,
+    onSelect,
+    children,
+    ref = $bindable(null),
+    class: className,
+    ...rest
+  }: Props = $props();
+
+  const state = useResponsiveMenuItemList();
+
+  const buttonProps = $derived({
+    variant: 'ghost',
+    class: cn(buttonVariants({ variant: 'ghost', class: 'w-full justify-start gap-2' }), className),
+    onclick: onSelect,
+  } as const);
+
+  const mergedProps = $derived(mergeProps(buttonProps, rest));
+</script>
+
+{#snippet content()}
+  {#if icon}
+    <Icon {icon} />
+  {/if}
+  {@render children?.()}
+{/snippet}
+
+{#snippet anchorChild({ props }: { props: Record<string, unknown> })}
+  <a {...props}>
+    {@render content()}
+  </a>
+{/snippet}
+
+{#if state.contextMenu}
+  <ContextMenu.Item class={cn('cursor-pointer gap-2 w-full', className)} onclick={onSelect} bind:ref
+    child={rest.href ? anchorChild : undefined} {...rest}>
+    {@render content()}
+  </ContextMenu.Item>
+{:else if !IsMobile.value}
+  <DropdownMenu.Item class={cn('cursor-pointer gap-2 w-full', className)} {onSelect} bind:ref
+    child={rest.href ? anchorChild : undefined} {...rest}>
+    {@render content()}
+  </DropdownMenu.Item>
+{:else if rest.child}
+  {@render rest.child({ props: mergedProps})}
+{:else}
+  <Button
+    {...buttonProps}
+    bind:ref>
+    {@render content()}
+  </Button>
+{/if}