add stores directory and naming

src/App.js

@@ -1,7 +1,7 @@
 import React, { useEffect } from 'react';
 import { Route, Routes, useLocation } from 'react-router-dom';
 import { Helmet } from 'react-helmet-async';
-import useAppStore from './useAppStore';
+import useGeneralStore from './hooks/stores/useGeneralStore';
 import Home from './components/views/Home';
 import Board from './components/views/Board';
 import Thread from './components/views/Thread';
@@ -56,7 +56,7 @@ export default function App() {
     setSelectedStyle,
     setShowPostForm,
     setShowPostFormLink,
-  } = useAppStore(state => state);
+  } = useGeneralStore(state => state);
 
   const location = useLocation();
   const isHomeRoute = location.pathname === "/";

src/components/CaptchaModal.jsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useState, useRef } from 'react';
-import useAppStore from '../useAppStore';
+import useGeneralStore from '../hooks/stores/useGeneralStore';
 import Modal from 'react-modal';
 import styled from 'styled-components';
 import Draggable from 'react-draggable';
@@ -251,7 +251,7 @@ const CaptchaModal = ({ isOpen, closeModal }) => {
     pendingComment,
     selectedStyle,
     setCaptchaResponse,
-   } = useAppStore(state => state);
+   } = useGeneralStore(state => state);
 
   const [imageSources, setImageSources] = useState([]);
   const [currentChallengeIndex, setCurrentChallengeIndex] = useState(0);

src/components/CatalogLoader.jsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import ContentLoader from 'react-content-loader';
-import useAppStore from '../useAppStore';
+import useGeneralStore from '../hooks/stores/useGeneralStore';
 
 
 const SingleRectLoader = () => {
-  const selectedStyle = useAppStore((state) => state.selectedStyle);
+  const selectedStyle = useGeneralStore((state) => state.selectedStyle);
   const backgroundColor = selectedStyle === 'Tomorrow' ? '#333' : '#f3f3f3';
   const foregroundColor = selectedStyle === 'Tomorrow' ? '#555' : '#ecebeb';
   

src/components/PostLoader.jsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import ContentLoader from 'react-content-loader';
-import useAppStore from '../useAppStore';
+import useGeneralStore from '../hooks/stores/useGeneralStore';
 
 const SinglePostLoader = () => {
-  const selectedStyle = useAppStore((state) => state.selectedStyle);
+  const selectedStyle = useGeneralStore((state) => state.selectedStyle);
   const backgroundColor = selectedStyle === 'Tomorrow' ? '#333' : '#f3f3f3';
   const foregroundColor = selectedStyle === 'Tomorrow' ? '#555' : '#ecebeb';
 

src/components/ReplyModal.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import useAppStore from '../useAppStore';
+import useGeneralStore from '../hooks/stores/useGeneralStore';
 import Modal from 'react-modal';
 import styled from 'styled-components';
 import Draggable from 'react-draggable';
@@ -248,7 +248,7 @@ const StyledModal = styled(Modal)`
 
 
 const ReplyModal = ({ isOpen, closeModal }) => {
-  const selectedStyle = useAppStore(state => state.selectedStyle);
+  const selectedStyle = useGeneralStore(state => state.selectedStyle);
 
   const handleCloseModal = () => {
     closeModal();

src/components/SettingsModal.jsx

@@ -2,7 +2,7 @@ import React from "react";
 import { Link, useLocation, useNavigate } from "react-router-dom";
 import Modal from "react-modal";
 import styled from "styled-components";
-import useAppStore from "../useAppStore";
+import useGeneralStore from "../hooks/stores/useGeneralStore";
 
 const StyledModal = styled(Modal)`
   .panel {
@@ -140,7 +140,7 @@ const customOverlayStyles = {
 };
 
 const SettingsModal = ({ isOpen, closeModal }) => {
-  const selectedStyle = useAppStore(state => state.selectedStyle);
+  const selectedStyle = useGeneralStore(state => state.selectedStyle);
   const navigate = useNavigate();
   const location = useLocation();
 

src/components/views/Board.jsx

@@ -4,7 +4,7 @@ import InfiniteScroll from 'react-infinite-scroller';
 import { Tooltip } from 'react-tooltip';
 import { useFeed, usePublishComment } from '@plebbit/plebbit-react-hooks';
 import { debounce } from 'lodash';
-import useAppStore from '../../useAppStore';
+import useGeneralStore from '../../hooks/stores/useGeneralStore';
 import { Container, NavBar, Header, Break, PostFormLink, PostFormTable, PostForm, TopBar, BoardForm } from './styles/Board.styled';
 import CaptchaModal from '../CaptchaModal';
 import ImageBanner from '../ImageBanner';
@@ -34,7 +34,7 @@ const Board = () => {
     selectedTitle, setSelectedTitle,
     showPostForm,
     showPostFormLink
-  } = useAppStore(state => state);
+  } = useGeneralStore(state => state);
 
   const nameRef = useRef();
   const subjectRef = useRef();

src/components/views/Catalog.jsx

@@ -3,7 +3,7 @@ import { Link, useNavigate, useParams } from 'react-router-dom';
 import InfiniteScroll from 'react-infinite-scroller';
 import { useFeed, usePublishComment } from '@plebbit/plebbit-react-hooks';
 import { debounce } from 'lodash';
-import useAppStore from '../../useAppStore';
+import useGeneralStore from '../../hooks/stores/useGeneralStore';
 import { Container, NavBar, Header, Break, PostForm, PostFormLink, PostFormTable } from './styles/Board.styled';
 import { Threads } from './styles/Catalog.styled';
 import { TopBar } from './styles/Thread.styled';
@@ -30,7 +30,7 @@ const Catalog = () => {
     selectedTitle, setSelectedTitle,
     showPostForm,
     showPostFormLink
-  } = useAppStore(state => state);
+  } = useGeneralStore(state => state);
 
   const nameRef = useRef();
   const subjectRef = useRef();

src/components/views/Home.jsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useRef } from 'react';
-import useAppStore from '../../useAppStore';
+import useGeneralStore from '../../hooks/stores/useGeneralStore';
 import { Link, useNavigate } from 'react-router-dom';
 import { Container, Header, Logo, Page, Search, About, AboutTitle, AboutContent, Boards, BoardsTitle, BoardsContent, Footer } from './styles/Home.styled';
 
@@ -11,7 +11,7 @@ const Home = () => {
     setSelectedAddress, 
     setSelectedStyle,
     setSelectedTitle
-  } = useAppStore(state => state);
+  } = useGeneralStore(state => state);
 
   const inputRef = useRef(null);
   const navigate = useNavigate();

