fix(ui): address PR review comments and fix E2E tests for unified sidebar

- Add try/catch for getElectronAPI() in sidebar-footer with window.open fallback
- Use formatShortcut() for OS-aware hotkey display in sidebar-header
- Remove unnecessary optional chaining on project.icon
- Remove redundant ternary in sidebar-navigation className
- Update E2E tests to use new project-dropdown-trigger data-testid

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

apps/ui/src/components/layout/sidebar/components/sidebar-footer.tsx

@@ -51,8 +51,13 @@ export function SidebarFooter({
   }, [navigate]);
 
   const handleFeedbackClick = useCallback(() => {
-    const api = getElectronAPI();
-    api.openExternalLink('https://github.com/AutoMaker-Org/automaker/issues');
+    try {
+      const api = getElectronAPI();
+      api.openExternalLink('https://github.com/AutoMaker-Org/automaker/issues');
+    } catch {
+      // Fallback for non-Electron environments (SSR, web browser)
+      window.open('https://github.com/AutoMaker-Org/automaker/issues', '_blank');
+    }
   }, []);
 
   // Collapsed state

apps/ui/src/components/layout/sidebar/components/sidebar-header.tsx

@@ -4,6 +4,7 @@ import { ChevronsUpDown, Folder, Plus, FolderOpen } from 'lucide-react';
 import * as LucideIcons from 'lucide-react';
 import type { LucideIcon } from 'lucide-react';
 import { cn, isMac } from '@/lib/utils';
+import { formatShortcut } from '@/store/app-store';
 import { isElectron, type Project } from '@/lib/electron';
 import { getAuthenticatedImageUrl } from '@/lib/api-fetch';
 import { useAppStore } from '@/store/app-store';
@@ -49,7 +50,7 @@ export function SidebarHeader({
   );
 
   const getIconComponent = (project: Project): LucideIcon => {
-    if (project?.icon && project.icon in LucideIcons) {
+    if (project.icon && project.icon in LucideIcons) {
       return (LucideIcons as unknown as Record<string, LucideIcon>)[project.icon];
     }
     return Folder;
@@ -200,7 +201,9 @@ export function SidebarHeader({
                         {project.name}
                       </span>
                       {hotkeyLabel && (
-                        <span className="text-xs text-muted-foreground">⌘{hotkeyLabel}</span>
+                        <span className="text-xs text-muted-foreground">
+                          {formatShortcut(`Cmd+${hotkeyLabel}`, true)}
+                        </span>
                       )}
                     </DropdownMenuItem>
                   );
@@ -342,7 +345,9 @@ export function SidebarHeader({
                       {project.name}
                     </span>
                     {hotkeyLabel && (
-                      <span className="text-xs text-muted-foreground">⌘{hotkeyLabel}</span>
+                      <span className="text-xs text-muted-foreground">
+                        {formatShortcut(`Cmd+${hotkeyLabel}`, true)}
+                      </span>
                     )}
                   </DropdownMenuItem>
                 );

apps/ui/src/components/layout/sidebar/components/sidebar-navigation.tsx

@@ -97,13 +97,7 @@ export function SidebarNavigation({
   });
 
   return (
-    <nav
-      ref={navRef}
-      className={cn(
-        'flex-1 overflow-y-auto scrollbar-hide px-3 pb-2',
-        sidebarOpen ? 'mt-1' : 'mt-1'
-      )}
-    >
+    <nav ref={navRef} className={cn('flex-1 overflow-y-auto scrollbar-hide px-3 pb-2 mt-1')}>
       {/* Navigation sections */}
       {visibleSections.map((section, sectionIdx) => {
         const isCollapsed = section.label ? collapsedSections[section.label] : false;