ken

Change all UI and user visible strings to English for i18n and clarity.

Fix: FullCalendar border and background color issues in dark mode; now all borders/theme are consistent, no more white or contrasting lines.

Refactor: Switched all storage backend selection to rely on db is not null (import plugin success), completely removed window.TAURI and userAgent checks for platform switching.

Database connection and fallback logic is now resilient: On desktop (Tauri), SQLite is always used; on web (GitHub Pages) fallback is always localStorage, UI logic is unchanged.

Improved CSS for calendar wrapper to further unify look-and-feel between light/dark theme.

Confirmed all main features (add/edit/delete Todo/Calendar/PainPoint) persist and update correctly in both desktop and web demo environments.

製作demo網頁(gitpage)
偵測運作環境切換sqlite/localstroage

優化UI (tailwind+shadcn)
加入深色模式

index.css一直有error:
Cannot apply unknown utility class 'bg-background'
Cannot apply unknown utility class 'outline-ring/50'
=>發現是混用tailwind v3跟v4的語法

=>拋棄 tailwind.config.js，改用 CSS-first 配置

UI Optimization with Tailwind + shadcn
Added Dark Mode Support

My index.css kept throwing errors:

Cannot apply unknown utility class 'bg-background'

Cannot apply unknown utility class 'outline-ring/50'

After troubleshooting, I realized I was mixing Tailwind CSS v3 and v4 syntax.

Root cause: I had both the old tailwind.config.js (JavaScript config) and new CSS variable definitions in my stylesheet, which caused conflicts.

Solution: I removed tailwind.config.js completely and switched to a CSS-first configuration using @layer theme and CSS custom properties for all theme colors and styles.

修正各種型別錯誤(包含any等等)
=>加入各類type
刪除沒有用到的import

build version 0.1.0 !!!

Fix various type errors (including any, etc.)
=> Add proper types
Remove unused imports
Build version 0.1.0 !!!

新增info 點選paint point item 就可以看到詳細內容 而且可以更新或刪除這些資料
調整一些元件的position/z-index設定
info window遇到 invalid hook

=>用useState解決

Add info: clicking on a pain point item will show detailed information, which can be updated or deleted

Adjust the position/z-index settings of some components

Encountered an invalid hook error in the info window
=> Resolved it using useState

修正todo list input的CSS
新增pain point
複數tags,possible solutions需要一對多 多對多SQL 之後有需要再加

調整UI(字型、排版)

Fix CSS for the to-do list input

Add pain point

Support many-to-many relationships for multiple tags and possible solutions in SQL (to be implemented later if needed)

Adjust UI (font, layout)

5

events有bug 拖動事件後移動事件的話原本被拖動的事件會跑回原本的位置
=>新增handleEventDrag
=>updateEvents時資料庫沒有更新
=>修正sql語法 但問題還是在 而且現在拖動後不能放下了
=>info沒加.event

使用font awesome icon 做header text

修正margin

There’s a bug with the events — after dragging an event and moving another one, the previously dragged event jumps back to its original position.
→ Added handleEventDrag
→ The database wasn’t updating during updateEvents
→ Fixed the SQL syntax, but the issue persists — and now dragged events can't be dropped
→ Forgot to add .event to info

Used Font Awesome icons to create the header (text)
Fixed the margin

把calendar events用sql存
=>好像沒這個必要，用JSON存比較方便
=>用SQL存之後加功能好像比較方便 所以還是用SQL吧
看不太懂官方文件 用AI幫我整理資料 並提供範例程式

現在可以拖動events了!! (而且是用SQL存的)

I was thinking about storing calendar events using SQL,
→ It seemed unnecessary at first—storing them in JSON felt more convenient.
→ But with SQL, it’s easier to add more features later on, so I decided to use SQL after all.

I couldn’t really understand the official documentation, so I had AI help me organize the information and provide example code.

Now I can drag and drop events! (And they’re stored in SQL!)

元件開頭要大寫
簡單畫了一下UI(UI.jpg)
calendar使用FullCalendar https://fullcalendar.io/docs/react
不知道為什麼FullCalendar不能占滿整個div
=>不能用inline-flex 要用inline-block
跟者官方範例加入日曆跟事件功能

Component names must start with uppercase

Created a simple UI sketch (UI.jpg)

Using FullCalendar for calendar functionality https://fullcalendar.io/docs/react

Issue discovered: FullCalendar cannot fill the entire div container
=> Solution: Cannot use inline-flex, must use inline-block

Following official examples to implement calendar and event functionality

status先完成 0 1的部分 2之後再加
const database = await Database.load('sqlite:lifehacker.db'); 這行出現問題 dattabase沒有被正常載入
=>找到本地的.db 確認todos有被建立成功
=>刪掉本地的 lifehacker.db後再重新執行就正常運作了!!! AI說可能是本地檔案已經損壞 (在這邊卡了很久 :(

Status: Complete the 0 and 1 parts first, add 2 later.

The line const database = await Database.load('sqlite:lifehacker.db'); was causing problems - the database wasn't being loaded properly.

=> Found the local .db file and confirmed that the todos table was created successfully.

=> After deleting the local lifehacker.db file and re-executing, it worked normally!!! AI said it might be because the local file was already corrupted (got stuck on this for a long time :( )

參考https://v2.tauri.app/zh-cn/plugin/sql/ 實作todo list的sql ,在builder的部分卡了一段時間，後來發現lib.rs那邊就有寫了

第一次跟者官方文件實作 還滿有趣的 之前都是直接找教學影片或問AI ，一步步實作雖然比較花時間但也讓我覺得滿新鮮的

This text is translated by AI
I implemented a todo list SQL function based on the official documentation at https://v2.tauri.app/zh-cn/plugin/sql/. I got stuck for a while on the builder part, but later realized that it was already written in lib.rs (probably because it was automatically updated when I added the plugin). I think this confusion happened because I initially found a tutorial for Tauri 1.0.

This is my first time following the official documentation for an implementation, and it’s quite interesting. Before, I always relied on tutorial videos or asked AI directly. Step-by-step implementation takes more time, but it feels refreshing to me.

I completed the todo SQL function with Rust, but I used the Tauri 1.0 method, which is why it didn’t match the official documentation. I will correct this in my next session.

!: I used AI to confirm whether I should include certain code and to get suggestions for corrections, but I did not use AI to generate code.