Implement settings for tags display mode 📸

img-ui/src/main/kotlin/dev/nuculabs/imagetagger/ui/MainPageController.kt

@@ -5,8 +5,10 @@ import dev.nuculabs.imagetagger.ui.controls.ImageTagsDisplayMode
 import dev.nuculabs.imagetagger.ui.controls.ImageTagsEntryControl
 import dev.nuculabs.imagetagger.ui.controls.ImageTagsSessionHeader
 import javafx.application.Platform
+import javafx.collections.FXCollections
 import javafx.fxml.FXML
 import javafx.scene.control.Button
+import javafx.scene.control.ChoiceBox
 import javafx.scene.control.ProgressBar
 import javafx.scene.control.Separator
 import javafx.scene.layout.HBox
@@ -59,8 +61,16 @@ class MainPageController {
      */
     private var isCurrentTagsOperationCancelled: Boolean = false
 
+    /**
+     * Holds a list of predicted images controls that are rendered in the view.
+     */
     private var predictedImages: MutableList<ImageTagsEntryControl> = ArrayList()
 
+    /**
+     * Controls how image tags are displayed on the screen.
+     */
+    private var tagsDisplayMode: ImageTagsDisplayMode = ImageTagsDisplayMode.CommaSeparated
+
     @FXML
     private lateinit var progressBar: ProgressBar
 
@@ -71,7 +81,10 @@ class MainPageController {
     private lateinit var cancelButton: Button
 
     @FXML
-    lateinit var tagImagesButton: Button
+    private lateinit var tagImagesButton: Button
+
+    @FXML
+    private lateinit var tagsDisplayModeSelection: ChoiceBox<String>
 
     /**
      * Initializes the controller. Needs to be called after the dependencies have been injected.
@@ -79,6 +92,29 @@ class MainPageController {
     fun initialize() {
         HBox.setHgrow(progressBar, Priority.ALWAYS)
         HBox.setHgrow(cancelButton, Priority.ALWAYS)
+
+        initializeTagsDisplayMode()
+    }
+
+    /**
+     * Initializes the tags display mode.
+     */
+    private fun initializeTagsDisplayMode() {
+        // Tags display mode
+        tagsDisplayModeSelection.items = FXCollections.observableArrayList(
+            ImageTagsDisplayMode.CommaSeparated.toString(),
+            ImageTagsDisplayMode.HashTags.toString()
+        )
+        tagsDisplayModeSelection.value = ImageTagsDisplayMode.CommaSeparated.toString()
+
+        tagsDisplayModeSelection.selectionModel.selectedItemProperty().addListener { _, oldValue, newValue ->
+            if (oldValue != newValue && newValue != null) {
+                tagsDisplayMode = ImageTagsDisplayMode.fromString(newValue)
+                predictedImages.forEach {
+                    it.setTagsDisplayMode(tagsDisplayMode)
+                }
+            }
+        }
     }
 
     /**
@@ -152,8 +188,7 @@ class MainPageController {
         analyzedImage: AnalyzedImage,
     ) {
         val control = ImageTagsEntryControl(analyzedImage)
-        // TODO add default tag mode
-        control.setTagsDisplayMode(ImageTagsDisplayMode.CommaSeparated)
+        control.setTagsDisplayMode(tagsDisplayMode)
         verticalBox.children.add(control)
         predictedImages.add(control)
         verticalBox.children.add(Separator())

img-ui/src/main/kotlin/dev/nuculabs/imagetagger/ui/controls/ImageTagsDisplayMode.kt

@@ -4,6 +4,20 @@ package dev.nuculabs.imagetagger.ui.controls
  * Determines how tags are displayed
  */
 enum class ImageTagsDisplayMode {
-    CommaSeparated,
-    HashTags
+    CommaSeparated {
+        override fun toString(): String {
+            return "Comma Separated"
+        }
+    },
+    HashTags;
+
+    companion object {
+        fun fromString(value: String): ImageTagsDisplayMode {
+            return when (value) {
+                CommaSeparated.toString() -> CommaSeparated
+                "HashTags" -> HashTags
+                else -> throw IllegalArgumentException("Invalid argument $value")
+            }
+        }
+    }
 }

img-ui/src/main/resources/dev/nuculabs/imagetagger/ui/main-window-view.fxml

@@ -14,7 +14,7 @@
     <top>
         <VBox>
             <ApplicationMenuBar/>
-            <HBox alignment="CENTER_LEFT">
+            <HBox alignment="CENTER_LEFT" spacing="10">
                 <padding>
                     <Insets bottom="5" left="5" right="5"/>
                 </padding>
@@ -24,6 +24,12 @@
                     </graphic>
                 </Button>
                 <Separator orientation="VERTICAL" style="-fx-padding: 10px"/>
+                <Region HBox.hgrow="ALWAYS"/>
+                <ChoiceBox fx:id="tagsDisplayModeSelection">
+                    <tooltip>
+                        <Tooltip text="Select how tags are displayed"/>
+                    </tooltip>
+                </ChoiceBox>
             </HBox>
         </VBox>
     </top>