feat/ai driven refactoring fail

package.json

@@ -36,6 +36,7 @@
     "gh-pages": "^6.3.0",
     "highlight.js": "^11.11.1",
     "html-react-parser": "^5.2.7",
+    "immer": "^10.2.0",
     "marked": "^16.4.0",
     "react": "^18.3.1",
     "react-color": "^2.19.3",

src/App.tsx

@@ -6,6 +6,7 @@ import type React from "react";
 import { useEffect, useState } from "react";
 import AppLayout from "./components/layout/AppLayout";
 import { ServerNoticesPopup } from "./components/message/ServerNoticesPopup";
+import { ModalStackProvider } from "./components/modals";
 import AddServerModal from "./components/ui/AddServerModal";
 import ChannelListModal from "./components/ui/ChannelListModal";
 import ChannelRenameModal from "./components/ui/ChannelRenameModal";
@@ -29,10 +30,7 @@ const askPermissions = async () => {
 };
 
 const initializeEnvSettings = (
-  toggleAddServerModal: (
-    isOpen?: boolean,
-    prefillDetails?: ConnectionDetails | null,
-  ) => void,
+  openModal: (modalId: string, props?: unknown) => void,
   joinChannel: (serverId: string, channelName: string) => void,
 ) => {
   if (loadSavedServers().length > 0) return;
@@ -47,7 +45,7 @@ const initializeEnvSettings = (
   }
   if (!__DEFAULT_IRC_SERVER_NAME__) {
   }
-  toggleAddServerModal(true, {
+  openModal("addServer", {
     name: __DEFAULT_IRC_SERVER_NAME__ || "Obsidian IRC",
     host,
     port,
@@ -68,19 +66,9 @@ const initializeEnvSettings = (
 
 const App: React.FC = () => {
   const {
-    toggleAddServerModal,
-    toggleEditServerModal,
-    ui: {
-      isAddServerModalOpen,
-      isUserProfileModalOpen,
-      isChannelListModalOpen,
-      isChannelRenameModalOpen,
-      isServerNoticesPopupOpen,
-      isEditServerModalOpen,
-      editServerId,
-      linkSecurityWarnings,
-      profileViewRequest,
-    },
+    openModal,
+    closeModal,
+    ui: { isServerNoticesPopupOpen, linkSecurityWarnings, profileViewRequest },
     joinChannel,
     connectToSavedServers,
     toggleServerNoticesPopup,
@@ -138,47 +126,44 @@ const App: React.FC = () => {
 
   // askPermissions();
   useEffect(() => {
-    initializeEnvSettings(toggleAddServerModal, joinChannel);
+    initializeEnvSettings(openModal, joinChannel);
     // Auto-reconnect to saved servers on app startup
     connectToSavedServers();
   }, [
-    toggleAddServerModal,
+    openModal,
     joinChannel, // Auto-reconnect to saved servers on app startup
     connectToSavedServers,
   ]); // Removed connectToSavedServers from dependencies
 
   return (
-    <div className="h-screen overflow-hidden">
-      <AppLayout />
-      {isAddServerModalOpen && <AddServerModal />}
-      {isEditServerModalOpen && editServerId && (
-        <EditServerModal
-          serverId={editServerId}
-          onClose={() => toggleEditServerModal(false)}
-        />
-      )}
-      {isUserProfileModalOpen && <UserSettings />}
-      {isChannelListModalOpen && <ChannelListModal />}
-      {isChannelRenameModalOpen && <ChannelRenameModal />}
-      <LinkSecurityWarningModal />
-      {userProfileModalState?.isOpen && (
-        <UserProfileModal
-          isOpen={userProfileModalState.isOpen}
-          onClose={() => setUserProfileModalState(null)}
-          serverId={userProfileModalState.serverId}
-          username={userProfileModalState.username}
-        />
-      )}
-      {isServerNoticesPopupOpen && (
-        <ServerNoticesPopup
-          messages={serverNotices}
-          onClose={() => toggleServerNoticesPopup(false)}
-          onUsernameContextMenu={handleUsernameContextMenu}
-          onIrcLinkClick={handleIrcLinkClick}
-          joinChannel={joinChannel}
-        />
-      )}
-    </div>
+    <ModalStackProvider>
+      <div className="h-screen overflow-hidden">
+        <AppLayout />
+        <AddServerModal />
+        <EditServerModal />
+        <UserSettings />
+        <ChannelListModal />
+        <ChannelRenameModal />
+        <LinkSecurityWarningModal />
+        {userProfileModalState?.isOpen && (
+          <UserProfileModal
+            isOpen={userProfileModalState.isOpen}
+            onClose={() => setUserProfileModalState(null)}
+            serverId={userProfileModalState.serverId}
+            username={userProfileModalState.username}
+          />
+        )}
+        {isServerNoticesPopupOpen && (
+          <ServerNoticesPopup
+            messages={serverNotices}
+            onClose={() => toggleServerNoticesPopup(false)}
+            onUsernameContextMenu={handleUsernameContextMenu}
+            onIrcLinkClick={handleIrcLinkClick}
+            joinChannel={joinChannel}
+          />
+        )}
+      </div>
+    </ModalStackProvider>
   );
 };
 

src/components/layout/AppLayout.tsx

@@ -2,7 +2,7 @@ import { platform } from "@tauri-apps/plugin-os";
 import type React from "react";
 import { useEffect } from "react";
 import { useMediaQuery } from "../../hooks/useMediaQuery";
-import useStore from "../../store";
+import useStore, { type layoutColumn } from "../../store";
 import { GlobalNotifications } from "../ui/GlobalNotifications";
 import { ChannelList } from "./ChannelList";
 import { ChatArea } from "./ChatArea";

src/components/layout/ChannelList.tsx

@@ -38,7 +38,7 @@ export const ChannelList: React.FC<{
     pinPrivateChat,
     unpinPrivateChat,
     reorderPrivateChats,
-    toggleUserProfileModal,
+    openModal,
     setMobileViewActiveColumn,
     reorderChannels,
   } = useStore();
@@ -1276,7 +1276,7 @@ export const ChannelList: React.FC<{
       <div className="mt-auto mb-2 px-2">
         <div
           className="py-1 rounded-md flex items-center justify-between group cursor-pointer max-w-full transition-all duration-200 ease-in-out shadow-sm bg-discord-dark-400/50 hover:bg-discord-primary/70"
-          onClick={() => toggleUserProfileModal(true)}
+          onClick={() => openModal("settings")}
         >
           <div className="flex items-center gap-2 ml-2 flex-1 min-w-0">
             <div className="relative flex-shrink-0">
@@ -1341,7 +1341,7 @@ export const ChannelList: React.FC<{
             <button
               className="hover:text-white"
               data-testid="user-settings-button"
-              onClick={() => toggleUserProfileModal(true)}
+              onClick={() => openModal("settings")}
             >
               <FaCog className="mr-2" />
             </button>

src/components/layout/ChatArea.tsx

@@ -169,7 +169,7 @@ export const ChatArea: React.FC<{
   const selectPrivateChat = useStore((state) => state.selectPrivateChat);
   const connect = useStore((state) => state.connect);
   const joinChannel = useStore((state) => state.joinChannel);
-  const toggleAddServerModal = useStore((state) => state.toggleAddServerModal);
+  const openModal = useStore((state) => state.openModal);
   const redactMessage = useStore((state) => state.redactMessage);
   const warnUser = useStore((state) => state.warnUser);
   const kickUser = useStore((state) => state.kickUser);
@@ -182,15 +182,10 @@ export const ChatArea: React.FC<{
     selectedPrivateChatId: null,
   };
   const { selectedChannelId, selectedPrivateChatId } = currentSelection;
-  const {
-    isMemberListVisible,
-    isSettingsModalOpen,
-    isUserProfileModalOpen,
-    isAddServerModalOpen,
-    isChannelListModalOpen,
-    isChannelRenameModalOpen,
-    isServerNoticesPopupOpen,
-  } = ui;
+  const { isMemberListVisible, isServerNoticesPopupOpen } = ui;
+
+  // Check if settings modal is open via modal manager
+  const isSettingsModalOpen = ui.modals.settings?.isOpen || false;
 
   const isMobile = useMediaQuery("(max-width: 768px)");
 
@@ -274,7 +269,7 @@ export const ChatArea: React.FC<{
     const parsed = parseIrcUrl(rawUrl, currentUser?.username || "user");
 
     // Open the connect modal with pre-filled server details
-    toggleAddServerModal(true, {
+    openModal("addServer", {
       name: parsed.host,
       host: parsed.host,
       port: parsed.port.toString(),
@@ -1409,23 +1404,19 @@ export const ChatArea: React.FC<{
     if ("__TAURI__" in window && ["android", "ios"].includes(platform()))
       return;
     // Don't steal focus if any modal is open
-    if (
+    const isAnyModalOpen =
       isSettingsModalOpen ||
-      isUserProfileModalOpen ||
-      isAddServerModalOpen ||
-      isChannelListModalOpen ||
-      isChannelRenameModalOpen
-    )
-      return;
+      ui.modals.addServer?.isOpen ||
+      ui.modals.editServer?.isOpen ||
+      ui.modals.channelList?.isOpen ||
+      ui.modals.channelRename?.isOpen;
+    if (isAnyModalOpen) return;
     inputRef.current?.focus();
   }, [
     selectedChannelId,
     selectedPrivateChatId,
     isSettingsModalOpen,
-    isUserProfileModalOpen,
-    isAddServerModalOpen,
-    isChannelListModalOpen,
-    isChannelRenameModalOpen,
+    ui.modals,
   ]);
 
   return (

src/components/layout/ChatHeader.tsx

@@ -67,13 +67,8 @@ export const ChatHeader: React.FC<ChatHeaderProps> = ({
   onOpenChannelSettings,
   onOpenInviteUser,
 }) => {
-  const {
-    toggleChannelListModal,
-    toggleChannelRenameModal,
-    toggleMemberList,
-    pinPrivateChat,
-    unpinPrivateChat,
-  } = useStore();
+  const { openModal, toggleMemberList, pinPrivateChat, unpinPrivateChat } =
+    useStore();
   const [isEditingTopic, setIsEditingTopic] = useState(false);
   const [editedTopic, setEditedTopic] = useState("");
   const [avatarLoadFailed, setAvatarLoadFailed] = useState(false);
@@ -584,15 +579,15 @@ export const ChatHeader: React.FC<ChatHeaderProps> = ({
           )}
           <button
             className="hover:text-discord-text-normal"
-            onClick={() => toggleChannelListModal(true)}
+            onClick={() => openModal("channelList")}
             title="List Channels"
           >
             <FaList />
           </button>
           {selectedChannel && isOperator && (
             <button
               className="hover:text-discord-text-normal"
-              onClick={() => toggleChannelRenameModal(true)}
+              onClick={() => openModal("channelRename")}
               title="Rename Channel"
             >
               <FaEdit />

src/components/layout/ServerList.tsx

@@ -10,11 +10,9 @@ export const ServerList: React.FC = () => {
     servers,
     ui: { selectedServerId },
     selectServer,
-    toggleAddServerModal,
+    openModal,
     deleteServer, // Add deleteServer action
-    toggleChannelListModal, // Add toggleChannelListModal action
     reconnectServer, // Add reconnectServer action
-    toggleEditServerModal, // Add toggleEditServerModal action
   } = useStore();
 
   const [isOptionsOpen, setIsOptionsOpen] = useState(false);
@@ -100,7 +98,7 @@ export const ServerList: React.FC = () => {
             <button
               className="w-full text-left px-4 py-2 hover:bg-discord-dark-300"
               onClick={() => {
-                toggleAddServerModal(true);
+                openModal("addServer");
                 setIsOptionsOpen(false);
               }}
             >
@@ -185,7 +183,7 @@ export const ServerList: React.FC = () => {
                     className="w-5 h-5 bg-discord-dark-300 hover:bg-blue-500 rounded-full flex items-center justify-center text-white text-xs shadow-md"
                     onClick={(e) => {
                       e.stopPropagation();
-                      toggleEditServerModal(true, server.id);
+                      openModal("editServer", { serverId: server.id });
                     }}
                     title="Edit Server"
                   >

src/components/message/MessageItem.tsx

@@ -483,6 +483,7 @@ export const MessageItem = (props: MessageItemProps) => {
           isAway: false,
           status: "",
           isBot: false,
+          isIrcOp: false,
           metadata,
         };
       }