From fef233094543ebd1e3bc52b1536006b8eca635c9 Mon Sep 17 00:00:00 2001
From: ajspig <dragon@monstercode.com>
Date: Thu, 11 Dec 2025 15:09:14 -0500
Subject: [PATCH] fix: menu order, bullet points and hover

---
 quartz.layout.ts                       | 64 ++++++++++----------------
 quartz/components/styles/explorer.scss | 13 ++++++
 2 files changed, 37 insertions(+), 40 deletions(-)

diff --git a/quartz.layout.ts b/quartz.layout.ts
index f46fad883..649bce5d8 100644
--- a/quartz.layout.ts
+++ b/quartz.layout.ts
@@ -51,32 +51,24 @@ export const defaultContentPageLayout: PageLayout = {
     }),
     Component.Explorer({
       sortFn: (a, b) => {
-        // Sort folders first, then files by date (newest first)
+        const folderOrder = ["blog", "notes", "research", "careers", "archive"]
+
         if (a.isFolder && b.isFolder) {
-          // Both folders: alphabetical
-          return a.displayName.localeCompare(b.displayName, undefined, {
-            numeric: true,
-            sensitivity: "base",
-          })
+          const aIndex = folderOrder.indexOf(a.displayName.toLowerCase())
+          const bIndex = folderOrder.indexOf(b.displayName.toLowerCase())
+          if (aIndex !== -1 && bIndex !== -1) return aIndex - bIndex
+          if (aIndex !== -1) return -1
+          if (bIndex !== -1) return 1
+          return a.displayName.localeCompare(b.displayName)
         }
 
-        if (a.isFolder) return -1  // Folders before files
-        if (b.isFolder) return 1   // Folders before files
+        if (a.isFolder) return -1
+        if (b.isFolder) return 1
 
-        // Both files: sort by date descending (newest first)
-        // Note: dates come from JSON as strings, need to convert to Date objects
+        // Files: sort by date (newest first)
         const aDate = a.data?.date ? new Date(a.data.date).getTime() : 0
         const bDate = b.data?.date ? new Date(b.data.date).getTime() : 0
-
-        if (aDate !== bDate) {
-          return bDate - aDate  // Descending order (newest first)
-        }
-
-        // Same date or no dates: alphabetical fallback
-        return a.displayName.localeCompare(b.displayName, undefined, {
-          numeric: true,
-          sensitivity: "base",
-        })
+        return bDate - aDate || a.displayName.localeCompare(b.displayName)
       },
     }),
   ],
@@ -121,32 +113,24 @@ export const defaultListPageLayout: PageLayout = {
     }),
     Component.Explorer({
       sortFn: (a, b) => {
-        // Sort folders first, then files by date (newest first)
+        const folderOrder = ["blog", "notes", "research", "careers", "archive"]
+
         if (a.isFolder && b.isFolder) {
-          // Both folders: alphabetical
-          return a.displayName.localeCompare(b.displayName, undefined, {
-            numeric: true,
-            sensitivity: "base",
-          })
+          const aIndex = folderOrder.indexOf(a.displayName.toLowerCase())
+          const bIndex = folderOrder.indexOf(b.displayName.toLowerCase())
+          if (aIndex !== -1 && bIndex !== -1) return aIndex - bIndex
+          if (aIndex !== -1) return -1
+          if (bIndex !== -1) return 1
+          return a.displayName.localeCompare(b.displayName)
         }
 
-        if (a.isFolder) return -1  // Folders before files
-        if (b.isFolder) return 1   // Folders before files
+        if (a.isFolder) return -1
+        if (b.isFolder) return 1
 
-        // Both files: sort by date descending (newest first)
-        // Note: dates come from JSON as strings, need to convert to Date objects
+        // Files: sort by date (newest first)
         const aDate = a.data?.date ? new Date(a.data.date).getTime() : 0
         const bDate = b.data?.date ? new Date(b.data.date).getTime() : 0
-
-        if (aDate !== bDate) {
-          return bDate - aDate  // Descending order (newest first)
-        }
-
-        // Same date or no dates: alphabetical fallback
-        return a.displayName.localeCompare(b.displayName, undefined, {
-          numeric: true,
-          sensitivity: "base",
-        })
+        return bDate - aDate || a.displayName.localeCompare(b.displayName)
       },
     }),
   ],
diff --git a/quartz/components/styles/explorer.scss b/quartz/components/styles/explorer.scss
index 8d9410044..5b0db6057 100644
--- a/quartz/components/styles/explorer.scss
+++ b/quartz/components/styles/explorer.scss
@@ -124,6 +124,12 @@ button.desktop-explorer {
       color: var(--dark);
       opacity: 0.75;
       pointer-events: all;
+      transition: color 0.15s ease, opacity 0.15s ease;
+
+      &:hover {
+        opacity: 1;
+        color: var(--tertiary);
+      }
 
       &.active {
         opacity: 1;
@@ -132,6 +138,13 @@ button.desktop-explorer {
     }
   }
 
+  // Add bullet points to file items (articles) inside folders
+  .folder-outer > ul > li:not(:has(.folder-container)) > a::before {
+    content: "•";
+    margin-right: 6px;
+    color: var(--gray);
+  }
+
   .folder-outer {
     display: grid;
     grid-template-rows: 0fr;