feat: typography overhaul, custom scrollbars, import/export, settings UI

Includes changes from prior sessions: Epilogue + Space Mono fonts,
OverlayScrollbars integration, markdown editor fixes, settings dialog,
import/export buttons, and various UI refinements.
This commit is contained in:
Your Name
2026-02-16 14:56:36 +02:00
parent 6bbf4c973b
commit bb1b6312ba
9 changed files with 343 additions and 205 deletions

View File

@@ -1,5 +1,6 @@
import { useState } from "react";
import { Plus, Check } from "lucide-react";
import { OverlayScrollbarsComponent } from "overlayscrollbars-react";
import { Button } from "@/components/ui/button";
import {
Popover,
@@ -81,29 +82,35 @@ export function LabelPicker({
{/* Existing labels */}
{boardLabels.length > 0 && (
<div className="flex max-h-40 flex-col gap-1 overflow-y-auto">
{boardLabels.map((label) => {
const isSelected = cardLabelIds.includes(label.id);
return (
<button
key={label.id}
onClick={() => toggleCardLabel(cardId, label.id)}
className="flex items-center gap-2 rounded px-2 py-1 text-left text-sm transition-colors hover:bg-pylon-column"
>
<span
className="size-3 shrink-0 rounded-full"
style={{ backgroundColor: label.color }}
/>
<span className="flex-1 truncate text-pylon-text">
{label.name}
</span>
{isSelected && (
<Check className="size-3.5 shrink-0 text-pylon-accent" />
)}
</button>
);
})}
</div>
<OverlayScrollbarsComponent
className="max-h-40"
options={{ scrollbars: { theme: "os-theme-pylon", autoHide: "scroll", autoHideDelay: 600, clickScroll: true }, overflow: { x: "hidden" } }}
defer
>
<div className="flex flex-col gap-1">
{boardLabels.map((label) => {
const isSelected = cardLabelIds.includes(label.id);
return (
<button
key={label.id}
onClick={() => toggleCardLabel(cardId, label.id)}
className="flex items-center gap-2 rounded px-2 py-1 text-left text-sm transition-colors hover:bg-pylon-column"
>
<span
className="size-3 shrink-0 rounded-full"
style={{ backgroundColor: label.color }}
/>
<span className="flex-1 truncate text-pylon-text">
{label.name}
</span>
{isSelected && (
<Check className="size-3.5 shrink-0 text-pylon-accent" />
)}
</button>
);
})}
</div>
</OverlayScrollbarsComponent>
)}
{/* Create new label */}