Handle stopping state in UI (#269)

closes #262

frontend/src/pages/archive/crawl-detail.ts

@@ -63,7 +63,11 @@ export class CrawlDetail extends LiteElement {
   private get isActive(): boolean | null {
     if (!this.crawl) return null;
 
-    return this.crawl.state === "running" || this.crawl.state === "starting";
+    return (
+      this.crawl.state === "running" ||
+      this.crawl.state === "starting" ||
+      this.crawl.state === "stopping"
+    );
   }
 
   private get hasFiles(): boolean | null {

frontend/src/pages/archive/crawls-list.ts

@@ -30,8 +30,12 @@ const sortableFieldLabels = {
   fileSize_desc: msg("Largest Files"),
 };
 
-function isRunning(crawl: Crawl) {
-  return crawl.state === "running" || crawl.state === "starting";
+function isActive(crawl: Crawl) {
+  return (
+    crawl.state === "running" ||
+    crawl.state === "starting" ||
+    crawl.state === "stopping"
+  );
 }
 
 /**
@@ -279,7 +283,7 @@ export class CrawlsList extends LiteElement {
             ></sl-icon-button>
 
             <ul class="text-sm text-0-800 whitespace-nowrap" role="menu">
-              ${isRunning(crawl)
+              ${isActive(crawl)
                 ? html`
                     <li
                       class="p-2 hover:bg-zinc-100 cursor-pointer"
@@ -376,7 +380,7 @@ export class CrawlsList extends LiteElement {
                 ? "text-red-500"
                 : crawl.state === "complete"
                 ? "text-emerald-500"
-                : isRunning(crawl)
+                : isActive(crawl)
                 ? "text-purple-500"
                 : "text-zinc-300"}"
               style="font-size: 10px; vertical-align: 2px"
@@ -386,7 +390,7 @@ export class CrawlsList extends LiteElement {
           </div>
           <div>
             <div
-              class="whitespace-nowrap mb-1 capitalize${isRunning(crawl)
+              class="whitespace-nowrap mb-1 capitalize${isActive(crawl)
                 ? " motion-safe:animate-pulse"
                 : ""}"
             >

frontend/src/pages/archive/types.ts

@@ -4,7 +4,8 @@ type CrawlState =
   | "complete"
   | "failed"
   | "partial_complete"
-  | "timed_out";
+  | "timed_out"
+  | "stopping";
 
 export type Crawl = {
   id: string;