tweak the home page a bit (#1877)

* put space between project rows, make the app bar sticky

* use transitions when downloading items, don't show downloaded projects on the server list

* don't disable list items when they're skeletons to avoid the destructive bg. Add a shadow to make the items popout more

* triple click the icon to enable/disable dev mode

* Show loading state for project being downloaded

* Remove ButtonListItem
---------

Co-authored-by: Tim Haasdyk <[email protected]>

Author: hahn-kev

backend/FwLite/FwLiteShared/Layout/SvelteLayout.razor

@@ -16,7 +16,6 @@
 }
 else
 {
-    <link rel="modulepreload" href="@Assets["_content/FwLiteShared/viewer/svelte-ux.js"]">
     <link rel="stylesheet" href="@Assets["_content/FwLiteShared/viewer/main.css"]"/>
     <link rel="stylesheet" href="@Assets["_content/FwLiteShared/viewer/webfonts.css"]"/>
 }

frontend/src/app.d.ts

@@ -1,6 +1,6 @@
 /// <reference types='@sveltejs/kit' />
 
-import type { LexAuthUser } from '$lib/user';
+import type {LexAuthUser} from '$lib/user';
 import type {Client} from '@urql/svelte';
 
 export { }; // for some reason this is required in order to make global changes
@@ -43,5 +43,5 @@ declare global {
     'client-error' | 'client-unhandledrejection' |
     'server-error-hook' | 'client-error-hook';
 
-  function enableDevMode(): void;
+  function enableDevMode(enable = true): void;
 }

frontend/viewer/src/app.d.ts

@@ -1,7 +1,7 @@
 export { }; // for some reason this is required in order to make global changes
 
 declare global {
-  function enableDevMode(): void;
+  function enableDevMode(enable = true): void;
   function enableShadcn(enable = true): void;
 
   // waiting on: https://github.com/microsoft/TypeScript/issues/60608

frontend/viewer/src/app.postcss

@@ -14,6 +14,7 @@
   height: max(auto, 100%);
   scroll-behavior: smooth;
   interpolate-size: allow-keywords;
+  @apply bg-background text-foreground;
 }
 
 
@@ -30,30 +31,6 @@
 .font-inter {
   font-family: 'Inter', sans-serif;
 }
-/* The search bar dialog is somewhat unique. It should be considered when making global changes here. */
-.dialog {
-    /*using 100vh or dvh still caused the action items to get clipped*/
-  height: min(1200px, 100%);
-  width: min(900px, 100%);
-  @apply md:max-h-[calc(100vh-16px)];
-  @apply md:max-w-[calc(100vw-30px)]; /* more than the 16px for height, because of scrollbars */
-  @apply flex flex-col;
-  @apply max-md:rounded-none;
-
-  .actions {
-    position: sticky;
-    bottom: 0;
-    z-index: 2;
-  }
-
-  * {
-    overscroll-behavior: contain;
-  }
-}
-
-.Checkbox *, label:has(.Switch) {
-  cursor: pointer;
-}
 
 [id^=entry] {
   scroll-margin-top: 1rem;
@@ -69,66 +46,6 @@
   scroll-margin-bottom: 3.5rem;
 }
 
-@layer components {
-  .collapsible-col {
-    overflow-x: hidden;
-    transition: opacity 0.2s ease-out;
-  }
-
-  .side-scroller {
-    height: calc(var(--space-for-editor, 100vh) - 32px);
-    transition: height 0.05s ease-out, opacity 0.2s ease-out;
-    position: sticky;
-    top: 16px;
-  }
-
-  .collapsible-col.collapse-col {
-    max-height: 0 !important;
-    width: 0 !important;
-    max-width: 0 !important;
-    opacity: 0 !important;
-    transition: 0s;
-    overflow-y: hidden;
-  }
-
-  .text-field-sibling-button {
-    @apply h-[37.6px] p-1.5 aspect-square text-[0.9em];
-  }
-
-  .key {
-    display: inline-block;
-    padding: 0.15em 0.4em;
-    margin: 0 0.1em;
-    font-size: 0.8em;
-    @apply border rounded-md shadow-md;
-  }
-
-  .icon-button-group-container {
-    .Button {
-      @apply p-1.5 text-sm min-w-9 min-h-9;
-    }
-  }
-}
-
-.ListItem > * {
-  max-width: 100%;
-  overflow: hidden;
-}
-
-.AppBar :has(> [slot="actions"]) {
-  flex-grow: 0;
-}
-
-html:has(.Dialog) {
-    @apply overflow-hidden;
-    /* scrollbar-gutter: stable; prevents a page-width resize if there IS a scrollbar,
-    but it causes a page-width reisze if there ISN'T a scrollbar. */
-}
-
-.menu-items .options {
-  @apply overscroll-contain;
-}
-
 .x-ellipsis {
   max-width: 100%;
   overflow: hidden;

frontend/viewer/src/home/AppBar.svelte

@@ -12,10 +12,24 @@
     if (tabTitle) {
       document.title = tabTitle;
     }
-  })
+  });
 </script>
