Feature/kl editor: Improve UI and UX

knowledge-layout-editor/src/main/java/dev/ikm/komet/kleditorapp/view/KLEditorMainScreenController.java

@@ -25,12 +25,15 @@
 import javafx.collections.ObservableList;
 import javafx.event.ActionEvent;
 import javafx.fxml.FXML;
+import javafx.scene.control.Button;
 import javafx.scene.control.ListView;
 import javafx.scene.control.TextField;
 import javafx.scene.layout.BorderPane;
 import org.slf4j.Logger;
 import org.slf4j.LoggerFactory;
 
+import java.util.Comparator;
+
 import static dev.ikm.komet.kview.events.EventTopics.KL_TOPIC;
 import static dev.ikm.komet.preferences.KLEditorPreferences.KL_EDITOR_APP;
 
@@ -39,6 +42,9 @@ public class KLEditorMainScreenController {
 
     private final EvtBus eventBus = EvtBusFactory.getDefaultEvtBus();
 
+    @FXML
+    private Button saveButton;
+
     @FXML
     private PropertiesPane propertiesPane;
 
@@ -49,7 +55,10 @@ public class KLEditorMainScreenController {
     private TextField titleTextField;
 
     @FXML
-    private ListView patternBrowserListView;
+    private ListView<PatternBrowserItem> patternBrowserListView;
+
+    @FXML
+    private ListView controlsListView;
 
     private KLEditorWindowController klEditorWindowController;
 
@@ -64,7 +73,7 @@ public class KLEditorMainScreenController {
     private ObservableViewNoOverride windowViewCoordinates;
 
     private ViewCalculator viewCalculator;
-    private ObservableList<Entity<EntityVersion>> patterns;
+    private ObservableList<PatternBrowserItem> patternsList;
 
     public void init(KometPreferences klEditorAppPreferences, WindowSettings windowSettings, String windowToLoad) {
         this.klEditorAppPreferences = klEditorAppPreferences;
@@ -75,6 +84,9 @@ public void init(KometPreferences klEditorAppPreferences, WindowSettings windowS
         viewCalculator = ViewCalculatorWithCache.getCalculator(windowViewCoordinates.toViewCoordinateRecord());
 
         initPatternsList(viewCalculator);
+        initControlsList();
+
+        saveButton.disableProperty().bind(titleTextField.textProperty().isEmpty());
 
         // Init Window
         initWindow(windowToLoad);
@@ -99,18 +111,29 @@ public void shutdown() {
     }
 
     private void initPatternsList(ViewCalculator viewCalculator) {
-        patterns = FXCollections.observableArrayList();
+        patternsList = FXCollections.observableArrayList();
         PrimitiveData.get().forEachPatternNid(patternNid -> {
             Latest<PatternEntityVersion> latestPattern = viewCalculator.latest(patternNid);
             latestPattern.ifPresent(patternEntityVersion -> {
                 if (EntityService.get().getEntity(patternEntityVersion.nid()).isPresent()) {
-                    patterns.add(EntityService.get().getEntity(patternNid).get());
+                    Entity<EntityVersion> entity = EntityService.get().getEntity(patternNid).get();
+                    PatternBrowserItem patternBrowserItem = new PatternBrowserItem(entity, viewCalculator);
+                    patternsList.add(patternBrowserItem);
                 }
             });
         });
 
+        // Sort
+        FXCollections.sort(patternsList,
+                Comparator.comparing(PatternBrowserItem::getTitle,
+                        String.CASE_INSENSITIVE_ORDER));
+
         patternBrowserListView.setCellFactory(param -> new PatternBrowserCell(viewCalculator));
-        patternBrowserListView.setItems(patterns);
+        patternBrowserListView.setItems(patternsList);
+    }
+
+    private void initControlsList() {
+
     }
 
     private void initWindow(String windowTitle) {

knowledge-layout-editor/src/main/java/dev/ikm/komet/kleditorapp/view/PatternBrowserItem.java

@@ -0,0 +1,38 @@
+package dev.ikm.komet.kleditorapp.view;
+
+import dev.ikm.tinkar.common.id.PublicId;
+import dev.ikm.tinkar.coordinate.view.calculator.ViewCalculator;
+import dev.ikm.tinkar.entity.Entity;
+import dev.ikm.tinkar.entity.EntityVersion;
+import dev.ikm.tinkar.terms.PatternFacade;
+
+import java.util.Optional;
+
+/**
+ * Represents an Item in the Pattern Browser List.
+ */
+public class PatternBrowserItem {
+    private final String title;
+    private final PublicId publicId;
+    private final int nid;
+
+    private final ViewCalculator viewCalculator;
+
+    public PatternBrowserItem(Entity<EntityVersion> entity, ViewCalculator viewCalculator) {
+        this.viewCalculator = viewCalculator;
+
+        this.title = retrieveDisplayName(entity.toProxy());
+        this.publicId = entity.publicId();
+        this.nid = entity.nid();
+    }
+
+    private String retrieveDisplayName(PatternFacade patternFacade) {
+        Optional<String> optionalStringRegularName = viewCalculator.getRegularDescriptionText(patternFacade);
+        Optional<String> optionalStringFQN = viewCalculator.getFullyQualifiedNameText(patternFacade);
+        return optionalStringRegularName.orElseGet(optionalStringFQN::get);
+    }
+
+    public String getTitle() { return title; }
+    public PublicId getPublicId() { return publicId; }
+    public int getNid() { return nid; }
+}

knowledge-layout-editor/src/main/java/dev/ikm/komet/kleditorapp/view/control/EditorWindowControl.java

@@ -37,7 +37,7 @@ private void onSectionsChanged(ListChangeListener.Change<? extends SectionViewCo
     }
 
     // -- title
-    private final StringProperty title = new SimpleStringProperty(this, "title", "Untitled");
+    private final StringProperty title = new SimpleStringProperty(this, "title", "");
     public StringProperty titleProperty() { return title; }
     public String getTitle() { return title.get(); }
     public void setTitle(String title) { this.title.set(title); }

knowledge-layout-editor/src/main/java/dev/ikm/komet/kleditorapp/view/control/PatternBrowserCell.java

@@ -3,13 +3,11 @@
 import dev.ikm.komet.framework.Identicon;
 import dev.ikm.komet.framework.controls.TimeUtils;
 import dev.ikm.komet.framework.dnd.DragImageMaker;
+import dev.ikm.komet.kleditorapp.view.PatternBrowserItem;
 import dev.ikm.tinkar.coordinate.stamp.calculator.Latest;
 import dev.ikm.tinkar.coordinate.view.calculator.ViewCalculator;
-import dev.ikm.tinkar.entity.Entity;
-import dev.ikm.tinkar.entity.EntityVersion;
 import dev.ikm.tinkar.entity.PatternEntityVersion;
 import dev.ikm.tinkar.entity.StampEntity;
-import dev.ikm.tinkar.terms.PatternFacade;
 import javafx.scene.control.ContentDisplay;
 import javafx.scene.control.Label;
 import javafx.scene.control.ListCell;
@@ -31,7 +29,7 @@
 /**
  * A Cell that renders each item in the Pattern Browser List.
  */
-public class PatternBrowserCell extends ListCell<Entity<EntityVersion>> {
+public class PatternBrowserCell extends ListCell<PatternBrowserItem> {
     private static final Logger LOG = LoggerFactory.getLogger(PatternBrowserCell.class);
 
     public static final DataFormat KL_EDITOR_VERSION_PROXY = new DataFormat("kl-editor/komet-pattern-version-proxy");
@@ -91,17 +89,17 @@ public PatternBrowserCell(ViewCalculator viewCalculator) {
     }
 
     @Override
-    protected void updateItem(Entity<EntityVersion> entity, boolean empty) {
-        super.updateItem(entity, empty);
+    protected void updateItem(PatternBrowserItem patternBrowserItem, boolean empty) {
+        super.updateItem(patternBrowserItem, empty);
 
         if (!isEmpty()) {
-            Latest<PatternEntityVersion> optionalLatestPattern = viewCalculator.latest(entity.nid());
+            Latest<PatternEntityVersion> optionalLatestPattern = viewCalculator.latest(patternBrowserItem.getNid());
             optionalLatestPattern.ifPresentOrElse(latestPattern -> {
                 // Title
-                titleLabel.setText(retrieveDisplayName(entity.toProxy()));
+                titleLabel.setText(patternBrowserItem.getTitle());
 
                 // Identicon
-                Image identiconImage = Identicon.generateIdenticonImage(entity.publicId());
+                Image identiconImage = Identicon.generateIdenticonImage(patternBrowserItem.getPublicId());
                 identiconImageView.setImage(identiconImage);
 
                 currentPatternEntityVersion = latestPattern;
@@ -133,12 +131,6 @@ private void clearCellsContent() {
         lastUpdatedTextLabel.setText("");
     }
 
-    private String retrieveDisplayName(PatternFacade patternFacade) {
-        Optional<String> optionalStringRegularName = viewCalculator.getRegularDescriptionText(patternFacade);
-        Optional<String> optionalStringFQN = viewCalculator.getFullyQualifiedNameText(patternFacade);
-        return optionalStringRegularName.orElseGet(optionalStringFQN::get);
-    }
-
     private void setUpDragAndDrop() {
         // Set up the drag detection event handler
         setOnDragDetected(mouseEvent -> {

knowledge-layout-editor/src/main/java/dev/ikm/komet/kleditorapp/view/propertiespane/PatternPropertiesPane.java

@@ -37,7 +37,7 @@ public PatternPropertiesPane() {
         titleContainer.getStyleClass().add("title-container");
         titleContainer.setSpacing(4);
 
-        Label titleLabel = new Label("Title:");
+        Label titleLabel = new Label("Pattern Title:");
         titleTextField = new TextField();
 
         titleContainer.getChildren().addAll(titleLabel, titleTextField);

knowledge-layout-editor/src/main/java/dev/ikm/komet/kleditorapp/view/propertiespane/SectionPropertiesPane.java

@@ -35,7 +35,7 @@ public SectionPropertiesPane() {
         sectionNameContainer.getStyleClass().add("section-name-container");
         sectionNameContainer.setSpacing(4);
 
-        Label nameLabel = new Label("Name of the section:");
+        Label nameLabel = new Label("Section Title:");
         sectionNameTextField = new TextField();
 
         sectionNameContainer.getChildren().addAll(nameLabel, sectionNameTextField);

knowledge-layout-editor/src/main/resources/dev/ikm/komet/kleditorapp/view/KLEditorMainScreen.fxml

@@ -18,6 +18,7 @@
 
 <?import dev.ikm.komet.kleditorapp.view.control.EditorWindowControl?>
 <?import dev.ikm.komet.kleditorapp.view.propertiespane.PropertiesPane?>
+<?import javafx.scene.control.TitledPane?>
 <BorderPane fx:id="klEditorMainContainer" xmlns="http://javafx.com/javafx/24.0.1" xmlns:fx="http://javafx.com/fxml/1"
             fx:controller="dev.ikm.komet.kleditorapp.view.KLEditorMainScreenController">
     <center>
@@ -29,7 +30,6 @@
                     <HBox alignment="CENTER_LEFT" prefHeight="44" spacing="8" styleClass="app-header">
                         <Label alignment="CENTER" contentDisplay="CENTER" maxWidth="1.7976931348623157E308"
                                styleClass="app-title" text="KNOWLEDGE LAYOUT EDITOR" HBox.hgrow="ALWAYS"/>
-                        <Button styleClass="pill primary" text="DONE"/>
                     </HBox>
                 </VBox>
             </top>
@@ -47,37 +47,12 @@
                         <!-- Secondary toolbar under header -->
                         <HBox alignment="CENTER_LEFT" spacing="10" styleClass="top-toolbar"
                               BorderPane.alignment="CENTER">
-                            <Label minWidth="-Infinity" text="Name:"/>
-                            <TextField fx:id="titleTextField" prefWidth="260" promptText="Untitled"
+
+                            <Label minWidth="-Infinity" text="Window Title:"/>
+                            <TextField fx:id="titleTextField" prefWidth="260" promptText="Enter Window Title"
                                        styleClass="title-name-field"/>
-                            <ComboBox prefWidth="150.0" styleClass="dark"/>
-                            <Label minWidth="-Infinity" text="Preview"/>
-                            <Separator orientation="VERTICAL"/>
                             <Pane HBox.hgrow="ALWAYS"/>
-                            <Button styleClass="light">
-                                <graphic>
-                                    <StackPane>
-                                        <styleClass>
-                                            <String fx:value="icon"/>
-                                            <String fx:value="share"/>
-                                        </styleClass>
-                                    </StackPane>
-                                </graphic>
-                            </Button>
-                            <Button styleClass="light">
-                                <graphic>
-                                    <StackPane>
-                                        <styleClass>
-                                            <String fx:value="icon"/>
-                                            <String fx:value="duplicate"/>
-                                        </styleClass>
-                                    </StackPane>
-                                </graphic>
-                            </Button>
-                            <Button styleClass="dark" text="SAVE AS TEMPLATE"/>
-                            <Separator orientation="VERTICAL" prefHeight="200.0"/>
-                            <Button styleClass="dark" text="CANCEL"/>
-                            <Button defaultButton="true" onAction="#onSave" text="SAVE"/>
+                            <Button defaultButton="true" fx:id="saveButton" onAction="#onSave" text="SAVE WINDOW"/>
                         </HBox>
                     </top>
                     <right>
@@ -89,34 +64,33 @@
                 <VBox styleClass="pattern-browser" BorderPane.alignment="CENTER">
                     <!-- Sidebar header -->
                     <HBox alignment="CENTER_LEFT" spacing="8" styleClass="header">
-                        <Button mnemonicParsing="false" styleClass="clear-button">
-                            <graphic>
-                                <StackPane prefHeight="0.0" prefWidth="0.0">
-                                    <styleClass>
-                                        <String fx:value="icon"/>
-                                        <String fx:value="cross"/>
-                                    </styleClass>
-                                </StackPane>
-                            </graphic>
-                            <HBox.margin>
-                                <Insets left="10.0"/>
-                            </HBox.margin>
-                        </Button>
                         <Label alignment="CENTER" maxWidth="1.7976931348623157E308" styleClass="sidebar-title"
-                               text="Pattern and Semantic Library" wrapText="true" HBox.hgrow="ALWAYS"/>
+                               text="Pattern and Control Library" wrapText="true" HBox.hgrow="ALWAYS"/>
                     </HBox>
                     <VBox styleClass="content-container" VBox.vgrow="ALWAYS">
                         <children>
                             <!-- Search + options row -->
                             <HBox spacing="8" styleClass="search-container">
-                                <TextField promptText="Search patterns" HBox.hgrow="ALWAYS">
+                                <TextField promptText="Search patterns and controls" HBox.hgrow="ALWAYS">
                                 </TextField>
                                 <padding>
                                     <Insets bottom="8" left="12" right="12" top="0"/>
                                 </padding>
                             </HBox>
-                            <ListView fx:id="patternBrowserListView" prefHeight="200.0" prefWidth="200.0"
-                                      VBox.vgrow="ALWAYS"/>
+                            <TitledPane text="Patterns" VBox.vgrow="ALWAYS">
+                                <ListView fx:id="patternBrowserListView"/>
+                                <styleClass>
+                                    <String fx:value="dark"/>
+                                    <String fx:value="patterns-titled-pane"/>
+                                </styleClass>
+                            </TitledPane>
+                            <TitledPane text="Controls" >
+                                <ListView fx:id="controlsListView" />
+                                <styleClass>
+                                    <String fx:value="dark"/>
+                                    <String fx:value="controls-titled-pane"/>
+                                </styleClass>
+                            </TitledPane>
                         </children>
                     </VBox>
                 </VBox>

knowledge-layout-editor/src/main/resources/dev/ikm/komet/kleditorapp/view/kl-core.css

@@ -247,3 +247,21 @@
 .titled-pane > *.content {
      -fx-border-width: 0;
 }
+
+/************ Titled Pane Dark mode *************/
+
+.titled-pane.dark > .title {
+    -fx-background-color: -Grey-9;
+}
+
+.titled-pane.dark > .title > .text {
+    -fx-fill: #f0f0f0;
+}
+
+.titled-pane.dark > .title > .arrow-button > .arrow {
+    -fx-background-color: #f0f0f0;
+}
+
+.titled-pane.dark > *.content {
+    -fx-background-color: -Grey-9;
+}