refactor(flat-components): change model

[hyrious]

• adjust scroll button styles
• adjust absent avatar styles

---

Synced storage model changed, based on #1847: @netless-io/native

connectStorage("userWindows", {
  grid: null | [userUUID],
  [userUUID]: {
    x, y, width, height,
    z,                    // window z-index in normal mode
  }
})

When grid is null, it is in normal mode.

When grid is array, it is in maximized mode, the order in this array is the index field in previous design.

This way, you can remember the last state of avatars (is it maximized from windowed mode or from the stage?).

// double click the on-stage user to pull it into maximized mode
const createMaximizedWindow = (userUUID) => {
  let grid = userWindows$$.state.grid || getWindowdUsers()
  userWindows$$.setState({ grid: [...grid, userUUID] })
}

// double click the windowed user to jump in maximized mode
const setMaximized = () => {
  userWindows$$.setState({ grid: getWindowdUsers() })
}

// double click the maximized user to restore states
const restore = () => {
  userWindows$$.setState({ grid: null })
}

As you can see in the example codes, we only change one field of the storage. In fact, the whole data structure leaves no invalid state.