-<header class="flex items-center relative z-50 gap-2 justify-between px-4 max-md:px-1 min-h-12 bg-primary/50 dark:bg-primary/70 shadow-md">
+<header
+  class="flex items-center z-50 space-x-2 justify-between pr-1 md:pr-3 pl-3 min-h-12 shadow-lg m-3 mb-0 rounded sticky top-3">
   {@render title()}
   <div class="grow-0"></div>
   {@render actions()}
 </header>
+
+<style>
+  header {
+    /* Stack background colors, so alpha-value only affects the color, not the transparency. */
+    background:
+      /*
+      linear-gradient is just a way to use a solid color and work around: "Only the last background can include a background color."
+      See: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_backgrounds_and_borders/Using_multiple_backgrounds
+      */
+      linear-gradient(hsl(var(--primary) / 0.4)),
+      hsl(var(--background));
+  }
+</style>

frontend/viewer/src/home/HomeView.svelte

@@ -11,7 +11,6 @@
     useProjectsService,
     useTroubleshootingService,
   } from '$lib/services/service-provider';
-  import ButtonListItem from '$lib/utils/ButtonListItem.svelte';
   import TroubleshootDialog from '$lib/troubleshoot/TroubleshootDialog.svelte';
   import ServersList from './ServersList.svelte';
   import {t} from 'svelte-i18n-lingui';
@@ -25,12 +24,21 @@
   import ProjectListItem from './ProjectListItem.svelte';
   import ListItem from '$lib/components/ListItem.svelte';
   import {Input} from '$lib/components/ui/input';
+  import {crossfade} from 'svelte/transition';
+  import {cubicOut} from 'svelte/easing';
+  import {flip} from 'svelte/animate';
+  import {transitionContext} from './transitions';
+  import Anchor from '$lib/components/ui/anchor/anchor.svelte';
 
   const projectsService = useProjectsService();
   const importFwdataService = useImportFwdataService();
   const fwLiteConfig = useFwLiteConfig();
   const exampleProjectName = 'Example-Project';
