Customizing the Application Window

[00:00:00]
>> Now, one of the things when I look at this app, I think it's beautiful. Tailwind makes everything easy. I noticed that a lot of these other Electron apps, they got the fancy menu bars that they made themselves, like the VS Code one or the GitHub one. The GitHub one's got some gradients, not to be whatever, it's looking a little dated, but you know.

[00:00:26]
I think Slack has got a custom one nowadays. I wanna get in on that. I feel like I got almost all the way there, except I've got this menu bar as well. And also this application feels this is like the correct size for it. I don't wanna deal with the fact that someone can stretch it out like this, or like this that's not ideally this should keep track of things that I wanna save to the clipboards.

[00:00:48]
I can say important, quip that I wanna reuse a lot, and I should be able to like hit copy. But, this feels like an app that should be like, roughly like that wide, right? Like and so I wanna like have a little bit more control over this window than I previously have had in the past.

[00:01:10]
So you can imagine the initial width and height are set here as well. And through the magic of TypeScript, we've got probably even get a sense of like some of the other ones hidden in Mission Control. Obviously that's a MacOS only one. Is it minimizable at all? Right?

[00:01:27]
So we'll say that the min height I don't want to deal with it getting to like, I think that's fine, I can make it pretty squirrely if I really put my mind to it. I'm pretty sure I could do something like that. I don't want to allow that.

[00:01:39]
That's gross. That's yeah, right? Nobody wants that. So we'll say that the min height, I think the min height is only going to be no less than 400, feels right. Same thing for the width, I don't need to live by that, 300 feels right there. The max, let's see, max height, 800, I'm making values up to be very clear with you.

[00:02:05]
Max width, you know what, 450. We'll see if this looks any good at all. And, they can't maximize it, so it's not, they can minimize it, I don't care, it's not maximizable at all. So we''ll start with that and see what we got. All right, so now, I missed it.

[00:02:29]
There it is. Can't go any bigger than 450. Can't get any smaller than 300. Cool, so I've got some like, reasonable like settings here, feels like good. I do want to get like one of those custom menu bar dailies that feels nice. So with that, I'm simply going to say that the Title Bar Style is hidden and there is a title, let's see what happens if I just do that.

[00:03:04]
I think I still need to do one more tweak to get it to look totally right, we'll find out together. Looks pretty good. The other one I was gonna do is, And we'll put that, no, I want, true. And you can see, and there's documentation for all this kind of stuff.

[00:03:29]
You can also read it here as well. I want them visible, as well. And there's a bunch of other settings in here. And that should get me most of the way there. But we're gonna notice something gross. Which is now I drag this thing, but like it's behaving like a web page, which is disgusting.

[00:03:53]
I didn't go through all of this work to create something that looked and felt like a web app not to be able to drag the title bar. All right, and I don't want to select that and like no, that's not the behavior that I've come to know and love.

[00:04:05]
You can see that I can't maximize it though. That's cool. And to everyone's shock and amazement, do you know how we fix this? CSS. Yeah, we fix it with CSS. So with a little bit of CSS, we can adjust this. I happen to know that I gave it the ID of titlebar.

[00:04:30]
So that is not a built in Electron thing, that is just simply, I happen to be the person who wrote the HTML. So, there's basically two things we wanna do, we wanna do user select, and none. There are other options for this. Just FYI, that's not important for our time together.

[00:04:50]
Which is like, if you ever wanna say, if they click on anything, it selects the entire amount of text, that's a different user select. I think it's like user-select all, or something like that. I don't remember. But I use it in my app a lot. And the other one is you can tell it's safe because it starts out with two dashes, which is --webKit.app-region, which is to say that this title bar is a thing, you can drag this window by, right.

[00:05:19]
And so now we're saying that like don't select the text in the title bar there, and also treat that entire title bar, which is what that div has the ID of as a thing that we can drag as part of the app. All right y'all, in the world status live coding faux pas, this is what I typed, this is what it was.

[00:05:43]
It was one dash and not two dashes. I feel like, am I just like, did I have like a moment like where I've, what is it, the Mandela Effect? I always thought it was two dashes for the like secret experimental like CSS. Like, did I literally forget how the world works?

[00:05:59]
Or is this one different and just soak? I don't know. So yeah WebKit app region and now now look at that thing. It's like a menu bar. Or a title bar, whatever it's supposed to be. Now I can drag this around like, it's a real app, like all of its friend app over here, right?

[00:06:18]
I can do the same thing. I'm now hanging out with the cool kids in this sense. Cool, so we have that in place. That felt good. We are going to do some various different IPC things. I just moved this one, too, to show you, same basic idea. And you don't have to have anything written in the title bar if you don't want to.

[00:06:39]
It's all up to you once you start controlling it. But it's just CSS at that point. We are going to have some different IPC endpoints and I teased to you before there's a way to not have to add it all to the d.ts. It's just through some, the magic of TypeScript, where we can do something like, say const API.

[00:07:07]
That's just saying that like when I defined it, I'm not adding stuff to it later in TypeScript, and again, if you are like I don't, I don't know TypeScript. That's fine. Let's do export type. So we're saying go look at this thing that's never gonna change and figure out its type.

[00:07:31]
And then we'll export that. Now in that clipping.d.ts or actually Electron, I can just simply say, Interface window like I did before, capital W, preload API. So now it will, in this file and basically go figure out what the type of this object was, exports the type and then use it here.

[00:08:10]
Now clearly like right now that is simply an empty object, but as I add stuff to it, it'll automatically be on that type. If you like this, good, here, yeah, use it. If you do want the sanity check of like defining the types and the shape of what you put on the window and then making sure what you write in preload makes sense, then do what we did in the previous section.

[00:08:29]
The reason I showed you both is like, honestly, I go back and forth which one I like better. So you are more than welcome to do the same.