Add a person to aspect contains a searchable list as opposed to a dropdown.

app/views/requests/_new_request.haml

@@ -2,30 +2,34 @@
 -#   licensed under the Affero General Public License version 3 or later.  See
 -#   the COPYRIGHT file.
 
-.span-12.last
+.span-15.last
   .modal_title_bar
     %h4
       =t('.add_a_new_friend_to')
       %i= aspect.name
 
-  = render 'shared/add_friend_dropdown', :aspect => aspect, :friends => current_user.friends_not_in_aspect(aspect), :manage => defined?(manage)
+  .span-6.append-1.last
+    %h3 Existing contacts
+    = render 'shared/add_friend_dropdown', :aspect => aspect, :friends => current_user.friends_not_in_aspect(aspect), :manage => defined?(manage)
 
-  = form_for(Request.new, :html => {:id => "new_request_to_#{aspect.id}"}) do |fr_request|
-    = fr_request.error_messages
+  .span-7.last
+    %h3 Add a new contact
+    = form_for(Request.new, :html => {:id => "new_request_to_#{aspect.id}"}) do |fr_request|
+      = fr_request.error_messages
 
-    =t('.enter_a_diaspora_username')
-    %br
-    %i= t '.your_diaspora_username_is', :diaspora_handle  => current_user.diaspora_handle
+      =t('.enter_a_diaspora_username')
+      %br
+      %i= t '.your_diaspora_username_is', :diaspora_handle  => current_user.diaspora_handle
 
-    %p
-      = fr_request.label :destination_url, t('.friends_username'), :for => "request_d_url_to_#{aspect.id}"
-      = fr_request.text_field :destination_url, :id => "request_d_url_to_#{aspect.id}"
-    = fr_request.hidden_field :aspect_id, :value => aspect.id
+      %p
+        = fr_request.label :destination_url, t('.friends_username'), :for => "request_d_url_to_#{aspect.id}"
+        = fr_request.text_field :destination_url, :id => "request_d_url_to_#{aspect.id}"
+      = fr_request.hidden_field :aspect_id, :value => aspect.id
 
-    - if defined?(getting_started)
-      = hidden_field_tag :getting_started, getting_started
-    - if defined?(manage)
-      = hidden_field_tag :manage, true
+      - if defined?(getting_started)
+        = hidden_field_tag :getting_started, getting_started
+      - if defined?(manage)
+        = hidden_field_tag :manage, true
 
-    = fr_request.submit t('.create_request')
+      = fr_request.submit t('.create_request')
 

app/views/shared/_add_friend_dropdown.html.haml

@@ -1,7 +1,35 @@
 
-= form_tag '/aspects/add_to_aspect', :id => "add_to_aspect_#{aspect.id}" do
-  = select_tag :friend_id, options_from_collection_for_select(friends, "id", "real_name"), :include_blank => true
-  = hidden_field_tag :aspect_id, aspect.id
-  - if defined?(manage) && manage
-    = hidden_field_tag :manage, true
-  = submit_tag t('.add_to', :aspect => aspect.name)
+:javascript
+  $(".contact_list_search").keyup(function(e){
+    var search = $(this);
+    var list   = $(this).siblings("ul").first();
+    var query  = new RegExp(search.val(),'i');
+
+    $("li", list).each( function() {
+      var element = $(this);
+      if( !element.text().match(query) ){
+        if( !element.hasClass('invis') ){
+          element.addClass('invis').fadeOut(10);
+        }
+      } else {
+        element.removeClass('invis').fadeIn(10);
+      }
+    });
+  });
+
+
+.contact_list
+  = search_field_tag :hello, "", :class => 'contact_list_search', :results => 5
+  %ul
+    - for person in friends
+      %li
+        = form_tag '/aspects/add_to_aspect' do
+          = person.real_name
+          
+          .right
+            = hidden_field_tag :aspect_id, aspect.id
+            = hidden_field_tag :friend_id, person.id
+            - if defined?(manage) && manage
+              = hidden_field_tag :manage, true
+            = submit_tag '+'
+

public/stylesheets/sass/application.sass

@@ -689,7 +689,6 @@ form p.checkbox_select
 
 label
   :font
-    :family 'Arial', 'Helvetica', sans-serif
     :weight normal
   :color #999
   :position absolute
@@ -1545,3 +1544,40 @@ h3 span.current_gs_step
 
           :color #eee
           :text-shadow none
+
+
+.contact_list
+  :height 300px
+  :max-height 300px
+  :overflow auto
+
+  :border 2px solid #ccc
+  :margin 
+    :bottom 1.5em
+
+  input.contact_list_search
+    :width 100%
+  ul
+    :width 100%
+    :margin 0
+    :padding 0
+    :list
+      :style none
+
+    > li
+      :display block
+      :position relative
+      :height 100%
+      :padding 8px
+      :border
+        :bottom 1px solid #eee
+      :font
+        :weight bold
+
+      &:hover
+        :background
+          :color #eee
+
+      .right
+        :top -6px
+

public/stylesheets/sass/ui.sass

@@ -11,6 +11,8 @@
   :display inline
 
   :padding 5px
+    :bottom 6px
+  :min-width 26px
 
   :font-size 12px
   :line-height 100%