refactor state handling to make application available independent of the state

docs/application.md

@@ -0,0 +1,22 @@
+# Application
+
+- It's mainly responsible for
+  - creating and event based [application state](#application-state)
+  - parsing and compiling [application data](#application-data)
+
+## Application state
+
+- [ApplicationContext.ts](./../src/application/Context/ApplicationContext.ts) holds the [CategoryCollectionState](./../src/application/Context/State/CategoryCollectionState.ts)] for each OS
+- Uses [state pattern](https://en.wikipedia.org/wiki/State_pattern)
+- Same instance is shared throughout the application to ensure consistent state
+- 📖 See [Application State | Presentation layer](./presentation.md#application-state) to read more about how the state should be managed by the presentation layer.
+- 📖 See [ApplicationContext.ts](./../src/application/Context/ApplicationContext.ts) to start diving into the state code.
+
+## Application data
+
+- Compiled to `Application` domain object.
+- The scripts are defined and controlled in different data files per OS
+- Enables [data-driven programming](https://en.wikipedia.org/wiki/Data-driven_programming) and easier contributions
+- Application data is defined in collection fil es and
+- 📖 See [Application data | Presentation layer](./presentation.md#application-data) to read how the application data is read by the presentation layer.
+- 📖 See [collection files documentation](./collection-files.md) to read more about how the data files are structured/defined and see [collection yaml files](./../src/application/collections/) to directly check the code.

docs/presentation.md

@@ -0,0 +1,24 @@
+# Presentation layer
+
+- Consists of Vue.js components and other UI-related code.
+- Desktop application is created using [Electron](https://www.electronjs.org/).
+- Event driven as in components simply listens to events from the state and act accordingly.
+
+## Application data
+
+- Components and should use [ApplicationFactory](./../src/application/ApplicationFactory.ts) singleton to reach the application domain.
+- [Application.ts](../src/domain/Application.ts) domain model is the stateless application representation including
+  - available scripts, collections as defined in [collection files](./collection-files.md)
+  - package information as defined in [`package.json`](./../package.json)
+- 📖 See [Application data | Application layer](./presentation.md#application-data) where application data is parsed and compiled.
+
+## Application state
+
+- Stateful components mutate or/and react to state changes in [ApplicationContext](./../src/application/Context/ApplicationContext.ts).
+- Stateless components that does not handle state extends `Vue`
+- Stateful components that depends on the collection state such as user selection, search queries and more extends [`StatefulVue`](./../src/presentation/StatefulVue.ts)
+- The single source of truth is a singleton of the state created and made available to presentation layer by [`StatefulVue`](./../src/presentation/StatefulVue.ts)
+- `StatefulVue` includes abstract `handleCollectionState` that is fired once the component is loaded and also each time [collection](./collection-files.md) is changed.
+- Do not forget to subscribe from events when component is destroyed or if needed [collection](./collection-files.md) is changed.
+  - 💡 `events` in base class [`StatefulVue`](./../src/presentation/StatefulVue.ts) makes lifecycling easier
+- 📖 See [Application state | Application layer](./presentation.md#application-state) where the state is implemented using using state pattern.