Improved native options.

src/components/native/Titlebar.tsx

@@ -0,0 +1,72 @@
+import { X, Minus, Square } from "@styled-icons/boxicons-regular";
+import styled from "styled-components";
+
+import wideSVG from "../../assets/wide.svg";
+
+export const TITLEBAR_HEIGHT = "24px";
+export const USE_TITLEBAR = window.isNative && !window.native.getConfig().frame;
+
+const TitlebarBase = styled.div`
+    height: ${TITLEBAR_HEIGHT};
+
+    display: flex;
+    user-select: none;
+    align-items: center;
+
+    .title {
+        flex-grow: 1;
+        -webkit-app-region: drag;
+
+        font-size: 16px;
+        font-weight: 600;
+        margin-left: 4px;
+
+        img {
+            width: 60px;
+        }
+    }
+
+    .actions {
+        z-index: 100;
+        display: flex;
+        align-items: center;
+
+        div {
+            width: 24px;
+            height: 24px;
+
+            display: grid;
+            place-items: center;
+            transition: 0.2s ease background-color;
+
+            &:hover {
+                background: var(--primary-background);
+            }
+
+            &.error:hover {
+                background: var(--error);
+            }
+        }
+    }
+`;
+
+export function Titlebar() {
+    return (
+        <TitlebarBase>
+            <span class="title">
+                <img src={wideSVG} />
+            </span>
+            <div class="actions">
+                <div onClick={window.native.min}>
+                    <Minus size={20} />
+                </div>
+                <div onClick={window.native.max}>
+                    <Square size={14} />
+                </div>
+                <div onClick={window.native.close} class="error">
+                    <X size={20} />
+                </div>
+            </div>
+        </TitlebarBase>
+    );
+}