feat: unified top-right menu with grey oval container

- Created single grey oval container for all top-right menu items
- Order: CryptID -> Star -> Gear -> Question mark
- Added vertical separator lines between each menu item
- Consistent styling with rounded container and subtle shadow
- Removed separate styling for individual buttons

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

src/ui/components.tsx

@@ -117,16 +117,45 @@ function CustomSharePanel() {
     return groups
   }, [allShortcuts])
 
+  // Separator component for unified menu
+  const Separator = () => (
+    <div style={{
+      width: '1px',
+      height: '20px',
+      background: 'var(--color-panel-contrast)',
+      opacity: 0.5,
+    }} />
+  )
+
   return (
-    <div className="tlui-share-zone" draggable={false} style={{ display: 'flex', alignItems: 'center', gap: '8px', position: 'relative' }}>
+    <div className="tlui-share-zone" draggable={false} style={{ position: 'relative' }}>
+      {/* Unified menu container - grey oval */}
+      <div style={{
+        display: 'flex',
+        alignItems: 'center',
+        gap: '0',
+        background: 'var(--color-muted-1)',
+        borderRadius: '20px',
+        border: '1px solid var(--color-panel-contrast)',
+        padding: '4px 6px',
+        boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
+      }}>
         {/* CryptID dropdown - leftmost */}
+        <div style={{ padding: '0 4px' }}>
           <CryptIDDropdown isDarkMode={isDarkMode} />
+        </div>
+
+        <Separator />
 
         {/* Star board button */}
+        <div style={{ padding: '0 2px' }}>
           <StarBoardButton className="share-panel-btn" />
+        </div>
+
+        <Separator />
 
         {/* Settings gear button with dropdown */}
-      <div style={{ position: 'relative' }}>
+        <div style={{ position: 'relative', padding: '0 2px' }}>
           <button
             onClick={() => setShowSettingsDropdown(!showSettingsDropdown)}
             className="share-panel-btn"
@@ -143,7 +172,6 @@ function CustomSharePanel() {
               opacity: showSettingsDropdown ? 1 : 0.7,
               transition: 'opacity 0.15s, background 0.15s',
               pointerEvents: 'all',
-            zIndex: 10,
             }}
             onMouseEnter={(e) => {
               e.currentTarget.style.opacity = '1'
@@ -268,7 +296,10 @@ function CustomSharePanel() {
           )}
         </div>
 
+        <Separator />
+
         {/* Help/Keyboard shortcuts button - rightmost */}
+        <div style={{ padding: '0 4px' }}>
           <button
             onClick={() => setShowShortcuts(!showShortcuts)}
             className="share-panel-btn"
@@ -285,7 +316,6 @@ function CustomSharePanel() {
               opacity: showShortcuts ? 1 : 0.7,
               transition: 'opacity 0.15s, background 0.15s',
               pointerEvents: 'all',
-          zIndex: 10,
             }}
             onMouseEnter={(e) => {
               e.currentTarget.style.opacity = '1'
@@ -305,6 +335,8 @@ function CustomSharePanel() {
               <line x1="12" y1="17" x2="12.01" y2="17"></line>
             </svg>
           </button>
+        </div>
+      </div>
 
       {/* Keyboard shortcuts panel */}
       {showShortcuts && (