Add an "About" page with some descriptions

because the total number of grouped log is not changed, then next sentence statement does not execute and the system is stuck.

not feature on browser, need some investigation

• owner
• repo
• branch (optional)
• release (optional) <= zip file download
• token (optional) <= github token

script data property should convert data to string before rendering or executing

Add a Copy button if the loading modal displays any error

Side panel > setting while scrolling, the bottom tabs will be include as well

we want to scroll without the bottom tabs moving

refactor the main page to contain sub pages

• library
  • all existed reps
  • add button
• setting
  • same as the setting panel in the reading page

use Mui drawer + react router

Webpack is using an old version of terser, waiting webpack to upgrade.

see webpack/webpack#16068

use Trans in load modal

• delete the metadata
• delete all save data
• delete all read logs

add a button or three dots dropdown so that a user can delete a repo

Use fetch to replace axios

js can help validate function logic which JSON cannot

e.g. use import("script path")

Note: what if to load from a blob file? e.g. zip

replace useDebounce to useDeferredValue

think about gzip compress maybe

example:

https://api.github.com/repos/octocat/Hello-World/git/trees/master?recursive=1

// https://stackoverflow.com/a/61656698

see https://reactjs.org/docs/strict-mode.html

either v7 or v8, so that a user can pick script from onedrive

furthers, if possible, a user can also backup the local indexdb to remote

when insert a new item, use css to show animation

@keyframes appear-animate {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

then use

animation: appear-animate 0.3s linear;

seems like the reading log id is not ready necessary.

as design, the composite key [savedataId, order] must be unique. and this can also benefit the ordering. because the "order" is part of the key, the selected results are automatically ordered

In addition, if a new save data is stored and new GUIDs are generated for all reading logs, then we have to update the save data logCursorPos.

In this case, it would be better to remove the reading log id and logCursorPos stores the order number

see https://mui.com/

side panel button cannot show in IOS

see =>
bvaughn/react-window#190
bvaughn/react-window#6

the virtualItems keep changing which triggers statement execution muti-times without next statement id up to date.

the virtualItems is not relayable, only the last index of virtualItems is need for fetching

the side bar can be used to contain

• Library
• Setting
• About
• etc...
  in the future

as a user, if the given URL without any params, then show a popup

• textbox: author (owner)
• textbox: repository
• textbox: tree_sha (optional, default master)
• blob uploader

Try https://material.io/resources/color/#!/?view.left=0&view.right=0
ref => https://mui.com/zh/material-ui/customization/color/

As a user keeps scrolling the screen, the read log position should be updated.

Note: the position is always the element which is on the top of the screen.
Technically, the top pos <= 0, bottom pos >= 0.

idea:
design the save data table like this:
row#1:

{id: 123, timestamp: 123456, data: {...}, readingLog: [{...log1..,}, {...log2...}]}

in this case, how to push directly into readingLog, which is a nested array of records.

the pros of this design are that no need to have a one-2-many relationship btw save data and readingLogs.
otherwise, two solutions

1. replace the whole readingLog each time update save data
2. have a separate table for readingLog. however, this needs one-2-many relationships

the vertical scrolling bar should be invisible

step#1: React window scroll to the right paragraph
step#2: Wait for paragraph to be added to DOM
step#3: Get sub-sentence position
step#4: Scroll extra offset

After adding a new repo, the repo list in main page should be refreshed

list of saved data
can save new data

• include font size change
• color schema
• dark mode

the paragraphs should not be loaded all together

a new statement is required to record/update the road map check points

put the indexes under the meta section

the color is computed based on repo name and author name

in Content.tsx

1. load a statement
2. execute the statement
3. render the result
4. if reach the bottom of the screen, done; otherwise, go back to step1

this is similar to CPU instruction cycle, however, this can cause "maximum update depth exceeded" if its a big screen and load many statements.

Currently, the scriptCursorPos points to the script which was executed in prev round. However, this is not a good design for the Choice component, Jump component, etc since these components' execution results are not stored in the DB.

To have scriptCursorPos always pointed to the next script means the pointed script is not executed yet.
In this case:

• The Jump component can set the scriptCursorPos directly.
• The Choice component and the Ending component will generate a pending state
  (a pending state means the script execution will be paused)

e.g. https://glitchbone.github.io/vscode-base16-term