Implement socket state management with Zustand and enhance connection handling

- Introduced a new Zustand store for managing socket connection status and socket ID, improving state management for real-time communication.
- Updated the ConnectionIndicator component to utilize the socket store for dynamic status updates, allowing for better integration with the socket connection state.
- Enhanced the SocketService class to update the socket connection status during various connection events, ensuring accurate status reporting.
- Refactored the TelegramLoginButton component to clarify JWT token handling in comments, improving code readability.

These changes enhance the application's real-time capabilities and provide a more robust user experience by accurately reflecting connection states.

src/store/socketStore.ts

@@ -0,0 +1,28 @@
+import { create } from 'zustand';
+
+export type SocketConnectionStatus = 'connected' | 'disconnected' | 'connecting';
+
+interface SocketState {
+  status: SocketConnectionStatus;
+  socketId: string | null;
+  setStatus: (status: SocketConnectionStatus) => void;
+  setSocketId: (socketId: string | null) => void;
+  reset: () => void;
+}
+
+export const useSocketStore = create<SocketState>((set) => ({
+  status: 'disconnected',
+  socketId: null,
+
+  setStatus: (status: SocketConnectionStatus) => {
+    set({ status });
+  },
+
+  setSocketId: (socketId: string | null) => {
+    set({ socketId });
+  },
+
+  reset: () => {
+    set({ status: 'disconnected', socketId: null });
+  },
+}));