Remove unused components and models for improved maintainability

- Deleted redundant components (`AddActionButton`, `AlertBox`, `AlertStack`, `BackButton`, `CancelButton`, and `CollapsableArea`) and related files.
- Removed unused models (`Book`, `BookSerie`, `BookTables`, `Character`, and `Chapter`) to reduce codebase clutter.
- Updated project structure and references to reflect these removals.

components/quillsense/QuillSenseComponent.tsx

@@ -1,105 +1,89 @@
-import {useContext, useState} from 'react';
-import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
-import {
-    faBars,
-    faComments,
-    faExchangeAlt,
-    faLanguage,
-    faLightbulb,
-    faSpellCheck,
-    IconDefinition
-} from '@fortawesome/free-solid-svg-icons';
-import QuillSense, {QSView,} from "@/lib/models/QuillSense";
+import React, {useContext, useState} from 'react';
+import {ArrowLeftRight, Languages, Lightbulb, LucideIcon, Menu, MessageSquare, SpellCheck} from 'lucide-react';
+import IconContainer from '@/components/ui/IconContainer';
+import IconButton from '@/components/ui/IconButton';
+import {QSView} from "@/lib/types/quillsense";
+import {getSubLevel, isBringYourKeys, isOpenAIEnabled} from "@/lib/utils/quillsense";
 
 import QuillList from "@/components/quillsense/modes/QuillList";
 import QuillConversation from "./modes/QuillConversation";
 import Dictionary from "@/components/quillsense/modes/Dictionary";
 import Synonyms from "@/components/quillsense/modes/Synonyms";
 import InspireMe from "@/components/quillsense/modes/InspireMe";
-import {SessionContext} from "@/context/SessionContext";
-import {useTranslations} from "next-intl";
+import {SessionContext, SessionContextProps} from "@/context/SessionContext";
+import {useTranslations} from '@/lib/i18n';
 import Conjugator from "@/components/quillsense/modes/Conjugator";
 
 interface QSOption {
     view: QSView;
-    icon: IconDefinition;
+    icon: LucideIcon;
 }
 
