🚀 Search Performance & UX Enhancement Suite

.github/workflows/release.yml

@@ -1,4 +1,3 @@
-# .github/workflows/release.yml
 name: Release
 
 on:
@@ -17,7 +16,6 @@ on:
 jobs:
   release-please:
     runs-on: ubuntu-latest
-    # Only run on merged PRs or manual dispatch
     if: github.event_name == 'workflow_dispatch' || (github.event.pull_request.merged == true)
     outputs:
       releases_created: ${{ steps.manual_release.outputs.releases_created }}
@@ -38,58 +36,65 @@ jobs:
         run: |
           npm install -g release-please
           npm install semver
-
-          # Configure git
+
           git config --global user.name "github-actions[bot]"
           git config --global user.email "github-actions[bot]@users.noreply.github.com"
-
-          # Get current version from manifest
+
           CURRENT_VERSION=$(cat .release-please-manifest.json | jq -r '.Website')
           echo "Current version: $CURRENT_VERSION"
-
-          # Calculate next version based on release type using Node.js
+
           NEXT_VERSION=$(node -e "
             const semver = require('semver');
             const current = '$CURRENT_VERSION';
             const type = '${{ github.event.inputs.release_type }}';
             console.log(semver.inc(current, type));
           ")
-          
+
           echo "Next version will be: $NEXT_VERSION"
-
-          # Update version in package.json
+
           cd Website
           npm version $NEXT_VERSION --no-git-tag-version
           cd ..
-
-          # Update manifest file
+
           jq --arg version "$NEXT_VERSION" '.Website = $version' .release-please-manifest.json > temp.json && mv temp.json .release-please-manifest.json
-
-          # Generate changelog entry
+
           echo "## [$NEXT_VERSION] - $(date +'%Y-%m-%d')" > temp_changelog.md
           echo "" >> temp_changelog.md
           echo "### Changed" >> temp_changelog.md
-          echo "- Manual ${{ github.event.inputs.release_type }} release" >> temp_changelog.md
+
+          LAST_TAG="website-v$CURRENT_VERSION"
+          git fetch --tags
+          if git rev-parse "$LAST_TAG" >/dev/null 2>&1; then
+            echo "- Changes since $CURRENT_VERSION:" >> temp_changelog.md
+            COMMITS=$(git log "$LAST_TAG"..HEAD --pretty=format:"- %s")
+            if [ -n "$COMMITS" ]; then
+              echo "$COMMITS" >> temp_changelog.md
+            else
+              echo "- No new commits since last version" >> temp_changelog.md
+            fi
+          else
+            echo "- Manual ${{ github.event.inputs.release_type }} release" >> temp_changelog.md
+            echo "- (No previous tag $LAST_TAG found to compare commits)" >> temp_changelog.md
+          fi
           echo "" >> temp_changelog.md
-
-          # Prepend to existing changelog if it exists
+
           if [ -f "Website/CHANGELOG.md" ]; then
             cat temp_changelog.md Website/CHANGELOG.md > temp_full_changelog.md
             mv temp_full_changelog.md Website/CHANGELOG.md
           else
             mv temp_changelog.md Website/CHANGELOG.md
           fi
-
-          # Commit and push changes
+
           git add .
           git commit -m "chore(release): release $NEXT_VERSION
 
           Release type: ${{ github.event.inputs.release_type }}
           Previous version: $CURRENT_VERSION
           New version: $NEXT_VERSION"
-
-          git push origin HEAD
-
+
+          git tag -a "website-v$NEXT_VERSION" -m "Release $NEXT_VERSION"
+          git push origin HEAD --tags
+
           echo "releases_created=true" >> $GITHUB_OUTPUT
           echo "version=$NEXT_VERSION" >> $GITHUB_OUTPUT
 

Website/app/page.tsx

@@ -1,12 +1,15 @@
 import { DatamodelView } from "@/components/datamodelview/DatamodelView";
 import { TouchProvider } from "@/components/ui/hybridtooltop";
 import { Loading } from "@/components/ui/loading";
+import { DatamodelDataProvider } from "@/contexts/DatamodelDataContext";
 import { Suspense } from "react";
 
 export default function Home() {
   return <Suspense fallback={<Loading />}>
       <TouchProvider>
-        <DatamodelView />
+        <DatamodelDataProvider>
+          <DatamodelView />
+        </DatamodelDataProvider>
       </TouchProvider>
     </Suspense>
 }

Website/components/AppSidebar.tsx

@@ -5,18 +5,24 @@ import { SidebarClose, SidebarOpen } from 'lucide-react'
 import { useIsMobile } from '@/hooks/use-mobile'
 import SidebarNavRail from './SidebarNavRail'
 import clsx from 'clsx'
+import { useState } from 'react';
 
 interface IAppSidebarProps {}
 
 export const AppSidebar = ({}: IAppSidebarProps) => {
   const { element, isOpen } = useSidebar()
   const dispatch = useSidebarDispatch()
   const isMobile = useIsMobile()
+  const [showElement, setShowElement] = useState(true)
 
   const toggleSidebar = () => {
     dispatch({ type: 'SET_OPEN', payload: !isOpen })
   }
 
+  const toggleElement = () => {
+    setShowElement(v => !v)
+  }
+
   return (
     <>
       {/* Toggle Button (mobile only) */}
@@ -32,31 +38,66 @@ export const AppSidebar = ({}: IAppSidebarProps) => {
         </button>
       )}
 
+      {/* Overlay for mobile sidebar */}
+      {isMobile && isOpen && (
+        <div
+          className="fixed inset-0 bg-black bg-opacity-30 z-30"
+          onClick={toggleSidebar}
+          aria-label="Close sidebar overlay"
+        />
+      )}
+
       {/* Sidebar */}
       <div
-        className={clsx('h-screen w-64 bg-sidebar border-r border-sidebar-border z-40 transition-transform duration-300',
+        className={clsx(
+          'h-screen bg-sidebar border-r border-sidebar-border z-40',
+          'transition-all duration-300',
           isMobile
             ? [
                 'fixed top-0 left-0',
                 isOpen ? 'translate-x-0' : '-translate-x-full',
-                'flex flex-col'
+                'flex flex-col',
+                'w-64'
+              ]
+            : [
+                'flex flex-col sticky top-0'
               ]
-            : 'flex flex-col sticky top-0'
         )}
+        style={
+          isMobile
+            ? undefined
+            : { width: showElement ? '16rem' : '3.5rem', transitionProperty: 'width' }
+        }
       >
         {/* Header */}
-        <div className="w-full h-16 border-b border-sidebar-border p-2 flex justify-center items-center bg-white">
+        <div className="w-full h-16 border-b border-sidebar-border p-2 flex justify-center items-center bg-white relative">
           {isMobile ? (
             <img src="/DMVLOGO.svg" alt="Logo" className="h-full" draggable={false} />
           ) : (
-            <img src="/DMVLOGOHORZ.svg" alt="Logo" className="h-full" draggable={false} />
+            showElement ? (
+              <img src="/DMVLOGOHORZ.svg" alt="Logo" className="h-full" draggable={false} />
+            ) : (
+              <img src="/DMVLOGO.svg" alt="Logo" className="h-full" draggable={false} />
+            )
           )}
         </div>
 
+        {/* Vertically centered sidebar toggle button (desktop only) */}
+        {!isMobile && (
+          <button
+            onClick={toggleElement}
+            className="absolute right-0 top-1/2 -translate-y-1/2 w-4 h-12 bg-gray-50 border border-gray-300 shadow rounded-sm flex items-center justify-center z-50 hover:bg-blue-50"
+            style={{ marginRight: '-12px' }}
+            aria-label={showElement ? 'Hide Details' : 'Show Details'}
+          >
+            {showElement ? <SidebarClose size={10} /> : <SidebarOpen size={10} />}
+          </button>
+        )}
+
         {/* Content */}
         <div className="flex-1 overflow-y-auto relative flex">
           <SidebarNavRail />
-          {element}
+          {(isMobile || showElement) && element}
         </div>
       </div>
     </>

Website/components/attributes/StatusAttribute.tsx

@@ -1,31 +1,48 @@
-import { StatusAttributeType, StatusOption } from "@/lib/Types"
-import { formatNumberSeperator } from "@/lib/utils"
+import { StatusAttributeType, StatusOption } from "@/lib/Types";
+import { formatNumberSeperator } from "@/lib/utils";
+import { Circle } from "lucide-react";
 
 export default function StatusAttribute({ attribute }: { attribute: StatusAttributeType }) {
     const groupedOptions = attribute.Options.reduce((acc, option) => {
         if (!acc[option.State]) {
-            acc[option.State] = []
+            acc[option.State] = [];
         }
-        acc[option.State].push(option)
-        return acc
-    }, {} as Record<string, StatusOption[]>)
+        acc[option.State].push(option);
+        return acc;
+    }, {} as Record<string, StatusOption[]>);
 
     return (
-        <div className="flex flex-col gap-2 md:gap-4">
-            <span className="font-semibold text-xs md:font-bold md:text-sm">State/Status</span>
+        <div className="flex flex-col gap-1">
+            <div className="flex items-center gap-2">
+                <span className="font-semibold text-xs md:font-bold md:text-sm">State/Status</span>
+                {/* No DefaultValue for StatusAttributeType, so no default badge */}
+            </div>
             {Object.entries(groupedOptions).map(([state, options]) => (
                 <div key={state} className="flex flex-col gap-1">
                     <span className="font-medium text-xs md:text-sm">{state}</span>
-                    <div className="grid grid-cols-[1fr_auto] gap-x-2 gap-y-1 pl-2 md:gap-x-4 md:pl-4">
+                    <div className="space-y-1">
                         {options.map(option => (
-                            <div key={option.Value} className="contents">
-                                <span className="text-xs md:text-sm">{option.Name}</span>
-                                <span className="text-right text-xs md:text-sm">{formatNumberSeperator(option.Value)}</span>
+                            <div key={option.Value}>
+                                <div className="flex items-center justify-between py-0.5 md:py-1">
+                                    <div className="flex items-center gap-2">
+                                        <div className="flex items-center gap-1">
+                                            {/* No DefaultValue, so always show Circle icon */}
+                                            <Circle className="w-2 h-2 text-gray-400 md:w-3 md:h-3" />
+                                            <span className="text-xs md:text-sm">{option.Name}</span>
+                                        </div>
+                                    </div>
+                                    <div className="flex items-center gap-2">
+                                        <span className="text-xs bg-gray-200 text-gray-700 px-1 py-0.5 rounded font-mono md:px-1.5">
+                                            {formatNumberSeperator(option.Value)}
+                                        </span>
+                                    </div>
+                                </div>
+                                {/* No Description property */}
                             </div>
                         ))}
                     </div>
                 </div>
             ))}
         </div>
-    )
+    );
 }