Merge branch 'main' into sergey/z-1768-update-createcolorscheme-to-accept-a-theme-in-the

styles/src/styleTree/app.ts

@@ -22,6 +22,7 @@ import { ColorScheme } from "../themes/common/colorScheme"
 import feedback from "./feedback"
 import welcome from "./welcome"
 import copilot from "./copilot"
+import assistant from "./assistant"
 
 export default function app(colorScheme: ColorScheme): Object {
     return {
@@ -50,6 +51,7 @@ export default function app(colorScheme: ColorScheme): Object {
         simpleMessageNotification: simpleMessageNotification(colorScheme),
         tooltip: tooltip(colorScheme),
         terminal: terminal(colorScheme),
+        assistant: assistant(colorScheme),
         feedback: feedback(colorScheme),
         colorScheme: {
             ...colorScheme,

styles/src/styleTree/assistant.ts

@@ -0,0 +1,85 @@
+import { ColorScheme } from "../themes/common/colorScheme"
+import { text, border, background, foreground } from "./components"
+import editor from "./editor"
+
+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" }),
+      }
+    }
+}

styles/src/styleTree/editor.ts

@@ -112,7 +112,7 @@ export default function editor(colorScheme: ColorScheme) {
             widthEm: 0.15,
             cornerRadius: 0.05,
         },
-        /** Highlights matching occurences of what is under the cursor
+        /** Highlights matching occurrences of what is under the cursor
          * as well as matched brackets
          */
         documentHighlightReadBackground: withOpacity(

styles/src/styleTree/projectPanel.ts

@@ -8,10 +8,10 @@ export default function projectPanel(colorScheme: ColorScheme) {
     let layer = colorScheme.middle
 
     let baseEntry = {
-        height: 24,
+        height: 22,
         iconColor: foreground(layer, "variant"),
-        iconSize: 8,
-        iconSpacing: 8,
+        iconSize: 7,
+        iconSpacing: 5,
     }
 
     let status = {
@@ -71,8 +71,8 @@ export default function projectPanel(colorScheme: ColorScheme) {
             },
         },
         background: background(layer),
-        padding: { left: 12, right: 12, top: 6, bottom: 6 },
-        indentWidth: 8,
+        padding: { left: 6, right: 6, top: 0, bottom: 6 },
+        indentWidth: 12,
         entry,
         draggedEntry: {
             ...baseEntry,
@@ -83,7 +83,12 @@ export default function projectPanel(colorScheme: ColorScheme) {
         },
         ignoredEntry: {
             ...entry,
+            iconColor: foreground(layer, "disabled"),
             text: text(layer, "mono", "disabled"),
+            active: {
+                ...entry.active,
+                iconColor: foreground(layer, "variant"),
+            }
         },
         cutEntry: {
             ...entry,

styles/src/styleTree/search.ts

@@ -33,7 +33,7 @@ export default function search(colorScheme: ColorScheme) {
     };
 
     return {
-        // TODO: Add an activeMatchBackground on the rust side to differenciate between active and inactive
+        // 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"),

styles/src/styleTree/tabBar.ts

@@ -94,6 +94,9 @@ export default function tabBar(colorScheme: ColorScheme) {
             hover: {
                 color: foreground(layer, "hovered"),
             },
+            active: {
+                color: foreground(layer, "accent"),
+            }
         },
         paneButtonContainer: {
             background: tab.background,

styles/src/styleTree/workspace.ts

@@ -13,6 +13,7 @@ import tabBar from "./tabBar"
 
 export default function workspace(colorScheme: ColorScheme) {
     const layer = colorScheme.lowest
+    const isLight = colorScheme.isLight
     const itemSpacing = 8
     const titlebarButton = {
         cornerRadius: 6,
@@ -120,16 +121,18 @@ export default function workspace(colorScheme: ColorScheme) {
         },
         zoomedBackground: {
             cursor: "Arrow",
-            background: withOpacity(background(colorScheme.lowest), 0.85)
+            background: isLight
+                ? withOpacity(background(colorScheme.lowest), 0.8)
+                : withOpacity(background(colorScheme.highest), 0.6)
         },
         zoomedPaneForeground: {
-            margin: 10,
+            margin: 16,
             shadow: colorScheme.modalShadow,
-            border: border(colorScheme.highest, { overlay: true }),
+            border: border(colorScheme.lowest, { overlay: true }),
         },
         zoomedPanelForeground: {
-            margin: 18,
-            border: border(colorScheme.highest, { overlay: true }),
+            margin: 16,
+            border: border(colorScheme.lowest, { overlay: true }),
         },
         dock: {
             left: {