puruvj/macos-preact

Hi there 👋

macos-preact's Issues

The page title still says React not Preact

Cool project! Just noticed the page title still says React despite the move to Preact.

Cache all images while macOS "start"

Actually, if you open macos-web with a slow network, macOS "starts" first, and doesn't await for all images load... I suggest to wait body load, first, and then end "boot".

Fix dock tooltip

The app indication tooltip on the dock is quite weird on hover. Fix it to follow the scaleing of app icons

Magnification

The magnification effect should be disabled by default and made as a toggle.
In macOS Big Sur, the effect is not enabled by default. (the same with Monterey).

Add macOS boot transition

macOS, after boot, make a transition to the login panel, so, can be a nice thing add a transition from before "boot" to after "boot"...

Accessible macOS Web

Time to add accessibility to this app. Its highly unaccessible at this point. Keyboard users can never know where they are, users are used to moving around using arrow keys, on certain list-like areas(menus), and the aria markup pretty much sucks

Actions to be taken:

• Add some form of indicator that the item is focused
• Add roving tabindex to menubar, context menu.
• Tabbing around should trigger the menubars
• ARIA labels

Much more that can be done. Also, I am not very good at ARIA. Would appreciate if I could get comments/tips when I do it wrong in the code 🙏🙏

Create basic API for MenuBars

Let's start work on menubars

• Create basic API structure for how the menubars are to be structured
• Basic menu items
• Menu item groups
• Make way for search inputs
• There should be a hook exposing the current active applications menu items
• There should be hooks to modify state of items(Disabled, enabled)

Get this done

traffic light icons on hover

You mostly know this, traffic lights show icons in hover state.

I tried implementing it looks like this

If you want this implemented let me know I would raise a PR on it.

package-lock.json and yarn.lock are ignored

https://github.com/PuruVJ/macos-web/blob/main/.gitignore includes

package-lock.json
yarn.lock

It's better to commit them (choose one of them) and remove them from .gitignore.
This also causes issues with codesandbox.
Why it's helpful? - see this https://stackoverflow.com/a/44904494/6708328.
From a personal perspective - installing the dependencies from remote may be different from your locally installed dependencies.

Create barebones topbar

Make calculator functional

Calculator, currently is non-function. Make it function:

• Click on buttons to add numbers and symbols to the equation
• If calculator is focused, what is typed is also taken for input
• If the equation ends with an operator, replicate the whole structure on the right side

Update Readme.md with info

Describe this project in README.md, outline the roadmap(v1, v2, intended features, etc)

Allow apps to go off screen

Currently, the apps are confined to w=viewport. But apps on macOS can go sideways and exit the frame horizontally.

use Rnd's bounds and provide coordinates minus the dock and topbar

Focus bug of VSCode

After VSCode app unfocus, isn't possible to see close button, etc. until is refocused.
Strangely the problem is only in this app and not in the others...

Create basic window

• Should open on clicking on any app icon in dock
• should have traffic light buttons on it
• Look like MacOS Window
• Draggable
• Resizable
• For now, put "Windows coming soon" in them

Download a lot of dynamic wallpapers

Source https://dynamicwallpaper.club/gallery

For v2

Toggling Theme only works on clicking Moon Icons 🌖

Toggling of theme works only in clicking the moon icon, I think it would be better if the toggle function is placed on the component, that'll help if clicking on the text also. Have a look on this 💪

Move Dock Context to Restater

Add background images, optimized to the project

Edit

Things have changed. @tolgaerdonmez has given me the wallpapers in HEIC format.

• Get rid of previous wallpapers
• Convert HEIC wallpapers to JPG ones
• Optimize these wallpapers using Squoosh
• Generate thumbnails

macOS cursor doesn't work on all control panel button area

Example here:

Use :global(body dark) instead of useTheme hook

A lot of components rely on the useTheme hook to get if theme is dark, just for stylistic purposes. Let's get rid of that and use the :global(body[data-theme=dark] .selector. This is purely CSS based, and won't trigger unnecessary rerenders in components, and will make them smaller overall

Calculator blur effect doesn't work on Firefox.

The blur effect for the calculator app doesn't display on Firefox.

