davidl/tolaria
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: border between macOS title bar and sidebar content

Browse Source
This commit is contained in:
lucaronin
2026-02-22 12:31:51 +01:00
parent f3790eb95c 4d0840c6c6
commit ee4faa1874
2 changed files with 860 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

858
design/macos-border.pen Normal file
View File

@@ -0,0 +1,858 @@
{
"version": "2.8",
"children": [
{
"type": "frame",
"id": "mb001",
"x": 0,
"y": 0,
"name": "macOS Border — Before (no border)",
"theme": {
"Mode": "Light"
},
"clip": true,
"width": 400,
"height": 200,
"fill": "$--background",
"layout": "vertical",
"children": [
{
"type": "frame",
"id": "mb002",
"name": "macOS Title Bar (before)",
"width": "fill_container",
"height": 38,
"fill": "$--sidebar",
"gap": 12,
"padding": [
0,
12
],
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "mb003",
"name": "trafficLights",
"gap": 8,
"alignItems": "center",
"children": [
{
"type": "ellipse",
"id": "mb004",
"fill": "#FF5F57",
"width": 12,
"height": 12
},
{
"type": "ellipse",
"id": "mb005",
"fill": "#FEBC2E",
"width": 12,
"height": 12
},
{
"type": "ellipse",
"id": "mb006",
"fill": "#28C840",
"width": 12,
"height": 12
}
]
}
]
},
{
"type": "frame",
"id": "mb007",
"name": "Sidebar Content (before)",
"width": "fill_container",
"height": "fill_container",
"fill": "$--sidebar",
"padding": [
8,
12
],
"layout": "vertical",
"gap": 4,
"children": [
{
"type": "text",
"id": "mb008",
"value": "All Notes",
"fontSize": 14,
"fill": "$--foreground"
},
{
"type": "text",
"id": "mb009",
"value": "Favorites",
"fontSize": 14,
"fill": "$--foreground"
},
{
"type": "text",
"id": "mb010",
"value": "Archive",
"fontSize": 14,
"fill": "$--muted-foreground"
}
]
}
]
},
{
"type": "frame",
"id": "mb011",
"x": 440,
"y": 0,
"name": "macOS Border — After (with border)",
"theme": {
"Mode": "Light"
},
"clip": true,
"width": 400,
"height": 200,
"fill": "$--background",
"layout": "vertical",
"children": [
{
"type": "frame",
"id": "mb012",
"name": "macOS Title Bar (after)",
"width": "fill_container",
"height": 38,
"fill": "$--sidebar",
"stroke": {
"align": "inside",
"thickness": {
"bottom": 1
},
"fill": "$--border"
},
"gap": 12,
"padding": [
0,
12
],
"alignItems": "center",
"children": [
{
"type": "frame",
"id": "mb013",
"name": "trafficLights",
"gap": 8,
"alignItems": "center",
"children": [
{
"type": "ellipse",
"id": "mb014",
"fill": "#FF5F57",
"width": 12,
"height": 12
},
{
"type": "ellipse",
"id": "mb015",
"fill": "#FEBC2E",
"width": 12,
"height": 12
},
{
"type": "ellipse",
"id": "mb016",
"fill": "#28C840",
"width": 12,
"height": 12
}
]
}
]
},
{
"type": "frame",
"id": "mb017",
"name": "Sidebar Content (after)",
"width": "fill_container",
"height": "fill_container",
"fill": "$--sidebar",
"padding": [
8,
12
],
"layout": "vertical",
"gap": 4,
"children": [
{
"type": "text",
"id": "mb018",
"value": "All Notes",
"fontSize": 14,
"fill": "$--foreground"
},
{
"type": "text",
"id": "mb019",
"value": "Favorites",
"fontSize": 14,
"fill": "$--foreground"
},
{
"type": "text",
"id": "mb020",
"value": "Archive",
"fontSize": 14,
"fill": "$--muted-foreground"
}
]
}
]
}
],
"themes": {
"Mode": [
"Dark"
]
},
"variables": {
"--accent": {
"type": "color",
"value": [
{
"value": "#EBEBEA"
},
{
"value": "#252545",
"theme": {
"Mode": "Dark"
}
}
]
},
"--accent-blue": {
"type": "color",
"value": [
{
"value": "#2383E2"
},
{
"value": "#4a9eff",
"theme": {
"Mode": "Dark"
}
},
{
"value": "#155DFF"
},
{
"value": "#155DFF",
"theme": {
"Mode": "Dark"
}
}
]
},
"--accent-foreground": {
"type": "color",
"value": [
{
"value": "#37352F"
},
{
"value": "#ffffff",
"theme": {
"Mode": "Dark"
}
}
]
},
"--accent-green": {
"type": "color",
"value": [
{
"value": "#0F7B6C"
},
{
"value": "#4caf50",
"theme": {
"Mode": "Dark"
}
},
{
"value": "#00B38B"
},
{
"value": "#00B38B",
"theme": {
"Mode": "Dark"
}
}
]
},
"--accent-orange": {
"type": "color",
"value": [
{
"value": "#D9730D"
},
{
"value": "#ff9800",
"theme": {
"Mode": "Dark"
}
}
]
},
"--accent-purple": {
"type": "color",
"value": [
{
"value": "#9065B0"
},
{
"value": "#9c72ff",
"theme": {
"Mode": "Dark"
}
},
{
"value": "#A932FF"
},
{
"value": "#A932FF",
"theme": {
"Mode": "Dark"
}
}
]
},
"--accent-red": {
"type": "color",
"value": [
{
"value": "#E03E3E"
},
{
"value": "#f44336",
"theme": {
"Mode": "Dark"
}
}
]
},
"--background": {
"type": "color",
"value": [
{
"value": "#FFFFFF"
},
{
"value": "#0f0f1a",
"theme": {
"Mode": "Dark"
}
}
]
},
"--black": {
"type": "color",
"value": "#000000"
},
"--border": {
"type": "color",
"value": [
{
"value": "#E9E9E7"
},
{
"value": "#2a2a4a",
"theme": {
"Mode": "Dark"
}
}
]
},
"--card": {
"type": "color",
"value": [
{
"value": "#FFFFFF"
},
{
"value": "#16162a",
"theme": {
"Mode": "Dark"
}
}
]
},
"--card-foreground": {
"type": "color",
"value": [
{
"value": "#37352F"
},
{
"value": "#e0e0e0",
"theme": {
"Mode": "Dark"
}
}
]
},
"--destructive": {
"type": "color",
"value": [
{
"value": "#E03E3E"
},
{
"value": "#f44336",
"theme": {
"Mode": "Dark"
}
}
]
},
"--destructive-foreground": {
"type": "color",
"value": [
{
"value": "#FFFFFF"
},
{
"value": "#ffffff",
"theme": {
"Mode": "Dark"
}
}
]
},
"--font-primary": {
"type": "string",
"value": [
{
"value": "Inter"
},
{
"value": "-apple-system, BlinkMacSystemFont, Inter, sans-serif"
},
{
"value": "Inter"
}
]
},
"--font-system": {
"type": "string",
"value": "-apple-system, BlinkMacSystemFont, sans-serif"
},
"--foreground": {
"type": "color",
"value": [
{
"value": "#37352F"
},
{
"value": "#e0e0e0",
"theme": {
"Mode": "Dark"
}
}
]
},
"--input": {
"type": "color",
"value": [
{
"value": "#E9E9E7"
},
{
"value": "#2a2a4a",
"theme": {
"Mode": "Dark"
}
}
]
},
"--muted": {
"type": "color",
"value": [
{
"value": "#F0F0EF"
},
{
"value": "#1e1e3a",
"theme": {
"Mode": "Dark"
}
}
]
},
"--muted-foreground": {
"type": "color",
"value": [
{
"value": "#787774"
},
{
"value": "#888888",
"theme": {
"Mode": "Dark"
}
}
]
},
"--popover": {
"type": "color",
"value": [
{
"value": "#FFFFFF"
},
{
"value": "#1e1e3a",
"theme": {
"Mode": "Dark"
}
}
]
},
"--popover-foreground": {
"type": "color",
"value": [
{
"value": "#37352F"
},
{
"value": "#e0e0e0",
"theme": {
"Mode": "Dark"
}
}
]
},
"--primary": {
"type": "color",
"value": [
{
"value": "#2383E2"
},
{
"value": "#4a9eff",
"theme": {
"Mode": "Dark"
}
},
{
"value": "#155DFF"
},
{
"value": "#155DFF",
"theme": {
"Mode": "Dark"
}
}
]
},
"--primary-foreground": {
"type": "color",
"value": [
{
"value": "#FFFFFF"
},
{
"value": "#ffffff",
"theme": {
"Mode": "Dark"
}
}
]
},
"--radius-lg": {
"type": "number",
"value": 8
},
"--radius-md": {
"type": "number",
"value": 6
},
"--radius-sm": {
"type": "number",
"value": 4
},
"--ring": {
"type": "color",
"value": [
{
"value": "#2383E2"
},
{
"value": "#4a9eff",
"theme": {
"Mode": "Dark"
}
},
{
"value": "#155DFF"
},
{
"value": "#155DFF",
"theme": {
"Mode": "Dark"
}
}
]
},
"--secondary": {
"type": "color",
"value": [
{
"value": "#EBEBEA"
},
{
"value": "#2a2a4a",
"theme": {
"Mode": "Dark"
}
}
]
},
"--secondary-foreground": {
"type": "color",
"value": [
{
"value": "#37352F"
},
{
"value": "#e0e0e0",
"theme": {
"Mode": "Dark"
}
}
]
},
"--sidebar": {
"type": "color",
"value": [
{
"value": "#F7F6F3"
},
{
"value": "#1a1a2e",
"theme": {
"Mode": "Dark"
}
}
]
},
"--sidebar-accent": {
"type": "color",
"value": [
{
"value": "#EBEBEA"
},
{
"value": "#252545",
"theme": {
"Mode": "Dark"
}
}
]
},
"--sidebar-accent-foreground": {
"type": "color",
"value": [
{
"value": "#37352F"
},
{
"value": "#ffffff",
"theme": {
"Mode": "Dark"
}
}
]
},
"--sidebar-border": {
"type": "color",
"value": [
{
"value": "#E9E9E7"
},
{
"value": "#2a2a4a",
"theme": {
"Mode": "Dark"
}
}
]
},
"--sidebar-foreground": {
"type": "color",
"value": [
{
"value": "#37352F"
},
{
"value": "#e0e0e0",
"theme": {
"Mode": "Dark"
}
}
]
},
"--sidebar-primary": {
"type": "color",
"value": [
{
"value": "#2383E2"
},
{
"value": "#4a9eff",
"theme": {
"Mode": "Dark"
}
},
{
"value": "#155DFF"
},
{
"value": "#155DFF",
"theme": {
"Mode": "Dark"
}
}
]
},
"--sidebar-primary-foreground": {
"type": "color",
"value": [
{
"value": "#FFFFFF"
},
{
"value": "#ffffff",
"theme": {
"Mode": "Dark"
}
}
]
},
"--sidebar-ring": {
"type": "color",
"value": [
{
"value": "#2383E2"
},
{
"value": "#4a9eff",
"theme": {
"Mode": "Dark"
}
},
{
"value": "#155DFF"
},
{
"value": "#155DFF",
"theme": {
"Mode": "Dark"
}
}
]
},
"--white": {
"type": "color",
"value": "#ffffff"
},
"--accent-yellow": {
"type": "color",
"value": [
{
"value": "#F0B100"
},
{
"value": "#F0B100",
"theme": {
"Mode": "Dark"
}
}
]
},
"--accent-blue-light": {
"type": "color",
"value": [
{
"value": "#155DFF14"
},
{
"value": "#155DFF20",
"theme": {
"Mode": "Dark"
}
}
]
},
"--accent-green-light": {
"type": "color",
"value": [
{
"value": "#00B38B14"
},
{
"value": "#00B38B20",
"theme": {
"Mode": "Dark"
}
}
]
},
"--accent-purple-light": {
"type": "color",
"value": [
{
"value": "#A932FF14"
},
{
"value": "#A932FF20",
"theme": {
"Mode": "Dark"
}
}
]
},
"--accent-red-light": {
"type": "color",
"value": [
{
"value": "#E03E3E14"
},
{
"value": "#f4433620",
"theme": {
"Mode": "Dark"
}
}
]
},
"--accent-yellow-light": {
"type": "color",
"value": [
{
"value": "#F0B10014"
},
{
"value": "#F0B10020",
"theme": {
"Mode": "Dark"
}
}
]
}
},
"fonts": [
{
"name": "GT Pressura Trial",
"url": "GT-Pressura-Regular-Trial.otf"
}
]
}

3
src/components/Sidebar.tsx
View File

@@ -267,7 +267,8 @@ export const Sidebar = memo(function Sidebar({
}
return (
<aside className="flex h-full flex-col overflow-hidden border-r border-[var(--sidebar-border)] bg-sidebar text-sidebar-foreground" style={{ paddingTop: 38 } as React.CSSProperties}>
<aside className="flex h-full flex-col overflow-hidden border-r border-[var(--sidebar-border)] bg-sidebar text-sidebar-foreground">
<div className="shrink-0 border-b border-border" style={{ height: 38, WebkitAppRegion: 'drag' } as React.CSSProperties} data-tauri-drag-region />
<nav className="flex-1 overflow-y-auto">
{/* Top nav */}
<div className="border-b border-border" style={{ padding: '4px 6px' }}>