feat(search): add search

public/css/ListingProfile.css

@@ -0,0 +1,39 @@
+a.listing-profile {
+	position: relative;
+	display: block;
+	text-decoration: none;
+	height: 60px;
+	border-bottom: 1px solid var(--light-grey);
+	display: flex;
+	padding: 10px;
+	overflow: hidden;
+	transition: background .3s ease;
+	&:hover {
+		background: #ffffff05;
+	}
+}
+
+.listing-profile .left {
+	padding-right: 10px;
+
+	& img {
+		width: 48px;
+		height: 48px;
+		border-radius: 50%;
+	}
+}
+
+.listing-profile .right {
+	& .profile-heading {
+		display: flex;
+		gap: 5px;
+		& .profile-display-name { color: var(--main-white);}
+		& .profile-user-name {color: var(--lighter-grey);}
+	}
+
+	& .profile-bio {
+		margin-top: 5px;
+		color: var(--main-white);
+		word-break: break-all;
+	}
+}

public/css/search.css

@@ -0,0 +1,43 @@
+.page-center .page-title.search {
+	padding: 0;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+}
+
+.page-title.search, .page-title.people, .page-title.tweets {
+	border-bottom: 1px solid var(--light-grey);
+}
+
+
+.page-title.search > div {
+	position: relative;
+	width: 100%;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	& i {
+		position: absolute;
+		right: 9%;
+		font-size: 11pt;
+	}
+}
+.page-title.search input {
+	border: 1px solid var(--light-grey);
+	color: var(--main-white);
+	background: none;
+	padding: 5px 20px;
+	border-radius: 10em;
+	font-size: 14pt;
+	width: 80%;
+	&:focus {
+		border-color: var(--lighter-grey);
+		outline: none;
+	}
+}
+
+.no-result {
+	font: 700 20pt 'Montserrat';
+	text-align: center;
+	margin: 20px 0;
+}

src/routes/index.js

@@ -1,4 +1,6 @@
 const {Router} = require('express');
+const {formatTweetList} = require('../lib/misc/TweetUtils');
+const User = require('../lib/db/User');
 const router = Router();
 
 
@@ -117,4 +119,17 @@ router.get('/profile/:username', async (req, res) => {
 	res.render('profile', {profile: user, tweets, likes});
 });
 
+router.get('/search', async (req, res) => {
+	if (!req.query.q || !req.query.q.trim())
+		return res.render('search', {welcome: true});
+	let query = '%' + req.query.q + '%';
+	const [tweets] = await req.app.db.connection.query('SELECT * FROM Tweet WHERE content LIKE ? ORDER BY JSON_LENGTH(retweets) DESC, JSON_LENGTH(likes) DESC', [query]);
+	const [users] = await req.app.db.connection.query('SELECT * FROM User WHERE username LIKE ? OR display_name LIKE ?', [query, query]);
+	const formattedTweets = await formatTweetList(tweets, req.app.db);
+	const formattedUsers = users.map(u => new User(u));
+	console.log(formattedTweets, formattedUsers);
+	res.render('search', {tweets: formattedTweets, users: formattedUsers, query: req.query.q});
+
+});
+
 module.exports = router;

src/views/mixins/ListingProfile.pug

@@ -0,0 +1,12 @@
+mixin ListingProfile(user)
+	a.listing-profile(href=`/profile/${user.username}`)
+		.left
+			img.avatar(src=`/public/${user.avatarId || 'default_avatar'}.jpg`)
+		.right
+			.profile-heading
+				.profile-display-name #{user.displayName}
+				.profile-user-name @#{user.username}
+				if user.isAdmin
+					span.profile-admin(title='Administrateur')
+								i.fa-solid.fa-hammer
+			.profile-bio #{user.bio}

src/views/mixins/Menu.pug

@@ -3,6 +3,9 @@ mixin Menu
 		a.main-menu-button(href='/home')
 			i.fa-solid.fa-house
 			div Accueil
+		a.main-menu-button(href=`/search`)
+			i.fa-solid.fa-magnifying-glass
+			div Search
 		a.main-menu-button(href=`/everything`)
 			i.fa-solid.fa-hashtag
 			div Tous les tweets

src/views/search.pug

@@ -0,0 +1,41 @@
+include mixins/TweetList
+include mixins/TextInput
+include mixins/ListingProfile
+include mixins/Menu
+doctype html
+html
+	head
+		include _head
+		meta(charset='UTF-8')
+		meta(http-equiv='X-UA-Compatible', content='IE=edge')
+		meta(name='viewport', content='width=device-width, initial-scale=1.0')
+		link(rel='stylesheet', href='/public/css/search.css')
+		link(rel='stylesheet', href='/public/css/Tweet.css')
+		link(rel='stylesheet', href='/public/css/TextInput.css')
+		link(rel='stylesheet', href='/public/css/ListingProfile.css')
+		link(rel='stylesheet', href='/public/css/Menu.css')
+		script(src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.3/moment-with-locales.min.js')
+		script(src='/public/js/Tweet.js', defer)
+
+	body
+		+Menu
+		.page-center
+			.page-title Search
+			.page-title.search
+				div
+					input#search-input(type='text',name='query', placeholder='Search tweets and people', value=query)
+					i.fa-solid.fa-magnifying-glass
+			if users && users.length
+				.page-title.people People
+				each u in users
+					+ListingProfile(u)
+			if tweets && tweets.length
+				.page-title.tweets Tweets
+				+TweetList(tweets, 'search-results', 'Aucun résultat')
+			if !welcome && !users.length && !tweets.length
+				.no-result Aucun résultat
+			script.
+				document.querySelector('#search-input').addEventListener('keydown', ({target,key}) => {
+					if (key === 'Enter' && target.value.trim())
+						location.href = '/search?q=' + encodeURIComponent(target.value.trim());
+				});