remove some store imports (#996)

web/App.tsx

@@ -3,6 +3,7 @@ import './tailwind.css'
 import './app.css'
 import './dots.css'
 import '@melloware/coloris/dist/coloris.css'
+import './store'
 import { Component, createMemo, Show, lazy, onMount, Switch, Match } from 'solid-js'
 import { Route, Router, useLocation } from '@solidjs/router'
 import NavBar from './shared/NavBar'

web/pages/Character/port.ts

@@ -28,7 +28,6 @@ export async function importCharacterFile(file: FileInputResult) {
     const ext = file.file.name.split('.').slice(-1)[0]
     if (IMAGE_FORMATS[ext]) {
       const char = await processImage(file)
-      console.log(char)
       return { char, image: file.file }
     }
 

web/pages/Chat/helpers.tsx

@@ -1,9 +1,8 @@
 import { ChevronLeft, ChevronRight } from 'lucide-solid'
-import { Component, JSX, Show } from 'solid-js'
+import { Component, Show } from 'solid-js'
 import Button from '/web/shared/Button'
 import { chatStore, msgStore } from '/web/store'
 import { AppSchema, UI } from '/common/types'
-import { getRootRgb } from '/web/shared/colors'
 
 export const SwipeMessage: Component<{
   chatId: string
@@ -76,15 +75,6 @@ export function getChatWidth(
   }
 }
 
-export function getHeaderBg(mode: UI.UISettings['mode']) {
-  mode
-  const rgb = getRootRgb('bg-900')
-  const styles: JSX.CSSProperties = {
-    background: rgb ? `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.7)` : 'bg-900',
-  }
-  return styles
-}
-
 export function emptyMsg(opts: {
   id?: string
   charId?: string

web/pages/Saga/Detail.tsx

@@ -43,8 +43,7 @@ import { toastStore, userStore } from '/web/store'
 import { Saga } from '/common/types'
 import { getRgbaFromVar } from '/web/shared/colors'
 import { trimSentence } from '/common/util'
-import { sticky } from '/web/shared/util'
-import { getHeaderBg } from '../Chat/helpers'
+import { getHeaderBg, sticky } from '/web/shared/util'
 
 export const SagaDetail: Component = (props) => {
   const user = userStore()

web/shared/hooks.ts

@@ -1,6 +1,5 @@
 import { Accessor, JSX, Signal, createEffect, createMemo, onCleanup, onMount } from 'solid-js'
 import { createSignal, createRenderEffect } from 'solid-js'
-import { characterStore, chatStore, presetStore, settingStore, userStore } from '../store'
 import { RootModal, rootModalStore } from '../store/root-modal'
 import { useLocation, useSearchParams } from '@solidjs/router'
 import { createImageCache } from '../store/images'
@@ -10,6 +9,7 @@ import { getAssetUrl } from './util'
 import { AutoPreset, getPresetOptions } from './adapter'
 import { ADAPTER_LABELS } from '/common/adapters'
 import { forms } from '../emitter'
+import { getStore } from '../store/create'
 
 export function getPlatform() {
   return window.innerWidth > 1024 ? 'xl' : window.innerWidth > 720 ? 'lg' : 'sm'
@@ -27,8 +27,8 @@ export function useFormField(field: string, init?: string) {
 }
 
 export function usePresetOptions() {
-  const presets = presetStore((s) => s.presets)
-  const user = userStore()
+  const presets = getStore('presets')((s) => s.presets)
+  const user = getStore('user')()
 
   const options = createMemo(() => {
     const opts = getPresetOptions(presets, { builtin: true }).filter((pre) => pre.value !== 'chat')
@@ -112,10 +112,10 @@ export function useCharacterBg(src: 'layout' | 'page') {
   const isMobile = useMobileDetect()
   const isChat = isChatPage()
 
-  const state = userStore()
-  const cfg = settingStore()
-  const chat = chatStore((s) => ({ active: s.active }))
-  const chars = characterStore((s) => ({ chatId: s.activeChatId, chars: s.chatChars }))
+  const state = getStore('user')()
+  const cfg = getStore('settings')()
+  const chat = getStore('chat')((s) => ({ active: s.active }))
+  const chars = getStore('character')((s) => ({ chatId: s.activeChatId, chars: s.chatChars }))
 
   const bg = createMemo(() => {
     if (src === 'page') return {}
@@ -380,7 +380,7 @@ export const usePaneManager = () => {
 }
 
 export function useBgStyle(props: { hex: string; opacity?: number; blur: boolean }) {
-  const user = userStore()
+  const user = getStore('user')()
 
   const bgStyle = createMemo(() => {
     // This causes this memoized value to re-evaluated as it becomes a subscriber of ui.mode

web/shared/util.ts

@@ -3,10 +3,12 @@ import * as lf from 'localforage'
 import { UnwrapBody, Validator, assertValid } from '/common/valid'
 import { AIAdapter, AI_ADAPTERS, PresetAISettings, ThirdPartyFormat } from '../../common/adapters'
 import type { Option } from './Select'
-import { createEffect, onCleanup } from 'solid-js'
-import { UserState, settingStore, userStore } from '../store'
-import { AppSchema } from '/common/types'
+import { createEffect, JSX, onCleanup } from 'solid-js'
+import type { UserState } from '../store'
+import { AppSchema, UI } from '/common/types'
 import { deepClone } from '/common/util'
+import { getRootRgb } from './colors'
+import { getStore } from '../store/create'
 
 const [css, hooks] = createHooks(recommended)
 
@@ -39,6 +41,15 @@ export function downloadJson(content: string | object, filename: string = 'agnai
   URL.revokeObjectURL(anchor.href)
 }
 
+export function getHeaderBg(mode: UI.UISettings['mode']) {
+  mode
+  const rgb = getRootRgb('bg-900')
+  const styles: JSX.CSSProperties = {
+    background: rgb ? `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.7)` : 'bg-900',
+  }
+  return styles
+}
+
 export function getMaxChatWidth(chatWidth: UserState['ui']['chatWidth']) {
   switch (chatWidth) {
     case 'xl':
@@ -510,7 +521,7 @@ export function serviceHasSetting(
 
 export function getAISettingServices(prop?: keyof PresetAISettings) {
   if (!prop) return
-  const cfg = settingStore((s) => s.config)
+  const cfg = getStore('settings')((s) => s.config)
   const base = adapterSettings[prop]
   const names: Array<AIAdapter | ThirdPartyFormat> = []
   for (const reg of cfg.registered) {
@@ -633,8 +644,8 @@ export function asyncFrame() {
 }
 
 export function getUsableServices() {
-  const { user } = userStore.getState()
-  const { config } = settingStore.getState()
+  const { user } = getStore('user').getState()
+  const { config } = getStore('settings').getState()
 
   const services: AIAdapter[] = []