refactor: migrate renderer state to zustand v0.19.0

Author: antiantidev

CHANGELOG.md

@@ -2,6 +2,33 @@
 
 All notable changes to this project are documented in this file.
 
+## [0.19.0] - 2026-03-24
+
+### Added
+
+- Zustand as renderer state management dependency.
+- Domain stores under `src/stores/*`:
+  - `coreStore`
+  - `uiStore`
+  - `logsStore`
+  - `accountsStore`
+  - `streamStore`
+  - `settingsUiStore`
+  - `liveSetupUiStore`
+  - `dashboardStore`
+  - `pulseUiStore`
+
+### Changed
+
+- Migrated renderer global state and orchestration from hook-local state to Zustand store facades.
+- Refactored lifecycle wiring (`bootstrap`, `event listeners`, `persistence`, `driver readiness`, `shell controls`) to use store-backed state flow.
+- Migrated remaining page-level UI states in Settings/LiveSetup/Dashboard/Pulse to Zustand.
+
+### Notes
+
+- IPC contract and main/preload runtime behavior remain unchanged.
+- Existing page props and route content contracts were kept compatible.
+
 ## [0.18.1] - 2026-03-24
 
 ### Fixed

README.md

@@ -5,7 +5,7 @@
   <p><strong>TikTok Live Stream Key Generator for OBS from Streamlabs</strong></p>
   <p><em>Windows desktop app for fetching RTMP URL and Stream Key for OBS.</em></p>
   <p>
-    <img src="https://img.shields.io/badge/Version-0.18.1-primary?style=for-the-badge&logo=electron" alt="Version" />
+    <img src="https://img.shields.io/badge/Version-0.19.0-primary?style=for-the-badge&logo=electron" alt="Version" />
     <img src="https://img.shields.io/badge/Platform-Windows-blue?style=for-the-badge&logo=windows" alt="Platform" />
     <img src="https://img.shields.io/badge/Framework-React_19-61DAFB?style=for-the-badge&logo=react" alt="Framework" />
     <img src="https://img.shields.io/badge/Database-SQLite_3-003B57?style=for-the-badge&logo=sqlite" alt="Database" />
@@ -166,17 +166,17 @@ GitHub Actions uses four workflows:
 
 Release tag rule:
 - Tag must match `package.json` version exactly, in the format `v<version>`.
-- Example: if version is `0.18.1`, release tag must be `v0.18.1`.
+- Example: if version is `0.19.0`, release tag must be `v0.19.0`.
 
 Typical release flow:
 ```bash
 # 1) bump version in package.json
 # 2) commit changes
 git add .
-git commit -m "release: v0.18.1"
+git commit -m "release: v0.19.0"
 
 # 3) create and push release tag
-git tag v0.18.1
+git tag v0.19.0
 git push origin main --tags
 ```
 

docs/ci-release.md

@@ -60,7 +60,7 @@ Publish provider:
 
 Tag must exactly match package version:
 
-- package version `0.18.0` -> tag `v0.18.0`
+- package version `0.19.0` -> tag `v0.19.0`
 
 Mismatch fails release workflow.
 
@@ -95,4 +95,3 @@ This improves triage and tracking for:
 - `scope:*`
 - `priority:*`
 - `status:*`
-

package.json

@@ -1,6 +1,6 @@
 {
   "name": "labsgen-tiktok",
-  "version": "0.18.1",
+  "version": "0.19.0",
   "description": "TikTok Live Stream Key Generator for OBS from Streamlabs",
   "packageManager": "pnpm@10.32.1",
   "engines": {
@@ -77,8 +77,7 @@
       "multiLanguageInstaller": false,
       "displayLanguageSelector": false,
       "warningsAsErrors": false
-    }
-    ,
+    },
     "publish": [
       {
         "provider": "github",
@@ -99,10 +98,15 @@
     "react-dom": "^19.2.4",
     "react-i18next": "^15.4.0",
     "selenium-webdriver": "^4.40.0",
-    "semver": "^7.6.0"
+    "semver": "^7.6.0",
+    "zustand": "^5.0.12"
   },
   "devDependencies": {
     "@electron/rebuild": "^4.0.3",
+    "@types/electron": "^1.6.12",
+    "@types/node": "^24.3.1",
+    "@types/react": "^19.1.13",
+    "@types/react-dom": "^19.1.9",
     "@vitejs/plugin-react": "^5.1.3",
     "@vitejs/plugin-react-swc": "^3.8.0",
     "autoprefixer": "^10.4.24",
@@ -113,10 +117,6 @@
     "postcss": "^8.5.6",
     "tailwindcss": "^3.4.19",
     "typescript": "^5.9.2",
-    "@types/node": "^24.3.1",
-    "@types/electron": "^1.6.12",
-    "@types/react": "^19.1.13",
-    "@types/react-dom": "^19.1.9",
     "vite": "^7.3.1"
   }
 }

