From d519740a360073cc799accd757b33de818a1bc09 Mon Sep 17 00:00:00 2001
From: Kevin Triplett <kt@kevintriplett.com>
Date: Mon, 3 Mar 2025 19:19:46 -0600
Subject: [PATCH 1/9] fix lint error

---
 .../AuthLayoutRouter/components/ContextMenu/ContextMenu.jsx     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/web/src/routes/AuthLayoutRouter/components/ContextMenu/ContextMenu.jsx b/apps/web/src/routes/AuthLayoutRouter/components/ContextMenu/ContextMenu.jsx
index bdb434da5..871dfb12a 100644
--- a/apps/web/src/routes/AuthLayoutRouter/components/ContextMenu/ContextMenu.jsx
+++ b/apps/web/src/routes/AuthLayoutRouter/components/ContextMenu/ContextMenu.jsx
@@ -1,5 +1,5 @@
 import { get } from 'lodash/fp'
-import { ChevronLeft, GripHorizontal, Pencil, UserPlus, LogOut, Users} from 'lucide-react'
+import { ChevronLeft, GripHorizontal, Pencil, UserPlus, LogOut, Users } from 'lucide-react'
 import React, { useMemo, useState, useCallback } from 'react'
 import { useNavigate, useLocation, Routes, Route } from 'react-router-dom'
 import { replace } from 'redux-first-history'

From 140f131f98531b9f3f69b3273f3f45e7ef47e28d Mon Sep 17 00:00:00 2001
From: Kevin Triplett <kt@kevintriplett.com>
Date: Tue, 4 Mar 2025 09:55:09 -0600
Subject: [PATCH 2/9] scroll new widget into view

---
 .../components/ContextMenu/ContextMenu.jsx    | 26 ++++++++++++++++---
 1 file changed, 23 insertions(+), 3 deletions(-)

diff --git a/apps/web/src/routes/AuthLayoutRouter/components/ContextMenu/ContextMenu.jsx b/apps/web/src/routes/AuthLayoutRouter/components/ContextMenu/ContextMenu.jsx
index 871dfb12a..f7194374d 100644
--- a/apps/web/src/routes/AuthLayoutRouter/components/ContextMenu/ContextMenu.jsx
+++ b/apps/web/src/routes/AuthLayoutRouter/components/ContextMenu/ContextMenu.jsx
@@ -1,6 +1,6 @@
 import { get } from 'lodash/fp'
 import { ChevronLeft, GripHorizontal, Pencil, UserPlus, LogOut, Users } from 'lucide-react'
-import React, { useMemo, useState, useCallback } from 'react'
+import React, { useRef, useEffect, useMemo, useState, useCallback } from 'react'
 import { useNavigate, useLocation, Routes, Route } from 'react-router-dom'
 import { replace } from 'redux-first-history'
 import { useTranslation } from 'react-i18next'
@@ -35,6 +35,8 @@ import getQuerystringParam from 'store/selectors/getQuerystringParam'
 import logout from 'store/actions/logout'
 import classes from './ContextMenu.module.scss'
 
