From 2de0cc348a64cd5af59fafdecec7276d0676ebd1 Mon Sep 17 00:00:00 2001
From: Hugo <exo-ops@proton.me>
Date: Thu, 16 Apr 2026 12:39:44 +0200
Subject: [PATCH] refactor: various improvements

---
 .../e2e/tests/self-hosted/feature-requests.spec.ts |  5 +----
 packages/app/src/pages/sphere-labels.tsx           | 14 +++++++++-----
 packages/feature-requests/src/ui/ui.css.ts         |  2 +-
 3 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/packages/app/e2e/tests/self-hosted/feature-requests.spec.ts b/packages/app/e2e/tests/self-hosted/feature-requests.spec.ts
index ede2384..f2d437d 100644
--- a/packages/app/e2e/tests/self-hosted/feature-requests.spec.ts
+++ b/packages/app/e2e/tests/self-hosted/feature-requests.spec.ts
@@ -21,15 +21,12 @@ test.describe("Feature requests list page", () => {
     await expect(page.getByRole("link", { name: /Windows phone support/ })).not.toBeVisible();
   });
 
-  test("renders vote counts and comment counts", async ({ page }) => {
+  test("renders vote counts", async ({ page }) => {
     await page.goto("/infuse");
 
     // Wait for the list to render
     await expect(page.getByRole("link", { name: /Add dark mode support/ })).toBeVisible();
 
-    // fr-001 has 2 comments
-    await expect(page.getByText("2 comments")).toBeVisible();
-
     // Vote counts are rendered (△ + number) — check that the triangle markers exist
     const voteElements = page.getByText(/△\d/);
     await expect(voteElements.first()).toBeVisible();
diff --git a/packages/app/src/pages/sphere-labels.tsx b/packages/app/src/pages/sphere-labels.tsx
index 9e8f92b..14a8369 100644
--- a/packages/app/src/pages/sphere-labels.tsx
+++ b/packages/app/src/pages/sphere-labels.tsx
@@ -51,6 +51,7 @@ function LabelsContent({ handle }: { handle: string }) {
   const editColor = useSignal("");
   const saving = useSignal(false);
   const listError = useSignal("");
+  const optimisticLabels = useSignal<LabelData[] | null>(null);
 
   const handleCreate = async (e: Event) => {
     e.preventDefault();
@@ -110,12 +111,14 @@ function LabelsContent({ handle }: { handle: string }) {
   };
 
   const handleMove = async (index: number, direction: -1 | 1) => {
-    if (!data) return;
+    const labels = optimisticLabels.value ?? data?.labels;
+    if (!labels) return;
     const newIndex = index + direction;
-    if (newIndex < 0 || newIndex >= data.labels.length) return;
-    const reordered = [...data.labels];
+    if (newIndex < 0 || newIndex >= labels.length) return;
+    const reordered = [...labels];
     const [item] = reordered.splice(index, 1);
     reordered.splice(newIndex, 0, item);
+    optimisticLabels.value = reordered;
     try {
       await reorderSphereLabels(
         handle,
@@ -123,6 +126,7 @@ function LabelsContent({ handle }: { handle: string }) {
       );
       refetch();
     } catch (err) {
+      optimisticLabels.value = null;
       listError.value = err instanceof Error ? err.message : "Failed to reorder labels.";
     }
   };
@@ -208,7 +212,7 @@ function LabelsContent({ handle }: { handle: string }) {
           <p class={ui.emptyState}>No labels yet.</p>
         ) : (
           <div class={ui.stackSm}>
-            {data.labels.map((label, index) => (
+            {(optimisticLabels.value ?? data.labels).map((label, index) => (
               <div key={label.id} class={ui.card}>
                 {editingId.value === label.id ? (
                   <div class={ui.formStack}>
@@ -264,7 +268,7 @@ function LabelsContent({ handle }: { handle: string }) {
                         </button>
                         <button
                           class={cpUi.arrowBtn}
-                          disabled={index === data!.labels.length - 1}
+                          disabled={index === (optimisticLabels.value ?? data.labels).length - 1}
                           onClick={() => handleMove(index, 1)}
                           title="Move down"
                         >
diff --git a/packages/feature-requests/src/ui/ui.css.ts b/packages/feature-requests/src/ui/ui.css.ts
index 8f59b51..9152350 100644
--- a/packages/feature-requests/src/ui/ui.css.ts
+++ b/packages/feature-requests/src/ui/ui.css.ts
@@ -70,7 +70,7 @@ export const detailContent = style({
 export const detailCardWrapper = style({
   border: `1px solid ${vars.color.border}`,
   borderRadius: vars.radius.lg,
-  boxShadow: `0 1px 3px ${vars.color.shadow}, 0 1px 2px ${vars.color.shadow}`,
+  boxShadow: `0 1px 3px ${vars.color.shadow}`,
   overflow: "hidden",
 });
 
-- 
2.51.2