Add inline Story Points editing to backlog

Author: stefan-ernst

frontend/src/lib/components/Select.svelte

@@ -16,6 +16,7 @@
    *   menuWidth?: string,
    *   portalOwner?: string,
    *   placeholder?: string,
+   *   ariaLabel?: string,
    *   onchange?: (e?: any) => void,
    *   onfocus?: (e?: any) => void,
    *   onblur?: (e?: any) => void,
@@ -32,6 +33,7 @@
     menuWidth = '',
     portalOwner = undefined,
     placeholder = '',
+    ariaLabel = undefined,
     onchange = undefined,
     onfocus = undefined,
     onblur = undefined
@@ -178,6 +180,7 @@
     aria-required={required || undefined}
     aria-haspopup="listbox"
     aria-expanded={$open}
+    aria-label={ariaLabel}
     class="w-full rounded border transition-all duration-200 flex items-center justify-between gap-2
            focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50
            disabled:opacity-50 disabled:cursor-not-allowed cursor-pointer text-left {sizeClasses}"

frontend/src/lib/features/collections/BacklogIterationSection.svelte

@@ -30,6 +30,9 @@
     onStartIteration = null,
     onCompleteIteration = null,
     onRemoveGlobal = null,
+    storyPointsConfiguredForItem = null,
+    storyPointsPendingItemIds = new Set(),
+    onUpdateStoryPoints = null,
   } = $props();
 
   const statusColors = {
@@ -189,6 +192,9 @@
                     {statusCategories}
                     onclick={(e) => onOpenItem?.(item.id, e)}
                     showStatus={true}
+                    showStoryPoints={storyPointsConfiguredForItem?.(item) ?? false}
+                    storyPointsSaving={storyPointsPendingItemIds.has(item.id)}
+                    onStoryPointsChange={(value) => onUpdateStoryPoints?.(item, value)}
                   >
                     {#snippet leading()}
                       <div class="cursor-grab active:cursor-grabbing" style="{styles.dragHandleStyle}">

frontend/src/lib/features/collections/CollectionBacklog.svelte

@@ -21,6 +21,8 @@
   import { errorToast, successToast, warningToast } from '../../stores/toasts.svelte.js';
   import { getIncompleteIterationItems } from './iterationCompletion.js';
   import CompleteIterationDialog from '../../dialogs/CompleteIterationDialog.svelte';
+  import { workspacesStore } from '../../stores/workspaces.svelte.js';
+  import { isSystemFieldAvailableForItem } from '../../utils/screenFields.js';
 
   let { workspaceId, collectionId = null } = $props();
 
@@ -49,6 +51,12 @@
   let collapsedSections = $state(new Set());
   let sectionDropHighlight = $state(new Map()); // iterationId|'unassigned' -> boolean
   let pendingActionItemIds = $state(new Set());
+  let pendingStoryPointsItemIds = $state(new Set());
+  let storyPointsScreenConfiguration = $state({
+    ready: false,
+    configSetsByWorkspaceId: new Map(),
+    screensById: new Map(),
+  });
 
   // --- Complete Iteration dialog state ---
   let completeIterationShow = $state(false);
@@ -138,6 +146,101 @@
     addIterationPickerValue = null;
   }
 
+  async function loadStoryPointsScreenConfiguration() {
+    const workspaceRecords = workspaceId
+      ? [{
+          id: workspaceDataStore.workspace?.id ?? Number(workspaceId),
+          configuration_set_id: workspaceDataStore.workspace?.configuration_set_id ?? null,
+        }]
+      : (await workspacesStore.load()).map((availableWorkspace) => ({
+          id: availableWorkspace.id,
+          configuration_set_id: availableWorkspace.configuration_set_id ?? null,
+        }));
+
+    const configSetIds = [...new Set(
+      workspaceRecords
+        .map((record) => record.configuration_set_id)
+        .filter((configSetId) => configSetId != null)
+        .map((configSetId) => String(configSetId))
+    )];
+
+    const [screensOutcome, configSetOutcomes] = await Promise.all([
+      api.screens.getAllWithFields()
+        .then((screens) => ({ status: 'fulfilled', value: screens }))
+        .catch((error) => ({ status: 'rejected', reason: error })),
+      Promise.allSettled(configSetIds.map((configSetId) => api.configurationSets.get(configSetId))),
+    ]);
+
+    if (screensOutcome.status === 'rejected') {
+      console.error('Failed to load screens for backlog fields:', screensOutcome.reason);
+    }
+
+    const screensById = new Map(
+      (Array.isArray(screensOutcome.value) ? screensOutcome.value : [])
+        .filter((screen) => screen?.id != null)
+        .map((screen) => [screen.id, screen])
+    );
+    const configSetsById = new Map();
+    configSetOutcomes.forEach((outcome, index) => {
+      if (outcome.status === 'fulfilled' && outcome.value) {
+        configSetsById.set(configSetIds[index], outcome.value);
+      } else if (outcome.status === 'rejected') {
+        console.error(`Failed to load configuration set ${configSetIds[index]} for backlog fields:`, outcome.reason);
+      }
+    });
+
+    const configSetsByWorkspaceId = new Map();
+    workspaceRecords.forEach((record) => {
+      if (record?.id == null) return;
+      const workspaceKey = String(record.id);
+      const configSetId = record.configuration_set_id;
+      configSetsByWorkspaceId.set(
+        workspaceKey,
+        configSetId == null ? null : configSetsById.get(String(configSetId))
+      );
+    });
+
+    storyPointsScreenConfiguration = {
+      ready: true,
+      configSetsByWorkspaceId,
+      screensById,
+    };
+  }
+
+  function storyPointsConfiguredForItem(item) {
+    if (!storyPointsScreenConfiguration.ready) return false;
+    return isSystemFieldAvailableForItem(
+      item,
+      'story_points',
+      storyPointsScreenConfiguration.configSetsByWorkspaceId,
+      storyPointsScreenConfiguration.screensById
+    );
+  }
+
+  function setStoryPointsPending(itemId, pending) {
+    const next = new Set(pendingStoryPointsItemIds);
+    if (pending) next.add(itemId);
+    else next.delete(itemId);
+    pendingStoryPointsItemIds = next;
+  }
+
+  async function updateStoryPoints(item, value) {
+    if (pendingStoryPointsItemIds.has(item.id)) return;
+    setStoryPointsPending(item.id, true);
+
+    try {
+      await api.items.update(item.id, { story_points: value });
+      collectionStore.backlogItems = collectionStore.backlogItems.map((backlogItem) =>
+        backlogItem.id === item.id ? { ...backlogItem, story_points: value } : backlogItem
+      );
+    } catch (error) {
+      console.error('Failed to update story points:', error);
+      errorToast(t('collections.backlogActionFailed'));
+    } finally {
+      setStoryPointsPending(item.id, false);
+    }
+  }
+
   // Total item count across all sections
   let totalItemCount = $derived(collectionStore.backlogPagination?.total ?? backlogItems.length);
 
@@ -169,6 +272,7 @@
     if (workspaceId) {
       await loadWorkspaceGradient(workspaceId);
       await workspaceDataStore.initialize(workspaceId);
+      await loadStoryPointsScreenConfiguration();
 
       // Load iterations for this workspace
       try {
@@ -184,6 +288,7 @@
       restorePersistedState();
     } else {
       await workspaceDataStore.initializeGlobal();
+      await loadStoryPointsScreenConfiguration();
     }
     loading = false;
   });
