Refactor AppLayout component for improved structure and styling; update dark theme colors and descriptions; increment version to 0.1.9 in Cargo files and tauri configuration; add window permissions for title setting and dragging.

Author: Rohitjoshi9023

src-tauri/Cargo.lock

@@ -1,6 +1,6 @@
 [package]
 name = "mtarsier"
-version = "0.1.5"
+version = "0.1.9"
 description = "mTarsier - Desktop app for managing MCP servers"
 authors = ["mTarsier"]
 license = ""

src-tauri/Cargo.toml

@@ -7,6 +7,8 @@
   ],
   "permissions": [
     "core:default",
+    "core:window:allow-start-dragging",
+    "core:window:allow-set-title",
     "shell:allow-open",
     "dialog:allow-open",
     "dialog:allow-save"

src-tauri/capabilities/default.json

@@ -1,7 +1,7 @@
 {
   "$schema": "../node_modules/@tauri-apps/cli/config.schema.json",
   "productName": "mTarsier",
-  "version": "0.1.5",
+  "version": "0.1.9",
   "identifier": "com.mtarsier",
   "build": {
     "frontendDist": "../dist",
@@ -19,7 +19,9 @@
         "minWidth": 900,
         "minHeight": 600,
         "resizable": true,
-        "fullscreen": false
+        "fullscreen": false,
+        "titleBarStyle": "Overlay",
+        "acceptFirstMouse": true
       }
     ],
     "security": {

src-tauri/tauri.conf.json

@@ -1,4 +1,4 @@
-import { useEffect } from "react";
+import React, { useEffect } from "react";
 import { Outlet } from "react-router-dom";
 import { getCurrentWindow } from "@tauri-apps/api/window";
 import Sidebar from "../components/Sidebar";
@@ -10,6 +10,10 @@ function AppLayout() {
 
   const detectAll = useClientStore((s) => s.detectAll);
 
+  useEffect(() => {
+    getCurrentWindow().setTitle("");
+  }, []);
+
   useEffect(() => {
     let debounceTimer: ReturnType<typeof setTimeout> | null = null;
 
@@ -30,12 +34,24 @@ function AppLayout() {
   }, [detectAll]);
 
   return (
-    <div className="h-screen w-screen overflow-hidden p-2">
-      <div className="flex h-full w-full overflow-hidden rounded-xl border border-border bg-base">
-        <Sidebar />
-        <main className="relative flex-1 min-w-0 overflow-y-auto">
-          <Outlet />
-        </main>
+    <div className="h-screen w-screen overflow-hidden flex flex-col">
+      <div
+        data-tauri-drag-region
+        className="h-8 w-full flex-shrink-0 flex items-center justify-center"
+        style={{ WebkitAppRegion: "drag" } as React.CSSProperties}
+      >
+        <span
+          className="text-text-muted select-none pointer-events-none"
+          style={{ fontFamily: "-apple-system, BlinkMacSystemFont, sans-serif", fontSize: "13px", fontWeight: 800 }}
+        >mTarsier</span>
+      </div>
+      <div className="flex-1 px-2 pb-2 overflow-hidden">
+        <div className="flex h-full w-full overflow-hidden rounded-xl border border-border bg-base">
+          <Sidebar />
+          <main className="relative flex-1 min-w-0 overflow-y-auto">
+            <Outlet />
+          </main>
+        </div>
       </div>
     </div>
   );

src/layouts/AppLayout.tsx

@@ -78,37 +78,37 @@ export const themes: Record<ThemeId, ThemeDefinition> = {
   dark: {
     id: "dark",
     name: "Midnight",
-    description: "Pure dark theme with blue accent",
+    description: "Dark theme with blue accent",
     colors: {
-      base: "#09090b",
-      "base-light": "#111113",
-      "base-lighter": "#1a1a1e",
-      primary: "#6366f1",
-      "primary-dim": "#4f46e5",
-      cyan: "#22d3ee",
-      amber: "#f59e0b",
+      base: "#0d1117",
+      "base-light": "#161b22",
+      "base-lighter": "#21262d",
+      primary: "#60a5fa",
+      "primary-dim": "#3b82f6",
+      cyan: "#38bdf8",
+      amber: "#f5a623",
       purple: "#a78bfa",
-      surface: "#131316",
-      "surface-hover": "#1c1c21",
-      "surface-overlay": "#1a1a1e",
-      border: "#2e2e33",
-      "border-hover": "#4a4a52",
-      text: "#e4e4e7",
-      "text-muted": "#71717a",
+      surface: "#161b22",
+      "surface-hover": "#21262d",
+      "surface-overlay": "#2d333b",
+      border: "#30363d",
+      "border-hover": "#484f58",
+      text: "#e6edf3",
+      "text-muted": "#7d8590",
     },
     monaco: {
       base: "vs-dark",
-      background: "#131316",
-      foreground: "#e4e4e7",
-      lineHighlight: "#1c1c2122",
-      selection: "#6366f130",
-      cursor: "#6366f1",
-      lineNumber: "#71717a",
-      lineNumberActive: "#6366f1",
-      widgetBg: "#111113",
-      widgetBorder: "#27272a",
-      scrollbar: "#27272a66",
-      scrollbarHover: "#27272aaa",
+      background: "#161b22",
+      foreground: "#e6edf3",
+      lineHighlight: "#21262d44",
+      selection: "#60a5fa25",
+      cursor: "#60a5fa",
+      lineNumber: "#7d8590",
+      lineNumberActive: "#e6edf3",
+      widgetBg: "#0d1117",
+      widgetBorder: "#30363d",
+      scrollbar: "#30363d66",
+      scrollbarHover: "#30363daa",
     },
   },