feat: export systematique de pena.flatpak lors du build

Le mode par defaut installe (--user) ET exporte le bundle pena.flatpak a cote
du script. Le flag --bundle devient --no-install (bundle seul, alias conserve).

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

flatpak/build-flatpak.sh

@@ -6,17 +6,20 @@
 #   1. `cargo tauri build --bundles deb`  -> produit le .deb autonome
 #   2. Copie du .deb à côté du manifeste sous le nom `pena.deb`
 #   3. `flatpak-builder` construit le bundle dans la sandbox GNOME
-#   4. Installation locale (--user) et/ou export en fichier .flatpak
+#   4. Installation locale (--user) ET export du fichier pena.flatpak
+#
+# Le fichier `pena.flatpak` est TOUJOURS exporté à côté du script.
 #
 # Usage :
-#   ./build-flatpak.sh            # build + installation locale (--user)
+#   ./build-flatpak.sh              # build + installation (--user) + pena.flatpak
-#   ./build-flatpak.sh --bundle   # build + export d'un fichier Pena.flatpak
+#   ./build-flatpak.sh --no-install # build + pena.flatpak seul (pas d'installation)
 #   ./build-flatpak.sh --no-deb     # réutilise le .deb déjà présent (build rapide)
 #
 set -euo pipefail
 
 APP_ID="com.pena.app"
 RUNTIME_VERSION="48"
+RUST_CONTAINER="ubuntu-rust"   # distrobox contenant cargo-tauri + libs GTK/WebKit
 
 SCRIPT_DIR="$(cd "$(dirname "${BASH_SOURCE[0]}")" && pwd)"
 PROJECT_DIR="$(dirname "$SCRIPT_DIR")"          # .../Pena-tauri
@@ -24,14 +27,16 @@ MANIFEST="$SCRIPT_DIR/${APP_ID}.yml"
 BUILD_DIR="$SCRIPT_DIR/.build"                  # arbre de build flatpak-builder
 REPO_DIR="$SCRIPT_DIR/.repo"                    # dépôt ostree temporaire
 DEB_TARGET="$SCRIPT_DIR/pena.deb"
+TAURI_CONF="$PROJECT_DIR/src-tauri/tauri.conf.json"
+METAINFO="$SCRIPT_DIR/${APP_ID}.metainfo.xml"
 
-DO_BUNDLE=0
+DO_INSTALL=1
 BUILD_DEB=1
 for arg in "$@"; do
   case "$arg" in
-    --bundle) DO_BUNDLE=1 ;;
+    --no-install|--bundle) DO_INSTALL=0 ;;   # --bundle : alias rétrocompatible
     --no-deb) BUILD_DEB=0 ;;
-    -h|--help) sed -n '2,16p' "$0"; exit 0 ;;
+    -h|--help) sed -n '2,17p' "$0"; exit 0 ;;
     *) echo "Argument inconnu : $arg" >&2; exit 1 ;;
   esac
 done
@@ -39,26 +44,61 @@ done
 # --- Vérification des outils -------------------------------------------------
 need() { command -v "$1" >/dev/null 2>&1 || { echo "Outil manquant : $1" >&2; exit 1; }; }
 need flatpak
-if ! command -v flatpak-builder >/dev/null 2>&1; then
+
+# flatpak-builder : commande native, sinon le Flatpak org.flatpak.Builder
+# (cas des distributions atomiques type Bazzite/Silverblue).
+if command -v flatpak-builder >/dev/null 2>&1; then
+  FLATPAK_BUILDER=(flatpak-builder)
+elif flatpak info org.flatpak.Builder >/dev/null 2>&1; then
+  FLATPAK_BUILDER=(flatpak run org.flatpak.Builder)
+else
   echo "flatpak-builder est requis. Installez-le :" >&2
   echo "  flatpak install -y flathub org.flatpak.Builder" >&2
-  echo "  (puis lancez ce script via : flatpak run org.flatpak.Builder ...)" >&2
+  echo "  ou sur Fedora classique :  sudo dnf install flatpak-builder" >&2
-  echo "  ou sur Fedora :  sudo dnf install flatpak-builder" >&2
   exit 1
 fi
 
