refactor: restructure src folder to easily differenciate between processes

.gitmodules

@@ -1,3 +1,3 @@
 [submodule "app/Database"]
-	path = src/database
+	path = src/database/contents
 	url = https://github.com/elyukai/optolith-data.git

src/database/index.ts

@@ -2,9 +2,9 @@ import { dirname, join } from "node:path"
 import { parentPort } from "node:process"
 import { fileURLToPath } from "node:url"
 import { getAllValidData } from "optolith-database-schema"
-import { getAbsoluteEntityPaths } from "./database/src/config.js"
+import { getAbsoluteEntityPaths } from "./contents/src/config.js"
 
-const root = join(dirname(fileURLToPath(import.meta.url)), "database")
+const root = join(dirname(fileURLToPath(import.meta.url)), "contents")
 
 getAllValidData(getAbsoluteEntityPaths(root))
   .then(database => {

src/main/index.ts

@@ -4,10 +4,10 @@ import { autoUpdater } from "electron-updater"
 import { readFile } from "node:fs/promises"
 import { join } from "node:path"
 import * as process from "node:process"
-import type { Database } from "./database.ts"
-import { createMainWindow, showMainWindow } from "./main/mainWindow.ts"
-import { ensureUserDataPathExists } from "./main/saveData.ts"
-import { checkForUpdatesOnRequest, checkForUpdatesOnStartup } from "./main/updater.ts"
+import type { Database } from "../database/index.ts"
+import { createMainWindow, showMainWindow } from "./mainWindow.ts"
+import { ensureUserDataPathExists } from "./saveData.ts"
+import { checkForUpdatesOnRequest, checkForUpdatesOnStartup } from "./updater.ts"
 
 app.setAppUserModelId("lukasobermann.optolith")
 

src/main/mainWindow.ts

@@ -2,7 +2,7 @@ import { BrowserWindow, app, ipcMain, shell } from "electron"
 import windowStateKeeper from "electron-window-state"
 import * as path from "node:path"
 import * as url from "node:url"
-import type { Database } from "../database.ts"
+import type { Database } from "../database/index.ts"
 
 export const createMainWindow = async () => {
   console.log("main: Create Window ...")

src/main_window/hooks/visibleTabs.ts

@@ -7,7 +7,7 @@ import { Route, selectRoute } from "../slices/routeSlice.ts"
 // import { getIsSpellsTabAvailable } from "./spellsSelectors"
 // import { getCurrentCultureId, getCurrentPhase, getCurrentTab, getRaceIdM, getWiki } from "./stateSelectors"
 import { useMemo } from "react"
-import { filterNonNullable } from "../../../shared/helpers/array.ts"
+import { filterNonNullable } from "../../shared/utils/array.ts"
 
 type RouteGroupName =
   | "about"

src/main_window/index.tsx

@@ -33,8 +33,8 @@
 // import { Unit } from "./Data/Unit"
 import { createRoot } from "react-dom/client"
 import { Provider } from "react-redux"
-import "../../shared/styles/index.scss"
-import { preloadApi } from "./preloadApi.ts"
+import "../shared/styles/index.scss"
+import { preloadApi } from "./preload.ts"
 import { Root } from "./routes/Root.tsx"
 import { initDatabase } from "./slices/databaseSlice.ts"
 import { store } from "./store.ts"

src/main_window/preload.ts

@@ -1,4 +1,4 @@
-import { PreloadAPI } from "./preload.ts"
+import { PreloadAPI } from "../main_window_preload/index.ts"
 
 type EnhancedWindow = Window & typeof globalThis & { optolith: PreloadAPI }
 

src/main_window/routes/NavigationBar.tsx

@@ -1,8 +1,8 @@
 import { FC } from "react"
-import { IconButton } from "../components/iconButton/IconButton.tsx"
+import { IconButton } from "../../shared/components/iconButton/IconButton.tsx"
 import { useTranslate } from "../hooks/translate.ts"
 import { useVisibleTabs } from "../hooks/visibleTabs.ts"
-import { preloadApi } from "../preloadApi.ts"
+import { preloadApi } from "../preload.ts"
 import { NavigationBarLeft } from "./NavigationBarLeft.tsx"
 import { NavigationBarRight } from "./NavigationBarRight.tsx"
 import { NavigationBarSubTabs } from "./NavigationBarSubTabs.tsx"

src/main_window/routes/NavigationBarLeft.tsx

@@ -1,4 +1,4 @@
-import { FCC } from "../../../shared/helpers/react.js"
+import { FCC } from "../../shared/utils/react.js"
 import "./NavigationBarLeft.scss"
 
 export const NavigationBarLeft: FCC = ({ children }) => (

src/main_window/routes/NavigationBarRight.tsx

@@ -1,4 +1,4 @@
-import { FCC } from "../../../shared/helpers/react.js"
+import { FCC } from "../../shared/utils/react.js"
 import "./NavigationBarRight.scss"
 
 export const NavigationBarRight: FCC = ({ children }) => (

src/main_window/routes/NavigationBarTab.tsx

@@ -1,6 +1,6 @@
 import { FC, useCallback } from "react"
-import { classList } from "../../../shared/helpers/classList.ts"
-import { Tab } from "../components/tab/Tab.tsx"
+import { Tab } from "../../shared/components/tab/Tab.tsx"
+import { classList } from "../../shared/utils/classList.ts"
 import { useAppDispatch, useAppSelector } from "../hooks/redux.ts"
 import { useTranslate } from "../hooks/translate.ts"
 import { DisplayRoute } from "../hooks/visibleTabs.ts"

src/main_window/routes/NavigationBarWrapper.tsx

@@ -1,4 +1,4 @@
-import { FCC } from "../../../shared/helpers/react.js"
+import { FCC } from "../../shared/utils/react.js"
 import "./NavigationBarWrapper.scss"
 
 export const NavigationBarWrapper: FCC = ({ children }) => (

src/main_window/routes/Root.scss

@@ -1,4 +1,4 @@
-@use "../../../shared/styles/index.scss";
+@use "../../shared/styles/index.scss";
 
 html,
 body,

src/main_window/routes/Root.tsx

@@ -0,0 +1,53 @@
+import { FC } from "react"
+import backgroundImg from "../../assets/images/background.svg"
+import { TitleBar } from "../../shared/components/titleBar/TitleBar.tsx"
+import { Theme } from "../../shared/schema/config.ts"
+import { classList } from "../../shared/utils/classList.ts"
+import { preloadApi } from "../preload.ts"
+import { NavigationBar } from "./NavigationBar.tsx"
+import "./Root.scss"
+import { Router } from "./Router.tsx"
+
+const handleMinimize = preloadApi.minimize
+const handleMaximize = preloadApi.maximize
+const handleRestore = preloadApi.restore
+const handleClose = preloadApi.close
+
+export const Root: FC = () => {
+  const theme = Theme.Dark
+  const areAnimationsEnabled = true
+  const language = "de-DE"
+
+  return (
+    <div
+      id="body"
+      className={classList(
+        `theme-${theme}`,
+        `platform-${preloadApi.platform}`,
+        { "show-animations": areAnimationsEnabled },
+      )}
+      lang={language}
+      >
+      <div className="background-image">
+        <img src={backgroundImg} alt="" />
+      </div>
+
+      {/* <AlertsContainer /> */}
+      <TitleBar
+        platform={preloadApi.platform}
+        windowEvents={preloadApi}
+        onMinimize={handleMinimize}
+        onMaximize={handleMaximize}
+        onRestore={handleRestore}
+        onClose={handleClose}
+        isMaximized={preloadApi.isMaximized}
+        isFocused={preloadApi.isFocused}
+        />
+
+      <div id="content">
+        <NavigationBar />
+        <Router />
+      </div>
+    </div>
+  )
+}

src/main_window/routes/Router.tsx

@@ -1,5 +1,5 @@
 import { FC } from "react"
-import { assertExhaustive } from "../../../shared/helpers/typeSafety.ts"
+import { assertExhaustive } from "../../shared/utils/typeSafety.ts"
 import { useAppSelector } from "../hooks/redux.ts"
 import { selectRoute } from "../slices/routeSlice.ts"
 

src/main_window/routes/about/LastChanges.tsx

@@ -1,6 +1,6 @@
 import { FC, useEffect, useState } from "react"
-import { Markdown } from "../../components/markdown/Markdown.tsx"
-import { preloadApi } from "../../preloadApi.ts"
+import { Markdown } from "../../../shared/components/markdown/Markdown.tsx"
+import { preloadApi } from "../../preload.ts"
 
 export const LastChanges: FC = () => {
   const [ text, setText ] = useState("...")

src/main_window/routes/about/ThirdPartyLicenses.tsx

@@ -1,5 +1,5 @@
 import { FC, useEffect, useState } from "react"
-import { preloadApi } from "../../preloadApi.ts"
+import { preloadApi } from "../../preload.ts"
 
 export const ThirdPartyLicenses: FC = () => {
   const [ version, setVersion ] = useState("0.0.0")

src/main_window/slices/databaseSlice.ts

@@ -1,7 +1,7 @@
 /* eslint-disable max-len */
 import { PayloadAction, createSlice } from "@reduxjs/toolkit"
 import { TypeId, TypeMap } from "optolith-database-schema/config/types"
-import { Database as RawDatabase } from "../../../database.ts"
+import { Database as RawDatabase } from "../../database/index.ts"
 
 export type DatabaseState = {
   [K in keyof TypeMap]: Record<TypeId<K>, TypeMap[K]>

src/main_window_preload/index.ts

@@ -1,7 +1,7 @@
 import { contextBridge, ipcRenderer } from "electron"
 import EventEmitter from "events"
 import { ValidResults } from "optolith-database-schema"
-import { TypedEventEmitterForEvent } from "../../shared/helpers/events.ts"
+import { TypedEventEmitterForEvent } from "../shared/utils/events.ts"
 
 export type PreloadAPI = {
   platform: NodeJS.Platform

src/renderers/main/components/titleBar/TitleBar.tsx

@@ -1,75 +0,0 @@
-import { FC, useCallback, useEffect, useState } from "react"
-import { preloadApi } from "../../preloadApi.ts"
-import "./TitleBar.scss"
-import { TitleBarButton } from "./TitleBarButton.tsx"
-import { TitleBarWrapper } from "./TitleBarWrapper.tsx"
-
-const useWindowState = (stateKey: "isMaximized" | "isFocused") => {
-  const [ state, setState ] = useState(false)
-
-  useEffect(() => {
-    const updateState = () => {
-      preloadApi[stateKey]()
-        .then(setState)
-        .catch(console.error)
-    }
-
-    updateState()
-  }, [ stateKey ])
-
-  const update = useCallback(() => {
-    preloadApi[stateKey]()
-      .then(setState)
-      .catch(console.error)
-  }, [ stateKey ])
-
-  return [ state, update ] as const
-}
-
-const handleMinimize = preloadApi.minimize
-const handleMaximize = preloadApi.maximize
-const handleRestore = preloadApi.restore
-const handleClose = preloadApi.close
-
-export const TitleBar: FC = () => {
-  const [ isMaximized, updateIsMaximized ] = useWindowState("isMaximized")
-  const [ isFocused, updateIsFocused ] = useWindowState("isFocused")
-
-  useEffect(
-    () => {
-      preloadApi.on("maximize", updateIsMaximized)
-      preloadApi.on("unmaximize", updateIsMaximized)
-      preloadApi.on("blur", updateIsFocused)
-      preloadApi.on("focus", updateIsFocused)
-
-      return () => {
-        preloadApi.removeListener("maximize", updateIsMaximized)
-        preloadApi.removeListener("unmaximize", updateIsMaximized)
-        preloadApi.removeListener("blur", updateIsFocused)
-        preloadApi.removeListener("focus", updateIsFocused)
-      }
-    },
-    [ updateIsFocused, updateIsMaximized ]
-  )
-
-  if (preloadApi.platform === "darwin") {
-    return (
-      <TitleBarWrapper isFocused={isFocused}>
-        <div className="macos-hover-area" />
-      </TitleBarWrapper>
-    )
-  }
-
-  return (
-    <TitleBarWrapper isFocused={isFocused}>
-      <TitleBarButton icon="&#xE903;" onClick={handleMinimize} className="minimize" />
-      {isMaximized
-        ? null
-        : <TitleBarButton icon="&#xE901;" onClick={handleMaximize} className="maximize" />}
-      {isMaximized
-        ? <TitleBarButton icon="&#xE902;" onClick={handleRestore} className="restore" />
-        : null}
-      <TitleBarButton icon="&#xE900;" onClick={handleClose} className="close" />
-    </TitleBarWrapper>
-  )
-}

src/renderers/main/routes/Root.tsx

@@ -1,39 +0,0 @@
-import { FC } from "react"
-import backgroundImg from "../../../assets/images/background.svg"
-import { classList } from "../../../shared/helpers/classList.ts"
-import { Theme } from "../../../shared/schema/config.ts"
-import { TitleBar } from "../components/titleBar/TitleBar.tsx"
-import { preloadApi } from "../preloadApi.ts"
-import { NavigationBar } from "./NavigationBar.tsx"
-import "./Root.scss"
-import { Router } from "./Router.tsx"
-
-export const Root: FC = () => {
-  const theme = Theme.Dark
-  const areAnimationsEnabled = true
-  const language = "de-DE"
-
-  return (
-    <div
-      id="body"
-      className={classList(
-        `theme-${theme}`,
-        `platform-${preloadApi.platform}`,
-        { "show-animations": areAnimationsEnabled },
-      )}
-      lang={language}
-      >
-      <div className="background-image">
-        <img src={backgroundImg} alt="" />
-      </div>
-
-      {/* <AlertsContainer /> */}
-      <TitleBar />
-
-      <div id="content">
-        <NavigationBar />
-        <Router />
-      </div>
-    </div>
-  )
-}

src/shared/components/button/Button.tsx

@@ -1,5 +1,5 @@
-import { classList } from "../../../../shared/helpers/classList.ts"
-import { FCC } from "../../../../shared/helpers/react.js"
+import { classList } from "../../utils/classList.ts"
+import { FCC } from "../../utils/react.js"
 import "./Button.scss"
 
 interface Props {

src/shared/components/icon/Icon.tsx

@@ -1,5 +1,5 @@
-import { classList } from "../../../../shared/helpers/classList.ts"
-import { FCC } from "../../../../shared/helpers/react.js"
+import { classList } from "../../utils/classList.ts"
+import { FCC } from "../../utils/react.js"
 
 interface Props {
   className?: string

src/shared/components/markdown/Markdown.tsx

@@ -4,7 +4,7 @@ import ReactMarkdown from "react-markdown"
 import rehypeRaw from "rehype-raw"
 import Ph from "remark-breaks"
 import remarkGfm from "remark-gfm"
-import { classList } from "../../../../shared/helpers/classList.ts"
+import { classList } from "../../utils/classList.ts"
 
 type Props = {
   className?: string

src/shared/components/tab/Tab.tsx

@@ -1,6 +1,6 @@
-import { classList } from "../../../../shared/helpers/classList.ts"
-import { FCC } from "../../../../shared/helpers/react.js"
-import { isNonEmptyString } from "../../../../shared/helpers/string.ts"
+import { classList } from "../../utils/classList.ts"
+import { FCC } from "../../utils/react.js"
+import { isNonEmptyString } from "../../utils/string.ts"
 
 export interface TabBaseProps {
   className?: string

src/shared/components/titleBar/TitleBar.tsx

@@ -0,0 +1,96 @@
+import { FC, useCallback, useEffect, useState } from "react"
+import { TypedEventEmitterForEvent } from "../../utils/events.ts"
+import "./TitleBar.scss"
+import { TitleBarButton } from "./TitleBarButton.tsx"
+import { TitleBarWrapper } from "./TitleBarWrapper.tsx"
+
+const useWindowState = (getWindowState: () => Promise<boolean>) => {
+  const [ state, setState ] = useState(false)
+
+  useEffect(() => {
+    const updateState = () => {
+      getWindowState()
+        .then(setState)
+        .catch(console.error)
+    }
+
+    updateState()
+  }, [ getWindowState ])
+
+  const update = useCallback(() => {
+    getWindowState()
+      .then(setState)
+      .catch(console.error)
+  }, [ getWindowState ])
+
+  return [ state, update ] as const
+}
+
+type Props = {
+  platform: NodeJS.Platform
+  windowEvents:
+    & TypedEventEmitterForEvent<"maximize", []>
+    & TypedEventEmitterForEvent<"unmaximize", []>
+    & TypedEventEmitterForEvent<"blur", []>
+    & TypedEventEmitterForEvent<"focus", []>
+  onMinimize: () => void
+  onMaximize: () => void
+  onRestore: () => void
+  onClose: () => void
+  isMaximized: () => Promise<boolean>
+  isFocused: () => Promise<boolean>
+}
+
+export const TitleBar: FC<Props> = props => {
+  const {
+    platform,
+    windowEvents,
+    onMinimize,
+    onMaximize,
+    onRestore,
+    onClose,
+    isMaximized: getIsMaximized,
+    isFocused: getIsFocused,
+  } = props
+
+  const [ isMaximized, updateIsMaximized ] = useWindowState(getIsMaximized)
+  const [ isFocused, updateIsFocused ] = useWindowState(getIsFocused)
+
+  useEffect(
+    () => {
+      windowEvents.on("maximize", updateIsMaximized)
+      windowEvents.on("unmaximize", updateIsMaximized)
+      windowEvents.on("blur", updateIsFocused)
+      windowEvents.on("focus", updateIsFocused)
+
+      return () => {
+        windowEvents.removeListener("maximize", updateIsMaximized)
+        windowEvents.removeListener("unmaximize", updateIsMaximized)
+        windowEvents.removeListener("blur", updateIsFocused)
+        windowEvents.removeListener("focus", updateIsFocused)
+      }
+    },
+    [ updateIsFocused, updateIsMaximized, windowEvents ]
+  )
+
+  if (platform === "darwin") {
+    return (
+      <TitleBarWrapper isFocused={isFocused}>
+        <div className="macos-hover-area" />
+      </TitleBarWrapper>
+    )
+  }
+
+  return (
+    <TitleBarWrapper isFocused={isFocused}>
+      <TitleBarButton icon="&#xE903;" onClick={onMinimize} className="minimize" />
+      {isMaximized
+        ? null
+        : <TitleBarButton icon="&#xE901;" onClick={onMaximize} className="maximize" />}
+      {isMaximized
+        ? <TitleBarButton icon="&#xE902;" onClick={onRestore} className="restore" />
+        : null}
+      <TitleBarButton icon="&#xE900;" onClick={onClose} className="close" />
+    </TitleBarWrapper>
+  )
+}

src/shared/components/titleBar/TitleBarButton.tsx

@@ -1,5 +1,5 @@
 import * as React from "react"
-import { classList } from "../../../../shared/helpers/classList.ts"
+import { classList } from "../../utils/classList.ts"
 
 type Props = {
   className?: string

src/shared/components/titleBar/TitleBarWrapper.tsx

@@ -1,5 +1,5 @@
-import { classList } from "../../../../shared/helpers/classList.ts"
-import { FCC } from "../../../../shared/helpers/react.js"
+import { classList } from "../../utils/classList.ts"
+import { FCC } from "../../utils/react.js"
 
 type Props = {
   isFocused: boolean

src/updater_window/index.tsx

@@ -1,6 +1,6 @@
 import type { UpdateInfo } from "electron-updater"
 import { createRoot } from "react-dom/client"
-import { preloadApi } from "./preloadApi.ts"
+import { preloadApi } from "./preload.ts"
 import { Root } from "./root.tsx"
 
 const domNode = document.getElementById("root")!

src/updater_window/preload.ts

@@ -1,4 +1,4 @@
-import { PreloadAPI } from "./preload.ts"
+import { PreloadAPI } from "../updater_window_preload/index.ts"
 
 type EnhancedWindow = Window & typeof globalThis & { optolith: PreloadAPI }
 

src/updater_window_preload/index.ts

@@ -1,7 +1,7 @@
 import { contextBridge, ipcRenderer } from "electron"
 import { UpdateInfo } from "electron-updater"
 import EventEmitter from "events"
-import { TypedEventEmitterForEvent } from "../../shared/helpers/events.ts"
+import { TypedEventEmitterForEvent } from "../shared/utils/events.ts"
 
 export type PreloadAPI = {
 

tsconfig.json

@@ -38,7 +38,7 @@
     "src/Data/**/*",
     "src/Debug/**/*",
     "src/System/**/*",
-    "src/database/Compatibility/**/*",
-    "src/database/migration/**/*"
+    "src/database/contents/Compatibility/**/*",
+    "src/database/contents/migration/**/*"
   ]
 }

webpack.config.js

@@ -13,7 +13,7 @@ export default [
     name: "main",
     mode,
     entry: {
-      main: "./src/main.ts"
+      main: "./src/main/index.ts"
     },
     target: "electron-main",
     optimization: getOptimization("main"),
@@ -35,7 +35,7 @@ export default [
     name: "database",
     mode,
     entry: {
-      database: "./src/database.ts"
+      database: "./src/database/index.ts"
     },
     target: "electron-main",
     optimization: getOptimization("database"),
@@ -57,7 +57,7 @@ export default [
     name: "renderer_main",
     mode,
     entry: {
-      renderer_main: "./src/renderers/main/entry.tsx",
+      renderer_main: "./src/main_window/index.tsx",
     },
     target: "electron-renderer",
     module: {
@@ -80,7 +80,7 @@ export default [
     name: "renderer_main_preload",
     mode,
     entry: {
-      renderer_main_preload: "./src/renderers/main/preload.ts"
+      renderer_main_preload: "./src/main_window_preload/index.ts"
     },
     target: "electron-preload",
     module: {
@@ -98,7 +98,7 @@ export default [
     name: "renderer_updater",
     mode,
     entry: {
-      renderer_updater: "./src/renderers/updater/entry.tsx"
+      renderer_updater: "./src/updater_window/index.tsx"
     },
     target: "electron-renderer",
     module: {
@@ -121,7 +121,7 @@ export default [
     name: "renderer_updater_preload",
     mode,
     entry: {
-      renderer_updater_preload: "./src/renderers/updater/preload.ts"
+      renderer_updater_preload: "./src/updater_window_preload/index.ts"
     },
     target: "electron-preload",
     module: {

webpack.plugins.js

@@ -10,7 +10,7 @@ import { isDevelopment } from "./webpack.env.js"
 export const rendererPlugins = [
   new HtmlWebpackPlugin({
     filename: "[name].html",
-    template: "./src/renderers/template.html"
+    template: "./src/template.html"
   }),
   new MiniCssExtractPlugin({
     filename: `assets/css/${isDevelopment ? '[name].css' : '[name].[hash].css'}`,