style: add separator in model selection list

mlc-ai · Jun 16, 2024 · 2ac0357 · 2ac0357
1 parent c94e258
commit 2ac0357
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 1 deletion.
diff --git a/app/components/chat.tsx b/app/components/chat.tsx
@@ -551,6 +551,7 @@ export function ChatActions(props: {
           items={models.map((m) => ({
             title: m.name,
             value: m.name,
+            family: m.family,
           }))}
           onClose={() => setShowModelSelector(false)}
           onSelection={(s) => {

diff --git a/app/components/ui-lib.module.scss b/app/components/ui-lib.module.scss
@@ -103,6 +103,10 @@
   padding: 10px 20px;
   animation: slide-in ease 0.6s;
 
+  &.list-item-separator {
+    border-bottom: var(--border-in-dark);
+  }
+
   .list-header {
     display: flex;
     align-items: center;

diff --git a/app/components/ui-lib.tsx b/app/components/ui-lib.tsx
@@ -488,6 +488,7 @@ export function Selector<T>(props: {
     title: string;
     subTitle?: string;
     value: T;
+    family?: string;
   }>;
   defaultSelectedValue?: T;
   onSelection?: (selection: T[]) => void;
@@ -500,9 +501,15 @@ export function Selector<T>(props: {
         <List>
           {props.items.map((item, i) => {
             const selected = props.defaultSelectedValue === item.value;
+            const lastOfFamily =
+              i < props.items.length - 1 &&
+              item.family !== props.items[i + 1].family;
             return (
               <ListItem
-                className={styles["selector-item"]}
+                className={
+                  styles["selector-item"] +
+                  (lastOfFamily ? " " + styles["list-item-separator"] : "")
+                }
                 key={i}
                 title={item.title}
                 subTitle={item.subTitle}

diff --git a/app/styles/globals.scss b/app/styles/globals.scss
@@ -22,6 +22,7 @@
 
   /* stroke */
   --border-in-light: 1px solid rgb(222, 222, 222);
+  --border-in-dark: 1px solid rgb(136, 136, 136);
 }
 
 @mixin dark {
@@ -40,6 +41,7 @@
   --bar-color: rgba(255, 255, 255, 0.1);
 
   --border-in-light: 1px solid rgba(255, 255, 255, 0.192);
+  --border-in-dark: 1px solid rgb(255, 255, 255, 0.56);
 
   --theme-color: var(--gray);