Kanban board types

[byq77]

User description

new_feature_demo.mp4

Recently, I've been inspired by the Task Genius extension, which organizes tasks into projects. For the Task Board plugin, I think the obvious equivalent of a project is simply a board with a defined board-level filter.

Following this philosophy, users should be able to switch between different organizations of Kanban columns within the same board. Currently, this requires creating a separate board with a different column organization.

This PR enhances the Task Board plugin by allowing boards to switch between three column organizations: status-based, tag-based, and time-based within the same board. The result should be a more flexible, streamlined experience for organizing and viewing tasks across different contexts.

---

PR Type

Enhancement

---

Description

• Introduces support for multiple Kanban board type organizations (status-based, time-based, tag-based) within the same board

• Refactored board configuration structure to use nested column groups organized by board type instead of flat arrays

• Added KanbanBoardType enum with three board type options for type-safe selection

• Implemented settings migration logic to convert legacy board formats to new nested structure seamlessly

• Enhanced board configuration modal with type selector dropdown and board duplication functionality

• Updated all column and task components to use getActiveColumns() and getActiveColumnKey() helpers for correct column group access

• Added board type state tracking and switching logic in task board view with user notifications

• Expanded language translations (English and Polish) with new keys for board type functionality

• Added CSS styling for board configuration UI improvements including button containers and select element sizing

---

Diagram Walkthrough

flowchart LR
  A["Board Configuration"] -->|"Select Board Type"| B["KanbanBoardType Enum"]
  B -->|"statusBoard/timeBoard/tagBoard"| C["ColumnGroupData Structure"]
  C -->|"Nested Columns"| D["Active Column Helpers"]
  D -->|"getActiveColumns/getActiveColumnKey"| E["Components & Services"]
  E -->|"Column/TaskItem/KanbanView"| F["Rendered Kanban Board"]
  A -->|"Duplicate Board"| G["Board Duplication"]
  H["Legacy Board Format"] -->|"Migration Logic"| C

Loading

File Walkthrough

	Relevant files
