diff --git a/src/components/native/Titlebar.tsx b/src/components/native/Titlebar.tsx
index c3677c53..96c9cf83 100644
--- a/src/components/native/Titlebar.tsx
+++ b/src/components/native/Titlebar.tsx
@@ -1,4 +1,4 @@
-import { Wrench } from "@styled-icons/boxicons-solid";
+import { Wrench, Microphone, VolumeFull } from "@styled-icons/boxicons-solid";
import styled from "styled-components";
import Tooltip from "../common/Tooltip";
@@ -10,16 +10,37 @@ const TitlebarBase = styled.div`
gap: 6px;
user-select: none;
align-items: center;
-
- .title {
+ .drag {
flex-grow: 1;
-webkit-app-region: drag;
- height: var(--titlebar-height);
+ margin-top: 10px;
+ height: 100%;
+ }
+
+ .quick {
+ color: var(--secondary-foreground);
+
+ > div, > div > div {
+ width: var(--titlebar-height) !important;
+ }
+
+ &.disabled {
+ color: var(--error);
+ }
+
+ &.unavailable {
+ background: var(--error);
+ }
+ }
+
+ .title {
+ -webkit-app-region: drag;
+ /*height: var(--titlebar-height);*/
font-size: 16px;
font-weight: 600;
margin-inline-start: 10px;
- margin-top: 4px;
+ margin-top: 10px;
gap: 6px;
display: flex;
align-items: center;
@@ -28,7 +49,7 @@ const TitlebarBase = styled.div`
color: var(--titlebar-logo-color);
svg {
- margin-bottom: 4px;
+ margin-bottom: 10px;
}
svg:first-child {
@@ -80,6 +101,23 @@ export function Titlebar() {
{window.native.getConfig().build === "dev" &&