add: Chat searching

public/css/main.css

@@ -237,6 +237,53 @@ body {
     color: #555;
 }
 
+.add-form {
+    display: flex;
+    flex-direction: row;
+}
+
+.add-form .text-input {
+    margin: 16px 0px 16px 16px;
+    height: 56px;
+}
+
+.add-form .button {
+    margin: 16px;
+    width: 84px;
+    height: 56px;
+}
+
+.add-button {
+    display: block;
+    box-sizing: border-box;
+    position: absolute;
+    width: 64px;
+    height: 64px;
+    bottom: 16px;
+    right: 16px;
+    border-radius: 16px;
+    background-color: #50A0F0;
+}
+
+.add-button:focus {
+    background-color: #4595E5;
+    outline-color: #70C0F0;
+    outline-width: 2px;
+}
+
+.add-button:hover {
+    background-color: #4595E5;
+}
+
+.add-button:active {
+    background-color: #3585D5;
+}
+
+.add-button img {
+    width: 64px;
+    height: 64px;
+}
+
 @media screen and (max-width: 600px) {
     .hs {
         height: 12px;
@@ -312,6 +359,30 @@ body {
         margin: 0px 14px 14px 14px;
         font-size: 12pt;
     }
+
+    .add-form .text-input {
+        margin: 12px 0px 12px 12px;
+        height: 48px;
+    }
+    
+    .add-form .button {
+        margin: 12px;
+        width: 72px;
+        height: 48px;
+    }
+
+    .add-button {
+        width: 48px;
+        height: 48px;
+        bottom: 12px;
+        right: 12px;
+        border-radius: 12px;
+    }
+    
+    .add-button img {
+        width: 48px;
+        height: 48px;
+    }
 }
 
 @media screen and (max-width: 400px) {
@@ -389,6 +460,30 @@ body {
         margin: 0px 12px 12px 12px;
         font-size: 11pt;
     }
+
+    .add-form .text-input {
+        margin: 10px 0px 10px 10px;
+        height: 40px;
+    }
+    
+    .add-form .button {
+        margin: 10px;
+        width: 60px;
+        height: 40px;
+    }
+
+    .add-button {
+        width: 40px;
+        height: 40px;
+        bottom: 10px;
+        right: 10px;
+        border-radius: 10px;
+    }
+    
+    .add-button img {
+        width: 40px;
+        height: 40px;
+    }
 }
 
 @media screen and (max-width: 240px) {
@@ -466,4 +561,28 @@ body {
         margin: 0px 10px 10px 10px;
         font-size: 10pt;
     }
+
+    .add-form .text-input {
+        margin: 8px 0px 8px 8px;
+        height: 32px;
+    }
+    
+    .add-form .button {
+        margin: 8px;
+        width: 48px;
+        height: 32px;
+    }
+
+    .add-button {
+        width: 32px;
+        height: 32px;
+        bottom: 8px;
+        right: 8px;
+        border-radius: 8px;
+    }
+    
+    .add-button img {
+        width: 32px;
+        height: 32px;
+    }
 }

src/index.js

@@ -13,6 +13,7 @@ const pgSession = require("connect-pg-simple")(session);
 const indexRouter = require("./routes/index");
 const authRouter = require("./routes/auth");
 const chatRouter = require("./routes/chat");
+const addRouter = require("./routes/add");
 
 const PORT = process.env.PORT || 5000;
 
@@ -42,6 +43,7 @@ longpoll.create("/poll");
 app.use(indexRouter);
 app.use(authRouter);
 app.use(chatRouter);
+app.use(addRouter);
 
 app.use(function (req, res, next) {
     next(createError(404));

src/routes/add.js

@@ -0,0 +1,50 @@
+// Copyright (c) 2025 gugdun
+// All rights reserved. Unauthorized use, copying, or distribution is strictly prohibited.
+
+const path = require("path");
+const express = require("express");
+const ejs = require("ejs");
+const db = require("../db");
+
+const views = path.join(__dirname, "..", "views");
+const router = express.Router();
+
+router.get("/add", async (req, res) => {
+    if (req.user) {
+        res.render("layout", {
+            child: await ejs.renderFile(path.join(views, "add.ejs"), {
+                notFound: req.query.found === "false",
+                found: req.query.found === "true",
+                exists: req.query.exists === "true"
+            })
+        });
+    } else {
+        res.redirect("/login");
+    }
+});
+
+router.post("/add", async (req, res) => {
+    if (req.user) {
+        try {
+            const user = await db.any("SELECT id FROM users WHERE username = $1", [ req.body.username ]);
+            if (!user[0]) {
+                res.redirect("/add?found=false");
+                return;
+            }
+            const chat = await db.any("SELECT id FROM chats WHERE (user1_id = $1 AND user2_id = $2) OR (user1_id = $2 AND user2_id = $1)", [ req.user.id, user[0].id ]);
+            if (chat[0]) {
+                res.redirect("/add?exists=true");
+                return;
+            }
+            await db.none("INSERT INTO chats (user1_id, user2_id) VALUES ($1, $2)", [ req.user.id, user[0].id ]);
+            res.redirect("/add?found=true");
+        } catch (err) {
+            console.log(err);
+            res.redirect("/add");
+        }
+    } else {
+        res.redirect("/login");
+    }
+});
+
+module.exports = router;

src/views/add.ejs

@@ -0,0 +1,23 @@
+<div class="chats-container">
+    <div class="chat-header">
+        <a href="/" class="action">
+            <img src="/img/back.png" />
+        </a>
+        <span class="chat-title">Add SvinChat</span>
+    </div>
+    <div class="chat-list">
+        <form method="POST" action="/add" class="add-form">
+            <input type="username" name="username" placeholder="Enter username..." class="text-input" required />
+            <input type="submit" value="Add" class="button" />
+        </form>
+        <% if (notFound) { %>
+            <p class="empty-label">User not found!</p>
+        <% } %>
+        <% if (found) { %>
+            <p class="empty-label">Chat created!</p>
+        <% } %>
+        <% if (exists) { %>
+            <p class="empty-label">Chat already exists!</p>
+        <% } %>
+    </div>
+</div>

src/views/chats.ejs

@@ -17,4 +17,7 @@
             </a>
         <% }); %>
     </div>
-</div>
+</div>
+<a href="/add" class="add-button">
+    <img src="/img/add.png" />
+</a>