[WIP] somewhat match macos official client's titlebar setup

[thuvasooriya]

Official Discord client in macos

Dorion with traffic light overlay

pending issues

1. cannot drag by clicking on title bar

This should be solvable easily. I was trying to add something like

html[data-dorion-platform="macos"] div[class*="bar_"] {
    -webkit-app-region: drag;
}

in src/extra.css
but webkit-app-region doesn't seem to take effect.
any pointers on what might be the issue would be nice.
my current workaround is cmd+crtl click n drag

2. traffic light size

the custom traffic lights used in official client are smaller

it requires writing a custom title-bar and i don't think this is a blocker

[SpikeHD]

Thank you for your work so far!

You're correct in thinking a custom titlebar would solve issue 2 but it would also solve issue 1. Dorion already has a custom implementation that can be found and modified here. The bulk of your changes will likely have to be in a PR over in that repo, while in this repo you can just PR to remove the hard-coded MacOS stub, found here. Lemme know if you need help testing your changes, etc.

Also to answer your question, -webkit-app-region doesn't really work in Tauri AFAIK, instead you'd want to add the data-tauri-drag-region attribute to whatever element you want to be draggable

[thuvasooriya]

Thank you for the reply.
And yes I was experimenting with the data-tauri-drag-region as well. but some inactive divs with title classes were being drawn on top. so took me a while to sort that out.

I checked the the plugin and yes it seems like the modifications should be ported over there to some level and native titlebar functionality should just use the NSWindow usage.
I've only spent some time with trying to test the plugins locally. But selecting the built plugins and trying to load them via shelter plugins after disabling dorion plugins don't seem to reflect the same results i got with postinject.js in this commit d0a82d3

Why is the plugin workflow so hard to modify or test locally. Let me know if there is a way to do that without having to go into the settings and edit the js in shelter settings.
I might've missed something obvious for sure.

[thuvasooriya]

here is what i tried to change in https://github.com/SpikeHD/shelter-plugins/blob/main/plugins/dorion-titlebar/index.tsx
the issue might me something to do with the compiled plugins not loaded properly or preinject vs postinject issues.

const injectMacosDragRegion = () => {
  const setupDragRegion = () => {
    // Find title_ element at top of window (the actual titlebar, not username panel)
    const titleElements = document.querySelectorAll('[class*="title_"]');
    for (const el of Array.from(titleElements)) {
      const rect = el.getBoundingClientRect();
      if (rect.top < 10 && rect.height > 20 && rect.height < 50) {
        // Found the titlebar - set drag attribute on it and all non-interactive children
        el.setAttribute("data-tauri-drag-region", "");
        el.querySelectorAll("*").forEach((child) => {
          if (!child.matches('button, a, input, [role="button"], svg, path')) {
            child.setAttribute("data-tauri-drag-region", "");
          }
        });
        return true;
      }
    }
    return false;
  };
  // Retry until Discord UI loads
  const interval = setInterval(() => {
    if (setupDragRegion()) clearInterval(interval);
  }, 100);
};

export const onLoad = async () => {
  // @ts-expect-error shut up
  // if (window?.__DORION_CONFIG__?.use_native_titlebar || await window?.__TAURI__?.core.invoke('get_platform') === 'macos') return
  // @ts-expect-error shut up
  if (window?.__DORION_CONFIG__?.use_native_titlebar) return;
  // @ts-expect-error shut up
  const platform = await window?.__TAURI__?.core.invoke("get_platform");
  // macOS uses native traffic lights, just needs drag region
  if (platform === "macos") {
    injectMacosDragRegion();
    return;
  }

[ilyeshdz]

I've made it work on my machine (macOS Sequoia) without any problem. The window is draggable. Great work.
There's just one problem I've got is that whenever a pop-up or the settings show up, the titlebar becomes undraggable. This can be solved, maybe by increasing the z-index? Will look at it. I just wanna know, did I have to continue on that PR or create a new one (I don't know if I can contribute to a PR to be honest). Well, great job so far!