Smilies except the default category (ID null) will be loaded via Ajax from now on.

Also fixed some css bugs and restyled the sidebar a bit.

file/js/be.bastelstu.WCF.Chat.coffee

@@ -113,7 +113,7 @@ window.console ?=
 			, @
 			
 			# Insert a smiley
-			$('.jsSmiley').click $.proxy (event) ->
+			$('#smilies').on 'click', 'img', $.proxy (event) ->
 				@insertText ' ' + $(event.target).attr('alt') + ' '
 			, @
 			

file/lib/page/ChatPage.class.php

@@ -65,7 +65,15 @@ class ChatPage extends AbstractPage {
 	 * @var array<\wcf\data\smiley\Smiley>
 	 * @see \wcf\data\smiley\SmileyCache
 	 */
-	public $smilies = array();
+	public $defaultSmilies = array();
+	
+	/**
+	 * List of all smiley categories.
+	 * 
+	 * @var array<\wcf\data\smiley\SmileyCategory>
+	 * @see \wcf\data\smiley\SmileyCache
+	 */
+	public $smileyCategories = array();
 	
 	/**
 	 * Values read from the UserStorage of the current user.
@@ -86,7 +94,8 @@ public function assignVariables() {
 			'room' => $this->room,
 			'roomID' => $this->roomID,
 			'rooms' => $this->rooms,
-			'smilies' => $this->smilies
+			'defaultSmilies' => $this->defaultSmilies,
+			'smileyCategories' => $this->smileyCategories
 		));
 	}
 	
@@ -146,7 +155,13 @@ public function readData() {
 			\wcf\util\ChatUtil::writeUserData(array('lastSeen' => 0));
 		}
 		
-		$this->smilies = \wcf\data\smiley\SmileyCache::getInstance()->getCategorySmilies();
+		$smileyCategories = \wcf\data\smiley\SmileyCache::getInstance()->getCategories();
+		
+		foreach($smileyCategories as $category) {
+			if(!$category->disabled) $this->smileyCategories[] = $category;
+		}
+		
+		$this->defaultSmilies = \wcf\data\smiley\SmileyCache::getInstance()->getCategorySmilies();
 		$this->readChatVersion();
 	}
 	

file/style/be.bastelstu.wcf.chat.scss

@@ -36,7 +36,7 @@ .sidebar {
 	}
 }
 
-#timsChatTopic, #smileyList {
+#timsChatTopic {
 	padding: 5px;
 }
 
@@ -47,10 +47,20 @@ .timsChatMessageContainer {
 	padding-left: 7px !important;
 }
 
-#smileyList .smilies {
+#smilies {
+  padding: 14px 21px 7px;
+  border-bottom-right-radius: 0px;
+  
+  > div {
     li {
       display: inline;
       margin: 5px 5px 0 0;
+        
+      .icon24 {
+        //width: 16px;
+        //height: 16px;
+      }
+    }
   }
 }
 
@@ -72,9 +82,10 @@ #timsChatControls {
 }
 
 #timsChatOptions {
-	bottom: -28px;
+	top: -1px;
+	right: 1px;
 	margin-left: 0;
-	position: absolute;
+	position: relative;
 	width: 100%;
 	
 	> ul {

template/chat.tpl

@@ -72,16 +72,33 @@
 		<input type="text" id="timsChatInput" class="inputText long" name="text" autocomplete="off" maxlength="{@CHAT_MAX_LENGTH}" disabled="disabled" required="required" placeholder="{lang}wcf.chat.submit.default{/lang}" />
 	</form>
 	
-	<div id="timsChatControls" class="marginTop container">
+	<div id="timsChatControls" class="marginTop">
 		{if MODULE_SMILEY}
-			<div id="smileyList">
+                        {capture assign=__defaultSmilies}
-				<ul class="smilies">
+                                {include file='__messageFormSmilies' smilies=$defaultSmilies}
-					{foreach from=$smilies item='smiley'}
+                        {/capture}
-						<li>
+                        
-							<img src="{$smiley->getURL()}" alt="{$smiley->smileyCode}" title="{$smiley->smileyTitle}" class="jsSmiley jsTooltip" />
+                        <div id="smilies" class="smiliesContent tabMenuContent container {if $smileyCategories|count} tabMenuContainer{/if} data-store="activeTabMenuItem" data-active="smilies-default">
-						</li>
+                                {if $smileyCategories|count}
+                                        <nav class="menu">
+                                                <ul>
+                                                        <li><a href="#smilies-default">{lang}wcf.smilies.default{/lang}</a></li>
+                                                        {foreach from=$smileyCategories item=smileyCategory}
+                                                                <li><a href="#smilies-{@$smileyCategory->smileyCategoryID}" data-smiley-category-id="{@$smileyCategory->smileyCategoryID}">{$smileyCategory->title|language}</a></li>
                                                         {/foreach}
                                                 </ul>
+                                        </nav>
+                                        
+                                        <div id="smilies-default" class="hidden">
+                                                {@$__defaultSmilies}
+                                        </div>
+                                        
+        				{foreach from=$smileyCategories  item='smileyCategory'}
+        				   <div id="smilies-{$smileyCategory->smileyCategoryID}" class="hidden"></div>
+        				{/foreach}
+        			{else}
+        			     {@$__defaultSmilies}
+        			{/if}
 			</div>
 		{/if}
 		<nav id="timsChatOptions">
@@ -151,6 +168,8 @@
 			});
 			{event name='shouldInit'}
 			// Boot the chat
+			WCF.TabMenu.init();
+			new WCF.Message.Smilies();
 			be.bastelstu.WCF.Chat.init();
 			{event name='didInit'}