Fix typo in README and improve UI consistency for toggles, empty states, and list headers

Author: robertpiosik

README.md

@@ -32,7 +32,7 @@ Code Web Chat is a free and open-source AI coding toolkit. You can use CWC in **
 
 ## Introduction
 
-With its focus on context engineering, CWC lets you pick all the necessary files, includnig useful examples with **engineer's intent**. Such steered model welcomes simple, task-focused instructions, makes all edits in a single request, and is as accurate as it can get. The tool is a perfect companion for all kinds of coding tasks; **from tedious refactors to complex features**.
+With its focus on context engineering, CWC lets you pick all the necessary files, includnig useful examples with engineer's intent. Such steered model welcomes simple, task-focused instructions, makes all edits in a single request, and is as accurate as it can get. The tool is a perfect companion for all kinds of coding tasks; from tedious refactors to complex features.
 
 > [!TIP]
 > Feeling lost in the codebase? CWC will help you out with a _prune context_ prompt type.

apps/editor/src/views/panel/frontend/Home/Home.tsx

@@ -202,10 +202,15 @@ export const Home: React.FC<Props> = (props) => {
                 ) : undefined
               }
             />
+            {!props.are_tasks_collapsed &&
+              Object.keys(props.tasks).length == 1 &&
+              props.tasks[Object.keys(props.tasks)[0]].length == 0 && (
+                <div className={styles.inner__empty}>No tasks created yet.</div>
+              )}
             {!props.are_tasks_collapsed &&
               Object.entries(props.tasks)
                 .filter(([_, tasks], __, arr) =>
-                  arr.length == 1 ? tasks.length : true
+                  arr.length == 1 ? tasks.length > 0 : true
                 )
                 .map(([workspace_root_folder, tasks], _, entries) => (
                   <div

packages/ui/src/components/editor/common/Toggler/Toggler.module.scss

@@ -18,7 +18,7 @@
   left: 0;
   right: 0;
   bottom: 0;
-  background-color: var(--vscode-input-background);
+  background-color: var(--cwc-bg-primary);
   border: 1px solid var(--cwc-border-color);
   transition: var(--transition-duration-250);
   border-radius: 20px;
@@ -30,9 +30,10 @@
     width: 12px;
     left: 3px;
     bottom: 3px;
-    background-color: var(--vscode-button-background);
+    background-color: white;
     transition: var(--transition-duration-250);
     border-radius: 50%;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
   }
 }
 
@@ -43,5 +44,4 @@ input:checked + .slider {
 
 input:checked + .slider:before {
   transform: translateX(16px);
-  background-color: var(--vscode-button-foreground);
 }

packages/ui/src/components/editor/panel/Configurations/Configurations.module.scss

@@ -2,6 +2,7 @@
   display: flex;
   flex-direction: column;
 }
+
 .missing-config {
   padding: 2px 12px 0 12px;
   font-weight: 500;

packages/ui/src/components/editor/settings/ConfigurationsList/ConfigurationsList.module.scss

@@ -3,17 +3,21 @@
   flex-direction: column;
 }
 
-.toolbar {
+.header {
   display: flex;
   padding: 12px 12px 8px 12px;
   align-items: center;
   justify-content: space-between;
-}
 
-.toolbar-group {
-  display: flex;
-  align-items: center;
-  gap: 8px;
+  &__left {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+
+    &__amount {
+      font-weight: 600;
+    }
+  }
 }
 
 .list {

packages/ui/src/components/editor/settings/ConfigurationsList/ConfigurationsList.tsx

@@ -71,12 +71,12 @@ export const ConfigurationsList: React.FC<ConfigurationsList.Props> = (
 
   return (
     <div className={styles.container}>
-      <div className={styles.toolbar}>
-        <div className={styles['toolbar-group']}>
-          <span style={{ fontWeight: 500 }}>
+      <div className={styles.header}>
+        <div className={styles['header__left']}>
+          <div className={styles['header__left__amount']}>
             {props.configurations.length} configuration
-            {props.configurations.length === 1 ? '' : 's'}
-          </span>
+            {props.configurations.length == 1 ? '' : 's'}
+          </div>
           {props.on_unset_default && has_default && (
             <>
               <span>·</span>

packages/ui/src/components/editor/settings/ModelProviders/ModelProviders.module.scss

@@ -3,11 +3,15 @@
   flex-direction: column;
 }
 
-.toolbar {
+.header {
   display: flex;
   padding: 12px 12px 8px 12px;
   align-items: center;
   justify-content: space-between;
+
+  &__amount {
+    font-weight: 600;
+  }
 }
 
 .list {
@@ -23,7 +27,7 @@
   gap: 12px;
 
   &:nth-child(even) {
-    background-color: var(--vscode-welcomePage-tileBackground);
+    background-color: var(--cwc-bg-tertiary);
   }
 
   &__content {

packages/ui/src/components/editor/settings/ModelProviders/ModelProviders.tsx

@@ -68,11 +68,11 @@ export const ModelProviders: React.FC<ModelProviders.Props> = (props) => {
 
   return (
     <div className={styles.container}>
-      <div className={styles.toolbar}>
-        <span style={{ fontWeight: 500 }}>
+      <div className={styles.header}>
+        <div className={styles.header__amount}>
           {props.providers.length} model provider
-          {props.providers.length === 1 ? '' : 's'}
-        </span>
+          {props.providers.length == 1 ? '' : 's'}
+        </div>
         <Button on_click={props.on_add_provider}>New Provider...</Button>
       </div>
       <div className={styles.list}>