.1496908331498617:d3249af4edc00c5d0082d989ed45a320_69809566d9b69a50e527320e.6980a715d9b69a50e5273239.6980a71510c906055b6c4aaf:Trae CN.T(2026/2/2 21:31:01)

src/assets/style/index.css

@@ -124,3 +124,74 @@ footer .buttons {
     border: 1px solid rgba(229, 229, 229, 0.5);
     color: #888;
 }
+
+/* Input Wrapper for Priority Select */
+.input-wrapper {
+    display: flex;
+    gap: 10px;
+    align-items: center;
+}
+
+.input-wrapper .add-todo {
+    flex: 1;
+}
+
+.priority-select {
+    padding: 6px 10px;
+    border: 1px solid #ccc;
+    border-radius: 3px;
+    background-color: #fff;
+    color: #555;
+    font-size: 14px;
+    cursor: pointer;
+    outline: none;
+}
+
+.priority-select:hover {
+    border-color: #999;
+}
+
+.priority-select:focus {
+    border-color: #66afe9;
+    box-shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(102,175,233,.6);
+}
+
+/* Priority Badges */
+.todo-text {
+    margin-right: 8px;
+}
+
+.priority-badge {
+    display: inline-block;
+    padding: 2px 8px;
+    font-size: 11px;
+    font-weight: 600;
+    border-radius: 3px;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.priority-high {
+    background-color: #ffebee;
+    color: #c62828;
+    border: 1px solid #ef9a9a;
+}
+
+.priority-medium {
+    background-color: #fff3e0;
+    color: #ef6c00;
+    border: 1px solid #ffcc80;
+}
+
+.priority-normal {
+    background-color: #f5f5f5;
+    color: #757575;
+    border: 1px solid #e0e0e0;
+}
+
+/* Completed items should have muted priority badges */
+li.completed .priority-high,
+li.completed .priority-medium,
+li.completed .priority-normal {
+    opacity: 0.5;
+}

src/components/hoc/wrapInputBox.js

@@ -1,22 +1,27 @@
 import KeyCode from 'keycode-js';
 import { compose, withState, withHandlers } from 'recompose';
+import { PRIORITY_NORMAL } from '../../services/todo';
 
 export default compose(
     withState('value', 'setValue', props => {
-        console.log('got props', props);
         return props.value || ''
     }),
+    withState('priority', 'setPriority', PRIORITY_NORMAL),
     withHandlers({
-        handleKeyUp: ({ addNew, setValue }) => e => {
+        handleKeyUp: ({ addNew, setValue, setPriority, value, priority }) => e => {
             const text = e.target.value.trim();
 
             if (e.keyCode === KeyCode.KEY_RETURN && text) {
-                addNew(text);
+                addNew(text, priority);
                 setValue('');
+                setPriority(PRIORITY_NORMAL);
             }
         },
         handleChange: ({ setValue }) => e => {
             setValue(e.target.value);
+        },
+        handlePriorityChange: ({ setPriority }) => e => {
+            setPriority(e.target.value);
         }
     })
 );

src/components/ui/InputBox.js

@@ -1,18 +1,31 @@
 import React from 'react';
 import enhance from '../hoc/wrapInputBox';
+import { PRIORITY_HIGH, PRIORITY_MEDIUM, PRIORITY_NORMAL } from '../../services/todo';
 
 function InputBox(props) {
-    const { value, handleChange, handleKeyUp } = props;
+    const { value, priority, handleChange, handleKeyUp, handlePriorityChange } = props;
 
     return (
-        <input autoFocus
-            type="text"
-            className="form-control add-todo"
-            value={value}
-            onKeyUp={handleKeyUp}
-            onChange={handleChange}
-            placeholder="Add New"
-        />
+        <div className="input-wrapper">
+            <input autoFocus
+                type="text"
+                className="form-control add-todo"
+                value={value}
+                onKeyUp={handleKeyUp}
+                onChange={handleChange}
+                placeholder="Add New"
+            />
+            <select 
+                className="priority-select"
+                value={priority}
+                onChange={handlePriorityChange}
+                title="Select Priority"
+            >
+                <option value={PRIORITY_HIGH}>High</option>
+                <option value={PRIORITY_MEDIUM}>Medium</option>
+                <option value={PRIORITY_NORMAL}>Normal</option>
+            </select>
+        </div>
     );
 }
 

src/components/ui/TodoItem.js

@@ -1,16 +1,30 @@
 import React from 'react';
 import CheckBox from './CheckBox';
+import { PRIORITY_HIGH, PRIORITY_MEDIUM } from '../../services/todo';
 
 export default function TodoItem(props) {
     const {data, changeStatus} = props;
     const handleChange = (checked) => changeStatus(data.id, checked);
     const className = 'todo-item ui-state-default ' + (data.completed === true ? 'completed' : 'pending');
+
+    const getPriorityClass = (priority) => {
+        switch(priority) {
+            case PRIORITY_HIGH:
+                return 'priority-badge priority-high';
+            case PRIORITY_MEDIUM:
+                return 'priority-badge priority-medium';
+            default:
+                return 'priority-badge priority-normal';
+        }
+    };
 
     return (
         <li className={className}>
             <div className="checkbox">
                 <label>
-                    <CheckBox checked={data.completed} onChange={handleChange}/> {data.text}
+                    <CheckBox checked={data.completed} onChange={handleChange}/> 
+                    <span className="todo-text">{data.text}</span>
+                    <span className={getPriorityClass(data.priority)}>{data.priority}</span>
                 </label>
             </div>
         </li>

src/components/wrappers/StateProvider.js

@@ -2,16 +2,28 @@ import React, {Component} from 'react';
 import {FILTER_ALL} from '../../services/filter';
 import {MODE_CREATE, MODE_NONE} from '../../services/mode';
 import {objectWithOnly, wrapChildrenWith} from '../../util/common';
-import {getAll, addToList, updateStatus} from '../../services/todo';
+import {getAll, addToList, updateStatus, sortByPriority, saveToStorage, loadFromStorage} from '../../services/todo';
 
 class StateProvider extends Component {
     constructor() {
         super();
+
+        // Try to load from LocalStorage first, fallback to default
+        const savedList = loadFromStorage();
+        const initialList = savedList || getAll();
+
         this.state = {
             query: '',
             mode: MODE_CREATE,
             filter: FILTER_ALL,
-            list: getAll()
+            list: sortByPriority(initialList)
+        }
+    }
+
+    componentDidUpdate(prevProps, prevState) {
+        // Save to LocalStorage whenever list changes
+        if (prevState.list !== this.state.list) {
+            saveToStorage(this.state.list);
         }
     }
 
@@ -24,8 +36,8 @@ class StateProvider extends Component {
         return <div>{children}</div>;
     }
 
-    addNew(text) {
-        let updatedList = addToList(this.state.list, {text, completed: false});
+    addNew(text, priority) {
+        let updatedList = addToList(this.state.list, {text, completed: false, priority});
 
         this.setState({list: updatedList});
     }
@@ -35,7 +47,9 @@ class StateProvider extends Component {
     }
 
     changeStatus(itemId, completed) {
-        const updatedList = updateStatus(this.state.list, itemId, completed);
+        let updatedList = updateStatus(this.state.list, itemId, completed);
+        // Re-sort after status change (completed items should sink to bottom)
+        updatedList = sortByPriority(updatedList);
 
         this.setState({list: updatedList});
     }

src/services/todo.js

@@ -1,5 +1,17 @@
 import update from 'immutability-helper';
 
+// Priority constants
+export const PRIORITY_HIGH = 'High';
+export const PRIORITY_MEDIUM = 'Medium';
+export const PRIORITY_NORMAL = 'Normal';
+
+// Priority order for sorting (higher number = higher priority)
+const PRIORITY_ORDER = {
+    [PRIORITY_HIGH]: 3,
+    [PRIORITY_MEDIUM]: 2,
+    [PRIORITY_NORMAL]: 1
+};
+
 /**
  * Get the list of todo items.
  * @return {Array}
@@ -9,17 +21,20 @@ export function getAll() {
         {
             id: 1,
             text: 'Learn Javascript',
-            completed: false
+            completed: false,
+            priority: PRIORITY_HIGH
         },
         {
             id: 2,
             text: 'Learn React',
-            completed: false
+            completed: false,
+            priority: PRIORITY_MEDIUM
         },
         {
             id: 3,
             text: 'Build a React App',
-            completed: false
+            completed: false,
+            priority: PRIORITY_NORMAL
         }
     ]
 }
@@ -59,8 +74,60 @@ function getNextId() {
  */
 export function addToList(list, data) {
     let item = Object.assign({
-        id: getNextId()
+        id: getNextId(),
+        priority: PRIORITY_NORMAL
     }, data);
 
-    return list.concat([item]);
+    return sortByPriority(list.concat([item]));
+}
+
+/**
+ * Sorts the todo list by priority (High > Medium > Normal).
+ * Completed items are always moved to the bottom.
+ *
+ * @param {Array} list
+ * @return {Array}
+ */
+export function sortByPriority(list) {
+    return [...list].sort((a, b) => {
+        // Completed items should always be at the bottom
+        if (a.completed !== b.completed) {
+            return a.completed ? 1 : -1;
+        }
+
+        // If both have same completion status, sort by priority
+        const priorityA = PRIORITY_ORDER[a.priority] || PRIORITY_ORDER[PRIORITY_NORMAL];
+        const priorityB = PRIORITY_ORDER[b.priority] || PRIORITY_ORDER[PRIORITY_NORMAL];
+
+        return priorityB - priorityA;
+    });
+}
+
+// LocalStorage key
+const STORAGE_KEY = 'todo-app-data';
+
+/**
+ * Save todo list to LocalStorage
+ * @param {Array} list
+ */
+export function saveToStorage(list) {
+    try {
+        localStorage.setItem(STORAGE_KEY, JSON.stringify(list));
+    } catch (e) {
+        console.error('Failed to save to LocalStorage:', e);
+    }
+}
+
+/**
+ * Load todo list from LocalStorage
+ * @return {Array|null}
+ */
+export function loadFromStorage() {
+    try {
+        const data = localStorage.getItem(STORAGE_KEY);
+        return data ? JSON.parse(data) : null;
+    } catch (e) {
+        console.error('Failed to load from LocalStorage:', e);
+        return null;
+    }
 }