-export default function QuillSenseComponent() {
+export default function QuillSenseComponent(): React.JSX.Element {
     const [view, setView] = useState<QSView>('chat');
     const t = useTranslations();
     const [selectedConversation, setSelectedConversation] = useState<string>('');
-    const {session} = useContext(SessionContext);
-    
-    const isBringYourKeys: boolean = QuillSense.isBringYourKeys(session);
-    const subLevel: number = QuillSense.getSubLevel(session)
-    
-    const isGPTEnabled: boolean = QuillSense.isOpenAIEnabled(session);
-    const isSubTierTwo: boolean = QuillSense.getSubLevel(session) >= 1;
+    const {session}: SessionContextProps = useContext<SessionContextProps>(SessionContext);
+
+    const isBYOK: boolean = isBringYourKeys(session);
+    const subLevel: number = getSubLevel(session)
+
+    const isGPTEnabled: boolean = isOpenAIEnabled(session);
+    const isSubTierTwo: boolean = getSubLevel(session) >= 1;
     const hasAccess: boolean = isGPTEnabled || isSubTierTwo;
-    
+
     const qsOptions: QSOption[] = [
-        {view: 'dictionary', icon: faSpellCheck},
-        {view: 'conjugator', icon: faLanguage},
-        {view: 'synonyms', icon: faExchangeAlt},
-        {view: 'inspiration', icon: faLightbulb},
-        {view: 'chat', icon: faComments},
+        {view: 'dictionary', icon: SpellCheck},
+        {view: 'conjugator', icon: Languages},
+        {view: 'synonyms', icon: ArrowLeftRight},
+        {view: 'inspiration', icon: Lightbulb},
+        {view: 'chat', icon: MessageSquare},
     ];
     
     function handleSetView(view: QSView): void {
         setView(view);
     }
     
-    function handleSelectConversation(conversationId: string) {
+    function handleSelectConversation(conversationId: string): void {
         setSelectedConversation(conversationId);
         setView('chat');
     }
     
     return (
-        <div className="flex flex-col h-full w-full bg-secondary/20 backdrop-blur-sm overflow-hidden">
+        <div className="flex flex-col h-full w-full bg-darkest-background overflow-hidden">
             <div
-                className="px-3 py-3 flex items-center justify-between border-b border-secondary/50 bg-secondary/30 shadow-sm">
+                className="px-3 py-3 flex items-center justify-between bg-darkest-background">
                 <div className="flex items-center">
-                    <button
-                        onClick={() => handleSetView(view === 'chat' ? 'list' : 'chat')}
-                        className="group text-text-primary mr-3 hover:text-primary p-2 rounded-lg hover:bg-secondary/50 transition-all hover:scale-110"
-                        aria-label={t('quillSense.toggleList')}
-                    >
-                        <FontAwesomeIcon icon={faBars}
-                                         className={'w-5 h-5 transition-transform group-hover:scale-110'}/>
-                    </button>
+                    <div className="mr-3">
+                        <IconButton icon={Menu} variant="ghost" shape="square"
+                                    onClick={(): void => handleSetView(view === 'chat' ? 'list' : 'chat')}
+                                    tooltip={t('quillSense.toggleList')}/>
+                    </div>
                 </div>
                 <div className="flex items-center gap-1">
                     {
-                        qsOptions.map((option: QSOption) => (
-                            <button
+                        qsOptions.map((option: QSOption): React.JSX.Element => (
+                            <IconButton
                                 key={option.view}
-                                disabled={!isBringYourKeys && subLevel < 2 && option.view !== 'chat'}
+                                icon={option.icon}
+                                variant={view === option.view ? 'primary' : 'ghost'}
+                                shape="square"
+                                disabled={!isBYOK && subLevel < 2 && option.view !== 'chat'}
                                 onClick={(): void => handleSetView(option.view)}
-                                className={`group p-2.5 rounded-lg transition-all duration-200 ${
-                                    view === option.view
-                                        ? 'bg-primary text-white shadow-md shadow-primary/30 scale-105'
-                                        : !isBringYourKeys && subLevel < 2 && option.view !== 'chat'
-                                            ? 'text-muted/40 cursor-not-allowed'
-                                            : 'text-text-primary hover:text-primary hover:bg-secondary/50 hover:scale-110'
-                                }`}
-                                aria-label={t(`quillSense.options.${option.view}`)}
-                            >
-                                <FontAwesomeIcon icon={option.icon}
-                                                 className={'w-4 h-4 transition-transform group-hover:scale-110'}/>
-                            </button>
+                                tooltip={t(`quillSense.options.${option.view}`)}
+                            />
                         ))
                     }
                 </div>
             </div>
             {
-                isBringYourKeys || subLevel >= 1 ? (
+                isBYOK || subLevel >= 1 ? (
                     <>
                         {view === 'list' ? (
                             <QuillList handleSelectConversation={handleSelectConversation}/>
                         ) : view === 'chat' ? (
                             <QuillConversation
-                                disabled={!isBringYourKeys && subLevel < 2}
+                                disabled={!isBYOK && subLevel < 2}
                                 selectedConversation={selectedConversation}
                                 setSelectConversation={setSelectedConversation}
                             />
@@ -117,10 +101,7 @@ export default function QuillSenseComponent() {
                     </>
                 ) : (
                     <div className="flex flex-col items-center justify-center h-full text-text-primary p-8">
-                        <div
-                            className="w-20 h-20 rounded-2xl bg-primary/10 flex items-center justify-center mb-6 shadow-md">
-                            <FontAwesomeIcon icon={faLightbulb} className="w-10 h-10 text-primary"/>
-                        </div>
+                        <IconContainer icon={Lightbulb} size="lg" shape="rounded"/>
                         <p className="text-xl font-['ADLaM_Display'] text-center mb-3">{t('quillSense.needSubscription')}</p>
                         <p className="text-lg text-muted text-center max-w-md leading-relaxed">{t('quillSense.subscriptionDescription')}</p>
                     </div>
@@ -128,4 +109,4 @@ export default function QuillSenseComponent() {
             }
         </div>
     );
-}
+}