lashman/openpylon
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 3 Wiki Activity

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

Browse Source 
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
Download Patch File Download Diff File Expand all files Collapse all files

53
src/components/card-detail/LabelPicker.tsx
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 */}

46
src/components/card-detail/MarkdownEditor.tsx
View File

@@ -1,9 +1,14 @@
import { useState, useRef, useEffect, useCallback } from "react";
import ReactMarkdown from "react-markdown";
import remarkGfm from "remark-gfm";
import { OverlayScrollbarsComponent } from "overlayscrollbars-react";
import { Button } from "@/components/ui/button";
import { useBoardStore } from "@/stores/board-store";
const OS_OPTIONS = {
scrollbars: { theme: "os-theme-pylon" as const, autoHide: "scroll" as const, autoHideDelay: 600, clickScroll: true },
};
interface MarkdownEditorProps {
cardId: string;
value: string;
@@ -21,10 +26,13 @@ export function MarkdownEditor({ cardId, value }: MarkdownEditorProps) {
setDraft(value);
}, [value]);
// Auto-focus textarea when switching to edit mode
// Auto-focus and auto-size textarea when switching to edit mode
useEffect(() => {
if (mode === "edit" && textareaRef.current) {
textareaRef.current.focus();
const el = textareaRef.current;
el.style.height = "auto";
el.style.height = el.scrollHeight + "px";
el.focus();
}
}, [mode]);
@@ -41,6 +49,10 @@ export function MarkdownEditor({ cardId, value }: MarkdownEditorProps) {
const text = e.target.value;
setDraft(text);
// Auto-size textarea to fit content (parent OverlayScrollbars handles overflow)
e.target.style.height = "auto";
e.target.style.height = e.target.scrollHeight + "px";
// Debounced auto-save
if (debounceRef.current) clearTimeout(debounceRef.current);
debounceRef.current = setTimeout(() => {
@@ -90,17 +102,25 @@ export function MarkdownEditor({ cardId, value }: MarkdownEditorProps) {
{/* Editor / Preview */}
{mode === "edit" ? (
<textarea
ref={textareaRef}
value={draft}
onChange={handleChange}
onBlur={handleBlur}
placeholder="Add a description... (Markdown supported)"
className="min-h-[100px] max-h-[160px] w-full resize-y rounded-md border border-pylon-text-secondary/20 bg-pylon-surface px-3 py-2 text-sm text-pylon-text outline-none placeholder:text-pylon-text-secondary/60 focus:border-pylon-accent focus:ring-1 focus:ring-pylon-accent"
/>
<OverlayScrollbarsComponent
className="max-h-[160px] rounded-md border border-pylon-text-secondary/20 bg-pylon-surface focus-within:border-pylon-accent focus-within:ring-1 focus-within:ring-pylon-accent"
options={{ ...OS_OPTIONS, overflow: { x: "hidden" as const } }}
defer
>
<textarea
ref={textareaRef}
value={draft}
onChange={handleChange}
onBlur={handleBlur}
placeholder="Add a description... (Markdown supported)"
className="min-h-[100px] w-full resize-none overflow-hidden bg-transparent px-3 py-2 text-sm text-pylon-text outline-none placeholder:text-pylon-text-secondary/60"
/>
</OverlayScrollbarsComponent>
) : (
<div
className="min-h-[100px] max-h-[160px] overflow-y-auto cursor-pointer rounded-md border border-transparent px-1 py-1 transition-colors hover:border-pylon-text-secondary/20"
<OverlayScrollbarsComponent
className="min-h-[100px] max-h-[160px] cursor-pointer rounded-md border border-transparent px-1 py-1 transition-colors hover:border-pylon-text-secondary/20"
options={{ ...OS_OPTIONS, overflow: { x: "hidden" as const } }}
defer
onClick={() => setMode("edit")}
>
{draft ? (
@@ -114,7 +134,7 @@ export function MarkdownEditor({ cardId, value }: MarkdownEditorProps) {
Click to add a description...
</p>
)}
</div>
</OverlayScrollbarsComponent>
)}
</div>
);