Shadcn low-hanging fruit follow-up (#1693)

* Move I dont see my project, outside of item-list

* Make entry-menu drawer close when item is selected

* Style FLEx logo via iconVariants

* Apply cursor-pointer to component/complex-form list items

* Enable tabbing to sort toggle badge

* Remove duplicate tab-able child

* Use same icon in project-dropdown list and trigger

* Don't show "No dictionaries found" while loading

* Extend icon component to support <img>

* Scroll to top of entry when different entry selected

* Always autofocus the first field when selecting an entry on desktop

* Debounce entry list querying

* fixup! Always autofocus the first field when selecting an entry on desktop

* Autofocus first field of added sense or example, on desktop

* Enforce alt on img icons

* Remove forgotten test bool

* Tidy up watch

* Refactor highlighting and autofocus

* Don't show focus ring on entry filter when sidebar or filter toggle are focused

Author: myieye

frontend/pnpm-lock.yaml

@@ -97,6 +97,7 @@
     "svelte-preprocess": "catalog:",
     "svelte-routing": "^2.12.0",
     "svelte-ux": "^0.76.0",
+    "tabbable": "^6.2.0",
     "type-fest": "^4.18.2"
   }
 }

frontend/viewer/package.json

@@ -29,6 +29,7 @@
   import {Button} from '$lib/components/ui/button';
   import {mode} from 'mode-watcher';
   import * as ResponsiveMenu from '$lib/components/responsive-menu';
+  import {Icon} from '$lib/components/ui/icon';
 
   const projectsService = useProjectsService();
   const importFwdataService = useImportFwdataService();
@@ -104,7 +105,7 @@
 
 <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">
-    <img src={mode.current === 'dark' ? logoLight : logoDark} alt={$t`Lexbox logo`} class="h-6 shrink-0" />
+    <Icon src={mode.current === 'dark' ? logoLight : logoDark} alt={$t`Lexbox logo`} />
     <h3>{$t`Dictionaries`}</h3>
   </div>
   <div slot="actions" class="flex">
@@ -222,7 +223,7 @@
                 <ButtonListItem href={`/fwdata/${project.code}`}>
                   <ListItem classes={{root: 'dark:bg-muted/50 bg-muted/80 hover:bg-muted/30 hover:dark:bg-muted' }}>
                     <ProjectTitle slot="title" {project}/>
-                    <img slot="avatar" src={flexLogo} alt={$t`FieldWorks logo`} class="h-6 shrink-0" />
+                    <Icon slot="avatar" src={flexLogo} alt={$t`FieldWorks logo`} />
                     <div slot="actions" class="shrink-0">
                       <DevContent invisible>
                         <UxButton

frontend/viewer/src/home/HomeView.svelte

@@ -123,12 +123,12 @@
             </ButtonListItem>
           {/if}
         {/each}
-        <div class="text-center py-2">
-          <Button variant="link" target="_blank" href="{server?.authority}/wheresMyProject">
-            {$t`I don't see my project`}
-            <Icon icon="i-mdi-open-in-new" class="size-4" />
-          </Button>
-        </div>
+      </div>
+      <div class="text-center pt-2">
+        <Button variant="link" target="_blank" href="{server?.authority}/wheresMyProject">
+          {$t`I don't see my project`}
+          <Icon icon="i-mdi-open-in-new" class="size-4" />
+        </Button>
       </div>
     {/if}
   </div>

frontend/viewer/src/home/Server.svelte

@@ -8,6 +8,7 @@
   import {t} from 'svelte-i18n-lingui';
   import {mergeProps} from 'bits-ui';
   import {cn} from './utils';
+  import {Icon} from './components/ui/icon';
 
   type Props = {
     entry: IEntry
@@ -52,6 +53,6 @@
 
 <!--button must be a link otherwise it won't follow the redirect to a protocol handler-->
 <button class={cn(buttonVariants({ variant: 'ghost'}), className)} {...mergedProps}>
-  <img src={flexLogo} alt={$t`FieldWorks logo`} class="h-6 max-w-fit"/>
+  <Icon src={flexLogo} alt={$t`FieldWorks logo`} />
   {$t`Open in FieldWorks`}
 </button>

frontend/viewer/src/lib/OpenInFieldWorksButton.svelte

@@ -6,14 +6,14 @@
 
   type EditorRootProps = WithElementRef<HTMLAttributes<HTMLDivElement>>;
 
-  const {
+  let {
     class: className,
     children,
     ref = $bindable(null),
     ...restProps
   }: EditorRootProps = $props();
 </script>
 
-<div class={cn('@container/editor', className)} {...restProps}>
+<div class={cn('@container/editor', className)} {...restProps} bind:this={ref}>
   {@render children?.()}
 </div>

frontend/viewer/src/lib/components/editor/editor-root.svelte

@@ -3,7 +3,7 @@
   import type {WithElementRef} from 'bits-ui';
   import type {HTMLAttributes} from 'svelte/elements';
 
-  type EditorSubGridProps = WithElementRef<HTMLAttributes<HTMLDivElement>>;
+  export type EditorSubGridProps = WithElementRef<HTMLAttributes<HTMLDivElement>>;
 
   const {
     class: className,

frontend/viewer/src/lib/components/editor/editor-sub-grid.svelte

@@ -43,7 +43,7 @@
 <DropdownMenu.Group {...mergedProps}>
   {#each displayItems as item, i}
     {@const reorderName = getDisplayName(item) || '–'}
-    <DropdownMenu.Item class="grid grid-cols-subgrid col-span-full justify-items-start items-center cursor-pointer"
+    <DropdownMenu.Item class="grid grid-cols-subgrid col-span-full justify-items-start items-center"
       onmouseover={() => displayIndex = i}
       onfocus={() => displayIndex = i}
       onSelect={() => {

frontend/viewer/src/lib/components/reorderer/reorderer-item-list.svelte

@@ -4,19 +4,20 @@
   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 {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 type {ContextMenuItemProps} from 'bits-ui';
+  import type {DrawerCloseProps} from 'vaul-svelte';
   import {cn} from '$lib/utils';
+  import {DrawerClose} from '../ui/drawer';
 
   type Props = {
     children?: Snippet;
     icon?: IconClass;
     onSelect?: () => void;
     href?: string;
-  } & ContextMenuItemProps & ButtonProps;
+  } & Omit<ContextMenuItemProps & DrawerCloseProps, 'onclick'>;
 
   let {
     icon,
@@ -28,14 +29,6 @@
   }: 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()}
@@ -52,21 +45,21 @@
 {/snippet}
 
 {#if state.contextMenu}
-  <ContextMenu.Item class={cn('cursor-pointer gap-2 w-full', className)} onclick={onSelect} bind:ref
+  <ContextMenu.Item class={cn('gap-2 w-full', className)} {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
+  <DropdownMenu.Item class={cn('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}
+  <DrawerClose
+    class={cn(buttonVariants({ variant: 'ghost', class: 'w-full justify-start gap-2' }), className)}
+    onclick={onSelect}
+    {...rest}
     bind:ref>
     {@render content()}
-  </Button>
+  </DrawerClose>
 {/if}

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

@@ -8,10 +8,13 @@ import Root, {
 import XButton from './x-button.svelte';
 
 export {
-  //
-  Root as Button,
+  Root,
   XButton,
-  buttonVariants, Root, type ButtonProps,
+  type ButtonProps,
   type ButtonSize,
-  type ButtonVariant, type ButtonProps as Props
+  type ButtonVariant,
+  buttonVariants,
+  //
+  Root as Button,
+  type ButtonProps as Props
 };