-# --- Runtime / SDK GNOME -----------------------------------------------------
+# --- Remote flathub (scope --user) -------------------------------------------
-echo ">> Vérification du runtime GNOME ${RUNTIME_VERSION}…"
+# flatpak-builder est lancé en --user et installe les dépendances (runtime/SDK
-if ! flatpak info "org.gnome.Platform//${RUNTIME_VERSION}" >/dev/null 2>&1; then
+# via --install-deps-from=flathub) dans cette même installation. Le remote
-  flatpak install -y --user flathub \
+# flathub doit donc exister au niveau --user, ce qui n'est pas le cas par
-    "org.gnome.Platform//${RUNTIME_VERSION}" \
+# défaut sur les distributions atomiques (où flathub est un remote système).
-    "org.gnome.Sdk//${RUNTIME_VERSION}"
+echo ">> Vérification du remote flathub (--user)…"
+flatpak remote-add --if-not-exists --user flathub \
+  https://flathub.org/repo/flathub.flatpakrepo
+
+# --- 0. Version : source de vérité = tauri.conf.json -------------------------
+# On lit la version applicative depuis tauri.conf.json et on la répercute dans
+# le metainfo AppStream (release) afin que le Flatpak porte toujours la
+# dernière version déclarée dans les sources.
+need jq
+VERSION="$(jq -r '.version' "$TAURI_CONF")"
+if [[ -z "$VERSION" || "$VERSION" == "null" ]]; then
+  echo "Impossible de lire la version dans $TAURI_CONF" >&2
+  exit 1
+fi
+TODAY="$(date -u +%Y-%m-%d)"
+echo ">> Version applicative : $VERSION (build du $TODAY)"
+
+# Met à jour (ou insère) l'entrée <release> du metainfo pour cette version.
+if grep -q "version=\"$VERSION\"" "$METAINFO"; then
+  echo ">> Release $VERSION déjà présente dans le metainfo."
+else
+  echo ">> Ajout de la release $VERSION au metainfo…"
+  sed -i \
+    "s#<releases>#<releases>\n    <release version=\"$VERSION\" date=\"$TODAY\"/>#" \
+    "$METAINFO"
 fi
 
 # --- 1. Build du .deb via Tauri ---------------------------------------------
 if [[ "$BUILD_DEB" -eq 1 ]]; then
-  echo ">> Build du paquet .deb (cargo tauri build --bundles deb)…"
+  # La compilation Tauri exige les libs de dev GTK/WebKit, absentes de l'hôte
-  ( cd "$PROJECT_DIR" && cargo tauri build --bundles deb )
+  # (distribution atomique). On build donc dans le distrobox `$RUST_CONTAINER`,
+  # qui embarque cargo-tauri et ces libs. flatpak-builder reste sur l'hôte.
+  need distrobox
+  echo ">> Build du paquet .deb dans le distrobox $RUST_CONTAINER…"
+  distrobox enter "$RUST_CONTAINER" -- \
+    bash -lc "cd '$PROJECT_DIR' && cargo tauri build --bundles deb"
 fi
 
 DEB_SRC="$(find "$PROJECT_DIR/src-tauri/target/release/bundle/deb" -name '*.deb' 2>/dev/null | sort | tail -n1 || true)"
@@ -69,24 +109,36 @@ fi
 echo ">> Utilisation du .deb : $DEB_SRC"
 cp -f "$DEB_SRC" "$DEB_TARGET"
 
+# Icône installée dans le Flatpak (128x128) depuis les sources du projet.
+cp -f "$PROJECT_DIR/src-tauri/icons/128x128.png" "$SCRIPT_DIR/icon.png"
+
 # --- 2. Build Flatpak --------------------------------------------------------
+# Construit l'app dans un dépôt OSTree local ($REPO_DIR) ; les dépendances
+# manquantes (runtime/SDK) sont récupérées depuis flathub.
 echo ">> Construction du Flatpak…"
 rm -rf "$BUILD_DIR"
-FB_ARGS=(--force-clean --user --repo="$REPO_DIR")
+FB_ARGS=(--force-clean --user --install-deps-from=flathub --repo="$REPO_DIR")
-if [[ "$DO_BUNDLE" -eq 0 ]]; then
+if [[ "$DO_INSTALL" -eq 1 ]]; then
   FB_ARGS+=(--install)
 fi
-flatpak-builder "${FB_ARGS[@]}" "$BUILD_DIR" "$MANIFEST"
+"${FLATPAK_BUILDER[@]}" "${FB_ARGS[@]}" "$BUILD_DIR" "$MANIFEST"
 
-# --- 3. Export d'un fichier .flatpak (optionnel) -----------------------------
+# --- 3. Export du fichier .flatpak (toujours) --------------------------------
-if [[ "$DO_BUNDLE" -eq 1 ]]; then
+# Le bundle autonome est systématiquement exporté à côté du manifeste.
-  OUT="$SCRIPT_DIR/Pena.flatpak"
+OUT="$SCRIPT_DIR/pena.flatpak"
 echo ">> Export du bundle : $OUT"
