Draft: RFC: applets/battery: next-to-icon style for charge percentage and circle style for icon

Reason for the change

It would be better if the battery applet has more readable text, and if it covers some common styles that people may want to use without having to install third party applets. Readability can be improved with larger text to the side of the icon; style options can be improved by adding support for circular battery indication as well as (not in this MR) vertical battery icon.

Also imagine the circular battery icon and text in this screenshot being in the system tray. The circle should probably not be the default, but for those who choose it it is a satisfying style.

(As an aside, justifying viewing charge percentage: for many users, reading a text percentage is easier than using a vague icon to judge whether to start charging or not. For other users it's the other way around; that's why it's suitable for an customization option.)

The current way the battery charge percentage is shown uses text that is way too small to be consistently readable. For users primarily relying on the icon for intuition for the amount of charge, this is fine, but for those who prefer to read the percentage text this is lacking.

This MR is my attempt at implementing this, and is a functional prototype, though it is barely viable right now and not yet rebased on top of the port away from dataengines.

Current issues

• I would like the text by side option to also work in the system tray. This would, however, require the system tray to be able to show double sized items.

• The charging icon in the circle style is using battery-profile-performance. If this were to be seriously implemented, it'll probably require a new icon from Breeze to represent the act of charging (and not "a charging battery") instead.

• IMO Ideally there would also be an option to choose between the battery icon vertical and horizontal. This MR does not attempt to prototype that, as it requires either remaking the battery icon in code or having Breeze provide vertical battery icons.

• The way I'm laying out the battery icon and the text in CompactRepresentation is, um, a hack, as I can't figure out the proper layout method without having the text overflow:

  // (in batterymonitor/main.qml)
  
  // HACK: I don't know how to get the implicit size of
  // CompactRepresentation's contents, and without this the label just
  // overflows. Enforce 2:1 instead.
  Layout.minimumWidth: {
      if (Plasmoid.configuration.percentageStyle === 1 && // NextTo
          (Plasmoid.configuration.showPercentage === 2 || // always
           (Plasmoid.configuration.showPercentage === 1 && // not full
            !isSomehowFullyCharged))) {
          return height * 2
      } else {
          return 0
      }
  }

  And even with this it still overflows in a vertical panel.

Test plan

I personally tried this on my machine while developing by applying some minor changes to make it installable like a third party applet, like renaming the applet and symlinking to WorkspaceComponents (to avoid having to build WorkspaceComponents) in two commits marked as to be ditched. I'm doing this as I'm tracking the KDE Unstable (basically nightly) build but not yet actually building Plasma Workspace myself.

I have tried it on a vertical panel and know that my implementation is broken right now. The text overflows to the side instead of showing below appropriately.

I've tried to tag VDG because (a) this prototype design is currently mostly eyeballed and (b) it's really an implementation of a design that I'm proposing which isn't yet properly fleshed out.

This hackiness is a part of why this is a draft MR that's more like a request for comments.

Screenshots or screen recordings

Before	After
N/A
N/A

Bugs fixed

BUG: 438316

(Badge overlaps the icon making it hard to read. If the percentage has an option to be shown to the side, it would be a solution to this bug.)