Add emoji prefix.

src/style.css

@@ -119,6 +119,17 @@ button.playpen-header-button:hover,
   color: @pp_accent_strong;
 }
 
+/* An emoji standing in for that icon. Sized to the width the icon occupies
+   rather than left to the glyph, so a sidebar mixing emoji rows with icon rows
+   still starts every label in the same column — emoji vary in advance width and
+   without this the labels beside them would step in and out by a pixel or two
+   per row. The font size is a little under the icon's 16px because a colour
+   glyph fills its box where a symbolic icon leaves air around itself. */
+.playpen-tab-emoji {
+  min-width: 16px;
+  font-size: 13px;
+}
+
 /* State on the row itself, not just on its dot.
 
    A bar down the leading edge and a wash behind the whole row, both in the
@@ -307,6 +318,19 @@ button.playpen-header-button:hover,
   min-width: 220px;
 }
 
+/* The row's right-click menu. Narrower than the rename popover and with tighter
+   padding: it holds two words per line, and a menu sized like a form reads as
+   though something failed to fill it. */
+.playpen-row-menu {
+  padding: 4px;
+  min-width: 150px;
+}
+
+.playpen-row-menu > button {
+  padding: 5px 8px;
+  border-radius: 6px;
+}
+
 /* A web pane's navigation bar, below the pane header. Kept visually quieter
    than the header so the two rows don't compete. */
 .playpen-nav {
@@ -521,6 +545,70 @@ button.playpen-header-button:hover,
   border-color: @pp_accent_strong;
 }
 
+/* -------------------------------------------------------------------------
+   The emoji picker
+
+   A tab's chosen glyph, then a search box over a grid of every glyph on offer.
+   The grid is a GtkFlowBox, so each cell is a `flowboxchild` wrapping a label
+   and the hover and selection states have to be drawn here — Adwaita styles a
+   flow box for lists of cards, which at this size leaves the cells looking like
+   nothing in particular. */
+
+/* The current choice, big enough to check from across the dialog. Boxed to the
+   same square whether it holds a glyph or the word "None", so switching between
+   them doesn't shift the text beside it. */
+.playpen-emoji-preview {
+  min-width: 44px;
+  min-height: 44px;
+  font-size: 26px;
+  border: 1px solid @pp_border;
+  border-radius: 10px;
+  background-color: @pp_surface;
+}
+
+.playpen-emoji-preview-none {
+  font-size: 0.85em;
+  color: @pp_text_faint;
+}
+
+/* Sunk into the dialog rather than raised off it: the grid is a well you look
+   into, and the section card it sits in is already the raised surface. */
+.playpen-emoji-scroller {
+  border: 1px solid @pp_border;
+  border-radius: 10px;
+  background-color: @pp_surface;
+}
+
+.playpen-emoji-grid {
+  padding: 6px;
+  background: none;
+}
+
+.playpen-emoji-cell {
+  font-size: 19px;
+}
+
+.playpen-emoji-grid > flowboxchild {
+  padding: 0;
+  border-radius: 8px;
+  background: none;
+  transition: background-color 100ms ease;
+}
+
+.playpen-emoji-grid > flowboxchild:hover {
+  background-color: @pp_row_hover;
+}
+
+/* The glyph in force. `background-image: none` for the same reason as the theme
+   buttons above: Adwaita paints selection with a gradient over the colour, and
+   without this the accent comes out washed. */
+.playpen-emoji-grid > flowboxchild:selected,
+.playpen-emoji-grid > flowboxchild:selected:backdrop {
+  background-color: @pp_accent_muted;
+  background-image: none;
+  box-shadow: inset 0 0 0 1px @pp_accent;
+}
+
 /* Divider between panes. Wide enough to grab without hunting for it. */
 .playpen-view paned > separator {
   background-color: @pp_bg;