feat: improve slash command menu - new blocks, formatting, IA Note section, premium design

memento-note/app/globals.css

@@ -1222,23 +1222,42 @@ html.font-system * {
 }
 
 /* ============================================
-   Slash Command Menu
+   Slash Command Menu — Premium Design
    ============================================ */
 .notion-slash-menu {
   position: fixed;
   z-index: 9999;
   background: var(--popover);
   border: 1px solid var(--border);
-  border-radius: 8px;
-  box-shadow: 0 4px 24px rgba(0,0,0,0.1);
-  padding: 4px;
-  min-width: 300px;
-  max-height: 340px;
+  border-radius: 12px;
+  box-shadow: 0 8px 32px rgba(0,0,0,0.12), 0 2px 8px rgba(0,0,0,0.06);
+  padding: 6px;
+  min-width: 320px;
+  max-height: 420px;
   overflow-y: auto;
   scrollbar-width: thin;
+  scrollbar-color: var(--border) transparent;
+  animation: slash-enter 0.12s ease;
+}
+@keyframes slash-enter {
+  from { opacity: 0; transform: translateY(-4px) scale(0.98); }
+  to   { opacity: 1; transform: translateY(0)   scale(1); }
 }
 .dark .notion-slash-menu {
-  box-shadow: 0 4px 24px rgba(0,0,0,0.5);
+  box-shadow: 0 8px 32px rgba(0,0,0,0.5), 0 2px 8px rgba(0,0,0,0.3);
+}
+
+/* Header hint */
+.notion-slash-header {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  padding: 5px 10px 6px;
+  font-size: 10px;
+  color: var(--muted-foreground);
+  border-bottom: 1px solid var(--border);
+  margin-bottom: 4px;
+  opacity: 0.7;
 }
 
 .notion-slash-section + .notion-slash-section {
@@ -1248,62 +1267,79 @@ html.font-system * {
 }
 
 .notion-slash-label {
-  padding: 6px 8px 2px;
-  font-size: 11px;
-  font-weight: 600;
+  padding: 6px 10px 3px;
+  font-size: 10.5px;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
   color: var(--muted-foreground);
   user-select: none;
 }
+.notion-slash-label-ai {
+  color: oklch(0.55 0.15 270);
+}
+.dark .notion-slash-label-ai {
+  color: oklch(0.72 0.15 270);
+}
 
 .notion-slash-item {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 10px;
   width: 100%;
-  padding: 4px 8px;
+  padding: 6px 8px;
   border: none;
   background: transparent;
-  border-radius: 4px;
+  border-radius: 7px;
   cursor: pointer;
   text-align: left;
   color: var(--foreground);
-  transition: background 0.1s ease;
+  transition: background 0.1s ease, transform 0.08s ease;
 }
 .notion-slash-item:hover,
 .notion-slash-item-selected {
   background: var(--accent);
 }
+.notion-slash-item-selected {
+  transform: none;
+}
 
 .notion-slash-icon {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 20px;
-  height: 20px;
+  width: 30px;
+  height: 30px;
   border: 1px solid var(--border);
-  border-radius: 4px;
+  border-radius: 7px;
   background: var(--background);
-  color: var(--muted-foreground);
+  color: var(--foreground);
   flex-shrink: 0;
+  transition: background 0.1s ease;
 }
-.notion-slash-icon-ai {
-  background: oklch(0.95 0.05 270);
-  border-color: oklch(0.8 0.08 270);
-  color: oklch(0.55 0.15 270);
-}
-.dark .notion-slash-icon-ai {
-  background: oklch(0.25 0.05 270);
-  border-color: oklch(0.4 0.08 270);
-  color: oklch(0.75 0.15 270);
+.notion-slash-item-selected .notion-slash-icon,
+.notion-slash-item:hover .notion-slash-icon {
+  background: var(--popover);
 }
 
-.notion-slash-loading {
+.notion-slash-icon-ai {
+  background: oklch(0.95 0.04 270);
+  border-color: oklch(0.82 0.08 270);
+  color: oklch(0.52 0.18 270);
+}
+.dark .notion-slash-icon-ai {
+  background: oklch(0.22 0.05 270);
+  border-color: oklch(0.38 0.09 270);
+  color: oklch(0.75 0.16 270);
+}
+
+/* Stacked title + description */
+.notion-slash-content {
   display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 8px 10px;
-  font-size: 13px;
-  color: var(--muted-foreground);
+  flex-direction: column;
+  flex: 1;
+  min-width: 0;
+  gap: 1px;
 }
 
 .notion-slash-title {
@@ -1312,7 +1348,7 @@ html.font-system * {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  flex: 0 1 auto;
+  line-height: 1.3;
 }
 .notion-slash-desc {
   font-size: 11px;
@@ -1320,8 +1356,29 @@ html.font-system * {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  flex: 1 1 auto;
-  text-align: right;
+  line-height: 1.3;
+}
+
+/* Shortcut badge */
+.notion-slash-shortcut {
+  font-size: 10px;
+  font-family: ui-monospace, monospace;
+  background: var(--muted);
+  color: var(--muted-foreground);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  padding: 1px 5px;
+  flex-shrink: 0;
+  white-space: nowrap;
+}
+
+.notion-slash-loading {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 12px;
+  font-size: 13px;
+  color: var(--muted-foreground);
 }
 
 /* ============================================