Modernize and streamline Sketch top bar UI
Comprehensive improvements to the top bar interface:
Removed Elements:
- Poll checkbox and all polling UI controls
- Network status indicator and all status messages
- Dotted underlines from tooltip elements
Button Improvements:
- Added SVG icons to Restart and Stop buttons
- Made buttons responsive (text hides below 1400px)
- Stop button now disabled when no active calls
Layout Simplification:
- Simplified hostname display (outside hostname only)
- Simplified working directory display (outside directory only)
- Repositioned tab chooser for better layout
- Improved responsive behavior across viewport sizes
Enhanced Features:
- Added GitHub repo auto-detection with clickable links
- Improved VSCode integration with button styling
- Changed 'SSH Connection' to 'Connect to Container'
- Enhanced tooltips with more descriptive text
The UI is now cleaner, more responsive, and provides a better user experience
across different screen sizes.
Co-Authored-By: sketch <hello@sketch.dev>
diff --git a/webui/src/web-components/sketch-network-status.test.ts b/webui/src/web-components/sketch-network-status.test.ts
index 45882a0..5c968d4 100644
--- a/webui/src/web-components/sketch-network-status.test.ts
+++ b/webui/src/web-components/sketch-network-status.test.ts
@@ -1,61 +1,26 @@
import { test, expect } from "@sand4rt/experimental-ct-web";
import { SketchNetworkStatus } from "./sketch-network-status";
-test("displays the correct connection status when connected", async ({
+// Test for when no error message is present - component should not render
+test("does not display anything when no error is provided", async ({
mount,
}) => {
const component = await mount(SketchNetworkStatus, {
props: {
connection: "connected",
- message: "Connected to server",
},
});
- await expect(component.locator(".polling-indicator")).toBeVisible();
- await expect(component.locator(".status-text")).toBeVisible();
- await expect(component.locator(".polling-indicator.active")).toBeVisible();
- await expect(component.locator(".status-text")).toContainText(
- "Connected to server",
- );
+ // The component should be empty
+ await expect(component.locator(".status-container")).not.toBeVisible();
});
-test("displays the correct connection status when disconnected", async ({
- mount,
-}) => {
- const component = await mount(SketchNetworkStatus, {
- props: {
- connection: "disconnected",
- message: "Disconnected",
- },
- });
-
- await expect(component.locator(".polling-indicator")).toBeVisible();
- await expect(component.locator(".polling-indicator.error")).toBeVisible();
-});
-
-test("displays the correct connection status when disabled", async ({
- mount,
-}) => {
- const component = await mount(SketchNetworkStatus, {
- props: {
- connection: "disabled",
- message: "Disabled",
- },
- });
-
- await expect(component.locator(".polling-indicator")).toBeVisible();
- await expect(component.locator(".polling-indicator.error")).not.toBeVisible();
- await expect(
- component.locator(".polling-indicator.active"),
- ).not.toBeVisible();
-});
-
+// Test that error message is displayed correctly
test("displays error message when provided", async ({ mount }) => {
const errorMsg = "Connection error";
const component = await mount(SketchNetworkStatus, {
props: {
connection: "disconnected",
- message: "Disconnected",
error: errorMsg,
},
});