openclacky 1.5.7 → 1.5.9

data/lib/clacky/web/projects.js

@@ -48,36 +48,47 @@ const Projects = (() => {
   }
 
   // ── Shared icon helper ────────────────────────────────────────────────────
-  // Reads SVG path from the picker popup DOM and forces a consistent size.
-  // Falls back to a hard-coded folder icon when the popup isn't in the DOM yet.
   const _FOLDER_PATH      = `<path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/>`;
   const _FOLDER_OPEN_PATH = `<path d="m6 14 1.5-2.9A2 2 0 0 1 9.24 10H20a2 2 0 0 1 1.94 2.5l-1.54 6a2 2 0 0 1-1.95 1.5H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h3.9a2 2 0 0 1 1.69.9l.81 1.2a2 2 0 0 0 1.67.9H18a2 2 0 0 1 2 2v2"/>`;
-  function _getIconSvg(iconName, size = 14) {
-    // folder-open is not in the picker; use the built-in path directly
+
+  const _ICON_PATHS = {
+    folder: _FOLDER_PATH,
+    code:    `<polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/>`,
+    book:    `<path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/>`,
+    globe:   `<circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/>`,
+    zap:     `<polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/>`,
+    star:    `<polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/>`,
+    heart:   `<path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/>`,
+    tool:     `<path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/>`,
+    database: `<ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"/><path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"/>`,
+    image:   `<rect x="3" y="3" width="16" height="16" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/>`,
+    music:   `<path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/>`,
+    coffee:  `<path d="M18 8h1a4 4 0 0 1 0 8h-1"/><path d="M2 8h16v9a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V8z"/><line x1="6" y1="1" x2="6" y2="4"/><line x1="10" y1="1" x2="10" y2="4"/><line x1="14" y1="1" x2="14" y2="4"/>`,
+    briefcase: `<rect x="2" y="7" width="20" height="14" rx="2" ry="2"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/>`,
+    flask:   `<path d="M9 3h6"/><path d="M10 3v6l-4 8a1 1 0 0 0 .9 1.5h10.2a1 1 0 0 0 .9-1.5L14 9V3"/>`,
+    chart:   `<line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/>`,
+    rocket:  `<path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z"/><path d="m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z"/><path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0"/><path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5"/>`,
+    dollar:  `<line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/>`,
+    cpu:     `<rect x="4" y="4" width="16" height="16" rx="2"/><rect x="9" y="9" width="6" height="6"/><line x1="9" y1="1" x2="9" y2="4"/><line x1="15" y1="1" x2="15" y2="4"/><line x1="9" y1="20" x2="9" y2="23"/><line x1="15" y1="20" x2="15" y2="23"/><line x1="20" y1="9" x2="23" y2="9"/><line x1="20" y1="14" x2="23" y2="14"/><line x1="1" y1="9" x2="4" y2="9"/><line x1="1" y1="14" x2="4" y2="14"/>`,
+    paint:   `<circle cx="13.5" cy="6.5" r=".5"/><circle cx="17.5" cy="10.5" r=".5"/><circle cx="8.5" cy="7.5" r=".5"/><circle cx="6.5" cy="12.5" r=".5"/><path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z"/>`,
+    leaf:    `<path d="M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10z"/><path d="M2 21c0-3 1.85-5.36 5.08-6C9.5 14.52 12 13 13 12"/>`,
+    trophy:  `<polyline points="8 21 8 14 4 9 4 4 20 4 20 9 16 14 16 21"/><line x1="8" y1="21" x2="16" y2="21"/><path d="M4 9H2a1 1 0 0 0-1 1 6 6 0 0 0 6 6"/><path d="M20 9h2a1 1 0 0 1 1 1 6 6 0 0 1-6 6"/>`,
+    smile:   `<circle cx="12" cy="12" r="10"/><path d="M8 14s1.5 2 4 2 4-2 4-2"/><line x1="9" y1="9" x2="9.01" y2="9"/><line x1="15" y1="9" x2="15.01" y2="9"/>`,
+    map:     `<polygon points="1 6 1 22 8 18 16 22 23 18 23 2 16 6 8 2 1 6"/><line x1="8" y1="2" x2="8" y2="18"/><line x1="16" y1="6" x2="16" y2="22"/>`,
+    flower:  `<path d="M12 7.5a4.5 4.5 0 1 1 4.5 4.5M12 7.5A4.5 4.5 0 1 0 7.5 12M12 7.5V9m-4.5 3a4.5 4.5 0 1 0 4.5 4.5M7.5 12H9m7.5 0a4.5 4.5 0 1 1-4.5 4.5m4.5-4.5H15m-3 4.5V15"/><circle cx="12" cy="12" r="3"/>`,
+  };
+
+  function _getIconSvg(iconName, size = 15.5) {
     if (iconName === "folder-open") {
       return `<svg viewBox="0 0 24 24" width="${size}" height="${size}" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">${_FOLDER_OPEN_PATH}</svg>`;
     }
-    const popup = document.getElementById("project-picker-icons");
-    let inner = null;
-    if (popup) {
-      const btn = popup.querySelector(`[data-icon="${iconName}"]`);
-      if (btn) {
-        // Clone the SVG and override size attrs
-        const svg = btn.querySelector("svg");
-        if (svg) inner = svg.innerHTML;
-      }
-      if (!inner) {
-        const first = popup.querySelector("[data-icon] svg");
-        if (first) inner = first.innerHTML;
-      }
-    }
-    if (!inner) inner = _FOLDER_PATH;
+    const inner = _ICON_PATHS[iconName] || _FOLDER_PATH;
     return `<svg viewBox="0 0 24 24" width="${size}" height="${size}" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">${inner}</svg>`;
   }
 
   // ── State accessors ────────────────────────────────────────────────────────
 
-  function all()    { return _projects; }
+  function all()    { return _sortProjects(_projects); }
 
   function find(id) { return id != null ? (_projects.find(p => p.id === String(id)) || null) : null; }
 
@@ -196,7 +207,9 @@ const Projects = (() => {
           const bi = sortedProjects.findIndex(p => p.id === b.project_id);
           return ai - bi;
         }
-        // Secondary: within project, newest session first
+        // Secondary: within project, pinned first then newest
+        if (a.pinned && !b.pinned) return -1;
+        if (!a.pinned && b.pinned) return 1;
         const ta = a.updated_at || a.created_at || "";
         const tb = b.updated_at || b.created_at || "";
         return tb.localeCompare(ta);
@@ -230,7 +243,9 @@ const Projects = (() => {
       const sessions = Sessions.all
         .filter(s => s.project_id === project.id)
         .sort((a, b) => {
-          // Sessions within a project: always newest first
+          // Pinned sessions first, then newest first
+          if (a.pinned && !b.pinned) return -1;
+          if (!a.pinned && b.pinned) return 1;
           const ta = a.updated_at || a.created_at || "";
           const tb = b.updated_at || b.created_at || "";
           return tb.localeCompare(ta);
@@ -271,29 +286,11 @@ const Projects = (() => {
         <path d="M12 8v8"/>
         <path d="M8 12h8"/>
       </svg>`;
-      newSessionBtn.addEventListener("click", async e => {
+      newSessionBtn.addEventListener("click", e => {
         e.stopPropagation();
-        try {
-          const name = Sessions.nextDefaultName();
-          const res = await fetch("/api/sessions", {
-            method: "POST",
-            headers: { "Content-Type": "application/json" },
-            body: JSON.stringify({
-              name,
-              agent_profile: "general",
-              source: "manual",
-              project_id: project.id,
-            }),
-          });
-          const data = await res.json();
-          if (res.ok && data.session) {
-            Sessions.add(data.session);
-            renderSection();
-            Sessions.select(data.session.id);
-          }
-        } catch (err) {
-          console.error("Failed to create session:", err);
-        }
+        const dir = project.working_dir || (NewSessionStore.state && NewSessionStore.state.defaultDir) || "";
+        NewSessionStore.updateAdvanced({ projectId: project.id, workingDir: dir });
+        Router.navigate("welcome");
       });
       // Actions button (⋯)
       const actionsBtn = document.createElement("button");
@@ -304,28 +301,13 @@ const Projects = (() => {
       </svg>`;
       actionsBtn.addEventListener("click", e => {
         e.stopPropagation();
-        _clearTooltip();
         _showProjectMenu(project.id, actionsBtn);
       });
       header.appendChild(actionsBtn);
       header.appendChild(newSessionBtn);
 
-      // Tooltip on hover — show after short delay; hide via shared _hideTimer
-      header.addEventListener("mouseenter", () => {
-        _cancelHide();
-        clearTimeout(_tooltipTimer);
-        _tooltipTimer = setTimeout(() => {
-          _showProjectTooltip(project, sessions, header);
-        }, 300);
-      });
-      header.addEventListener("mouseleave", () => {
-        clearTimeout(_tooltipTimer);
-        _scheduleHide();
-      });
-
       // Toggle collapse on header click — in-place DOM toggle, no full re-render
       header.addEventListener("click", () => {
-        _clearTooltip();
         const nowCollapsed = _collapsed.has(project.id);
         if (nowCollapsed) {
           _collapsed.delete(project.id);
@@ -372,156 +354,9 @@ const Projects = (() => {
     });
   }
 
-  // ── Project tooltip ────────────────────────────────────────────────────────
-
-  let _tooltipEl    = null;
-  let _tooltipTimer = null;  // show delay
-  let _hideTimer    = null;  // hide delay — shared by header + tooltip
-
-  /** Start hide countdown. Cancelled if mouse re-enters header or tooltip. */
-  function _scheduleHide() {
-    clearTimeout(_hideTimer);
-    _hideTimer = setTimeout(_clearTooltip, 150);
-  }
-
-  /** Cancel pending hide (mouse is back on header or tooltip). */
-  function _cancelHide() {
-    clearTimeout(_hideTimer);
-    _hideTimer = null;
-  }
-
-  /** Create and position the hover tooltip for a project. */
-  function _showProjectTooltip(project, sessions, anchorEl) {
-    _clearTooltip();
-
-    const tip = document.createElement("div");
-    tip.className = "project-tooltip";
-
-    // ── Header: icon + name + session count ──────────────────────────
-    const header = document.createElement("div");
-    header.className = "project-tooltip-header";
-
-    // Project icon — use shared helper (12px, matches text size)
-    const iconWrap = document.createElement("span");
-    iconWrap.className = "project-tooltip-icon";
-    iconWrap.innerHTML = _getIconSvg(project.icon || "folder", 12);
-    if (project.color) iconWrap.style.color = project.color;
-    header.appendChild(iconWrap);
-
-    const nameEl = document.createElement("span");
-    nameEl.className = "project-tooltip-name";
-    nameEl.textContent = project.name;
-    header.appendChild(nameEl);
-
-    tip.appendChild(header);
-
-    // ── Info rows ─────────────────────────────────────────────────────
-    const rows = document.createElement("div");
-    rows.className = "project-tooltip-rows";
-
-    // Helper: build one row with icon (12px) + text
-    const addRow = (iconSvgHtml, text, titleText) => {
-      const row = document.createElement("div");
-      row.className = "project-tooltip-row";
-
-      const iconSpan = document.createElement("span");
-      iconSpan.className = "project-tooltip-row-icon";
-      iconSpan.innerHTML = iconSvgHtml;
-      row.appendChild(iconSpan);
-
-      const textSpan = document.createElement("span");
-      textSpan.className = "project-tooltip-row-text";
-      textSpan.textContent = text;
-      if (titleText) textSpan.title = titleText;
-      row.appendChild(textSpan);
-
-      rows.appendChild(row);
-    };
-
-    // message-circle icon — simple chat bubble, no "+" (used for session count display)
-    const chatIcon = `<svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7.9 20A9 9 0 1 0 4 16.1L2 22z"/></svg>`;
-
-    // Sessions row
-    const sessionText = sessions.length === 0
-      ? I18n.t("projects.noSessions", "No sessions")
-      : I18n.t("projects.tooltip.sessions", "{n} sessions").replace("{n}", sessions.length);
-    addRow(chatIcon, sessionText);
-
-    // Working dir row (only if set) — reuse picker folder icon at 12px
-    if (project.working_dir) {
-      const divider = document.createElement("div");
-      divider.className = "project-tooltip-divider";
-      rows.appendChild(divider);
-
-      const dirRow = document.createElement("div");
-      dirRow.className = "project-tooltip-row project-tooltip-row--clickable";
-      dirRow.title = project.working_dir;
-
-      const iconSpan = document.createElement("span");
-      iconSpan.className = "project-tooltip-row-icon";
-      iconSpan.innerHTML = _getIconSvg("folder", 12);
-      dirRow.appendChild(iconSpan);
-
-      const textSpan = document.createElement("span");
-      textSpan.className = "project-tooltip-row-text";
-      textSpan.textContent = project.working_dir;
-      dirRow.appendChild(textSpan);
-
-      // Click: reveal in Finder/Explorer
-      dirRow.addEventListener("click", () => {
-        fetch("/api/file-action", {
-          method:  "POST",
-          headers: { "Content-Type": "application/json" },
-          body:    JSON.stringify({ path: project.working_dir, action: "reveal" }),
-        }).catch(err => console.error("[Projects] reveal error:", err));
-        _clearTooltip();
-      });
-
-      rows.appendChild(dirRow);
-    }
-
-    tip.appendChild(rows);
-
-    // ── Positioning: right side of the sidebar ───────────────────────
-    document.body.appendChild(tip);
-    _tooltipEl = tip;
-
-    // Hide when mouse leaves tooltip — use shared timer so gap crossing works
-    tip.addEventListener("mouseenter", () => _cancelHide());
-    tip.addEventListener("mouseleave", () => _scheduleHide());
-
-    const rect     = anchorEl.getBoundingClientRect();
-    const tipRect  = tip.getBoundingClientRect();
-    const margin   = 8;   // gap between sidebar and tooltip card
-
-    // Position tooltip 8px right of anchor; ::before pseudo fills the physical gap
-    let left = rect.right + margin;
-    if (left + tipRect.width > window.innerWidth - margin) {
-      left = rect.left - tipRect.width - margin;
-    }
-
-    // Vertically align top with anchor row, but keep inside viewport
-    let top = rect.top;
-    if (top + tipRect.height > window.innerHeight - margin) {
-      top = window.innerHeight - tipRect.height - margin;
-    }
-
-    tip.style.left = `${Math.max(margin, left)}px`;
-    tip.style.top  = `${Math.max(margin, top)}px`;
-  }
-
-  function _clearTooltip() {
-    clearTimeout(_tooltipTimer);
-    _tooltipTimer = null;
-    clearTimeout(_hideTimer);
-    _hideTimer = null;
-    if (_tooltipEl) {
-      _tooltipEl.remove();
-      _tooltipEl = null;
-    }
-  }
+  
 
-  /** Show a small context menu for project actions (edit / delete). */
+  /** Show a small context menu for project actions. */
   function _showProjectMenu(projectId, anchor) {
     // Remove any existing project menu
     document.querySelectorAll(".project-actions-menu").forEach(m => m.remove());
@@ -529,10 +364,24 @@ const Projects = (() => {
     const menu = document.createElement("div");
     menu.className = "project-actions-menu";
 
-    const addItem = (labelKey, defaultLabel, danger, onClick) => {
+    // Lucide icons, embedded to avoid extra asset requests.
+    const iconEdit = `<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 20h9"/><path d="M16.5 3.5a2.121 2.121 0 1 1 3 3L7 19l-4 1 1-4z"/></svg>`;
+    const iconClearSessions = `<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m16 22-1-4"/><path d="M19 14a1 1 0 0 0 1-1v-1a2 2 0 0 0-2-2h-3a1 1 0 0 1-1-1V4a2 2 0 0 0-4 0v5a1 1 0 0 1-1 1H6a2 2 0 0 0-2 2v1a1 1 0 0 0 1 1"/><path d="M19 14H5l-1.973 6.767A1 1 0 0 0 4 22h16a1 1 0 0 0 .973-1.233z"/><path d="m8 22 1-4"/></svg>`;
+    const iconTrash = `<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3 6h18"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>`;
+
+    const addItem = (labelKey, defaultLabel, iconSvg, danger, onClick) => {
       const item = document.createElement("button");
       item.className = "project-actions-menu-item" + (danger ? " danger" : "");
-      item.textContent = I18n.t(labelKey, defaultLabel);
+
+      const icon = document.createElement("span");
+      icon.className = "project-actions-menu-icon";
+      icon.innerHTML = iconSvg;
+
+      const label = document.createElement("span");
+      label.className = "project-actions-menu-label";
+      label.textContent = I18n.t(labelKey, defaultLabel);
+
+      item.append(icon, label);
       item.addEventListener("click", e => {
         e.stopPropagation();
         menu.remove();
@@ -541,9 +390,9 @@ const Projects = (() => {
       menu.appendChild(item);
     };
 
-    addItem("projects.menu.edit", "Edit", false, () => promptEdit(projectId));
-    addItem("projects.menu.deleteSessions", "Delete Sessions", false, () => promptDeleteSessions(projectId));
-    addItem("projects.menu.delete", "Delete",  true,  () => promptDelete(projectId));
+    addItem("projects.menu.edit", "Edit Project", iconEdit, false, () => promptEdit(projectId));
+    addItem("projects.menu.deleteSessions", "Delete Sessions", iconClearSessions, false, () => promptDeleteSessions(projectId));
+    addItem("projects.menu.delete", "Delete", iconTrash, true, () => promptDelete(projectId));
 
     // Position near anchor
     const rect = anchor.getBoundingClientRect();
@@ -647,6 +496,13 @@ const Projects = (() => {
    */
   function _ensureModalDOM() {
     if (document.getElementById("project-picker-popup")) return;
+
+    let iconsHTML = "";
+    for (const [name, path] of Object.entries(_ICON_PATHS)) {
+      const sel = name === "folder" ? " project-picker-icon-option--selected" : "";
+      iconsHTML += `<button class="project-picker-icon-option${sel}" data-icon="${name}" title="${name[0].toUpperCase()}${name.slice(1)}"><svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">${path}</svg></button>`;
+    }
+
     const tpl = document.createElement("div");
     tpl.innerHTML = `
 <div id="project-picker-popup" class="project-picker-popup" style="display:none">
@@ -665,78 +521,7 @@ const Projects = (() => {
   <div class="project-picker-divider"></div>
   <!-- Icon grid -->
   <div class="project-picker-icons" id="project-picker-icons">
-    <button class="project-picker-icon-option project-picker-icon-option--selected" data-icon="folder" title="Folder">
-      <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z"/></svg>
-    </button>
-    <button class="project-picker-icon-option" data-icon="code" title="Code">
-      <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="16 18 22 12 16 6"/><polyline points="8 6 2 12 8 18"/></svg>
-    </button>
-    <button class="project-picker-icon-option" data-icon="book" title="Book">
-      <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/><path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/></svg>
-    </button>
-    <button class="project-picker-icon-option" data-icon="globe" title="Globe">
-      <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><line x1="2" y1="12" x2="22" y2="12"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
-    </button>
-    <button class="project-picker-icon-option" data-icon="zap" title="Zap">
-      <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/></svg>
-    </button>
-    <button class="project-picker-icon-option" data-icon="star" title="Star">
-      <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>
-    </button>
-    <button class="project-picker-icon-option" data-icon="heart" title="Heart">
-      <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"/></svg>
-    </button>
-    <button class="project-picker-icon-option" data-icon="tool" title="Tool">
-      <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14.7 6.3a1 1 0 0 0 0 1.4l1.6 1.6a1 1 0 0 0 1.4 0l3.77-3.77a6 6 0 0 1-7.94 7.94l-6.91 6.91a2.12 2.12 0 0 1-3-3l6.91-6.91a6 6 0 0 1 7.94-7.94l-3.76 3.76z"/></svg>
-    </button>
-    <button class="project-picker-icon-option" data-icon="database" title="Database">
-      <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><ellipse cx="12" cy="5" rx="9" ry="3"/><path d="M21 12c0 1.66-4 3-9 3s-9-1.34-9-3"/><path d="M3 5v14c0 1.66 4 3 9 3s9-1.34 9-3V5"/></svg>
-    </button>
-    <button class="project-picker-icon-option" data-icon="image" title="Image">
-      <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="16" height="16" rx="2" ry="2"/><circle cx="8.5" cy="8.5" r="1.5"/><polyline points="21 15 16 10 5 21"/></svg>
-    </button>
-    <button class="project-picker-icon-option" data-icon="music" title="Music">
-      <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18V5l12-2v13"/><circle cx="6" cy="18" r="3"/><circle cx="18" cy="16" r="3"/></svg>
-    </button>
-    <button class="project-picker-icon-option" data-icon="coffee" title="Coffee">
-      <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8h1a4 4 0 0 1 0 8h-1"/><path d="M2 8h16v9a4 4 0 0 1-4 4H6a4 4 0 0 1-4-4V8z"/><line x1="6" y1="1" x2="6" y2="4"/><line x1="10" y1="1" x2="10" y2="4"/><line x1="14" y1="1" x2="14" y2="4"/></svg>
-    </button>
-    <button class="project-picker-icon-option" data-icon="briefcase" title="Briefcase">
-      <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="2" y="7" width="20" height="14" rx="2" ry="2"/><path d="M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16"/></svg>
-    </button>
-    <button class="project-picker-icon-option" data-icon="flask" title="Flask">
-      <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 3h6"/><path d="M10 3v6l-4 8a1 1 0 0 0 .9 1.5h10.2a1 1 0 0 0 .9-1.5L14 9V3"/></svg>
-    </button>
-    <button class="project-picker-icon-option" data-icon="chart" title="Chart">
-      <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="20" x2="18" y2="10"/><line x1="12" y1="20" x2="12" y2="4"/><line x1="6" y1="20" x2="6" y2="14"/></svg>
-    </button>
-    <button class="project-picker-icon-option" data-icon="rocket" title="Rocket">
-      <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z"/><path d="m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z"/><path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0"/><path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5"/></svg>
-    </button>
-    <button class="project-picker-icon-option" data-icon="dollar" title="Dollar">
-      <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="1" x2="12" y2="23"/><path d="M17 5H9.5a3.5 3.5 0 0 0 0 7h5a3.5 3.5 0 0 1 0 7H6"/></svg>
-    </button>
-    <button class="project-picker-icon-option" data-icon="cpu" title="CPU">
-      <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="4" y="4" width="16" height="16" rx="2"/><rect x="9" y="9" width="6" height="6"/><line x1="9" y1="1" x2="9" y2="4"/><line x1="15" y1="1" x2="15" y2="4"/><line x1="9" y1="20" x2="9" y2="23"/><line x1="15" y1="20" x2="15" y2="23"/><line x1="20" y1="9" x2="23" y2="9"/><line x1="20" y1="14" x2="23" y2="14"/><line x1="1" y1="9" x2="4" y2="9"/><line x1="1" y1="14" x2="4" y2="14"/></svg>
-    </button>
-    <button class="project-picker-icon-option" data-icon="paint" title="Paint">
-      <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="13.5" cy="6.5" r=".5"/><circle cx="17.5" cy="10.5" r=".5"/><circle cx="8.5" cy="7.5" r=".5"/><circle cx="6.5" cy="12.5" r=".5"/><path d="M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z"/></svg>
-    </button>
-    <button class="project-picker-icon-option" data-icon="leaf" title="Leaf">
-      <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10z"/><path d="M2 21c0-3 1.85-5.36 5.08-6C9.5 14.52 12 13 13 12"/></svg>
-    </button>
-    <button class="project-picker-icon-option" data-icon="trophy" title="Trophy">
-      <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="8 21 8 14 4 9 4 4 20 4 20 9 16 14 16 21"/><line x1="8" y1="21" x2="16" y2="21"/><path d="M4 9H2a1 1 0 0 0-1 1 6 6 0 0 0 6 6"/><path d="M20 9h2a1 1 0 0 1 1 1 6 6 0 0 1-6 6"/></svg>
-    </button>
-    <button class="project-picker-icon-option" data-icon="smile" title="Smile">
-      <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M8 14s1.5 2 4 2 4-2 4-2"/><line x1="9" y1="9" x2="9.01" y2="9"/><line x1="15" y1="9" x2="15.01" y2="9"/></svg>
-    </button>
-    <button class="project-picker-icon-option" data-icon="map" title="Map">
-      <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polygon points="1 6 1 22 8 18 16 22 23 18 23 2 16 6 8 2 1 6"/><line x1="8" y1="2" x2="8" y2="18"/><line x1="16" y1="6" x2="16" y2="22"/></svg>
-    </button>
-    <button class="project-picker-icon-option" data-icon="flower" title="Flower">
-      <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 7.5a4.5 4.5 0 1 1 4.5 4.5M12 7.5A4.5 4.5 0 1 0 7.5 12M12 7.5V9m-4.5 3a4.5 4.5 0 1 0 4.5 4.5M7.5 12H9m7.5 0a4.5 4.5 0 1 1-4.5 4.5m4.5-4.5H15m-3 4.5V15"/><circle cx="12" cy="12" r="3"/></svg>
-    </button>
+    ${iconsHTML}
   </div>
   <!-- Done button -->
   <div class="project-picker-footer">
@@ -775,6 +560,7 @@ const Projects = (() => {
             </button>
           </div>
         </div>
+        <div id="create-project-folder-hint" class="create-project-folder-hint" data-i18n="projects.create.folderDefaultHint">If not set, the default working directory ~/clacky_workspace will be used</div>
       </div>
     </div>
     <div class="modal-footer">
@@ -810,6 +596,7 @@ const Projects = (() => {
       const folderCard  = $("create-project-folder-card");
       const folderName  = $("create-project-folder-name");
       const folderRemoveBtn = $("create-project-folder-remove");
+      const folderHint  = $("create-project-folder-hint");
 
       // State
       let selectedColor = "";       // "" = default (accent)
@@ -859,6 +646,7 @@ const Projects = (() => {
           folderCard.style.display  = "none";
           folderArea.style.cursor   = "pointer";
         }
+        folderHint.style.display = selectedDir ? "none" : "";
       };
 
       // Reset all state (prefill when editing an existing project)
@@ -1123,6 +911,12 @@ const Projects = (() => {
     }
   }
 
+  function expand(projectId) {
+    if (!projectId) return;
+    _collapsed.delete(String(projectId));
+    _saveCollapsed();
+  }
+
   // ── Init ───────────────────────────────────────────────────────────────────
 
   function init() {
@@ -1158,6 +952,8 @@ const Projects = (() => {
         _showOrganizeMenu(btnOrganize);
       });
     }
+
+    document.addEventListener("langchange", () => renderSection());
   }
 
   // ── Public API ─────────────────────────────────────────────────────────────
@@ -1174,6 +970,8 @@ const Projects = (() => {
     promptEdit,
     promptDelete,
     renderSection,
+    expand,
+    getIconSvg: _getIconSvg,
     init,
   };
 })();