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:
@@ -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 */}
|
||||
|
||||
Reference in New Issue
Block a user