Add pin 📌 button to keep important tasks at top
File: client/src/components/Board/TaskCard.jsx
Important tasks get buried under new ones 💀
No way to keep them visible at top fr!!
Fix: add pin toggle on card:
const [pinned, setPinned] = useState(
localStorage.getItem(pin_${task._id}) === 'true'
)
const handlePin = (e) => {
e.stopPropagation()
const next = !pinned
setPinned(next)
localStorage.setItem(pin_${task._id}, next)
}
<button onClick={handlePin}
className={text-xs transition ${ pinned ? 'text-purple-400' : 'text-[#555] opacity-0 group-hover:opacity-100' }}>
📌
// in Column.jsx sort pinned first:
[...tasks].sort((a,b) =>
(b.pinned ? 1 : 0) - (a.pinned ? 1 : 0))
~12 lines! localStorage only ✅
No backend needed 🎯
Add pin 📌 button to keep important tasks at top
File: client/src/components/Board/TaskCard.jsx
Important tasks get buried under new ones 💀
No way to keep them visible at top fr!!
Fix: add pin toggle on card:
const [pinned, setPinned] = useState(
localStorage.getItem(pin_${task._id}) === 'true'
)
const handlePin = (e) => {
e.stopPropagation()
const next = !pinned
setPinned(next)
localStorage.setItem(pin_${task._id}, next)
}
<button onClick={handlePin}
className={text-xs transition ${ pinned ? 'text-purple-400' : 'text-[#555] opacity-0 group-hover:opacity-100' }}>
📌
// in Column.jsx sort pinned first:
[...tasks].sort((a,b) =>
(b.pinned ? 1 : 0) - (a.pinned ? 1 : 0))
~12 lines! localStorage only ✅
No backend needed 🎯