Enhancement	14 files en.ts Language translations reorganized and Kanban board type keys added src/utils/lang/locale/en.ts Reorganized and alphabetically sorted all language translation keys for consistency Added new translation keys: board-type, board-type-info, status-board, time-board, tag-board, changed-kanban-board-type, no-board-selected-to-duplicate, duplicate-this-board, copy-suffix Removed duplicate entries and consolidated related translations Maintained all existing functionality while improving maintainability +281/-272 GlobalSettings.ts Board configuration structure refactored for multiple Kanban types src/interfaces/GlobalSettings.ts Restructured default board configurations to support multiple Kanban board types (status, time, tag) Changed columns from a flat array to a nested object with status, time, and tag properties Added boardType field to board configuration with default value KanbanBoardType.statusBoard Consolidated three separate default boards into one board with three column organization types +178/-196 SettingSynchronizer.ts Settings migration logic for board structure transformation src/settings/SettingSynchronizer.ts Added migration logic to convert legacy board format (flat columns array) to new format (nested column groups) Implemented isLegacyBoard() helper to detect old board structure Added resolveDefaultColumns() to extract default column configurations Enhanced migration to handle both legacy and new board formats seamlessly +152/-58 ColumnSegregator.ts Column segregator updated to support multiple board types src/utils/algorithms/ColumnSegregator.ts Updated to use getActiveColumns() helper function instead of directly accessing board columns array Refactored named tags filtering to work with active columns from current board type Updated completed column index lookup to use active columns +20/-17  BoardConfigs.ts Board configuration interfaces refactored with type grouping src/interfaces/BoardConfigs.ts Added ColumnGroupData type to organize columns by type (status, time, tag) Created BoardLegacy type for backward compatibility with old board format Updated Board type to include boardType field and nested ColumnGroupData structure Added helper functions getActiveColumns() and getActiveColumnKey() to retrieve columns based on board type +56/-1    OpenModals.ts Modal service updated for active column retrieval                src/services/OpenModals.ts Updated openTaskBoardActionsModal() to use getActiveColumns() helper instead of direct column access Ensures modal receives correct columns based on current board type +3/-2      Enums.ts Kanban board type enumeration added                                            src/interfaces/Enums.ts Added new KanbanBoardType enum with three values: statusBoard, timeBoard, tagBoard Provides type-safe board type selection for Kanban views +6/-0      styles.css CSS styling for board configuration UI enhancements            styles.css Added minimum width styling for board config modal select elements Added new button container class boardConfigModalDoubleBtnContainer for side-by-side button layout Added styling for duplicate board button alongside delete button Implemented flex layout for button container with equal distribution +14/-0    BoardConfigModal.tsx Board configuration modal enhanced with type switching and duplication src/modals/BoardConfigModal.tsx Added board type selector dropdown to allow switching between status, time, and tag-based boards Implemented handleDuplicateCurrentBoard() function to duplicate existing board configurations Updated column manipulation logic to use getActiveColumnKey() for accessing correct column group Modified all column operations (add, delete, reorder) to work with nested column structure Added duplicate and delete buttons in a container for improved UI layout +84/-23  Column.tsx Column component updated for multiple board type support  src/components/KanbanView/Column.tsx Updated all column operations to use getActiveColumnKey() for accessing correct column group Modified minimize, update, filter, and hide column operations to work with nested column structure Ensured column index lookups use active columns based on board type +18/-10  LazyColumn.tsx Lazy column component updated for board type support          src/components/KanbanView/LazyColumn.tsx Updated lazy-loaded column operations to use getActiveColumnKey() for correct column group access Modified minimize, update, filter operations to work with nested column structure Ensured consistency with Column component changes +18/-10  TaskBoardViewContent.tsx Task board view enhanced with board type switching capability src/components/TaskBoardViewContent.tsx Added activeBoardType state to track current Kanban board type Implemented board type switching logic in view type handler Updated column filtering to use getActiveColumns() helper Added notice message when board type is changed Added dependency on activeBoardType to useMemo hook for proper re-rendering +21/-10  TaskItem.tsx Task item component updated for active column retrieval    src/components/KanbanView/TaskItem.tsx Updated column data retrieval to use getActiveColumns() helper Ensures task items correctly reference columns from active board type +3/-2      KanbanBoardView.tsx Kanban board view updated for active column support            src/components/KanbanView/KanbanBoardView.tsx Updated to use getActiveColumns() helper for retrieving columns Modified empty board check to use active columns length Ensures Kanban board renders correct columns based on current board type +4/-3
Localization	2 files en.json Alphabetical reorganization and board type localization keys src/utils/lang/locale/en.json Reorganized locale strings alphabetically for better maintainability Added new localization keys for board type functionality: board-type, board-type-info, status-board, tag-board, time-board Added key changed-kanban-board-type to track board type changes Preserved all existing translation strings while reordering them +437/-426 pl.json Comprehensive Polish localization expansion for kanban board types src/utils/lang/locale/pl.json Expanded Polish language translations from 202 to 482 entries, adding comprehensive support for new features Added translations for kanban board type switching functionality (board-type, status-board, tag-board, time-board) Introduced translations for advanced filtering, sorting, and map view features Added support for new UI elements including board configuration, column management, and task dependencies +455/-175
Additional files	2 files data.json +0/-1004 tasks.json +0/-2284

---

[qodo-code-review]

PR Compliance Guide 🔍

Below is a summary of compliance checks for this PR:

