Skip to content

Add pin 📌 button to keep important tasks at top #365

Description

@anoopcodehack

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 🎯

Metadata

Metadata

Assignees

No one assigned

    Labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions