arthur/xtablo-source
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions 5

Few UI improvements

Browse source
This commit is contained in:
Arthur Belleville 2025-10-28 14:40:46 +01:00
parent 0fd0253685
commit 7eea2ea340
No known key found for this signature in database
2 changed files with 9 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
apps/main/src/components/TabloSettingsSection.tsx
View file

@ -1,13 +1,14 @@
import { TabloUpdate, UserTablo } from "@xtablo/shared/types/tablos.types";
import { Button } from "@xtablo/ui/components/button";
import { useEffect, useRef, useState } from "react";
import { usePendingTabloInvitesByTablo } from "src/hooks/tablo_invites";
import { useInviteUser } from "../hooks/invite";
import { useTabloMembers } from "../hooks/tablos";
import { useUser } from "../providers/UserStoreProvider";
import { ClickOutside } from "./ClickOutside";
import { ImageColorPicker } from "./ImageColorPicker";
import { StatusPicker } from "./StatusPicker";
import { usePendingTabloInvitesByTablo } from "src/hooks/tablo_invites";
import { Input } from "@xtablo/ui/components/input";
type StatusType = "todo" | "in_progress" | "done";
@ -145,7 +146,7 @@ export const TabloSettingsSection = ({ tablo, isAdmin, onEdit }: TabloSettingsSe
<h3 className="text-lg font-semibold text-foreground mb-4">Nom du tablo</h3>
{isEditingName ? (
<ClickOutside onClickOutside={() => setIsEditingName(false)}>
<input
<Input
ref={nameInputRef}
type="text"
value={editData?.name}
@ -157,13 +158,12 @@ export const TabloSettingsSection = ({ tablo, isAdmin, onEdit }: TabloSettingsSe
setIsEditingName(false);
}
}}
className="w-full px-3 py-2 text-lg font-medium text-foreground bg-transparent border-b-2 border-primary focus:outline-none focus:border-primary"
placeholder="Nom du tablo"
/>
</ClickOutside>
) : (
<div
className="text-lg font-medium text-foreground cursor-text hover:text-primary transition-colors"
className="text-lg font-medium text-foreground cursor-text hover:text-primary hover:border-primary transition-colors border-2 border-dashed border-muted-foreground/30 rounded px-3 py-2"
onClick={() => setIsEditingName(true)}
>
{editData?.name}

8
apps/main/src/pages/tablo-details.tsx
View file

@ -3,7 +3,7 @@ import { TabloUpdate, UserTablo } from "@xtablo/shared/types/tablos.types";
import { Button } from "@xtablo/ui/components/button";
import { ArrowLeft, BookOpen, Calendar, FileText, MessageSquare, Settings } from "lucide-react";
import { useEffect, useState } from "react";
import { useNavigate, useParams } from "react-router-dom";
import { useNavigate, useParams, useSearchParams } from "react-router-dom";
import { LoadingSpinner } from "../components/LoadingSpinner";
import { TabloDiscussionSection } from "../components/TabloDiscussionSection";
import { TabloEventsSection } from "../components/TabloEventsSection";
@ -20,7 +20,9 @@ export const TabloDetailsPage = () => {
const { data: tablos, isLoading } = useTablosList();
const { mutateAsync: updateTablo } = useUpdateTablo();
const [activeSection, setActiveSection] = useState<TabSection>("files");
const [searchParams, setSearchParams] = useSearchParams();
const activeSection = (searchParams.get("section") as TabSection) || "files";
const [tablo, setTablo] = useState<UserTablo | null>(null);
useEffect(() => {
@ -161,7 +163,7 @@ export const TabloDetailsPage = () => {
{navigationItems.map((item) => (
<button
key={item.id}
onClick={() => setActiveSection(item.id)}
onClick={() => setSearchParams({ section: item.id })}
className={`w-full flex items-center space-x-3 px-4 py-3 rounded-lg transition-colors ${
activeSection === item.id
? "bg-primary text-primary-foreground"