✨ Check for auto-created set

frontend/playwright/ui/pages/WorkspacePage.js

@@ -79,6 +79,7 @@ export class WorkspacePage extends BaseWebSocketPage {
     this.tokensUpdateCreateModal = page.getByTestId(
       "token-update-create-modal",
     );
+    this.tokenThemesSetsSidebar = page.getByTestId("token-themes-sets-sidebar");
   }
 
   async goToWorkspace({

frontend/playwright/ui/specs/tokens.spec.js

@@ -27,7 +27,9 @@ test.describe("Tokens: Tab", () => {
     await expect(tokensTabPanel).toHaveText(/Themes/);
   });
 
-  test("Created color token shows up in the sidebar", async ({ page }) => {
+  test("User creates color token and auto created set show up in the sidebar", async ({
+    page,
+  }) => {
     const workspacePage = new WorkspacePage(page);
     await workspacePage.setupEmptyFile();
     await workspacePage.mockRPC(
@@ -83,5 +85,17 @@ test.describe("Tokens: Tab", () => {
 
     // Tokens tab panel should have two tokens with the color red / #ff0000
     await expect(tokensTabPanel.getByTitle("#ff0000")).toHaveCount(2);
+
+    // Global set has been auto created and is active
+    await expect(
+      workspacePage.tokenThemesSetsSidebar.getByRole("button", {
+        name: "Global",
+      }),
+    ).toHaveCount(1);
+    await expect(
+      workspacePage.tokenThemesSetsSidebar.getByRole("button", {
+        name: "Global",
+      }),
+    ).toHaveAttribute("aria-checked", "true");
   });
 });

frontend/src/app/main/ui/workspace/tokens/sets.cljs

@@ -111,7 +111,7 @@
   [{:keys [set label tree-depth tree-path selected? on-select active? on-toggle editing? on-edit on-edit-reset on-edit-submit]}]
   (let [set-name (.-name set)
         editing?' (editing? tree-path)
-        active?' (active? set-name)
+        active?' (some? (active? set-name))
         on-click
         (mf/use-fn
          (mf/deps editing?' tree-path)
@@ -138,7 +138,8 @@
                                 :selected-set selected?)
            :on-click on-click
            :on-double-click #(on-edit tree-path)
-           :on-context-menu on-context-menu}
+           :on-context-menu on-context-menu
+           :aria-checked active?'}
      [:> icon*
       {:id "document"
        :class (stl/css-case :icon true

frontend/src/app/main/ui/workspace/tokens/sidebar.cljs

@@ -239,7 +239,8 @@
         on-open (mf/use-fn #(reset! open? true))]
     [:& sets-context/provider {}
      [:& sets-context-menu]
-     [:article {:class (stl/css :sets-section-wrapper)
+     [:article {:data-testid "token-themes-sets-sidebar"
+                :class (stl/css :sets-section-wrapper)
                 :style {"--resize-height" (str resize-height "px")}}
       [:div {:class (stl/css :sets-sidebar)}
        [:& themes-header]