Categorize UIExamples a little bit

Summary:
Ref M1476. I'm planning to add some PHUIX examples, but sort out the existing examples a little first. I added some categories:

  - Catalogs: these are what I look at most often (emoji, icons, colors).
  - Single use: elements with only one use (badges, feed stories, hovercards, setup issues).
  - Technical: examples which are really just "test this thing in the browser" (avatars, gestures, notifications, remarkup).
  - Other: evrything else, mostly general-purpose multi-use components.

Test Plan:
(See left nav.)

{F4984042}

Reviewers: chad

Reviewed By: chad

Differential Revision: https://secure.phabricator.com/D18050

src/__phutil_library_map__.php

@@ -1395,7 +1395,6 @@ phutil_register_library_map(array(
     'HeraldTranscriptTestCase' => 'applications/herald/storage/__tests__/HeraldTranscriptTestCase.php',
     'HeraldUtilityActionGroup' => 'applications/herald/action/HeraldUtilityActionGroup.php',
     'Javelin' => 'infrastructure/javelin/Javelin.php',
-    'JavelinViewExampleServerView' => 'applications/uiexample/examples/JavelinViewExampleServerView.php',
     'LegalpadController' => 'applications/legalpad/controller/LegalpadController.php',
     'LegalpadCreateDocumentsCapability' => 'applications/legalpad/capability/LegalpadCreateDocumentsCapability.php',
     'LegalpadDAO' => 'applications/legalpad/storage/LegalpadDAO.php',
@@ -6475,7 +6474,6 @@ phutil_register_library_map(array(
     'HeraldTranscriptTestCase' => 'PhabricatorTestCase',
     'HeraldUtilityActionGroup' => 'HeraldActionGroup',
     'Javelin' => 'Phobject',
-    'JavelinViewExampleServerView' => 'AphrontView',
     'LegalpadController' => 'PhabricatorController',
     'LegalpadCreateDocumentsCapability' => 'PhabricatorPolicyCapability',
     'LegalpadDAO' => 'PhabricatorLiskDAO',

src/applications/uiexample/controller/PhabricatorUIExampleRenderController.php

@@ -17,10 +17,15 @@ final class PhabricatorUIExampleRenderController extends PhabricatorController {
     $nav = new AphrontSideNavFilterView();
     $nav->setBaseURI(new PhutilURI($this->getApplicationURI('view/')));
 
-    foreach ($classes as $class => $obj) {
+    $groups = mgroup($classes, 'getCategory');
+    ksort($groups);
+    foreach ($groups as $group => $group_classes) {
+      $nav->addLabel($group);
+      foreach ($group_classes as $class => $obj) {
         $name = $obj->getName();
         $nav->addFilter($class, $name);
       }
+    }
 
     $selected = $nav->selectFilter($id, head_key($classes));
 

src/applications/uiexample/examples/JavelinViewExampleServerView.php

@@ -1,14 +0,0 @@
-<?php
-
-final class JavelinViewExampleServerView extends AphrontView {
-
-  public function render() {
-    return phutil_tag(
-      'div',
-      array(
-        'class' => 'server-view',
-      ),
-      $this->renderChildren());
-  }
-
-}

src/applications/uiexample/examples/MacroEmojiExample.php

@@ -3,11 +3,15 @@
 final class MacroEmojiExample extends PhabricatorUIExample {
 
   public function getName() {
-    return pht('Emoji Support');
+    return pht('Emoji');
   }
 
   public function getDescription() {
-    return pht('Shiny happy people holding hands');
+    return pht('Shiny happy people holding hands.');
+  }
+
+  public function getCategory() {
+    return pht('Catalogs');
   }
 
   public function renderExample() {

src/applications/uiexample/examples/PHUIBadgeExample.php

@@ -10,6 +10,10 @@ final class PHUIBadgeExample extends PhabricatorUIExample {
     return pht('Celebrate the moments of your life.');
   }
 
+  public function getCategory() {
+    return pht('Single Use');
+  }
+
   public function renderExample() {
 
     $badges1 = array();

src/applications/uiexample/examples/PHUIColorPalletteExample.php

@@ -10,6 +10,10 @@ final class PHUIColorPalletteExample extends PhabricatorUIExample {
     return pht('A Standard Palette of Colors for use.');
   }
 
+  public function getCategory() {
+    return pht('Catalogs');
+  }
+
   public function renderExample() {
 
     $colors = array(

src/applications/uiexample/examples/PHUIFeedStoryExample.php

@@ -8,7 +8,11 @@ final class PHUIFeedStoryExample extends PhabricatorUIExample {
 
   public function getDescription() {
     return pht(
-      'An outlandish exaggeration of intricate tales from around the realm');
+      'An outlandish exaggeration of intricate tales from around the realm.');
+  }
+
+  public function getCategory() {
+    return pht('Single Use');
   }
 
   public function renderExample() {

src/applications/uiexample/examples/PHUIHovercardUIExample.php

@@ -12,6 +12,10 @@ final class PHUIHovercardUIExample extends PhabricatorUIExample {
       phutil_tag('tt', array(), 'PHUIHovercardView'));
   }
 
+  public function getCategory() {
+    return pht('Single Use');
+  }
+
   public function renderExample() {
     $request = $this->getRequest();
     $user = $request->getUser();

src/applications/uiexample/examples/PHUIIconExample.php

@@ -10,6 +10,10 @@ final class PHUIIconExample extends PhabricatorUIExample {
     return pht('Easily render icons or images with links and sprites.');
   }
 
+  public function getCategory() {
+    return pht('Catalogs');
+  }
+
   private function listTransforms() {
     return array(
       'ph-rotate-90',

src/applications/uiexample/examples/PhabricatorFilesComposeAvatarExample.php

@@ -3,13 +3,17 @@
 final class PhabricatorFilesComposeAvatarExample extends PhabricatorUIExample {
 
   public function getName() {
-    return pht('Generate Avatar Images');
+    return pht('Avatars');
   }
 
   public function getDescription() {
     return pht('Tests various color palettes and sizes.');
   }
 
+  public function getCategory() {
+    return pht('Technical');
+  }
+
   public function renderExample() {
     $request = $this->getRequest();
     $viewer = $request->getUser();

src/applications/uiexample/examples/PhabricatorGestureUIExample.php

@@ -14,6 +14,10 @@ final class PhabricatorGestureUIExample extends PhabricatorUIExample {
       phutil_tag('tt', array(), 'touchable'));
   }
 
+  public function getCategory() {
+    return pht('Technical');
+  }
+
   public function renderExample() {
     $id = celerity_generate_unique_node_id();
 

src/applications/uiexample/examples/PhabricatorNotificationUIExample.php

@@ -12,6 +12,10 @@ final class PhabricatorNotificationUIExample extends PhabricatorUIExample {
       phutil_tag('tt', array(), 'JX.Notification'));
   }
 
+  public function getCategory() {
+    return pht('Technical');
+  }
+
   public function renderExample() {
     require_celerity_resource('phabricator-notification-css');
     Javelin::initBehavior('phabricator-notification-example');

src/applications/uiexample/examples/PhabricatorRemarkupUIExample.php

@@ -11,6 +11,10 @@ final class PhabricatorRemarkupUIExample extends PhabricatorUIExample {
       'Demonstrates the visual appearance of various Remarkup elements.');
   }
 
+  public function getCategory() {
+    return pht('Technical');
+  }
+
   public function renderExample() {
     $viewer = $this->getRequest()->getUser();
 

src/applications/uiexample/examples/PhabricatorSetupIssueUIExample.php

@@ -10,6 +10,10 @@ final class PhabricatorSetupIssueUIExample extends PhabricatorUIExample {
     return pht('Setup errors and warnings.');
   }
 
+  public function getCategory() {
+    return pht('Single Use');
+  }
+
   public function renderExample() {
     $request = $this->getRequest();
     $user = $request->getUser();

src/applications/uiexample/examples/PhabricatorUIExample.php

@@ -17,6 +17,10 @@ abstract class PhabricatorUIExample extends Phobject {
   abstract public function getDescription();
   abstract public function renderExample();
 
+  public function getCategory() {
+    return pht('General');
+  }
+
   protected function createBasicDummyHandle($name, $type, $fullname = null,
     $uri = null) {