Feature/UI clean up 2026 01 05 (#36)

* Update Support us and add items to mobile menu

* Update version in the logo and update the release to include version

* Add drop down menu for open tabs.

* Add search command palette

* Update search command palette.

---------

Co-authored-by: DrakeNguyen <drake.ha.nguyen@gmail.com>

Author: drakehanguyen

.github/workflows/release.yml

@@ -125,10 +125,8 @@ jobs:
       - name: Generate release notes from CHANGELOG
         id: release_notes
         run: |
-          # Extract release notes from CHANGELOG.md for this version
           VERSION="${{ steps.tag_version.outputs.version }}"
 
-          # Try to extract changelog section for this version
           if [ -f "CHANGELOG.md" ]; then
             # Extract content between [version] and next version or end of file
             awk "/^## \[$VERSION\]/,/^## \[/ {if (!/^## \[$VERSION\]/ && !/^## \[/) print}" CHANGELOG.md > /tmp/release_notes.md || true
@@ -140,31 +138,30 @@ jobs:
               echo "See [CHANGELOG.md](https://github.com/${{ github.repository }}/blob/main/CHANGELOG.md) for details." >> /tmp/release_notes.md
             fi
 
-            # Add header
-            echo "## 🎉 Release $VERSION" > /tmp/release_body.md
-            echo "" >> /tmp/release_body.md
-            cat /tmp/release_notes.md >> /tmp/release_body.md
-            echo "" >> /tmp/release_body.md
-            echo "---" >> /tmp/release_body.md
-            echo "" >> /tmp/release_body.md
-            # Get the previous tag for comparison
-            PREV_TAG=$(git describe --tags --abbrev=0 ${{ github.ref }}^ 2>/dev/null || echo "")
-            if [ -n "$PREV_TAG" ]; then
-              echo "**Full Changelog**: https://github.com/${{ github.repository }}/compare/$PREV_TAG...${{ github.ref }}" >> /tmp/release_body.md
-            else
-              echo "**Full Changelog**: https://github.com/${{ github.repository }}/releases/tag/${{ github.ref }}" >> /tmp/release_body.md
-            fi
+            # Build release body
+            {
+              echo "## 🎉 Release $VERSION"
+              echo ""
+              cat /tmp/release_notes.md
+              echo ""
+              echo "---"
+              echo ""
+              # Get the previous tag for comparison
+              PREV_TAG=$(git describe --tags --abbrev=0 "${{ steps.tag_version.outputs.tag_name }}^" 2>/dev/null || echo "")
+              if [ -n "$PREV_TAG" ]; then
+                echo "**Full Changelog**: https://github.com/${{ github.repository }}/compare/$PREV_TAG...${{ steps.tag_version.outputs.tag_name }}"
+              else
+                echo "**Full Changelog**: https://github.com/${{ github.repository }}/releases/tag/${{ steps.tag_version.outputs.tag_name }}"
+              fi
+            } > /tmp/release_body.md
           else
-            echo "## 🎉 Release $VERSION" > /tmp/release_body.md
-            echo "" >> /tmp/release_body.md
-            echo "**Full Changelog**: https://github.com/${{ github.repository }}/compare/${{ github.event.before }}...${{ github.ref }}" >> /tmp/release_body.md
+            {
+              echo "## 🎉 Release $VERSION"
+              echo ""
+              echo "**Full Changelog**: https://github.com/${{ github.repository }}/commits/${{ steps.tag_version.outputs.tag_name }}"
+            } > /tmp/release_body.md
           fi
 
-          # Output for GitHub Actions
-          echo "body<<EOF" >> $GITHUB_OUTPUT
-          cat /tmp/release_body.md >> $GITHUB_OUTPUT
-          echo "EOF" >> $GITHUB_OUTPUT
-
       - name: Create GitHub Release
         uses: softprops/action-gh-release@v2
         with:
@@ -188,10 +185,46 @@ jobs:
         id: deployment
         uses: actions/deploy-pages@v4
 
-      - name: Upload build artifacts (optional)
+      - name: Sync package.json version to main branch
+        if: success()
+        continue-on-error: true  # Don't fail the workflow if this step fails
+        run: |
+          VERSION="${{ steps.tag_version.outputs.version }}"
+
+          # Configure git
+          git config --local user.email "action@github.com"
+          git config --local user.name "GitHub Action"
+
+          # Fetch main branch and check it out
+          git fetch origin main
+          git checkout main
+
+          # Check if package.json needs updating
+          CURRENT_VERSION=$(node -p "require('./package.json').version")
+          if [ "$CURRENT_VERSION" = "$VERSION" ]; then
+            echo "✅ package.json already has version $VERSION, no commit needed"
+            exit 0
+          fi
+
+          # Update package.json version
+          node -e "
+            const fs = require('fs');
+            const pkg = JSON.parse(fs.readFileSync('package.json', 'utf8'));
+            pkg.version = '$VERSION';
+            fs.writeFileSync('package.json', JSON.stringify(pkg, null, 2) + '\n');
+            console.log('Updated package.json version to', '$VERSION');
+          "
+
+          # Commit and push
+          git add package.json
+          git commit -m "chore: update version to $VERSION [skip ci]"
+          git push origin main
+          echo "✅ Committed and pushed updated package.json to main"
+
+      - name: Upload build artifacts
+        if: success()
         uses: actions/upload-artifact@v4
         with:
           name: build-artifacts-${{ steps.tag_version.outputs.version }}
           path: out/
           retention-days: 30
-

docs/RELEASES.md

@@ -42,7 +42,7 @@ Before creating a release, update:
 3. **next.config.js**: Update version in environment variables (if needed)
    ```javascript
    env: {
-     NEXT_PUBLIC_APP_VERSION: process.env.NEXT_PUBLIC_APP_VERSION || '0.1.0',
+     NEXT_PUBLIC_APP_VERSION: process.env.NEXT_PUBLIC_APP_VERSION || 'dev',
    }
    ```
 

next.config.js

@@ -14,7 +14,8 @@ const nextConfig = {
   },
   env: {
     NEXT_PUBLIC_APP_NAME: process.env.NEXT_PUBLIC_APP_NAME || 'DevPockit',
-    NEXT_PUBLIC_APP_VERSION: process.env.NEXT_PUBLIC_APP_VERSION || '0.1.0',
+    // Version comes from GitHub release tag (v*) during CI/CD builds, shows 'dev' locally
+    NEXT_PUBLIC_APP_VERSION: process.env.NEXT_PUBLIC_APP_VERSION || 'dev',
   },
   // HTTPS is handled via the dev:https script in package.json
 }

