Feature proposal: Option to display inactive workspaces that have content in it + improved UI in the menu

[mobile-ar]

I love this tool, but it was lacking a nicer way to display in the menu, and I always keep forgetting if I have stuff in other workspaces. So I forked the repository and I try implementing myself. (I have experience in iOS mostly, but this is my first time playing around with macOS development)

This is how the status bar menu is looking for me in debug mode. What you can see here in the first 2 squares is the main monitors. 1st monitor is the active one displaying A (because there I put my Alacritty terminal), 2nd square is my external monitor displaying X (because Xcode is running there). Then after the | (pipe) it's displaying the list of other workspaces with windows on them F M N S T (for Finder, Sublime Merge, Notes, Safari and Teams)

Adding here the menu window to better understand from where that is coming.

And here is how it looks while in service mode. Other modes are supported on the same way, the letter being assigned to the mode will be displayed inside a circle, to differentiate a monitor from a mode.

For example, here I created a mode test

[mode.test.binding]
esc = ['reload-config', 'mode main']

that will display like this

For the icons I'm using native Image(systemName:) and icons are from SF Symbols (natively supported).

I was thinking that this visual improvement could be added under 1 configuration entry in the .toml file (like menu-bar-style = 'text' // 'text' == default, 'image' == new images display, 'image-with-background-workspaces' == the new one + displaying the inactive workspaces with content). Also feel free to suggest better naming for this configuration parameters.

I will continue working on this, to add this parameter to the .toml file, given that I just started this as a prove of concept.
I hope this could end up being a PR in the future.

After further reading of closed/rejected PRs I found this might help solve the issue #56

I have a commit implementing this 3 types so the menu can look like this for service mode:

Default using text monospaced (parameter value text):

Image (parameter value image):

Image + display workspaces with windows (parameter value image-with-background-workspaces):

Config .toml:

[mobile-ar]

I forgot to mention that this is using a custom image to display whatever needed without the OS dictating the menu layout or limiting it. this was achieved using this trick:

let renderer = ImageRenderer(content: imagesHStack)
if let cgImage = renderer.cgImage {
    Image(cgImage, scale: 2, label: Text(""))
        .resizable()
        .aspectRatio(contentMode: .fit)
} else {
    // In case image cant be rendered fallback to text
    Text(viewModel.isEnabled ? viewModel.trayText : "⏸️")
}

Here imagesHStack is the custom layout I created using HStack with Image and Text

[nikitabobko]

Also see: #711 (comment)

[mobile-ar]

I understand now your feeling towards UI, still as humans we all have our own preferences and taste, I think over customization is too much, some people love themes and deep level customization, but I think that this change can improve user interface (UI) and user experience (UX) with an small amount of change and just an extra option of functionality not much more customization that that.

What I suggest here is just a simple way to have the super simple text version currently available, plus adding 1 option for using images in a really simple way* (I will explain below) and 1 option for displaying extra populated but not active workspaces.

*the simple way of displaying images is using the same character assigned to a workspace + the system image you want to display.
For example: for workspace 1 you can use 1.square.fill when active and 1.square when inactive. This is using systemImage that it’s default system images and this is support from 1 to 0 and from A to Z.
So to achieve this with a simple string interpolation like “\(workspace.name).square.fill” and passing that string to Image(systemName: ...

1. You have to describe a clear, organized and strict mental model of all possible menubar styles
   All possible menu bar styles are 3:

• text: is the actual menu style (default) like ‘[s] *1 | 2
• image: will display the same basic stuff but using system images: a circle with the letter for the modes (like the square brackets in text mode), and square filled for the active workspace (this will be the equivalent of the * in text mode), and and square with border for the other monitors currently in display but not active
• image-with-background-workspaces: this will be the same as images (b.) + adding a | (pipe) + the list of other workspaces that have windows in them, like ‘| A X Z’ (for example if you have Alacritty in A, Xcode in X and Zed in Z for those workspaces) keeping in mind that the space

2. You have to describe pros and cons of each menubar style:

• text: pro - simple. con: not enough visual help at simple glance
• image: pro - simple, more difference at a glance of the active state of the window, more similar at all other status/menu bar items (usually icon based)
• image-with-background-workspaces: same pros as image. Con: if a user has a window open in each workspace, it could get quite long in the menu (but that might not be a big deal, probably most of the workspaces are empty most of the time)

3. You have to describe use-cases for each menubar style (like for example, it's unclear to me why the indication of the currently active workspace is not enough)
   The current approach might not be enough given that the text is quite thin and might take longer to identify in a quick glance, also the * on the currently active workspace is quite hard to catch too.

Providing an image type, and setting different visual states like:

• bordered square (currently displayed space in a monitor but not active)
• filled square (currently active workspace + monitor)
• bordered circle (for the active mode)
  This provides a more defined state of what’s going on with the state of the workspaces in a simple way

4. You have to take into consideration the fact that MacBook notch doesn't allow the indicator being too wide
   This should not be a problem, regarding the image space vs the text space the menu will have almost the same size in the image. Also if the user chose the version that shows extra spaces, they accept the trade of in size, as a notch MacBook user, you can remove unnecessary items into the control center menu (again this is just UI customization of the OS, user should prioritize what they want there what’s useful to have there present all the time) also might be some users that will prefer not even displaying anything, like no menu at all, and the app is not accommodating for that neither, right?

5. You have to optimize number of possible menubar styles (make it as small as possible)
   The number of styles are pretty small:

• text: it’s the default current one in the app
• image: instead of text use a representation of the character using an image.
• image-with-background-workspaces: same as image + text (to display the other “background” workspaces)

6. For every knob and configuration option you provide, you have to explain the importance in terms of workflows and use-cases
   The use case for this config is:

• text: it’s the default current one in the app
• image: as a user I will prefer a more visual and identifiable clue of the active workspace, and the workspace in the other monitors, so it’s easier to quickly know at first glance my current state.
• image-with-background-workspaces: as a user with pretty bad memory I like to know which apps are open already or other spaces that have some window in it. Also another use case is when I close the lid of my MacBook and I open it the next day at the office, I like at a glance see my other workspaces to see which app I left open already and jump directly to that.

7. Regarding this: “Another observation: macOS native Spaces don't provide any indication of the currently active Space and people even fine with that…” they do display after you do 4 fingers up gesture and you move the mouse up to the top bar, they show the content of each desktop. Or another example is the “cmd + TAB” that will display all open apps. Or the small dot under each app icon on the dock. There are plenty of visual clues on macOS. Also newer versions of macOS provides for example Stage Manager functionality, that shows a bar in the side with a preview of all the open apps in each “desktop”.