shiyue/kan
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: optimize board rendering in workspace details

Browse Source
This commit is contained in:
Henry
2026-04-01 23:41:13 +01:00
parent 1e93d85318
commit 385bc0de61
1 changed files with 20 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
apps/web/src/views/onboarding/workspace-details/index.tsx
View File

@@ -277,31 +277,26 @@ export default function WorkspaceNameView() {
</p> </p>
{/* Boards area */} {/* Boards area */}
<div className="mt-3 w-full flex-1 rounded-lg bg-light-200 p-2 dark:bg-dark-300"> <div className="mt-3 flex w-full flex-1 flex-col rounded-lg bg-light-200 p-2 dark:bg-dark-300">
<div className="space-y-1.5"> <div className="flex flex-1 flex-col gap-1.5">
<AnimatePresence> {BOARDS.map((board, i) => (
{[...BOARDS.slice(0, visibleCount)].reverse() <motion.div
.map((board) => ( key={board}
<motion.div initial={{ opacity: 0, y: -12 }}
key={board} animate={
layout i < visibleCount
initial={{ opacity: 0, y: -12 }} ? { opacity: 1, y: 0 }
animate={{ opacity: 1, y: 0 }} : { opacity: 0, y: -12 }
transition={{ }
layout: { transition={{
type: "spring", opacity: { duration: 0.2 },
stiffness: 300, y: { duration: 0.25, ease: "easeOut" },
damping: 30, }}
}, className="flex flex-1 w-full items-center justify-center rounded border border-dashed border-light-400 bg-light-50 px-3 text-[10px] font-medium text-light-900 dark:border-dark-400 dark:bg-dark-100 dark:text-dark-900"
opacity: { duration: 0.2 }, >
y: { duration: 0.25, ease: "easeOut" }, {board}
}} </motion.div>
className="flex w-full items-center justify-center rounded border border-dashed border-light-400 bg-light-50 px-3 py-10 text-[10px] font-medium text-light-900 dark:border-dark-400 dark:bg-dark-100 dark:text-dark-900" ))}
>
{board}
</motion.div>
))}
</AnimatePresence>
</div> </div>
</div> </div>