ps-realtor: full user interface overhaul

[FrazzIe]

Overview

The purpose of this pull request is to:

• Improve overall responsiveness of the interface
• Improve the readability of the interface
• Clean up leftover/unused components & styles
• Moving duplicate code into reusable components
• Update svelte and various dependencies to the final release of Svelte 4
• General refactor of existing pages

Details

NOTE: I was originally aiming just to improve the responsiveness and readability of the interface, but I might of got a bit carried away 😅

• Updated svelte to 4.2.19 and other dependencies
  • I was unable to get it to build so I thought I'd update while I sorted it out
• Switched to using font-base sizing instead of viewport based
  • The original viewport based setup allowed for correctly sized containers across resolutions but lacked any scaling of the font sizes and even on 1080p, it was quite difficult to read nevermind 2k
• Replaced discord banner with a copyright footer with a link that opens the project-slot github page
  • I feel like most people don't want an advertisement in a resource geared towards roleplay, so I've made it less obvious but kept a way to check out the other projects
• Refactor of all existing pages and components
  • Was the necessary? probably not, but I had time and was having fun and like I said initially... got a bit carried away.
• Moved duplicate code into reusable components
  • Button: matching button styles across the app with added extras
  • Card: header->body->footer layout commonly seen in modals
  • Dropdown: General refactor and attempt at making it act like the native browser.
  • ToggleDropdown: Specific use case when using a dropdown with truthy output
  • Form Control: label->control container for defining form controls
  • Modal: a modal container with a background overlay and escape keybind
  • Tile: simple tile/tag frequently used across properties and apartments
• Clean up leftover/unused components & styles
  • Not sure of the story here but it looked like there was a whole other unused codebase within this codebase and I've gotten rid of it along with any styles that are no longer in use
• Add a logo to the realtor menu sidebar
• Add different image background for apartment/property cards
• Improved overall responsiveness and readability of the interface down to 800x600
  • Should be usable down to 800x600 the lowest of GTA 5 that I know of, and text is a lot easier to read on higher resolutions as well now.
• Fix most typescript complaints seen around the codebase
• Fix 'mlo' being an option under shell types when the type is 'SHELL'
  • I believed this was a bug, please let me know otherwise, I don't see why you would make a shell property to use a shell type of mlo
• Extended property type filter allow showing just apartments
• Added set waypoint for apartments

UI Changes / Functionality

• All below images were taken on a 1080p resolution in chrome selecting corner to corner

Home overview

Before	After

Properties

Before	After

Properties details

House

Before	After

Apartment

Before	After

Properties management

Before	After

Apartments

Before	After

Apartments details

Before	After

List property (splash screen)

Before	After

List property

Before	After

Testing Steps

• Did you test the changes you made?
• Did you test core functionality of the script to ensure your changes do not regress other areas?
• Did you test your changes in multiplayer to ensure it works correctly on all clients?

I've done a full test of creating, managing and selling both mlo vs shell & also apartments. From my testing I've fixed everything that I have found wrong and have also had to modify ps-housing to fix certain issues around property images which i'll open a separate PR for those changes.

Steps

1. Create a MLO property with a garage (also w/o for optional)
2. Create a Shell property with a garage and a garden (also w/o for optional)
3. Test limits of form values, negative number, null fields etc
4. Give yourself an apartment
5. Check if all the properties you listed show on the properties page
6. Test all filters on the properties page
7. View property details for each property and verify contents
8. Ensure apartments cannot be managed
9. Edit a property and test all functionality including the image removing and reordering.
10. Check that property search works as intended

• Essentially test everything, but that's most if not all the steps involved

[MonkeyWhisper]

Holy shit... okay, this is a lot. Excellent work, I'd need to review when ready and fully test before merging.

Thank you for contributing, we are grateful!

[FrazzIe]

Holy shit... okay, this is a lot. Excellent work, I'd need to review when ready and fully test before merging.

Thank you for contributing, we are grateful!

No problem, I'm starting to test things now.

[FrazzIe]

I've updated the PR with up-to-date screenshots and explanation on testing. From my testing results I also had to fix some issues within ps-housing and have create a separate PR, so to properly test this, you will need the changes I made in ps-housing also.

#ps-realtor: full user interface overhaul additional fixes Project-Sloth/ps-housing#271