-
+  const [send, receive] = crossfade({
+    duration: 500,
+    easing: cubicOut,
+  });
+  transitionContext.set([send, receive]);
   function dateTimeProjectSuffix(): string {
     return new Date()
       .toISOString()
@@ -98,18 +106,39 @@
   const supportsTroubleshooting = useTroubleshootingService();
   let troubleshootDialog: TroubleshootDialog | undefined;
 
+  let clickCount = 0;
+  let clickTimeout: ReturnType<typeof setTimeout> | undefined;
+
+  function resetClickCounter() {
+    clickCount = 0;
+    clearTimeout(clickTimeout);
+  }
+
+  function clickIcon() {
+    //when a user triple clicks the logo it will enable dev mode, this makes it easier to enable on mobile
+    clickCount++;
+    clearTimeout(clickTimeout);
+
+    if (clickCount === 3) {
+      window.enableDevMode(!$isDev);
+      resetClickCounter();
+    } else {
+      clickTimeout = setTimeout(resetClickCounter, 500);
+    }
+  }
+
 </script>
 
 <AppBar tabTitle={$t`Dictionaries`}>
   {#snippet title()}
     <div class="text-lg flex gap-2 items-center">
-      <Icon src={mode.current === 'dark' ? logoLight : logoDark} alt={$t`Lexbox logo`}/>
+      <Icon onclick={clickIcon} src={mode.current === 'dark' ? logoLight : logoDark} alt={$t`Lexbox logo`}/>
       <h3>{$t`Dictionaries`}</h3>
     </div>
   {/snippet}
 
   {#snippet actions()}
-    <div class="flex">
+    <div class="flex gap-1">
       {#if import.meta.env.DEV}
         <Button href="http://localhost:6006/" target="_blank"
                 variant="ghost" size="icon" iconProps={{src: storybookIcon, alt: 'Storybook icon'}}/>
@@ -159,74 +188,74 @@
                     variant="ghost"
                     onclick={() => refreshProjects()}/>
           </div>
-          <div class="shadow rounded">
+          <div>
             {#each projects.filter((p) => p.crdt) as project, i (project.id ?? i)}
               {@const server = project.server}
               {@const loading = deletingProject === project.id}
-              <ButtonListItem href={`/project/${project.code}`}>
-                <ProjectListItem icon="i-mdi-book-edit-outline"
-                                 {project}
-                                 {loading}
-                                 subtitle={!server ? $t`Local only` : $t`Synced with ${server.displayName}`}
-                >
-                  {#snippet actions()}
-                    <div class="flex items-center">
-                      {#if $isDev}
-                        <Button
-                          icon="i-mdi-delete"
-                          variant="ghost"
-                          title={$t`Delete`}
-                          class="p-2 hover:bg-primary/20"
-                          onclick={(e) => {
-                          e.preventDefault();
-                          void deleteProject(project);
-                        }}
-                        />
-                      {/if}
-                      <Icon icon="i-mdi-chevron-right" class="p-2"/>
-                    </div>
-                  {/snippet}
-                </ProjectListItem>
-              </ButtonListItem>
+              <div out:send={{key: 'project-' + project.code}} in:receive={{key: 'project-' + project.code}}>
+                <Anchor href={`/project/${project.code}`}>
+                  <ProjectListItem icon="i-mdi-book-edit-outline"
+                                   {project}
+                                   {loading}
+                                   subtitle={!server ? $t`Local only` : $t`Synced with ${server.displayName}`}
+                  >
+                    {#snippet actions()}
+                      <div class="flex items-center">
+                        {#if $isDev}
+                          <Button
+                            icon="i-mdi-delete"
+                            variant="ghost"
+                            title={$t`Delete`}
+                            class="p-2 hover:bg-primary/20"
+                            onclick={(e) => {
+                            e.preventDefault();
+                            void deleteProject(project);
+                          }}
+                          />
+                        {/if}
+                        <Icon icon="i-mdi-chevron-right" class="p-2"/>
+                      </div>
+                    {/snippet}
+                  </ProjectListItem>
+                </Anchor>
+              </div>
             {/each}
             <DevContent>
-              <ButtonListItem href="/testing/project-view">
+              <Anchor href="/testing/project-view">
                 <ProjectListItem icon="i-mdi-test-tube" project={{ name: 'Test Project', code: 'Test Project' }}>
                   {#snippet actions()}
                     <Icon icon="i-mdi-chevron-right" class="p-2"/>
                   {/snippet}
                 </ProjectListItem>
-              </ButtonListItem>
+              </Anchor>
             </DevContent>
             {#if !projects.some(p => p.name === exampleProjectName) || $isDev}
-              <ButtonListItem onclick={() => createExampleProject()} disabled={createProjectLoading}>
-                <ListItem class="dark:bg-muted/50 bg-muted/80 hover:bg-muted/30 hover:dark:bg-muted">
-                  <span>{$t`Create Example Project`}</span>
-                  {#snippet actions()}
-                    <div class="flex flex-nowrap items-center gap-2">
-                      {#if $isDev}
-                        <Input
-                          bind:value={customExampleProjectName}
-                          placeholder={$t`Project name...`}
-                          onclick={(e) => e.stopPropagation()}
-                        />
-                      {/if}
-                      <Icon icon="i-mdi-book-plus-outline" class="p-2"/>
-                    </div>
-                  {/snippet}
+              <ListItem onclick={() => createExampleProject()} disabled={createProjectLoading} class="dark:bg-muted/50 bg-muted/80 hover:bg-muted/30 hover:dark:bg-muted">
+                <span>{$t`Create Example Project`}</span>
+                {#snippet actions()}
+                  <div class="flex flex-nowrap items-center gap-2">
+                    {#if $isDev}
+                      <Input
+                        bind:value={customExampleProjectName}
+                        placeholder={$t`Project name...`}
+                        onclick={(e) => e.stopPropagation()}
+                      />
+                    {/if}
+                    <Icon icon="i-mdi-book-plus-outline" class="p-2"/>
+                  </div>
+                {/snippet}
 
-                </ListItem>
-              </ButtonListItem>
+              </ListItem>
             {/if}
           </div>
         </div>
         <ServersList localProjects={projects} {refreshProjects}/>
         {#if projects.some((p) => p.fwdata)}
           <div>
             <p class="sub-title">{$t`Classic FieldWorks Projects`}</p>
-            <div class="shadow rounded">
+            <div>
               {#each projects.filter((p) => p.fwdata) as project (project.id ?? project.name)}
-                <ButtonListItem href={`/fwdata/${project.code}`}>
+                <Anchor href={`/fwdata/${project.code}`}>
                   <ProjectListItem {project}>
                     {#snippet icon()}
                       <Icon src={flexLogo} alt={$t`FieldWorks logo`}/>
@@ -246,7 +275,7 @@
                       </DevContent>
                     {/snippet}
                   </ProjectListItem>
-                </ButtonListItem>
+                </Anchor>
               {/each}
             </div>
           </div>
@@ -265,11 +294,6 @@
     display: flex;
     flex-direction: column;
 
-    :global(:is(.ListItem)) {
-      @apply max-md:!rounded-none;
-      @apply contrast-[0.95];
-    }
-
     :global(.sub-title) {
       @apply m-2;
       @apply text-sm text-muted-foreground;