Security Compliance
🟢	No security concerns identified No security vulnerabilities detected by AI analysis. Human verification advised for critical code.
Ticket Compliance
⚪	🎫 No ticket provided Create ticket/issue
Codebase Duplication Compliance
⚪	Codebase context is not defined Follow the guide to enable codebase context checks.
Custom Compliance
🟢	Generic: Meaningful Naming and Self-Documenting Code Objective: Ensure all identifiers clearly express their purpose and intent, making code self-documenting Status: Passed Learn more about managing compliance generic rules or creating your own custom rules
	Generic: Secure Error Handling Objective: To prevent the leakage of sensitive system information through error messages while providing sufficient detail for internal debugging. Status: Passed Learn more about managing compliance generic rules or creating your own custom rules
	Generic: Secure Logging Practices Objective: To ensure logs are useful for debugging and auditing without exposing sensitive information like PII, PHI, or cardholder data. Status: Passed Learn more about managing compliance generic rules or creating your own custom rules
⚪	Generic: Comprehensive Audit Trails Objective: To create a detailed and reliable record of critical system actions for security analysis and compliance. Status: Missing Audit Logs: New migration and export behaviors (e.g., board type migration, duplication, and settings export) introduce critical state changes without any auditing or structured logging of who performed the action or its outcome. Referred Code settings[key] as Record<string, string> ).map( ([name, color], idx) => ({ name, color, priority: idx + 1, } as any) ); } else if (key === "boardConfigs" && Array.isArray(settings[key])) { // Migration for boardConfigs - handles both legacy format and new format settings[key] = settings[key].map((boardConfig: any) => { // Check if this is a legacy board (columns is an array) if (isLegacyBoard(boardConfig)) { const newColumns: ColumnGroupData = resolveDefaultColumns(defaults); const migratedBoard: Board = { name: boardConfig.name, description: boardConfig.description, index: boardConfig.index, boardType: KanbanBoardType.statusBoard, // Default to status board columns: newColumns, ... (clipped 152 lines) Learn more about managing compliance generic rules or creating your own custom rules
	Generic: Robust Error Handling and Edge Case Management Objective: Ensure comprehensive error handling that provides meaningful context and graceful degradation Status: Weak Error Handling: The migration path for legacy boards and filesystem export lacks try/catch and contextual error handling, risking silent failures when parsing, cloning, or writing files. Referred Code settings[key] as Record<string, string> ).map( ([name, color], idx) => ({ name, color, priority: idx + 1, } as any) ); } else if (key === "boardConfigs" && Array.isArray(settings[key])) { // Migration for boardConfigs - handles both legacy format and new format settings[key] = settings[key].map((boardConfig: any) => { // Check if this is a legacy board (columns is an array) if (isLegacyBoard(boardConfig)) { const newColumns: ColumnGroupData = resolveDefaultColumns(defaults); const migratedBoard: Board = { name: boardConfig.name, description: boardConfig.description, index: boardConfig.index, boardType: KanbanBoardType.statusBoard, // Default to status board columns: newColumns, ... (clipped 152 lines) Learn more about managing compliance generic rules or creating your own custom rules
	Generic: Security-First Input Validation and Data Handling Objective: Ensure all data inputs are validated, sanitized, and handled securely to prevent vulnerabilities Status: Input Validation Gaps: The board type selector and column operations accept and propagate values from the UI without validation or guarding against unexpected enum values or missing column groups, which could lead to inconsistent state. Referred Code <hr className="boardConfigModalHr-100" /> <h3>{t("columns")}</h3> <div className="boardConfigModalMainContent-Active-Body-InputItems"> <div className="boardConfigModalMainContent-Active-Body-boardNameTag"> <div className="boardConfigModalSettingName">{t("board-type")}</div> <div className="boardConfigModalSettingDescription">{t("board-type-info")}</div> </div> <select aria-label="Select board type" value={board.boardType} onChange={(e) => { const updatedBoards = [...localBoards]; updatedBoards[boardIndex].boardType = e.target.value as KanbanBoardType; setLocalBoards(updatedBoards); setIsEdited(true); }} className="boardConfigModalColumnRowContentColDatedVal" > ... (clipped 5 lines) Learn more about managing compliance generic rules or creating your own custom rules
Update

Compliance status legend

🟢 - Fully Compliant
🟡 - Partial Compliant
🔴 - Not Compliant
⚪ - Requires Further Human Verification
🏷️ - Compliance label

[qodo-code-review]

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Impact
Possible issue	Prevent data loss during migration Modify the migration logic for legacy boards to preserve existing user-defined columns by detecting the board type and moving the columns into the appropriate group, preventing data loss. src/settings/SettingSynchronizer.ts [78-131] settings[key] = settings[key].map((boardConfig: any) => { // Check if this is a legacy board (columns is an array) if (isLegacyBoard(boardConfig)) { - const newColumns: ColumnGroupData = resolveDefaultColumns(defaults); + const defaultColumns: ColumnGroupData = resolveDefaultColumns(defaults); + + // Detect board type and preserve user's columns + let detectedBoardType = KanbanBoardType.statusBoard; + if (boardConfig.columns.some((c: ColumnData) => c.colType === 'dated')) { + detectedBoardType = KanbanBoardType.timeBoard; + defaultColumns.time = boardConfig.columns; + } else if (boardConfig.columns.some((c: ColumnData) => c.colType === 'namedTag')) { + detectedBoardType = KanbanBoardType.tagBoard; + defaultColumns.tag = boardConfig.columns; + } else { + defaultColumns.status = boardConfig.columns; + } + const migratedBoard: Board = { name: boardConfig.name, description: boardConfig.description, index: boardConfig.index, - boardType: KanbanBoardType.statusBoard, // Default to status board - columns: newColumns, + boardType: detectedBoardType, + columns: defaultColumns, hideEmptyColumns: boardConfig.hideEmptyColumns ?? false, showColumnTags: boardConfig.showColumnTags, showFilteredTags: boardConfig.showFilteredTags, boardFilter: boardConfig.boardFilter ?? { rootCondition: "any", filterGroups: [], }, filterConfig: boardConfig.filterConfig, taskCount: boardConfig.taskCount, filters: boardConfig.filters, filterPolarity: boardConfig.filterPolarity, }; ... return migratedBoard; } else { [To ensure code accuracy, apply this suggestion manually] Suggestion importance[1-10]: 10 __ Why: This suggestion addresses a critical flaw in the migration logic that would cause data loss for users with customized boards by overwriting their column configurations with defaults.	High
	Ensure unique default column IDs Update the default column configurations in DEFAULT_SETTINGS to ensure all column ids are unique across the status, time, and tag board types to prevent potential conflicts. src/interfaces/GlobalSettings.ts [167-344] status: [ { id: 7, colType: colType.taskStatus, ... }, ], time: [ { id: 1, colType: colType.undated, ... }, ], tag: [ { - id: 7, + id: 14, colType: colType.untagged, ... }, { - id: 12, + id: 19, colType: colType.completed, ... }, ] [To ensure code accuracy, apply this suggestion manually] Suggestion importance[1-10]: 8 __ Why: The suggestion correctly identifies that the new default board configuration introduces duplicate column IDs across different board types, which could lead to unpredictable behavior and bugs when switching between them.	Medium
	Regenerate column IDs on board duplication After duplicating a board, regenerate unique IDs for each column in the new board to prevent ID conflicts with the original board. src/modals/BoardConfigModal.tsx [206-216] const duplicatedBoard: Board = { ...JSON.parse(JSON.stringify(boardToDuplicate)), // Deep copy name: `${boardToDuplicate.name} ${t("copy-suffix")}`, index: localBoards.length, filterConfig: undefined, taskCount: undefined, boardFilter: { rootCondition: "any", filterGroups: [], }, }; +// Regenerate column IDs to ensure uniqueness +Object.values(duplicatedBoard.columns).forEach(columnGroup => { + columnGroup.forEach(column => { + column.id = nanoid(); + }); +}); + [To ensure code accuracy, apply this suggestion manually] Suggestion importance[1-10]: 8 __ Why: The suggestion correctly identifies that duplicating a board also duplicates column ids, which is a critical issue for React's key prop and can lead to rendering bugs.	Medium
	Add missing dependency to useMemo hook Add the boards state to the dependency array of the useMemo hook for allTasksArrangedPerColumn to prevent using stale board configurations. src/components/TaskBoardViewContent.tsx [126-146] const allTasksArrangedPerColumn = useMemo(() => { if (allTasks && boards.length > 0) { const currentBoard = boards[activeBoardIndex]; if (!currentBoard) return []; const filteredAllTasks = boardFilterer(allTasks, currentBoard.boardFilter); if (searchQuery.trim() !== "") { const searchQueryFilteredTasks = handleSearchSubmit(filteredAllTasks); return getActiveColumns(currentBoard) .filter((column) => column.active) .map((column: ColumnData) => columnSegregator(plugin.settings, activeBoardIndex, column, searchQueryFilteredTasks) ); } else { return getActiveColumns(currentBoard) .filter((column) => column.active) .map((column: ColumnData) => columnSegregator(plugin.settings, activeBoardIndex, column, filteredAllTasks) ); } } return []; -}, [allTasks, activeBoardIndex, activeBoardType]); +}, [allTasks, boards, activeBoardIndex, activeBoardType]); [To ensure code accuracy, apply this suggestion manually] Suggestion importance[1-10]: 7 __ Why: The suggestion correctly identifies a missing dependency (boards) in the useMemo hook, which could lead to stale data being displayed.	Medium
High-level	Preserve user data during migration The settings migration for legacy boards overwrites existing user column configurations with defaults, causing data loss. The logic should be changed to preserve the user's columns by migrating them into one of the new board type categories. Examples: src/settings/SettingSynchronizer.ts [80-87] if (isLegacyBoard(boardConfig)) { const newColumns: ColumnGroupData = resolveDefaultColumns(defaults); const migratedBoard: Board = { name: boardConfig.name, description: boardConfig.description, index: boardConfig.index, boardType: KanbanBoardType.statusBoard, // Default to status board columns: newColumns, Solution Walkthrough: Before: function migrateSettings(defaults, settings) { // ... settings.boardConfigs.map(boardConfig => { if (isLegacyBoard(boardConfig)) { // This gets default columns, ignoring the user's existing columns const newColumns = resolveDefaultColumns(defaults); const migratedBoard = { // ... // The user's columns from `boardConfig.columns` are lost. columns: newColumns, // ... }; return migratedBoard; } // ... }); } After: function migrateSettings(defaults, settings) { // ... settings.boardConfigs.map(boardConfig => { if (isLegacyBoard(boardConfig)) { // Get default columns as a template const newColumns = resolveDefaultColumns(defaults); // Preserve user's columns by assigning them to a default category newColumns.status = boardConfig.columns; const migratedBoard = { // ... // The user's columns are now preserved. columns: newColumns, // ... }; return migratedBoard; } // ... }); } Suggestion importance[1-10]: 9 __ Why: The suggestion correctly identifies a critical data loss issue in the settings migration logic, where custom column configurations from legacy boards are discarded instead of being preserved.	High
General	Correct a typo in description Correct the typo weired to weird in the scan-tasks-from-the-vault-description-1 string. src/utils/lang/locale/en.json [365] -"scan-tasks-from-the-vault-description-1": "Run this feature only on the fresh install or if your tasks has not been properly detected/scanned or the board is acting weired.", +"scan-tasks-from-the-vault-description-1": "Run this feature only on the fresh install or if your tasks has not been properly detected/scanned or the board is acting weird.", Apply / Chat Suggestion importance[1-10]: 3 __ Why: The suggestion correctly identifies and fixes a typo (weired) in a user-facing string, which improves the UI's professionalism.	Low
	Correct typos in a message Correct the typos altest to at least and quikly to quickly in the tasks-on-this-board-have-no-id-message-1 string. src/utils/lang/locale/en.json [444] -"tasks-on-this-board-have-no-id-message-1": "Tasks filtered for this board have no ID on them. Please add id for altest one task to open the map view. Or use the below import task panel feature, to quikly import tasks.", +"tasks-on-this-board-have-no-id-message-1": "Tasks filtered for this board have no ID on them. Please add id for at least one task to open the map view. Or use the below import task panel feature, to quickly import tasks.", Apply / Chat Suggestion importance[1-10]: 3 __ Why: The suggestion correctly identifies and fixes two typos (altest and quikly) in a user-facing message, improving UI text quality.	Low
Update

[tu2-atmanand]

Hi @byq77 !

I have been going through this PR and its functionalities from past few days. But didnt got the time to comment here, as was busy with some major bugs which got spawned in the latest enhancements I made for user feature. The latest version has been released just now.

Coming to this PR, you have done exceptional work here. Its really nice to see how you have transformed the plugin for project management. And how cool it looks now. I really liked these new features. I can see the amount of work you have put in here.

Although, these are not very big changes, which are directly affecting the plugins fundamental working. So, I can actually release them in the upcoming version, 1.9.0. But, I am still taking some time, to think more on this. Because, as you know, after the recent discussion from #561 , since storing board specific data inside dedicated files is a being change in the working of the plugin, hence it will be released in the major version release, 2.0.0. No timeline is set yet, but its actually a high priority work.

So, will need to think if, I should release this feature in the upcoming release first. Mostly, I might...

[tu2-atmanand]

Here are few things, I can able to think of related to this feature :

• Custom board type : There should be a new "Custom board type", which will hold the older configs of the users, when they will update task board to new version.

Now, I understand that, these configuration will provide an pre-configured workflow, for users to start right away. And which is very much important. And also, users are free to modify any of these configs as and when they want. But, there are also various workflows, where users can have a board, where there can be mixture of "Tagged", "Dated" and "Untagged" type of columns. So, a custom type might help them to have these workflow. Also, the main reason for this is, user dont loose their older configs when they will update it to this latest version. I have seen that you have applied the migrations, let me test how its working and get back here.

• How the pre-configs should be set

TBH, the "Status based board", was released recently. I simply got an idea that, since there is a feature of "Cyclic statuses in Tasks plugin", so I came up with this workflow where, we can set the chain such that :

• First the task will be in Backlog state. -[ ]. So, all the tasks with this status will be inside the first column.
• Then once user clicks on the checkbox, it will change its status to "Read to start" state, -[>]. And it will automatically move to the next column.
• Similarly, clicking on this task again will move it to the next column, which is of type "In Progress", -[/].
• Etc...

Now, since we have this feature, where we can visualize the current "Board" in different type of views. How the pre-configured boards will look like.

My approach

There will be three boards as they are now. But will change their names, so now when user will install this plugin, they will know exactly that Boards = Projects :

• Project 1 : Time based board
• Project 2 : Tag based board
• Project 3 : Status Based board

And, each of this boards will be set to the respective board type initially, which users can then change as and how they want.

Only, thing which is confusing me is, should we keep a 4th board type "Custom board type". So, users can use it later. Else whats the other approach, so that users dont face any inconvinience, when they will update the plugin to this version of the plugin. Their original configs shouldnt be mixed with these 3 board types. So, they are not confused.

[byq77]

I tired make this branch compatible with v1.8.4, but something is broken in latest release, so I force-pushed compatibility back to v1.8.3.

This what I'm getting for v1.8.4...

[byq77]

The advantage of my approach is that the Map View associated with the board is not affected by cycling between the Kanban board views. It is pretty obvious to me that users would like to see their tasks in different views on the same board (for example, to see which tasks associated with the board/project are overdue/in progress). The best solution would be to completely disassociate the column organizations from the particular boards and allow users to define multiple column organizations or choose an existing one from a template. I am speaking from the perspective of a user.

[tu2-atmanand]

Hi @byq77

I have just released a new version, 1.8.5. Can you please test it.

Not sure, but everything was working fine in development environment, but its failing when I build the release.
Something wrong with how I used the useLayoutEffect. React has its own problems with Obsidian's plugin bundling, or not sure whats happening with the DOM.

Hopefully, it should fix now, as I reverted the method of rendering.

[byq77]

Hi @byq77

I have just released a new version, 1.8.5. Can you please test it.

Not sure, but everything was working fine in development environment, but its failing when I build the release. Something wrong with how I used the useLayoutEffect. React has its own problems with Obsidian's plugin bundling, or not sure whats happening with the DOM.

Hopefully, it should fix now, as I reverted the method of rendering.

After merging the current main it works fine.

[byq77]

If I had more time, I would have implemented it this way (a proper way):

1. There would be a separate menu "Kanban Views" where users can define different organizations of columns, and save them into presets.
2. During the board configuration, the user can assign these presets to the board. There can be multiple presets assigned.
3. You can cycle between them like in this PR.

The current solution is good enough for me.

[tu2-atmanand]

Hi @byq77 !

Just wanted to give one heads-up.

When, I just spin up my development environment, the issue of content vanishing inside the TaskItem card is only showing up in the development environment. But, if I build a production bundle, there is no such issue. Right now, the latest version is using useEffect instead of useLayoutEffect.

Not, sure what is causing this. Actually, based on AI suggestion, I tried useLayoutEffect. But, if use this, then the issue shows up in production bundle, but it doesnt appear in dev environment. Its completely making me crazy. Maybe its just my dev environment, or I am not sure.

I feel, the issue started happening, after I converted the task.id from number to string, or somewhere at that time, where now each DOM component is using this as the unique identifier to separate the card components.

Workaround

One possible reason why this is happening only during development time is, the components are refreshed multiple times, just to have extra safe-checking. And during this multiple rendering, the return statement as mentioned below is cleaning things up.

The workaround includes. Simply comment out the following return statement. Which will avoid cleaning up the content, when the component refreshes again.

Task-Board/src/components/KanbanView/TaskItem.tsx

Lines 150 to 152 in aa04a80

	return () => {
	cancelled = true;
	};

I am not sure, if I should remove it in production build also, whether it will work or not is a mystery, but will see in future.

More literature

• First time when users started getting this issue : Tasks With Due Dates Lose Their Visible Title on the Board After Completing a Task #585 (comment)
• After applying useLayoutEffect all cards were going blank. Hence, reverted back to useEffect : Tasks With Due Dates Lose Their Visible Title on the Board After Completing a Task #585 (comment)

[byq77]

Hi @byq77 !

Just wanted to give one heads-up.

When, I just spin up my development environment, the issue of content vanishing inside the TaskItem card is only showing up in the development environment. But, if I build a production bundle, there is no such issue. Right now, the latest version is using useEffect instead of useLayoutEffect.

Not, sure what is causing this. Actually, based on AI suggestion, I tried useLayoutEffect. But, if use this, then the issue shows up in production bundle, but it doesnt appear in dev environment. Its completely making me crazy. Maybe its just my dev environment, or I am not sure.

I feel, the issue started happening, after I converted the task.id from number to string, or somewhere at that time, where now each DOM component is using this as the unique identifier to separate the card components.

Workaround

One possible reason why this is happening only during development time is, the components are refreshed multiple times, just to have extra safe-checking. And during this multiple rendering, the return statement as mentioned below is cleaning things up.

The workaround includes. Simply comment out the following return statement. Which will avoid cleaning up the content, when the component refreshes again.

Task-Board/src/components/KanbanView/TaskItem.tsx

Lines 150 to 152 in aa04a80

	return () => {
	cancelled = true;
	};

I am not sure, if I should remove it in production build also, whether it will work or not is a mystery, but will see in future.

More literature

• First time when users started getting this issue : Tasks With Due Dates Lose Their Visible Title on the Board After Completing a Task #585 (comment)
• After applying useLayoutEffect all cards were going blank. Hence, reverted back to useEffect : Tasks With Due Dates Lose Their Visible Title on the Board After Completing a Task #585 (comment)

Interesting. I did not encounter this (it was showing both when using npm run dev and npm run build). However, I have developed a practice to always use devcontainers for any serious development, sometimes even for embedded development.