refactor: reorganize top level widgets tab

[Charlie-XIAO]

Extracted from and refactored upon #370. This PR mainly does the following:

• Group components by tab. Each tab is now a subfolder of the components directory with index.tsx being the tab component itself and other files being relevant building blocks.
• Memoize each tab.
• Make Widgets tab care only about IDs. The building blocks Trigger, Config and Settings are memoized and care about only one of config and settings of specific widget as they need. They are memoized as well.
• The widgets store is made back into Record<string, { config: WidgetConfig, settings: WidgetSettings } instead of { id: string, config: WidgetConfig, settings: WidgetSettings }[]. This is so that we can access each widget by ID (which is reliable) instead of by index (not sure if there will be issues). If by ID but using array, we would either need to make parents pass stuff down which can cause unnecessary rerendering in parents, or we would need to use find which seems not performant. Switching back to Record we can still ensure sortedness by creating object from sorted entries.

Future work include:

• Each of Trigger, Config, and Settings.
• Other tabs.