feat(toolbar): collapsible and per-tool customizable structure toolbar (#568)

* feat(toolbar): add collapsible customizable structure tools

* fix(bonds): make JS fallback PBC-aware

Author: Hello-QM

src/lib/i18n/en/structure.ts

@@ -1833,6 +1833,40 @@ const structure: Record<string, string> = {
   phase_reset_camera_r_key: `Reset camera view (R key)`,
   phase_drop_json_load_data: `Drop JSON file to load phase diagram data`,
 
+  // Customizable structure toolbar
+  toolbar_customize: `Customize toolbar`,
+  toolbar_collapse: `Collapse toolbar`,
+  toolbar_expand: `Expand toolbar`,
+  toolbar_preferences: `Toolbar preferences`,
+  toolbar_reset: `Restore defaults`,
+  toolbar_group_view: `View`,
+  toolbar_group_editing: `Editing`,
+  toolbar_group_analysis: `Analysis`,
+  toolbar_group_compute: `Compute & Files`,
+  toolbar_group_assistant: `Assistant & Plugins`,
+  toolbar_tool_reset_camera: `Reset camera`,
+  toolbar_tool_view_angles: `View angles`,
+  toolbar_tool_fullscreen: `Fullscreen`,
+  toolbar_tool_info: `Structure info`,
+  toolbar_tool_controls: `Display controls`,
+  toolbar_tool_performance: `Large-system performance`,
+  toolbar_tool_molstar: `Open in Mol*`,
+  toolbar_tool_gesture: `Gesture controls`,
+  toolbar_tool_touch: `Touch controls`,
+  toolbar_tool_draw: `Draw mode`,
+  toolbar_tool_build: `Build tools`,
+  toolbar_tool_optimize: `Structure optimizer`,
+  toolbar_tool_analysis: `Analysis tools`,
+  toolbar_tool_measure: `Measurements`,
+  toolbar_tool_workflow: `Workflow`,
+  toolbar_tool_server: `Server / HPC`,
+  toolbar_tool_upload_hpc: `Upload to HPC`,
+  toolbar_tool_terminal: `Terminal`,
+  toolbar_tool_io: `Import / Export`,
+  toolbar_tool_remote_save: `Save back to remote`,
+  toolbar_tool_chat: `AI assistant`,
+  toolbar_tool_plugin_hub: `Plugin hub`,
+
   // Pathway controls
   pathway_surface_label: `Surface`,
   pathway_surface_n: `Surface {n}`,

src/lib/i18n/zh/structure.ts

@@ -1787,6 +1787,40 @@ const structure: Record<string, string> = {
   phase_reset_camera_r_key: `重置相机视图（R 键）`,
   phase_drop_json_load_data: `拖放 JSON 文件以加载相图数据`,
 
+  // 可自定义结构工具栏
+  toolbar_customize: `自定义工具栏`,
+  toolbar_collapse: `折叠工具栏`,
+  toolbar_expand: `展开工具栏`,
+  toolbar_preferences: `工具栏设置`,
+  toolbar_reset: `恢复默认`,
+  toolbar_group_view: `视图`,
+  toolbar_group_editing: `编辑`,
+  toolbar_group_analysis: `分析`,
+  toolbar_group_compute: `计算与文件`,
+  toolbar_group_assistant: `助手与插件`,
+  toolbar_tool_reset_camera: `重置相机`,
+  toolbar_tool_view_angles: `视角`,
+  toolbar_tool_fullscreen: `全屏`,
+  toolbar_tool_info: `结构信息`,
+  toolbar_tool_controls: `显示设置`,
+  toolbar_tool_performance: `大体系性能模式`,
+  toolbar_tool_molstar: `在 Mol* 中打开`,
+  toolbar_tool_gesture: `手势控制`,
+  toolbar_tool_touch: `触控操作`,
+  toolbar_tool_draw: `绘制模式`,
+  toolbar_tool_build: `构建工具`,
+  toolbar_tool_optimize: `结构优化`,
+  toolbar_tool_analysis: `分析工具`,
+  toolbar_tool_measure: `测量`,
+  toolbar_tool_workflow: `工作流`,
+  toolbar_tool_server: `服务器 / HPC`,
+  toolbar_tool_upload_hpc: `上传到 HPC`,
+  toolbar_tool_terminal: `终端`,
+  toolbar_tool_io: `导入 / 导出`,
+  toolbar_tool_remote_save: `保存回远程`,
+  toolbar_tool_chat: `AI 助手`,
+  toolbar_tool_plugin_hub: `插件中心`,
+
   // 路径控制
   pathway_surface_label: `表面`,
   pathway_surface_n: `表面 {n}`,

src/lib/structure/OptimizationPane.svelte

@@ -31,6 +31,7 @@
     pane_open = $bindable(false),
     toggle_props = {},
     pane_props = {},
+    show_toggle = true,
     on_push_undo,
     on_structure_change,
     selected_indices = [],
@@ -40,6 +41,7 @@
     pane_open?: boolean
     toggle_props?: ComponentProps<typeof DraggablePane>['toggle_props']
     pane_props?: ComponentProps<typeof DraggablePane>['pane_props']
+    show_toggle?: boolean
     on_push_undo?: () => void
     on_structure_change?: (structure: AnyStructure) => void
     /** Indices of selected atoms to optimize (if empty, all atoms are optimized) */
@@ -546,6 +548,7 @@
 
 <DraggablePane
   bind:show={pane_open}
+  {show_toggle}
   max_width="20em"
   close_on_click_outside={false}
   toggle_props={{

src/lib/structure/Structure.svelte

@@ -165,6 +165,11 @@
   } from './controllers/viewer-controller'
   // tool-controller.svelte.ts exists but is not yet wired (template bind: compatibility)
   import StructureToolbar from './StructureToolbar.svelte'
+  import {
+    pane_toolbar,
+    register_toolbar_pane,
+    type ToolbarToolId,
+  } from './toolbar-state.svelte'
   import { MdAnalysisPane, MdPlot } from '$lib/md'
   import SlowGrowthPane from '$lib/structure/SlowGrowthPane.svelte'
   import ScaleBar from '$lib/structure/ScaleBar.svelte'
@@ -1211,6 +1216,18 @@
     & Omit<ComponentProps<typeof StructureControls>, `children` | `onclose`>
     & Omit<HTMLAttributes<HTMLDivElement>, `children`> = $props()
 
+  const toolbar_fallback_key = $props.id()
+  let toolbar_pane_key = $derived(viewer_id ?? tab_id ?? toolbar_fallback_key)
+  let structure_toolbar_prefs = $derived(pane_toolbar(toolbar_pane_key))
+  $effect(() => register_toolbar_pane(toolbar_pane_key))
+
+  function structure_toolbar_tool_visible(tool_id: ToolbarToolId): boolean {
+    const forced_hidden = hidden_toolbar_items.includes(tool_id) ||
+      (tool_id === `upload_hpc` && hidden_toolbar_items.includes(`server`))
+    return !structure_toolbar_prefs.collapsed && !forced_hidden &&
+      !structure_toolbar_prefs.hidden.includes(tool_id)
+  }
+
   // ── Initialize Controllers (must be after $props() so closures can capture structure, wrapper, etc.) ──
   settings = create_settings_controller({
     get_structure: () => structure,
@@ -3781,6 +3798,8 @@
     </div>
   {:else if (structure?.sites?.length ?? 0) > 0}
     <StructureToolbar
+      pane_key={toolbar_pane_key}
+      show_info_tool={enable_info_pane && !!structure}
       {camera_has_moved}
       {visible_buttons}
       {hide_extra_tools}
@@ -4039,6 +4058,7 @@
 
         {#if structure}
           <OptimizationPane
+            show_toggle={structure_toolbar_tool_visible(`optimize`)}
             bind:structure
             bind:pane_open={optimization_pane_open}
             on_push_undo={push_to_undo}
@@ -4629,6 +4649,7 @@
         <!-- === Info / Export / Settings === -->
         {#if enable_info_pane && structure}
           <StructureInfoPane
+            show_toggle={structure_toolbar_tool_visible(`info`)}
             {structure}
             bind:pane_open={info_pane_open}
             {selected_sites}
@@ -4640,6 +4661,7 @@
         <!-- ExportPane is now embedded inside IOPane -->
 
         <StructureControls
+          show_toggle={structure_toolbar_tool_visible(`controls`)}
           bind:controls_open
           bind:scene_props
           bind:lattice_props

src/lib/structure/StructureInfoPane.svelte

@@ -20,6 +20,7 @@
     atom_count_thresholds = [50, 500],
     toggle_props = {},
     pane_props = {},
+    show_toggle = true,
     highlighted_sites = $bindable([]),
     selected_sites = $bindable([]),
     symmetry_data = null,
@@ -30,6 +31,7 @@
     atom_count_thresholds?: [number, number] // if atom count is less than min_threshold, show sites, if atom count is greater than max_threshold, hide sites. in between, show sites behind a toggle button.
     toggle_props?: ComponentProps<typeof DraggablePane>[`toggle_props`]
     pane_props?: ComponentProps<typeof DraggablePane>[`pane_props`]
+    show_toggle?: boolean
     highlighted_sites?: number[] // Sites highlighted from Wyckoff table hover
     selected_sites?: number[] // Sites selected from Wyckoff table click
     symmetry_data?: MoyoDataset | null // Symmetry analysis data (bindable for external access)
@@ -325,6 +327,7 @@
 
 <DraggablePane
   bind:show={pane_open}
+  {show_toggle}
   max_width="24em"
   toggle_props={{
     class: `structure-info-toggle`,

src/lib/structure/StructureScene.svelte

@@ -3433,9 +3433,9 @@
 
   // The first bond computation can run before the ferrox WASM finishes loading
   // (a popout window loads its structure at mount; mobile cold-starts are slow).
-  // compute_bonds_sync then falls back to the pure-JS path, which emits NO
-  // cross-cell PBC bonds. When WASM finishes, recompute ONCE with the real
-  // (PBC-aware) detector. Done imperatively + untracked so it can't entangle
+  // atom_radii now has an exact PBC-aware JS fallback; the heuristic strategies
+  // still need Rust for their periodic graphs. When WASM finishes, recompute
+  // ONCE with the preferred detector. Done imperatively + untracked so it can't entangle
   // with the reactive bond effect above (that would loop on bond_state writes).
   $effect(() => on_ferrox_wasm_ready(() => untrack(() => {
     invalidate_bonds_for_recompute(bond_state, bond_input)