further style adjustments; cargo-run works

styles/src/styleTree/assistant.ts

@@ -1,85 +1,94 @@
 import { ColorScheme } from "../theme/colorScheme"
 import { text, border, background, foreground } from "./components"
 import editor from "./editor"
+import { interactive } from "./interactive"
 
 export default function assistant(colorScheme: ColorScheme) {
-    const layer = colorScheme.highest
-    return {
-        container: {
-            background: editor(colorScheme).background,
-            padding: { left: 12 },
-        },
-        header: {
-            border: border(layer, "default", { bottom: true, top: true }),
-            margin: { bottom: 6, top: 6 },
-            background: editor(colorScheme).background,
-        },
-        userSender: {
-            ...text(layer, "sans", "default", { size: "sm", weight: "bold" }),
-        },
-        assistantSender: {
-            ...text(layer, "sans", "accent", { size: "sm", weight: "bold" }),
-        },
-        systemSender: {
-            ...text(layer, "sans", "variant", { size: "sm", weight: "bold" }),
-        },
-        sentAt: {
-            margin: { top: 2, left: 8 },
-            ...text(layer, "sans", "default", { size: "2xs" }),
-        },
-        modelInfoContainer: {
-            margin: { right: 16, top: 4 },
-        },
-        model: {
-            background: background(layer, "on"),
-            border: border(layer, "on", { overlay: true }),
-            padding: 4,
-            cornerRadius: 4,
-            ...text(layer, "sans", "default", { size: "xs" }),
-            hover: {
-                background: background(layer, "on", "hovered"),
-            },
-        },
-        remainingTokens: {
-            background: background(layer, "on"),
-            border: border(layer, "on", { overlay: true }),
-            padding: 4,
-            margin: { left: 4 },
-            cornerRadius: 4,
-            ...text(layer, "sans", "positive", { size: "xs" }),
-        },
-        noRemainingTokens: {
-            background: background(layer, "on"),
-            border: border(layer, "on", { overlay: true }),
-            padding: 4,
-            margin: { left: 4 },
-            cornerRadius: 4,
-            ...text(layer, "sans", "negative", { size: "xs" }),
-        },
-        errorIcon: {
-            margin: { left: 8 },
-            color: foreground(layer, "negative"),
-            width: 12,
-        },
-        apiKeyEditor: {
-            background: background(layer, "on"),
-            cornerRadius: 6,
-            text: text(layer, "mono", "on"),
-            placeholderText: text(layer, "mono", "on", "disabled", {
-                size: "xs",
-            }),
-            selection: colorScheme.players[0],
-            border: border(layer, "on"),
-            padding: {
-                bottom: 4,
-                left: 8,
-                right: 8,
-                top: 4,
-            },
-        },
-        apiKeyPrompt: {
-            padding: 10,
-            ...text(layer, "sans", "default", { size: "xs" }),
-        },
-    }
+  const layer = colorScheme.highest
+  return {
+    container: {
+      background: editor(colorScheme).background,
+      padding: { left: 12 },
+    },
+    header: {
+      border: border(layer, "default", { bottom: true, top: true }),
+      margin: { bottom: 6, top: 6 },
+      background: editor(colorScheme).background,
+    },
+    userSender: {
+      default:
+        { ...text(layer, "sans", "default", { size: "sm", weight: "bold" }) },
+    },
+    assistantSender: {
+      default: {
+        ...text(layer, "sans", "accent", { size: "sm", weight: "bold" })
+      },
+    },
+    systemSender: {
+      default: {
+        ...text(layer, "sans", "variant", { size: "sm", weight: "bold" })
+      },
+    },
+    sentAt: {
+      margin: { top: 2, left: 8 },
+      ...text(layer, "sans", "default", { size: "2xs" }),
+    },
+    modelInfoContainer: {
+      margin: { right: 16, top: 4 },
+    },
+    model: interactive({
+      base: {
+        background: background(layer, "on"),
+        border: border(layer, "on", { overlay: true }),
+        padding: 4,
+        cornerRadius: 4,
+        ...text(layer, "sans", "default", { size: "xs" }),
+      }, state: {
+        hovered: {
+          background: background(layer, "on", "hovered"),
+        }
+      }
+    }),
+    remainingTokens: {
+      background: background(layer, "on"),
+      border: border(layer, "on", { overlay: true }),
+      padding: 4,
+      margin: { left: 4 },
+      cornerRadius: 4,
+      ...text(layer, "sans", "positive", { size: "xs" }),
+    },
+    noRemainingTokens: {
+      background: background(layer, "on"),
+      border: border(layer, "on", { overlay: true }),
+      padding: 4,
+      margin: { left: 4 },
+      cornerRadius: 4,
+      ...text(layer, "sans", "negative", { size: "xs" }),
+    },
+    errorIcon: {
+      margin: { left: 8 },
+      color: foreground(layer, "negative"),
+      width: 12,
+    },
+    apiKeyEditor: {
+      background: background(layer, "on"),
+      cornerRadius: 6,
+      text: text(layer, "mono", "on"),
+      placeholderText: text(layer, "mono", "on", "disabled", {
+        size: "xs",
+      }),
+      selection: colorScheme.players[0],
+      border: border(layer, "on"),
+      padding: {
+        bottom: 4,
+        left: 8,
+        right: 8,
+        top: 4,
+      },
+    },
+    apiKeyPrompt: {
+      padding: 10,
+      ...text(layer, "sans", "default", { size: "xs" }),
+    },
+  }
 }

