chore(react/promoted_attributes): improve boolean handling

apps/client/src/stylesheets/theme-next/shell.css

@@ -1428,9 +1428,7 @@ div.promoted-attribute-cell .tn-checkbox {
     height: 1cap;
 }
 
-/* Relocate the checkbox before the label */
 div.promoted-attribute-cell.promoted-attribute-label-boolean > div:first-of-type {
-    order: -1;
     margin-inline-end: 1.5em;
 }
 

apps/client/src/widgets/PromotedAttributes.tsx

@@ -115,10 +115,8 @@ function PromotedAttributeCell(props: CellProps) {
     return (
         <div className={clsx("promoted-attribute-cell",
             valueAttr.type === "label" ? `promoted-attribute-label-${definition.labelType}` : "promoted-attribute-relation")}>
-            <label for={inputId}>{definition.promotedAlias ?? valueName}</label>{' '}
+            {definition.labelType !== "boolean" && <label for={inputId}>{definition.promotedAlias ?? valueName}</label>}
-            <div className="input-group">
             <LabelInput inputId={inputId} {...props} />
-            </div>
             <ActionCell />
             <MultiplicityCell {...props} />
         </div>
@@ -137,7 +135,7 @@ const LABEL_MAPPINGS: Record<LabelType, HTMLInputTypeAttribute> = {
 };
 
 function LabelInput({ inputId, ...props }: CellProps & { inputId: string }) {
-    const { valueAttr, definition, definitionAttr } = props.cell;
+    const { valueName, valueAttr, definition, definitionAttr } = props.cell;
     const onChangeListener = buildPromotedAttributeChangedListener({...props});
     const extraInputProps: InputHTMLAttributes = {};
 
@@ -165,9 +163,7 @@ function LabelInput({ inputId, ...props }: CellProps & { inputId: string }) {
         }
     }
 
-    return (
+    const inputNode = <input
-        <>
-            <input
         className="form-control promoted-attribute-input"
         tabIndex={200 + definitionAttr.position}
         id={inputId}
@@ -179,8 +175,19 @@ function LabelInput({ inputId, ...props }: CellProps & { inputId: string }) {
         data-attribute-name={valueAttr.name}
         onChange={onChangeListener}
         {...extraInputProps}
-            />
+    />;
 
+    if (definition.labelType === "boolean") {
+        return <>
+            <div>
+                <label className="tn-checkbox">{inputNode}</label>
+            </div>
+            <label for={inputId}>{definition.promotedAlias ?? valueName}</label>
+        </>
+    } else {
+        return (
+            <div className="input-group">
+                {inputNode}
                 { definition.labelType === "color" && <ColorPicker {...props} onChange={onChangeListener} inputId={inputId} />}
                 { definition.labelType === "url" && (
                     <InputButton
@@ -196,8 +203,9 @@ function LabelInput({ inputId, ...props }: CellProps & { inputId: string }) {
                         }}
                     />
                 )}
-        </>
+            </div>
         );
+    }
 }
 
 

apps/client/src/widgets/promoted_attributes.ts

@@ -1,18 +1,3 @@
-import { t } from "../services/i18n.js";
-import server from "../services/server.js";
-import ws from "../services/ws.js";
-import treeService from "../services/tree.js";
-import noteAutocompleteService from "../services/note_autocomplete.js";
-import NoteContextAwareWidget from "./note_context_aware_widget.js";
-import attributeService from "../services/attributes.js";
-import options from "../services/options.js";
-import utils from "../services/utils.js";
-import type FNote from "../entities/fnote.js";
-import type { Attribute } from "../services/attribute_parser.js";
-import type FAttribute from "../entities/fattribute.js";
-import type { EventData } from "../components/app_context.js";
-
-
 export default class PromotedAttributesWidget extends NoteContextAwareWidget {
 
     async createPromotedAttributeCell(definitionAttr: FAttribute, valueAttr: Attribute, valueName: string) {