@@ -11,14 +11,29 @@ import classNames from 'classnames';
1111
1212export const HomeScreen : React . FC = ( ) => {
1313 const { apps } = useAppStore ( ) ;
14- const { homeScreenApps, dockApps, appPositions, widgetSettings, toggleWidget, moveItem, backgroundImage, setBackgroundImage, addToDock, removeFromDock } = usePersistenceStore ( ) ;
14+ const { homeScreenApps, dockApps, appPositions, widgetSettings, toggleWidget, moveItem, backgroundImage, setBackgroundImage, addToDock, removeFromDock, isInitialized , setIsInitialized , addToHomeScreen } = usePersistenceStore ( ) ;
1515 const { isEditMode, setEditMode } = useAppStore ( ) ;
1616 const { toggleAppDrawer } = useNavigationStore ( ) ;
1717 const [ draggedAppId , setDraggedAppId ] = React . useState < string | null > ( null ) ;
1818 const [ touchDragPosition , setTouchDragPosition ] = React . useState < { x : number ; y : number } | null > ( null ) ;
1919 const [ showBackgroundSettings , setShowBackgroundSettings ] = React . useState ( false ) ;
2020 const [ showWidgetSettings , setShowWidgetSettings ] = React . useState ( false ) ;
2121 const [ searchQuery , setSearchQuery ] = React . useState ( '' ) ;
22+
23+ console . log ( { appPositions } )
24+
25+ useEffect ( ( ) => {
26+ console . log ( 'isInitialized' , isInitialized ) ;
27+ if ( isInitialized ) return ;
28+ // add appstore, contacts, and settings to the homepage on initial load
29+ setIsInitialized ( true ) ;
30+ addToHomeScreen ( "main:app-store:sys" ) ;
31+ addToHomeScreen ( "contacts:contacts:sys" ) ;
32+ addToHomeScreen ( "settings:settings:sys" ) ;
33+ addToHomeScreen ( "homepage:homepage:sys" ) ; // actually the clock widget
34+ setBackgroundImage ( '/large-background-vector.svg' ) ;
35+ } , [ isInitialized ] ) ;
36+
2237 const handleImageUpload = ( e : React . ChangeEvent < HTMLInputElement > ) => {
2338 const file = e . target . files ?. [ 0 ] ;
2439 if ( file ) {
@@ -182,6 +197,16 @@ export const HomeScreen: React.FC = () => {
182197 return window . matchMedia ( '(prefers-color-scheme: dark)' ) . matches ;
183198 } , [ ] ) ;
184199
200+ const calculateAppIconPosition = ( index : number , totalApps : number ) => {
201+ const isMobile = window . innerWidth < 768 ; // Tailwind md breakpoint
202+ const spacing = isMobile ? 5 : 10 ;
203+ const screenPortion = window . innerWidth / totalApps
204+ // if no setting, row along the 0.75 height of the screen
205+ const y = 0.75 * window . innerHeight
206+ const x = index * ( screenPortion + spacing ) + screenPortion / 4
207+ return { x, y }
208+ }
209+
185210 return (
186211 < div
187212 className = "home-screen h-full w-full relative overflow-hidden"
@@ -193,6 +218,8 @@ export const HomeScreen: React.FC = () => {
193218 backgroundRepeat : 'no-repeat' ,
194219 touchAction : 'none'
195220 } }
221+ data-background-image = { backgroundImage }
222+ data-is-dark-mode = { isDarkMode }
196223 >
197224 { /* Background overlay for better text readability */ }
198225 { backgroundImage && (
@@ -235,26 +262,26 @@ export const HomeScreen: React.FC = () => {
235262 { /* Floating apps on canvas */ }
236263 { floatingApps
237264 . filter ( app => app . label . toLowerCase ( ) . includes ( searchQuery . toLowerCase ( ) ) )
238- . map ( app => {
239- const position = appPositions [ app . id ] || {
240- x : Math . min ( Math . random ( ) * ( window . innerWidth - 100 ) , window . innerWidth - 80 ) ,
241- y : Math . min ( window . innerHeight - 200 - Math . random ( ) * 100 , window . innerHeight - 80 )
242- } ;
265+ . map ( ( app , index , allApps ) => {
266+ const position = appPositions [ app . id ] || calculateAppIconPosition ( index , allApps . length ) ;
243267
244268 return (
245269 < Draggable
246270 key = { app . id }
247271 id = { app . id }
248272 position = { position }
249273 onMove = { ( pos ) => moveItem ( app . id , pos ) }
250- isEditMode = { isEditMode }
274+ isEditMode = { true }
251275 >
252276 < div
253277 onTouchStart = { handleTouchStart ( app . id ) }
254278 onTouchMove = { handleTouchMove }
255279 onTouchEnd = { handleTouchEnd }
256280 >
257- < AppIcon app = { app } isEditMode = { isEditMode } isFloating = { true } />
281+ < AppIcon
282+ app = { app }
283+ isEditMode = { isEditMode }
284+ isFloating = { true } />
258285 </ div >
259286 </ Draggable >
260287 ) ;
@@ -263,8 +290,8 @@ export const HomeScreen: React.FC = () => {
263290 { /* Widgets */ }
264291 { widgetApps
265292 . filter ( app => app . label . toLowerCase ( ) . includes ( searchQuery . toLowerCase ( ) ) )
266- . map ( app => (
267- < Widget key = { app . id } app = { app } />
293+ . map ( ( app , index ) => (
294+ < Widget key = { app . id } app = { app } index = { index } totalWidgets = { widgetApps . length } />
268295 ) ) }
269296
270297 { /* Dock at bottom */ }
@@ -362,10 +389,10 @@ export const HomeScreen: React.FC = () => {
362389 ) }
363390
364391 { /* Edit mode toggle and widget settings */ }
365- < div className = "absolute top-4 left-4 right-4 flex items-center gap-2" >
392+ < div className = "absolute top-2 right-2 flex items-center gap-2" >
366393
367394 { ! isEditMode && < >
368- < div className = "flex grow self-stretch items-center gap-2 bg-white dark:bg-black rounded-lg px-2" >
395+ < div className = "flex grow self-stretch items-center gap-2 bg-white dark:bg-black rounded-lg px-2 max-w-md " >
369396 < BsSearch className = "opacity-50" />
370397 < input
371398 type = "text"
@@ -492,12 +519,12 @@ export const HomeScreen: React.FC = () => {
492519 </ div >
493520
494521 { /* Desktop hint */ }
495- < div className = "hidden md:block absolute bottom-32 left-4 text-black/30 dark:text-white/30 text-xs bg-white/50 dark:bg-black/50 backdrop-blur rounded-lg px-3 py-2" >
522+ < div className = "hidden md:block absolute bottom-32 left-1/2 -translate-x-1/2 text-black/30 dark:text-white/30 text-xs bg-white/50 dark:bg-black/50 backdrop-blur rounded-lg px-3 py-2" >
496523 < div className = "flex items-center gap-4" >
497- < span > < kbd className = "px-2 py -1 bg-black/10 dark:bg-white/10 rounded text-xs" > A</ kbd > All apps</ span >
498- < span > < kbd className = "px-2 py -1 bg-black/10 dark:bg-white/10 rounded text-xs" > S</ kbd > Recent apps</ span >
499- < span > < kbd className = "px-2 py -1 bg-black/10 dark:bg-white/10 rounded text-xs" > H</ kbd > Home</ span >
500- < span > < kbd className = "px-2 py -1 bg-black/10 dark:bg-white/10 rounded text-xs" > 1-9</ kbd > Switch apps</ span >
524+ < span > < kbd className = "p -1 bg-black/10 dark:bg-white/10 rounded text-xs" > A</ kbd > All apps</ span >
525+ < span > < kbd className = "p -1 bg-black/10 dark:bg-white/10 rounded text-xs" > S</ kbd > Recent apps</ span >
526+ < span > < kbd className = "p -1 bg-black/10 dark:bg-white/10 rounded text-xs" > H</ kbd > Home</ span >
527+ < span > < kbd className = "p -1 bg-black/10 dark:bg-white/10 rounded text-xs" > 1-9</ kbd > Switch apps</ span >
501528 </ div >
502529 </ div >
503530 </ div >
0 commit comments