vines 0.2.0 → 0.2.1

data/README

@@ -6,6 +6,11 @@ CouchDB, Redis, the file system, or a custom storage implementation that you pro
 LDAP authentication can be used so user names and passwords aren't stored in the chat
 database. SSL encryption is mandatory on all client and server connections.
 
+The Vines XMPP server includes a web chat client. The web application is available 
+immediately after starting the chat server at http://localhost:5280/chat/
+
+Additional documentation can be found at www.getvines.com.
+
 == Usage
 
 1. gem install vines

data/lib/vines/config.rb

@@ -5,7 +5,7 @@ module Vines
   # A Config object is passed to the stream handlers to give them access
   # to server configuration information like virtual host names, storage
   # systems, etc. This class provides the DSL methods used in the
-  # config/vines.rb file.
+  # conf/config.rb file.
   class Config
     LOG_LEVELS = %w[debug info warn error fatal].freeze
 

data/lib/vines/stream/http.rb

@@ -43,11 +43,11 @@ module Vines
         if request.path == self.bind
           body = Nokogiri::XML(request.body).root
           if session = Sessions[body['sid']]
-            session.request(request)
+            @session = session
           else
             @session = Http::Session.new(self)
-            @session.request(request)
           end
+          @session.request(request)
           @nodes.push(body)
         else
           request.reply_with_file(self.root)
@@ -152,4 +152,4 @@ module Vines
       end
     end
   end
-end
+end

data/lib/vines/version.rb

@@ -1,5 +1,5 @@
 # encoding: UTF-8
 
 module Vines
-  VERSION = '0.2.0'
+  VERSION = '0.2.1'
 end

data/web/chat/coffeescripts/chat.coffee

@@ -118,7 +118,7 @@ class ChatPage
     if presence.type == 'subscribe'
       node = $("""
         <li data-jid="#{presence.from}" style="display:none;">
-          <form class="notify-form">
+          <form class="inset">
             <h2>Buddy Approval</h2>
             <p>#{presence.from} wants to add you as a buddy.</p>
             <fieldset class="buttons">
@@ -235,7 +235,7 @@ class ChatPage
 
   toggleForm: (form, fn) ->
     form = $(form)
-    $('.contact-form').each ->
+    $('form.overlay').each ->
       $(this).hide() unless this.id == form.attr 'id'
     if form.is ':hidden'
       fn() if fn
@@ -245,19 +245,6 @@ class ChatPage
         form[0].reset()
         fn() if fn
 
-  filterRoster: ->
-    text = $('#search-roster-text').val().toLowerCase()
-    if text == ''
-      $('#roster li').show()
-      return
-
-    $('#roster li').each ->
-      node  = $(this)
-      jid   = (node.attr('data-jid') || '').toLowerCase()
-      name  = (node.attr('data-name') || '').toLowerCase()
-      match = jid.indexOf(text) != -1 || name.indexOf(text) != -1
-      if match then node.show() else node.hide()
-
   draw: ->
     unless @session.connected()
       window.location.hash = ''
@@ -266,18 +253,16 @@ class ChatPage
     $('body').attr 'id', 'chat-page'
     $('#container').hide().empty()
     $("""
-      <div id="alpha" class="y-fill">
-        <h2>Buddies <div id="search-roster"></div></h2>
-        <form id="search-roster-form" style="display:none;">
-          <input id="search-roster-text" type="search" placeholder="Filter" results="5"/>
-        </form>
-        <ul id="roster" class="y-fill"></ul>
-        <div id="roster-controls">
+      <div id="alpha" class="sidebar column y-fill">
+        <h2>Buddies <div id="search-roster-icon"></div></h2>
+        <div id="search-roster-form"></div>
+        <ul id="roster" class="selectable scroll y-fill"></ul>
+        <div id="alpha-controls" class="controls">
           <div id="add-contact"></div>
           <div id="remove-contact"></div>
           <div id="edit-contact"></div>
         </div>
-        <form id="add-contact-form" class="contact-form" style="display:none;">
+        <form id="add-contact-form" class="overlay" style="display:none;">
           <h2>Add Buddy</h2>
           <input id="add-contact-jid" type="email" maxlength="1024" placeholder="Account name"/>
           <input id="add-contact-name" type="text" maxlength="1024" placeholder="Real name"/>
@@ -286,7 +271,7 @@ class ChatPage
             <input id="add-contact-ok" type="submit" value="Add"/>
           </fieldset>
         </form>
-        <form id="remove-contact-form" class="contact-form" style="display:none;">
+        <form id="remove-contact-form" class="overlay" style="display:none;">
           <h2>Remove Buddy</h2>
           <p id="remove-contact-msg">Select a buddy in the list above to remove.</p>
           <fieldset class="buttons" style="display:none;">
@@ -294,7 +279,7 @@ class ChatPage
             <input id="remove-contact-ok" type="submit" value="Remove"/>
           </fieldset>
         </form>
-        <form id="edit-contact-form" class="contact-form" style="display:none;">
+        <form id="edit-contact-form" class="overlay" style="display:none;">
           <h2>Update Profile</h2>
           <p id="edit-contact-jid">Select a buddy in the list above to update.</p>
           <input id="edit-contact-name" type="text" maxlength="1024" placeholder="Real name" style="display:none;"/>
@@ -304,30 +289,30 @@ class ChatPage
           </fieldset>
         </form>
       </div>
-      <div id="beta" class="x-fill y-fill">
+      <div id="beta" class="primary column x-fill y-fill">
         <h2 id="chat-title">Select a buddy to chat</h2>
-        <ul id="messages" class="y-fill"></ul>
+        <ul id="messages" class="scroll y-fill"></ul>
         <form id="message-form">
           <input id="message" name="message" type="text" maxlength="1024" placeholder="Type a message and press enter to send"/>
         </form>
       </div>
-      <div id="charlie" class="y-fill">
+      <div id="charlie" class="sidebar column y-fill">
         <h2>Notifications</h2>
-        <ul id="notifications" class="y-fill"></ul>
-        <div id="notification-controls">
+        <ul id="notifications" class="scroll y-fill"></ul>
+        <div id="charlie-controls" class="controls">
           <div id="clear-notices"></div>
         </div>
       </div>
     """).appendTo '#container'
 
     this.roster()
-    this.button 'clear-notices', ICONS.no
-    this.button 'add-contact', ICONS.plus
-    this.button 'remove-contact', ICONS.minus
-    this.button 'edit-contact', ICONS.user
-    this.button 'search-roster', ICONS.search, scale: 0.5, translation: '-8 -8'
 
-    $('#message').focus -> $('.contact-form').fadeOut()
+    new Button '#clear-notices',  ICONS.no
+    new Button '#add-contact',    ICONS.plus
+    new Button '#remove-contact', ICONS.minus
+    new Button '#edit-contact',   ICONS.user
+
+    $('#message').focus -> $('form.overlay').fadeOut()
     $('#message-form').submit  => this.send()
 
     $('#clear-notices').click  -> $('#notifications li').fadeOut 200
@@ -346,16 +331,21 @@ class ChatPage
     $('#add-contact-form').submit    => this.addContact()
     $('#remove-contact-form').submit => this.removeContact()
     $('#edit-contact-form').submit   => this.updateContact()
-    $('#search-roster-form').submit  -> false
-
-    $('#search-roster-text').keyup  => this.filterRoster()
-    $('#search-roster-text').change => this.filterRoster()
-    $('#search-roster-text').click  => this.filterRoster()
-    $('#search-roster').click =>
-      this.toggleForm '#search-roster-form', => this.filterRoster()
 
     $('#container').fadeIn 200
-    this.resize()
+    layout = this.resize()
+
+    fn = ->
+      layout.resize()
+      layout.resize() # not sure why two are needed
+
+    new Filter
+      list: '#roster'
+      icon: '#search-roster-icon'
+      form: '#search-roster-form'
+      attrs: ['data-jid', 'data-name']
+      open:  fn
+      close: fn
 
   resize: ->
     a    = $ '#alpha'
@@ -366,20 +356,3 @@ class ChatPage
     new Layout ->
       c.css 'left', a.width() + b.width()
       msg.width form.width() - 32
-
-  button: (id, path, options) ->
-    options ||= {}
-    paper = Raphael(id)
-    icon = paper.path(path).attr
-      fill: '#000'
-      stroke: '#fff'
-      'stroke-width': 0.3
-      opacity: 0.6
-      scale: options.scale || 0.85
-      translation: options.translation || ''
-
-    node = $('#' + id)
-    node.hover(
-      -> icon.animate(opacity: 1.0, 200),
-      -> icon.animate(opacity: 0.6, 200))
-    node.get 0

data/web/chat/javascripts/app.js

@@ -1 +1 @@
-var ChatPage,__bind=function(a,b){return function(){return a.apply(b,arguments)}};ChatPage=function(){function a(a){this.session=a,this.session.onRoster(__bind(function(){return this.roster()},this)),this.session.onCard(__bind(function(a){return this.card(a)},this)),this.session.onMessage(__bind(function(a){return this.message(a)},this)),this.session.onPresence(__bind(function(a){return this.presence(a)},this)),this.chats={},this.currentContact=null}a.prototype.datef=function(a){var b,c,d,e;b=new Date(a),d=b.getHours()>=12?" pm":" am",c=b.getHours()>12?b.getHours()-12:b.getHours(),c===0&&(c=12),e=b.getMinutes()+"",e.length===1&&(e="0"+e);return c+":"+e+d},a.prototype.card=function(a){return this.eachContact(a.jid,__bind(function(b){return $(".vcard-img",b).attr("src",this.session.avatar(a.jid))},this))},a.prototype.roster=function(){var a,b,c,d,e,f,g,h;e=$("#roster"),$("li",e).each(__bind(function(a,b){var c;c=$(b).attr("data-jid");if(!this.session.roster[c])return $(b).remove()},this)),f=function(a,b){$(".text",a).text(b.name||b.jid);return a.attr("data-name",b.name||"")},g=this.session.roster,h=[];for(c in g)a=g[c],b=$("#roster li[data-jid='"+c+"']"),f(b,a),h.push(b.length===0?(d=$('<li data-jid="'+c+'" data-name="" class="offline">\n  <span class="text"></span>\n  <span class="status-msg">Offline</span>\n  <span class="unread" style="display:none;"></span>\n  <img class="vcard-img" alt="'+c+'" src="'+this.session.avatar(c)+'"/>\n</li>').appendTo(e),f(d,a),d.click(__bind(function(a){return this.selectContact(a)},this))):void 0);return h},a.prototype.message=function(a){var b,c,d,e;this.queueMessage(a),e=a.from===this.session.jid(),d=a.from.split("/")[0];if(!e&&d!==this.currentContact){c=this.chat(a.from),c.unread++;return this.eachContact(d,function(a){return $(".unread",a).text(c.unread).show()})}b=this.atBottom(),this.appendMessage(a);if(b)return this.scroll()},a.prototype.eachContact=function(a,b){var c,d,e,f,g;f=$("#roster li[data-jid='"+a+"']").get(),g=[];for(d=0,e=f.length;d<e;d++)c=f[d],g.push(b($(c)));return g},a.prototype.appendMessage=function(a){var b,c,d,e;c=a.from.split("/")[0],b=this.session.roster[c],d=b?b.name||c:c,a.from===this.session.jid()&&(d="Me"),e=$('<li data-jid="'+c+'" style="display:none;">\n  <p></p>\n  <img alt="'+c+'" src="'+this.session.avatar(c)+'"/>\n  <footer>\n    <span class="author"></span>\n    <span class="time">'+this.datef(a.received)+"</span>\n  </footer>\n</li>").appendTo("#messages"),$("p",e).text(a.text),$(".author",e).text(d);return e.fadeIn(200)},a.prototype.queueMessage=function(a){var b,c,d;d=a.from===this.session.jid(),c=a[d?"to":"from"],b=this.chat(c),b.jid=c;return b.messages.push(a)},a.prototype.chat=function(a){var b,c;b=a.split("/")[0],c=this.chats[b],c||(c={jid:a,messages:[],unread:0},this.chats[b]=c);return c},a.prototype.presence=function(a){var b,c,d;c=a.from.split("/")[0];if(c!==this.session.bareJid()){if(!a.type||a.offline)b=this.session.roster[c],this.eachContact(c,function(a){$(".status-msg",a).text(b.status());return b.offline()?a.addClass("offline"):a.removeClass("offline")});a.offline&&(this.chat(c).jid=c);if(a.type==="subscribe"){d=$('<li data-jid="'+a.from+'" style="display:none;">\n  <form class="notify-form">\n    <h2>Buddy Approval</h2>\n    <p>'+a.from+' wants to add you as a buddy.</p>\n    <fieldset class="buttons">\n      <input type="button" value="Decline"/>\n      <input type="submit" value="Accept"/>\n    </fieldset>\n  </form>\n</li>').appendTo("#notifications"),d.fadeIn(200),$("form",d).submit(__bind(function(){return this.acceptContact(d,a.from)},this));return $('input[type="button"]',d).click(__bind(function(){return this.rejectContact(d,a.from)},this))}}},a.prototype.acceptContact=function(a,b){a.fadeOut(200,function(){return a.remove()}),this.session.sendSubscribed(b),this.session.sendSubscribe(b);return!1},a.prototype.rejectContact=function(a,b){a.fadeOut(200,function(){return a.remove()});return this.session.sendUnsubscribed(b)},a.prototype.selectContact=function(a){var b,c,d,e,f,g,h;d=$(a.currentTarget).attr("data-jid"),c=this.session.roster[d];if(this.currentContact!==d){this.currentContact=d,$("#roster li").removeClass("selected"),$(a.currentTarget).addClass("selected"),$("#chat-title").text("Chat with "+(c.name||c.jid)),$("#messages").empty(),b=this.chats[d],e=[],b&&(e=b.messages,b.unread=0,this.eachContact(d,function(a){return $(".unread",a).text("").hide()}));for(g=0,h=e.length;g<h;g++)f=e[g],this.appendMessage(f);this.scroll(),$("#remove-contact-msg").html("Are you sure you want to remove "+("<strong>"+this.currentContact+"</strong> from your buddy list?")),$("#remove-contact-form .buttons").fadeIn(200),$("#edit-contact-jid").text(this.currentContact),$("#edit-contact-name").val(this.session.roster[this.currentContact].name),$("#edit-contact-form input").fadeIn(200);return $("#edit-contact-form .buttons").fadeIn(200)}},a.prototype.scroll=function(){var a;a=$("#messages");return a.animate({scrollTop:a.prop("scrollHeight")},400)},a.prototype.atBottom=function(){var a,b;b=$("#messages"),a=b.prop("scrollHeight")-b.height();return b.scrollTop()===a},a.prototype.send=function(){var a,b,c,d;if(!this.currentContact)return!1;b=$("#message"),d=b.val().trim(),d&&(a=this.chats[this.currentContact],c=a?a.jid:this.currentContact,this.message({from:this.session.jid(),text:d,to:c,received:new Date}),this.session.sendMessage(c,d)),b.val("");return!1},a.prototype.addContact=function(){var a;this.toggleForm("#add-contact-form"),a={jid:$("#add-contact-jid").val(),name:$("#add-contact-name").val(),groups:["Buddies"]},a.jid&&this.session.updateContact(a,!0);return!1},a.prototype.removeContact=function(){this.toggleForm("#remove-contact-form"),this.session.removeContact(this.currentContact),this.currentContact=null,$("#chat-title").text("Select a buddy to chat"),$("#messages").empty(),$("#remove-contact-msg").html("Select a buddy in the list above to remove."),$("#remove-contact-form .buttons").hide(),$("#edit-contact-jid").text("Select a buddy in the list above to update."),$("#edit-contact-name").val(""),$("#edit-contact-form input").hide(),$("#edit-contact-form .buttons").hide();return!1},a.prototype.updateContact=function(){var a;this.toggleForm("#edit-contact-form"),a={jid:this.currentContact,name:$("#edit-contact-name").val(),groups:this.session.roster[this.currentContact].groups},this.session.updateContact(a);return!1},a.prototype.toggleForm=function(a,b){a=$(a),$(".contact-form").each(function(){if(this.id!==a.attr("id"))return $(this).hide()});if(a.is(":hidden")){b&&b();return a.fadeIn(100)}return a.fadeOut(100,function(){a[0].reset();if(b)return b()})},a.prototype.filterRoster=function(){var a;a=$("#search-roster-text").val().toLowerCase();if(a==="")$("#roster li").show();else return $("#roster li").each(function(){var b,c,d,e;e=$(this),b=(e.attr("data-jid")||"").toLowerCase(),d=(e.attr("data-name")||"").toLowerCase(),c=b.indexOf(a)!==-1||d.indexOf(a)!==-1;return c?e.show():e.hide()})},a.prototype.draw=function(){if(!this.session.connected())window.location.hash="";else{$("body").attr("id","chat-page"),$("#container").hide().empty(),$('<div id="alpha" class="y-fill">\n  <h2>Buddies <div id="search-roster"></div></h2>\n  <form id="search-roster-form" style="display:none;">\n    <input id="search-roster-text" type="search" placeholder="Filter" results="5"/>\n  </form>\n  <ul id="roster" class="y-fill"></ul>\n  <div id="roster-controls">\n    <div id="add-contact"></div>\n    <div id="remove-contact"></div>\n    <div id="edit-contact"></div>\n  </div>\n  <form id="add-contact-form" class="contact-form" style="display:none;">\n    <h2>Add Buddy</h2>\n    <input id="add-contact-jid" type="email" maxlength="1024" placeholder="Account name"/>\n    <input id="add-contact-name" type="text" maxlength="1024" placeholder="Real name"/>\n    <fieldset class="buttons">\n      <input id="add-contact-cancel" type="button" value="Cancel"/>\n      <input id="add-contact-ok" type="submit" value="Add"/>\n    </fieldset>\n  </form>\n  <form id="remove-contact-form" class="contact-form" style="display:none;">\n    <h2>Remove Buddy</h2>\n    <p id="remove-contact-msg">Select a buddy in the list above to remove.</p>\n    <fieldset class="buttons" style="display:none;">\n      <input id="remove-contact-cancel" type="button" value="Cancel"/>\n      <input id="remove-contact-ok" type="submit" value="Remove"/>\n    </fieldset>\n  </form>\n  <form id="edit-contact-form" class="contact-form" style="display:none;">\n    <h2>Update Profile</h2>\n    <p id="edit-contact-jid">Select a buddy in the list above to update.</p>\n    <input id="edit-contact-name" type="text" maxlength="1024" placeholder="Real name" style="display:none;"/>\n    <fieldset class="buttons" style="display:none;">\n      <input id="edit-contact-cancel" type="button" value="Cancel"/>\n      <input id="edit-contact-ok" type="submit" value="Save"/>\n    </fieldset>\n  </form>\n</div>\n<div id="beta" class="x-fill y-fill">\n  <h2 id="chat-title">Select a buddy to chat</h2>\n  <ul id="messages" class="y-fill"></ul>\n  <form id="message-form">\n    <input id="message" name="message" type="text" maxlength="1024" placeholder="Type a message and press enter to send"/>\n  </form>\n</div>\n<div id="charlie" class="y-fill">\n  <h2>Notifications</h2>\n  <ul id="notifications" class="y-fill"></ul>\n  <div id="notification-controls">\n    <div id="clear-notices"></div>\n  </div>\n</div>').appendTo("#container"),this.roster(),this.button("clear-notices",ICONS.no),this.button("add-contact",ICONS.plus),this.button("remove-contact",ICONS.minus),this.button("edit-contact",ICONS.user),this.button("search-roster",ICONS.search,{scale:.5,translation:"-8 -8"}),$("#message").focus(function(){return $(".contact-form").fadeOut()}),$("#message-form").submit(__bind(function(){return this.send()},this)),$("#clear-notices").click(function(){return $("#notifications li").fadeOut(200)}),$("#add-contact").click(__bind(function(){return this.toggleForm("#add-contact-form")},this)),$("#remove-contact").click(__bind(function(){return this.toggleForm("#remove-contact-form")},this)),$("#edit-contact").click(__bind(function(){return this.toggleForm("#edit-contact-form",__bind(function(){if(this.currentContact){$("#edit-contact-jid").text(this.currentContact);return $("#edit-contact-name").val(this.session.roster[this.currentContact].name)}},this))},this)),$("#add-contact-cancel").click(__bind(function(){return this.toggleForm("#add-contact-form")},this)),$("#remove-contact-cancel").click(__bind(function(){return this.toggleForm("#remove-contact-form")},this)),$("#edit-contact-cancel").click(__bind(function(){return this.toggleForm("#edit-contact-form")},this)),$("#add-contact-form").submit(__bind(function(){return this.addContact()},this)),$("#remove-contact-form").submit(__bind(function(){return this.removeContact()},this)),$("#edit-contact-form").submit(__bind(function(){return this.updateContact()},this)),$("#search-roster-form").submit(function(){return!1}),$("#search-roster-text").keyup(__bind(function(){return this.filterRoster()},this)),$("#search-roster-text").change(__bind(function(){return this.filterRoster()},this)),$("#search-roster-text").click(__bind(function(){return this.filterRoster()},this)),$("#search-roster").click(__bind(function(){return this.toggleForm("#search-roster-form",__bind(function(){return this.filterRoster()},this))},this)),$("#container").fadeIn(200);return this.resize()}},a.prototype.resize=function(){var a,b,c,d,e;a=$("#alpha"),b=$("#beta"),c=$("#charlie"),e=$("#message"),d=$("#message-form");return new Layout(function(){c.css("left",a.width()+b.width());return e.width(d.width()-32)})},a.prototype.button=function(a,b,c){var d,e,f;c||(c={}),f=Raphael(a),d=f.path(b).attr({fill:"#000",stroke:"#fff","stroke-width":.3,opacity:.6,scale:c.scale||.85,translation:c.translation||""}),e=$("#"+a),e.hover(function(){return d.animate({opacity:1},200)},function(){return d.animate({opacity:.6},200)});return e.get(0)};return a}();var LogoutPage;LogoutPage=function(){function a(a){this.session=a}a.prototype.draw=function(){window.location.hash="";return window.location.reload()};return a}(),$(function(){var a,b,c,d,e,f;f=new Session,d=new NavBar(f),d.draw(),a={Messages:ICONS.chat,Logout:ICONS.power};for(c in a)b=a[c],d.addButton(c,b);e={"/messages":new ChatPage(f),"/logout":new LogoutPage(f),"default":new LoginPage(f,"/messages/")},(new Router(e)).draw();return d.select($("#nav-link-messages").parent())})
+var ChatPage,__bind=function(a,b){return function(){return a.apply(b,arguments)}};ChatPage=function(){function a(a){this.session=a,this.session.onRoster(__bind(function(){return this.roster()},this)),this.session.onCard(__bind(function(a){return this.card(a)},this)),this.session.onMessage(__bind(function(a){return this.message(a)},this)),this.session.onPresence(__bind(function(a){return this.presence(a)},this)),this.chats={},this.currentContact=null}a.prototype.datef=function(a){var b,c,d,e;b=new Date(a),d=b.getHours()>=12?" pm":" am",c=b.getHours()>12?b.getHours()-12:b.getHours(),c===0&&(c=12),e=b.getMinutes()+"",e.length===1&&(e="0"+e);return c+":"+e+d},a.prototype.card=function(a){return this.eachContact(a.jid,__bind(function(b){return $(".vcard-img",b).attr("src",this.session.avatar(a.jid))},this))},a.prototype.roster=function(){var a,b,c,d,e,f,g,h;e=$("#roster"),$("li",e).each(__bind(function(a,b){var c;c=$(b).attr("data-jid");if(!this.session.roster[c])return $(b).remove()},this)),f=function(a,b){$(".text",a).text(b.name||b.jid);return a.attr("data-name",b.name||"")},g=this.session.roster,h=[];for(c in g)a=g[c],b=$("#roster li[data-jid='"+c+"']"),f(b,a),h.push(b.length===0?(d=$('<li data-jid="'+c+'" data-name="" class="offline">\n  <span class="text"></span>\n  <span class="status-msg">Offline</span>\n  <span class="unread" style="display:none;"></span>\n  <img class="vcard-img" alt="'+c+'" src="'+this.session.avatar(c)+'"/>\n</li>').appendTo(e),f(d,a),d.click(__bind(function(a){return this.selectContact(a)},this))):void 0);return h},a.prototype.message=function(a){var b,c,d,e;this.queueMessage(a),e=a.from===this.session.jid(),d=a.from.split("/")[0];if(!e&&d!==this.currentContact){c=this.chat(a.from),c.unread++;return this.eachContact(d,function(a){return $(".unread",a).text(c.unread).show()})}b=this.atBottom(),this.appendMessage(a);if(b)return this.scroll()},a.prototype.eachContact=function(a,b){var c,d,e,f,g;f=$("#roster li[data-jid='"+a+"']").get(),g=[];for(d=0,e=f.length;d<e;d++)c=f[d],g.push(b($(c)));return g},a.prototype.appendMessage=function(a){var b,c,d,e;c=a.from.split("/")[0],b=this.session.roster[c],d=b?b.name||c:c,a.from===this.session.jid()&&(d="Me"),e=$('<li data-jid="'+c+'" style="display:none;">\n  <p></p>\n  <img alt="'+c+'" src="'+this.session.avatar(c)+'"/>\n  <footer>\n    <span class="author"></span>\n    <span class="time">'+this.datef(a.received)+"</span>\n  </footer>\n</li>").appendTo("#messages"),$("p",e).text(a.text),$(".author",e).text(d);return e.fadeIn(200)},a.prototype.queueMessage=function(a){var b,c,d;d=a.from===this.session.jid(),c=a[d?"to":"from"],b=this.chat(c),b.jid=c;return b.messages.push(a)},a.prototype.chat=function(a){var b,c;b=a.split("/")[0],c=this.chats[b],c||(c={jid:a,messages:[],unread:0},this.chats[b]=c);return c},a.prototype.presence=function(a){var b,c,d;c=a.from.split("/")[0];if(c!==this.session.bareJid()){if(!a.type||a.offline)b=this.session.roster[c],this.eachContact(c,function(a){$(".status-msg",a).text(b.status());return b.offline()?a.addClass("offline"):a.removeClass("offline")});a.offline&&(this.chat(c).jid=c);if(a.type==="subscribe"){d=$('<li data-jid="'+a.from+'" style="display:none;">\n  <form class="inset">\n    <h2>Buddy Approval</h2>\n    <p>'+a.from+' wants to add you as a buddy.</p>\n    <fieldset class="buttons">\n      <input type="button" value="Decline"/>\n      <input type="submit" value="Accept"/>\n    </fieldset>\n  </form>\n</li>').appendTo("#notifications"),d.fadeIn(200),$("form",d).submit(__bind(function(){return this.acceptContact(d,a.from)},this));return $('input[type="button"]',d).click(__bind(function(){return this.rejectContact(d,a.from)},this))}}},a.prototype.acceptContact=function(a,b){a.fadeOut(200,function(){return a.remove()}),this.session.sendSubscribed(b),this.session.sendSubscribe(b);return!1},a.prototype.rejectContact=function(a,b){a.fadeOut(200,function(){return a.remove()});return this.session.sendUnsubscribed(b)},a.prototype.selectContact=function(a){var b,c,d,e,f,g,h;d=$(a.currentTarget).attr("data-jid"),c=this.session.roster[d];if(this.currentContact!==d){this.currentContact=d,$("#roster li").removeClass("selected"),$(a.currentTarget).addClass("selected"),$("#chat-title").text("Chat with "+(c.name||c.jid)),$("#messages").empty(),b=this.chats[d],e=[],b&&(e=b.messages,b.unread=0,this.eachContact(d,function(a){return $(".unread",a).text("").hide()}));for(g=0,h=e.length;g<h;g++)f=e[g],this.appendMessage(f);this.scroll(),$("#remove-contact-msg").html("Are you sure you want to remove "+("<strong>"+this.currentContact+"</strong> from your buddy list?")),$("#remove-contact-form .buttons").fadeIn(200),$("#edit-contact-jid").text(this.currentContact),$("#edit-contact-name").val(this.session.roster[this.currentContact].name),$("#edit-contact-form input").fadeIn(200);return $("#edit-contact-form .buttons").fadeIn(200)}},a.prototype.scroll=function(){var a;a=$("#messages");return a.animate({scrollTop:a.prop("scrollHeight")},400)},a.prototype.atBottom=function(){var a,b;b=$("#messages"),a=b.prop("scrollHeight")-b.height();return b.scrollTop()===a},a.prototype.send=function(){var a,b,c,d;if(!this.currentContact)return!1;b=$("#message"),d=b.val().trim(),d&&(a=this.chats[this.currentContact],c=a?a.jid:this.currentContact,this.message({from:this.session.jid(),text:d,to:c,received:new Date}),this.session.sendMessage(c,d)),b.val("");return!1},a.prototype.addContact=function(){var a;this.toggleForm("#add-contact-form"),a={jid:$("#add-contact-jid").val(),name:$("#add-contact-name").val(),groups:["Buddies"]},a.jid&&this.session.updateContact(a,!0);return!1},a.prototype.removeContact=function(){this.toggleForm("#remove-contact-form"),this.session.removeContact(this.currentContact),this.currentContact=null,$("#chat-title").text("Select a buddy to chat"),$("#messages").empty(),$("#remove-contact-msg").html("Select a buddy in the list above to remove."),$("#remove-contact-form .buttons").hide(),$("#edit-contact-jid").text("Select a buddy in the list above to update."),$("#edit-contact-name").val(""),$("#edit-contact-form input").hide(),$("#edit-contact-form .buttons").hide();return!1},a.prototype.updateContact=function(){var a;this.toggleForm("#edit-contact-form"),a={jid:this.currentContact,name:$("#edit-contact-name").val(),groups:this.session.roster[this.currentContact].groups},this.session.updateContact(a);return!1},a.prototype.toggleForm=function(a,b){a=$(a),$("form.overlay").each(function(){if(this.id!==a.attr("id"))return $(this).hide()});if(a.is(":hidden")){b&&b();return a.fadeIn(100)}return a.fadeOut(100,function(){a[0].reset();if(b)return b()})},a.prototype.draw=function(){var a,b;if(!this.session.connected())window.location.hash="";else{$("body").attr("id","chat-page"),$("#container").hide().empty(),$('<div id="alpha" class="sidebar column y-fill">\n  <h2>Buddies <div id="search-roster-icon"></div></h2>\n  <div id="search-roster-form"></div>\n  <ul id="roster" class="selectable scroll y-fill"></ul>\n  <div id="alpha-controls" class="controls">\n    <div id="add-contact"></div>\n    <div id="remove-contact"></div>\n    <div id="edit-contact"></div>\n  </div>\n  <form id="add-contact-form" class="overlay" style="display:none;">\n    <h2>Add Buddy</h2>\n    <input id="add-contact-jid" type="email" maxlength="1024" placeholder="Account name"/>\n    <input id="add-contact-name" type="text" maxlength="1024" placeholder="Real name"/>\n    <fieldset class="buttons">\n      <input id="add-contact-cancel" type="button" value="Cancel"/>\n      <input id="add-contact-ok" type="submit" value="Add"/>\n    </fieldset>\n  </form>\n  <form id="remove-contact-form" class="overlay" style="display:none;">\n    <h2>Remove Buddy</h2>\n    <p id="remove-contact-msg">Select a buddy in the list above to remove.</p>\n    <fieldset class="buttons" style="display:none;">\n      <input id="remove-contact-cancel" type="button" value="Cancel"/>\n      <input id="remove-contact-ok" type="submit" value="Remove"/>\n    </fieldset>\n  </form>\n  <form id="edit-contact-form" class="overlay" style="display:none;">\n    <h2>Update Profile</h2>\n    <p id="edit-contact-jid">Select a buddy in the list above to update.</p>\n    <input id="edit-contact-name" type="text" maxlength="1024" placeholder="Real name" style="display:none;"/>\n    <fieldset class="buttons" style="display:none;">\n      <input id="edit-contact-cancel" type="button" value="Cancel"/>\n      <input id="edit-contact-ok" type="submit" value="Save"/>\n    </fieldset>\n  </form>\n</div>\n<div id="beta" class="primary column x-fill y-fill">\n  <h2 id="chat-title">Select a buddy to chat</h2>\n  <ul id="messages" class="scroll y-fill"></ul>\n  <form id="message-form">\n    <input id="message" name="message" type="text" maxlength="1024" placeholder="Type a message and press enter to send"/>\n  </form>\n</div>\n<div id="charlie" class="sidebar column y-fill">\n  <h2>Notifications</h2>\n  <ul id="notifications" class="scroll y-fill"></ul>\n  <div id="charlie-controls" class="controls">\n    <div id="clear-notices"></div>\n  </div>\n</div>').appendTo("#container"),this.roster(),new Button("#clear-notices",ICONS.no),new Button("#add-contact",ICONS.plus),new Button("#remove-contact",ICONS.minus),new Button("#edit-contact",ICONS.user),$("#message").focus(function(){return $("form.overlay").fadeOut()}),$("#message-form").submit(__bind(function(){return this.send()},this)),$("#clear-notices").click(function(){return $("#notifications li").fadeOut(200)}),$("#add-contact").click(__bind(function(){return this.toggleForm("#add-contact-form")},this)),$("#remove-contact").click(__bind(function(){return this.toggleForm("#remove-contact-form")},this)),$("#edit-contact").click(__bind(function(){return this.toggleForm("#edit-contact-form",__bind(function(){if(this.currentContact){$("#edit-contact-jid").text(this.currentContact);return $("#edit-contact-name").val(this.session.roster[this.currentContact].name)}},this))},this)),$("#add-contact-cancel").click(__bind(function(){return this.toggleForm("#add-contact-form")},this)),$("#remove-contact-cancel").click(__bind(function(){return this.toggleForm("#remove-contact-form")},this)),$("#edit-contact-cancel").click(__bind(function(){return this.toggleForm("#edit-contact-form")},this)),$("#add-contact-form").submit(__bind(function(){return this.addContact()},this)),$("#remove-contact-form").submit(__bind(function(){return this.removeContact()},this)),$("#edit-contact-form").submit(__bind(function(){return this.updateContact()},this)),$("#container").fadeIn(200),b=this.resize(),a=function(){b.resize();return b.resize()};return new Filter({list:"#roster",icon:"#search-roster-icon",form:"#search-roster-form",attrs:["data-jid","data-name"],open:a,close:a})}},a.prototype.resize=function(){var a,b,c,d,e;a=$("#alpha"),b=$("#beta"),c=$("#charlie"),e=$("#message"),d=$("#message-form");return new Layout(function(){c.css("left",a.width()+b.width());return e.width(d.width()-32)})};return a}();var LogoutPage;LogoutPage=function(){function a(a){this.session=a}a.prototype.draw=function(){window.location.hash="";return window.location.reload()};return a}(),$(function(){var a,b,c,d,e,f;f=new Session,d=new NavBar(f),d.draw(),a={Messages:ICONS.chat,Logout:ICONS.power};for(c in a)b=a[c],d.addButton(c,b);e={"/messages":new ChatPage(f),"/logout":new LogoutPage(f),"default":new LoginPage(f,"/messages/")},(new Router(e)).draw();return d.select($("#nav-link-messages").parent())})

data/web/chat/javascripts/chat.js

@@ -148,7 +148,7 @@ ChatPage = (function() {
       this.chat(from).jid = from;
     }
     if (presence.type === 'subscribe') {
-      node = $("<li data-jid=\"" + presence.from + "\" style=\"display:none;\">\n  <form class=\"notify-form\">\n    <h2>Buddy Approval</h2>\n    <p>" + presence.from + " wants to add you as a buddy.</p>\n    <fieldset class=\"buttons\">\n      <input type=\"button\" value=\"Decline\"/>\n      <input type=\"submit\" value=\"Accept\"/>\n    </fieldset>\n  </form>\n</li>").appendTo('#notifications');
+      node = $("<li data-jid=\"" + presence.from + "\" style=\"display:none;\">\n  <form class=\"inset\">\n    <h2>Buddy Approval</h2>\n    <p>" + presence.from + " wants to add you as a buddy.</p>\n    <fieldset class=\"buttons\">\n      <input type=\"button\" value=\"Decline\"/>\n      <input type=\"submit\" value=\"Accept\"/>\n    </fieldset>\n  </form>\n</li>").appendTo('#notifications');
       node.fadeIn(200);
       $('form', node).submit(__bind(function() {
         return this.acceptContact(node, presence.from);
@@ -279,7 +279,7 @@ ChatPage = (function() {
   };
   ChatPage.prototype.toggleForm = function(form, fn) {
     form = $(form);
-    $('.contact-form').each(function() {
+    $('form.overlay').each(function() {
       if (this.id !== form.attr('id')) {
         return $(this).hide();
       }
@@ -298,45 +298,22 @@ ChatPage = (function() {
       });
     }
   };
-  ChatPage.prototype.filterRoster = function() {
-    var text;
-    text = $('#search-roster-text').val().toLowerCase();
-    if (text === '') {
-      $('#roster li').show();
-      return;
-    }
-    return $('#roster li').each(function() {
-      var jid, match, name, node;
-      node = $(this);
-      jid = (node.attr('data-jid') || '').toLowerCase();
-      name = (node.attr('data-name') || '').toLowerCase();
-      match = jid.indexOf(text) !== -1 || name.indexOf(text) !== -1;
-      if (match) {
-        return node.show();
-      } else {
-        return node.hide();
-      }
-    });
-  };
   ChatPage.prototype.draw = function() {
+    var fn, layout;
     if (!this.session.connected()) {
       window.location.hash = '';
       return;
     }
     $('body').attr('id', 'chat-page');
     $('#container').hide().empty();
-    $("<div id=\"alpha\" class=\"y-fill\">\n  <h2>Buddies <div id=\"search-roster\"></div></h2>\n  <form id=\"search-roster-form\" style=\"display:none;\">\n    <input id=\"search-roster-text\" type=\"search\" placeholder=\"Filter\" results=\"5\"/>\n  </form>\n  <ul id=\"roster\" class=\"y-fill\"></ul>\n  <div id=\"roster-controls\">\n    <div id=\"add-contact\"></div>\n    <div id=\"remove-contact\"></div>\n    <div id=\"edit-contact\"></div>\n  </div>\n  <form id=\"add-contact-form\" class=\"contact-form\" style=\"display:none;\">\n    <h2>Add Buddy</h2>\n    <input id=\"add-contact-jid\" type=\"email\" maxlength=\"1024\" placeholder=\"Account name\"/>\n    <input id=\"add-contact-name\" type=\"text\" maxlength=\"1024\" placeholder=\"Real name\"/>\n    <fieldset class=\"buttons\">\n      <input id=\"add-contact-cancel\" type=\"button\" value=\"Cancel\"/>\n      <input id=\"add-contact-ok\" type=\"submit\" value=\"Add\"/>\n    </fieldset>\n  </form>\n  <form id=\"remove-contact-form\" class=\"contact-form\" style=\"display:none;\">\n    <h2>Remove Buddy</h2>\n    <p id=\"remove-contact-msg\">Select a buddy in the list above to remove.</p>\n    <fieldset class=\"buttons\" style=\"display:none;\">\n      <input id=\"remove-contact-cancel\" type=\"button\" value=\"Cancel\"/>\n      <input id=\"remove-contact-ok\" type=\"submit\" value=\"Remove\"/>\n    </fieldset>\n  </form>\n  <form id=\"edit-contact-form\" class=\"contact-form\" style=\"display:none;\">\n    <h2>Update Profile</h2>\n    <p id=\"edit-contact-jid\">Select a buddy in the list above to update.</p>\n    <input id=\"edit-contact-name\" type=\"text\" maxlength=\"1024\" placeholder=\"Real name\" style=\"display:none;\"/>\n    <fieldset class=\"buttons\" style=\"display:none;\">\n      <input id=\"edit-contact-cancel\" type=\"button\" value=\"Cancel\"/>\n      <input id=\"edit-contact-ok\" type=\"submit\" value=\"Save\"/>\n    </fieldset>\n  </form>\n</div>\n<div id=\"beta\" class=\"x-fill y-fill\">\n  <h2 id=\"chat-title\">Select a buddy to chat</h2>\n  <ul id=\"messages\" class=\"y-fill\"></ul>\n  <form id=\"message-form\">\n    <input id=\"message\" name=\"message\" type=\"text\" maxlength=\"1024\" placeholder=\"Type a message and press enter to send\"/>\n  </form>\n</div>\n<div id=\"charlie\" class=\"y-fill\">\n  <h2>Notifications</h2>\n  <ul id=\"notifications\" class=\"y-fill\"></ul>\n  <div id=\"notification-controls\">\n    <div id=\"clear-notices\"></div>\n  </div>\n</div>").appendTo('#container');
+    $("<div id=\"alpha\" class=\"sidebar column y-fill\">\n  <h2>Buddies <div id=\"search-roster-icon\"></div></h2>\n  <div id=\"search-roster-form\"></div>\n  <ul id=\"roster\" class=\"selectable scroll y-fill\"></ul>\n  <div id=\"alpha-controls\" class=\"controls\">\n    <div id=\"add-contact\"></div>\n    <div id=\"remove-contact\"></div>\n    <div id=\"edit-contact\"></div>\n  </div>\n  <form id=\"add-contact-form\" class=\"overlay\" style=\"display:none;\">\n    <h2>Add Buddy</h2>\n    <input id=\"add-contact-jid\" type=\"email\" maxlength=\"1024\" placeholder=\"Account name\"/>\n    <input id=\"add-contact-name\" type=\"text\" maxlength=\"1024\" placeholder=\"Real name\"/>\n    <fieldset class=\"buttons\">\n      <input id=\"add-contact-cancel\" type=\"button\" value=\"Cancel\"/>\n      <input id=\"add-contact-ok\" type=\"submit\" value=\"Add\"/>\n    </fieldset>\n  </form>\n  <form id=\"remove-contact-form\" class=\"overlay\" style=\"display:none;\">\n    <h2>Remove Buddy</h2>\n    <p id=\"remove-contact-msg\">Select a buddy in the list above to remove.</p>\n    <fieldset class=\"buttons\" style=\"display:none;\">\n      <input id=\"remove-contact-cancel\" type=\"button\" value=\"Cancel\"/>\n      <input id=\"remove-contact-ok\" type=\"submit\" value=\"Remove\"/>\n    </fieldset>\n  </form>\n  <form id=\"edit-contact-form\" class=\"overlay\" style=\"display:none;\">\n    <h2>Update Profile</h2>\n    <p id=\"edit-contact-jid\">Select a buddy in the list above to update.</p>\n    <input id=\"edit-contact-name\" type=\"text\" maxlength=\"1024\" placeholder=\"Real name\" style=\"display:none;\"/>\n    <fieldset class=\"buttons\" style=\"display:none;\">\n      <input id=\"edit-contact-cancel\" type=\"button\" value=\"Cancel\"/>\n      <input id=\"edit-contact-ok\" type=\"submit\" value=\"Save\"/>\n    </fieldset>\n  </form>\n</div>\n<div id=\"beta\" class=\"primary column x-fill y-fill\">\n  <h2 id=\"chat-title\">Select a buddy to chat</h2>\n  <ul id=\"messages\" class=\"scroll y-fill\"></ul>\n  <form id=\"message-form\">\n    <input id=\"message\" name=\"message\" type=\"text\" maxlength=\"1024\" placeholder=\"Type a message and press enter to send\"/>\n  </form>\n</div>\n<div id=\"charlie\" class=\"sidebar column y-fill\">\n  <h2>Notifications</h2>\n  <ul id=\"notifications\" class=\"scroll y-fill\"></ul>\n  <div id=\"charlie-controls\" class=\"controls\">\n    <div id=\"clear-notices\"></div>\n  </div>\n</div>").appendTo('#container');
     this.roster();
-    this.button('clear-notices', ICONS.no);
-    this.button('add-contact', ICONS.plus);
-    this.button('remove-contact', ICONS.minus);
-    this.button('edit-contact', ICONS.user);
-    this.button('search-roster', ICONS.search, {
-      scale: 0.5,
-      translation: '-8 -8'
-    });
+    new Button('#clear-notices', ICONS.no);
+    new Button('#add-contact', ICONS.plus);
+    new Button('#remove-contact', ICONS.minus);
+    new Button('#edit-contact', ICONS.user);
     $('#message').focus(function() {
-      return $('.contact-form').fadeOut();
+      return $('form.overlay').fadeOut();
     });
     $('#message-form').submit(__bind(function() {
       return this.send();
@@ -376,25 +353,20 @@ ChatPage = (function() {
     $('#edit-contact-form').submit(__bind(function() {
       return this.updateContact();
     }, this));
-    $('#search-roster-form').submit(function() {
-      return false;
-    });
-    $('#search-roster-text').keyup(__bind(function() {
-      return this.filterRoster();
-    }, this));
-    $('#search-roster-text').change(__bind(function() {
-      return this.filterRoster();
-    }, this));
-    $('#search-roster-text').click(__bind(function() {
-      return this.filterRoster();
-    }, this));
-    $('#search-roster').click(__bind(function() {
-      return this.toggleForm('#search-roster-form', __bind(function() {
-        return this.filterRoster();
-      }, this));
-    }, this));
     $('#container').fadeIn(200);
-    return this.resize();
+    layout = this.resize();
+    fn = function() {
+      layout.resize();
+      return layout.resize();
+    };
+    return new Filter({
+      list: '#roster',
+      icon: '#search-roster-icon',
+      form: '#search-roster-form',
+      attrs: ['data-jid', 'data-name'],
+      open: fn,
+      close: fn
+    });
   };
   ChatPage.prototype.resize = function() {
     var a, b, c, form, msg;
@@ -408,29 +380,5 @@ ChatPage = (function() {
       return msg.width(form.width() - 32);
     });
   };
-  ChatPage.prototype.button = function(id, path, options) {
-    var icon, node, paper;
-    options || (options = {});
-    paper = Raphael(id);
-    icon = paper.path(path).attr({
-      fill: '#000',
-      stroke: '#fff',
-      'stroke-width': 0.3,
-      opacity: 0.6,
-      scale: options.scale || 0.85,
-      translation: options.translation || ''
-    });
-    node = $('#' + id);
-    node.hover(function() {
-      return icon.animate({
-        opacity: 1.0
-      }, 200);
-    }, function() {
-      return icon.animate({
-        opacity: 0.6
-      }, 200);
-    });
-    return node.get(0);
-  };
   return ChatPage;
 })();

data/web/chat/stylesheets/chat.css

@@ -1,41 +1,6 @@
 #chat-page #container {
   height: 100%;
 }
-#chat-page #alpha,
-#chat-page #beta,
-#chat-page #charlie {
-  height: 100%;
-  position: absolute;
-}
-#chat-page #alpha {
-  background: #f8f8f8;
-  -webkit-box-shadow: 0 0 40px rgba(0, 0, 0, 0.1) inset;
-  box-shadow: 0 0 40px rgba(0, 0, 0, 0.1) inset;
-  width: 260px;
-}
-#chat-page #alpha h2,
-#chat-page #beta h2,
-#chat-page #charlie h2 {
-  border-bottom: 1px solid #ddd;
-  font-size: 10pt;
-  padding-left: 10px;
-  position: relative;
-  text-shadow: 0 -1px 1px #fff;
-}
-#chat-page #beta {
-  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5), 0 0 40px rgba(0, 0, 0, 0.1) inset;
-  width: 460px;
-  left: 260px;
-  z-index: 1;
-}
-#chat-page #charlie {
-  background: #f8f8f8;
-  -webkit-box-shadow: 0 0 40px rgba(0, 0, 0, 0.1) inset;
-  box-shadow: 0 0 40px rgba(0, 0, 0, 0.1) inset;
-  width: 260px;
-  left: 720px;
-}
 #chat-page #chat-title {
   background: #f8f8f8;
 }
@@ -43,25 +8,9 @@
   background: #fff;
   height: 100%;
   list-style: none;
-  overflow-y: auto;
   text-shadow: 0 1px 1px #ddd;
   width: 100%;
 }
-#chat-page #messages::-webkit-scrollbar,
-#chat-page #roster::-webkit-scrollbar,
-#chat-page #notifications::-webkit-scrollbar {
-  width: 6px;
-}
-#chat-page #messages::-webkit-scrollbar-thumb,
-#chat-page #roster::-webkit-scrollbar-thumb,
-#chat-page #notifications::-webkit-scrollbar-thumb {
-  border-radius: 10px;
-}
-#chat-page #messages::-webkit-scrollbar-thumb:vertical,
-#chat-page #roster::-webkit-scrollbar-thumb:vertical,
-#chat-page #notifications::-webkit-scrollbar-thumb:vertical {
-  background: rgba(0, 0, 0, .2);
-}
 #chat-page #messages li {
   border-bottom: 1px solid #f0f0f0;
   min-height: 40px;
@@ -122,7 +71,6 @@
 #chat-page #notifications {
   height: 100%;
   list-style: none;
-  overflow-y: auto;
   text-shadow: 0 1px 1px #fff;
   width: 260px;
 }
@@ -143,7 +91,7 @@
   font-weight: normal;
   padding: 10px 0 0 0;
 }
-#chat-page #roster li:hover,
+#chat-page #roster li:hover:not(.selected),
 #chat-page #notifications li:hover {
   background: rgba(255, 255, 255, 1.0);
 }
@@ -153,15 +101,6 @@
 #chat-page #roster li.selected > * {
   opacity: 1.0;
 }
-#chat-page #roster li.selected {
-  background: #4693FF;
-  background: -moz-linear-gradient(#4693FF, #015de6);
-  background: -o-linear-gradient(#4693FF, #015de6);
-  background: -webkit-gradient(linear, left top, left bottom, from(#4693FF), to(#015de6));
-  border-bottom: 1px solid #fff;
-  color: #fff;
-  text-shadow: 0 -1px 1px #1b3a65;
-}
 #chat-page #roster li.selected .status-msg {
   color: rgba(255, 255, 255, 0.85);
 }
@@ -199,92 +138,10 @@
   top: 4px;
   right: 10px;
 }
-#chat-page #roster-controls,
-#chat-page #notification-controls {
-  background: rgba(255, 255, 255, 0.05);
-  border-top: 1px solid #ddd;
-  height: 50px;
-  position: absolute;
-  bottom: 0;
-  width: 260px;
-}
-#chat-page #notification-controls {
-  text-align: right;
-}
-#chat-page #roster-controls > div,
-#chat-page #notification-controls > div {
-  cursor: pointer;
-  display: inline-block;
-  height: 27px;
-  margin: 0 10px;
-  position: relative;
-  top: 10px;
-  width: 27px;
-}
-#chat-page #roster-controls > div > svg,
-#chat-page #notification-controls > div > svg {
-  height: 27px;
-  width: 27px;
-}
-#chat-page .contact-form {
-  background: inherit;
-  border-bottom: 1px solid #ddd;
-  border-top: 1px solid #fff;
-  -webkit-box-shadow: 0px -3px 5px rgba(0, 0, 0, 0.1);
-  box-shadow: 0px -3px 5px rgba(0, 0, 0, 0.1);
-  padding-top: 10px;
-  position: absolute;
-  bottom: 50px;
-  left: 0;
-  width: 260px;
-}
-#chat-page .contact-form h2,
-#chat-page .notify-form h2 {
-  border: none !important;
-  line-height: 1;
-  margin-bottom: 10px;
-}
-#chat-page .contact-form p,
-#chat-page .notify-form p {
-  line-height: 1.5;
-  margin: 0 10px 10px 10px;
-  text-shadow: 0 1px 1px #fff;
-}
-#chat-page .notify-form p {
-  margin-top: -5px;
-}
-#chat-page .contact-form .buttons,
-#chat-page .notify-form .buttons {
-  padding-right: 10px;
+#chat-page #charlie-controls {
   text-align: right;
 }
-#chat-page .contact-form input[type="text"],
-#chat-page .contact-form input[type="email"] {
-  margin-bottom: 10px;
-  width: 228px;
-  position: relative;
-  left: 10px;
-}
 #chat-page #edit-contact-jid {
   color: #444;
   margin-top: -5px;
 }
-#chat-page #search-roster {
-  cursor: pointer;
-  display: inline-block;
-  line-height: 1;
-  position: absolute;
-  right: 10px;
-  top: 6px;
-}
-#chat-page #search-roster svg {
-  height: 16px;
-  width: 16px;
-}
-#chat-page #search-roster-form {
-  border-bottom: 1px solid #ddd;
-  padding: 5px 10px;
-}
-#chat-page #search-roster-text {
-  width: 100%;
-}

data/web/lib/coffeescripts/button.coffee

@@ -0,0 +1,21 @@
+class Button
+  constructor: (node, path, options) ->
+    @node = $ node
+    @path = path
+    @options = options || {}
+    this.draw()
+
+  draw: ->
+    paper = Raphael @node.get(0)
+
+    icon = paper.path(@path).attr
+      fill: @options.fill || '#000'
+      stroke: @options.stroke || '#fff'
+      'stroke-width': @options['stroke-width'] || 0.3
+      opacity: @options.opacity || 0.6
+      scale: @options.scale || 0.85
+      translation: @options.translation || ''
+
+    @node.hover(
+      -> icon.animate(opacity: 1.0, 200),
+      -> icon.animate(opacity: 0.6, 200))