feat: ZapSubscriptionManagerにサブスクリプション管理機能を追加し、UIのクリーンアップ処理を改善

src/UIManager.js

@@ -92,6 +92,7 @@ class NostrZapViewDialog extends HTMLElement {
     subscriptionManager.setZapListUI(this.zapListUI);
 
     // UIコンポーネントの初期化の後に
+    // viewId に基づいて正しいイベントを取得
     const zapEvents = cacheManager.getZapEvents(this.viewId);
 
     if (!zapEvents?.length) {
@@ -183,6 +184,9 @@ class NostrZapViewDialog extends HTMLElement {
   closeDialog() {
     const dialog = this.#getElement(".dialog");
     if (dialog?.open) {
+      this.zapListUI?.destroy();
+      // UIのクリーンアップのみを行い、キャッシュはそのまま保持
+      subscriptionManager.unsubscribe(this.viewId);
       dialog.close();
       this.remove();
     }
@@ -351,7 +355,13 @@ export async function showDialog(viewId) {
 }
 
 // 以下の���クスポート関数を修正
-export const closeDialog = (viewId) => dialogManager.execute(viewId, 'closeDialog');
+export const closeDialog = (viewId) => {
+  const dialog = dialogManager.get(viewId);
+  if (dialog) {
+    subscriptionManager.unsubscribe(viewId);
+    dialog.closeDialog();
+  }
+};
 export const displayZapStats = (stats, viewId) => dialogManager.execute(viewId, 'displayZapStats', stats);
 export const replacePlaceholderWithZap = (event, index, viewId) => 
   dialogManager.execute(viewId, 'replacePlaceholderWithZap', event, index);

src/ZapManager.js

@@ -10,8 +10,15 @@ class ZapSubscriptionManager {
     this.viewConfigs = new Map();
     this.configStore = new Map();
     this.observers = new Map();
+    // 追加: private フィールドを初期化
+    this.#subscriptions = new Map();
+    this.#state = new Map();
   }
 
+  // Private フィールド宣言を追加
+  #subscriptions;
+  #state;
+
   // 基本設定メソッド
   setZapListUI(zapListUI) {
     this.zapListUI = zapListUI;
@@ -370,7 +377,8 @@ class ZapSubscriptionManager {
     return new Promise((resolve) => {
       const bufferInterval = this._setupBufferInterval(batchEvents, viewId);
 
-      eventPool.subscribeToZaps(viewId, config, decoded, {
+      // サブスクリプションを保存
+      const subscription = eventPool.subscribeToZaps(viewId, config, decoded, {
         onevent: (event) => {
           const currentLastTime = this._handleInitialEvent(event, batchEvents, lastEventTime, viewId);
           if (currentLastTime !== null) {
@@ -382,6 +390,9 @@ class ZapSubscriptionManager {
           resolve({ batchEvents: [...batchEvents], lastEventTime });
         }
       });
+
+      // サブスクリプションを保存
+      this.#subscriptions.set(viewId, { zap: subscription });
     });
   }
 
@@ -465,6 +476,27 @@ class ZapSubscriptionManager {
     const canLoad = config && !state.isLoading && state.lastEventTime;
     return canLoad;
   }
+
+  unsubscribe(viewId) {
+    try {
+      // サブスクリプションの終了
+      const subscription = this.#subscriptions.get(viewId);
+      if (subscription?.zap) {
+        subscription.zap();
+        subscription.zap = null;
+      }
+
+      // 状態のリセット
+      this.#state.set(viewId, { isZapClosed: true });
+
+      // Observer のクリーンアップ
+      this._cleanupInfiniteScroll(viewId);
+
+      console.log(`Unsubscribed from zaps for viewId: ${viewId}`);
+    } catch (error) {
+      console.error(`Failed to unsubscribe for viewId ${viewId}:`, error);
+    }
+  }
 }
 
 const subscriptionManager = new ZapSubscriptionManager();

src/ui/ZapListUI.js

@@ -50,6 +50,12 @@ export class ZapListUI {
       this.profileUpdateUnsubscribe();
       this.profileUpdateUnsubscribe = null;
     }
+
+    // リストをクリア
+    const list = this.#getElement(".dialog-zap-list");
+    if (list) {
+      list.innerHTML = '';
+    }
   }
 
   // 2. リスト操作の基本メソッド
@@ -100,15 +106,15 @@ export class ZapListUI {
   }
 
   async renderZapListFromCache(zapEventsCache) {
-    if (!zapEventsCache?.length) {
-      // キャッシュ状態をリセット
+    // viewId に基づいて正しいイベントを取得
+    const events = cacheManager.getZapEvents(this.viewId);
+    if (!events?.length) {
       cacheManager.setNoZapsState(this.viewId, false);
       return this.showNoZapsMessage();
     }
 
     await this.#updateListContent(async (list) => {
-      // イベントの前処理を非同期で実行
-      const uniqueEvents = this.#getUniqueEvents(zapEventsCache);
+      const uniqueEvents = this.#getUniqueEvents(events); // zapEventsCache から events に変更
       const listFragment = document.createDocumentFragment();
       const profileUpdatesQueue = [];