@@ -736,6 +841,9 @@
               onStartIteration={startIteration}
               onCompleteIteration={completeIteration}
               onRemoveGlobal={removeGlobalIteration}
+              storyPointsConfiguredForItem={storyPointsConfiguredForItem}
+              storyPointsPendingItemIds={pendingStoryPointsItemIds}
+              onUpdateStoryPoints={updateStoryPoints}
             />
           {/each}
 
@@ -758,6 +866,9 @@
             onOpenItem={openItem}
             onMoveItemToBoundary={moveItemToBoundary}
             onAssignItemToIteration={assignItemToIteration}
+            storyPointsConfiguredForItem={storyPointsConfiguredForItem}
+            storyPointsPendingItemIds={pendingStoryPointsItemIds}
+            onUpdateStoryPoints={updateStoryPoints}
           />
 
           <!-- Load More -->

frontend/src/lib/features/items/WorkItemRow.svelte

@@ -5,6 +5,7 @@
   import ItemCard from './ItemCard.svelte';
   import Lozenge from '../../components/Lozenge.svelte';
   import { getStatusCategory } from '../../utils/statusColors.js';
+  import { t } from '../../stores/i18n.svelte.js';
 
   /**
    * Reusable list-row props. Lookup arrays enrich the item; leading and trailing
@@ -28,10 +29,17 @@
     timestamp = null,
     formatTimestamp = null,
     compact = false,
+    showStoryPoints = false,
+    storyPointsSaving = false,
+    onStoryPointsChange = null,
     leading = null,
     trailing = null,
   } = $props();
 
+  let editingStoryPoints = $state(false);
+  let storyPointsEditValue = $state('');
+  let storyPointsError = $state(false);
+
   // Compute the display key - prefer item.workspace_key, fallback to workspace.key
   const displayKey = $derived.by(() => {
     const key = item.workspace_key || workspace?.key;
@@ -91,6 +99,51 @@
   // Resolve the status badge color, preferring a pre-resolved color on the item
   // (e.g. status_color from the homepage activity API where statuses arrays aren't loaded)
   const statusColor = $derived(item.status_color || statusCategory?.color || '#6b7280');
+
+  function startEditingStoryPoints(event) {
+    event?.stopPropagation();
+    if (storyPointsSaving) return;
+    storyPointsEditValue = item.story_points == null ? '' : String(item.story_points);
+    storyPointsError = false;
+    editingStoryPoints = true;
+  }
+
+  function cancelStoryPointsEdit(event) {
+    event?.stopPropagation();
+    editingStoryPoints = false;
+    storyPointsError = false;
+  }
+
+  function saveStoryPoints(event) {
+    event?.stopPropagation();
+    const raw = String(storyPointsEditValue ?? '').trim();
+    const parsed = raw === '' ? null : Number(raw);
+    if (parsed !== null && (!Number.isFinite(parsed) || parsed < 0)) {
+      storyPointsError = true;
+      return;
+    }
+
+    if (parsed === (item.story_points ?? null)) {
+      editingStoryPoints = false;
+      storyPointsError = false;
+      return;
+    }
+
+    editingStoryPoints = false;
+    storyPointsError = false;
+    onStoryPointsChange?.(parsed);
+  }
+
+  function handleStoryPointsKeydown(event) {
+    event.stopPropagation();
+    if (event.key === 'Enter') {
+      event.preventDefault();
+      saveStoryPoints(event);
+    } else if (event.key === 'Escape') {
+      event.preventDefault();
+      cancelStoryPointsEdit(event);
+    }
+  }
 </script>
 
 <ItemCard href={itemHref} {onclick} {compact}>
@@ -149,6 +202,51 @@
         <Lozenge text={status.name.replace(/_/g, ' ')} customBg={statusColor} />
       {/if}
 
+      {#if showStoryPoints}
+        <div
+          class="flex-shrink-0"
+          data-testid={`backlog-story-points-${item.id}`}
+        >
+          {#if editingStoryPoints}
+            <input
+              type="number"
+              min="0"
+              step="0.5"
+              aria-label={t('items.storyPoints')}
+              aria-invalid={storyPointsError}
+              aria-describedby={storyPointsError ? `backlog-story-points-error-${item.id}` : undefined}
+              data-testid={`backlog-story-points-input-${item.id}`}
+              class="w-16 rounded border px-2 py-1 text-xs tabular-nums outline-none"
+              style="background-color: var(--ds-surface-card); border-color: {storyPointsError ? 'var(--ds-text-danger)' : 'var(--ds-border-focused)'}; color: var(--ds-text);"
+              bind:value={storyPointsEditValue}
+              disabled={storyPointsSaving}
+              onclick={(event) => event.stopPropagation()}
+              onblur={saveStoryPoints}
+              onkeydown={handleStoryPointsKeydown}
+            />
+            {#if storyPointsError}
+              <span id={`backlog-story-points-error-${item.id}`} class="sr-only">
+                {t('items.enterField', { field: t('items.storyPoints') })}
+              </span>
+            {/if}
+          {:else}
+            <button
+              type="button"
+              class="inline-flex items-center gap-1 rounded px-2 py-1 text-xs tabular-nums transition-colors hover:bg-black/5 dark:hover:bg-white/10 disabled:cursor-wait disabled:opacity-60"
+              style="color: var(--ds-text-subtle);"
+              title={t('items.setField', { field: t('items.storyPoints') })}
+              aria-label={t('items.setField', { field: t('items.storyPoints') })}
+              data-testid={`backlog-story-points-button-${item.id}`}
+              disabled={storyPointsSaving}
+              onclick={startEditingStoryPoints}
+            >
+              <span style="color: var(--ds-text);">{item.story_points ?? t('items.notSet')}</span>
+              <span>SP</span>
+            </button>
+          {/if}
+        </div>
+      {/if}
+
       {#if trailing}{@render trailing()}{/if}
     </div>
   {/snippet}

frontend/src/lib/layout/DashboardCustomizationSidebar.svelte

@@ -1,6 +1,6 @@
 <script>
   import { useEventListener } from 'runed';
-  import { Sparkles, CheckSquare, Compass, GripVertical, Bell, Clock, Eye, Target, Briefcase, Grip, ListChecks } from '@lucide/svelte';
+  import { Sparkles, CheckSquare, Compass, GripVertical, Bell, Clock, Eye, Target, Briefcase, Grip, ListChecks, Search } from '@lucide/svelte';
   import {
     DASHBOARD_GRID_COLUMNS,
     dashboardWidgetCategories,
@@ -23,6 +23,7 @@
     Briefcase,
     Grip,
     ListChecks,
+    Search,
   };
 
   const categories = [

frontend/src/lib/locales/ar/ui.js

@@ -406,6 +406,18 @@ export default {
     createdChart: {
       emptyMessage: 'لا تتوفر بيانات الإنشاء',
     },
+    savedSearch: {
+      loadingCollections: 'جارٍ تحميل المجموعات المحفوظة...',
+      setupTitle: 'اختر مجموعة محفوظة',
+      setupSubtitle: 'حدد مجموعة لعرض عناصر العمل الخاصة بها هنا.',
+      selectCollection: 'تحديد مجموعة',
+      noCollections: 'لا توجد مجموعات محفوظة متاحة',
+      collectionUnavailable: 'المجموعة المحفوظة غير متاحة',
+      itemCount: '{count} عناصر',
+      emptyTitle: 'لا توجد عناصر عمل مطابقة',
+      emptySubtitle: 'لا تحتوي هذه المجموعة المحفوظة على عناصر مطابقة',
+      loadError: 'فشل تحميل المجموعة المحفوظة',
+    },
     milestoneProgress: {
       emptyTitle: 'لا توجد معالم',
       emptySubtitle: 'أنشئ معالم لتتبع التقدم',

frontend/src/lib/locales/de/ui.js

@@ -404,6 +404,18 @@ export default {
     createdChart: {
       emptyMessage: 'Keine Erstellungsdaten verfügbar',
     },
+    savedSearch: {
+      loadingCollections: 'Gespeicherte Sammlungen werden geladen...',
+      setupTitle: 'Gespeicherte Sammlung auswählen',
+      setupSubtitle: 'Wähle eine Sammlung, deren Arbeitselemente hier angezeigt werden.',
+      selectCollection: 'Sammlung auswählen',
+      noCollections: 'Keine gespeicherten Sammlungen verfügbar',
+      collectionUnavailable: 'Gespeicherte Sammlung nicht verfügbar',
+      itemCount: '{count} Einträge',
+      emptyTitle: 'Keine passenden Arbeitselemente',
+      emptySubtitle: 'Diese gespeicherte Sammlung enthält keine passenden Elemente',
+      loadError: 'Gespeicherte Sammlung konnte nicht geladen werden',
+    },
     milestoneProgress: {
       emptyTitle: 'Keine Meilensteine',
       emptySubtitle: 'Erstellen Sie Meilensteine, um den Fortschritt zu verfolgen',