pnpm-lock.yaml

@@ -1,5 +1,6 @@
-import { useEffect, useMemo, useState } from "react"
+import { useEffect, useMemo } from "react"
 import { useApiBridge } from "../useApiBridge"
+import { useDashboardStore } from "../../stores"
 
 type DashboardPerformanceState = {
   cpuPercent: number | null
@@ -16,13 +17,10 @@ type UseDashboardPerformanceResult = {
 
 export const useDashboardPerformance = (): UseDashboardPerformanceResult => {
   const api = useApiBridge()
-  const [performance, setPerformance] = useState<DashboardPerformanceState>({
-    cpuPercent: null,
-    memPercent: null,
-    memUsedMB: 0,
-    memTotalMB: 0
-  })
-  const [perfLoading, setPerfLoading] = useState(true)
+  const performance = useDashboardStore((state) => state.performance)
+  const setPerformance = useDashboardStore((state) => state.setPerformance)
+  const perfLoading = useDashboardStore((state) => state.perfLoading)
+  const setPerfLoading = useDashboardStore((state) => state.setPerfLoading)
 
   useEffect(() => {
     let isMounted = true
@@ -68,4 +66,3 @@ export const useDashboardPerformance = (): UseDashboardPerformanceResult => {
     memLabel
   }
 }
-

src/hooks/pages/useDashboardPerformance.ts

@@ -1,9 +1,10 @@
-import { useEffect, useRef, useState } from "react"
+import { useEffect, useRef } from "react"
 import type { MutableRefObject } from "react"
 import { useAnimation } from "framer-motion"
 import type { TFunction } from "i18next"
 import type { LiveSetupPageProps } from "../../app/types"
 import { useApiBridge } from "../useApiBridge"
+import { useLiveSetupUiStore } from "../../stores"
 
 type UseLiveSetupActionsDeps = Pick<
   LiveSetupPageProps,
@@ -34,8 +35,10 @@ export const useLiveSetupActions = ({
   gameCategory
 }: UseLiveSetupActionsDeps): UseLiveSetupActionsResult => {
   const api = useApiBridge()
-  const [isSyncing, setIsSyncing] = useState(false)
-  const [localCount, setLocalCount] = useState(0)
+  const isSyncing = useLiveSetupUiStore((state) => state.isSyncing)
+  const setIsSyncing = useLiveSetupUiStore((state) => state.setIsSyncing)
+  const localCount = useLiveSetupUiStore((state) => state.localCount)
+  const setLocalCount = useLiveSetupUiStore((state) => state.setLocalCount)
   const controls = useAnimation()
   const dropdownRef = useRef<HTMLDivElement | null>(null)
 

src/hooks/pages/useLiveSetupActions.ts

@@ -1,7 +1,7 @@
-import { useState } from "react"
 import type { TFunction } from "i18next"
 import type { SettingsPageProps } from "../../app/types"
 import { useApiBridge } from "../useApiBridge"
+import { useSettingsUiStore } from "../../stores"
 
 type UseSettingsActionsDeps = Pick<
   SettingsPageProps,
@@ -29,9 +29,12 @@ export const useSettingsActions = ({
   setSettings
 }: UseSettingsActionsDeps): UseSettingsActionsResult => {
   const api = useApiBridge()
-  const [checkingUpdate, setCheckingUpdate] = useState(false)
-  const [isInstallingDriver, setIsDriverInstalling] = useState(false)
-  const [isUpToDate, setIsUpToDate] = useState(false)
+  const checkingUpdate = useSettingsUiStore((state) => state.checkingUpdate)
+  const setCheckingUpdate = useSettingsUiStore((state) => state.setCheckingUpdate)
+  const isInstallingDriver = useSettingsUiStore((state) => state.isInstallingDriver)
+  const setIsDriverInstalling = useSettingsUiStore((state) => state.setIsInstallingDriver)
+  const isUpToDate = useSettingsUiStore((state) => state.isUpToDate)
+  const setIsUpToDate = useSettingsUiStore((state) => state.setIsUpToDate)
 
   const handleUpdateCheck = async () => {
     setCheckingUpdate(true)