+let previousWidgets = []
+
 export default function ContextMenu (props) {
   const {
     className,
@@ -84,6 +86,19 @@ export default function ContextMenu (props) {
   const [activeWidget, setActiveWidget] = useState(null)
   const toggleNavMenuAction = useCallback(() => dispatch(toggleNavMenu()), [])
 
+  let newWidget = previousWidgets.length > 0 ? orderedWidgets.find(widget => previousWidgets.indexOf(widget.id) === -1) : null
+  previousWidgets = orderedWidgets.map(widget => widget.id)
+  const newWidgetRef = useRef()
+
+  useEffect(() => {
+    if (newWidget && newWidgetRef.current) {
+      const element = newWidgetRef.current
+      element.scrollIntoView({ behavior: 'smooth', block: 'center' })
+      // TODO: animate element to draw attention to it
+      newWidget = null
+    }
+  }, [newWidget])
+
   const handleDragStart = ({ active }) => {
     setIsDragging(true)
 
@@ -154,6 +169,8 @@ export default function ContextMenu (props) {
                 rootPath={rootPath}
                 canAdminister={canAdminister}
                 activeWidget={activeWidget}
+                newWidget={newWidget}
+                newWidgetRef={newWidgetRef}
                 group={group}
               />
             </div>
@@ -185,7 +202,7 @@ export default function ContextMenu (props) {
   )
 }
 
-function ContextWidgetList ({ contextWidgets, groupSlug, rootPath, canAdminister, isEditing, isDragging, activeWidget, group }) {
+function ContextWidgetList ({ contextWidgets, groupSlug, rootPath, canAdminister, isEditing, isDragging, activeWidget, newWidget, newWidgetRef, group }) {
   const navigate = useNavigate()
   const location = useLocation()
 
@@ -193,6 +210,9 @@ function ContextWidgetList ({ contextWidgets, groupSlug, rootPath, canAdminister
     navigate(addQuerystringToPath(location.pathname, { addview: 'yes', cme: 'yes', parentId: widget?.parentId || parentId, orderInFrontOfWidgetId: widget?.id || null }))
   }
 
+  const itemProps = {}
+  if (newWidget) itemProps[newWidget.id] = { ref: newWidgetRef }
+
   return (
     <ul className='m-2 p-0 mb-6'>
       {isEditing &&
@@ -202,7 +222,7 @@ function ContextWidgetList ({ contextWidgets, groupSlug, rootPath, canAdminister
           </DropZone>
         </div>}
       {contextWidgets.map((widget, index) => (
-        <li className='mb-2 items-start animate-slide-up invisible' style={{ '--delay': `${index * 35}ms` }} key={widget.id}>
+        <li className='mb-2 items-start animate-slide-up invisible' style={{ '--delay': `${index * 35}ms` }} key={widget.id} {...itemProps[widget.id]}>
           <ContextMenuItem widget={widget} groupSlug={groupSlug} rootPath={rootPath} canAdminister={canAdminister} isEditing={isEditing} isDragging={isDragging} activeWidget={activeWidget} group={group} handlePositionedAdd={handlePositionedAdd} />
         </li>
       ))}

From 016ed02ab9a28fe924bba1f535dda837ab0fc2c8 Mon Sep 17 00:00:00 2001
From: Kevin Triplett <kt@kevintriplett.com>
Date: Tue, 4 Mar 2025 10:20:47 -0600
Subject: [PATCH 3/9] draw attention to new widget

---
 .../components/ContextMenu/ContextMenu.jsx                 | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/apps/web/src/routes/AuthLayoutRouter/components/ContextMenu/ContextMenu.jsx b/apps/web/src/routes/AuthLayoutRouter/components/ContextMenu/ContextMenu.jsx
index f7194374d..14d800c45 100644
--- a/apps/web/src/routes/AuthLayoutRouter/components/ContextMenu/ContextMenu.jsx
+++ b/apps/web/src/routes/AuthLayoutRouter/components/ContextMenu/ContextMenu.jsx
@@ -94,7 +94,12 @@ export default function ContextMenu (props) {
     if (newWidget && newWidgetRef.current) {
       const element = newWidgetRef.current
       element.scrollIntoView({ behavior: 'smooth', block: 'center' })
-      // TODO: animate element to draw attention to it
+      element.classList.remove('animate-slide-up')
+      element.classList.remove('invisible')
+      element.classList.add('animate-bounce')
+      setTimeout(() => {
+        element.classList.remove('animate-bounce')
+      }, 2500)
       newWidget = null
     }
   }, [newWidget])

From 31d982656da77b77ed71a6ada81ef6a5db834838 Mon Sep 17 00:00:00 2001
From: Kevin Triplett <kt@kevintriplett.com>
Date: Tue, 4 Mar 2025 10:23:59 -0600
Subject: [PATCH 4/9] remove unnecessary test

---
 .../AuthLayoutRouter/components/ContextMenu/ContextMenu.jsx     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/apps/web/src/routes/AuthLayoutRouter/components/ContextMenu/ContextMenu.jsx b/apps/web/src/routes/AuthLayoutRouter/components/ContextMenu/ContextMenu.jsx
index 14d800c45..53abb6703 100644
--- a/apps/web/src/routes/AuthLayoutRouter/components/ContextMenu/ContextMenu.jsx
+++ b/apps/web/src/routes/AuthLayoutRouter/components/ContextMenu/ContextMenu.jsx
@@ -91,7 +91,7 @@ export default function ContextMenu (props) {
   const newWidgetRef = useRef()
 
   useEffect(() => {
-    if (newWidget && newWidgetRef.current) {
+    if (newWidgetRef.current) {
       const element = newWidgetRef.current
       element.scrollIntoView({ behavior: 'smooth', block: 'center' })
       element.classList.remove('animate-slide-up')

From e3bc48768579329ee2f1697e67c78061be0ffbc2 Mon Sep 17 00:00:00 2001
From: Kevin Triplett <kt@kevintriplett.com>
Date: Tue, 4 Mar 2025 11:59:50 -0600
Subject: [PATCH 5/9] remove unnecessary code

---
 .../AuthLayoutRouter/components/ContextMenu/ContextMenu.jsx    | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/apps/web/src/routes/AuthLayoutRouter/components/ContextMenu/ContextMenu.jsx b/apps/web/src/routes/AuthLayoutRouter/components/ContextMenu/ContextMenu.jsx
index 53abb6703..3607e66ca 100644
--- a/apps/web/src/routes/AuthLayoutRouter/components/ContextMenu/ContextMenu.jsx
+++ b/apps/web/src/routes/AuthLayoutRouter/components/ContextMenu/ContextMenu.jsx
@@ -86,7 +86,7 @@ export default function ContextMenu (props) {
   const [activeWidget, setActiveWidget] = useState(null)
   const toggleNavMenuAction = useCallback(() => dispatch(toggleNavMenu()), [])
 
-  let newWidget = previousWidgets.length > 0 ? orderedWidgets.find(widget => previousWidgets.indexOf(widget.id) === -1) : null
+  const newWidget = previousWidgets.length > 0 ? orderedWidgets.find(widget => previousWidgets.indexOf(widget.id) === -1) : null
   previousWidgets = orderedWidgets.map(widget => widget.id)
   const newWidgetRef = useRef()
 
@@ -100,7 +100,6 @@ export default function ContextMenu (props) {
       setTimeout(() => {
         element.classList.remove('animate-bounce')
       }, 2500)
-      newWidget = null
     }
   }, [newWidget])
 

From 328a7a02c309c4c4fb4a421b93560c60a28473c2 Mon Sep 17 00:00:00 2001
From: Aaron <aaronb@gmail.com>
Date: Tue, 4 Mar 2025 15:19:12 -0800
Subject: [PATCH 6/9] Improvements to dragging experience in context menu
 editing

---
 .../components/ContextMenu/ContextMenu.jsx       | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/apps/web/src/routes/AuthLayoutRouter/components/ContextMenu/ContextMenu.jsx b/apps/web/src/routes/AuthLayoutRouter/components/ContextMenu/ContextMenu.jsx
index 3607e66ca..1fa99f6e5 100644
--- a/apps/web/src/routes/AuthLayoutRouter/components/ContextMenu/ContextMenu.jsx
+++ b/apps/web/src/routes/AuthLayoutRouter/components/ContextMenu/ContextMenu.jsx
@@ -395,7 +395,7 @@ function GrabMe ({ children, ...props }) {
   )
 }
 
-function DropZone ({ droppableParams, isDroppable = true, height = '', hide = false, children, removalDropZone }) {
+function DropZone ({ droppableParams, isDroppable = true, height = '', hide = false, children, removalDropZone, isDragging = false }) {
   const { setNodeRef, isOver } = useDroppable(droppableParams)
 
   if (hide || !isDroppable) {
@@ -406,15 +406,15 @@ function DropZone ({ droppableParams, isDroppable = true, height = '', hide = fa
     <div
       ref={setNodeRef}
       className={cn(
-        'transition-all duration-200 rounded-lg bg-foreground/20 mb-2',
-        height,
-        isOver && !removalDropZone && 'bg-selected/70 border-foreground p-5',
-        !isOver && !removalDropZone && 'bg-transparent border-transparent p-0',
-        isOver && removalDropZone && 'bg-destructive/70 border-foreground p-5',
-        !isOver && removalDropZone && 'bg-destructive/40 border-transparent p-2'
+        'transition-all duration-200 rounded-lg overflow-hidden',
+        !isDragging && 'h-0',
+        isDragging && !isOver && 'h-[8px] mb-1 bg-selected/10 hover:bg-foreground/20',
+        isOver && !removalDropZone && 'bg-selected/70 p-5 min-h-[40px]',
+        isOver && removalDropZone && 'bg-destructive/70 border-2 border-foreground p-5 min-h-[40px]',
+        isDragging && !isOver && removalDropZone && 'bg-destructive/20 hover:bg-destructive/30'
       )}
     >
-      {children}
+      {isOver && children}
     </div>
   )
 }

From 74dd1db13e2dded8c2368999d4eb2279b8d42aaf Mon Sep 17 00:00:00 2001
From: Aaron <aaronb@gmail.com>
Date: Tue, 4 Mar 2025 17:38:00 -0800
Subject: [PATCH 7/9] Made multiple improvements, to make the bounce work
 better for more use cases like when it appears slightly outside of the
 viewport

---
 apps/web/src/routes/AllView/AllView.jsx       |  67 +++++-
 .../components/ContextMenu/ContextMenu.jsx    | 227 +++++++++++++++++-
 2 files changed, 274 insertions(+), 20 deletions(-)

diff --git a/apps/web/src/routes/AllView/AllView.jsx b/apps/web/src/routes/AllView/AllView.jsx
index ae6a625ff..42c38dc8d 100644
--- a/apps/web/src/routes/AllView/AllView.jsx
+++ b/apps/web/src/routes/AllView/AllView.jsx
@@ -1,4 +1,4 @@
-import React, { useMemo, useCallback, useState, useEffect } from 'react'
+import React, { useMemo, useCallback, useState, useEffect, useRef } from 'react'
 import { useSelector, useDispatch } from 'react-redux'
 import { useTranslation } from 'react-i18next'
 import { useLocation, useNavigate, useParams } from 'react-router-dom'
@@ -197,6 +197,11 @@ function AddOption ({ title, onClick, description, disabled = false }) {
   )
 }
 
+/**
+ * Dialog for adding new views to the context menu
+ * Handles the creation process and communicates with ContextMenu component
+ * for proper scrolling and highlighting of newly created items
+ */
 function AddViewDialog ({ group, orderInFrontOfWidgetId, parentId, addToEnd, parentWidget }) {
   const { t } = useTranslation()
   const location = useLocation()
@@ -212,12 +217,22 @@ function AddViewDialog ({ group, orderInFrontOfWidgetId, parentId, addToEnd, par
   const [widgetData, setWidgetData] = useState({ title: '', visibility: 'all' })
   const [isCreating, setIsCreating] = useState(false)
 
+  // Store the widget ID between renders
+  const createdWidgetIdRef = useRef(null)
+
   const handleReset = () => {
     setAddChoice(null)
     setSelectedItem(null)
     setWidgetData({ title: '', visibility: 'all' })
   }
 
+  /**
+   * Creates a new context widget and communicates its ID to the ContextMenu component
+   * Uses multiple communication channels for reliability:
+   * 1. URL parameters - Main method for direct communication
+   * 2. LocalStorage - Backup in case URL params get cleared
+   * 3. Custom events - For real-time notification
+   */
   const handleCreate = useCallback(async ({ widgetData, selectedItem, addChoice }) => {
     setIsCreating(true)
     let groupTopic
@@ -234,7 +249,7 @@ function AddViewDialog ({ group, orderInFrontOfWidgetId, parentId, addToEnd, par
       visibility: widgetData.visibility === 'all' ? null : widgetData.visibility,
       type: addChoice === CHAT ? CHAT : null, // The default is for type to be null unless there is a specific need
       title: widgetData.title === '' ? null : widgetData.title,
-      icon: null, // TODO CONTEXT: what is required for icons?
+      icon: null,
       viewGroupId: addChoice === GROUP ? selectedItem.id : null,
       viewPostId: addChoice === POST ? selectedItem.id : null,
       customViewInput: addChoice === CUSTOM_VIEW ? cleanCustomView(selectedItem) : null,
@@ -244,17 +259,55 @@ function AddViewDialog ({ group, orderInFrontOfWidgetId, parentId, addToEnd, par
       orderInFrontOfWidgetId
     }
 
-    // Widget will be inserted into the menu as a 'loading' widget, and then properly inserted when returned from the db
     try {
-      await dispatch(createContextWidget({ data: contextWidgetInput, groupId: group.id }))
-      handleReset()
-      navigate(addQuerystringToPath(location.pathname, { cme: 'yes' }))
+      const result = await dispatch(createContextWidget({ data: contextWidgetInput, groupId: group.id }))
+
+      // Extract the new widget ID from the response
+      const newWidgetId = result?.payload?.data?.createContextWidget?.id
+
+      if (newWidgetId) {
+        // Save the ID in our ref for post-navigation use
+        createdWidgetIdRef.current = newWidgetId
+
+        // Method 1: Store in localStorage as a backup communication method (expires after 5 seconds)
+        localStorage.setItem('hylo:last-created-widget', newWidgetId)
+        localStorage.setItem('hylo:last-created-timestamp', Date.now().toString())
+
+        // Method 2: Dispatch event for immediate notification
+        window.dispatchEvent(new CustomEvent('hylo:new-widget-added', {
+          detail: { widgetId: newWidgetId, timestamp: Date.now() }
+        }))
+
+        // Create redirect URL with the widget ID
+        const baseGroupUrl = baseUrl({ groupSlug: group.slug, view: null })
+
+        // Method 3: Include widget ID in URL parameters
+        const urlParams = new URLSearchParams()
+        urlParams.set('newWidgetId', newWidgetId)
+
+        // First, reset the current dialog state
+        handleReset()
+
+        // Then navigate to the group page with the new widget ID in URL
+        navigate(`${baseGroupUrl}?${urlParams.toString()}`)
+
+        // Dispatch the event again after a delay to handle component remounts during navigation
+        setTimeout(() => {
+          window.dispatchEvent(new CustomEvent('hylo:new-widget-added', {
+            detail: { widgetId: newWidgetId, timestamp: Date.now() }
+          }))
+        }, 500)
+      } else {
+        handleReset()
+        navigate(baseUrl({ groupSlug: group.slug, view: null }))
+      }
     } catch (error) {
       console.error('Failed to create context widget:', error)
+      handleReset()
     } finally {
       setIsCreating(false)
     }
-  }, [])
+  }, [dispatch, group.id, group.slug, navigate, orderInFrontOfWidgetId, parentId])
 
   return (
     <div className='fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50'>
diff --git a/apps/web/src/routes/AuthLayoutRouter/components/ContextMenu/ContextMenu.jsx b/apps/web/src/routes/AuthLayoutRouter/components/ContextMenu/ContextMenu.jsx
index 1fa99f6e5..3f5059bf4 100644
--- a/apps/web/src/routes/AuthLayoutRouter/components/ContextMenu/ContextMenu.jsx
+++ b/apps/web/src/routes/AuthLayoutRouter/components/ContextMenu/ContextMenu.jsx
@@ -1,7 +1,7 @@
 import { get } from 'lodash/fp'
 import { ChevronLeft, GripHorizontal, Pencil, UserPlus, LogOut, Users } from 'lucide-react'
 import React, { useRef, useEffect, useMemo, useState, useCallback } from 'react'
-import { useNavigate, useLocation, Routes, Route } from 'react-router-dom'
+import { useNavigate, useLocation, Routes, Route, useSearchParams } from 'react-router-dom'
 import { replace } from 'redux-first-history'
 import { useTranslation } from 'react-i18next'
 import { useSelector, useDispatch } from 'react-redux'
@@ -35,7 +35,9 @@ import getQuerystringParam from 'store/selectors/getQuerystringParam'
 import logout from 'store/actions/logout'
 import classes from './ContextMenu.module.scss'
 
+// Track all previous widgets and their children to detect new views
 let previousWidgets = []
+let previousChildItems = []
 
 export default function ContextMenu (props) {
   const {
@@ -49,6 +51,7 @@ export default function ContextMenu (props) {
   const location = useLocation()
   const currentUser = useSelector(getMe)
   const { t } = useTranslation()
+  const [searchParams] = useSearchParams()
 
   const group = useSelector(state => currentGroup || getGroupForSlug(state, routeParams.groupSlug))
   const canAdminister = useSelector(state => hasResponsibilityForGroup(state, { responsibility: RESP_ADMINISTRATION, groupId: group?.id }))
@@ -86,22 +89,215 @@ export default function ContextMenu (props) {
   const [activeWidget, setActiveWidget] = useState(null)
   const toggleNavMenuAction = useCallback(() => dispatch(toggleNavMenu()), [])
 
+  // Track the newly added top-level widget
   const newWidget = previousWidgets.length > 0 ? orderedWidgets.find(widget => previousWidgets.indexOf(widget.id) === -1) : null
   previousWidgets = orderedWidgets.map(widget => widget.id)
   const newWidgetRef = useRef()
 
+  // Enhanced detection using multiple methods
+  const [newViewId, setNewViewId] = useState(null)
+  const newViewRef = useRef()
+  const wasRecentlyAddingView = useRef(false)
+  
+  // Check URL param and localStorage for widget ID
   useEffect(() => {
-    if (newWidgetRef.current) {
-      const element = newWidgetRef.current
-      element.scrollIntoView({ behavior: 'smooth', block: 'center' })
-      element.classList.remove('animate-slide-up')
-      element.classList.remove('invisible')
-      element.classList.add('animate-bounce')
-      setTimeout(() => {
-        element.classList.remove('animate-bounce')
-      }, 2500)
+    const newWidgetIdFromUrl = searchParams.get('newWidgetId')
+    
+    if (newWidgetIdFromUrl) {
+      console.log('Found new widget ID in URL:', newWidgetIdFromUrl)
+      setNewViewId(newWidgetIdFromUrl)
+      
+      // Remove from URL once detected
+      const newParams = new URLSearchParams(searchParams)
+      newParams.delete('newWidgetId')
+      navigate(`${location.pathname}?${newParams.toString()}`, { replace: true })
+    } else {
+      // Check localStorage as backup
+      const storedWidgetId = localStorage.getItem('hylo:last-created-widget')
+      const timestamp = parseInt(localStorage.getItem('hylo:last-created-timestamp') || '0')
+      
+      // Only use stored ID if it's recent (within last 5 seconds)
+      if (storedWidgetId && Date.now() - timestamp < 5000) {
+        console.log('Found new widget ID in localStorage:', storedWidgetId)
+        setNewViewId(storedWidgetId)
+        localStorage.removeItem('hylo:last-created-widget')
+        localStorage.removeItem('hylo:last-created-timestamp')
+      }
     }
-  }, [newWidget])
+  }, [searchParams, location])
+  
+  // Listen for custom events
+  useEffect(() => {
+    const handleNewWidgetEvent = (event) => {
+      if (event.detail?.widgetId) {
+        console.log('Received new widget event:', event.detail.widgetId)
+        setNewViewId(event.detail.widgetId)
+      }
+    }
+    
+    window.addEventListener('hylo:new-widget-added', handleNewWidgetEvent)
+    return () => {
+      window.removeEventListener('hylo:new-widget-added', handleNewWidgetEvent)
+    }
+  }, [])
+
+  // Gather all child items from all widgets to detect new views
+  const allItems = useMemo(() => {
+    let items = []
+    // Collect items from child widgets
+    contextWidgets.forEach(widget => {
+      if (widget.childWidgets && widget.childWidgets.length > 0) {
+        items = items.concat(widget.childWidgets.map(child => child.id))
+      }
+    })
+    return items
+  }, [contextWidgets])
+
+  // Check for new views (including child views)
+  useEffect(() => {
+    if (previousChildItems.length > 0) {
+      const newItem = allItems.find(id => previousChildItems.indexOf(id) === -1)
+      if (newItem) {
+        setNewViewId(newItem)
+      }
+    }
+    previousChildItems = [...allItems]
+  }, [allItems])
+
+  /**
+   * Effect to handle scrolling to and highlighting newly added widgets or views
+   * 
+   * Waits for new elements to appear in the DOM, then scrolls precisely to their position
+   * while applying visual animations (faster bounce + border flash) for feedback.
+   */
+  useEffect(() => {
+    // Target element could be either a new top-level widget or a new child view
+    const elementId = newWidget ? newWidget.id : newViewId
+    if (!elementId) return
+    
+    // Initial delay to let React finish rendering
+    const initialTimer = setTimeout(() => {
+      // Function to find, reveal, and scroll to the target element
+      const findAndScrollToElement = (retryCount = 0) => {
+        // Try multiple selectors to find the element
+        const targetElement = 
+          newWidget ? newWidgetRef.current : null ||
+          document.querySelector(`[data-view-id="${elementId}"]`) ||
+          document.getElementById(`widget-${elementId}`) ||
+          document.querySelector(`[data-widget-id="${elementId}"]`)
+        
+        if (!targetElement && retryCount < 5) {
+          console.log('Element not found yet, retrying...', elementId)
+          // Retry after a short delay if element not found
+          setTimeout(() => findAndScrollToElement(retryCount + 1), 100 * (retryCount + 1))
+          return
+        }
+        
+        if (!targetElement) {
+          console.log('Failed to find element after multiple attempts:', elementId)
+          return
+        }
+        
+        console.log('Found element for scrolling:', elementId)
+        
+        // First make the element visible
+        targetElement.classList.remove('animate-slide-up')
+        targetElement.classList.remove('invisible')
+        
+        // Short delay to let visibility change take effect
+        setTimeout(() => {
+          // Get the scrollable container
+          const scrollContainer = document.querySelector('.ContextMenu')
+          if (!scrollContainer) return
+          
+          // Calculate element's position relative to the scroll container
+          const containerRect = scrollContainer.getBoundingClientRect()
+          const elementRect = targetElement.getBoundingClientRect()
+          
+          // Determine if element is currently visible in the viewport
+          const isFullyVisible = 
+            elementRect.top >= containerRect.top && 
+            elementRect.bottom <= containerRect.bottom
+          
+          if (!isFullyVisible) {
+            // Calculate the scroll position to center the element
+            const scrollTop = scrollContainer.scrollTop
+            const elementOffsetTop = elementRect.top - containerRect.top + scrollTop
+            const centerPosition = elementOffsetTop - (containerRect.height / 2) + (elementRect.height / 2)
+
+            console.log('Scrolling to position:', {
+              element: elementId,
+              elementOffsetTop,
+              centerPosition,
+              currentScroll: scrollTop
+            })
+
+            // Scroll to the calculated position
+            scrollContainer.scrollTo({
+              top: centerPosition,
+              behavior: 'smooth'
+            })
+          } else {
+            console.log('Element already visible, no scrolling needed')
+          }
+          // Find all links or buttons within the target element to apply border effects
+          const targetLinks = targetElement.querySelectorAll('a, button, .border-2')
+
+          // Apply bounce animation (faster, 1.2 seconds instead of 2.5)
+          targetElement.classList.add('animate-bounce')
+          // Apply border flash effect
+          targetLinks.forEach(link => {
+            // Store original border class for restoration
+            const originalBorderClass = Array.from(link.classList)
+              .find(cls => cls.includes('border-foreground'))
+
+            // Add highlighted border
+            if (originalBorderClass) {
+              link.classList.remove(originalBorderClass)
+            }
+            link.classList.add('border-foreground/100')
+
+            // Create pulsing effect with multiple flashes
+            let flashCount = 0
+            const maxFlashes = 3
+            const flashInterval = setInterval(() => {
+              flashCount++
+
+              if (flashCount >= maxFlashes) {
+                clearInterval(flashInterval)
+                // Restore original border after flashing completes
+                link.classList.remove('border-foreground/100')
+                if (originalBorderClass) {
+                  link.classList.add(originalBorderClass)
+                } else {
+                  link.classList.add('border-foreground/20')
+                }
+              } else {
+                // Toggle border visibility for flash effect
+                link.classList.toggle('border-foreground/100')
+                link.classList.toggle('border-foreground/20')
+              }
+            }, 250) // Flash every 250ms
+          })
+
+          // Remove bounce animation after 1.2 seconds
+          setTimeout(() => {
+            targetElement.classList.remove('animate-bounce')
+          }, 1200)
+
+          // Clear the newViewId if applicable
+          if (newViewId) {
+            setNewViewId(null)
+          }
+        }, 50)
+      }
+
+      // Start the find-and-scroll process
+      findAndScrollToElement()
+    }, 100)
+
+    return () => clearTimeout(initialTimer)
+  }, [newWidget, newViewId])
 
   const handleDragStart = ({ active }) => {
     setIsDragging(true)
@@ -306,7 +502,7 @@ function ContextMenuItem ({ widget, groupSlug, rootPath, canAdminister = false,
       <DropZone isDragging={isDragging} hide={hideDropZone} droppableParams={{ id: `${widget.id}`, data: { widget } }}>
         &nbsp;
       </DropZone>
-      <div key={widget.id} ref={setDraggableNodeRef} style={style}>
+      <div key={widget.id} ref={setDraggableNodeRef} style={style} data-view-id={widget.id}>
         {/* TODO CONTEXT: need to check this display logic for when someone wants a singular view (say, they pull projects out of the all view) */}
         {url && (widget.childWidgets.length === 0 && !['members', 'about'].includes(widget.type))
           ? (
@@ -439,7 +635,12 @@ function ListItemRenderer ({ item, rootPath, groupSlug, canDnd, isOverlay = fals
       <DropZone hide={hideDropZone || invalidChild || !canDnd} droppableParams={{ id: `${item.id}`, data: { widget: item } }}>
         &nbsp;
       </DropZone>
-      <li ref={setItemDraggableNodeRef} style={itemStyle} className='flex justify items-center content-center animate-slide-up invisible'>
+      <li 
+        ref={setItemDraggableNodeRef} 
+        style={itemStyle} 
+        className='flex justify items-center content-center animate-slide-up invisible'
+        data-view-id={item.id}
+      >
         {(() => {
           if (item.type === 'chat') {
             return (

From b8b172d8137974b4a63d1c14d5a75b7112770adc Mon Sep 17 00:00:00 2001
From: Aaron <aaronb@gmail.com>
Date: Tue, 4 Mar 2025 17:55:51 -0800
Subject: [PATCH 8/9] Fixed a bunch of errors!

---
 apps/web/src/routes/AllView/AllView.jsx       |  8 +--
 .../components/ContextMenu/ContextMenu.jsx    | 57 +++++++++----------
 2 files changed, 32 insertions(+), 33 deletions(-)

diff --git a/apps/web/src/routes/AllView/AllView.jsx b/apps/web/src/routes/AllView/AllView.jsx
index 42c38dc8d..7899169da 100644
--- a/apps/web/src/routes/AllView/AllView.jsx
+++ b/apps/web/src/routes/AllView/AllView.jsx
@@ -149,7 +149,7 @@ export default function AllViews () {
         </div>
       )
       return (
-        <div key={widget.id} onClick={() => url ? navigate(url) : null} className={`p-4 border border-background rounded-md shadow-sm ${url ? 'cursor-pointer' : ''}`}>
+        <div key={widget.id} onClick={() => url ? navigate(url) : null} className={`cursor-pointer relative flex flex-col transition-all bg-card/40 border-2 border-card/30 shadow-md hover:shadow-lg mb-4 hover:z-50 hover:scale-105 duration-400 rounded-lg h-full ${url ? 'cursor-pointer' : ''}`}>
           <div className='block text-center text-foreground'>
             {cardContent}
           </div>
@@ -170,12 +170,12 @@ export default function AllViews () {
 
   return (
     <div className='grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 p-4'>
-      <div onClick={() => navigate(addQuerystringToPath(location.pathname, { addview: 'yes', cme: 'yes' }))} className='p-4 border border-gray-300 rounded-md shadow-sm cursor-pointer'>
+      <div onClick={() => navigate(addQuerystringToPath(location.pathname, { addview: 'yes', cme: 'yes' }))} className='border-2 flex items-center justify-center border-t-foreground/30 border-x-foreground/20 border-b-foreground/10 p-4 background-black/10 rounded-lg border-dashed relative'>
         <div className='block text-center'>
           <div>
-            <h3 className='text-lg font-semibold  text-foreground'>{t('Add View')}</h3>
+            <h3 className='text-lg font-semibold  text-foreground m-0'>{t('Add View')}</h3>
             <span className='text-sm text-gray-600 block'>
-              <Icon name='Plus' style={{ fontSize: 30 }} />
+              <Icon name='Plus' style={{ fontSize: 30 }} className='text-foreground' />
             </span>
           </div>
         </div>
diff --git a/apps/web/src/routes/AuthLayoutRouter/components/ContextMenu/ContextMenu.jsx b/apps/web/src/routes/AuthLayoutRouter/components/ContextMenu/ContextMenu.jsx
index 3f5059bf4..b48dbc684 100644
--- a/apps/web/src/routes/AuthLayoutRouter/components/ContextMenu/ContextMenu.jsx
+++ b/apps/web/src/routes/AuthLayoutRouter/components/ContextMenu/ContextMenu.jsx
@@ -52,6 +52,7 @@ export default function ContextMenu (props) {
   const currentUser = useSelector(getMe)
   const { t } = useTranslation()
   const [searchParams] = useSearchParams()
+  const navigate = useNavigate()
 
   const group = useSelector(state => currentGroup || getGroupForSlug(state, routeParams.groupSlug))
   const canAdminister = useSelector(state => hasResponsibilityForGroup(state, { responsibility: RESP_ADMINISTRATION, groupId: group?.id }))
@@ -96,17 +97,15 @@ export default function ContextMenu (props) {
 
   // Enhanced detection using multiple methods
   const [newViewId, setNewViewId] = useState(null)
-  const newViewRef = useRef()
-  const wasRecentlyAddingView = useRef(false)
-  
+
   // Check URL param and localStorage for widget ID
   useEffect(() => {
     const newWidgetIdFromUrl = searchParams.get('newWidgetId')
-    
+
     if (newWidgetIdFromUrl) {
       console.log('Found new widget ID in URL:', newWidgetIdFromUrl)
       setNewViewId(newWidgetIdFromUrl)
-      
+
       // Remove from URL once detected
       const newParams = new URLSearchParams(searchParams)
       newParams.delete('newWidgetId')
@@ -115,7 +114,7 @@ export default function ContextMenu (props) {
       // Check localStorage as backup
       const storedWidgetId = localStorage.getItem('hylo:last-created-widget')
       const timestamp = parseInt(localStorage.getItem('hylo:last-created-timestamp') || '0')
-      
+
       // Only use stored ID if it's recent (within last 5 seconds)
       if (storedWidgetId && Date.now() - timestamp < 5000) {
         console.log('Found new widget ID in localStorage:', storedWidgetId)
@@ -124,8 +123,8 @@ export default function ContextMenu (props) {
         localStorage.removeItem('hylo:last-created-timestamp')
       }
     }
-  }, [searchParams, location])
-  
+  }, [searchParams, location, navigate])
+
   // Listen for custom events
   useEffect(() => {
     const handleNewWidgetEvent = (event) => {
@@ -134,7 +133,7 @@ export default function ContextMenu (props) {
         setNewViewId(event.detail.widgetId)
       }
     }
-    
+
     window.addEventListener('hylo:new-widget-added', handleNewWidgetEvent)
     return () => {
       window.removeEventListener('hylo:new-widget-added', handleNewWidgetEvent)
@@ -166,7 +165,7 @@ export default function ContextMenu (props) {
 
   /**
    * Effect to handle scrolling to and highlighting newly added widgets or views
-   * 
+   *
    * Waits for new elements to appear in the DOM, then scrolls precisely to their position
    * while applying visual animations (faster bounce + border flash) for feedback.
    */
@@ -174,51 +173,51 @@ export default function ContextMenu (props) {
     // Target element could be either a new top-level widget or a new child view
     const elementId = newWidget ? newWidget.id : newViewId
     if (!elementId) return
-    
+
     // Initial delay to let React finish rendering
     const initialTimer = setTimeout(() => {
       // Function to find, reveal, and scroll to the target element
       const findAndScrollToElement = (retryCount = 0) => {
         // Try multiple selectors to find the element
-        const targetElement = 
-          newWidget ? newWidgetRef.current : null ||
-          document.querySelector(`[data-view-id="${elementId}"]`) ||
-          document.getElementById(`widget-${elementId}`) ||
-          document.querySelector(`[data-widget-id="${elementId}"]`)
-        
+        const targetElement = newWidget
+          ? newWidgetRef.current
+          : document.querySelector(`[data-view-id="${elementId}"]`) ||
+            document.getElementById(`widget-${elementId}`) ||
+            document.querySelector(`[data-widget-id="${elementId}"]`)
+
         if (!targetElement && retryCount < 5) {
           console.log('Element not found yet, retrying...', elementId)
           // Retry after a short delay if element not found
           setTimeout(() => findAndScrollToElement(retryCount + 1), 100 * (retryCount + 1))
           return
         }
-        
+
         if (!targetElement) {
           console.log('Failed to find element after multiple attempts:', elementId)
           return
         }
-        
+
         console.log('Found element for scrolling:', elementId)
-        
+
         // First make the element visible
         targetElement.classList.remove('animate-slide-up')
         targetElement.classList.remove('invisible')
-        
+
         // Short delay to let visibility change take effect
         setTimeout(() => {
           // Get the scrollable container
           const scrollContainer = document.querySelector('.ContextMenu')
           if (!scrollContainer) return
-          
+
           // Calculate element's position relative to the scroll container
           const containerRect = scrollContainer.getBoundingClientRect()
           const elementRect = targetElement.getBoundingClientRect()
-          
+
           // Determine if element is currently visible in the viewport
-          const isFullyVisible = 
-            elementRect.top >= containerRect.top && 
+          const isFullyVisible =
+            elementRect.top >= containerRect.top &&
             elementRect.bottom <= containerRect.bottom
-          
+
           if (!isFullyVisible) {
             // Calculate the scroll position to center the element
             const scrollTop = scrollContainer.scrollTop
@@ -635,9 +634,9 @@ function ListItemRenderer ({ item, rootPath, groupSlug, canDnd, isOverlay = fals
       <DropZone hide={hideDropZone || invalidChild || !canDnd} droppableParams={{ id: `${item.id}`, data: { widget: item } }}>
         &nbsp;
       </DropZone>
-      <li 
-        ref={setItemDraggableNodeRef} 
-        style={itemStyle} 
+      <li
+        ref={setItemDraggableNodeRef}
+        style={itemStyle}
         className='flex justify items-center content-center animate-slide-up invisible'
         data-view-id={item.id}
       >

From 544fb095f851b98e0411003bac1beff27c03dd65 Mon Sep 17 00:00:00 2001
From: Aaron <aaronb@gmail.com>
Date: Tue, 4 Mar 2025 18:11:00 -0800
Subject: [PATCH 9/9] Scroll to current item

---
 .../ContextMenu/MenuLink/MenuLink.jsx         | 34 +++++++++++++++++--
 1 file changed, 31 insertions(+), 3 deletions(-)

diff --git a/apps/web/src/routes/AuthLayoutRouter/components/ContextMenu/MenuLink/MenuLink.jsx b/apps/web/src/routes/AuthLayoutRouter/components/ContextMenu/MenuLink/MenuLink.jsx
index 3a7686765..9d8c2400a 100644
--- a/apps/web/src/routes/AuthLayoutRouter/components/ContextMenu/MenuLink/MenuLink.jsx
+++ b/apps/web/src/routes/AuthLayoutRouter/components/ContextMenu/MenuLink/MenuLink.jsx
@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react'
+import React, { useCallback, useRef, useEffect } from 'react'
 import { useDispatch } from 'react-redux'
 import { Link, useLocation } from 'react-router-dom'
 import { toggleNavMenu } from 'routes/AuthLayoutRouter/AuthLayoutRouter.store'
@@ -8,6 +8,20 @@ export default function MenuLink ({ badgeCount = null, to, children, onClick, ex
   const dispatch = useDispatch()
   const location = useLocation()
   const isCurrentLocation = location.pathname === to
+  const linkRef = useRef(null)
+
+  // Scroll active link into view when component mounts or active route changes
+  useEffect(() => {
+    if (isCurrentLocation && linkRef.current) {
+      // Using a slight delay to ensure DOM is fully rendered
+      setTimeout(() => {
+        linkRef.current.scrollIntoView({
+          behavior: 'smooth',
+          block: 'center'
+        })
+      }, 150)
+    }
+  }, [isCurrentLocation])
 
   const handleClick = useCallback(() => {
     if (onClick) {
@@ -22,14 +36,28 @@ export default function MenuLink ({ badgeCount = null, to, children, onClick, ex
       : `https://${externalLink}`
 
     return (
-      <a href={url} target='_blank' rel='noreferrer' onClick={onClick} className={cn('MenuLink text-foreground text-sm', className, { 'opacity-100 border-selected': isCurrentLocation })}>
+      <a
+        href={url}
+        target='_blank'
+        rel='noreferrer'
+        onClick={onClick}
+        ref={isCurrentLocation ? linkRef : null}
+        className={cn('MenuLink text-foreground text-sm', className,
+          { 'opacity-100 border-selected bg-background': isCurrentLocation })}
+      >
         {children}
       </a>
     )
   }
 
   return (
-    <Link to={to} onClick={handleClick} className={cn('text-foreground text-sm focus:text-foreground relative', className, { 'opacity-100 border-selected': isCurrentLocation })}>
+    <Link
+      to={to}
+      onClick={handleClick}
+      ref={isCurrentLocation ? linkRef : null}
+      className={cn('text-foreground text-sm focus:text-foreground relative', className,
+        { 'opacity-100 border-selected bg-background': isCurrentLocation })}
+    >
       {children}
       {badgeCount && badgeCount > 0
         ? (