-  flatpak build-bundle "$REPO_DIR" "$OUT" "$APP_ID" "$RUNTIME_VERSION" 2>/dev/null \
+flatpak build-bundle "$REPO_DIR" "$OUT" "$APP_ID" \
-    || flatpak build-bundle "$REPO_DIR" "$OUT" "$APP_ID"
+  --runtime-repo=https://flathub.org/repo/flathub.flatpakrepo
-  echo ">> Installer avec :  flatpak install --user $OUT"
+
+echo ">> Nettoyage du dépôt OSTree temporaire…"
+rm -rf "$REPO_DIR"
+
+if [[ "$DO_INSTALL" -eq 1 ]]; then
+  echo ">> Pena $VERSION installé (--user) et bundle exporté : $OUT"
+  echo ">> Lancer avec :  flatpak run $APP_ID"
 else
-  echo ">> Installé. Lancer avec :  flatpak run $APP_ID"
+  echo ">> Bundle exporté : $OUT"
+  echo ">> Installer avec :  flatpak install --user $OUT"
 fi
 
 echo ">> Terminé."

src/style.css

@@ -1,4 +1,5 @@
 /* ── Reset ── */
+:root { --sidebar-width: 264px; }
 *, *::before, *::after { box-sizing: border-box; }
 ::selection { background: #ffc3c3; }
 html, body { height: 100%; margin: 0; }
@@ -91,6 +92,13 @@ body {
   background: #1a1b2e;
 }
 
+.home-logo {
+  width: 160px;
+  height: 160px;
+  object-fit: contain;
+  margin: 0 0 16px;
+}
+
 .home-title {
   color: #fff;
   font-size: 4rem;
@@ -206,7 +214,7 @@ body {
   position: fixed;
   top: 36px;
   left: 0;
-  width: 264px;
+  width: var(--sidebar-width);
   height: calc(100vh - 36px);
   background: #1a1b2e;
   display: flex;
@@ -215,6 +223,22 @@ body {
   overflow: hidden;
 }
 
+/* Poignée de redimensionnement */
+.sidebar__resizer {
+  position: absolute;
+  top: 0;
+  right: 0;
+  width: 6px;
+  height: 100%;
+  cursor: col-resize;
+  z-index: 100;
+  background: transparent;
+  transition: background 0.15s;
+}
+.sidebar__resizer:hover,
+.sidebar__resizer.is-dragging { background: rgba(129, 140, 248, 0.4); }
+body.is-resizing-sidebar { cursor: col-resize; user-select: none; }
+
 .sidebar__scroll {
   flex: 1;
   min-height: 0;
@@ -315,10 +339,10 @@ body {
 
 .nav-root-link {
   display: block;
-  padding: 7px 24px;
+  padding: 6px 24px;
   color: rgba(255,255,255,0.85);
   text-decoration: none;
-  font-size: 16px;
+  font-size: 14px;
   font-weight: 400;
   line-height: 1.4;
   transition: color 0.2s;
@@ -358,33 +382,32 @@ body {
 .nav-arrow:hover { opacity: 1; background: rgba(255,255,255,0.08); }
 .nav-folder[open] > summary .nav-arrow { transform: rotate(90deg); opacity: 0.8; }
 
+/* Les libellés de dossiers partagent la même police que les fichiers :
+   même taille (14px), même graisse (400), sans majuscules. Seule la flèche ▶
+   distingue visuellement un dossier d'un fichier. */
 .nav-folder-link, .nav-folder-name {
   flex: 1;
   display: block;
   padding: 6px 24px 6px 0;
-  font-size: 11px;
+  font-size: 14px;
-  font-weight: 700;
+  font-weight: 400;
-  text-transform: uppercase;
+  line-height: 1.4;
-  letter-spacing: 0.08em;
+  color: rgba(255,255,255,0.85);
-  color: rgba(255,255,255,0.35);
   text-decoration: none;
   transition: color 0.2s;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
 }
-.nav-folder-link:hover { color: rgba(255,255,255,0.85); }
+.nav-folder-link:hover { color: #ff5577; }
 .nav-folder-link.active { color: #ff5577; }
 
+/* Dossiers imbriqués : même style que les fichiers imbriqués (couleur atténuée). */
 .nav-folder .nav-folder > summary .nav-folder-link,
 .nav-folder .nav-folder > summary .nav-folder-name {
-  font-size: 13px;
+  color: rgba(255,255,255,0.55);
-  font-weight: 500;
-  text-transform: none;
-  letter-spacing: 0;
-  color: rgba(255,255,255,0.45);
 }
-.nav-folder .nav-folder > summary .nav-folder-link:hover { color: rgba(255,255,255,0.9); }
+.nav-folder .nav-folder > summary .nav-folder-link:hover { color: #ff5577; }
 
 .nav-file-link {
   display: block;
@@ -402,16 +425,16 @@ body {
   font-weight: 500;
 }
 
-.nav-depth-1 > .nav-file-link { padding: 5px 24px 5px 52px; }
+.nav-depth-1 > .nav-file-link { padding: 6px 24px 6px 52px; }
 .nav-depth-1 > .nav-folder > summary { padding-left: 24px; }
-.nav-depth-2 > .nav-file-link { padding: 4px 24px 4px 68px; }
+.nav-depth-2 > .nav-file-link { padding: 6px 24px 6px 68px; }
 .nav-depth-2 > .nav-folder > summary { padding-left: 40px; }
-.nav-depth-3 > .nav-file-link { padding: 4px 24px 4px 84px; }
+.nav-depth-3 > .nav-file-link { padding: 6px 24px 6px 84px; }
 .nav-depth-3 > .nav-folder > summary { padding-left: 56px; }
 
 /* ── Content ── */
 .content {
-  margin-left: 264px;
+  margin-left: var(--sidebar-width);
   padding-top: 48px;
   padding-right: 72px;
   padding-bottom: 96px;

src/ui/sidebar.js

@@ -1,5 +1,13 @@
 import { escapeHtml } from '../utils.js';
 
+// Tri « naturel » : les préfixes numériques sont comparés comme des nombres
+// (10 vient après 9, pas après 1).
+const collator = new Intl.Collator(undefined, { numeric: true, sensitivity: 'base' });
+
+function cleanLabel(name) {
+  return name.replace(/\.md$/i, '').replace(/-/g, ' ');
+}
+
 function buildTree(relPaths, sep) {
   const tree = { _files: [], _dirs: {} };
   relPaths.forEach((rel) => {
@@ -19,8 +27,11 @@ function renderTree(node, prefix, sep, currentRel, depth) {
   let html = '';
   const depthClass = depth > 0 ? ` class="nav-depth-${Math.min(depth, 3)}"` : '';
 
-  node._files.slice().sort().forEach((rel) => {
+  node._files
-    const label = rel.split(sep).pop().replace(/\.md$/i, '').replace(/-/g, ' ');
+    .slice()
+    .sort((a, b) => collator.compare(a.split(sep).pop(), b.split(sep).pop()))
+    .forEach((rel) => {
+    const label = cleanLabel(rel.split(sep).pop());
     const abs = prefix + rel;
     const cls = rel === currentRel ? ' active' : '';
     if (depth === 0) {
@@ -30,7 +41,7 @@ function renderTree(node, prefix, sep, currentRel, depth) {
     }
   });
 
-  Object.keys(node._dirs).sort().forEach((dirName) => {
+  Object.keys(node._dirs).sort((a, b) => collator.compare(a, b)).forEach((dirName) => {
     const child = node._dirs[dirName];
     const isOpen = currentRel && currentRel.split(sep).includes(dirName);
     const openAttr = isOpen ? ' open' : '';
@@ -40,9 +51,9 @@ function renderTree(node, prefix, sep, currentRel, depth) {
     if (homeFile) {
       const abs = prefix + homeFile;
       const cls = homeFile === currentRel ? ' active' : '';
-      folderLabel = `<a href="#" class="nav-folder-link${cls}" data-path="${escapeHtml(abs)}" onclick="event.stopPropagation()">${escapeHtml(dirName)}</a>`;
+      folderLabel = `<a href="#" class="nav-folder-link${cls}" data-path="${escapeHtml(abs)}" onclick="event.stopPropagation()">${escapeHtml(cleanLabel(dirName))}</a>`;
     } else {
-      folderLabel = `<span class="nav-folder-name">${escapeHtml(dirName)}</span>`;
+      folderLabel = `<span class="nav-folder-name">${escapeHtml(cleanLabel(dirName))}</span>`;
     }
 
     const arrow = `<span class="nav-arrow" onclick="event.preventDefault();event.stopPropagation();var d=this.closest('details');d.open=!d.open">▶</span>`;