github-issue-tower-defence-management 1.185.1 → 1.186.0

package/src/adapter/entry-points/console/ui/src/features/console/components/list/ConsoleStoryList.tsx

@@ -1,6 +1,8 @@
 import { useEffect, useRef, useState } from 'react';
-import { colorFromEnum } from '../../logic/colors';
-import type { ConsoleStoryEntry } from '../../logic/types';
+import { CONSOLE_COLOR_PALETTE, colorFromEnum } from '../../logic/colors';
+import type { ConsoleColor, ConsoleStoryEntry } from '../../logic/types';
+
+const ALL_COLORS = Object.keys(CONSOLE_COLOR_PALETTE) as ConsoleColor[];
 
 type InlineInputFormProps = {
   placeholder: string;
@@ -97,12 +99,44 @@ const StoryCreateForm = ({
   />
 );
 
+type ColorPaletteProps = {
+  onSelectColor: (color: ConsoleColor) => void;
+  disabled: boolean;
+};
+
+const ColorPalette = ({ onSelectColor, disabled }: ColorPaletteProps) => (
+  <div className="console-story-color-palette">
+    {ALL_COLORS.map((color) => {
+      const palette = CONSOLE_COLOR_PALETTE[color];
+      return (
+        <button
+          key={color}
+          type="button"
+          className="console-story-color-swatch"
+          aria-label={color === 'GRAY' ? `${color} (disable)` : color}
+          style={{ backgroundColor: palette.dot }}
+          onClick={() => onSelectColor(color)}
+          disabled={disabled}
+        >
+          {color === 'GRAY' && (
+            <span className="console-story-color-swatch-label">disable</span>
+          )}
+        </button>
+      );
+    })}
+  </div>
+);
+
 export type ConsoleStoryListProps = {
   stories: ConsoleStoryEntry[];
   isLoading: boolean;
   error: string | null;
   onCreateIssue: (storyOptionId: string, title: string) => Promise<void>;
   onAddStory: (storyName: string) => Promise<void>;
+  onSelectColor: (storyOptionId: string, newColor: ConsoleColor) => void;
+  optimisticColors: Record<string, ConsoleColor>;
+  colorChangeInFlight: string | null;
+  colorErrors: Record<string, string>;
 };
 
 export const ConsoleStoryList = ({
@@ -111,9 +145,16 @@ export const ConsoleStoryList = ({
   error,
   onCreateIssue,
   onAddStory,
+  onSelectColor,
+  optimisticColors,
+  colorChangeInFlight,
+  colorErrors,
 }: ConsoleStoryListProps) => {
   const [expandedOptionId, setExpandedOptionId] = useState<string | null>(null);
   const [addStoryExpanded, setAddStoryExpanded] = useState(false);
+  const [colorPickerOptionId, setColorPickerOptionId] = useState<string | null>(
+    null,
+  );
 
   if (error !== null) {
     return (
@@ -141,6 +182,20 @@ export const ConsoleStoryList = ({
     setExpandedOptionId(null);
   };
 
+  const handleColorButtonClick = (storyOptionId: string): void => {
+    setColorPickerOptionId(
+      colorPickerOptionId === storyOptionId ? null : storyOptionId,
+    );
+  };
+
+  const handleSwatchClick = (
+    storyOptionId: string,
+    newColor: ConsoleColor,
+  ): void => {
+    setColorPickerOptionId(null);
+    onSelectColor(storyOptionId, newColor);
+  };
+
   return (
     <div className="console-story-list-container">
       {stories.length === 0 ? (
@@ -148,8 +203,13 @@ export const ConsoleStoryList = ({
       ) : (
         <ul className="console-story-list">
           {stories.map((entry) => {
-            const palette = colorFromEnum(entry.color);
+            const displayColor: ConsoleColor =
+              optimisticColors[entry.storyOptionId] ?? entry.color;
+            const palette = colorFromEnum(displayColor);
             const isExpanded = expandedOptionId === entry.storyOptionId;
+            const isPickerOpen = colorPickerOptionId === entry.storyOptionId;
+            const isInFlight = colorChangeInFlight === entry.storyOptionId;
+            const colorError = colorErrors[entry.storyOptionId] ?? null;
             return (
               <li key={entry.storyOptionId} className="console-story-list-row">
                 <div className="console-story-list-row-main">
@@ -189,7 +249,28 @@ export const ConsoleStoryList = ({
                   >
                     Add task
                   </button>
+                  <button
+                    type="button"
+                    className="console-op-button"
+                    onClick={() => handleColorButtonClick(entry.storyOptionId)}
+                    disabled={isInFlight}
+                  >
+                    Change color
+                  </button>
                 </div>
+                {isPickerOpen && (
+                  <ColorPalette
+                    onSelectColor={(newColor) =>
+                      handleSwatchClick(entry.storyOptionId, newColor)
+                    }
+                    disabled={isInFlight}
+                  />
+                )}
+                {colorError !== null && (
+                  <p role="alert" className="console-list-error">
+                    {colorError}
+                  </p>
+                )}
                 {isExpanded && (
                   <StoryCreateForm
                     storyOptionId={entry.storyOptionId}

package/src/adapter/entry-points/console/ui/src/features/console/lib/consoleApi.ts

@@ -1,5 +1,6 @@
 import type {
   ConsoleChangedFile,
+  ConsoleColor,
   ConsoleComment,
   ConsoleCommit,
   ConsoleIssueState,
@@ -418,6 +419,28 @@ export type ConsoleCreateIssueRequest = {
   nameWithOwner: string;
 };
 
+export const STORY_COLOR_OPERATION_PATH = '/api/storycolor';
+
+export type ConsoleStoryColorRequest = {
+  pjcode: string;
+  storyOptionId: string;
+  newColor: ConsoleColor;
+  nameWithOwner: string;
+};
+
+export const postConsoleStoryColor = async (
+  request: ConsoleStoryColorRequest,
+): Promise<void> => {
+  const response = await fetch(STORY_COLOR_OPERATION_PATH, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(request),
+  });
+  if (!response.ok) {
+    throw new Error(await readOperationErrorReason(response));
+  }
+};
+
 export const postConsoleCreateIssue = async (
   request: ConsoleCreateIssueRequest,
 ): Promise<string> => {

package/src/adapter/entry-points/console/ui/src/features/console/pages/ConsolePage.tsx

@@ -24,6 +24,7 @@ import {
   postConsoleAddStory,
   postConsoleCreateIssue,
   postConsoleReorderStory,
+  postConsoleStoryColor,
 } from '../lib/consoleApi';
 import { navigateAssign, navigateReplace } from '../lib/navigation';
 import {
@@ -48,6 +49,7 @@ import type { ConsoleSwipeDirection } from '../logic/swipe';
 import { findNextNonEmptyTabToRight } from '../logic/tabAdvance';
 import { findNextPjcodeWithMinutes } from '../logic/timerSettings';
 import type {
+  ConsoleColor,
   ConsoleListItem,
   ConsoleOverlayStatus,
   ConsoleTabName,
@@ -386,6 +388,73 @@ export const ConsolePage = () => {
     [pjcode],
   );
 
+  const [storyOptimisticColors, setStoryOptimisticColors] = useState<
+    Record<string, ConsoleColor>
+  >({});
+  const [storyColorChangeInFlight, setStoryColorChangeInFlight] = useState<
+    string | null
+  >(null);
+  const [storyColorErrors, setStoryColorErrors] = useState<
+    Record<string, string>
+  >({});
+
+  const handleSelectColor = useCallback(
+    (storyOptionId: string, newColor: ConsoleColor): void => {
+      const originalEntry = storyEntries.find(
+        (e) => e.storyOptionId === storyOptionId,
+      );
+      const originalColor = originalEntry?.color;
+      setStoryColorChangeInFlight(storyOptionId);
+      setStoryOptimisticColors((prev) => ({
+        ...prev,
+        [storyOptionId]: newColor,
+      }));
+      setStoryColorErrors((prev) => {
+        const next = { ...prev };
+        delete next[storyOptionId];
+        return next;
+      });
+      if (pjcode === null || defaultNameWithOwner === null) {
+        setStoryOptimisticColors((prev) =>
+          originalColor !== undefined
+            ? { ...prev, [storyOptionId]: originalColor }
+            : prev,
+        );
+        setStoryColorErrors((prev) => ({
+          ...prev,
+          [storyOptionId]: 'No project or repository configured.',
+        }));
+        setStoryColorChangeInFlight((current) =>
+          current === storyOptionId ? null : current,
+        );
+        return;
+      }
+      postConsoleStoryColor({
+        pjcode,
+        storyOptionId,
+        newColor,
+        nameWithOwner: defaultNameWithOwner,
+      })
+        .catch((err: unknown) => {
+          setStoryOptimisticColors((prev) =>
+            originalColor !== undefined
+              ? { ...prev, [storyOptionId]: originalColor }
+              : prev,
+          );
+          setStoryColorErrors((prev) => ({
+            ...prev,
+            [storyOptionId]: err instanceof Error ? err.message : String(err),
+          }));
+        })
+        .finally(() => {
+          setStoryColorChangeInFlight((current) =>
+            current === storyOptionId ? null : current,
+          );
+        });
+    },
+    [pjcode, defaultNameWithOwner, storyEntries],
+  );
+
   return (
     <main className="console-app">
       {actionQueue.pending !== null && (
@@ -433,6 +502,10 @@ export const ConsolePage = () => {
           error={error}
           onCreateIssue={handleCreateIssue}
           onAddStory={handleStoryAdd}
+          onSelectColor={handleSelectColor}
+          optimisticColors={storyOptimisticColors}
+          colorChangeInFlight={storyColorChangeInFlight}
+          colorErrors={storyColorErrors}
         />
       ) : selectedItem === null ? (
         <>

package/src/adapter/entry-points/console/ui/src/index.css

@@ -297,6 +297,41 @@ body {
   font-size: 0.75rem;
 }
 
+.console-story-color-palette {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  padding: 6px 0;
+}
+
+.console-story-color-swatch {
+  width: 28px;
+  height: 28px;
+  border-radius: 6px;
+  border: 2px solid transparent;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 0.625rem;
+  color: #e6edf3;
+  padding: 0;
+}
+
+.console-story-color-swatch:hover {
+  border-color: #e6edf3;
+}
+
+.console-story-color-swatch:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+
+.console-story-color-swatch-label {
+  font-size: 0.5rem;
+  line-height: 1;
+}
+
 .console-item-row {
   display: flex;
   gap: 14px;