Firefox (Developer Edition 89.0b3)

Edge (90.0.818.46)

Hide cursor when "boot"

To make a more same as original boot, I suggest to hide cursor when boot, and then show it after boot.

Add fonts to the project

• Download the woff2, woff, ttf versions
• Add those fonts in stylesheet

Drag & Drop from Action Center to Top Bar

Working on building the below captured feature

Add "functional" Finder

I've found this repository that can be useful to implement a semi-functional Finder in macos-web: https://github.com/guyariely/finder-clone

Tooltip in Dock

Very Simple Tooltip with Pure CSS

temp.mp4

Let me know!

Dynamic wallpapers

Achieve that awesome wallpaper changing effect based on time(more like solar cycle stuff like sunset, sunrise, twilight time).

Use https://sunrise-sunset.org/api for this.

Implement in v2, and give customization options in v3.

Handle Cmd+W and Cmd+Q

Why don't handle Cmd(or Ctrl)+W to close app window and Cmd(or Ctrl)+Q to quit app? This can be very "useful"! 😄

Fix code splitting issues for apps

Currently, all the components are eagerly loaded. Thats no issue, but it is a problem when trying

Remove tippyjs from MenuBar and Action Center

Currently, MenuBar, to show menus, uses TippyJS and lots of state management with Jotai. But that is quite slow.

Goal:
Remove TippyJS from the equation entirely.
Rely on CSS as much as possible, though using Jotai to show stuff actually seems like the best scenario here, as :hover will not work unidirectionally, that is, it will show as well as hide on hover and removed-hover, which we do not want.

Same goes for ActionCenter. Use same methods for it too

Bounce icon on app start

Can be very beautiful see macOS app bouncing when an app "starts"! 😉

Auto-Hide Dock

Auto-Hide Dock option would be better when we open any application in full screen.

Fix bugs in menubar

When you click on menubar, it should open up, when you hover out, it stays open.

When one menu is open, and you hover over another, that menu should open up and previous one should close.

update to pnpm instead npm + pwa

do you want to include PWA for system updates like on svelte one?

https://github.com/antfu/vite-plugin-pwa/blob/main/client.d.ts#L89

CSS background-repeat has an invalid value

Not a big deal but I think that .backgroundCover should have background-repeat: no-repeat instead of none.

context menu

I have a bare model of the context menu created.

I didn't use the API for Menubar to implement this, found it too complex 😅.

let me know if you want this feature.

Auto-resize windows when viewport height/width change

Currently, if the viewport width changes the opened app window stays the same.

Before:

After viewport height is changed:

Instead of showing the current behavior, it should resize the open app window(s) automatically.

Menubar should act like the original

In original macOS's menubar, clicking on 1 menu open it, and then hovering on other open them, and close the previous one. When they're open, hovering out of these do not close them, but clicking outside so.

Current Behavior:
Open on hovering directly, and hovering out closes it.

Expected:
Just like I described above.

Files to look out for:
src/components/Menubar.tsx

Download the standard big sur default dock icons

These icons

Remove redundant aliases

__assets and __components as aliases are unnecessary. Remove them and fix the imports in Dock.tsx and Desktop.tsx

macOS cursors

Use macOS cursors instead of regular cursor properties.

Use CSS variables like --app-cursor-default, --app-cursor-pointer, etc to store their URLs

Organize file structure

There is currently no file structure. Create one.

Inspiration:
https://medium.com/@Charles_Stover/optimal-file-structure-for-react-applications-f3e35ad0a145

Calendar Application - Phase 1 Month View

• Display of calendar in month view
• Can focus on Today
• Can highlight Today
• Can go to previous / next month

Create dock-item and list of app icons in global store

Create dock item and a list of app icons in the global store

calcutor is not working propely

calcutorbuttons are not working

Create complete dock implementation

• Dock Item component
• That cool hover animation

macOS start sound doesn't work

macOS start sound doesn't work because of no interactions with the user (page click) before playing.
I suggest to add a start button (as. iMac back start button) that invoke the user to click it to continue and start the OS.

Normal cursor on VSCode

As specified in the title. the cursor is not macOS one when interacting with the VSCode window.

adshub

lipLICENSE