# 通知設計書 48-ルール削除成功

## 概要

本ドキュメントは、ルールの削除が成功した際にユーザーに表示される成功通知の設計を定義します。

### 本通知の処理概要

この通知は、ユーザーがルール管理画面でルールを削除した際に、削除が正常に完了したことを知らせるメッセージ通知です。モバイル版では「Undo」ボタンが付与され、誤って削除した場合に即座に取り消すことができます。

**業務上の目的・背景**：ルールは取引の自動カテゴリ分類、メモの自動追加、スケジュールへのリンクなど、様々な自動化を担う重要な機能です。ルール削除は元に戻せない破壊的な操作であるため、ユーザーに操作完了を明確にフィードバックし、誤操作に対する復旧手段（Undo）を提供することが重要です。

**通知の送信タイミング**：ルール管理画面（モバイル版）でルールを削除し、`rule-delete-all` APIが成功（someDeletionsFailed === false）した場合に即座に発行されます。

**通知の受信者**：ルール削除操作を行った現在のユーザー（ローカル通知）

**通知内容の概要**：「Rule deleted successfully」（ルールが正常に削除されました）という成功メッセージを表示します。モバイル版では「Undo」ボタンが付与され、操作の取り消しが可能です。

**期待されるアクション**：ユーザーは通知を確認し、必要に応じてUndoボタンで削除を取り消すことができます。通知は10秒後に自動消去されます。

## 通知種別

アプリ内通知（トースト通知）

## 送信仕様

### 基本情報

| 項目 | 内容 |
|-----|------|
| 送信方式 | 同期（Redux dispatch） |
| 優先度 | 中 |
| リトライ | 無し |

### 送信先決定ロジック

ルール削除操作を行った現在のユーザーのみに対してローカル通知を表示します。モバイル版でのみ通知が表示され、デスクトップ版では通知は表示されません。

## 通知テンプレート

### アプリ内通知の場合

| 項目 | 内容 |
|-----|------|
| 通知タイプ | message |
| タイトル | なし |
| メッセージ | Rule deleted successfully |
| タイムアウト | 10秒 |
| ボタン | Undo（モバイル版のみ） |

### 本文テンプレート

```
Rule deleted successfully
```

### ボタン（モバイル版のみ）

| ボタン名 | アクション | 説明 |
|---------|----------|------|
| Undo | undo() | 削除したルールを復元する |

## テンプレート変数

| 変数名 | 説明 | データ取得元 | 必須 |
|--------|------|-------------|-----|
| なし | 固定メッセージのため変数なし | - | - |

## 送信トリガー・条件

### トリガー一覧

| トリガー種別 | トリガーイベント | 送信条件 | 説明 |
|------------|----------------|---------|------|
| API呼び出し | rule-delete-all API | !someDeletionsFailed | モバイル版でのルール削除成功時 |

### 送信抑止条件

| 条件 | 説明 |
|-----|------|
| someDeletionsFailedがtrueの場合 | スケジュールリンク警告通知（No.46）を表示 |
| エラー発生時 | エラー通知（No.47）を表示 |
| デスクトップ版の場合 | 通知は表示されない |

## 処理フロー

### 送信フロー

```mermaid
flowchart TD
    A[ルール削除操作] --> B[rule-delete-all API呼び出し]
    B --> C{APIレスポンス}
    C -->|例外発生| D[エラー通知 No.47]
    C -->|成功| E{someDeletionsFailed?}
    E -->|true| F[スケジュールリンク警告 No.46]
    E -->|false| G{isNarrowWidth?}
    G -->|No デスクトップ| H[通知なし]
    G -->|Yes モバイル| I[showUndoNotification呼び出し]
    I --> J[addNotification dispatch]
    J --> K[通知表示]
    K --> L{ユーザーアクション}
    L -->|Undoクリック| M[undo処理実行]
    L -->|10秒経過| N[通知自動消去]
```

## データベース参照・更新仕様

### 参照テーブル一覧

| テーブル名 | 用途 | 備考 |
|-----------|------|------|
| rules | 削除対象ルールの確認 | サーバー側で参照 |

### 更新テーブル一覧

| テーブル名 | 操作 | 概要 |
|-----------|------|------|
| rules | DELETE | 指定されたルールを削除 |

## エラー処理

### エラーケース一覧

| エラー種別 | 発生条件 | 対処方法 |
|----------|---------|---------|
| 通知表示失敗 | Redux storeの異常 | 処理継続（削除自体は完了） |

### リトライ仕様

| 項目 | 内容 |
|-----|------|
| リトライ回数 | 0回 |
| リトライ間隔 | - |
| リトライ対象エラー | なし |

## 配信設定

### レート制限

| 項目 | 内容 |
|-----|------|
| 1分あたり上限 | 制限なし |
| 1日あたり上限 | 制限なし |

### 配信時間帯

制限なし（ユーザー操作に即時応答）

## セキュリティ考慮事項