styles/src/styleTree/contactList.ts

@@ -192,24 +192,27 @@ export default function contactsPanel(colorScheme: ColorScheme) {
         },
       }
     ),
-    projectRow: {
-      ...projectRow,
-      background: background(layer),
-      icon: {
-        margin: { left: nameMargin },
-        color: foreground(layer, "variant"),
-        width: 12,
-      },
-      name: {
-        ...projectRow.name,
-        ...text(layer, "mono", { size: "sm" }),
-      },
-      hover: {
-        background: background(layer, "hovered"),
-      },
-      active: {
-        background: background(layer, "active"),
-      },
-    },
+    projectRow: toggleable(interactive({
+      base: {
+        ...projectRow,
+        background: background(layer),
+        icon: {
+          margin: { left: nameMargin },
+          color: foreground(layer, "variant"),
+          width: 12,
+        },
+        name: {
+          ...projectRow.name,
+          ...text(layer, "mono", { size: "sm" }),
+        },
+      }, state: {
+        hovered: {
+          background: background(layer, "hovered"),
+        },
+      }
+    }),
+      {
+        default: { background: background(layer, "active") }
+      })
   }
 }

styles/src/styleTree/feedback.ts

@@ -1,44 +1,48 @@
 import { ColorScheme } from "../theme/colorScheme"
 import { background, border, text } from "./components"
