Fluetro OS DevLog 057

Finally finished adding all the settings options

New stuff added/changelog

• Added settings for Interface, Privacy & Security and the About sections
• Did the CSS for all the above-mentioned areas
• Made the Location bar work using JS and made it sync with the one in Quick Settings (shown in video)

Fixes

• Fixed the weird gaps and padding in some areas of the settings app

Current issues/bugs

• Most of the settings are not yet functional

Note

• The Personalization area might get Radio buttons (or menus) while the other sections will get checkboxes

Fluetro OS DevLog 056

More Settings

New Stuff added/changelog

• Added some more settings
• Did the JS for the Wallpapers so they actually work now

Fixes

• Found an issue that causes lag and no animations when trying to open the wallpaper change menu from quick settings or the settings app, it’s now fixed, I did it by rendering the options beforehand. I tried to fix this issue thinking it was settings app-only but had to give up on it since none of my attempts to fix it worked, then I found out the same was happening in the quick settings wallpaper picker, this was probably because it goes through the code and tries to render the image using JS, and it can’t do it before the app opening animation finishes.

Current issues/bugs

• There is no CSS for the new settings areas that have been added
• There’s no JS for the new settings areas that have been added

Note

I am thinking of making a pack that can make Windows 11 feel like Fluetro, so please let me know if anyone would like that.

Fluetro OS DevLog 055

CSS stuff

New stuff added/changelog

• Did the CSS for the Settings app
• Revamped some designs for the Gaming Hub and Settings when maximized so they don’t look weird
• Did a roadmap for all the settings to add

Fixes

• Fixed some of the jumpy and jittery elements in the UI

Current issues/bugs

• I still haven’t done anything about the JavaScript part of the Settings app so for now, everything is only visual

Fun Fact

• The UI for this project was inspired by a leaked screenshot of a concept Windows version that surfaced online, I tried to remake that in my Windows 11 system and had a screenshot, finally found it and it’s attached below. The dock is inspired by a DeviantArt Post I saw a few years ago (I think it was called Fluent Big Sur).
• The top Bar UI of the OS is inspired by the new “Dock” feature added to Microsoft PowerToys and how I arranged it when I first enabled it (image attached)

Fluetro OS DevLog 054

Mostly improvements

New stuff added

• Maximizing/restoring down now has animations and they don’t interfere with the resizing scenario like earlier, this took so long to implement because my first ever project that involved JavaScript was just this year, so I am still learning.
• Revamped the Gaming Hub
• Added a Settings app, and hooked it to the Quick Settings panel so it can also be opened from there

Fixes

• For some reason the animations weren’t working for all the windows, so I checked and tried lots of different stuff, and then found out that there was no height and width parameters for most of the windows, so I added some and that fixed the animations

Current bugs/issues

• I just started working on the Settings app, so it’s really unfinished (shown in the video)

Fluetro OS DevLog 053

Music to my ears

New stuff added

• Added a Music Player with working Play/Pause, seekBar, Previous/Next and Queue
• Added music in Audio Folder in the Files App
• Redid almost all the Files App icons with higher quality versions
• Changed the Details Pane text to a more appropriate one
• Added a Supabase fetch system for the Music
• Clicking “Previous” while being on the 1st music in the Queue results in restarting that song
• Clicking “Next” while being on the last music in the Queue results in restarting that song

Fixes

• Fixed some issues with the un-resizable windows, which could be resized earlier, they just didn’t show the custom cursors
• Fixed jumpy windows
• Fixed Music Player issues that I encountered along the way, like the Play/Pause buttons not rendering properly or the SeekBar jumping

Current issues/bugs

• The Music takes some time to load, but it mostly depends on your internet connection
• The Queue is still custom arranged, and not alphabetically sorted

Fluetro OS DevLog 052

Well, this is embarrassing

New Stuff added

• Browser has its own custom accent color now (like how browsers on Windows have)
• The Photo Viewer icon stuck in the dock is now gone and appears only when Photo Viewer is called

Fixes

• Fixed the issue with the dock padding when Photo Viewer wasn’t called

Stuff that happened

