feat: add maps layouts

src-tauri/src/config.rs

@@ -58,8 +58,10 @@ pub struct Config {
     /// Saved position of the layout window (logical pixels).
     pub layout_x: i32,
     pub layout_y: i32,
-    /// Size (px) of the main layout image rendered in the viewer.
+    /// Saved size of the layout window (logical pixels). The image scales to fill
-    pub layout_size: u32,
+    /// it; the user adjusts it via the corner resize grip or the settings fields.
+    pub layout_w: u32,
+    pub layout_h: u32,
 
     // --- campaign timer ---
     pub timer_enabled: bool,
@@ -107,7 +109,8 @@ impl Default for Config {
             feature_layouts: true,
             layout_x: 600,
             layout_y: 160,
-            layout_size: 360,
+            layout_w: 480,
+            layout_h: 600,
             timer_enabled: true,
             timer_pause_in_town: true,
             timer_afk_enabled: true,

src-tauri/src/lib.rs

@@ -39,6 +39,10 @@ pub struct AppState {
     // the offset from the window's top-left to the cursor; a background thread
     // follows the mouse via xdotool (Tauri/KWin won't reposition this window).
     pub layout_drag: Mutex<Option<(i32, i32)>>,
+    // While the user drags the layout window's corner grip: Some(()) signals a
+    // background thread to follow the mouse and resize the window via set_size
+    // (KWin gives this decorationless window no resize borders of its own).
+    pub layout_resize: Mutex<Option<()>>,
 }
 
 // ---------------------------------------------------------------------------
@@ -284,12 +288,80 @@ fn toggle_layout(app: AppHandle, state: tauri::State<AppState>) {
     }
 }
 
-/// Resize the layout window to fit its rendered content (called by the frontend
+/// Resize the layout window to an explicit size and persist it (called by the
-/// whenever the viewer's content size changes).
+/// settings fields). The grip uses `start_layout_resize` for live dragging.
 #[tauri::command]
-fn set_layout_size(app: AppHandle, width: u32, height: u32) {
+fn set_layout_size(app: AppHandle, width: u32, height: u32, state: tauri::State<AppState>) {
+    let (w_px, h_px) = (width.max(MIN_LAYOUT_W), height.max(MIN_LAYOUT_H));
     if let Some(w) = app.get_webview_window("layout") {
-        let _ = w.set_size(LogicalSize::new(width.max(80), height.max(80)));
+        let _ = w.set_size(LogicalSize::new(w_px, h_px));
+    }
+    let mut cfg = state.config.lock().unwrap();
+    cfg.layout_w = w_px;
+    cfg.layout_h = h_px;
+    cfg.save();
+}
+
+/// Minimum layout-window size (logical px), shared by the grip and settings.
+const MIN_LAYOUT_W: u32 = 240;
+const MIN_LAYOUT_H: u32 = 200;
+
+/// Begin resizing the layout window by its corner grip. Mirrors the drag
+/// machinery: a background thread follows the mouse (pointermove is unreliable
+/// in this WebKitGTK window) and resizes via `set_size` until `end_layout_resize`.
+#[tauri::command]
+fn start_layout_resize(app: AppHandle, state: tauri::State<AppState>) {
+    let Some(w) = app.get_webview_window("layout") else {
+        return;
+    };
+    let Some((mx, my)) = crate::poe::mouse_position() else {
+        return;
+    };
+    let scale = w.scale_factor().unwrap_or(1.0);
+    let Ok(base) = w.inner_size() else {
+        return;
+    };
+    let base = base.to_logical::<i32>(scale);
+    *state.layout_resize.lock().unwrap() = Some(());
+
+    let app = app.clone();
+    std::thread::spawn(move || {
+        let start = std::time::Instant::now();
+        loop {
+            if app.state::<AppState>().layout_resize.lock().unwrap().is_none() {
+                break;
+            }
+            // Safety net so a missed pointerup can't pin the size to the cursor.
+            if start.elapsed().as_secs() > 30 {
+                *app.state::<AppState>().layout_resize.lock().unwrap() = None;
+                break;
+            }
+            if let (Some(w), Some((cx, cy))) =
+                (app.get_webview_window("layout"), crate::poe::mouse_position())
+            {
+                let nw = (base.width + (cx - mx)).max(MIN_LAYOUT_W as i32) as u32;
+                let nh = (base.height + (cy - my)).max(MIN_LAYOUT_H as i32) as u32;
+                let _ = w.set_size(LogicalSize::new(nw, nh));
+            }
+            std::thread::sleep(std::time::Duration::from_millis(16));
+        }
+    });
+}
+
+/// Stop resizing the layout window and persist its final size.
+#[tauri::command]
+fn end_layout_resize(app: AppHandle, state: tauri::State<AppState>) {
+    *state.layout_resize.lock().unwrap() = None;
+    std::thread::sleep(std::time::Duration::from_millis(30));
+    if let Some(w) = app.get_webview_window("layout") {
+        let scale = w.scale_factor().unwrap_or(1.0);
+        if let Ok(s) = w.inner_size() {
+            let ls = s.to_logical::<u32>(scale);
+            let mut cfg = state.config.lock().unwrap();
+            cfg.layout_w = ls.width.max(MIN_LAYOUT_W);
+            cfg.layout_h = ls.height.max(MIN_LAYOUT_H);
+            cfg.save();
+        }
     }
 }
 
@@ -625,6 +697,7 @@ pub fn run() {
         status: Mutex::new(Status::default()),
         timer: Mutex::new(live_timer),
         layout_drag: Mutex::new(None),
+        layout_resize: Mutex::new(None),
     };
 
     tauri::Builder::default()
@@ -675,6 +748,8 @@ pub fn run() {
             save_layout_geometry,
             start_layout_drag,
             end_layout_drag,
+            start_layout_resize,
+            end_layout_resize,
         ])
         .setup(|app| {
             let handle = app.handle().clone();
@@ -736,10 +811,10 @@ pub fn run() {
             // Unlike the overlay it is NOT transparent: it's an opaque panel, and
             // transparent WebKitGTK windows don't reliably repaint here (the view
             // stays blank/ghosted), whereas an opaque window composites fine.
-            let (lx, ly, lsz) = {
+            let (lx, ly, lw, lh) = {
                 let state = handle.state::<AppState>();
                 let cfg = state.config.lock().unwrap();
-                (cfg.layout_x, cfg.layout_y, cfg.layout_size)
+                (cfg.layout_x, cfg.layout_y, cfg.layout_w, cfg.layout_h)
             };
             let _ = WebviewWindowBuilder::new(
                 &handle,
@@ -747,7 +822,8 @@ pub fn run() {
                 WebviewUrl::App("index.html".into()),
             )
             .title("Exile UI Layouts")
-            .inner_size(lsz as f64 + 24.0, lsz as f64 + 110.0)
+            .inner_size(lw as f64, lh as f64)
+            .min_inner_size(MIN_LAYOUT_W as f64, MIN_LAYOUT_H as f64)
             .position(lx as f64, ly as f64)
             .decorations(false)
             .always_on_top(true)

src/lib/Layouts.svelte

@@ -2,26 +2,24 @@
   import { onMount } from "svelte";
   import {
     getStatus,
-    getConfig,
     toggleLayout,
-    setLayoutSize,
     startLayoutDrag,
     endLayoutDrag,
+    startLayoutResize,
+    endLayoutResize,
     type Status,
-    type Config,
   } from "$lib/api";
   import {
     loadManifest,
     childrenOf,
     imageUrl,
-    isDeadEnd,
+    isLegend,
     rotationBlocked,
     type LayoutManifest,
   } from "$lib/layouts";
 
   let manifest = $state<LayoutManifest>({});
   let status = $state<Status | null>(null);
-  let config = $state<Config | null>(null);
 
   // Decision-tree cursor + per-zone view state (reset whenever the zone changes).
   let path = $state("");
@@ -47,9 +45,29 @@
   const areaName = $derived(status?.area_name || areaId || "—");
   const paths = $derived(manifest[areaId] ?? []);
   const hasZone = $derived(paths.length > 0);
+  // Real layout candidates at the current branch (legends are pulled out below).
   const candidates = $derived(
-    childrenOf(paths, path).filter((p) => !excluded.includes(p)),
+    childrenOf(paths, path).filter((p) => !excluded.includes(p) && !isLegend(p)),
   );
+  // The zone's legend pages ("x", "x_x", …), ordered by depth. A legend at depth
+  // d documents the layout candidates at hierarchy level d (verified: e.g. g1_8
+  // ~x explains the level-1 symbols, ~x_x the level-2 ones).
+  const legendPaths = $derived(
+    paths
+      .filter((p) => isLegend(p))
+      .sort((a, b) => a.split("_").length - b.split("_").length),
+  );
+  // The single legend to show for the current level: the i-th legend at level i,
+  // clamped to the last one (so it carries forward when a level has none of its
+  // own), and the last legend once the layout is identified.
+  const activeLegend = $derived.by(() => {
+    if (legendPaths.length === 0) return null;
+    const pathDepth = path === "" ? 0 : path.split("_").length;
+    const idx = resolved
+      ? legendPaths.length - 1
+      : Math.min(pathDepth, legendPaths.length - 1);
+    return legendPaths[idx];
+  });
   const resolved = $derived(path !== "" && childrenOf(paths, path).length === 0);
   const blocked = $derived(rotationBlocked(areaId));
   const transform = $derived(
@@ -77,13 +95,6 @@
     flipV = false;
   }
 
-  // Keep the OS window sized to the rendered content.
-  let boxW = $state(0);
-  let boxH = $state(0);
-  $effect(() => {
-    if (boxW > 0 && boxH > 0) setLayoutSize(Math.ceil(boxW), Math.ceil(boxH));
-  });
-
   onMount(() => {
     let alive = true;
     // The layout window is created hidden, and its `listen` event subscription
@@ -92,7 +103,6 @@
     // poll it and only react when the area actually changes (cheap; no flicker).
     (async () => {
       manifest = await loadManifest();
-      config = await getConfig();
       while (alive) {
         const s = await getStatus();
         if (!status || s.area_id !== status.area_id) {
@@ -107,8 +117,6 @@
     };
   });
 
-  const imgSize = $derived(config?.layout_size ?? 360);
-
   // Drag the window by its title bar. WebKitGTK's `data-tauri-drag-region` and
   // Tauri's `setPosition` don't move this window under KWin, so the Rust side
   // follows the mouse with xdotool between start/end (driven by pointerdown/up,
@@ -125,9 +133,26 @@
     window.removeEventListener("blur", endDrag);
     endLayoutDrag();
   }
+
+  // Resize the window via the corner grip. Same approach as the drag: the Rust
+  // side follows the mouse (pointermove is flaky in this WebKitGTK window) and
+  // resizes via set_size; pointerdown/up drive start/end.
+  function startResize(e: PointerEvent) {
+    if (e.button !== 0) return;
+    e.preventDefault();
+    e.stopPropagation();
+    startLayoutResize();
+    window.addEventListener("pointerup", endResize, { once: true });
+    window.addEventListener("blur", endResize, { once: true });
+  }
+  function endResize() {
+    window.removeEventListener("pointerup", endResize);
+    window.removeEventListener("blur", endResize);
+    endLayoutResize();
+  }
 </script>
 
-<div class="viewer" bind:clientWidth={boxW} bind:clientHeight={boxH}>
+<div class="viewer">
   <div class="bar" role="toolbar" tabindex="-1" onpointerdown={startDrag}>
     <span class="title">🗺 {areaName}</span>
     <button class="close" title="Fermer (hotkey)" onclick={() => toggleLayout()}>✕</button>
@@ -136,8 +161,9 @@
   {#if !hasZone}
     <div class="empty">Pas de layout répertorié pour cette zone.</div>
   {:else}
-    <!-- Main image: the deepest committed pick, with the zone's orientation. -->
+    <!-- Main image: the deepest committed pick, with the zone's orientation.
-    <div class="stage" style="width:{imgSize}px;height:{imgSize}px;">
+         The stage flex-grows to fill the window, so the image scales with it. -->
+    <div class="stage">
       {#if path !== ""}
         <img src={imageUrl(areaId, path)} alt={path} style="transform:{transform};" />
       {:else}
@@ -166,12 +192,22 @@
           <button
             class="link"
             onclick={() => (path = crumbs.slice(0, i + 1).join("_"))}
-          >{seg === "x" ? "?" : seg}</button>
+          >{seg}</button>
         {/each}
         <button class="back" onclick={back}>◀ retour</button>
       </div>
     {/if}
 
+    <!-- Zone legend for the current level: always visible while navigating (not a
+         layout candidate). Rendered without the orientation transform — it's a
+         symbol key, not a map. -->
+    {#if activeLegend}
+      <div class="label">Légende :</div>
+      <div class="legend">
+        <img class="legend-img" src={imageUrl(areaId, activeLegend)} alt="légende" />
+      </div>
+    {/if}
+
     <!-- Candidate thumbnails at the current branch. -->
     {#if candidates.length}
       <div class="label">{resolved ? "" : path === "" ? "Layouts possibles :" : "Affine :"}</div>
@@ -179,8 +215,7 @@
         {#each candidates as c}
           <button
             class="thumb"
-            class:dead={isDeadEnd(c)}
+            title={c}
-            title={isDeadEnd(c) ? "Aucun de ceux-ci / non répertorié" : c}
             onclick={() => pick(c)}
             oncontextmenu={(e) => {
               e.preventDefault();
@@ -188,7 +223,7 @@
             }}
           >
             <img src={imageUrl(areaId, c)} alt={c} style="transform:{transform};" />
-            <span class="cap">{isDeadEnd(c) ? "?" : c.split("_").slice(-1)[0]}</span>
+            <span class="cap">{c.split("_").slice(-1)[0]}</span>
           </button>
         {/each}
       </div>
@@ -197,16 +232,27 @@
       <div class="label done">Layout identifié.</div>
     {/if}
   {/if}
+
+  <!-- Corner resize grip (the window has no WM resize borders under KWin). -->
+  <div
+    class="grip"
+    role="button"
+    tabindex="-1"
+    title="Redimensionner"
+    onpointerdown={startResize}
+  ></div>
 </div>
 
 <style>
   .viewer {
-    display: inline-flex;
+    position: fixed;
+    inset: 0;
+    display: flex;
     flex-direction: column;
     background: #0f0c08;
     border: 1px solid var(--border);
+    box-sizing: border-box;
     overflow: hidden;
-    width: max-content;
   }
   .bar {
     display: flex;
@@ -239,10 +285,12 @@
     text-align: center;
   }
   .stage {
+    flex: 1 1 auto;
+    min-height: 80px;
     display: flex;
     align-items: center;
     justify-content: center;
-    margin: 8px auto 4px;
+    margin: 8px 8px 4px;
     background: #000;
     border: 1px solid var(--border);
     overflow: hidden;
@@ -250,6 +298,7 @@
   .stage img {
     max-width: 100%;
     max-height: 100%;
+    object-fit: contain;
     transition: transform 0.12s ease;
   }
   .stage .hint {
@@ -329,12 +378,16 @@
     gap: 6px;
     padding: 4px 8px;
     justify-content: center;
-    max-width: 460px;
+    /* Without this, items stretch on the cross axis, which overrides the
+       thumbs' aspect-ratio and collapses their height to 0. */
+    align-items: flex-start;
   }
   .thumb {
     position: relative;
-    width: 92px;
+    /* Scale with the window width (the viewer fills the viewport), staying
-    height: 92px;
+       square via aspect-ratio, clamped so it never gets tiny or huge. */
+    width: clamp(72px, 24vw, 200px);
+    aspect-ratio: 1;
     padding: 0;
     background: #000;
     border: 1px solid var(--border);
@@ -345,9 +398,22 @@
   .thumb:hover {
     border-color: var(--accent);
   }
-  .thumb.dead {
+  .legend {
-    opacity: 0.6;
+    display: flex;
-    border-style: dashed;
+    flex-wrap: wrap;
+    gap: 6px;
+    padding: 4px 8px;
+    justify-content: center;
+    align-items: flex-start;
+  }
+  .legend-img {
+    /* Symbol key: shown whole (contain, never rotated), scaling with the window. */
+    width: clamp(90px, 28vw, 240px);
+    aspect-ratio: 1;
+    object-fit: contain;
+    background: #000;
+    border: 1px solid var(--border);
+    border-radius: 4px;
   }
   .thumb img {
     width: 100%;
@@ -371,4 +437,20 @@
     color: var(--muted);
     text-align: center;
   }
+  .grip {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    width: 16px;
+    height: 16px;
+    cursor: nwse-resize;
+    background: linear-gradient(
+      135deg,
+      transparent 0 55%,
+      var(--border) 55% 70%,
+      transparent 70% 80%,
+      var(--accent) 80% 100%
+    );
+    z-index: 10;
+  }
 </style>

src/lib/Settings.svelte

@@ -10,6 +10,7 @@
     setOverlayLocked,
     toggleOverlay,
     toggleLayout,
+    setLayoutSize,
     saveOverlayGeometry,
     getTimer,
     timerStart,
@@ -194,8 +195,23 @@
           <label>Hotkey « layouts »
             <input type="text" bind:value={config.hotkey_layout} onchange={save} />
           </label>
-          <label>Taille image (px)
+          <label>Largeur fenêtre (px)
-            <input type="number" min="160" max="800" bind:value={config.layout_size} onchange={save} />
+            <input
+              type="number"
+              min="240"
+              max="2000"
+              bind:value={config.layout_w}
+              onchange={() => { save(); if (config) setLayoutSize(config.layout_w, config.layout_h); }}
+            />
+          </label>
+          <label>Hauteur fenêtre (px)
+            <input
+              type="number"
+              min="200"
+              max="2000"
+              bind:value={config.layout_h}
+              onchange={() => { save(); if (config) setLayoutSize(config.layout_w, config.layout_h); }}
+            />
           </label>
         </div>
         <p class="muted">

src/lib/api.ts

@@ -17,7 +17,8 @@ export interface Config {
   feature_layouts: boolean;
   layout_x: number;
   layout_y: number;
-  layout_size: number;
+  layout_w: number;
+  layout_h: number;
   timer_enabled: boolean;
   timer_pause_in_town: boolean;
   timer_afk_enabled: boolean;
@@ -107,6 +108,8 @@ export const restoreOverlayPosition = () => invoke("restore_overlay_position");
 export const toggleLayout = () => invoke("toggle_layout");
 export const setLayoutSize = (width: number, height: number) =>
   invoke("set_layout_size", { width, height });
+export const startLayoutResize = () => invoke("start_layout_resize");
+export const endLayoutResize = () => invoke("end_layout_resize");
 export const saveLayoutGeometry = () => invoke("save_layout_geometry");
 export const startLayoutDrag = () => invoke("start_layout_drag");
 export const endLayoutDrag = () => invoke("end_layout_drag");

src/lib/layouts.ts

@@ -4,7 +4,8 @@
 // where the path is a decision tree encoded as underscore-separated segments:
 //   "1", "2", "3"      = the candidate layouts you first see entering a zone
 //   "3_1", "3_2"       = refinements of "3" revealed as you explore deeper
-//   "x", "x_x"         = "none of these / not catalogued" dead-ends
+//   "x", "x_x"         = the zone's legend pages (key to the map symbols), NOT
+//                        decision candidates — they're shown persistently.
 // You pick the candidate matching what you see in-game, then keep refining until
 // no children remain. (On disk the space is stored as "~" for URL-safe serving.)
 
@@ -56,8 +57,12 @@ export function childrenOf(paths: string[], path: string): string[] {
     .sort(sortPaths);
 }
 
-/** A path is an "x" (none-of-these / not catalogued) marker. */
+/**
-export function isDeadEnd(path: string): boolean {
+ * A path is a legend page rather than a layout candidate. These are named with
+ * a leading "x" segment ("x", "x_x", …) and hold the key to the map symbols, so
+ * the viewer pulls them out of the decision tree and keeps them always visible.
+ */
+export function isLegend(path: string): boolean {
   return path.split("_")[0] === "x";
 }