- ローカル通知のためネットワーク経由での情報漏洩リスクなし
- 削除されたルールの詳細情報は通知メッセージに含めない

## 備考

- モバイル版（MobileRulesPage.tsx）でのみ通知が表示される
- デスクトップ版ではUIからのフィードバックがないが、ルール一覧が更新されることで削除を確認可能
- `useUndo`フックがisNarrowWidthをチェックしてモバイル判定を行う
- Undo機能はActualの履歴管理システムを使用

---

## コードリーディングガイド

本通知を理解するために参照すべきファイルと、推奨する読み解き順序を以下に示します。

### 推奨読解順序

#### Step 1: データ構造を理解する

通知の型定義とUndo機能の構造を確認します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 1-1 | notificationsSlice.ts | `packages/desktop-client/src/notifications/notificationsSlice.ts` | Notification型の定義（9-26行目） |
| 1-2 | useUndo.ts | `packages/desktop-client/src/hooks/useUndo.ts` | showUndoNotification関数（27-47行目） |

**読解のコツ**: `useUndo`フックはisNarrowWidthをチェックしてモバイル判定を行い、デスクトップでは早期リターンする。

#### Step 2: エントリーポイントを理解する

通知を発行するコンポーネントを確認します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 2-1 | MobileRulesPage.tsx | `packages/desktop-client/src/components/mobile/rules/MobileRulesPage.tsx` | handleRuleDelete関数（128-167行目） |

**主要処理フロー**:
1. **131行目**: `send('rule-delete-all', [rule.id])`でサーバーにルール削除リクエスト
2. **135行目**: someDeletionsFailedをチェック
3. **146-149行目**: someDeletionsFailedがfalseの場合、showUndoNotificationを呼び出し
4. **147-148行目**: メッセージ「Rule deleted successfully」

#### Step 3: Undoフックの動作を理解する

Undo通知の仕組みを確認します。

| 順序 | ファイル | パス | 読解ポイント |
|-----|---------|------|-------------|
| 3-1 | useUndo.ts | `packages/desktop-client/src/hooks/useUndo.ts` | showUndoNotification関数（27-47行目）、タイムアウト設定（20行目） |

**主要処理フロー**:
- **20行目**: `const timeout = 10000;` タイムアウト10秒
- **29-31行目**: `if (!isNarrowWidth) { return; }` デスクトップでは早期リターン
- **38-40行目**: ボタンアクションにundo関数を設定

### プログラム呼び出し階層図

```
MobileRulesPage.tsx
    │
    ├─ handleRuleDelete(rule)
    │      │
    │      └─ send('rule-delete-all', [rule.id])
    │             │
    │             └─ APIレスポンス
    │                    │
    │                    └─ !someDeletionsFailed
    │                           │
    │                           └─ showUndoNotification({
    │                                  message: 'Rule deleted successfully'
    │                              })
    │                                  │
    │                                  └─ useUndo.ts
    │                                         │
    │                                         ├─ isNarrowWidth チェック
    │                                         │
    │                                         └─ dispatch(addNotification({
    │                                                type: 'message',
    │                                                timeout: 10000,
    │                                                button: { title: 'Undo', action: undo }
    │                                            }))
    │
    └─ Notifications コンポーネント
           │
           └─ 通知表示
                  │
                  └─ Undoボタン押下時: undo()
```

### データフロー図

```
[入力]                    [処理]                         [出力]

ルール削除操作 ───────▶ send('rule-delete-all') ───────▶ サーバーAPI
                              │                          │
                              ▼                          ▼
                        APIレスポンス ◀─────────── 削除成功
                              │
                              └─ !someDeletionsFailed
                                     │
                                     └─ showUndoNotification()
                                            │
                                            └─ isNarrowWidth判定
                                                   │
                                                   ├─ false: 早期リターン
                                                   │
                                                   └─ true: addNotification
                                                          │
                                                          ▼
                                                    Notifications.tsx
                                                          │
                                                          ├─ メッセージ表示
                                                          └─ Undoボタン
```

### 関連ファイル一覧

| ファイル | パス | 種別 | 役割 |
|---------|------|------|------|
| MobileRulesPage.tsx | `packages/desktop-client/src/components/mobile/rules/MobileRulesPage.tsx` | ソース | モバイル版ルール管理画面 |
| useUndo.ts | `packages/desktop-client/src/hooks/useUndo.ts` | ソース | Undo通知表示のカスタムフック |
| notificationsSlice.ts | `packages/desktop-client/src/notifications/notificationsSlice.ts` | ソース | 通知の状態管理（Redux slice） |
| Notifications.tsx | `packages/desktop-client/src/components/Notifications.tsx` | ソース | 通知表示コンポーネント |
| app.ts | `packages/loot-core/src/server/rules/app.ts` | ソース | サーバー側ルールAPI |
| undo.ts | `packages/loot-core/src/platform/client/undo/index.ts` | ソース | Undo/Redo機能の実装 |
