feat: migrate to Solid.js (#282)

* refactor: change hires loader function name

* feat: add loading transition animation and improve performance

* refactor: refactor gallery creation and update functions

* feat: update dependencies, configuration, and input file for solidjs

- Update dependencies in package.json
- Modify the input file in rollup.config.mjs
- Update tsconfig.json with new configuration options

* feat: update ESLint config for TypeScript and Solid integration

- Add `plugin:solid/typescript` to the ESLint config
- Add `prettier`, `@typescript-eslint`, and `solid` plugins to the ESLint config
- Remove the `overrides` and `plugins` properties from the ESLint config
- Modify the `memberSyntaxSortOrder` property in the ESLint config

* feat: update build scripts and configuration for Vite

* GitButler Integration Commit

This is an integration commit for the virtual branches that GitButler is tracking.

Due to GitButler managing multiple virtual branches, you cannot switch back and
forth between git branches and virtual branches easily. 

If you switch to another branch, GitButler will need to be reinitialized.
If you commit on this branch, GitButler will throw it away.

Here are the branches that are currently applied:
 - solid (refs/gitbutler/solid)
   branch head: dc6860991c
   - .eslintrc.json
   - assets/ts/main.tsx
   - assets/ts/desktop/stage.tsx
   - static/bundled/js/main.js
   - rollup.config.mjs
   - pnpm-lock.yaml
   - vite.config.ts
   - package.json
   - tsconfig.json
   - assets/ts/globalState.ts
   - assets/ts/mobile/collection.ts
   - assets/ts/container.ts
   - assets/ts/mobile/init.ts
   - assets/ts/mobile/gallery.ts
   - assets/ts/desktop/customCursor.ts
   - assets/ts/mobile/state.ts
   - assets/ts/globalUtils.ts
   - static/bundled/js/zXhbFx.js
   - static/bundled/js/EY5BO_.js
   - static/bundled/js/bBHMTk.js
   - assets/ts/nav.tsx
   - assets/ts/utils.ts
   - assets/ts/desktop/stageNav.ts
   - assets/ts/mobile/utils.ts
   - assets/ts/main.ts
   - assets/ts/desktop/state.ts
   - assets/ts/desktop/init.ts
   - assets/ts/state.tsx
   - assets/ts/desktop/utils.ts
   - assets/ts/nav.ts
   - assets/ts/resources.ts
   - assets/ts/desktop/stage.ts
   - static/bundled/js/GAHquF.js

Your previous branch was: refs/heads/solid

The sha for that commit was: dc6860991c

For more information about what we're doing here, check out our docs:
https://docs.gitbutler.com/features/virtual-branches/integration-branch

* refactor: remove .hide class from _base.scss file

* feat: migrate to Solid.js

* refactor: change i18n loading text with trailing dots

* fix: fix broken pnpm lock file

* chore: update eslint configuration for better code organization

- Update the eslint plugins array by removing newlines and maintaining plugins order
- Disable the rule "@typescript-eslint/non-nullable-type-assertion-style"
- Change the configuration of "sort-imports" rule

* feat: add tiny-invariant and eslint-plugin-solid to deps

* refactor: fix multiple eslint warnings

---------

Co-authored-by: GitButler <gitbutler@gitbutler.com>

assets/ts/state.tsx

@@ -0,0 +1,136 @@
+import {
+  createContext,
+  createSignal,
+  useContext,
+  type Accessor,
+  type JSX,
+  type Setter
+} from 'solid-js'
+import invariant from 'tiny-invariant'
+
+import { decrement, getThresholdSessionIndex, increment } from './utils'
+
+/**
+ * interfaces and types
+ */
+
+export interface ThresholdRelated {
+  threshold: number
+  trailLength: number
+}
+
+export interface State {
+  index: number
+  length: number
+  threshold: number
+  trailLength: number
+}
+
+export type StateContextType = readonly [
+  Accessor<State>,
+  {
+    readonly setIndex: (index: number) => void
+    readonly incIndex: () => void
+    readonly decIndex: () => void
+    readonly incThreshold: () => void
+    readonly decThreshold: () => void
+  }
+]
+
+/**
+ * constants
+ */
+
+const thresholds: ThresholdRelated[] = [
+  { threshold: 20, trailLength: 20 },
+  { threshold: 40, trailLength: 10 },
+  { threshold: 80, trailLength: 5 },
+  { threshold: 140, trailLength: 5 },
+  { threshold: 200, trailLength: 5 }
+]
+const makeStateContext: (
+  state: Accessor<State>,
+  setState: Setter<State>
+) => StateContextType = (state: Accessor<State>, setState: Setter<State>) => {
+  return [
+    state,
+    {
+      setIndex: (index: number) => {
+        setState((s) => {
+          return { ...s, index }
+        })
+      },
+      incIndex: () => {
+        setState((s) => {
+          return { ...s, index: increment(s.index, s.length) }
+        })
+      },
+      decIndex: () => {
+        setState((s) => {
+          return { ...s, index: decrement(s.index, s.length) }
+        })
+      },
+      incThreshold: () => {
+        setState((s) => {
+          return { ...s, ...updateThreshold(s.threshold, thresholds, 1) }
+        })
+      },
+      decThreshold: () => {
+        setState((s) => {
+          return { ...s, ...updateThreshold(s.threshold, thresholds, -1) }
+        })
+      }
+    }
+  ] as const
+}
+const StateContext = createContext<StateContextType>()
+
+/**
+ * helper functions
+ */
+
+function updateThreshold(
+  currentThreshold: number,
+  thresholds: ThresholdRelated[],
+  stride: number
+): ThresholdRelated {
+  const i = thresholds.findIndex((t) => t.threshold === currentThreshold) + stride
+  if (i < 0 || i >= thresholds.length) return thresholds[i - stride]
+  // storage the index so we can restore it even if we go to another page
+  sessionStorage.setItem('thresholdsIndex', i.toString())
+  return thresholds[i]
+}
+
+/**
+ * StateProvider
+ */
+
+export function StateProvider(props: {
+  children?: JSX.Element
+  length: number
+}): JSX.Element {
+  const defaultState: State = {
+    index: -1,
+    // eslint-disable-next-line solid/reactivity
+    length: props.length,
+    threshold: thresholds[getThresholdSessionIndex()].threshold,
+    trailLength: thresholds[getThresholdSessionIndex()].trailLength
+  }
+
+  const [state, setState] = createSignal(defaultState)
+  // eslint-disable-next-line solid/reactivity
+  const contextValue = makeStateContext(state, setState)
+  return (
+    <StateContext.Provider value={contextValue}>{props.children}</StateContext.Provider>
+  )
+}
+
+/**
+ * use context
+ */
+
+export function useState(): StateContextType {
+  const uc = useContext(StateContext)
+  invariant(uc, 'undefined context')
+  return uc
+}