• Tried to add a dynamic accent color sync system for the browser, it worked to some extent, but it won’t instantly sync if you changed the wallpaper to change the accent color, but would sync that accent color after a restart, so I had to remove it. Will try to implement it later though.
• I have been working on a Music Player app (as I said that there will be one in a future update), wasted a lot of time debugging it trying to find out why the music wasn’t playing, turns out, the Integrated Browser in VS Code doesn’t allow intregated <audio> elements. Tried in my default browser (and brave), works as intended. (Please ignore the bright blue background, it’s just a placeholder)

Fluetro OS DevLog 051

Lost my 25-day Streak

New Stuff added

• Photo viewer that can open photos from the gallery and adjusts according to image size

Fixes

• Fixed the Delete system, so now it deletes only what you want to delete, and it’s now persistent so it stays that way even after a page refresh/restart

Current bugs/issues

• The issue with the sub-folders not opening after the parent folder is renamed still exists

Fluetro OS DevLog 050

Half-century DevLog? Really?

New Stuff added

• The rename function works now
• Delete button kinda works
• Yeah that’s about it

Fixes

• The rename function was really hard to implement, so there were lots of glitches and issues and stuff, I did manage to fix most of them, the rename box was originally meant to show over the existing file name, I did do some research to see if I could get it to work this way, but since I couldn’t get it working, I had to improvise and do the separate rename section.
• Tried to make the rename system be inside one single eventListener but couldn’t get it to work that way, had to create a separate function to call along with
• Pressing the rename and delete buttons no longer remove the selected state from the item.

Current bugs/issues

• Clicking delete doesn’t dismiss the context menu (easy fix but it’s here because it’s just my current progress)
• Clicking delete for one item deletes all the items in the folder
• Delete is temporary and resets on refresh (for now at least)
• Nested Folders don’t work if you rename the parent folder (for example, in the video I rename a folder, then the folder inside it doesn’t open. This is fixed on a restart/webpage refresh)

Fluetro OS DevLog 049

Very little progress, since most of the time just went into debugging and fixing stuff, tried using Copilot in VS Code but it’s

New stuff

• The context menu is finally aligned
• The context menu got icons now
• Made the delete button have a red icon and red text
• The open button in the context menu finally works
• Had to redo the file handling system so the open button system can be implemented easier

Fixes

• Broke everything, yeah, literally the whole OS, while trying to redo the file handler because I was removing some lines (individual EventListeners) and putting them under one roof, but I forgot some brackets, since I couldn’t fix it easily, I tried to use Copilot (the one inside VS Code) to find out what’s causing the error, dude literally said that there’s an error in these lines, no elaboration or fix so I had to get the code from my backup and redo everything very carefully, so now it’s ok
• I have never positioned an element inside another element that can be resized, so this was new and challenging for me to align the context menu nicely with respect to the files window and its variable size system, it took some time, but I did it.

Current issues/bugs

• Rename and Delete buttons are still to be implemented

Fluetro OS DevLog 048

Late DevLog, couple of improvements, mostly fixes
Was supposed to upload a DevLog yesterday but had some issues with the internet (had to ditch the router), probably some coding time isn’t event logged

New Features added/changelog

• Revamped the File Management system so now the sub directory system actually works, like you create a “New Folder” in one directory, and one in another, and now they both don’t overlap/refer to the same directory
• Added icons inside the Sort Menu
• Added a context menu for files/folders (the positioning is broken since the css isn’t done correctly, because I’ll probably be using some inspiration from Fluent New Tab for the dynamic positioning)
• The context menu for files/folders behaves differently according to if the Folder/File mentioned is a System one or User Created
• You can now un-select items by clicking somewhere else inside the app, this even updates the details pane accordingly
• Added custom “Date modified” parameters, so they correspond to when the file/folder was created
• Internal Storage now shows Size as 23.4 GB / 512 GB
• Removed Trash
• Changed the animation for the details bar (“Name | Size ….” bar) at the top to just minimize in height and not width too.

Fixes

• As I said in changelog, the folder directories don’t overlap now
• I made lots of errors while trying to get this new directory system to work, like the folder numbering not working correctly, like there’s a folder: “Internal Storage\New Folder (2)”, and then you try to go to downloads and create a folder, and then it’s named “New Folder (3)”
• There was also an issue where the address bar pointed to somewhere else rather than the original path for that directory (so I had to combine multiple arrays for directory system to one, which is part of the Revamped file system)
• Fixed a background size inconsistency in the gallery section
• Fixed the status bar in gallery saying “undefined items”
• Fixed the context menus being transparent instead of blurry (for Files and Browser), so now they’re opaque like Chrome or Edge or Safari
• Removed all pointer events from the details bar at the top, so it no longer shows the hand pointing cursor when hovering

