modpacks tgui + search (#493)

<!-- Пишите **НИЖЕ** заголовков и **ВЫШЕ** комментариев, иначе что то
может пойти не так. -->
<!-- Вы можете прочитать Contributing.MD, если хотите узнать больше. -->

## Что этот PR делает

<!-- Вкратце опишите изменения, которые вносите. -->
<!-- Опишите **все** изменения, так как противное может сказаться на
рассмотрении этого PR'а! -->
<!-- Если вы исправляете Issue, добавьте "Fixes #1234" (где 1234 - номер
Issue) где-нибудь в описании PR'а. Это автоматически закроет Issue после
принятия PR'а. -->

Перевод Modpacks List в TGUI с возможностью поиска

## Почему это хорошо для игры

<!-- Опишите, почему, по вашему, следует добавить эти изменения в игру.
-->

HTML-ка нагруженная становится, ориентации нет

## Изображения изменений
<!-- Если вы не меняли карту или спрайты, можете опустить эту секцию.
Если хотите, можете вставить видео. -->

<details><summary>Изображения</summary>


![image](https://github.com/ss220club/Paradise-SS220/assets/31931237/a04be96b-042d-43cd-bcbd-7b79bdebf38e)

![image](https://github.com/ss220club/Paradise-SS220/assets/31931237/1df7a911-bf30-41f4-b9f1-0a1710ea1d3c)

![image](https://github.com/ss220club/Paradise-SS220/assets/31931237/3aca87e9-59db-4c3d-b55c-356089b4f9bb)

![image](https://github.com/ss220club/Paradise-SS220/assets/31931237/4c196670-cb5a-443a-b71d-e758c51a8317)

![image](https://github.com/ss220club/Paradise-SS220/assets/31931237/df37ded3-9508-4579-89c9-b33ae10d7096)

![image](https://github.com/ss220club/Paradise-SS220/assets/31931237/51b82abd-7aab-44c4-ba18-95eb3e1449e8)


</details>

## Тестирование
<!-- Как вы тестировали свой PR, если делали это вовсе? -->

Работает в лобби, работает и в игре

## Changelog

:cl:
add: К Modpacks List добавлен TGUI и возможность поиска
/:cl:

<!-- Оба :cl:'а должны быть на месте, что-бы чейнджлог работал! Вы
можете написать свой ник справа от первого :cl:, если хотите. Иначе
будет использован ваш ник на ГитХабе. -->
<!-- Вы можете использовать несколько записей с одинаковым префиксом
(Они используются только для иконки в игре) и удалить ненужные. Помните,
что чейнджлог должен быть понятен обычным игроком. -->
<!-- Если чейнджлог не влияет на игроков(например, это рефактор), вы
можете исключить всю секцию. -->

modular_ss220/_modpacks.dm

@@ -5,6 +5,7 @@ SUBSYSTEM_DEF(modpacks)
 	init_order = INIT_ORDER_MODPACKS
 	flags = SS_NO_FIRE
 	var/list/loaded_modpacks
+	var/list/tgui_data
 
 /datum/controller/subsystem/modpacks/Initialize()
 	var/list/all_modpacks = list()
@@ -34,30 +35,42 @@ SUBSYSTEM_DEF(modpacks)
 
 	load_admins() // To make admins always have modular added verbs
 
-/client/verb/modpacks_list()
+/mob/verb/modpacks_list()
 	set name = "Modpacks List"
 	set category = "OOC"
 
-	if(!mob || !SSmodpacks.initialized)
+	if(!SSmodpacks.initialized)
 		return
 
-	if(length(SSmodpacks.loaded_modpacks))
-		. = "<hr><br><center><b><font size = 3>Список модификаций</font></b></center><br><hr><br>"
-		for(var/datum/modpack/M as anything in SSmodpacks.loaded_modpacks)
-			if(M.name)
-				. += "<div class = 'statusDisplay'>"
-				. += "<center><b>[M.name]</b></center>"
-
-				if(M.desc || M.author)
-					. += "<br>"
-					if(M.desc)
-						. += "<br>Описание: [M.desc]"
-					if(M.author)
-						. += "<br><i>Автор: [M.author]</i>"
-				. += "</div><br>"
-
-		var/datum/browser/popup = new(mob, "modpacks_list", "Список Модификаций", 480, 580)
-		popup.set_content(.)
-		popup.open()
-	else
+	if(!length(SSmodpacks.loaded_modpacks))
 		to_chat(src, "Этот сервер не использует какие-либо модификации.")
+		return
+
+	SSmodpacks.ui_interact(src)
+
+/datum/controller/subsystem/modpacks/ui_static_data(mob/user)
+	var/list/data = list()
+
+	if(!length(tgui_data))
+		tgui_data = generate_modpacks_data()
+	data["modpacks"] = tgui_data
+
+	return data
+
+/datum/controller/subsystem/modpacks/proc/generate_modpacks_data()
+	var/list/modpacks = list()
+	for(var/datum/modpack/modpack as anything in loaded_modpacks)
+		if(modpack.name)
+			modpacks += list(list(
+				"name" = modpack.name,
+				"desc" = modpack.desc,
+				"author" = modpack.author
+			))
+	return modpacks
+
+/datum/controller/subsystem/modpacks/ui_interact(mob/user, ui_key, datum/tgui/ui, force_open, datum/tgui/master_ui, datum/ui_state/state = GLOB.always_state)
+	ui = SStgui.try_update_ui(user, src, ui)
+	if(!ui)
+		ui = new(user, src, ui_key, "ModpacksList", "Modpacks List", 500, 550, master_ui, state)
+		ui.open()
+	ui.set_autoupdate(FALSE)

tgui/packages/tgui/interfaces/ModpacksList.js

@@ -0,0 +1,84 @@
+import { useBackend, useLocalState } from '../backend';
+import { Window } from '../layouts';
+import { Section, Input, Flex, Collapsible } from '../components';
+
+export const ModpacksList = (props, context) => {
+  return (
+    <Window resizable>
+      <Window.Content scrollable>
+        <ModpacksListContent />
+      </Window.Content>
+    </Window>
+  );
+};
+
+export const ModpacksListContent = (props, context) => {
+  const { act, data } = useBackend(context);
+  const { modpacks } = data;
+
+  const [searchText, setSearchText] = useLocalState(
+    context,
+    'searchText',
+    ''
+  );
+
+  const searchBar = (
+    <Input
+      placeholder="Искать модпак по имени, описанию или автору..."
+      fluid
+      onInput={(e, value) => setSearchText(value)}
+    />
+  );
+
+  return (
+    <Section>
+      <Section
+        title="Фильтры"
+      >
+        {searchBar}
+      </Section>
+      <Section
+        title={
+          searchText.length > 0
+            ? `Результаты поиска "${searchText}"`
+            : `Все модификации`
+        }
+        fill
+        >
+        <Flex>
+          <Flex.Item
+            grow="1"
+            basis="100%"
+            width="100%"
+            display="inline-block"
+          >
+          {modpacks
+          .filter(modpack => modpack.name &&
+            (searchText.length > 0 ?
+              (modpack.name.toLowerCase().includes(searchText.toLowerCase()) ||
+              modpack.desc.toLowerCase().includes(searchText.toLowerCase()) ||
+              modpack.author.toLowerCase().includes(searchText.toLowerCase())
+              ) : true))
+          .map((modpack) =>
+            <Collapsible
+              key={modpack.name}
+              title={modpack.name}
+            >
+              <Section
+                title="Авторы"
+              >
+                {modpack.author}
+              </Section>
+              <Section
+                title="Описание"
+              >
+                {modpack.desc}
+              </Section>
+            </Collapsible>
+          )}
+          </Flex.Item>
+        </Flex>
+      </Section>
+    </Section>
+  );
+};