From 3367d626baa08630e393389b597c48842f01da72 Mon Sep 17 00:00:00 2001
From: aureliony <39163684+aureliony@users.noreply.github.com>
Date: Sun, 14 Apr 2024 17:47:10 +0800
Subject: [PATCH] Add documentation for command history feature

---
 docs/Configuration.md    |  2 +-
 docs/DeveloperGuide.md   | 18 +++++++++++++++---
 docs/diagrams/style.puml |  3 +++
 3 files changed, 19 insertions(+), 4 deletions(-)

diff --git a/docs/Configuration.md b/docs/Configuration.md
index 32f6255f3b9..f4c3b04362b 100644
--- a/docs/Configuration.md
+++ b/docs/Configuration.md
@@ -5,4 +5,4 @@
 
 # Configuration guide
 
-Certain properties of the application can be controlled (e.g user preferences file location, logging level) through the configuration file (default: `config.json`).
+Certain properties of the application can be controlled (e.g. user preferences file location, logging level) through the configuration file (default: `config.json`).
diff --git a/docs/DeveloperGuide.md b/docs/DeveloperGuide.md
index 77708760b4f..07abe295af4 100644
--- a/docs/DeveloperGuide.md
+++ b/docs/DeveloperGuide.md
@@ -73,7 +73,7 @@ The **API** of this component is specified in [`Ui.java`](https://github.com/se-
 
 The UI consists of a `MainWindow` that is made up of parts e.g.`CommandBox`, `ResultDisplay`, `PersonListPanel`, `StatusBarFooter` etc. All these, including the `MainWindow`, inherit from the abstract `UiPart` class which captures the commonalities between classes that represent parts of the visible GUI.
 
-The `UI` component uses the JavaFx UI framework. The layout of these UI parts are defined in matching `.fxml` files that are in the `src/main/resources/view` folder. For example, the layout of the [`MainWindow`](https://github.com/se-edu/addressbook-level3/tree/master/src/main/java/seedu/address/ui/MainWindow.java) is specified in [`MainWindow.fxml`](https://github.com/se-edu/addressbook-level3/tree/master/src/main/resources/view/MainWindow.fxml)
+The `UI` component uses the JavaFX UI framework. The layout of these UI parts are defined in matching `.fxml` files that are in the `src/main/resources/view` folder. For example, the layout of the [`MainWindow`](https://github.com/se-edu/addressbook-level3/tree/master/src/main/java/seedu/address/ui/MainWindow.java) is specified in [`MainWindow.fxml`](https://github.com/se-edu/addressbook-level3/tree/master/src/main/resources/view/MainWindow.fxml)
 
 The `UI` component,
 
@@ -143,7 +143,7 @@ The `Storage` component,
 
 ### Common classes
 
-Classes used by multiple components are in the `seedu.addressbook.commons` package.
+Some classes used by multiple components are in the `seedu.addressbook.commons` package.
 
 --------------------------------------------------------------------------------------------------------------------
 
@@ -212,7 +212,7 @@ associated with person.
 
 The `PersonMatchesQueryPredicate` class defines the algorithm that determines whether a `Person` matches the user's `query` string.
 
-The following sequence diagram shows how the `command` object is created. Note that the leading whitespace in `" David"` is intentional due to the implementation of `AddressBookParser`.
+The following sequence diagram shows how the `command` object is created when the user executes `find David`. Note that the leading whitespace in `" David"` is an implementation detail of `AddressBookParser`.
 
 <puml src="diagrams/FindSequenceDiagram1.puml"/>
 <br><br>
@@ -325,6 +325,18 @@ The following activity diagram summarizes what happens when a user executes a ne
 <puml src="diagrams/SaveActivityDiagram.puml" width="250" />
 <br><br>
 
+### Command History feature
+
+The `CommandHistory` class is an abstraction for a command history data structure.
+It stores all command strings that were successfully executed by the user.
+
+When the user presses the `UP` key, a `KeyEvent` is generated by JavaFX, which is then handled by the `CommandBox` class through the `handleKeyPressed()` method.
+
+The following sequence diagram shows the interaction between the classes when the user presses the `UP` key.
+
+<puml src="diagrams/CommandHistorySequenceDiagram.puml" />
+<br><br>
+
 #### Design considerations:
 
 **Aspect: How undo & redo executes:**
diff --git a/docs/diagrams/style.puml b/docs/diagrams/style.puml
index f7d7347ae84..9377829e656 100644
--- a/docs/diagrams/style.puml
+++ b/docs/diagrams/style.puml
@@ -31,6 +31,9 @@
 !define STORAGE_COLOR_T3 #806600
 !define STORAGE_COLOR_T2 #544400
 
+!define JAVAFX_COLOR #E76F00
+!define JAVAFX_COLOR_T1 #DEB38C
+
 !define USER_COLOR #000000
 
 skinparam Package {