src/components/AppSidebar.tsx

@@ -47,6 +47,7 @@ import {
   Moon,
   PanelLeft,
   RefreshCw,
+  Search,
   Settings,
   Sun,
   type LucideIcon,
@@ -76,6 +77,8 @@ interface AppSidebarProps extends React.ComponentProps<typeof Sidebar> {
   onHomeClick?: () => void
   onLogoClick?: () => void  // Clears all state and navigates home
   onAboutClick?: () => void  // Handles About page navigation
+  onSearchClick?: () => void  // Opens command palette
+  onClearAllAndGoHome?: () => void  // Clears all tabs and navigates home
 }
 
 export function AppSidebar({
@@ -84,6 +87,8 @@ export function AppSidebar({
   onHomeClick,
   onLogoClick,
   onAboutClick,
+  onSearchClick,
+  onClearAllAndGoHome,
   ...props
 }: AppSidebarProps) {
   const router = useRouter()
@@ -206,15 +211,39 @@ export function AppSidebar({
             className="flex-1 min-w-0 group-data-[collapsible=icon]:hidden cursor-pointer"
             onClick={handleLogoClick}
           >
-            <div className="font-serif text-[24px] leading-[24px] tracking-normal text-sidebar-foreground hover:opacity-80 transition-opacity">
-              DevPockit
+            <div className="flex items-baseline gap-2 hover:opacity-80 transition-opacity">
+              <span className="font-serif text-[24px] leading-[24px] tracking-normal text-sidebar-foreground">
+                DevPockit
+              </span>
+              <span className="text-xs text-muted-foreground">
+                v{process.env.NEXT_PUBLIC_APP_VERSION}
+              </span>
             </div>
           </div>
           <SidebarTrigger className={cn("ml-auto", isCollapsed && "hidden")} />
         </div>
         <div className="mt-1 group-data-[collapsible=icon]:hidden">
-          <SearchTools onToolSelect={handleToolSelect} />
+          <SearchTools onToolSelect={handleToolSelect} onSearchClick={onSearchClick} />
         </div>
+        {/* Search button for collapsed sidebar */}
+        {isCollapsed && (
+          <div className="mt-1">
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <button
+                  onClick={() => onSearchClick?.()}
+                  className="w-full h-9 flex items-center justify-center rounded-md hover:bg-sidebar-accent transition-colors"
+                  aria-label="Search tools"
+                >
+                  <Search className="h-4 w-4 text-sidebar-foreground" />
+                </button>
+              </TooltipTrigger>
+              <TooltipContent side="right">
+                Search tools
+              </TooltipContent>
+            </Tooltip>
+          </div>
+        )}
       </SidebarHeader>
       <SidebarContent>
         <SidebarGroup className="mb-1">
@@ -224,7 +253,13 @@ export function AppSidebar({
                 <SidebarMenuButton
                   tooltip="All tools"
                   isActive={pathname === '/'}
-                  onClick={handleHomeClick}
+                  onClick={() => {
+                    if (onClearAllAndGoHome) {
+                      onClearAllAndGoHome();
+                    } else {
+                      handleHomeClick();
+                    }
+                  }}
                 >
                   <Home className="h-4 w-4" />
                   <span>All tools</span>
@@ -319,10 +354,12 @@ export function AppSidebar({
             </SidebarMenuButton>
           </SidebarMenuItem>
           <SidebarMenuItem>
-            <SidebarMenuButton tooltip={isCollapsed ? "Support us" : undefined}>
-              <Heart className="h-4 w-4" />
-              <span className={cn(isCollapsed && "hidden")}>Support us</span>
-            </SidebarMenuButton>
+            <a href="https://buymeacoffee.com/hypkey" target="_blank" rel="noopener noreferrer">
+              <SidebarMenuButton tooltip={isCollapsed ? "Support us" : undefined}>
+                <Heart className="h-4 w-4" />
+                <span className={cn(isCollapsed && "hidden")}>Support us</span>
+              </SidebarMenuButton>
+            </a>
           </SidebarMenuItem>
         </SidebarMenu>
 

src/components/layout/AppLayout.tsx

@@ -12,6 +12,7 @@ import { startTransition, useCallback, useEffect, useRef, useState } from 'react
 import { AppSidebar } from '../AppSidebar';
 import { AboutPage } from '../pages/AboutPage';
 import { WelcomePage } from '../pages/WelcomePage';
+import { CommandPalette } from './CommandPalette';
 import { MobileTopBar } from './MobileTopBar';
 import { TopNavTabs, type ActiveTab } from './TopNavTabs';
 
@@ -104,6 +105,7 @@ function AppLayoutInner({ children }: AppLayoutProps) {
   const [previousTool, setPreviousTool] = useState<string | undefined>();
   const [alertOpen, setAlertOpen] = useState(false);
   const [alertMessage, setAlertMessage] = useState('');
+  const [isCommandPaletteOpen, setIsCommandPaletteOpen] = useState(false);
   const pathname = usePathname();
   const router = useRouter();
 
@@ -252,30 +254,33 @@ function AppLayoutInner({ children }: AppLayoutProps) {
         return;
       }
 
-      // Escape to toggle between current tool and welcome page
+      // Escape key handling - prioritize command palette if open
       if (e.key === 'Escape') {
+        if (isCommandPaletteOpen) {
+          // Command palette will handle its own close via onOpenChange
+          return;
+        }
         e.preventDefault();
         if (selectedTool && selectedInstanceId) {
           setPreviousTool(selectedTool);
           router.replace('/');
         } else {
           restorePreviousTool();
         }
+        return;
       }
 
-      // Ctrl+K for search focus
-      if (e.ctrlKey && e.key === 'k') {
+      // Ctrl+K or Cmd+K for command palette
+      if ((e.ctrlKey || e.metaKey) && e.key === 'k') {
         e.preventDefault();
-        const searchInput = document.querySelector('input[placeholder*="Search"]') as HTMLInputElement;
-        if (searchInput) {
-          searchInput.focus();
-        }
+        setIsCommandPaletteOpen(true);
+        return;
       }
     };
 
     window.addEventListener('keydown', handleKeyDown);
     return () => window.removeEventListener('keydown', handleKeyDown);
-  }, [selectedTool, selectedInstanceId, router, restorePreviousTool]);
+  }, [selectedTool, selectedInstanceId, router, restorePreviousTool, isCommandPaletteOpen]);
 
   const handleToolSelect = (toolId: string) => {
     const tool = getToolById(toolId);
@@ -406,6 +411,8 @@ function AppLayoutInner({ children }: AppLayoutProps) {
             onHomeClick={handleHomeClick}
             onLogoClick={handleClearAllAndGoHome}
             onAboutClick={handleAboutClick}
+            onSearchClick={() => setIsCommandPaletteOpen(true)}
+            onClearAllAndGoHome={handleClearAllAndGoHome}
           />
           <SidebarInset>
             <div className={cn(
@@ -453,6 +460,13 @@ function AppLayoutInner({ children }: AppLayoutProps) {
         message={alertMessage}
         confirmText="OK"
       />
+
+      {/* Command Palette */}
+      <CommandPalette
+        open={isCommandPaletteOpen}
+        onOpenChange={setIsCommandPaletteOpen}
+        onToolSelect={handleToolSelect}
+      />
     </>
   );
 }