src/components/views/NotFound.jsx

@@ -1,12 +1,12 @@
 import React, { useEffect }  from 'react';
-import useAppStore from '../../useAppStore';
+import useGeneralStore from '../../hooks/stores/useGeneralStore';
 import { Link } from "react-router-dom";
 import { Container, Header, Logo, Page, Boards, BoardsTitle } from './styles/Home.styled';
 
 
 const NotFound = ({ setBodyStyle }) => {
 
-  const { setSelectedStyle } = useAppStore(state => state);
+  const { setSelectedStyle } = useGeneralStore(state => state);
 
   useEffect(() => {
     setBodyStyle({

src/components/views/Thread.jsx

@@ -3,7 +3,7 @@ import { Link, useNavigate, useParams } from 'react-router-dom';
 import { Tooltip } from 'react-tooltip';
 import { useComment, usePublishComment } from '@plebbit/plebbit-react-hooks';
 import { debounce } from 'lodash';
-import useAppStore from '../../useAppStore';
+import useGeneralStore from '../../hooks/stores/useGeneralStore';
 import { Container, NavBar, Header, Break, PostForm, PostFormTable, BoardForm } from './styles/Board.styled';
 import { ReplyFormLink, TopBar, BottomBar } from './styles/Thread.styled';
 import CaptchaModal from '../CaptchaModal';
@@ -32,7 +32,7 @@ const Thread = () => {
     selectedTitle, setSelectedTitle,
     showPostForm,
     showPostFormLink
-  } = useAppStore(state => state);
+  } = useGeneralStore(state => state);
 
   const nameRef = useRef();
   const commentRef = useRef();

src/hooks/stores/useGeneralStore.js

@@ -1,6 +1,6 @@
 import { create } from 'zustand';
 
-const useAppStore = create((set) => ({
+const useGeneralStore = create((set) => ({
   bodyStyle: JSON.parse(localStorage.getItem('bodyStyle')) || {
     background: '#ffe url(/assets/fade.png) top repeat-x',
     color: 'maroon',
@@ -52,4 +52,4 @@ const useAppStore = create((set) => ({
 
 }));
 
-export default useAppStore;
+export default useGeneralStore;

src/hooks/useClickForm.js

@@ -1,10 +1,10 @@
 import { useNavigate, useLocation } from "react-router-dom";
-import useAppStore from "../useAppStore";
+import useGeneralStore from "./stores/useGeneralStore";
 
 const useClickForm = () => {
   const navigate = useNavigate();
   const location = useLocation();
-  const { setShowPostForm, setShowPostFormLink } = useAppStore.getState();
+  const { setShowPostForm, setShowPostFormLink } = useGeneralStore.getState();
 
   const handleClickForm = () => {
     setShowPostForm(true);

src/utils/handleStyleChange.js

@@ -1,9 +1,9 @@
-import useAppStore from "../useAppStore";
+import useGeneralStore from "../hooks/stores/useGeneralStore";
 
 const handleStyleChange = (event) => {
   const { 
     setBodyStyle, setSelectedStyle
-   } = useAppStore.getState();
+   } = useGeneralStore.getState();
 
   switch (event.target.value) {
     case "Yotsuba":