Current issues/bugs

• The file/folder context menu is positioned oddly and doesn’t have any icons
• The details pane icons are blurred since it uses the 32x32 icons I used in the file/folder icons

Fluetro OS DevLog 047

One step closer to finishing the Files app

New Features added

• New File and New Folder options that actually work (with icons BTW)
• New File can only be used to create text files, and the get the Type as Text File, and a .txt extension
• User Created files/folders now stay even after a restart/page refresh (like in your browser, not the files or browser app of Fluetro)
• Removed the size detail for folders since most OSes don’t even show it
• Sorting actually works, but it’s only Ascending or Descending, only based off of the Item name
• Clicking the dock icon now instantly focus the corresponding window, except for errors
• Added an actually working address bar, inspired by the older Windows (like XP), which can also take user input to go to said location
• Putting in an invalid location in the address bar gives an error box, like the System or unsupported file type errors

Fixes

• Fixed issues that I faced while implementing the Dynamic Naming Process for the User Created files, like adding the extension for the Text Files
• Fixed an issue with the sorting logic, where, since I copied most of the logic from the ascending system to the descending system, I left the button click listener for the ascending system, in the descending system, so for some time, clicking ascending just sorted the items in descending

Current issues/bugs

• The Sort and New Menus don’t close if I click anywhere else in the files app
• You can’t unselect an item
• The Gallery Status bar shows “undefined items”

Note

Added the Gallery Screenshot promised in my last DevLog

Fluetro OS DevLog 046

Frequency of DevLogs has plummeted, but Files app is almost complete## New Features Added

• Preview Pane changed to Details Pane
• Details Pane actually works
• No Details Pane in Gallery
• .exe files open the corresponding app
• Added a scrollbar for the apps folder since it has way too many items
• Made the Files Status bar independent of the files body, so it doesn’t go away when scrolling
• Made the Details area on top (Name, Size etc.) independent of the files body, so they don’t go away when scrolling
• Added a select system which triggers the details pane
• Details pane won’t show up after coming back from gallery if you disabled it previously, otherwise it will

Fixes

• Made a mess while trying to move the Status and Details areas, noticed it was because I had a part of js coded into the details area for future purposes(sorting), so I removed it and now it’s just cosmetic and does nothing else, and the status bar was appended to the main files body, which I changed to another div that contains the file operations area (New, Sort etc.), the details area and the files body
• Broke the details pane while trying to use querySelector to check if Gallery is active and the button is disabled or not, fixed it by switching to contains
• Fixed the padding and margin for the Details Pane to match the height of the Files main area

Current issues/bugs

• I was thinking of adding Windows-style breadcrumb address bar, but that’s very problematic, and might not even suit it well, so I’ll be adding a retro-style “" system for the address bar
• There’s still no new and sort system

Note

I forgot to add the screenshot of gallery, and now it’s only allowing me to replace the existing files and not add more

Fluetro OS DevLog 045

Adding the preloaded files and folders was easy (which I did before), but now progress has been slowed, again

New Features added

• Menus for Sorting and New File/Folder creation
• Different states for the New and Sort By buttons
• Removed Search Bar (too complicated to implement)
• Removed View option (still complicated to implement, might add it again later on)
• Removed Up one level button (most complicated)
• Added an error window that shows up when you try to open up a file that’s not supported by any existing app

Fixes

• I wasted a lot of time trying to fix the issue in the css that was causing the weird position for the menus, turns out the css wasn’t the issue at all and it was actually the HTMl since I put the menus outside the upper button panel handler
• I also wasted a lot of time trying the hit-and-run approach for the perfect height and width for the unsupported file type error box
• Fixed the corner radius for the System Menu (even though barely noticeable)

Current issues/bugs

• You can still go inside .exe files, since they’re still treated as folders (actually the type doesn’t matter for them, since the code is really simple for the folders and items)
• Something weird is going on with the padding for the sort and new menu buttons, and they don’t have blur either

Fluetro OS DevLog 044

Lot of progress

New Features added

