web: ui fixes

apps/web/src/components/note/index.tsx

@@ -566,18 +566,24 @@ function colorsToMenuItems(
       type: "lazy-loader",
       async items() {
         const colors = await db.colors.all.items();
-        return colors.map((color) => {
-          const isChecked = !!noteColor && noteColor.id === color.id;
-          return {
-            type: "button",
-            key: color.id,
-            title: color.title,
-            icon: Circle.path,
-            styles: { icon: { color: color.colorCode } },
-            isChecked,
-            onClick: () => store.setColor(color.id, isChecked, ...ids)
-          } satisfies MenuItem;
-        });
+        const menuItems: MenuItem[] = [];
+        if (colors.length > 0)
+          menuItems.push({ type: "separator", key: "sep" });
+        menuItems.push(
+          ...colors.map((color) => {
+            const isChecked = !!noteColor && noteColor.id === color.id;
+            return {
+              type: "button",
+              key: color.id,
+              title: color.title,
+              icon: Circle.path,
+              styles: { icon: { color: color.colorCode } },
+              isChecked,
+              onClick: () => store.setColor(color.id, isChecked, ...ids)
+            } satisfies MenuItem;
+          })
+        );
+        return menuItems;
       }
     }
   ];
@@ -611,22 +617,20 @@ function notebooksMenuItems(ids: string[]): MenuItem[] {
 
         const menuItems: MenuItem[] = [];
         if (notebooks.size > 0)
-          menuItems.push(
-            {
-              type: "button",
-              key: "remove-from-all-notebooks",
-              title: "Unlink from all",
-              icon: RemoveShortcutLink.path,
-              onClick: async () => {
-                await db.notes.removeFromAllNotebooks(...ids);
-                store.refresh();
-              }
-            },
-            { key: "sep", type: "separator" }
-          );
+          menuItems.push({
+            type: "button",
+            key: "remove-from-all-notebooks",
+            title: "Unlink from all",
+            icon: RemoveShortcutLink.path,
+            onClick: async () => {
+              await db.notes.removeFromAllNotebooks(...ids);
+              store.refresh();
+            }
+          });
+
+        menuItems.push({ key: "sep3", type: "separator" });
 
         if (notebookShortcuts.size > 0) {
-          menuItems.push({ key: "sep3", type: "separator" });
           notebookShortcuts.forEach((notebook) => {
             menuItems.push({
               type: "button",

apps/web/src/components/sub-notebook/index.tsx

@@ -129,11 +129,7 @@ function SubNotebook(props: SubNotebookProps) {
       menuItems={subNotebookMenuItems}
       context={{ refresh }}
       sx={{
-        paddingLeft: isExpandable
-          ? `${depth * 5}px`
-          : depth === 0
-          ? 2
-          : `${depth * 10}px`
+        paddingLeft: depth === 0 ? 0 : `${16 * depth}px`
       }}
     />
   );

apps/web/src/views/notebook.tsx

@@ -227,7 +227,14 @@ function SubNotebooks({
   if (!rootId) return null;
 
   return (
-    <Flex id="subnotebooks" variant="columnFill" sx={{ height: "100%" }}>
+    <Flex
+      id="subnotebooks"
+      variant="columnFill"
+      sx={{
+        height: "100%",
+        borderTop: "1px solid var(--border)"
+      }}
+    >
       <Flex
         sx={{
           m: 1,
@@ -512,7 +519,6 @@ function NotebookHeader({
         <Text
           as="p"
           sx={{
-            lineHeight: 0.7,
             whiteSpace: "nowrap",
             textOverflow: "ellipsis",
             overflow: "hidden"

packages/ui/src/components/menu/index.tsx

@@ -207,7 +207,7 @@ function MenuContainer(props: PropsWithChildren<MenuContainerProps>) {
           {title}
         </Text>
       )}
-      <ScrollContainer suppressScrollX style={{ maxHeight: 400 }}>
+      <ScrollContainer suppressScrollX style={{ maxHeight: "80%" }}>
         {children}
       </ScrollContainer>
       {/* <FlexScrollContainer>{children}</FlexScrollContainer> */}

packages/ui/src/components/menu/menu-separator.tsx

@@ -24,7 +24,8 @@ export function MenuSeparator() {
     <Box
       as="li"
       sx={{
-        width: "95%",
+        width: "94%",
+        marginLeft: "3%",
         height: "1px",
         bg: "separator",
         my: 1,