docs: add readme to frontend, documenting some of the structure

README.md

@@ -53,8 +53,6 @@ docker run -it --init \
 ### Docker compose
 
 ```yaml
-version: '3.8'
-
 name: reiverr
 
 services:
@@ -172,3 +170,13 @@ If you'd like to develop your own plugin, easiest way to get started is by getti
 ![Series Page](images/screenshot-2.png)
 
 ![Library Page](images/screenshot-3.png)
+
+# Star History
+
+<a href="https://www.star-history.com/#aleksilassila/reiverr&type=date&legend=top-left">
+ <picture>
+   <source media="(prefers-color-scheme: dark)" srcset="https://api.star-history.com/svg?repos=aleksilassila/reiverr&type=date&theme=dark&legend=top-left" />
+   <source media="(prefers-color-scheme: light)" srcset="https://api.star-history.com/svg?repos=aleksilassila/reiverr&type=date&legend=top-left" />
+   <img alt="Star History Chart" src="https://api.star-history.com/svg?repos=aleksilassila/reiverr&type=date&legend=top-left" />
+ </picture>
+</a>

frontend/README.md

@@ -0,0 +1,46 @@
+# Frontend
+
+Here you can find an overview of the most important internal components and practices that are used in the frontend.
+
+## Important Components
+
+<!-- src/**App.svelte**
+
+--- -->
+
+[src/lib/components/**Container.svelte**](src/lib/components/Container.svelte)
+
+A component that can be navigated to with dpad/keyboard, backbone of the dpad navigation system.
+
+## Important Contexts and Stores
+
+[src/lib/components/StackRouter/**stack-router.store.ts**](src/lib/components/StackRouter/stack-router.store.ts)
+
+Provides access to the stack router, which is used for client side navigation and routing, as well as passing context between stack pages. Important functions:
+
+- useComponentStack: provides access to the stack router component stack
+- navigate: navigate to a url
+- getContext, setContext, hasContext: custom context implementation, is used the same as svelte's context
+
+---
+
+[src/lib/stores/**data**/](src/lib/stores/data/)
+
+Data fetching stores and utilities.
+
+---
+
+[src/lib/components/GlobalBackground/**background-stack.store.ts**](src/lib/components/GlobalBackground/background-stack.store.ts)
+
+Provides access to the global background stack, which allows reusing backgrounds between pages.
+
+<!-- ---
+
+- breadcrumbsContext -->
+
+## Notes & Tips
+
+**backface-visibility: hidden**: Add to scroll containers to fix repaint issues on old browsers.
+
+<!-- TODO: verify
+**Prefer padding over margin**: Spacing should be done by parents. -->

frontend/src/lib/components/StackRouter/stack-router.store.ts

@@ -198,7 +198,7 @@ type HistoryState = {
 
 export type StackRouterStore = ReturnType<typeof useStackRouter>;
 
-export function useStackRouter({
+function useStackRouter({
 	routes,
 	notFound,
 	maxDepth