WIP, js tiring.

code/datums/skills/_check_skills.dm

@@ -20,21 +20,23 @@
 		need_static_data_update = FALSE
 	ui = SStgui.try_update_ui(user, src, ui_key, ui, force_open)
 	if(!ui)
-		ui = new(user, src, ui_key, "check_skills", "[owner.name]'s Skills", 900, 480, master_ui, state)
+		ui.set_autoupdate(FALSE) // This UI is only ever opened by one person, and never is updated outside of user input.
+		ui = new(user, src, ui_key, "skills", "[owner.name]'s Skills", 620, 580, master_ui, state)
 		ui.open()
 
 /datum/skill_holder/ui_static_data(mob/user)
 	. = list()
 	var/datum/asset/spritesheet/simple/assets = get_asset_datum(/datum/asset/spritesheet/simple/skills)
 
-	.["skills"] = list()
+	.["categories"] = list()
 	var/list/current
 	var/category
 	for(var/path in GLOB.skill_datums)
 		var/datum/skill/S = GLOB.skill_datums[path]
 		if(!current || S.ui_category != category)
 			if(category)
-				.["skills"][category] = current
+				var/list/cat = list("name" = category, "skills" = current)
+				.["categories"] += list(cat)
 			current = list()
 			category = S.ui_category
 
@@ -67,7 +69,9 @@
 		current += list(data)
 
 	if(category)
-		.["skills"][category] = current
+		var/list/cat = list("name" = category, "skills" = current)
+		.["categories"] += list(cat)
+
 
 	var/all_mods = list()
 	for(var/id in all_current_skill_modifiers)
@@ -78,3 +82,22 @@
 			icon = assets.icon_class_name(M.icon)
 		)
 	.["modifiers"] = all_mods
+
+/datum/skill_holder/ui_data(mob/user)
+	. = list()
+	.["see_skill_mods"] = see_skill_mods
+	.["compact_mode"] = compact_mode
+	.["selected_category"] = selected_category
+
+/datum/skill_holder/ui_act(action, params)
+	. = ..()
+	if(.)
+		return
+	switch(action)
+		if("toggle_mods")
+			see_skill_mods = !see_skill_mods
+			return TRUE
+		if("compact_toggle")
+			compact_mode = !compact_mode
+		if("select")
+			selected_category = params["category"]

code/datums/skills/_skill_holder.dm

@@ -22,13 +22,21 @@
 	var/list/original_levels
 	/// The mind datum this skill is associated with, only used for the check_skills UI
 	var/datum/mind/owner
-	/// For static UI update.
+	/// For UI updates.
 	var/need_static_data_update = TRUE
-
+	/// Whether modifiers and final skill values or only base values are displayed.
+	var/see_skill_mods = TRUE
+	/// Whether skill descriptions are displayed or not.
+	var/compact_mode = FALSE
+	/// The current selected skill category.
+	var/selected_category
 
 /datum/skill_holder/New(owner)
 	..()
 	src.owner = owner
+	var/datum/skill/S = locate() in GLOB.skill_datums
+	if(S)
+		selected_category = S.ui_category
 
 /**
   * Grabs the value of a skill.

tgui-next/packages/tgui/interfaces/Skills.js

@@ -0,0 +1,146 @@
+import { decodeHtmlEntities } from 'common/string';
+import { Component, Fragment } from 'inferno';
+import { act } from '../byond';
+import { Box, Button, Input, Section, Table, Tabs } from '../components';
+
+// It's a class because we need to store state in the form of
+// the current hovered item
+export class Uplink extends Component {
+  constructor() {
+    super();
+    this.state = {
+      hoveredItem: {},
+    };
+  }
+
+  setHoveredItem(hoveredItem) {
+    this.setState({
+      hoveredItem,
+    });
+  }
+
+  render() {
+    const { state } = this.props;
+    const { config, data } = state;
+    const { ref } = config;
+    const {
+      see_skill_mods,
+      compact_mode,
+      categories = [],
+    } = data;
+    return (
+      <Section
+        title={(
+          <Box
+            inline
+            color={telecrystals > 0 ? 'good' : 'bad'}>
+            {telecrystals} TC
+          </Box>
+        )}
+        buttons={(
+            <Button
+              icon={see_skill_mods ? 'check-square-o' : 'square-o'}
+              content='Show modifiers'}
+              onClick={() => act(ref, 'toggle_mods')} />
+            <Button
+              icon={compact_mode ? 'list' : 'info'}
+              content={compact_mode ? 'Compact' : 'Detailed'}
+              onClick={() => act(ref, 'compact_toggle')} />
+            )}
+          </Fragment>
+        )}>
+        {(
+          <Tabs vertical>
+            {categories.map(category => {
+              const { name, skills } = category;
+              if (name != selected_category) {
+                return;
+              }
+              return (
+                <Tabs.Tab
+                  key={name}
+                  label={`${name} (${skills.length})`}>
+                  {() => (
+                    <skillList
+                      compact={compact_mode}
+                      skills={skills}
+                      hoveredItem={hoveredItem}
+                      onBuyMouseOver={skill => this.setHoveredItem(skill)}
+                      onBuyMouseOut={skill => this.setHoveredItem({})}
+                      onBuy={skill => act(ref, 'buy', {
+                        skill: skill.name,
+                      })} />
+                  )}
+                </Tabs.Tab>
+              );
+            })}
+          </Tabs>
+        )}
+      </Section>
+    );
+  }
+}
+
+const skillList = props => {
+  const {
+    skills,
+    hoveredItem,
+    compact,
+    onBuy,
+    onBuyMouseOver,
+    onBuyMouseOut,
+  } = props;
+  const hoveredCost = hoveredItem && hoveredItem.cost || 0;
+  if (compact) {
+    return (
+      <Table>
+        {items.map(item => {
+          const notSameItem = hoveredItem && hoveredItem.name !== item.name;
+          const notEnoughHovered = telecrystals - hoveredCost < item.cost;
+          const disabledDueToHovered = notSameItem && notEnoughHovered;
+          return (
+            <Table.Row
+              key={item.name}
+              className="candystripe">
+              <Table.Cell bold>
+                {decodeHtmlEntities(item.name)}
+              </Table.Cell>
+              <Table.Cell collapsing textAlign="right">
+                <Button
+                  fluid
+                  content={item.cost + " TC"}
+                  disabled={telecrystals < item.cost || disabledDueToHovered}
+                  tooltip={item.desc}
+                  tooltipPosition="left"
+                  onmouseover={() => onBuyMouseOver(item)}
+                  onmouseout={() => onBuyMouseOut(item)}
+                  onClick={() => onBuy(item)} />
+              </Table.Cell>
+            </Table.Row>
+          );
+        })}
+      </Table>
+    );
+  }
+  return items.map(item => {
+    const notSameItem = hoveredItem && hoveredItem.name !== item.name;
+    const notEnoughHovered = telecrystals - hoveredCost < item.cost;
+    const disabledDueToHovered = notSameItem && notEnoughHovered;
+    return (
+      <Section
+        key={item.name}
+        title={item.name}
+        level={2}
+        buttons={(
+          <Button
+            content={item.cost + ' TC'}
+            disabled={telecrystals < item.cost || disabledDueToHovered}
+            onmouseover={() => onBuyMouseOver(item)}
+            onmouseout={() => onBuyMouseOut(item)}
+            onClick={() => onBuy(item)} />
+        )}>
+        {decodeHtmlEntities(item.desc)}
+      </Section>
+    );
+  });
+};