classicy 0.5.2 → 0.5.4

package/src/SystemFolder/SystemResources/Checkbox/ClassicyCheckbox.tsx

@@ -2,8 +2,9 @@ import './ClassicyCheckbox.scss'
 import {ClassicyControlLabel} from '@/SystemFolder/SystemResources/ControlLabel/ClassicyControlLabel'
 import classNames from 'classnames'
 import React, {useState} from 'react'
+import {useAnalytics} from "use-analytics";
 
-type ClassicyCheckboxProps = {
+export type ClassicyCheckboxProps = {
     id: string
     checked?: boolean
     mixed?: boolean
@@ -23,11 +24,14 @@ export const ClassicyCheckbox: React.FC<ClassicyCheckboxProps> = ({
                                                                       label,
                                                                   }) => {
     const [check, setCheck] = useState<boolean>(checked || false)
+    const {track} = useAnalytics()
+    const analyticsArgs = {type: "ClassicyCheckbox", label}
 
     const handleOnClick = () => {
         if (onClickFunc) {
             onClickFunc(!check)
         }
+        track('click', {checked: !check, ...analyticsArgs})
         if (!disabled) {
             setCheck(!check)
         }

package/src/SystemFolder/SystemResources/ControlGroup/ClassicyControlGroup.tsx

@@ -8,7 +8,8 @@ type ClassicyControlGroupProps = {
     children: React.ReactNode
 }
 
-export const ClassicyControlGroup: React.FC<ClassicyControlGroupProps> = ({ label = '', columns = false, children }) => {
+export const ClassicyControlGroup: React.FC<ClassicyControlGroupProps> = (
+    { label = '', columns = false, children }) => {
     return (
         <fieldset
             className={classNames(

package/src/SystemFolder/SystemResources/DatePicker/ClassicyDatePicker.tsx

@@ -1,4 +1,4 @@
-import {useDesktop} from '@/SystemFolder/ControlPanels/AppManager/ClassicyAppManagerContext'
+import {useAppManager} from '@/SystemFolder/ControlPanels/AppManager/ClassicyAppManagerContext'
 import {ClassicyControlLabel} from '@/SystemFolder/SystemResources/ControlLabel/ClassicyControlLabel'
 import './ClassicyDatePicker.scss'
 import {validateDayOfMonth, validateMonth,} from '@/SystemFolder/SystemResources/DatePicker/ClassicyDatePickerUtils'
@@ -20,9 +20,9 @@ export const ClassicyDatePicker: React.FC<ClassicyDatePickerProps> = React.forwa
     HTMLInputElement,
     ClassicyDatePickerProps
 >(function ClassicyDatePicker(
-    {id, inputType, labelTitle, placeholder, prefillValue, disabled = false, isDefault, onChangeFunc}, ref
+    {id, inputType, labelTitle, disabled = false, isDefault, onChangeFunc}
 ) {
-    const desktop = useDesktop()
+    const desktop = useAppManager()
 
     const yearRef = useRef<HTMLInputElement>(null)
     const monthRef = useRef<HTMLInputElement>(null)

package/src/SystemFolder/SystemResources/Desktop/ClassicyDesktop.tsx

@@ -1,5 +1,5 @@
 import {getAllThemes, getThemeVars} from '@/SystemFolder/ControlPanels/AppearanceManager/ClassicyAppearance'
-import {useDesktop, useDesktopDispatch} from '@/SystemFolder/ControlPanels/AppManager/ClassicyAppManagerContext'
+import {useAppManager, useAppManagerDispatch} from '@/SystemFolder/ControlPanels/AppManager/ClassicyAppManagerContext'
 import {ClassicyControlPanels} from '@/SystemFolder/ControlPanels/ClassicyControlPanels'
 import {Finder} from '@/SystemFolder/Finder/Finder'
 import {getClassicyAboutWindow} from '@/SystemFolder/SystemResources/AboutWindow/ClassicyAboutWindow'
@@ -28,8 +28,8 @@ export const ClassicyDesktop: React.FC<ClassicyDesktopProps> = ({children}) => {
 
     const clickOffset = [10, 10]
 
-    const desktopState = useDesktop()
-    const desktopEventDispatch = useDesktopDispatch()
+    const desktopState = useAppManager()
+    const desktopEventDispatch = useAppManagerDispatch()
 
     if (desktopState.System.Manager.Appearance.availableThemes &&
         desktopState.System.Manager.Appearance.availableThemes.length <= 0) {

package/src/SystemFolder/SystemResources/Desktop/ClassicyDesktopIcon.tsx

@@ -1,4 +1,5 @@
-import { useDesktop, useDesktopDispatch } from '@/SystemFolder/ControlPanels/AppManager/ClassicyAppManagerContext'
+import { useAppManager, useAppManagerDispatch } from '@/SystemFolder/ControlPanels/AppManager/ClassicyAppManagerContext'
+import {  useAnalytics } from 'use-analytics'
 
 import './ClassicyDesktopIcon.scss'
 import classNames from 'classnames'
@@ -28,15 +29,18 @@ export const ClassicyDesktopIcon: React.FC<ClassicyDesktopIconProps> = ({
     const [clickPosition, setClickPosition] = useState<[number, number]>([0, 0])
     const [dragging, setDragging] = useState<boolean>(false)
 
-    const desktopContext = useDesktop()
-    const desktopEventDispatch = useDesktopDispatch()
+    const desktopContext = useAppManager()
+    const desktopEventDispatch = useAppManagerDispatch()
 
     const iconRef = useRef<HTMLDivElement>(null)
 
     const id = appId + '.shortcut'
+    const { track } = useAnalytics()
+    const analyticsArgs = {appId, appName, icon, label, kind}
 
     const clickFocus = (e: React.MouseEvent<HTMLDivElement>) => {
         e.stopPropagation()
+        track('focus', { type: "ClassicyDesktopIcon", ...analyticsArgs })
         desktopEventDispatch({
             type: 'ClassicyDesktopIconFocus',
             iconId: appId,
@@ -72,6 +76,7 @@ export const ClassicyDesktopIcon: React.FC<ClassicyDesktopIconProps> = ({
                 ...eventData,
             })
         }
+        track('open', { type: "ClassicyDesktopIcon", ...analyticsArgs })
         desktopEventDispatch({
             type: 'ClassicyDesktopIconOpen',
             iconId: id,
@@ -113,6 +118,7 @@ export const ClassicyDesktopIcon: React.FC<ClassicyDesktopIconProps> = ({
     }
 
     const stopChangeIcon = () => {
+        track('halt', { type: "ClassicyDesktopIcon", ...analyticsArgs })
         setDragging(false)
         setClickPosition([0, 0])
     }
@@ -122,6 +128,8 @@ export const ClassicyDesktopIcon: React.FC<ClassicyDesktopIconProps> = ({
             return
         }
 
+        track('move', { type: "ClassicyDesktopIcon", ...analyticsArgs })
+
         setClickPosition([
             e.clientX - iconRef.current.getBoundingClientRect().left,
             e.clientY - iconRef.current.getBoundingClientRect().top,

package/src/SystemFolder/SystemResources/Desktop/MenuBar/ClassicyDesktopMenuBar.tsx

@@ -1,5 +1,5 @@
 import appleMenuIcon from 'img/icons/system/apple.png'
-import {useDesktop, useDesktopDispatch} from '@/SystemFolder/ControlPanels/AppManager/ClassicyAppManagerContext'
+import {useAppManager, useAppManagerDispatch} from '@/SystemFolder/ControlPanels/AppManager/ClassicyAppManagerContext'
 import './ClassicyDesktopMenuBar.scss'
 import {
     ClassicyDesktopMenuWidgetSound
@@ -12,8 +12,8 @@ import '@/SystemFolder/SystemResources/Menu/ClassicyMenu.scss'
 import React from 'react'
 
 export const ClassicyDesktopMenuBar: React.FC = () => {
-    const desktopContext = useDesktop()
-    const desktopEventDispatch = useDesktopDispatch()
+    const desktopContext = useAppManager()
+    const desktopEventDispatch = useAppManagerDispatch()
 
     const systemMenuItem: ClassicyMenuItem = {
         id: 'apple-menu',

package/src/SystemFolder/SystemResources/Desktop/MenuBar/Widgets/Sound/ClassicyDesktopMenuWidgetSound.tsx

@@ -1,6 +1,6 @@
 import './ClassicyDesktopMenuWidgetSound.scss'
 import '@/SystemFolder/SystemResources/Menu/ClassicyMenu.scss'
-import {useDesktopDispatch} from '@/SystemFolder/ControlPanels/AppManager/ClassicyAppManagerContext'
+import {useAppManagerDispatch} from '@/SystemFolder/ControlPanels/AppManager/ClassicyAppManagerContext'
 import {useSound, useSoundDispatch} from '@/SystemFolder/ControlPanels/SoundManager/ClassicySoundManagerContext'
 import classNames from 'classnames'
 import React from 'react'
@@ -15,7 +15,7 @@ type ClassicyDesktopMenuWidgetSoundProps = {
 export const ClassicyDesktopMenuWidgetSound: React.FC<ClassicyDesktopMenuWidgetSoundProps> = ({hide = false}) => {
     const player = useSoundDispatch()
     const playerState = useSound()
-    const desktopEventDispatch = useDesktopDispatch()
+    const desktopEventDispatch = useAppManagerDispatch()
 
     const openSoundManager = (e: React.MouseEvent) => {
         e.preventDefault()

package/src/SystemFolder/SystemResources/Desktop/MenuBar/Widgets/Time/ClassicyDesktopMenuWidgetTime.tsx

@@ -1,13 +1,13 @@
 import './ClassicyDesktopMenuWidgetTime.scss'
 import '@/SystemFolder/SystemResources/Menu/ClassicyMenu.scss'
-import {useDesktop, useDesktopDispatch} from '@/SystemFolder/ControlPanels/AppManager/ClassicyAppManagerContext'
+import {useAppManager, useAppManagerDispatch} from '@/SystemFolder/ControlPanels/AppManager/ClassicyAppManagerContext'
 import classNames from 'classnames'
 import appIcon from 'img/icons/control-panels/date-time-manager/date-time-manager.png'
 import React, {useEffect, useState} from 'react'
 
 export const ClassicyDesktopMenuWidgetTime: React.FC = ({}) => {
-    const desktopContext = useDesktop()
-    const desktopEventDispatch = useDesktopDispatch()
+    const desktopContext = useAppManager()
+    const desktopEventDispatch = useAppManagerDispatch()
 
     const {show, militaryTime, displaySeconds, displayPeriod, displayDay, displayLongDay, flashSeparators} =
         desktopContext.System.Manager.DateAndTime
@@ -109,7 +109,10 @@ export const ClassicyDesktopMenuWidgetTime: React.FC = ({}) => {
                             {displayLongDay ? daysOfWeek[time.day] : daysOfWeek[time.day].slice(0, 3)}
                         </span>
                             )}
-                            <span> {militaryTime ? convertToTwoDigit(time.hours) : convertTo12HourPeriod(time.hours)}</span>
+                            <span>
+                                {" "}
+                                {militaryTime ? convertToTwoDigit(time.hours) : convertTo12HourPeriod(time.hours)}
+                            </span>
                             <span>
                         <span className={displaySeconds ? '' : toBlink()}>:</span>
                                 {convertToTwoDigit(time.minutes)}

package/src/SystemFolder/SystemResources/Disclosure/ClassicyDisclosure.tsx

@@ -2,6 +2,7 @@ import {ClassicyControlLabel} from '@/SystemFolder/SystemResources/ControlLabel/
 import './ClassicyDisclosure.scss'
 import classNames from 'classnames'
 import React, { useState } from 'react'
+import {useAnalytics} from 'use-analytics'
 
 type ClassicyDisclosureTriangleDirections = 'up' | 'right' | 'down' | 'left'
 
@@ -11,8 +12,13 @@ type ClassicyDisclosureProps = {
     children?: any
 }
 
-export const ClassicyDisclosure: React.FC<ClassicyDisclosureProps> = ({ direction = 'right', label = '', children }) => {
+export const ClassicyDisclosure: React.FC<ClassicyDisclosureProps> = (
+    { direction = 'right', label = '', children }
+) => {
     const [open, setOpen] = useState(false)
+    const {track} = useAnalytics()
+    const analyticsArgs = {type: "ClassicyLabel", label}
+
     const triangleClassOpenName =
         'classicyDisclosureTriangle' +
         direction.charAt(0).toUpperCase() +
@@ -23,6 +29,7 @@ export const ClassicyDisclosure: React.FC<ClassicyDisclosureProps> = ({ directio
         switch (e.key) {
             case 'Enter':
             case ' ': {
+                track('click', {expanded: !open, ...analyticsArgs})
                 setOpen(!open)
             }
         }
@@ -33,6 +40,7 @@ export const ClassicyDisclosure: React.FC<ClassicyDisclosureProps> = ({ directio
             <div
                 className={"classicyDisclosureHeader"}
                 onClick={() => {
+                    track('click', {expanded: !open, ...analyticsArgs})
                     setOpen(!open)
                 }}
                 tabIndex={0}

package/src/SystemFolder/SystemResources/File/ClassicyFileBrowserViewIcons.tsx

@@ -1,11 +1,11 @@
-import {useDesktop, useDesktopDispatch} from '@/SystemFolder/ControlPanels/AppManager/ClassicyAppManagerContext'
+import {useAppManager} from '@/SystemFolder/ControlPanels/AppManager/ClassicyAppManagerContext'
 import {cleanupIcon, iconImageByType} from '@/SystemFolder/SystemResources/File/ClassicyFileBrowserUtils'
 import {ClassicyFileSystem} from '@/SystemFolder/SystemResources/File/ClassicyFileSystem'
-import {ClassicyIcon} from '@/SystemFolder/SystemResources/Icon/ClassicyIcon'
 import {ClassicyFileSystemEntryMetadata} from "@/SystemFolder/SystemResources/File/ClassicyFileSystemModel";
+import {ClassicyIcon} from '@/SystemFolder/SystemResources/Icon/ClassicyIcon'
 import React, {RefObject, useEffect, useState} from 'react'
 
-type ClassicyFileBrowserViewIconsProps = {
+export type ClassicyFileBrowserViewIconsProps = {
     fs: ClassicyFileSystem
     path: string
     appId: string
@@ -25,32 +25,25 @@ type iconType = {
     initialPosition: any
 }
 
-export const ClassicyFileBrowserViewIcons: React.FC<ClassicyFileBrowserViewIconsProps> = ({
-                                                                                       fs,
-                                                                                       path,
-                                                                                       appId,
-                                                                                       dirOnClickFunc = () => {
-                                                                                       },
-                                                                                       fileOnClickFunc = () => {
-                                                                                       },
-                                                                                       holderRef,
-                                                                                   }) => {
-    const desktopContext = useDesktop(),
-        desktopEventDispatch = useDesktopDispatch()
+export const ClassicyFileBrowserViewIcons: React.FC<ClassicyFileBrowserViewIconsProps> = (
+    {fs, path, appId, dirOnClickFunc, fileOnClickFunc, holderRef}) => {
+    const desktopContext = useAppManager()
 
     const [items, setItems] = useState<iconType[]>([])
 
     const openFileOrFolder = (properties: ClassicyFileSystemEntryMetadata, path: string, filename: string) => {
         switch (properties['_type']) {
             case 'directory': {
-                return dirOnClickFunc(path + ':' + filename)
+                if (dirOnClickFunc) {
+                    return dirOnClickFunc(path + ':' + filename)
+                }
+                break
             }
             case 'file': {
-                return fileOnClickFunc(path + ':' + filename)
-            }
-            default: {
-                return () => {
+                if (fileOnClickFunc) {
+                    return fileOnClickFunc(path + ':' + filename)
                 }
+                break
             }
         }
     }

package/src/SystemFolder/SystemResources/File/ClassicyFileBrowserViewTable.tsx

@@ -4,7 +4,6 @@ import {ClassicyFileSystem} from '@/SystemFolder/SystemResources/File/ClassicyFi
 import {ClassicyFileSystemEntryMetadata} from '@/SystemFolder/SystemResources/File/ClassicyFileSystemModel'
 import {createColumnHelper, flexRender, getCoreRowModel, getSortedRowModel, useReactTable,} from '@tanstack/react-table'
 import classNames from 'classnames'
-import {json} from "node:stream/consumers";
 import React, {RefObject, useMemo, useState} from 'react'
 import arrowUpIcon from 'img/ui/menu-dropdown-arrow-up.svg'
 
@@ -53,7 +52,9 @@ export const ClassicyFileBrowserViewTable: React.FC<ClassicyFileBrowserViewTable
     }
 
     const fileList = useMemo<ClassicyFileSystemEntryMetadata[]>(() => {
-        const a: [string, ClassicyFileSystemEntryMetadata][] = Object.entries(fs.filterByType(path, ['file', 'directory']))
+        const a: [string, ClassicyFileSystemEntryMetadata][] = Object.entries(
+            fs.filterByType(path, ['file', 'directory'])
+        )
         const directoryListing = a.map(([d, e]) => {
             let g = e
             g['_name'] = d
@@ -61,9 +62,11 @@ export const ClassicyFileBrowserViewTable: React.FC<ClassicyFileBrowserViewTable
             return g
         })
 
-        return Object.entries(directoryListing).map((entry, index) => {
+        return Object.entries(directoryListing).map((entry) => {
             let filteredValues = {} as Record<string, any>
-            const filteredKeyArray: [string, string][] = Object.entries(entry[1]).filter((key) => key[0].startsWith('_'))
+            const filteredKeyArray: [string, string][] = Object.entries(
+                entry[1]).filter((key) => key[0].startsWith('_')
+            )
             for (const [key, value] of filteredKeyArray) {
                 filteredValues[key] = value
             }
@@ -149,7 +152,7 @@ export const ClassicyFileBrowserViewTable: React.FC<ClassicyFileBrowserViewTable
                                 style={{
                                     width: header.id === '_icon' ? iconSize : 'auto',
                                 }}
-                                onClick={(e) => {
+                                onClick={() => {
                                     if (
                                         header.column.getIsSorted() == false ||
                                         header.column.getIsSorted() == 'desc'
@@ -165,10 +168,12 @@ export const ClassicyFileBrowserViewTable: React.FC<ClassicyFileBrowserViewTable
                                 {header.id == sorting[0].id && (
                                     <img
                                         src={`${arrowUpIcon}`}
-                                        height={'50%'}
+                                        alt={'Up Arrow'}
                                         style={{
                                             margin: '0 var(--window-padding-size)',
-                                            transform: `rotate(${sorting[0].desc === true ? '0deg' : '180deg'})`,
+                                            transform: `rotate(${sorting[0].desc ? '0deg' : '180deg'})`,
+                                            height: "calc(var(--ui-font-size) * 0.5)"
+
                                         }}
                                     />
                                 )}

package/src/SystemFolder/SystemResources/Icon/ClassicyIcon.tsx

@@ -1,6 +1,7 @@
 import './ClassicyIcon.scss'
 import classNames from 'classnames'
 import React, {useRef, useState} from 'react'
+import {  useAnalytics } from 'use-analytics'
 
 interface ClassicyIconProps {
     appId: string
@@ -31,14 +32,21 @@ export const ClassicyIcon: React.FC<ClassicyIconProps> = ({
 
     const id = appId + '.shortcut'
 
+    const { track } = useAnalytics()
+    const analyticsArgs = {type: "ClassicyIcon", appId,  name,  icon,  label}
+
+
     const toggleFocus = () => {
+        track('focus', analyticsArgs)
         setActive(!active)
     }
     const setFocus = (active: boolean) => {
+        track('focus', analyticsArgs)
         setActive(active)
     }
 
     const clearFocus = () => {
+        track('blur', analyticsArgs)
         setActive(false)
     }
 

package/src/SystemFolder/SystemResources/Input/ClassicyInput.tsx

@@ -1,12 +1,13 @@
 import {ClassicyControlLabel} from '@/SystemFolder/SystemResources/ControlLabel/ClassicyControlLabel'
 import './ClassicyInput.scss'
 import classNames from 'classnames'
-import React from 'react'
+import React, {ChangeEventHandler} from 'react'
+import {useAnalytics} from 'use-analytics'
 
 interface ClassicyInputProps {
     id: string
     inputType?: 'text'
-    onChangeFunc?: any
+    onChangeFunc?: ChangeEventHandler<HTMLInputElement>
     labelTitle?: string
     placeholder?: string
     prefillValue?: string
@@ -20,6 +21,14 @@ export const ClassicyInput: React.FC<ClassicyInputProps> = React.forwardRef<HTML
         {id, inputType = 'text', labelTitle, placeholder, prefillValue, disabled = false, isDefault, onChangeFunc},
         ref
     ) {
+        const {track} = useAnalytics()
+        const analyticsArgs = {id, inputType, labelTitle, placeholder, prefillValue, disabled, isDefault}
+
+        const handleOnChangeFunc: ChangeEventHandler<HTMLInputElement> = (e) => {
+            track("selected", {...analyticsArgs, selected: e.target.value})
+            if (onChangeFunc) onChangeFunc(e)
+        }
+
         return (
             <div className={"classicyInputHolder"}>
                 {labelTitle && (
@@ -33,7 +42,7 @@ export const ClassicyInput: React.FC<ClassicyInputProps> = React.forwardRef<HTML
                 <input
                     id={id}
                     tabIndex={0}
-                    onChange={onChangeFunc}
+                    onChange={handleOnChangeFunc}
                     name={id}
                     type={inputType}
                     ref={ref}

package/src/SystemFolder/SystemResources/Menu/ClassicyMenu.tsx

@@ -1,8 +1,9 @@
 import '@/SystemFolder/SystemResources/Menu/ClassicyMenu.scss'
-import { useSoundDispatch } from '@/SystemFolder/ControlPanels/SoundManager/ClassicySoundManagerContext'
+import {useAppManagerDispatch} from '@/SystemFolder/ControlPanels/AppManager/ClassicyAppManagerContext'
+import {useSoundDispatch} from '@/SystemFolder/ControlPanels/SoundManager/ClassicySoundManagerContext'
 import classNames from 'classnames'
 import React from 'react'
-import { useDesktopDispatch } from '@/SystemFolder/ControlPanels/AppManager/ClassicyAppManagerContext'
+import {useAnalytics} from 'use-analytics'
 
 export interface ClassicyMenuItem {
     id: string
@@ -27,13 +28,13 @@ interface ClassicyMenuProps {
     children?: any
 }
 
-export const ClassicyMenu: React.FC<ClassicyMenuProps> = ({ name, menuItems, navClass, subNavClass, children }) => {
+export const ClassicyMenu: React.FC<ClassicyMenuProps> = ({name, menuItems, navClass, subNavClass, children}) => {
     if (menuItems && menuItems.length > 0) {
         return (
             <div className={"classicyMenuWrapper"}>
                 <ul className={classNames(navClass)} key={name + '_menu'}>
                     {menuItems.map((item: ClassicyMenuItem) => (
-                        <ClassicyMenuItem key={item?.id} menuItem={item} subNavClass={subNavClass || ""} />
+                        <ClassicyMenuItem key={item?.id} menuItem={item} subNavClass={subNavClass || ""}/>
                     ))}
                     {children}
                 </ul>
@@ -43,77 +44,84 @@ export const ClassicyMenu: React.FC<ClassicyMenuProps> = ({ name, menuItems, nav
     return
 }
 
-export const ClassicyMenuItem: React.FC<{ menuItem: ClassicyMenuItem; subNavClass: string }> = ({ menuItem, subNavClass }) => {
+export const ClassicyMenuItem: React.FC<{ menuItem: ClassicyMenuItem; subNavClass: string }> = ({
+                                                                                                    menuItem,
+                                                                                                    subNavClass
+                                                                                                }) => {
     const player = useSoundDispatch()
-    const desktopDispatch = useDesktopDispatch()
-    if (menuItem) {
-        let newMenuItem = <></>
-        if (menuItem.id === 'spacer') {
-            return <hr/>
-        } else {
-            newMenuItem = (
-                <>
-                    <p>
-                        {menuItem.image !== undefined &&
-                            (newMenuItem = <img src={menuItem.image} alt={menuItem.title} />)}
-                        {!!menuItem.icon && <img src={menuItem.icon} alt={menuItem.title} />}
-                        {menuItem.title}
-                    </p>
-                    {menuItem.keyboardShortcut && (
-                        <p
-                            className={"classicyMenuItemKeyboardShortcut"}
-                            dangerouslySetInnerHTML={{ __html: menuItem.keyboardShortcut }}
-                        ></p>
-                    )}
-                </>
-            )
-        }
+    const desktopDispatch = useAppManagerDispatch()
 
-        const menuItemEventHandler = (menuItem: ClassicyMenuItem) => {
-            desktopDispatch({
-                type: menuItem.event,
-                ...menuItem.eventData,
-            })
-        }
+    const {track} = useAnalytics()
+    const analyticsArgs = {
+        id: menuItem.id,
+        title: menuItem.title,
+        image: menuItem.image,
+        disabled: menuItem.disabled,
+        icon: menuItem.icon,
+        link: menuItem.link,
+        event: menuItem.event,
+        eventData: menuItem.eventData,
+        childrenCount: menuItem.menuChildren?.length,
+    }
 
-        return (
-            <li
-                id={menuItem.id}
-                key={menuItem.id}
-                onClick={() => {
-                    if (menuItem.onClickFunc) {
-                        menuItem.onClickFunc()
-                    } else if (menuItem.event && menuItem.eventData) {
-                        menuItemEventHandler(menuItem)
-                    }
-                }}
-                onMouseOver={() => {
-                    player({ type: 'ClassicySoundPlay', sound: 'ClassicyMenuItemHover' })
-                }}
-                onMouseOut={() => {
-                    player({ type: 'ClassicySoundPlay', sound: 'ClassicyMenuItemClick' })
-                }}
-                className={classNames(
-                    "classicyMenuItem",
-                    !!menuItem.icon ? '' : "classicyMenuItemNoImage",
-                    menuItem.className,
-                    menuItem.disabled ? "classicyMenuItemDisabled" : '',
-                    menuItem.menuChildren && menuItem.menuChildren.length > 0
-                        ? "classicyMenuItemChildMenuIndicator"
-                        : ''
-                )}
-            >
-                {newMenuItem}
-                {menuItem.menuChildren && menuItem.menuChildren.length > 0 && (
-                    <ClassicyMenu
-                        name={menuItem.id + '_subitem'}
-                        menuItems={menuItem.menuChildren}
-                        subNavClass={subNavClass}
-                        navClass={subNavClass}
-                    ></ClassicyMenu>
-                )}
-            </li>
-        )
+    const menuItemEventHandler = (menuItem: ClassicyMenuItem) => {
+        track("selected", {type: 'ClassicyMenuItem', ...analyticsArgs})
+        desktopDispatch({
+            type: menuItem.event,
+            ...menuItem.eventData,
+        })
     }
-    return
+
+    return menuItem && menuItem.id === 'spacer' ? (<hr></hr>) : (
+        <li
+            id={menuItem.id}
+            key={menuItem.id}
+            onClick={() => {
+                if (menuItem.onClickFunc) {
+                    menuItem.onClickFunc()
+                } else if (menuItem.event && menuItem.eventData) {
+                    menuItemEventHandler(menuItem)
+                }
+            }}
+            onMouseOver={() => {
+                track("hover", {type: 'ClassicyMenuItem', ...analyticsArgs})
+                player({type: 'ClassicySoundPlay', sound: 'ClassicyMenuItemHover'})
+            }}
+            onMouseOut={() => {
+                player({type: 'ClassicySoundPlay', sound: 'ClassicyMenuItemClick'})
+            }}
+            className={classNames(
+                "classicyMenuItem",
+                !!menuItem.icon ? '' : "classicyMenuItemNoImage",
+                menuItem.className,
+                menuItem.disabled ? "classicyMenuItemDisabled" : '',
+                menuItem.menuChildren && menuItem.menuChildren.length > 0
+                    ? "classicyMenuItemChildMenuIndicator"
+                    : ''
+            )}
+        >
+            <>
+                <p>
+                    {menuItem.image && <img src={menuItem.image} alt={menuItem.title}/>}
+                    {!menuItem.image && menuItem.icon && <img src={menuItem.icon} alt={menuItem.title}/>}
+                    {menuItem.title}
+                </p>
+                {menuItem.keyboardShortcut && (
+                    <p
+                        className={"classicyMenuItemKeyboardShortcut"}
+                        dangerouslySetInnerHTML={{__html: menuItem.keyboardShortcut}}
+                    ></p>
+                )}
+            </>
+
+            {menuItem.menuChildren && menuItem.menuChildren.length > 0 && (
+                <ClassicyMenu
+                    name={menuItem.id + '_subitem'}
+                    menuItems={menuItem.menuChildren}
+                    subNavClass={subNavClass}
+                    navClass={subNavClass}
+                ></ClassicyMenu>
+            )}
+        </li>
+    )
 }

package/src/SystemFolder/SystemResources/PopUpMenu/ClassicyPopUpMenu.tsx

@@ -2,6 +2,7 @@ import {ClassicyControlLabel} from '@/SystemFolder/SystemResources/ControlLabel/
 import './ClassicyPopUpMenu.scss'
 import classNames from 'classnames'
 import React, {ChangeEvent, useState} from 'react'
+import {useAnalytics} from 'use-analytics'
 
 type classicyPopUpMenuOptions = {
     value: string
@@ -28,9 +29,12 @@ export const ClassicyPopUpMenu: React.FC<classicyPopUpMenuProps> = ({
                                                                         onChangeFunc,
                                                                     }) => {
     const [selectedItem, setSelectedItem] = useState(selected)
+    const {track} = useAnalytics()
+    const analyticsArgs = {id,  label,  options, selected }
 
     const onChangeHandler = (e: ChangeEvent<HTMLSelectElement>) => {
         setSelectedItem(e.target.value)
+        track("selected", {type: 'ClassicyPopUpMenu', itemId: e.target.value, ...analyticsArgs})
         if (onChangeFunc) {
             onChangeFunc(e)
         }

package/src/SystemFolder/SystemResources/QuickTime/QuickTimeMovieEmbed.tsx

@@ -1,5 +1,5 @@
 import ccIcon from 'img/icons/system/quicktime/cc.png'
-import {useDesktop} from '@/SystemFolder/ControlPanels/AppManager/ClassicyAppManagerContext'
+import {useAppManager} from '@/SystemFolder/ControlPanels/AppManager/ClassicyAppManagerContext'
 import './QuickTimeMovieEmbed.scss'
 import {parse} from '@plussub/srt-vtt-parser'
 import {ParsedResult} from "@plussub/srt-vtt-parser/dist/types";
@@ -38,7 +38,7 @@ export const QuickTimeVideoEmbed: React.FC<QuickTimeVideoEmbed> = ({
                                                                        controlsDocked,
                                                                        muted,
                                                                    }) => {
-    const desktop = useDesktop()
+    const desktop = useAppManager()
 
     const [playing, setPlaying] = useState(autoPlay)
     const [volume, setVolume] = useState(0.5)