feat: Record passed status for challenges

[100gle]

Closed #78

[100gle]

@laike9m 搜了一下 jotai 似乎没有直接通过 CDN 引入然后直接使用的示例或相关文档，所以我就没有暂时没有尝试了；最后简单实现了一下效果如下所示：

完成的 icon 放在了右侧，这样就可以暂时不用动 Sidebar 里面文字的布局了，比较省时省力

[laike9m]

Sorry, I thought this PR is WIP so I didn't review it. Is it ready for review?

[100gle]

Sorry, I thought this PR is WIP so I didn't review it. Is it ready for review?

Yes, it is.

[laike9m]

The original density of the challenge list feels right to me, I'd rather we don't change it. Could you change it back?

I haven't finished reading the implementation, should be done tomorrow.

[100gle]

Density? Which part of css style do you refer? Padding, margin or width?

[laike9m]

Old

New

See the paddings in the left sidebar

[laike9m]

A design question:

Right now we basically have two copies of state, one in PassedState._state, one in localStorage. There's a bunch of code just for syncing the two states.

I'm wondering, is it possible to remove PassedState._state, and just use localStorage as the single source of truth? e.g. when a test passed, update localStorage directly. I feel if implemented this way, the code can be hugely simplified.

Performance should be the same, since we need to update localStorage anyway. Even if not, it shouldn't matter here.

See if it makes sense to you. Happy to discuss more.

[100gle]

A design question:

Right now we basically have two copies of state, one in PassedState._state, one in localStorage. There's a bunch of code just for syncing the two states.

I'm wondering, is it possible to remove PassedState._state, and just use localStorage as the single source of truth? e.g. when a test passed, update localStorage directly. I feel if implemented this way, the code can be hugely simplified.

Performance should be the same, since we need to update localStorage anyway. Even if not, it shouldn't matter here.

See if it makes sense to you. Happy to discuss more.

@laike9m Done

[laike9m]

Is it possible to reduce the empty space between challenge name and the check mark?

The sidebar is a lot wider than before

[laike9m]

There's a bug with challenge selection: previous highlight does not disappear

[100gle]

There's a bug with challenge selection: previous highlight does not disappear

This is because we set <script type="module"></script> to import passedState from a module, so element can't refer the global removeHighlight function, it has been put to local scope.

[100gle]

There's a bug with challenge selection: previous highlight does not disappear

This is because we set <script type="module"></script> to import passedState from a module, so element can't refer the global removeHighlight function, it has been put to local scope.

I have fixed this bug temporarily by splitting the one script tag in challenge-sidebar.html into modular and global script tag.

But some unknown potential issues will be raised in sometime because of the scope. For this situation, maybe the better choice is to switch to JavaScript tool(like Vite) to solve.

[laike9m]

There's a bug with challenge selection: previous highlight does not disappear

This is because we set <script type="module"></script> to import passedState from a module, so element can't refer the global removeHighlight function, it has been put to local scope.

I have fixed this bug temporarily by splitting the one script tag in challenge-sidebar.html into modular and global script tag.

But some unknown potential issues will be raised in sometime because of the scope. For this situation, maybe the better choice is to switch to JavaScript tool(like Vite) to solve.

I think at this point, bringing in tools like Vite might beneficial (with the assumption that it doesn't increase the complexity of managing things. btw TS is still a no-go). I can take a look at it.

The bigger concern is whether Zeabur supports a project with both Python and Node.js environment. I'm not so sure @MichaelYuhe