admin/task-team
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

PM2 cluster deploy + Redis caching + Nginx gzip + UI polish

Browse Source 
- PM2 v6: 2x API cluster + 1x web, zero-downtime reload
- Redis cache: 30s TTL on GET /tasks, X-Cache header
- Nginx gzip compression
- Mobile touch targets 44px
- Czech diacritics throughout UI
- TaskModal slide-up animation
- StatusBadge color dots
- GroupSelector emoji icons

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Claude CLI Agent
2026-03-29 11:20:58 +00:00
parent 4a6b5e5498
commit d74c89255e
13 changed files with 842 additions and 212 deletions
Download Patch File Download Diff File Expand all files Collapse all files

39
apps/tasks/components/GroupSelector.tsx
View File

@@ -1,5 +1,6 @@
"use client";
import { useRef, useEffect } from "react";
import { Group } from "@/lib/api";
interface GroupSelectorProps {
@@ -13,29 +14,49 @@ export default function GroupSelector({
selected,
onSelect,
}: GroupSelectorProps) {
const scrollRef = useRef<HTMLDivElement>(null);
const activeRef = useRef<HTMLButtonElement>(null);
// Scroll active button into view
useEffect(() => {
if (activeRef.current && scrollRef.current) {
const container = scrollRef.current;
const btn = activeRef.current;
const containerRect = container.getBoundingClientRect();
const btnRect = btn.getBoundingClientRect();
if (btnRect.left < containerRect.left || btnRect.right > containerRect.right) {
btn.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "center" });
}
}
}, [selected]);
return (
<div
className="flex gap-2 overflow-x-auto scrollbar-hide px-4 py-3"
ref={scrollRef}
className="flex gap-2 overflow-x-auto scrollbar-hide snap-x snap-mandatory px-4 py-3"
style={{ WebkitOverflowScrolling: "touch" } as React.CSSProperties}
>
<button
ref={selected === null ? activeRef : undefined}
onClick={() => onSelect(null)}
className={`flex-shrink-0 px-4 py-2 rounded-full text-sm font-medium transition-all min-h-[36px] whitespace-nowrap ${
className={`flex-shrink-0 px-4 py-2.5 rounded-full text-sm font-medium transition-all whitespace-nowrap snap-center ${
selected === null
? "bg-gray-800 text-white dark:bg-white dark:text-gray-900 shadow-md"
: "bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700"
? "bg-gray-800 text-white dark:bg-white dark:text-gray-900 shadow-md scale-105 min-h-[44px]"
: "bg-gray-100 text-gray-600 dark:bg-gray-800 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-700 min-h-[44px]"
}`}
>
V\u0161e
Vse
</button>
{groups.map((g) => (
<button
key={g.id}
ref={selected === g.id ? activeRef : undefined}
onClick={() => onSelect(g.id)}
className={`flex-shrink-0 px-4 py-2 rounded-full text-sm font-medium transition-all min-h-[36px] flex items-center gap-1.5 whitespace-nowrap ${
className={`flex-shrink-0 px-4 py-2.5 rounded-full text-sm font-medium transition-all flex items-center gap-1.5 whitespace-nowrap snap-center ${
selected === g.id
? "text-white shadow-md"
: "hover:opacity-80"
? "text-white shadow-md scale-105 min-h-[44px]"
: "hover:opacity-80 min-h-[44px]"
}`}
style={{
backgroundColor: selected === g.id ? g.color : undefined,
@@ -43,7 +64,7 @@ export default function GroupSelector({
color: selected !== g.id ? g.color : undefined,
}}
>
{g.icon && <span className="text-base">{g.icon}</span>}
{g.icon && <span className="text-lg">{g.icon}</span>}
<span>{g.name}</span>
</button>
))}