Overhaul UI

[boerdereinar]

Overhaul UI

Description

This pr fully overhauls the UI as per #185.

New Features

• Complete overhaul of UI
  • Adwaita colors (customisation is still possible)
  • Favorite/close button only visible on hover (configurable)
  • Pano window floats
  • Can be disabled
  • Each margin can be configured
  • Configurable item width and height
• File previews
  • Text files
  • Images
  • Files that have a generated thumbnail i.e. pdfs/videos
  • File paths containing /home/user/* are shortened to ~/*
  • Multiple copied files are listed under their common directory to shorten the paths of the copied files. Usually this will result in only the file names being shown
  • Color item foreground is computed using luminance
• Header Styles
  • Headers are hidden by default
  • Visible
  • Compact
• Compact Mode
  • Height of item is halved
  • Layout of items is restructured
  • File previews are hidden
• Open at pointer
  • Pano can open at the current pointer position
  • Height of the window is configurable
• Middle click to delete items
• Paste file content
• Items are no longer selected after deleting an item (if no items were selected before)
• Any single grapheme cluster is now displayed as an emoji

Misc

• yarn run clean:ts can now fail in build:ts to make building easier while pano is still running

Dependencies

• Added color-string for easy color parsing and conversion to rgb
• Added graphemer for checking if the copied string contains a single grapheme cluster for the emoji item. This fixes ZWJ sequences not being detected as an emoji
• Removed validate-color
• Removed hex-color-converter

Screenshots

New UI

Compact Mode

Window Position: Pointer

Incognito Mode

Header Style: Compact

Fixes

Fixes #124 Fixes #150 Fixes #176 Fixes #185 Fixes #272 Fixes #300

Type of change

• [x] Breaking change (fix or feature that would cause existing functionality to not work as expected)
• [x] This change requires a documentation update

Checklist

• [x] My code follows the style guidelines of this project
• [x] My commits follow the commit standards of this project
• [x] I have performed a self-review of my own code
• [x] I have commented my code, particularly in hard-to-understand areas
• [ ] I have made corresponding changes to the documentation
• [x] My changes generate no new warnings
• [x] I have checked my code and corrected any misspellings

[Totto16]

Thank you for your contribution, I don't know if it makes sense to review this yet, since this and #278 clash and might create merge conflicts. I also am in favor of publishing the already working UI with #278 to EGO first, before doing this. And then testing it extensively and by multiple users, before releasing it.

But overall it really looks good, so I'm going to look at this as soon as the issues and PR's with more priority are resolved.

And just from glancing over it, there are a few things to do:

• [ ] replace images / videos in the README with the new design (do that at the end, since we might change something)