Use vue, migrate emoji table to vue

src/client/styles.css

@@ -406,64 +406,7 @@ h3 {
 }
 
 /* EMOJI Table */
-.emoji-table {
-    position: fixed;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    z-index: 9999;
-    background-color: #1E1E1E;
-    padding: 15px;
-    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
-    border-radius: 10px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    max-width: 95vw;
-    max-height: 95vh;
-    overflow-y: auto;
-}
 
-.emoji-row {
-    display: flex;
-    justify-content: center;
-    width: 100%;
-}
-
-.emoji-button {
-    font-size: 60px;
-    /* Increased font size for larger emojis */
-    width: 80px;
-    /* Increased width */
-    height: 80px;
-    /* Increased height */
-    border: 1px solid #333;
-    background-color: #2C2C2C;
-    color: white;
-    border-radius: 12px;
-    /* Slightly increased border radius */
-    cursor: pointer;
-    transition: all 0.3s ease;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    margin: 8px;
-    /* Increased margin */
-}
-
-.emoji-button:hover {
-    background-color: #3A3A3A;
-    transform: scale(1.1);
-}
-
-.emoji-button:active {
-    background-color: #4A4A4A;
-    transform: scale(0.95);
-}
-
-.emoji-table.hidden {
-    display: none;
-}
 
 @media (max-width: 600px) {
     .emoji-button {