#204: Improve the aesthetics of the Pattern Browser

Author: dukke

framework/src/main/java/dev/ikm/komet/framework/controls/KonceptBadge.java

@@ -256,6 +256,8 @@ public enum PopoutPosition {
     private PremiseType premiseType = PremiseType.INFERRED;
     private KonceptStatus status = KonceptStatus.NONE;
     private KonceptKind kind = KonceptKind.CONCEPT;
+    /** See {@link #setKindSigilShown}. */
+    private boolean kindSigilShown = true;
     /** Letter-sigil size (px), {@link #SIGIL_TO_NAME} of the current name font. */
     private double letterSigilSize = SC_FONT_SIZE * SIGIL_TO_NAME;
     /** Pentagon edge (px), {@link #PENTAGON_TO_ICON} of the current identicon edge. */
@@ -712,11 +714,25 @@ public final void setKind(KonceptKind kind) {
     }
 
     /**
-     * Shows the sigil slot when the kind has a sigil and the glyph settings show sigils
-     * (ikmdev/komet-desktop#153); an empty or hidden slot collapses so it opens no gap.
+     * Whether this badge shows its kind sigil at all, on top of the glyph settings: a surface that
+     * lists one kind only (the pattern browser lists patterns and nothing else) turns it off, since
+     * the letter would say nothing there. On by default. The drag glyph keeps the sigil either way:
+     * dragged into a surface that mixes kinds, the badge states its kind again.
+     *
+     * @param shown {@code false} hides the sigil on this badge; {@code true} leaves it to the settings
+     */
+    public final void setKindSigilShown(boolean shown) {
+        this.kindSigilShown = shown;
+        applySigilVisibility();
+    }
+
+    /**
+     * Shows the sigil slot when the kind has a sigil, the glyph settings show sigils
+     * (ikmdev/komet-desktop#153) and the badge {@link #setKindSigilShown shows it}; an empty or
+     * hidden slot collapses so it opens no gap.
      */
     private void applySigilVisibility() {
-        boolean visible = kind.hasSigil() && showKindSigil.getValue();
+        boolean visible = kind.hasSigil() && showKindSigil.getValue() && kindSigilShown;
         sigilBox.setManaged(visible);
         sigilBox.setVisible(visible);
     }

framework/src/test/java/dev/ikm/komet/framework/controls/KonceptBadgeKindUTestFX.java

@@ -104,6 +104,24 @@ void settingKindBackToConceptClearsTheSigil() {
         assertFalse(badge.isConceptViolation());
     }
 
+    @Test
+    void aBadgeCanHideItsSigilWhereTheKindIsAGiven() {
+        KonceptBadge badge = badge();
+        badge.setKind(KonceptKind.PATTERN);
+        assertTrue(sigilBox(badge).isManaged(), "a pattern shows its P by default");
+
+        // A surface listing one kind only (the pattern browser) turns the sigil off; the kind and
+        // its sigil node stay, so the badge still drags with its P.
+        badge.setKindSigilShown(false);
+        assertFalse(sigilBox(badge).isManaged(), "the hidden slot collapses");
+        assertFalse(sigilBox(badge).isVisible());
+        assertEquals(KonceptKind.PATTERN, badge.getKind());
+        assertFalse(sigilBox(badge).getChildrenUnmodifiable().isEmpty(), "the sigil node is kept");
+
+        badge.setKindSigilShown(true);
+        assertTrue(sigilBox(badge).isManaged(), "shown again, the settings decide");
+    }
+
     @Test
     void alarmTriggersOnlyForANonConceptInAConceptExpectingContext() {
         KonceptBadge badge = badge();

kview/src/main/java/dev/ikm/komet/kview/mvvm/view/navigation/ConceptPatternNavController.java

@@ -435,6 +435,7 @@ public static VBox createPatternsPanel(Node searchTextField, ScrollPane patternL
         StackPane searchContainer = new StackPane(searchTextField);
         searchContainer.getStyleClass().add("pattern-navigation-search");
         VBox panel = new VBox(searchContainer, patternList);
+        panel.getStyleClass().add("pattern-browser");
         VBox.setVgrow(patternList, Priority.ALWAYS);
         return panel;
     }

kview/src/main/java/dev/ikm/komet/kview/mvvm/view/navigation/PatternNavEntryController.java

@@ -177,6 +177,9 @@ private void initialize() {
         // to the raw nid and the row would read "-2147477853".
         patternBadge.setConceptName(
                 ViewCalculatorUtils.retrieveDisplayName((PatternFacade) patternFacade, vProperties));
+        // The browser lists patterns and nothing else, so the P sigil would only repeat the column's
+        // title; the badge still drags with it, into surfaces that mix kinds.
+        patternBadge.setKindSigilShown(false);
         // Sized to this row rather than the badge's inline default, which is scaled for sitting
         // beside body text and renders far too small in a navigation list. The badge sets its
         // fonts in code, so the stylesheet's root size cannot reach it: the row follows the text
@@ -331,8 +334,10 @@ public boolean hasFilterMatches() {
 
     private void updateListViewPrefHeight() {
         int itemsNumber = patternInstancesListView.getItems().size();
-        /* adding a number to LIST_VIEW_CELL_SIZE to account for padding, etc */
-        double newPrefHeight = itemsNumber * (LIST_VIEW_CELL_SIZE + 10);
+        // The rows plus the list's own insets, so the list is exactly as tall as its content: any
+        // slack shows as a blank band, and any shortfall as a scrollbar.
+        double newPrefHeight = itemsNumber * LIST_VIEW_CELL_SIZE
+                + patternInstancesListView.snappedTopInset() + patternInstancesListView.snappedBottomInset();
         double maxHeight = patternInstancesListView.getMaxHeight();
 
         patternInstancesListView.setPrefHeight(Math.min(newPrefHeight, maxHeight));

kview/src/main/java/dev/ikm/komet/kview/mvvm/view/navigation/PatternSemanticListCell.java

@@ -50,6 +50,10 @@ public PatternSemanticListCell(Function<Long, String> fetchDescriptionByNid,
         this.viewProperties = viewProperties;
 
         setContentDisplay(ContentDisplay.GRAPHIC_ONLY);
+        // The row takes the list's width rather than asking for its content's: a long title would
+        // otherwise widen the list and bring in a horizontal scrollbar, which steals height and
+        // then a vertical one.
+        setPrefWidth(0);
 
         label = new Label();
         label.setMaxWidth(Double.MAX_VALUE);

kview/src/main/resources/dev/ikm/komet/kview/mvvm/view/kview.css

@@ -3765,12 +3765,10 @@ Timeline Year line segment (will overlay change circles)
     -fx-graphic-text-gap: 9px;
 }
 
+/* The row's title takes the width the row gives it (it grows in the row and ellipsizes); a fixed
+   354px here used to overflow the browser's tiles and bring in a horizontal scrollbar. */
 .pattern-instance-hbox .pattern-instance {
-    width: 354px;
-
-    -fx-min-width: width;
-    -fx-pref-width: width;
-    -fx-max-width: width;
+    -fx-min-width: 0;
 
     -fx-padding: 0 10 0 0;
 
@@ -5530,9 +5528,14 @@ Styling a context menu for kview ui/ux controls
 
 /* Pattern Browser ScrollPane */
 
+/* The PATTERNS side of the navigator: a light column (the mockup's), the scroll pane showing it through. */
+.pattern-browser {
+    -fx-background-color: #E7EBF1;
+}
+
 .pattern-navigation-scroll-pane,
 .pattern-navigation-scroll-pane > .viewport {
-    -fx-background-color: #545d72;
+    -fx-background-color: transparent;
 }
 
 .pattern-navigation-scroll-pane > .scroll-bar:vertical {
@@ -5556,8 +5559,59 @@ Styling a context menu for kview ui/ux controls
 }
 
 .pattern-navigation-container {
-    -fx-spacing: 4px;
-    -fx-padding: 0 2px 0 12px;
+    -fx-spacing: 6px;
+    -fx-padding: 0 2px 8px 12px;
+}
+
+/* A pattern card: white, a hairline border, softly rounded. */
+.pattern-instance-container {
+    -fx-background-color: white;
+    -fx-background-radius: 3px;
+    -fx-border-color: -Grey-5;
+    -fx-border-width: 1;
+    -fx-border-radius: 3px;
+}
+
+/* The card's SEMANTIC ELEMENTS pane: one thin blue rounded frame around the bar and, when
+   expanded, the light wash the instance rows sit on. Scoped to the browser — the same titled-pane
+   class also dresses the next-gen search's result entries, which keep their look. */
+.pattern-browser .search-entry-title-pane {
+    -fx-border-color: -Secondary-05;
+    -fx-border-width: 1;
+    -fx-border-radius: 4px;
+    -fx-background-color: transparent;
+    -fx-background-radius: 4px;
+}
+
+.pattern-browser .titled-pane.search-entry-title-pane > .title {
+    -fx-background-color: white;
+    -fx-background-radius: 4px;
+    -fx-padding: 5 8 5 8;
+}
+
+.pattern-browser .titled-pane.search-entry-title-pane:expanded > .title {
+    -fx-background-radius: 4px 4px 0 0;
+}
+
+.pattern-browser .titled-pane.search-entry-title-pane > .title > .arrow-button .arrow {
+    -fx-background-color: -Secondary-05;
+}
+
+.pattern-browser .titled-pane.search-entry-title-pane > .title > .text {
+    -fx-fill: -Grey-9;
+    -fx-background-color: transparent;
+}
+
+/* Expanding a card used to wrap it in a 3px blue frame on a grey wash; here the card stays a white
+   card and only the pane below the bar takes the wash. */
+.pattern-browser .search-entry-title-pane-pattern {
+    -fx-border-width: 0;
+    -fx-background-color: transparent;
+}
+
+.pattern-browser .search-entry-title-pane > .content {
+    -fx-background-color: -Grey-2;
+    -fx-background-radius: 0 0 4px 4px;
 }
 
 /* The reference-component search over the pattern list (a ComponentSearchTextField, styled with the

kview/src/test/java/dev/ikm/komet/kview/mvvm/view/navigation/test/PatternBrowserSearchUTestFX.java

@@ -23,9 +23,16 @@
 import dev.ikm.tinkar.common.service.ServiceKeys;
 import dev.ikm.tinkar.common.service.ServiceProperties;
 import dev.ikm.tinkar.coordinate.Calculators;
+import javafx.geometry.Insets;
 import javafx.scene.Scene;
+import javafx.scene.control.ContentDisplay;
+import javafx.scene.control.Label;
+import javafx.scene.control.ListView;
 import javafx.scene.control.ScrollPane;
 import javafx.scene.control.TextField;
+import javafx.scene.control.TitledPane;
+import javafx.scene.layout.HBox;
+import javafx.scene.layout.Priority;
 import javafx.scene.layout.Region;
 import javafx.scene.layout.VBox;
 import org.junit.jupiter.api.AfterAll;
@@ -74,18 +81,23 @@ void showBrowser() throws Exception {
         FxToolkit.setupStage(stage -> {
             ComponentSearchTextField searchTextField = KLComponentControlFactory.createComponentSearchTextField(Calculators.View.Default());
             searchTextField.setPromptText("Search instances by component");
-            // A list far taller than the column, as the real browser's is: the search row must not
-            // be squeezed to make room for it.
+            // Two stand-in cards in the entry FXML's shape (pattern-nav-entry.fxml), one expanded with
+            // a filter count, to see the browser's card styling — then a list far taller than the
+            // column, as the real browser's is: the search row must not be squeezed to make room.
+            VBox cards = new VBox(card("Description Pattern", true), card("Identifier Pattern", false));
+            cards.getStyleClass().add("pattern-navigation-container");
             Region tallList = new Region();
             tallList.setPrefHeight(4000);
-            ScrollPane patternList = new ScrollPane(tallList);
+            cards.getChildren().add(tallList);
+            ScrollPane patternList = new ScrollPane(cards);
+            patternList.setFitToWidth(true);
             patternList.getStyleClass().add("pattern-navigation-scroll-pane");
             VBox patternsPanel = ConceptPatternNavController.createPatternsPanel(searchTextField, patternList);
             column = new VBox(patternsPanel);
             column.getStyleClass().addAll("concept-pattern-container", "grey-vertical-scroll-area");
             column.getStylesheets().add(ComponentSearchTextField.class
                     .getResource("/dev/ikm/komet/kview/mvvm/view/kview.css").toExternalForm());
-            stage.setScene(new Scene(column, 430, 300));
+            stage.setScene(new Scene(column, 430, 420));
             stage.show();
         });
         FxToolkit.setupFixture(() -> column.applyCss());
@@ -96,6 +108,36 @@ void hideBrowser() throws Exception {
         FxToolkit.cleanupStages();
     }
 
+    /** A pattern card as pattern-nav-entry.fxml and PatternNavEntryController build one, by style class. */
+    private static HBox card(String name, boolean expanded) {
+        Label title = new Label(name);
+        HBox titleRow = new HBox(title);
+        titleRow.getStyleClass().add("pattern-title-container");
+
+        ListView<String> instances = new ListView<>();
+        instances.getStyleClass().add("pattern-instances-list-view");
+        instances.setPrefHeight(90);
+        TitledPane pane = new TitledPane("SEMANTIC ELEMENTS", instances);
+        pane.getStyleClass().add("search-entry-title-pane");
+        pane.setAnimated(false);
+        VBox.setMargin(pane, new Insets(0, 8, 8, 8));
+
+        VBox main = new VBox(titleRow, pane);
+        if (expanded) {
+            main.getStyleClass().add("search-entry-title-pane-pattern");
+            Label count = new Label("3");
+            count.getStyleClass().add("semantic-elements-count");
+            pane.setContentDisplay(ContentDisplay.RIGHT);
+            pane.setGraphic(count);
+        }
+        pane.setExpanded(expanded);
+
+        HBox card = new HBox(main);
+        HBox.setHgrow(main, Priority.ALWAYS);
+        card.getStyleClass().addAll("search-entry-hbox", "pattern-instance-container");
+        return card;
+    }
+
     @Test
     @DisplayName("The search field takes the box styling (30px tall) and renders to target/pattern-browser-search/search.png")
     void searchFieldIsStyled() {