Explorateur : dossiers Favoris et Personnel, cartouche oidc/local
- Racine : entrées « Favoris » (étoile) et « Personnel » en tête, ni sélectionnables ni déplaçables ; fil d'Ariane et sélecteur « Déplacer vers… » affichent Personnel/Favoris à la place de .perso/.favoris. - Favoris : glisser un schéma sur Favoris (ou l'étoile) crée un lien, sans déplacer l'original ; ouvrir un favori ouvre l'original sans quitter Favoris ; Supprimer y retire seulement le lien ; emplacement de l'original affiché ; favori cassé barré. Plus de favoris sur les dossiers. Le filtre « Favoris » de la ligne de tags est remplacé par le dossier. - Barre du haut : cartouche encadré « OIDC » + e-mail, ou « LOCAL » + nom du compte, avant le bouton de déconnexion. Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_0174sFqehj4uGqJHQZvWy1gn
This commit is contained in:
claude BotandClaude Opus 5.5 committed
1 parent
824871bd24
commit
ea06fdaddf
7 files changed
+259
-72
No files matched your search
@@ -14,7 +14,7 @@ import type {
|
||||
LibraryItems,
|
||||
} from "@excalidraw/excalidraw/types";
|
||||
import type { OrderedExcalidrawElement } from "@excalidraw/excalidraw/element/types";
|
||||
import { api, ApiError, basename, stripExt, type Settings } from "./api";
|
||||
import { api, ApiError, basename, displayPath, stripExt, type Settings } from "./api";
|
||||
import { Explorer } from "./Explorer";
|
||||
import { CloseIcon, HistoryIcon, MenuIcon, MoonIcon, PinIcon, SaveIcon, SettingsIcon, ShareIcon, SunIcon, UpdateIcon } from "./icons";
|
||||
import { ShareDialog } from "./ShareDialog";
|
||||
@@ -539,7 +539,7 @@ export default function App() {
|
||||
<span className="brand-title">{appTitle}</span>
|
||||
</button>
|
||||
{scene ? (
|
||||
<span className="title" title={scene.path}>
|
||||
<span className="title" title={displayPath(scene.path)}>
|
||||
<span className="sep muted" aria-hidden>
|
||||
/
|
||||
</span>
|
||||
|
||||
+136
-55
@@ -5,8 +5,11 @@ import {
|
||||
ApiError,
|
||||
basename,
|
||||
dirname,
|
||||
displayPath,
|
||||
EXT,
|
||||
inFavoris,
|
||||
join,
|
||||
label,
|
||||
stripExt,
|
||||
withExt,
|
||||
type Entry,
|
||||
@@ -33,6 +36,7 @@ import {
|
||||
TrashIcon,
|
||||
UpIcon,
|
||||
UploadIcon,
|
||||
UserIcon,
|
||||
} from "./icons";
|
||||
import { collectDrop, collectFiles, hasFiles, type Collected } from "./importer";
|
||||
import { MoveDialog } from "./MoveDialog";
|
||||
@@ -107,14 +111,16 @@ export function Explorer({ current, refreshKey, onOpen, onMoved, onDeleted, onHi
|
||||
const [fileDrag, setFileDrag] = useState(false); // fichiers du système survolant l'explorateur
|
||||
const [tags, setTags] = useState<TagCount[]>([]);
|
||||
const [tagFilter, setTagFilter] = useState<string | null>(null);
|
||||
const [favOnly, setFavOnly] = useState(false);
|
||||
const [tagging, setTagging] = useState<Entry[] | null>(null); // éléments du dialogue « Tags »
|
||||
const fileInput = useRef<HTMLInputElement>(null);
|
||||
const dirInput = useRef<HTMLInputElement>(null);
|
||||
const stay = useRef<string | null>(null); // schéma ouvert depuis Favoris : on reste dans Favoris
|
||||
|
||||
const list = results ?? entries;
|
||||
const filter = { tag: tagFilter, fav: favOnly };
|
||||
const filtering = query.trim() !== "" || tagFilter !== null || favOnly;
|
||||
const filter = { tag: tagFilter };
|
||||
const filtering = query.trim() !== "" || tagFilter !== null;
|
||||
// Dossier Favoris : des liens vers les originaux, ni création ni déplacement.
|
||||
const favView = !results && inFavoris(dir);
|
||||
|
||||
const guard = useCallback(async (fn: () => Promise<unknown>) => {
|
||||
setError(null);
|
||||
@@ -156,7 +162,8 @@ export function Explorer({ current, refreshKey, onOpen, onMoved, onDeleted, onHi
|
||||
|
||||
// Suit le dossier du schéma ouvert (lien direct, création, déplacement).
|
||||
useEffect(() => {
|
||||
if (current) setDir(dirname(current));
|
||||
if (current && current !== stay.current) setDir(dirname(current));
|
||||
stay.current = null;
|
||||
}, [current]);
|
||||
|
||||
// Recherche (texte, tag, favoris) avec anti-rebond.
|
||||
@@ -168,7 +175,7 @@ export function Explorer({ current, refreshKey, onOpen, onMoved, onDeleted, onHi
|
||||
const t = setTimeout(() => guard(async () => setResults(await api.search(query, filter))), 250);
|
||||
return () => clearTimeout(t);
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, [query, tagFilter, favOnly, guard, refreshKey]);
|
||||
}, [query, tagFilter, guard, refreshKey]);
|
||||
|
||||
/** Recharge le dossier et, si une recherche est affichée, ses résultats. */
|
||||
const reload = async () => {
|
||||
@@ -201,7 +208,7 @@ export function Explorer({ current, refreshKey, onOpen, onMoved, onDeleted, onHi
|
||||
};
|
||||
|
||||
const selectRange = (path: string) => {
|
||||
const paths = list.map((e) => e.path);
|
||||
const paths = selectable.map((e) => e.path);
|
||||
const a = anchor ? paths.indexOf(anchor) : -1;
|
||||
const b = paths.indexOf(path);
|
||||
if (a < 0 || b < 0) return toggle(path);
|
||||
@@ -209,16 +216,23 @@ export function Explorer({ current, refreshKey, onOpen, onMoved, onDeleted, onHi
|
||||
setSelected((s) => new Set([...s, ...paths.slice(lo, hi + 1)]));
|
||||
};
|
||||
|
||||
const selectAll = () => setSelected(new Set(list.map((e) => e.path)));
|
||||
const selectable = list.filter((e) => !e.special);
|
||||
const selectAll = () => setSelected(new Set(selectable.map((e) => e.path)));
|
||||
|
||||
const onItemClick = (ev: MouseEvent, e: Entry) => {
|
||||
if (ev.shiftKey) return selectRange(e.path);
|
||||
// Ctrl/Cmd+clic, ou clic quand une sélection est en cours (mode sélection tactile).
|
||||
if (ev.ctrlKey || ev.metaKey || selected.size > 0) return toggle(e.path);
|
||||
if (!e.special) {
|
||||
if (ev.shiftKey) return selectRange(e.path);
|
||||
// Ctrl/Cmd+clic, ou clic quand une sélection est en cours (mode sélection tactile).
|
||||
if (ev.ctrlKey || ev.metaKey || selected.size > 0) return toggle(e.path);
|
||||
}
|
||||
if (e.broken) return;
|
||||
if (e.isDir) {
|
||||
setQuery("");
|
||||
setDir(e.path);
|
||||
} else onOpen(e.path);
|
||||
} else {
|
||||
if (favView && e.path !== current) stay.current = e.path;
|
||||
onOpen(e.path);
|
||||
}
|
||||
};
|
||||
|
||||
const onKeyDown = (ev: KeyboardEvent) => {
|
||||
@@ -288,15 +302,24 @@ export function Explorer({ current, refreshKey, onOpen, onMoved, onDeleted, onHi
|
||||
/** Favoris : la sélection devient favorite, sauf si elle l'est déjà entièrement. */
|
||||
const toggleFavorite = (items: Entry[]) =>
|
||||
guard(async () => {
|
||||
const fav = !items.every((e) => e.favorite);
|
||||
const files = items.filter((e) => !e.isDir);
|
||||
if (files.length === 0) return;
|
||||
const fav = favView ? false : !files.every((e) => e.favorite);
|
||||
await api.setFavorite(
|
||||
items.map((e) => e.path),
|
||||
files.map((e) => e.path),
|
||||
fav,
|
||||
);
|
||||
setMenuFor(null);
|
||||
if (favView) clearSelection();
|
||||
await reload();
|
||||
});
|
||||
|
||||
/** Dépôt sur Favoris : les schémas déposés y sont ajoutés (lien, pas déplacement). */
|
||||
const addFavorites = (paths: string[]) =>
|
||||
toggleFavorite(
|
||||
paths.map((p) => list.find((e) => e.path === p) ?? { name: basename(p), path: p, isDir: false, size: 0, modTime: "" }),
|
||||
);
|
||||
|
||||
const duplicate = (e: Entry) =>
|
||||
guard(async () => {
|
||||
const base = join(dirname(e.path), stripExt(e.name));
|
||||
@@ -314,6 +337,12 @@ export function Explorer({ current, refreshKey, onOpen, onMoved, onDeleted, onHi
|
||||
|
||||
const removeMany = (paths: string[]) =>
|
||||
guard(async () => {
|
||||
// Dans Favoris, « Supprimer » retire le lien ; l'original reste en place.
|
||||
if (favView) {
|
||||
await api.setFavorite(paths, false);
|
||||
clearSelection();
|
||||
return reload();
|
||||
}
|
||||
const one = list.find((e) => e.path === paths[0]);
|
||||
const what =
|
||||
paths.length > 1
|
||||
@@ -383,7 +412,7 @@ export function Explorer({ current, refreshKey, onOpen, onMoved, onDeleted, onHi
|
||||
// Glisser un élément sélectionné emporte toute la sélection.
|
||||
const paths = selected.has(e.path) ? [...selected] : [e.path];
|
||||
ev.dataTransfer.setData(DND_TYPE, JSON.stringify(paths));
|
||||
ev.dataTransfer.effectAllowed = "move";
|
||||
ev.dataTransfer.effectAllowed = "linkMove";
|
||||
if (paths.length > 1) {
|
||||
const ghost = document.createElement("div");
|
||||
ghost.className = "drag-ghost";
|
||||
@@ -400,8 +429,9 @@ export function Explorer({ current, refreshKey, onOpen, onMoved, onDeleted, onHi
|
||||
onDragOver: (ev: DragEvent) => {
|
||||
const external = hasFiles(ev.dataTransfer);
|
||||
if (!external && !ev.dataTransfer.types.includes(DND_TYPE)) return;
|
||||
if (external && inFavoris(targetDir)) return; // pas d'import dans Favoris
|
||||
ev.preventDefault();
|
||||
ev.dataTransfer.dropEffect = external ? "copy" : "move";
|
||||
ev.dataTransfer.dropEffect = external ? "copy" : inFavoris(targetDir) ? "link" : "move";
|
||||
setDropTarget(targetDir);
|
||||
},
|
||||
onDragLeave: () => setDropTarget(null),
|
||||
@@ -417,19 +447,21 @@ export function Explorer({ current, refreshKey, onOpen, onMoved, onDeleted, onHi
|
||||
} catch {
|
||||
return;
|
||||
}
|
||||
moveMany(paths, targetDir);
|
||||
if (inFavoris(targetDir)) addFavorites(paths);
|
||||
else moveMany(paths, targetDir);
|
||||
},
|
||||
});
|
||||
|
||||
// --- Rendu ---------------------------------------------------------------
|
||||
|
||||
const crumbs = dir ? dir.split("/") : [];
|
||||
const importDir = results ? "" : dir; // pendant une recherche, le dossier courant n'est pas affiché
|
||||
const importDir = results || favView ? "" : dir; // pendant une recherche, le dossier courant n'est pas affiché
|
||||
const where = (p: string) => displayPath(dirname(p)) || "Racine";
|
||||
|
||||
// Dépôt n'importe où dans l'explorateur : import dans le dossier courant.
|
||||
const zoneProps = {
|
||||
onDragOver: (ev: DragEvent) => {
|
||||
if (!hasFiles(ev.dataTransfer)) return;
|
||||
if (favView || !hasFiles(ev.dataTransfer)) return;
|
||||
ev.preventDefault();
|
||||
ev.dataTransfer.dropEffect = "copy";
|
||||
setFileDrag(true);
|
||||
@@ -438,22 +470,55 @@ export function Explorer({ current, refreshKey, onOpen, onMoved, onDeleted, onHi
|
||||
if (!ev.currentTarget.contains(ev.relatedTarget as Node | null)) setFileDrag(false);
|
||||
},
|
||||
onDrop: (ev: DragEvent) => {
|
||||
if (!hasFiles(ev.dataTransfer)) return;
|
||||
if (favView || !hasFiles(ev.dataTransfer)) return;
|
||||
ev.preventDefault();
|
||||
setFileDrag(false);
|
||||
importTree(collectDrop(ev.dataTransfer), importDir);
|
||||
},
|
||||
};
|
||||
|
||||
const big = view === "grid" ? 40 : 20;
|
||||
const icon = (e: Entry) =>
|
||||
e.isDir ? (
|
||||
e.special ? (
|
||||
<span className={`icon special ${e.special}`} aria-hidden>
|
||||
{e.special === "favoris" ? <StarFilledIcon size={big} /> : <UserIcon size={big} />}
|
||||
</span>
|
||||
) : e.broken ? (
|
||||
<span className="icon folder" aria-hidden>
|
||||
<FolderIcon size={view === "grid" ? 40 : 20} />
|
||||
<StarIcon size={big} />
|
||||
</span>
|
||||
) : e.isDir ? (
|
||||
<span className="icon folder" aria-hidden>
|
||||
<FolderIcon size={big} />
|
||||
</span>
|
||||
) : (
|
||||
<Thumb path={e.path} version={e.modTime} />
|
||||
);
|
||||
|
||||
// Dans Favoris : actions sur l'original, retrait du lien à la place de la suppression.
|
||||
const favActions = (e: Entry) => (
|
||||
<div className="actions">
|
||||
{!e.broken && (
|
||||
<>
|
||||
<button onClick={() => setDir(dirname(e.path))}>Ouvrir l'emplacement</button>
|
||||
<button onClick={() => onHistory(e.path)}>Historique…</button>
|
||||
<button onClick={() => onShare(e.path)}>Partager…</button>
|
||||
<button onClick={() => setTagging([e])}>
|
||||
<TagIcon />
|
||||
Tags…
|
||||
</button>
|
||||
<a href={api.downloadUrl(e.path)} download={e.name}>
|
||||
Télécharger
|
||||
</a>
|
||||
</>
|
||||
)}
|
||||
<button className="danger" onClick={() => removeMany([e.path])}>
|
||||
<StarIcon />
|
||||
Retirer des favoris
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
|
||||
const actions = (e: Entry) => (
|
||||
<div className="actions">
|
||||
<button onClick={() => rename(e)}>Renommer</button>
|
||||
@@ -461,10 +526,12 @@ export function Explorer({ current, refreshKey, onOpen, onMoved, onDeleted, onHi
|
||||
{!e.isDir && <button onClick={() => duplicate(e)}>Dupliquer</button>}
|
||||
{!e.isDir && <button onClick={() => onHistory(e.path)}>Historique…</button>}
|
||||
{!e.isDir && <button onClick={() => onShare(e.path)}>Partager…</button>}
|
||||
<button onClick={() => toggleFavorite([e])}>
|
||||
{e.favorite ? <StarFilledIcon /> : <StarIcon />}
|
||||
{e.favorite ? "Retirer des favoris" : "Favori"}
|
||||
</button>
|
||||
{!e.isDir && (
|
||||
<button onClick={() => toggleFavorite([e])}>
|
||||
{e.favorite ? <StarFilledIcon /> : <StarIcon />}
|
||||
{e.favorite ? "Retirer des favoris" : "Favori"}
|
||||
</button>
|
||||
)}
|
||||
<button onClick={() => setTagging([e])}>
|
||||
<TagIcon />
|
||||
Tags…
|
||||
@@ -488,16 +555,19 @@ export function Explorer({ current, refreshKey, onOpen, onMoved, onDeleted, onHi
|
||||
e.isDir ? "dir" : "file",
|
||||
e.path === current ? "active" : "",
|
||||
isSel ? "selected" : "",
|
||||
e.special ? "special" : "",
|
||||
e.broken ? "broken" : "",
|
||||
dropTarget === e.path ? "drop" : "",
|
||||
].join(" ");
|
||||
return [
|
||||
<li key={e.path} className={cls}>
|
||||
<div
|
||||
className="row"
|
||||
draggable
|
||||
draggable={!e.special && !favView}
|
||||
onDragStart={(ev) => onDragStart(ev, e)}
|
||||
{...(e.isDir ? dropProps(e.path) : {})}
|
||||
>
|
||||
{!e.special && (
|
||||
<input
|
||||
type="checkbox"
|
||||
className="check"
|
||||
@@ -512,7 +582,12 @@ export function Explorer({ current, refreshKey, onOpen, onMoved, onDeleted, onHi
|
||||
}}
|
||||
onChange={() => toggle(e.path)}
|
||||
/>
|
||||
<button className="name" onClick={(ev) => onItemClick(ev, e)} title={e.path}>
|
||||
)}
|
||||
<button
|
||||
className="name"
|
||||
onClick={(ev) => onItemClick(ev, e)}
|
||||
title={e.broken ? "Original introuvable : retirer ce favori" : displayPath(e.path)}
|
||||
>
|
||||
{icon(e)}
|
||||
<span className="label">
|
||||
{e.favorite && (
|
||||
@@ -521,7 +596,7 @@ export function Explorer({ current, refreshKey, onOpen, onMoved, onDeleted, onHi
|
||||
</span>
|
||||
)}
|
||||
{e.isDir ? e.name : stripExt(e.name)}
|
||||
{results && <small className="muted where"> {dirname(e.path) || "/"}</small>}
|
||||
{(results || (favView && !e.broken)) && <small className="muted where"> {where(e.path)}</small>}
|
||||
{e.snippet && <small className="snippet">{e.snippet}</small>}
|
||||
</span>
|
||||
</button>
|
||||
@@ -540,6 +615,7 @@ export function Explorer({ current, refreshKey, onOpen, onMoved, onDeleted, onHi
|
||||
</span>
|
||||
)}
|
||||
{!e.isDir && view === "list" && <span className="meta muted">{fmtDate(e.modTime)}</span>}
|
||||
{!e.special && (
|
||||
<button
|
||||
className="icon-btn more"
|
||||
aria-label="Actions"
|
||||
@@ -548,13 +624,14 @@ export function Explorer({ current, refreshKey, onOpen, onMoved, onDeleted, onHi
|
||||
>
|
||||
<DotsIcon />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
{view === "list" && menuFor === e.path && actions(e)}
|
||||
{view === "list" && menuFor === e.path && (favView ? favActions(e) : actions(e))}
|
||||
</li>,
|
||||
// En grille, le menu occupe toute la largeur sous la vignette.
|
||||
view === "grid" && menuFor === e.path && (
|
||||
<li key={`${e.path}#menu`} className="menu-row">
|
||||
{actions(e)}
|
||||
{favView ? favActions(e) : actions(e)}
|
||||
</li>
|
||||
),
|
||||
];
|
||||
@@ -563,17 +640,18 @@ export function Explorer({ current, refreshKey, onOpen, onMoved, onDeleted, onHi
|
||||
return (
|
||||
<div className={`explorer ${fileDrag ? "file-drag" : ""}`} onKeyDown={onKeyDown} {...zoneProps}>
|
||||
<div className="toolbar">
|
||||
<button className="ex-btn" onClick={newDrawing} title="Nouveau schéma">
|
||||
<button className="ex-btn" onClick={newDrawing} title="Nouveau schéma" disabled={favView}>
|
||||
<FilePlusIcon />
|
||||
<span>Schéma</span>
|
||||
</button>
|
||||
<button className="ex-btn" onClick={newFolder} title="Nouveau dossier">
|
||||
<button className="ex-btn" onClick={newFolder} title="Nouveau dossier" disabled={favView}>
|
||||
<FolderPlusIcon />
|
||||
<span>Dossier</span>
|
||||
</button>
|
||||
<button
|
||||
className="ex-btn"
|
||||
onClick={() => fileInput.current?.click()}
|
||||
disabled={favView}
|
||||
title="Importer des fichiers .excalidraw (ou glisser-déposer fichiers et dossiers ici)"
|
||||
>
|
||||
<UploadIcon />
|
||||
@@ -582,6 +660,7 @@ export function Explorer({ current, refreshKey, onOpen, onMoved, onDeleted, onHi
|
||||
<button
|
||||
className="ex-btn square"
|
||||
onClick={() => dirInput.current?.click()}
|
||||
disabled={favView}
|
||||
title="Importer un dossier complet (arborescence recréée, seuls les .excalidraw sont importés)"
|
||||
aria-label="Importer un dossier"
|
||||
>
|
||||
@@ -648,15 +727,6 @@ export function Explorer({ current, refreshKey, onOpen, onMoved, onDeleted, onHi
|
||||
</div>
|
||||
|
||||
<div className="filters" role="group" aria-label="Filtres">
|
||||
<button
|
||||
className={`chip ${favOnly ? "on" : ""}`}
|
||||
aria-pressed={favOnly}
|
||||
onClick={() => setFavOnly((f) => !f)}
|
||||
title="Favoris de toute l'arborescence"
|
||||
>
|
||||
{favOnly ? <StarFilledIcon size={12} /> : <StarIcon size={12} />}
|
||||
Favoris
|
||||
</button>
|
||||
{tags.map((t) => (
|
||||
<button
|
||||
key={t.name}
|
||||
@@ -682,7 +752,7 @@ export function Explorer({ current, refreshKey, onOpen, onMoved, onDeleted, onHi
|
||||
<span key={p}>
|
||||
<span className="muted"> / </span>
|
||||
<button className={dropTarget === p ? "drop" : ""} onClick={() => setDir(p)} {...dropProps(p)}>
|
||||
{c}
|
||||
{label(c)}
|
||||
</button>
|
||||
</span>
|
||||
);
|
||||
@@ -698,16 +768,16 @@ export function Explorer({ current, refreshKey, onOpen, onMoved, onDeleted, onHi
|
||||
<span className="count">{plural(selected.size, "sélectionné")}</span>
|
||||
<button
|
||||
className="icon-btn"
|
||||
onClick={selected.size === list.length ? clearSelection : selectAll}
|
||||
title={selected.size === list.length ? "Tout désélectionner" : "Tout sélectionner (Ctrl+A)"}
|
||||
aria-label={selected.size === list.length ? "Tout désélectionner" : "Tout sélectionner"}
|
||||
onClick={selected.size === selectable.length ? clearSelection : selectAll}
|
||||
title={selected.size === selectable.length ? "Tout désélectionner" : "Tout sélectionner (Ctrl+A)"}
|
||||
aria-label={selected.size === selectable.length ? "Tout désélectionner" : "Tout sélectionner"}
|
||||
>
|
||||
{selected.size === list.length ? <DeselectIcon /> : <SelectAllIcon />}
|
||||
{selected.size === selectable.length ? <DeselectIcon /> : <SelectAllIcon />}
|
||||
</button>
|
||||
<button
|
||||
className="icon-btn"
|
||||
onClick={() => toggleFavorite(list.filter((e) => selected.has(e.path)))}
|
||||
title="Favoris (ajouter ou retirer)"
|
||||
title={favView ? "Retirer des favoris" : "Favoris (ajouter ou retirer)"}
|
||||
aria-label="Favoris"
|
||||
>
|
||||
<StarIcon />
|
||||
@@ -720,11 +790,18 @@ export function Explorer({ current, refreshKey, onOpen, onMoved, onDeleted, onHi
|
||||
>
|
||||
<TagIcon />
|
||||
</button>
|
||||
<button className="ex-btn" onClick={() => setMoving([...selected])}>
|
||||
<MoveIcon />
|
||||
<span>Déplacer…</span>
|
||||
</button>
|
||||
<button className="icon-btn danger" onClick={() => removeMany([...selected])} title="Mettre à la corbeille (Suppr)" aria-label="Supprimer">
|
||||
{!favView && (
|
||||
<button className="ex-btn" onClick={() => setMoving([...selected])}>
|
||||
<MoveIcon />
|
||||
<span>Déplacer…</span>
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
className="icon-btn danger"
|
||||
onClick={() => removeMany([...selected])}
|
||||
title={favView ? "Retirer des favoris (Suppr)" : "Mettre à la corbeille (Suppr)"}
|
||||
aria-label={favView ? "Retirer des favoris" : "Supprimer"}
|
||||
>
|
||||
<TrashIcon />
|
||||
</button>
|
||||
</div>
|
||||
@@ -756,13 +833,17 @@ export function Explorer({ current, refreshKey, onOpen, onMoved, onDeleted, onHi
|
||||
</li>
|
||||
)}
|
||||
{list.flatMap(item)}
|
||||
{list.length === 0 && <li className="muted empty">{results ? "Aucun résultat" : "Dossier vide"}</li>}
|
||||
{list.length === 0 && (
|
||||
<li className="muted empty">
|
||||
{results ? "Aucun résultat" : favView ? "Aucun favori : étoile ou glisser-déposer un schéma ici" : "Dossier vide"}
|
||||
</li>
|
||||
)}
|
||||
</ul>
|
||||
|
||||
{fileDrag && (
|
||||
<div className="drop-hint" aria-hidden>
|
||||
<FolderUploadIcon size={28} />
|
||||
<span>Déposer pour importer dans « {importDir ? basename(importDir) : "Racine"} »</span>
|
||||
<span>Déposer pour importer dans « {importDir ? label(basename(importDir)) : "Racine"} »</span>
|
||||
<small>Les dossiers sont recréés · seuls les .excalidraw sont importés</small>
|
||||
</div>
|
||||
)}
|
||||
@@ -779,7 +860,7 @@ export function Explorer({ current, refreshKey, onOpen, onMoved, onDeleted, onHi
|
||||
{moving && (
|
||||
<MoveDialog
|
||||
paths={moving}
|
||||
startDir={results ? "" : dir}
|
||||
startDir={importDir}
|
||||
onCancel={() => setMoving(null)}
|
||||
onConfirm={(target) => moveMany(moving, target)}
|
||||
/>
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { api, basename, dirname, join, type Entry } from "./api";
|
||||
import { api, basename, dirname, join, label, type Entry } from "./api";
|
||||
import { FolderIcon, FolderPlusIcon } from "./icons";
|
||||
|
||||
interface Props {
|
||||
@@ -21,7 +21,7 @@ export function MoveDialog({ paths, startDir, onCancel, onConfirm }: Props) {
|
||||
setError(null);
|
||||
api
|
||||
.list(dir)
|
||||
.then((es) => live && setFolders(es.filter((e) => e.isDir)))
|
||||
.then((es) => live && setFolders(es.filter((e) => e.isDir && e.special !== "favoris")))
|
||||
.catch((e) => live && setError(e.message));
|
||||
return () => {
|
||||
live = false;
|
||||
@@ -63,7 +63,7 @@ export function MoveDialog({ paths, startDir, onCancel, onConfirm }: Props) {
|
||||
return (
|
||||
<span key={p}>
|
||||
<span className="muted"> / </span>
|
||||
<button onClick={() => setDir(p)}>{c}</button>
|
||||
<button onClick={() => setDir(p)}>{label(c)}</button>
|
||||
</span>
|
||||
);
|
||||
})}
|
||||
|
||||
+29
-11
@@ -7,7 +7,10 @@ interface Props {
|
||||
beforeLogout: () => Promise<unknown>;
|
||||
}
|
||||
|
||||
/** Utilisateur connecté et bouton de déconnexion (mode OIDC uniquement). */
|
||||
/**
|
||||
* Utilisateur connecté : cartouche du mode (« oidc » ou « local ») suivi de
|
||||
* l'identifiant, puis bouton de déconnexion (mode OIDC uniquement).
|
||||
*/
|
||||
export function UserMenu({ beforeLogout }: Props) {
|
||||
const [me, setMe] = useState<Me | null>(null);
|
||||
|
||||
@@ -18,18 +21,33 @@ export function UserMenu({ beforeLogout }: Props) {
|
||||
.catch(() => setMe(null));
|
||||
}, []);
|
||||
|
||||
if (!me?.user || !me.logout) return null;
|
||||
if (!me) return null;
|
||||
const oidc = me.mode === "oidc";
|
||||
// OIDC : l'identifiant de l'espace personnel (e-mail) ; local : le nom du compte.
|
||||
const id = oidc ? me.id : (me.user?.name ?? me.id);
|
||||
const who = me.user
|
||||
? me.user.email && me.user.email !== me.user.name
|
||||
? `${me.user.name} (${me.user.email})`
|
||||
: me.user.name
|
||||
: id;
|
||||
const logout = me.logout;
|
||||
const who = me.user.email && me.user.email !== me.user.name ? `${me.user.name} (${me.user.email})` : me.user.name;
|
||||
|
||||
return (
|
||||
<button
|
||||
className="icon-btn"
|
||||
aria-label={`Se déconnecter (${who})`}
|
||||
title={`Connecté : ${who}\nCliquer pour se déconnecter`}
|
||||
onClick={() => beforeLogout().finally(() => location.assign(logout))}
|
||||
>
|
||||
<LogoutIcon />
|
||||
</button>
|
||||
<>
|
||||
<span className="whoami" title={`Connecté : ${who}\nEspace personnel : ${me.id}`}>
|
||||
<span className={`auth-tag ${oidc ? "oidc" : "local"}`}>{oidc ? "oidc" : "local"}</span>
|
||||
<span className="user-id">{id}</span>
|
||||
</span>
|
||||
{logout && (
|
||||
<button
|
||||
className="icon-btn"
|
||||
aria-label={`Se déconnecter (${who})`}
|
||||
title={`Connecté : ${who}\nCliquer pour se déconnecter`}
|
||||
onClick={() => beforeLogout().finally(() => location.assign(logout))}
|
||||
>
|
||||
<LogoutIcon />
|
||||
</button>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
+18
-1
@@ -8,6 +8,12 @@ export interface Entry {
|
||||
modTime: string;
|
||||
tags?: string[];
|
||||
favorite?: boolean;
|
||||
/** Entrée virtuelle de la racine : "favoris" ou "perso" (espace personnel). */
|
||||
special?: "favoris" | "perso";
|
||||
/** Dans le dossier Favoris : nom du lien (le chemin est celui de l'original). */
|
||||
link?: string;
|
||||
/** Favori dont l'original a disparu (chemin .favoris/<lien>, à retirer). */
|
||||
broken?: boolean;
|
||||
}
|
||||
|
||||
export interface TagCount {
|
||||
@@ -74,11 +80,12 @@ export interface PublicScene {
|
||||
scene: { elements?: unknown[]; appState?: Record<string, unknown>; files?: Record<string, unknown> };
|
||||
}
|
||||
|
||||
/** Session courante (GET /api/me) ; logout présent en mode OIDC. */
|
||||
/** Session courante (GET /api/me) ; logout présent en mode OIDC, id = dossier de l'utilisateur. */
|
||||
export interface Me {
|
||||
mode: "none" | "local" | "oidc";
|
||||
user?: { sub: string; name: string; email?: string };
|
||||
logout?: string;
|
||||
id: string;
|
||||
}
|
||||
|
||||
export class ApiError extends Error {
|
||||
@@ -247,6 +254,16 @@ export const api = {
|
||||
export const dirname = (p: string) => (p.includes("/") ? p.slice(0, p.lastIndexOf("/")) : "");
|
||||
export const basename = (p: string) => p.slice(p.lastIndexOf("/") + 1);
|
||||
export const join = (dir: string, name: string) => (dir ? `${dir}/${name}` : name);
|
||||
|
||||
// Dossiers propres à l'utilisateur connecté (voir internal/storage/spaces.go).
|
||||
export const PERSO = ".perso";
|
||||
export const FAVORIS = ".favoris";
|
||||
const SPECIAL_LABELS: Record<string, string> = { [PERSO]: "Personnel", [FAVORIS]: "Favoris" };
|
||||
/** Libellé d'un composant de chemin (".perso" → "Personnel"). */
|
||||
export const label = (part: string) => SPECIAL_LABELS[part] ?? part;
|
||||
/** Chemin affiché : "Personnel/projets" pour ".perso/projets". */
|
||||
export const displayPath = (p: string) => p.split("/").map(label).join("/");
|
||||
export const inFavoris = (p: string) => p === FAVORIS || p.startsWith(FAVORIS + "/");
|
||||
export const EXT = ".excalidraw";
|
||||
export const withExt = (name: string) => (name.toLowerCase().endsWith(EXT) ? name : name + EXT);
|
||||
export const stripExt = (name: string) =>
|
||||
|
||||
@@ -203,6 +203,14 @@ export const EyeIcon = icon(
|
||||
/** Punaise : panneau épinglé ou flottant (comme le bouton d'ancrage des panneaux d'Excalidraw). */
|
||||
export const PinIcon = icon(<path d="M15 4.5l-4 4-4 1.5-1.5 1.5 7 7 1.5-1.5 1.5-4 4-4M9 15l-4.5 4.5M14.5 4 20 9.5" />);
|
||||
|
||||
/** Espace personnel de l'utilisateur. */
|
||||
export const UserIcon = icon(
|
||||
<>
|
||||
<circle cx="12" cy="8" r="4" />
|
||||
<path d="M6 21v-2a4 4 0 0 1 4-4h4a4 4 0 0 1 4 4v2" />
|
||||
</>,
|
||||
);
|
||||
|
||||
export const LogoutIcon = icon(
|
||||
<>
|
||||
<path d="M14 8V6a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h7a2 2 0 0 0 2-2v-2" />
|
||||
|
||||
@@ -1345,3 +1345,66 @@ button.chip.on,
|
||||
display: inline-flex;
|
||||
}
|
||||
}
|
||||
|
||||
/* Entrées propres à l'utilisateur en tête de la racine : Favoris et Personnel. */
|
||||
.icon.special.favoris {
|
||||
color: #f59f00;
|
||||
}
|
||||
.icon.special.perso {
|
||||
color: var(--accent);
|
||||
}
|
||||
.item.special > .row {
|
||||
background: var(--ex-surface-mid);
|
||||
border-radius: var(--ex-radius-lg);
|
||||
}
|
||||
/* Favori dont l'original a disparu : barré, seul « Retirer » reste possible. */
|
||||
.item.broken .label {
|
||||
text-decoration: line-through;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
/* Utilisateur connecté (barre de titre) : cartouche du mode + identifiant. */
|
||||
.whoami {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
min-width: 0;
|
||||
max-width: 260px;
|
||||
margin: 0 4px;
|
||||
font-size: 12px;
|
||||
}
|
||||
.auth-tag {
|
||||
flex: none;
|
||||
padding: 1px 6px;
|
||||
border: 1px solid currentColor;
|
||||
border-radius: 4px;
|
||||
font: 600 11px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
.auth-tag.oidc {
|
||||
color: #0b7285;
|
||||
background: #e3fafc;
|
||||
}
|
||||
.auth-tag.local {
|
||||
color: #e67700;
|
||||
background: #fff4e6;
|
||||
}
|
||||
:root[data-theme="dark"] .auth-tag.oidc {
|
||||
color: #66d9e8;
|
||||
background: rgb(102 217 232 / 0.12);
|
||||
}
|
||||
:root[data-theme="dark"] .auth-tag.local {
|
||||
color: #ffc078;
|
||||
background: rgb(255 192 120 / 0.12);
|
||||
}
|
||||
.user-id {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
@media (max-width: 640px) {
|
||||
.user-id {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user