poi-plugin-item-improvement2-beta 1.0.95 → 1.0.96

package/README.md

@@ -37,3 +37,9 @@ npm run publish:beta
 ```
 
 The beta script temporarily changes the package and runtime namespace to `poi-plugin-item-improvement2-beta-beta`, publishes it, and restores the source tree even when publication fails.
+
+## Interface
+
+Both the improvement list and the improvement plan support local search. The user-facing planning entry is named **Improvement Plan**.
+
+The toolbar also provides a persisted **Use new interface** option. The legacy interface remains available, while the new interface separates improvement search and planning into top-level modes. Existing saved plans keep using their original storage key and require no migration.

package/assets/main.css

@@ -14,6 +14,8 @@
   display: flex;
   flex-direction: row;
   white-space: nowrap;
+  overflow-x: auto;
+  overflow-y: hidden;
 }
 #item-improvement .form-group {
   margin-bottom: 0px;
@@ -231,3 +233,64 @@
 .improvement-changelog-version li + li {
   margin-top: 6px;
 }
+
+#item-improvement .interface-header {
+  flex: 0 0 auto;
+  width: 100%;
+}
+
+#item-improvement .new-interface-toolbar {
+  width: 100%;
+  padding: 4px 0;
+}
+
+#item-improvement .new-interface-toolbar .weekday-nav {
+  margin-top: 4px;
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+
+#item-improvement .interface-mode-nav {
+  flex: 0 1 auto !important;
+}
+
+#item-improvement .new-interface-toggle {
+  flex: 0 0 auto;
+  margin: 0 4px 0 10px;
+  white-space: nowrap;
+}
+
+#item-improvement .new-interface-toggle label,
+#item-improvement .new-interface-toggle input {
+  cursor: pointer;
+}
+
+#item-improvement .improvement-search-box {
+  display: flex;
+  align-items: center;
+  margin: 8px 0;
+}
+
+#item-improvement .improvement-search-box .input-group {
+  flex: 1;
+  margin-right: 8px;
+}
+
+#item-improvement .improvement-search-count {
+  flex: 0 0 auto;
+  min-width: 5em;
+  text-align: right;
+  white-space: nowrap;
+  opacity: 0.75;
+}
+
+#item-improvement .improvement-empty-state {
+  padding: 32px 12px;
+  text-align: center;
+  opacity: 0.7;
+}
+
+#item-improvement .list-container {
+  height: auto;
+  min-height: 0;
+}

package/i18n/en-US.json

@@ -43,7 +43,7 @@
   "Available": " (Available: %d)",
   "New equipment plan": "New equipment plan",
   "Expand only non-empty categories": "Expand only non-empty categories",
-  "Starcraft": "Starcraft",
+  "Starcraft": "Improvement Plan",
   "Your personal planner for crafting stars": "Your personal planner for crafting stars",
   "What's New": "What's New",
   "Release Notes": "Release Notes",
@@ -59,5 +59,16 @@
   "changelog_1_0_21_stable_data": "Improvement information now loads and updates more reliably.",
   "changelog_1_0_21_separate_routes": "Improvement routes with different materials, costs, or upgrade targets are now shown in separate tables.",
   "changelog_1_0_21_tamanami_route": "Added Tamanami Kai Ni’s dedicated material route and kept it separate from the normal route.",
-  "changelog_1_0_27_data_safety": "Improved data safety checks so incomplete or incompatible improvement information is rejected instead of being displayed incorrectly."
+  "changelog_1_0_27_data_safety": "Improved data safety checks so incomplete or incompatible improvement information is rejected instead of being displayed incorrectly.",
+  "Improvement Query": "Improvement Search",
+  "Use new interface": "Use new interface",
+  "Search improvement list": "Search equipment, assistant ships, or IDs",
+  "Search improvement plans": "Search planned equipment or categories",
+  "Clear search": "Clear search",
+  "Search results": "%d results",
+  "No matching equipment": "No matching equipment",
+  "No matching plans": "No matching planned equipment",
+  "changelog_1_0_30_plan_name": "“Starcraft” has been renamed to the clearer “Improvement Plan”.",
+  "changelog_1_0_30_search": "Search is now available in both the improvement list and the improvement plan.",
+  "changelog_1_0_30_new_interface": "Added a saved “Use new interface” option that separates improvement search from planning."
 }

package/i18n/ja-JP.json

@@ -43,7 +43,7 @@
   "Available": " (利用可能: %d)",
   "New equipment plan": "新しい改修計画",
   "Expand only non-empty categories": "改修計画がある装備種類だけを展開",
-  "Starcraft": "スタークラフト",
+  "Starcraft": "改修計画",
   "Your personal planner for crafting stars": "装備改修計画",
   "What's New": "更新履歴",
   "Release Notes": "更新履歴",
@@ -59,5 +59,16 @@
   "changelog_1_0_21_stable_data": "改修情報の読み込みと更新をより安定させました。",
   "changelog_1_0_21_separate_routes": "必要装備、資材、更新先が異なる改修ルートを別々の表で表示するようにしました。",
   "changelog_1_0_21_tamanami_route": "玉波改二専用の改修素材ルートを追加し、通常ルートと混在しないようにしました。",
-  "changelog_1_0_27_data_safety": "不完全または互換性のない改修情報を誤って表示しないよう、データ確認を強化しました。"
+  "changelog_1_0_27_data_safety": "不完全または互換性のない改修情報を誤って表示しないよう、データ確認を強化しました。",
+  "Improvement Query": "改修検索",
+  "Use new interface": "新しい画面を使用",
+  "Search improvement list": "装備・二番艦・IDを検索",
+  "Search improvement plans": "計画装備・装備カテゴリを検索",
+  "Clear search": "検索をクリア",
+  "Search results": "%d 件",
+  "No matching equipment": "条件に一致する装備がありません",
+  "No matching plans": "条件に一致する計画装備がありません",
+  "changelog_1_0_30_plan_name": "「スタークラフト」を、分かりやすい「改修計画」に名称変更しました。",
+  "changelog_1_0_30_search": "改修一覧と改修計画の両方に検索を追加し、装備名やIDなどから素早く探せるようになりました。",
+  "changelog_1_0_30_new_interface": "保存可能な「新しい画面を使用」設定を追加し、改修検索と改修計画を別々の入口に整理しました。"
 }

package/i18n/zh-CN.json

@@ -43,7 +43,7 @@
   "Available": " (可用: %d)",
   "New equipment plan": "新建装备计划",
   "Expand only non-empty categories": "仅展开内容非空的装备类别",
-  "Starcraft": "星级争霸",
+  "Starcraft": "改修计划",
   "Your personal planner for crafting stars": "装备改修规划书",
   "What's New": "更新日志",
   "Release Notes": "更新日志",
@@ -59,5 +59,16 @@
   "changelog_1_0_21_stable_data": "改修信息的加载和更新更加稳定。",
   "changelog_1_0_21_separate_routes": "材料、资材或升级目标不同的改修路线现在会分表展示。",
   "changelog_1_0_21_tamanami_route": "补充玉波改二专属的改修材料路线，避免与普通路线混在一起。",
-  "changelog_1_0_27_data_safety": "加强改修资料完整性检查，遇到不完整或不兼容的资料时会拒绝加载，避免显示错误内容。"
+  "changelog_1_0_27_data_safety": "加强改修资料完整性检查，遇到不完整或不兼容的资料时会拒绝加载，避免显示错误内容。",
+  "Improvement Query": "改修查询",
+  "Use new interface": "使用新版界面",
+  "Search improvement list": "搜索装备、二号舰或编号",
+  "Search improvement plans": "搜索计划装备或装备类型",
+  "Clear search": "清除搜索",
+  "Search results": "找到 %d 件",
+  "No matching equipment": "没有符合条件的装备",
+  "No matching plans": "没有符合条件的计划装备",
+  "changelog_1_0_30_plan_name": "“星级争霸”已更名为更易理解的“改修计划”。",
+  "changelog_1_0_30_search": "改修列表和改修计划都新增搜索，可按装备名称、编号及相关信息快速查找。",
+  "changelog_1_0_30_new_interface": "新增可保存的“使用新版界面”选项；新版将改修查询与改修计划分成独立入口。"
 }

package/i18n/zh-TW.json

@@ -43,7 +43,7 @@
   "Available": " (可用: %d)",
   "New equipment plan": "新建裝備計劃",
   "Expand only non-empty categories": "僅展開內容非空的裝備類別",
-  "Starcraft": "星海爭霸",
+  "Starcraft": "改修計畫",
   "Your personal planner for crafting stars": "裝備改修規劃書",
   "What's New": "更新日誌",
   "Release Notes": "更新日誌",
@@ -59,5 +59,16 @@
   "changelog_1_0_21_stable_data": "改修資訊的載入與更新更加穩定。",
   "changelog_1_0_21_separate_routes": "材料、資材或升級目標不同的改修路線現在會分表顯示。",
   "changelog_1_0_21_tamanami_route": "補充玉波改二專屬的改修材料路線，避免與一般路線混在一起。",
-  "changelog_1_0_27_data_safety": "加強改修資料完整性檢查，遇到不完整或不相容的資料時會拒絕載入，避免顯示錯誤內容。"
+  "changelog_1_0_27_data_safety": "加強改修資料完整性檢查，遇到不完整或不相容的資料時會拒絕載入，避免顯示錯誤內容。",
+  "Improvement Query": "改修查詢",
+  "Use new interface": "使用新版介面",
+  "Search improvement list": "搜尋裝備、二號艦或編號",
+  "Search improvement plans": "搜尋計畫裝備或裝備類型",
+  "Clear search": "清除搜尋",
+  "Search results": "找到 %d 件",
+  "No matching equipment": "沒有符合條件的裝備",
+  "No matching plans": "沒有符合條件的計畫裝備",
+  "changelog_1_0_30_plan_name": "「星級爭霸」已更名為更容易理解的「改修計畫」。",
+  "changelog_1_0_30_search": "改修列表與改修計畫都新增搜尋，可依裝備名稱、編號及相關資訊快速查找。",
+  "changelog_1_0_30_new_interface": "新增可保存的「使用新版介面」選項；新版將改修查詢與改修計畫分成獨立入口。"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "poi-plugin-item-improvement2-beta",
-  "version": "1.0.95",
+  "version": "1.0.96",
   "description": "View KanColle equipment improvement schedules, routes, costs, and required materials in Poi",
   "main": "index.js",
   "scripts": {

package/views/changelog.js

@@ -13,6 +13,9 @@ const CHANGELOG_BASELINE_VERSION = '1.0.20'; // Keep in-app notes focused on use
 
 exports.CHANGELOG_BASELINE_VERSION = CHANGELOG_BASELINE_VERSION;
 const CHANGELOG = [{
+  version: '1.0.30',
+  items: ['changelog_1_0_30_plan_name', 'changelog_1_0_30_search', 'changelog_1_0_30_new_interface']
+}, {
   version: '1.0.27',
   items: ['changelog_1_0_27_data_safety']
 }, {

package/views/item-info-area.js

@@ -25,6 +25,12 @@ var _starcraftArea = require("./starcraft/starcraft-area");
 
 var _utils = require("./starcraft/utils");
 
+var _searchBox = require("./search-box");
+
+var _search = require("./search");
+
+var _uiPreferences = require("./ui-preferences");
+
 var _selectors = require("./selectors");
 
 var _class, _temp2;
@@ -39,6 +45,7 @@ const {
 const {
   config
 } = window;
+const PLAN_VIEW_KEY = 10;
 
 const getJSTDayofWeek = () => {
   const date = new Date();
@@ -51,6 +58,36 @@ const getJSTDayofWeek = () => {
   return day;
 };
 
+const WeekdayNav = ({
+  activeKey,
+  onSelect
+}) => _react.default.createElement(_reactBootstrap.Nav, {
+  className: "main-nav weekday-nav",
+  bsStyle: "pills",
+  activeKey: activeKey,
+  onSelect: onSelect
+}, _react.default.createElement(_reactBootstrap.NavItem, {
+  eventKey: 0
+}, __('Sunday')), _react.default.createElement(_reactBootstrap.NavItem, {
+  eventKey: 1
+}, __('Monday')), _react.default.createElement(_reactBootstrap.NavItem, {
+  eventKey: 2
+}, __('Tuesday')), _react.default.createElement(_reactBootstrap.NavItem, {
+  eventKey: 3
+}, __('Wednesday')), _react.default.createElement(_reactBootstrap.NavItem, {
+  eventKey: 4
+}, __('Thursday')), _react.default.createElement(_reactBootstrap.NavItem, {
+  eventKey: 5
+}, __('Friday')), _react.default.createElement(_reactBootstrap.NavItem, {
+  eventKey: 6
+}, __('Saturday')), _react.default.createElement(_reactBootstrap.NavItem, {
+  eventKey: -1
+}, __('All')));
+
+WeekdayNav.propTypes = {
+  activeKey: _propTypes.default.number.isRequired,
+  onSelect: _propTypes.default.func.isRequired
+};
 const ItemInfoArea = (0, _reactRedux.connect)(state => ({
   plans: (0, _selectors.starCraftPlanSelector)(state),
   data: (0, _selectors.improvementDataSelector)(state),
@@ -65,6 +102,9 @@ const ItemInfoArea = (0, _reactRedux.connect)(state => ({
       writable: true,
       value: {
         day: getJSTDayofWeek(),
+        lastQueryDay: getJSTDayofWeek(),
+        listSearchQuery: '',
+        useNewInterface: (0, _uiPreferences.getUseNewInterface)(config),
         changelogEntries: [],
         showChangelog: false
       }
@@ -93,8 +133,38 @@ const ItemInfoArea = (0, _reactRedux.connect)(state => ({
       enumerable: true,
       writable: true,
       value: key => {
+        const day = Number(key);
+        this.setState(prevState => ({
+          day,
+          lastQueryDay: day < 7 ? day : prevState.lastQueryDay
+        }));
+      }
+    }), Object.defineProperty(this, "handleModeChange", {
+      configurable: true,
+      enumerable: true,
+      writable: true,
+      value: mode => {
+        this.setState(prevState => ({
+          day: mode === 'plan' ? PLAN_VIEW_KEY : prevState.lastQueryDay
+        }));
+      }
+    }), Object.defineProperty(this, "handleNewInterfaceChange", {
+      configurable: true,
+      enumerable: true,
+      writable: true,
+      value: event => {
+        const useNewInterface = (0, _uiPreferences.setUseNewInterface)(config, event.target.checked);
+        this.setState({
+          useNewInterface
+        });
+      }
+    }), Object.defineProperty(this, "handleListSearchChange", {
+      configurable: true,
+      enumerable: true,
+      writable: true,
+      value: listSearchQuery => {
         this.setState({
-          day: key
+          listSearchQuery
         });
       }
     }), Object.defineProperty(this, "getRows", {
@@ -106,7 +176,114 @@ const ItemInfoArea = (0, _reactRedux.connect)(state => ({
           data,
           idByDay
         } = this.props;
-        return _fp.default.flow(_fp.default.filter(row => day === -1 || (idByDay[day] || []).includes(row.id)), _fp.default.sortBy([row => -row.priority, row => row.api_type[2], row => row.api_type[3], row => row.api_name]))(data);
+
+        const rows = _fp.default.flow(_fp.default.filter(row => day === -1 || (idByDay[day] || []).includes(row.id)), _fp.default.sortBy([row => -row.priority, row => row.api_type[2], row => row.api_type[3], row => row.api_name]))(data);
+
+        return (0, _search.filterImprovementRows)(rows, this.state.listSearchQuery);
+      }
+    }), Object.defineProperty(this, "renderInterfaceSwitch", {
+      configurable: true,
+      enumerable: true,
+      writable: true,
+      value: () => _react.default.createElement(_reactBootstrap.Checkbox, {
+        inline: true,
+        className: "new-interface-toggle",
+        checked: this.state.useNewInterface,
+        onChange: this.handleNewInterfaceChange
+      }, __('Use new interface'))
+    }), Object.defineProperty(this, "renderLegacyToolbar", {
+      configurable: true,
+      enumerable: true,
+      writable: true,
+      value: () => _react.default.createElement("div", {
+        className: "improvement-toolbar"
+      }, _react.default.createElement(_reactBootstrap.Nav, {
+        className: "main-nav",
+        bsStyle: "pills",
+        activeKey: this.state.day,
+        onSelect: this.handleKeyChange
+      }, _react.default.createElement(_reactBootstrap.NavItem, {
+        eventKey: 0
+      }, __('Sunday')), _react.default.createElement(_reactBootstrap.NavItem, {
+        eventKey: 1
+      }, __('Monday')), _react.default.createElement(_reactBootstrap.NavItem, {
+        eventKey: 2
+      }, __('Tuesday')), _react.default.createElement(_reactBootstrap.NavItem, {
+        eventKey: 3
+      }, __('Wednesday')), _react.default.createElement(_reactBootstrap.NavItem, {
+        eventKey: 4
+      }, __('Thursday')), _react.default.createElement(_reactBootstrap.NavItem, {
+        eventKey: 5
+      }, __('Friday')), _react.default.createElement(_reactBootstrap.NavItem, {
+        eventKey: 6
+      }, __('Saturday')), _react.default.createElement(_reactBootstrap.NavItem, {
+        eventKey: -1
+      }, __('All')), _react.default.createElement(_reactBootstrap.NavItem, {
+        eventKey: PLAN_VIEW_KEY
+      }, __('Starcraft'))), this.renderInterfaceSwitch(), _react.default.createElement(_reactBootstrap.Button, {
+        bsSize: "small",
+        bsStyle: "link",
+        className: "changelog-button",
+        onClick: this.handleShowChangelog
+      }, __("What's New")))
+    }), Object.defineProperty(this, "renderNewToolbar", {
+      configurable: true,
+      enumerable: true,
+      writable: true,
+      value: () => {
+        const isPlan = this.state.day === PLAN_VIEW_KEY;
+        return _react.default.createElement("div", {
+          className: "new-interface-toolbar"
+        }, _react.default.createElement("div", {
+          className: "improvement-toolbar"
+        }, _react.default.createElement(_reactBootstrap.Nav, {
+          className: "main-nav interface-mode-nav",
+          bsStyle: "pills",
+          activeKey: isPlan ? 'plan' : 'query',
+          onSelect: this.handleModeChange
+        }, _react.default.createElement(_reactBootstrap.NavItem, {
+          eventKey: "query"
+        }, __('Improvement Query')), _react.default.createElement(_reactBootstrap.NavItem, {
+          eventKey: "plan"
+        }, __('Starcraft'))), this.renderInterfaceSwitch(), _react.default.createElement(_reactBootstrap.Button, {
+          bsSize: "small",
+          bsStyle: "link",
+          className: "changelog-button",
+          onClick: this.handleShowChangelog
+        }, __("What's New"))), !isPlan && _react.default.createElement(WeekdayNav, {
+          activeKey: this.state.day,
+          onSelect: this.handleKeyChange
+        }));
+      }
+    }), Object.defineProperty(this, "renderList", {
+      configurable: true,
+      enumerable: true,
+      writable: true,
+      value: () => {
+        const {
+          day,
+          listSearchQuery
+        } = this.state;
+        const {
+          plans
+        } = this.props;
+        const rows = this.getRows(day);
+        return _react.default.createElement("div", {
+          className: "improvement-list-content"
+        }, _react.default.createElement(_searchBox.SearchBox, {
+          value: listSearchQuery,
+          onChange: this.handleListSearchChange,
+          placeholder: __('Search improvement list'),
+          resultCount: rows.length
+        }), rows.map((row, index) => _react.default.createElement(_itemWrapper.ItemWrapper, {
+          index: index,
+          row: row,
+          key: row.id,
+          day: day,
+          plans: plans
+        })), rows.length === 0 && _react.default.createElement("div", {
+          className: "improvement-empty-state"
+        }, __('No matching equipment')));
       }
     }), _temp;
   }
@@ -126,20 +303,19 @@ const ItemInfoArea = (0, _reactRedux.connect)(state => ({
 
   render() {
     const {
-      day
+      day,
+      useNewInterface
     } = this.state;
-    const {
-      plans
-    } = this.props;
     return _react.default.createElement("div", {
-      id: "item-improvement"
+      id: "item-improvement",
+      className: useNewInterface ? 'new-interface' : 'legacy-interface'
     }, _react.default.createElement("div", {
       className: "flex-column"
     }, _react.default.createElement("link", {
       rel: "stylesheet",
       href: (0, _pathExtra.join)(__dirname, '..', 'assets', 'main.css')
     }), _react.default.createElement(_reactBootstrap.Grid, {
-      className: "vertical-center",
+      className: "vertical-center interface-header",
       style: {
         minHeight: 45
       }
@@ -148,45 +324,9 @@ const ItemInfoArea = (0, _reactRedux.connect)(state => ({
       style: {
         padding: 0
       }
-    }, _react.default.createElement("div", {
-      className: "improvement-toolbar"
-    }, _react.default.createElement(_reactBootstrap.Nav, {
-      className: "main-nav",
-      bsStyle: "pills",
-      activeKey: this.state.day,
-      onSelect: this.handleKeyChange
-    }, _react.default.createElement(_reactBootstrap.NavItem, {
-      eventKey: 0
-    }, __('Sunday')), _react.default.createElement(_reactBootstrap.NavItem, {
-      eventKey: 1
-    }, __('Monday')), _react.default.createElement(_reactBootstrap.NavItem, {
-      eventKey: 2
-    }, __('Tuesday')), _react.default.createElement(_reactBootstrap.NavItem, {
-      eventKey: 3
-    }, __('Wednesday')), _react.default.createElement(_reactBootstrap.NavItem, {
-      eventKey: 4
-    }, __('Thursday')), _react.default.createElement(_reactBootstrap.NavItem, {
-      eventKey: 5
-    }, __('Friday')), _react.default.createElement(_reactBootstrap.NavItem, {
-      eventKey: 6
-    }, __('Saturday')), _react.default.createElement(_reactBootstrap.NavItem, {
-      eventKey: -1
-    }, __('All')), _react.default.createElement(_reactBootstrap.NavItem, {
-      eventKey: 10
-    }, __('Starcraft'))), _react.default.createElement(_reactBootstrap.Button, {
-      bsSize: "small",
-      bsStyle: "link",
-      className: "changelog-button",
-      onClick: this.handleShowChangelog
-    }, __("What's New"))))), _react.default.createElement(_reactBootstrap.Grid, {
+    }, useNewInterface ? this.renderNewToolbar() : this.renderLegacyToolbar())), _react.default.createElement(_reactBootstrap.Grid, {
       className: "list-container"
-    }, this.state.day < 7 ? this.getRows(this.state.day).map((row, index) => _react.default.createElement(_itemWrapper.ItemWrapper, {
-      index: index,
-      row: row,
-      key: row.id,
-      day: day,
-      plans: plans
-    })) : _react.default.createElement(_starcraftArea.StarcraftArea, null))), _react.default.createElement(_changelogModal.ChangelogModal, {
+    }, day < 7 ? this.renderList() : _react.default.createElement(_starcraftArea.StarcraftArea, null))), _react.default.createElement(_changelogModal.ChangelogModal, {
       entries: this.state.changelogEntries,
       onHide: this.handleCloseChangelog,
       show: this.state.showChangelog

package/views/search-box.js

@@ -0,0 +1,54 @@
+"use strict";
+
+exports.__esModule = true;
+exports.SearchBox = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _reactBootstrap = require("react-bootstrap");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const {
+  __
+} = window.i18n['poi-plugin-item-improvement2-beta'];
+
+const SearchBox = ({
+  value,
+  onChange,
+  placeholder,
+  resultCount
+}) => _react.default.createElement("div", {
+  className: "improvement-search-box"
+}, _react.default.createElement(_reactBootstrap.InputGroup, null, _react.default.createElement(_reactBootstrap.InputGroup.Addon, null, _react.default.createElement("span", {
+  className: "glyphicon glyphicon-search",
+  "aria-hidden": "true"
+})), _react.default.createElement(_reactBootstrap.FormControl, {
+  type: "search",
+  value: value,
+  placeholder: placeholder,
+  "aria-label": placeholder,
+  onChange: event => onChange(event.target.value)
+}), value && _react.default.createElement(_reactBootstrap.InputGroup.Button, null, _react.default.createElement(_reactBootstrap.Button, {
+  "aria-label": __('Clear search'),
+  title: __('Clear search'),
+  onClick: () => onChange('')
+}, _react.default.createElement("span", {
+  className: "glyphicon glyphicon-remove",
+  "aria-hidden": "true"
+})))), typeof resultCount === 'number' && _react.default.createElement("span", {
+  className: "improvement-search-count"
+}, __('Search results').replace('%d', resultCount)));
+
+exports.SearchBox = SearchBox;
+SearchBox.propTypes = {
+  value: _propTypes.default.string.isRequired,
+  onChange: _propTypes.default.func.isRequired,
+  placeholder: _propTypes.default.string.isRequired,
+  resultCount: _propTypes.default.number
+};
+SearchBox.defaultProps = {
+  resultCount: undefined
+};

package/views/search.js

@@ -0,0 +1,70 @@
+"use strict";
+
+exports.__esModule = true;
+exports.normalizeSearchText = exports.filterPlanEquipTypes = exports.filterImprovementRows = exports.matchesSearchQuery = void 0;
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+const normalizeSearchText = value => String(value == null ? '' : value).normalize('NFKC').toLocaleLowerCase().replace(/\s+/g, ' ').trim();
+
+exports.normalizeSearchText = normalizeSearchText;
+
+const compactSearchValues = values => values.reduce((result, value) => {
+  if (Array.isArray(value)) {
+    return result.concat(compactSearchValues(value));
+  }
+
+  if (value !== undefined && value !== null && value !== '') {
+    result.push(value);
+  }
+
+  return result;
+}, []);
+
+const matchesSearchQuery = (values, query) => {
+  const normalizedQuery = normalizeSearchText(query);
+
+  if (!normalizedQuery) {
+    return true;
+  }
+
+  const haystack = normalizeSearchText(compactSearchValues(values).join(' '));
+  return normalizedQuery.split(' ').filter(Boolean).every(token => haystack.includes(token));
+};
+
+exports.matchesSearchQuery = matchesSearchQuery;
+
+const improvementSearchValues = row => {
+  const routeValues = (row.improvementList || []).map(route => [route.routeType, route.routeId, (route.assistantList || []).map(assistant => [assistant.displayText, assistant.sourceText, assistant.shipIds]), (route.stageList || []).map(stage => [stage.stageText, stage.targetWeapon && stage.targetWeapon.id, stage.targetWeapon && stage.targetWeapon.name, (stage.consumables || []).map(consumable => [consumable.id, consumable.name])])]);
+  return [row.id, row.api_id, row.api_name, row.name, Object.keys(row.assistantTextByDay || {}).map(key => row.assistantTextByDay[key]), routeValues];
+};
+
+const filterImprovementRows = (rows, query) => (rows || []).filter(row => matchesSearchQuery(improvementSearchValues(row), query));
+
+exports.filterImprovementRows = filterImprovementRows;
+
+const equipmentSearchValues = (equip, equipType) => [equip && equip.id, equip && equip.api_id, equip && equip.name, equip && equip.api_name, equipType && equipType.api_id, equipType && equipType.api_name];
+
+const filterPlanEquipTypes = (equipTypes, query) => {
+  const normalizedQuery = normalizeSearchText(query);
+
+  if (!normalizedQuery) {
+    return equipTypes || {};
+  }
+
+  return Object.keys(equipTypes || {}).reduce((result, key) => {
+    const equipType = equipTypes[key];
+    const categoryMatches = matchesSearchQuery([equipType.api_id, equipType.api_name], normalizedQuery);
+    const equips = categoryMatches ? equipType.equips : (equipType.equips || []).filter(equip => matchesSearchQuery(equipmentSearchValues(equip, equipType), normalizedQuery));
+
+    if (equips.length > 0) {
+      result[key] = _extends({}, equipType, {
+        equips
+      });
+    }
+
+    return result;
+  }, {});
+};
+
+exports.filterPlanEquipTypes = filterPlanEquipTypes;

package/views/starcraft/starcraft-area.js

@@ -29,6 +29,10 @@ var _divider = require("../divider");
 
 var _selectors = require("../selectors");
 
+var _searchBox = require("../search-box");
+
+var _search = require("../search");
+
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -38,6 +42,9 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 const {
   $
 } = window;
+const {
+  __
+} = window.i18n['poi-plugin-item-improvement2-beta'];
 window.store = _createStore.store;
 $('#fontawesome-css').setAttribute('href', require.resolve('font-awesome/css/font-awesome.css'));
 
@@ -121,6 +128,16 @@ class Starcraft extends _react.Component {
         this.viewRef = newRef;
       }
     });
+    Object.defineProperty(this, "handleSearchChange", {
+      configurable: true,
+      enumerable: true,
+      writable: true,
+      value: searchQuery => {
+        this.setState({
+          searchQuery
+        });
+      }
+    });
     Object.defineProperty(this, "handleRefToImage", {
       configurable: true,
       enumerable: true,
@@ -134,7 +151,8 @@ class Starcraft extends _react.Component {
       }
     });
     this.state = _extends({}, Starcraft.prepareAutoCollapse(props), {
-      viewMode: false
+      viewMode: false,
+      searchQuery: ''
     });
     this.viewRef = null;
   }
@@ -175,8 +193,23 @@ class Starcraft extends _react.Component {
     } = this.props;
     const {
       equipTypeCollapsed,
-      viewMode
+      viewMode,
+      searchQuery
     } = this.state;
+    const searchedEquipTypes = (0, _search.filterPlanEquipTypes)(equipTypes, searchQuery);
+    const visibleEquipTypes = viewMode ? Object.keys(searchedEquipTypes).reduce((result, key) => {
+      const equipType = searchedEquipTypes[key];
+      const equips = equipType.equips.filter(equip => plans[equip.id]);
+
+      if (equips.length > 0) {
+        result[key] = _extends({}, equipType, {
+          equips
+        });
+      }
+
+      return result;
+    }, {}) : searchedEquipTypes;
+    const resultCount = Object.keys(visibleEquipTypes).reduce((count, key) => count + visibleEquipTypes[key].equips.length, 0);
     return _react.default.createElement("div", {
       id: "starcraft-root",
       style: {
@@ -187,19 +220,26 @@ class Starcraft extends _react.Component {
       onToggleViewMode: this.handleToggleViewMode,
       onControlAction: this.handleControlAction,
       onExportAsImage: this.handleRefToImage
+    }), _react.default.createElement(_searchBox.SearchBox, {
+      value: searchQuery,
+      onChange: this.handleSearchChange,
+      placeholder: __('Search improvement plans'),
+      resultCount: resultCount
     }), _react.default.createElement(_divider.Divider, null), _react.default.createElement("div", {
       ref: this.updateRef
-    }, Object.keys(equipTypes).map(k => {
-      const et = equipTypes[k];
+    }, Object.keys(visibleEquipTypes).map(k => {
+      const et = visibleEquipTypes[k];
       return _react.default.createElement(_equipCategoryView.EquipCategoryView, {
         viewMode: viewMode,
         key: et.api_id,
-        collapsed: Boolean(equipTypeCollapsed[k]),
+        collapsed: searchQuery ? false : Boolean(equipTypeCollapsed[k]),
         onToggle: this.handleToggle(k),
         equipType: et,
         plans: plans
       });
-    })));
+    }), resultCount === 0 && _react.default.createElement("div", {
+      className: "improvement-empty-state"
+    }, __('No matching plans'))));
   }
 
 }

package/views/ui-preferences.js

@@ -0,0 +1,18 @@
+"use strict";
+
+exports.__esModule = true;
+exports.setUseNewInterface = exports.getUseNewInterface = exports.NEW_INTERFACE_CONFIG_KEY = void 0;
+const NEW_INTERFACE_CONFIG_KEY = 'poi-plugin-item-improvement2-beta.useNewInterface';
+exports.NEW_INTERFACE_CONFIG_KEY = NEW_INTERFACE_CONFIG_KEY;
+
+const getUseNewInterface = config => config.get(NEW_INTERFACE_CONFIG_KEY, false) === true;
+
+exports.getUseNewInterface = getUseNewInterface;
+
+const setUseNewInterface = (config, enabled) => {
+  const value = Boolean(enabled);
+  config.set(NEW_INTERFACE_CONFIG_KEY, value);
+  return value;
+};
+
+exports.setUseNewInterface = setUseNewInterface;