+import { interactive } from "./interactive"
 
 export default function feedback(colorScheme: ColorScheme) {
-    let layer = colorScheme.highest
+  let layer = colorScheme.highest
 
-    return {
-        submit_button: {
-            ...text(layer, "mono", "on"),
-            background: background(layer, "on"),
-            cornerRadius: 6,
-            border: border(layer, "on"),
-            margin: {
-                right: 4,
-            },
-            padding: {
-                bottom: 2,
-                left: 10,
-                right: 10,
-                top: 2,
-            },
-            clicked: {
-                ...text(layer, "mono", "on", "pressed"),
-                background: background(layer, "on", "pressed"),
-                border: border(layer, "on", "pressed"),
-            },
-            hover: {
-                ...text(layer, "mono", "on", "hovered"),
-                background: background(layer, "on", "hovered"),
-                border: border(layer, "on", "hovered"),
-            },
+  return {
+    submit_button: interactive({
+      base: {
+        ...text(layer, "mono", "on"),
+        background: background(layer, "on"),
+        cornerRadius: 6,
+        border: border(layer, "on"),
+        margin: {
+          right: 4,
         },
-        button_margin: 8,
-        info_text_default: text(layer, "sans", "default", { size: "xs" }),
-        link_text_default: text(layer, "sans", "default", {
-            size: "xs",
-            underline: true,
-        }),
-        link_text_hover: text(layer, "sans", "hovered", {
-            size: "xs",
-            underline: true,
-        }),
-    }
+        padding: {
+          bottom: 2,
+          left: 10,
+          right: 10,
+          top: 2,
+        }
+      }, state: {
+        clicked: {
+          ...text(layer, "mono", "on", "pressed"),
+          background: background(layer, "on", "pressed"),
+          border: border(layer, "on", "pressed"),
+        },
+        hovered: {
+          ...text(layer, "mono", "on", "hovered"),
+          background: background(layer, "on", "hovered"),
+          border: border(layer, "on", "hovered"),
+        },
+      }
+    }),
+    button_margin: 8,
+    info_text_default: text(layer, "sans", "default", { size: "xs" }),
+    link_text_default: text(layer, "sans", "default", {
+      size: "xs",
+      underline: true,
+    }),
+    link_text_hover: text(layer, "sans", "hovered", {
+      size: "xs",
+      underline: true,
+    }),
+  }
 }

styles/src/styleTree/search.ts

@@ -1,113 +1,123 @@
 import { ColorScheme } from "../theme/colorScheme"
 import { withOpacity } from "../theme/color"
 import { background, border, foreground, text } from "./components"
+import { interactive } from "./interactive"
+import { toggleable } from "./toggle"
 
 export default function search(colorScheme: ColorScheme) {
-    let layer = colorScheme.highest
+  let layer = colorScheme.highest
 
-    // Search input
-    const editor = {
-        background: background(layer),
-        cornerRadius: 8,
-        minWidth: 200,
-        maxWidth: 500,
-        placeholderText: text(layer, "mono", "disabled"),
-        selection: colorScheme.players[0],
-        text: text(layer, "mono", "default"),
-        border: border(layer),
+  // Search input
+  const editor = {
+    background: background(layer),
+    cornerRadius: 8,
+    minWidth: 200,
+    maxWidth: 500,
+    placeholderText: text(layer, "mono", "disabled"),
+    selection: colorScheme.players[0],
+    text: text(layer, "mono", "default"),
+    border: border(layer),
+    margin: {
+      right: 12,
+    },
+    padding: {
+      top: 3,
+      bottom: 3,
+      left: 12,
+      right: 8,
+    },
+  }
+
+  const includeExcludeEditor = {
+    ...editor,
+    minWidth: 100,
+    maxWidth: 250,
+  }
+
+  return {
+    // TODO: Add an activeMatchBackground on the rust side to differentiate between active and inactive
+    matchBackground: withOpacity(foreground(layer, "accent"), 0.4),
+    optionButton: toggleable(interactive({
+      base: {
+        ...text(layer, "mono", "on"),
+        background: background(layer, "on"),
+        cornerRadius: 6,
+        border: border(layer, "on"),
         margin: {
-            right: 12,
+          right: 4,
         },
         padding: {
-            top: 3,
-            bottom: 3,
-            left: 12,
-            right: 8,
+          bottom: 2,
+          left: 10,
+          right: 10,
+          top: 2,
         },
-    }
+      }, state: {
+        clicked: {
+          ...text(layer, "mono", "on", "pressed"),
+          background: background(layer, "on", "pressed"),
+          border: border(layer, "on", "pressed"),
+        },
+        hovered: {
+          ...text(layer, "mono", "on", "hovered"),
+          background: background(layer, "on", "hovered"),
+          border: border(layer, "on", "hovered"),
+        },
+      }
+    }), {
+      default: {
+        ...text(layer, "mono", "on", "inverted"),
+        background: background(layer, "on", "inverted"),
+        border: border(layer, "on", "inverted"),
+      },
 
-    const includeExcludeEditor = {
-        ...editor,
-        minWidth: 100,
-        maxWidth: 250,
-    }
-
-    return {
-        // TODO: Add an activeMatchBackground on the rust side to differentiate between active and inactive
-        matchBackground: withOpacity(foreground(layer, "accent"), 0.4),
-        optionButton: {
-            ...text(layer, "mono", "on"),
-            background: background(layer, "on"),
-            cornerRadius: 6,
-            border: border(layer, "on"),
-            margin: {
-                right: 4,
-            },
-            padding: {
-                bottom: 2,
-                left: 10,
-                right: 10,
-                top: 2,
-            },
-            active: {
-                ...text(layer, "mono", "on", "inverted"),
-                background: background(layer, "on", "inverted"),
-                border: border(layer, "on", "inverted"),
-            },
-            clicked: {
-                ...text(layer, "mono", "on", "pressed"),
-                background: background(layer, "on", "pressed"),
-                border: border(layer, "on", "pressed"),
-            },
-            hover: {
-                ...text(layer, "mono", "on", "hovered"),
-                background: background(layer, "on", "hovered"),
-                border: border(layer, "on", "hovered"),
-            },
+    }),
+    editor,
+    invalidEditor: {
+      ...editor,
+      border: border(layer, "negative"),
+    },
+    includeExcludeEditor,
+    invalidIncludeExcludeEditor: {
+      ...includeExcludeEditor,
+      border: border(layer, "negative"),
+    },
+    matchIndex: {
+      ...text(layer, "mono", "variant"),
+      padding: {
+        left: 6,
+      },
+    },
+    optionButtonGroup: {
+      padding: {
+        left: 12,
+        right: 12,
+      },
+    },
+    includeExcludeInputs: {
+      ...text(layer, "mono", "variant"),
+      padding: {
+        right: 6,
+      },
+    },
+    resultsStatus: {
+      ...text(layer, "mono", "on"),
+      size: 18,
+    },
+    dismissButton: interactive({
+      base: {
+        color: foreground(layer, "variant"),
+        iconWidth: 12,
+        buttonWidth: 14,
+        padding: {
+          left: 10,
+          right: 10,
         },
-        editor,
-        invalidEditor: {
-            ...editor,
-            border: border(layer, "negative"),
-        },
-        includeExcludeEditor,
-        invalidIncludeExcludeEditor: {
-            ...includeExcludeEditor,
-            border: border(layer, "negative"),
-        },
-        matchIndex: {
-            ...text(layer, "mono", "variant"),
-            padding: {
-                left: 6,
-            },
-        },
-        optionButtonGroup: {
-            padding: {
-                left: 12,
-                right: 12,
-            },
-        },
-        includeExcludeInputs: {
-            ...text(layer, "mono", "variant"),
-            padding: {
-                right: 6,
-            },
-        },
-        resultsStatus: {
-            ...text(layer, "mono", "on"),
-            size: 18,
-        },
-        dismissButton: {
-            color: foreground(layer, "variant"),
-            iconWidth: 12,
-            buttonWidth: 14,
-            padding: {
-                left: 10,
-                right: 10,
-            },
-            hover: {
-                color: foreground(layer, "hovered"),
-            },
-        },
-    }
+      }, state: {
+        hovered: {
+          color: foreground(layer, "hovered"),
+        }
+      }
+    }),
+  }
 }

styles/src/styleTree/simpleMessageNotification.ts

@@ -1,44 +1,51 @@
 import { ColorScheme } from "../theme/colorScheme"
 import { background, border, foreground, text } from "./components"
+import { interactive } from "./interactive"
 
 const headerPadding = 8
 
 export default function simpleMessageNotification(
-    colorScheme: ColorScheme
+  colorScheme: ColorScheme
 ): Object {
-    let layer = colorScheme.middle
-    return {
-        message: {
-            ...text(layer, "sans", { size: "xs" }),
-            margin: { left: headerPadding, right: headerPadding },
+  let layer = colorScheme.middle
+  return {
+    message: {
+      ...text(layer, "sans", { size: "xs" }),
+      margin: { left: headerPadding, right: headerPadding },
+    },
+    actionMessage: interactive({
+      base: {
+        ...text(layer, "sans", { size: "xs" }),
+        border: border(layer, "active"),
+        cornerRadius: 4,
+        padding: {
+          top: 3,
+          bottom: 3,
+          left: 7,
+          right: 7,
         },
-        actionMessage: {
-            ...text(layer, "sans", { size: "xs" }),
-            border: border(layer, "active"),
-            cornerRadius: 4,
-            padding: {
-                top: 3,
-                bottom: 3,
-                left: 7,
-                right: 7,
-            },
 
-            margin: { left: headerPadding, top: 6, bottom: 6 },
-            hover: {
-                ...text(layer, "sans", "default", { size: "xs" }),
-                background: background(layer, "hovered"),
-                border: border(layer, "active"),
-            },
+        margin: { left: headerPadding, top: 6, bottom: 6 },
+      }, state: {
+        hovered: {
+          ...text(layer, "sans", "default", { size: "xs" }),
+          background: background(layer, "hovered"),
+          border: border(layer, "active"),
         },
-        dismissButton: {
-            color: foreground(layer),
-            iconWidth: 8,
-            iconHeight: 8,
-            buttonWidth: 8,
-            buttonHeight: 8,
-            hover: {
-                color: foreground(layer, "hovered"),
-            },
+      }
+    }),
+    dismissButton: interactive({
+      base: {
+        color: foreground(layer),
+        iconWidth: 8,
+        iconHeight: 8,
+        buttonWidth: 8,
+        buttonHeight: 8,
+      }, state: {
+        hovered: {
+          color: foreground(layer, "hovered"),
         },
-    }
+      }
+    })
+  }
 }

styles/src/styleTree/toolbarDropdownMenu.ts

@@ -1,46 +1,56 @@
 import { ColorScheme } from "../theme/colorScheme"
 import { background, border, text } from "./components"
-
+import { interactive } from "./interactive"
+import { toggleable } from "./toggle"
 export default function dropdownMenu(colorScheme: ColorScheme) {
-    let layer = colorScheme.middle
+  let layer = colorScheme.middle
 
-    return {
-        rowHeight: 30,
-        background: background(layer),
-        border: border(layer),
-        shadow: colorScheme.popoverShadow,
-        header: {
-            ...text(layer, "sans", { size: "sm" }),
-            secondaryText: text(layer, "sans", { size: "sm", color: "#aaaaaa" }),
-            secondaryTextSpacing: 10,
-            padding: { left: 8, right: 8, top: 2, bottom: 2 },
-            cornerRadius: 6,
-            background: background(layer, "on"),
-            border: border(layer, "on", { overlay: true }),
-            hover: {
-                background: background(layer, "hovered"),
-                ...text(layer, "sans", "hovered", { size: "sm" }),
-            }
-        },
-        sectionHeader: {
-            ...text(layer, "sans", { size: "sm" }),
-            padding: { left: 8, right: 8, top: 8, bottom: 8 },
-        },
-        item: {
-            ...text(layer, "sans", { size: "sm" }),
-            secondaryTextSpacing: 10,
-            secondaryText: text(layer, "sans", { size: "sm" }),
-            padding: { left: 18, right: 18, top: 2, bottom: 2 },
-            hover: {
-                background: background(layer, "hovered"),
-                ...text(layer, "sans", "hovered", { size: "sm" }),
-            },
-            active: {
-                background: background(layer, "active"),
-            },
-            activeHover: {
-                background: background(layer, "active"),
-            },
-        },
-    }
+  return {
+    rowHeight: 30,
+    background: background(layer),
+    border: border(layer),
+    shadow: colorScheme.popoverShadow,
+    header: interactive({
+      base: {
+        ...text(layer, "sans", { size: "sm" }),
+        secondaryText: text(layer, "sans", { size: "sm", color: "#aaaaaa" }),
+        secondaryTextSpacing: 10,
+        padding: { left: 8, right: 8, top: 2, bottom: 2 },
+        cornerRadius: 6,
+        background: background(layer, "on"),
+        border: border(layer, "on", { overlay: true })
+      },
+      state: {
+        hovered: {
+          background: background(layer, "hovered"),
+          ...text(layer, "sans", "hovered", { size: "sm" }),
+        }
+      }
+    })
+    ,
+    sectionHeader: {
+      ...text(layer, "sans", { size: "sm" }),
+      padding: { left: 8, right: 8, top: 8, bottom: 8 },
+    },
+    item: toggleable(interactive({
+      base: {
+        ...text(layer, "sans", { size: "sm" }),
+        secondaryTextSpacing: 10,
+        secondaryText: text(layer, "sans", { size: "sm" }),
+        padding: { left: 18, right: 18, top: 2, bottom: 2 }
+      }, state: {
+        hovered: {
+          background: background(layer, "hovered"),
+          ...text(layer, "sans", "hovered", { size: "sm" }),
+        }
+      }
+    }), {
+      default: {
+        background: background(layer, "active"),
+      },
+      hovered: {
+        background: background(layer, "active"),
+      },
+    })
+  }
 }

styles/src/styleTree/updateNotification.ts

@@ -1,31 +1,39 @@
 import { ColorScheme } from "../theme/colorScheme"
 import { foreground, text } from "./components"
+import { interactive } from "./interactive"
 
 const headerPadding = 8
 
 export default function updateNotification(colorScheme: ColorScheme): Object {
-    let layer = colorScheme.middle
-    return {
-        message: {
-            ...text(layer, "sans", { size: "xs" }),
-            margin: { left: headerPadding, right: headerPadding },
+  let layer = colorScheme.middle
+  return {
+    message: {
+      ...text(layer, "sans", { size: "xs" }),
+      margin: { left: headerPadding, right: headerPadding },
+    },
+    actionMessage: interactive({
+      base: {
+        ...text(layer, "sans", { size: "xs" }),
+        margin: { left: headerPadding, top: 6, bottom: 6 }
+      }, state: {
+        hovered: {
+          color: foreground(layer, "hovered"),
+        }
+      }
+    }),
+    dismissButton: interactive({
+      base: {
+        color: foreground(layer),
+        iconWidth: 8,
+        iconHeight: 8,
+        buttonWidth: 8,
+        buttonHeight: 8
+      }, state: {
+        hovered: {
+          color: foreground(layer, "hovered"),
         },
-        actionMessage: {
-            ...text(layer, "sans", { size: "xs" }),
-            margin: { left: headerPadding, top: 6, bottom: 6 },
-            hover: {
-                color: foreground(layer, "hovered"),
-            },
-        },
-        dismissButton: {
-            color: foreground(layer),
-            iconWidth: 8,
-            iconHeight: 8,
-            buttonWidth: 8,
-            buttonHeight: 8,
-            hover: {
-                color: foreground(layer, "hovered"),
-            },
-        },
-    }
+      },
+    })
+
+  }
 }