• An actual File System with lots of Files, including Apps and User Files
• Custom .igr File extension and “Integration” type for Games files
• Working Navigation buttons, except the “Up one level button”
• Double-click system for files/folders
• Different file/item types and different icons for each one
• Disabled states for navigation buttons when not available/applicable
• Fully redesigned “Access Denied” error box
• Access Denied error integration when trying to access System Files
• Separate dock icon with running status for the error box
• Connected Navigation panel to individual folders/locations
• Animations on the error icon on the dock when it appears and disappears
• Animations on dock for expanding and shrinking to make room for the error icon

Fixes

• Minor fixes regarding the UI like hover effect for the OK button in System info box and corner radius adjustment in certain areas
• Fixed the weird padding at the right side of the dock due to appearance and disappearance of the error icon

Current bugs/issues

• As I said earlier, the Up one level button doesn’t work
• Address bar still need a lot of work
• Search is still just a placeholder
• Preview pane is still in the works
• I didn’t add the sounds, and I’ll probably add them last, because being forced to hear those sounds every time I restart Fluetro for debugging will become irritating fast
• There’s no scroll bar in the Files App

Note

• The animation looks jittery, but it’s due to some issue with Snipping Tool, it’s really smooth in reality

Fluetro OS DevLog 043

Slow and steady progress

New Features added

• Toggleable Navigation and Preview Panes
• Slight Redesigns for Browser, Paint and Gaming Hub Games
• Minor redesigns for all tooltips
• Animations while enabling or disabling the Navigation and Preview panes
• Made iframe based windows easier to resize and move

Fixes

• Fixed an issue where the hover of an object inside the files body would get cut off
• Fixed an issue where the Close button tooltip would get cut off

Current issues/bugs

• Resizing the AI/Daily Brief app is slow and kind of jittery
• The items inside the files body currently do nothing
• There’s no active state in the Navigation pane for the folder you’re currently in

Fluetro OS DevLog 042

Well, at least this is better than the last time

New features added

• Placeholder for Preview Pane
• Working Navigation Panel
• Working Gallery, currently only shows the preloaded wallpapers and I plan to add more images, maybe some taken by me
• A different screen for visiting empty folders
• Changing address bar icons according to the folder you visit
• Changing address bar text according to the folder you visit
• Added Trash (Recycle Bin), only as a Navigation Panel location for now

Fixes

• I checked the feedback and found out Minesweeper was not working for the current version of Fluetro, so I checked and found out that vercel is case sensitive and so it didn’t work, I fixed it now
• Yes, I’ll be adding almost all the features from feedback like making the dock auto-hide on maximize for more usable screen real estate
• Fixed multiple errors that I made while trying to make this update to the Files app, mostly by missing an “=” sign or a “.” at places. These errors basically broke everything, making everything non-interactable.

Current issues/bugs:

• IDK how I got the Details and stuff at the top to get working, but now I can’t get the content to adjust according to it, so it breaks whenever the window is maximized (screenshot attached)

Fluetro OS DevLog 041

Very little progress

New features added

• Added an operations section (new, sort by and view)
• Added what’s supposed to be a details panel
• Added a status bar
• Added placeholder content
• Added the top bar for the content, with separators

Current issues/bugs

• This is really complicated and all this time I am using up, is just for debugging, which is crazy
• The details pane is still blank
• Nothing does anything, since I have only managed to do the css and html so far

Fluetro OS DevLog 040

Exact reason why I delayed the development for the Files App

New Features added

• Scrapped the plan for making the Files app iframe based
• Added the Files app code directly into Fluetro code for better OS integration
• Added Navigation pane containing all important OS locations
• Added a main section for the app, where the content will be shown
• Also fixed dark mode for the app
• Removed the Work in Progress window for the Files App

Fixes

• Fixed the backgrounds for the different app elements

Current issues/bugs

• I have been working on this for almost 2.5 hours and managed to come only this far, nothing else is done, no JavaScript, or system, only the visual app is present, and opens on clicking the files icon on the dock
• Should I change the icons in the Navigation panel to colorful ones?

Fluetro OS DevLog 039

First DevLog after 2nd ship

New Features added

• Started working on the Files app, so now it only has a really basic design, mostly taken from the WebOS Browser project (image attached), it currently does nothing, and is just a blank slate

What’s in the works?

• Made some sounds for the UI like Startup, login, and shutdown
• Got a new roadmap and a whole list of features to add next