Project fixups (#1565)

* Tweak loading text layout

* Prevent icons and actions from getting squashed/pushed out of view

* Improve disabled ListItem handling

* Add project context to exception messages

Author: myieye

backend/FwLite/LcmCrdt/CurrentProjectService.cs

@@ -13,7 +13,8 @@ public class CurrentProjectService(IServiceProvider services, IMemoryCache memor
     public CrdtProject? MaybeProject => _project;
 
     //only works because PopulateProjectDataCache is called first in the request pipeline
-    public ProjectData ProjectData => memoryCache.Get<ProjectData>(CacheKey(Project)) ?? throw new InvalidOperationException("Project data not found, call PopulateProjectDataCache first or use GetProjectData");
+    public ProjectData ProjectData => memoryCache.Get<ProjectData>(CacheKey(Project)) ?? throw new InvalidOperationException(
+        $"Project data not found for project {MaybeProject?.Name}, call PopulateProjectDataCache first or use GetProjectData");
 
     public async ValueTask<ProjectData> GetProjectData(bool forceRefresh = false)
     {
@@ -23,14 +24,15 @@ public async ValueTask<ProjectData> GetProjectData(bool forceRefresh = false)
             result = await DbContext.ProjectData.AsNoTracking().FirstAsync();
             memoryCache.Set(CacheKey(Project), result);
         }
-        if (result is null) throw new InvalidOperationException("Project data not found");
+        if (result is null) throw new InvalidOperationException($"Project data not found for project {MaybeProject?.Name}");
 
         return result;
     }
 
     public void ValidateProjectScope()
     {
-        if (Project is null) throw new InvalidOperationException($"Project is null, there's a bug and {nameof(SetupProjectContext)} was not called");
+        if (Project is null)
+            throw new InvalidOperationException($"Project is null for project {MaybeProject?.Name}, there's a bug and {nameof(SetupProjectContext)} was not called");
     }
 
     private static string CacheKey(CrdtProject project)
@@ -60,7 +62,8 @@ public async ValueTask<ProjectData> SetupProjectContext(CrdtProject project)
     {
         using var activity = LcmCrdtActivitySource.Value.StartActivity();
         activity?.SetTag("app.project_code", project.Name);
-        if (_project != null && project != _project) throw new InvalidOperationException("Can't setup project context for a different project");
+        if (_project != null && project != _project)
+            throw new InvalidOperationException($"Can't setup project context for {project.Name} when already in context of project {_project.Name}");
         _project = project;
         //the first time this is called ProjectData will be null, after that it will be populated, so we can skip migration
         if (LookupProjectData(memoryCache, project) is null) await MigrateDb();

frontend/viewer/src/ProjectLoader.svelte

@@ -12,7 +12,7 @@
 
 {#if loading}
   <div class="absolute w-full h-full z-10 bg-surface-100 flex grow items-center justify-center" out:fade={{duration: 800}}>
-    <div class="inline-flex flex-col items-center text-4xl gap-4 opacity-75">
+    <div class="inline-flex flex-col items-center text-4xl gap-4 opacity-75 m-auto p-4 text-center">
       <span>Loading <span class="text-primary-500">{projectName}</span>...</span><ProgressCircle class="text-surface-content" />
     </div>
   </div>

frontend/viewer/src/home/HomeView.svelte

@@ -1,4 +1,4 @@
-<script lang="ts">
+<script lang="ts">
   import {
     mdiBookArrowLeftOutline,
     mdiBookEditOutline,
@@ -158,7 +158,7 @@
                   {loading}
                 >
                   <ProjectTitle slot="title" {project}/>
-                  <div slot="actions">
+                  <div slot="actions" class="shrink-0">
                     {#if $isDev}
                       <Button
                         icon={mdiDelete}
@@ -178,7 +178,7 @@
             <DevContent>
               <ButtonListItem href={`/testing/project-view`}>
                 <ListItem title={$t`Test Project`} icon={mdiTestTube}>
-                  <div slot="actions" class="pointer-events-none">
+                  <div slot="actions" class="pointer-events-none shrink-0">
                     <Button icon={mdiChevronRight} class="p-2" />
                   </div>
                 </ListItem>
@@ -213,8 +213,8 @@
               {#each projects.filter((p) => p.fwdata) as project (project.id ?? project.name)}
                 <ButtonListItem href={`/fwdata/${project.name}`}>
                   <ListItem title={project.name}>
-                    <img slot="avatar" src={flexLogo} alt={$t`FieldWorks logo`} class="h-6" />
-                    <div slot="actions">
+                    <img slot="avatar" src={flexLogo} alt={$t`FieldWorks logo`} class="h-6 shrink-0" />
+                    <div slot="actions" class="shrink-0">
                       <DevContent invisible>
                         <Button
                           loading={importing === project.name}

frontend/viewer/src/home/Server.svelte

@@ -88,10 +88,11 @@
       {#each projects as project}
         {@const localProject = matchesProject(localProjects, project)}
         {#if localProject?.crdt}
-          <ButtonListItem href={`/project/${project.code}`}>
-            <ListItem icon={mdiCloud}>
-              <ProjectTitle slot="title" {project}/>
-              <div slot="actions" class="pointer-events-none">
+          <ButtonListItem href={`/project/${project.name}`}>
+            <ListItem icon={mdiCloud}
+                      title={project.name}
+                      loading={downloading === project.name}>
+              <div slot="actions" class="pointer-events-none shrink-0">
                 <Button disabled icon={mdiBookSyncOutline} class="p-2">
                   {$t`Synced`}
                 </Button>
@@ -104,7 +105,7 @@
             <ListItem icon={mdiCloud}
                       {loading}>
               <ProjectTitle slot="title" {project}/>
-              <div slot="actions" class="pointer-events-none">
+              <div slot="actions" class="pointer-events-none shrink-0">
                 <Button icon={mdiBookArrowDownOutline} class="p-2">
                   {$t`Download`}
                 </Button>

frontend/viewer/src/lib/utils/ButtonListItem.svelte

@@ -8,6 +8,7 @@
   {href}
   {...$$restProps}
   class="button-list-item w-full text-start"
+  class:pointer-events-none={$$restProps.disabled}
   role="button"
   tabindex="0">
   <div></div> <!-- avoid internal first: styles -->