From 297bafcdc8875eadf0cbae6c206dd64cba6434cd Mon Sep 17 00:00:00 2001
From: Alice Gaudon <alice@gaudon.pro>
Date: Sat, 20 Nov 2021 22:55:25 +0100
Subject: [PATCH 1/7] Add style to error pages

---
 src/assets/views/errors/Error.svelte | 103 +++++++++++++++++++++++++--
 1 file changed, 99 insertions(+), 4 deletions(-)

diff --git a/src/assets/views/errors/Error.svelte b/src/assets/views/errors/Error.svelte
index 00248a1..a881ef5 100644
--- a/src/assets/views/errors/Error.svelte
+++ b/src/assets/views/errors/Error.svelte
@@ -1,5 +1,7 @@
 <script lang="ts">
     import {locals} from "../../ts/stores.js";
+    import FlashMessages from "../components/FlashMessages.svelte";
+    import Icon from "../utils/Icon.svelte";
 
     const previousUrl = $locals.getPreviousUrl();
 
@@ -15,13 +17,14 @@
 
 <svelte:head>
     <title>{code + ' - ' + message}</title>
-    <link rel="stylesheet" href="/css/error.css">
+
+    <link rel="stylesheet" href="/css/layout.css">
 </svelte:head>
 
 <div class="logo"><a href="/">{$locals.app.name}</a></div>
 
 <main>
-    <!--TODO: flash messages-->
+    <FlashMessages/>
 
     <div class="error-code">{code}</div>
     <div class="error-message">{message}</div>
@@ -31,10 +34,10 @@
 
     <nav>
         {#if previousUrl && previousUrl !== '/' && previousUrl !== $locals.url}
-            <a href={previousUrl} class="button"><i data-feather="arrow-left"></i> Go back</a>
+            <a href={previousUrl} class="button bold"><Icon name="arrow-left"/> Go back</a>
         {/if}
 
-        <a href="/" class="button"><i data-feather="home"></i> Go to homepage</a>
+        <a href="/" class="button"><Icon name="home"/> Go to homepage</a>
     </nav>
 </main>
 
@@ -45,3 +48,95 @@
         <a href="mailto:{$locals.app.contact_email}">{$locals.app.contact_email}</a>.
     </p>
 </div>
+
+<style lang="scss">
+	header, footer {
+		margin: 0;
+		padding: 0;
+		height: 0;
+	}
+
+	main {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+
+		.messages {
+			margin-bottom: 32px;
+		}
+
+		.error-code {
+			font-size: 36px;
+		}
+
+		.error-message {
+			font-size: 32px;
+		}
+
+		.error-instructions {
+			margin-top: 32px;
+			font-size: 20px;
+		}
+
+		nav {
+			margin-top: 32px;
+		}
+
+		&::before {
+			content: "Oops";
+			position: absolute;
+			z-index: -1;
+
+			font-size: #{'min(50vh, 40vw)'};
+			opacity: 0.025;
+		}
+	}
+
+	.contact {
+		text-align: center;
+		padding: 8px;
+	}
+
+	.logo {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		margin-top: 24px;
+		text-align: center;
+
+		a {
+			position: relative;
+			padding: 16px;
+
+			color: var(--on-background);
+
+			&:hover {
+				color: #fff;
+
+				&::before {
+					opacity: 0.2;
+				}
+			}
+
+			&::before {
+				content: "";
+				position: absolute;
+				width: 100%;
+				height: 100%;
+				top: 0;
+				left: 0;
+
+				background-image: url(../../img/logo.svg);
+				background-repeat: no-repeat;
+				background-position: center;
+				background-size: 64px;
+
+				opacity: 0.075;
+				filter: contrast(0);
+			}
+		}
+	}
+</style>

From da6fda02a9923c2726db321b7f97cec686b771e6 Mon Sep 17 00:00:00 2001
From: Alice Gaudon <alice@gaudon.pro>
Date: Sun, 21 Nov 2021 12:42:26 +0100
Subject: [PATCH 2/7] Replace feather icons with lucide icons, use Icon
 component everywhere

---
 package.json                                  |  3 +-
 src/assets/scss/base.scss                     |  6 ++--
 src/assets/scss/panel.scss                    |  4 +--
 src/assets/ts/featherIcons.ts                 | 10 -------
 src/assets/ts/icons.ts                        | 11 ++++++++
 .../views/auth/account/NamePanel.svelte       |  3 +-
 .../views/auth/account/PasswordPanel.svelte   |  3 +-
 src/assets/views/auth/account/account.svelte  |  5 ++--
 src/assets/views/auth/auth.svelte             |  4 +--
 src/assets/views/backend/index.svelte         |  3 +-
 src/assets/views/components/Message.svelte    |  6 ++--
 src/assets/views/components/NavMenu.svelte    |  2 +-
 .../views/components/NavMenuItem.svelte       |  2 +-
 src/assets/views/utils/Field.svelte           |  8 +++---
 src/assets/views/utils/Icon.svelte            | 20 +++++--------
 yarn.lock                                     | 28 ++++---------------
 16 files changed, 49 insertions(+), 69 deletions(-)
 delete mode 100644 src/assets/ts/featherIcons.ts
 create mode 100644 src/assets/ts/icons.ts

diff --git a/package.json b/package.json
index cf42788..b5f27d2 100644
--- a/package.json
+++ b/package.json
@@ -33,7 +33,6 @@
         "@types/cookie-parser": "^1.4.2",
         "@types/express": "^4.17.6",
         "@types/express-session": "^1.17.0",
-        "@types/feather-icons": "^4.7.0",
         "@types/formidable": "^2.0.0",
         "@types/geoip-lite": "^1.1.31",
         "@types/jest": "^27.0.2",
@@ -56,7 +55,6 @@
         "eslint-plugin-node": "^11.1.0",
         "eslint-plugin-simple-import-sort": "^7.0.0",
         "eslint-plugin-svelte3": "^3.1.2",
-        "feather-icons": "^4.28.0",
         "jest": "^27.3.1",
         "jest-resolve": "^27.3.1",
         "jest-ts-webcompat-resolver": "^1.0.0",
@@ -84,6 +82,7 @@
         "express-session": "^1.17.1",
         "formidable": "^2.0.1",
         "geoip-lite": "^1.4.2",
+        "lucide": "^0.16.17",
         "mjml": "^4.6.2",
         "mysql": "^2.18.1",
         "nanoid": "^3.1.20",
diff --git a/src/assets/scss/base.scss b/src/assets/scss/base.scss
index eb318d1..a98f1d3 100644
--- a/src/assets/scss/base.scss
+++ b/src/assets/scss/base.scss
@@ -155,7 +155,7 @@ h1 {
 a {
 	text-decoration: none;
 
-	.feather.feather-external-link { //todo add js
+	.icon.feather-external-link { //todo add js
 		--icon-size: 16px;
 		margin-left: 4px;
 		margin-top: -3px;
@@ -239,12 +239,12 @@ button, .button {
 		border: 0;
 	}
 
-	.feather {
+	.icon {
 		--icon-size: 16px;
 		margin-right: 8px;
 	}
 
-	.feather.last {
+	.icon.last {
 		margin-right: 0;
 		margin-left: 8px;
 	}
diff --git a/src/assets/scss/panel.scss b/src/assets/scss/panel.scss
index e6de525..13b2ce5 100644
--- a/src/assets/scss/panel.scss
+++ b/src/assets/scss/panel.scss
@@ -16,7 +16,7 @@
 		margin: 16px 8px;
 	}
 
-	> .feather:first-child {
+	> .icon:first-child {
 		--icon-size: 24px;
 		position: absolute;
 		opacity: 0.2;
@@ -35,7 +35,7 @@
 		font-size: 24px;
 		line-height: 1;
 
-		.feather {
+		.icon {
 			--icon-size: 24px;
 			margin: 0 16px 0 0;
 			opacity: 0.2;
diff --git a/src/assets/ts/featherIcons.ts b/src/assets/ts/featherIcons.ts
deleted file mode 100644
index f67604a..0000000
--- a/src/assets/ts/featherIcons.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import feather from "feather-icons";
-
-let alreadyReplaced = false;
-
-export function replaceIcons(once: boolean = true): void {
-    if (!once || !alreadyReplaced) {
-        alreadyReplaced = true;
-        feather.replace();
-    }
-}
diff --git a/src/assets/ts/icons.ts b/src/assets/ts/icons.ts
new file mode 100644
index 0000000..b2bfe86
--- /dev/null
+++ b/src/assets/ts/icons.ts
@@ -0,0 +1,11 @@
+import {createIcons, icons} from "lucide";
+
+let hasAlreadyReplacedIcons = false;
+
+export function replaceIcons(once: boolean): void {
+    if (!once || !hasAlreadyReplacedIcons) {
+        console.log('Create icons...');
+        createIcons({icons});
+        hasAlreadyReplacedIcons = true;
+    }
+}
diff --git a/src/assets/views/auth/account/NamePanel.svelte b/src/assets/views/auth/account/NamePanel.svelte
index 71c0c8b..91a301e 100644
--- a/src/assets/views/auth/account/NamePanel.svelte
+++ b/src/assets/views/auth/account/NamePanel.svelte
@@ -4,13 +4,14 @@
     import Form from "../../utils/Form.svelte";
     import Field from "../../utils/Field.svelte";
     import {hasRoute, route} from "../../../../common/Routing";
+    import Icon from "../../utils/Icon.svelte";
 
     let newName = '';
 </script>
 
 {#if hasRoute('change-name')}
 <section class="panel">
-    <h2><i data-feather="key"></i> Change name</h2>
+    <h2><Icon name="key"/> Change name</h2>
 
 
     {#if $locals.can_change_name}
diff --git a/src/assets/views/auth/account/PasswordPanel.svelte b/src/assets/views/auth/account/PasswordPanel.svelte
index f25869b..151cea0 100644
--- a/src/assets/views/auth/account/PasswordPanel.svelte
+++ b/src/assets/views/auth/account/PasswordPanel.svelte
@@ -3,13 +3,14 @@
     import Form from "../../utils/Form.svelte";
     import Field from "../../utils/Field.svelte";
     import {hasRoute, route} from "../../../../common/Routing";
+    import Icon from "../../utils/Icon.svelte";
 
     let removePasswordMode = false;
 </script>
 
 {#if hasRoute('remove-password', 'change-password')}
 <section class="panel">
-    <h2><i data-feather="key"></i> {$locals.has_password ? 'Change' : 'Set'} password</h2>
+    <h2><Icon name="key"/> {$locals.has_password ? 'Change' : 'Set'} password</h2>
 
     {#if removePasswordMode}
         <Form action={route('remove-password')}
diff --git a/src/assets/views/auth/account/account.svelte b/src/assets/views/auth/account/account.svelte
index 7d0a985..a8d2fbf 100644
--- a/src/assets/views/auth/account/account.svelte
+++ b/src/assets/views/auth/account/account.svelte
@@ -7,6 +7,7 @@
     import Form from "../../utils/Form.svelte";
     import Field from "../../utils/Field.svelte";
     import {hasRoute, route} from "../../../../common/Routing";
+    import Icon from "../../utils/Icon.svelte";
 
     const mainEmail = $locals.main_email?.email;
     const personalInfoFields = $locals.user_personal_info_fields || [];
@@ -16,7 +17,7 @@
 <BaseLayout title="Account" description="Manage your account settings and data.">
     <div class="container">
         <div class="panel">
-            <h2><i data-feather="user"></i> Personal information</h2>
+            <h2><Icon name="user"/> Personal information</h2>
 
             {#if $locals.display_email_warning && $locals.emails.length <= 0}
                 <Message type="warning" content="To avoid losing access to your account, please add an email address."/>
@@ -40,7 +41,7 @@
         {/if}
 
         <section class="panel">
-            <h2 id="emails"><i data-feather="shield"></i> Email addresses</h2>
+            <h2 id="emails"><Icon name="shield"/> Email addresses</h2>
 
             <div class="data-table-container">
                 <table class="data-table">
diff --git a/src/assets/views/auth/auth.svelte b/src/assets/views/auth/auth.svelte
index ad14119..db3f8d4 100644
--- a/src/assets/views/auth/auth.svelte
+++ b/src/assets/views/auth/auth.svelte
@@ -25,7 +25,7 @@
     <div class="container">
         {#if hasRoute('login')}
         <section class="panel">
-            <h2><i data-feather="log-in"></i> Log in</h2>
+            <h2><Icon name="log-in"/> Log in</h2>
 
             <Form action={route('login') + queryStr} submitText="Authenticate" submitIcon="log-in">
                 <Field type="text" name="identifier" value={$locals.query?.identifier} icon="at-sign"
@@ -45,7 +45,7 @@
 
         {#if hasRoute('register')}
         <section class="panel">
-            <h2><i data-feather="user-plus"></i> Register</h2>
+            <h2><Icon name="user-plus"/> Register</h2>
 
             <Form action={route('register') + queryStr} submitText="Register" submitIcon="check">
                 <Field type="hidden" name="auth_method" value={registerUsingMagicLink ? 'magic_link': 'password'}/>
diff --git a/src/assets/views/backend/index.svelte b/src/assets/views/backend/index.svelte
index 6c29bbe..fba4ee8 100644
--- a/src/assets/views/backend/index.svelte
+++ b/src/assets/views/backend/index.svelte
@@ -2,6 +2,7 @@
     import {locals} from "../../ts/stores.js";
     import BaseLayout from "../layouts/BaseLayout.svelte";
     import Breadcrumb from "../components/Breadcrumb.svelte";
+    import Icon from "../utils/Icon.svelte";
 
     const menu = $locals.menu || [];
 </script>
@@ -19,7 +20,7 @@
                         <li>
                             <a href={element.link}>
                                 {#if element.display_icon !== null}
-                                    <i data-feather={element.display_icon}></i>
+                                    <Icon name={element.display_icon}/>
                                 {/if}
                                 {element.display_string}
                             </a>
diff --git a/src/assets/views/components/Message.svelte b/src/assets/views/components/Message.svelte
index 099e908..2adf74a 100644
--- a/src/assets/views/components/Message.svelte
+++ b/src/assets/views/components/Message.svelte
@@ -45,7 +45,7 @@
 
 		border-radius: 5px;
 
-		:global(.feather) {
+		:global(.icon) {
 			--icon-size: 24px;
 			margin-right: 8px;
 		}
@@ -77,7 +77,7 @@
 		&-discreet {
 			color: var(--on-surface);
 
-			.feather {
+			.icon {
 				--icon-size: 20px;
 			}
 		}
@@ -94,7 +94,7 @@
 
 			border: 0;
 
-			:global(.feather) {
+			:global(.icon) {
 				margin: 0;
 			}
 		}
diff --git a/src/assets/views/components/NavMenu.svelte b/src/assets/views/components/NavMenu.svelte
index 01e4b6e..badaf49 100644
--- a/src/assets/views/components/NavMenu.svelte
+++ b/src/assets/views/components/NavMenu.svelte
@@ -96,7 +96,7 @@
 
 		border-radius: $headerHeight;
 
-		:global(.feather) {
+		:global(.icon) {
 			--icon-size: 28px;
 			margin: 0;
 		}
diff --git a/src/assets/views/components/NavMenuItem.svelte b/src/assets/views/components/NavMenuItem.svelte
index 4f104ed..b01d4c8 100644
--- a/src/assets/views/components/NavMenuItem.svelte
+++ b/src/assets/views/components/NavMenuItem.svelte
@@ -58,7 +58,7 @@
 			}
 		}
 
-		:global(.feather) {
+		:global(.icon) {
 			--icon-size: 16px;
 			margin-right: 8px;
 		}
diff --git a/src/assets/views/utils/Field.svelte b/src/assets/views/utils/Field.svelte
index 2fba537..c76df9a 100644
--- a/src/assets/views/utils/Field.svelte
+++ b/src/assets/views/utils/Field.svelte
@@ -96,7 +96,7 @@
 			background-color: var(--input);
 			border-radius: 5px;
 
-			> :global(.feather.icon) {
+			> :global(.icon) {
 				--icon-size: 24px;
 				margin: 18px;
 				opacity: 0.75;
@@ -180,7 +180,7 @@
 				display: none;
 			}
 
-			& + :global(.feather) {
+			& + :global(.icon) {
 				position: absolute;
 				pointer-events: none;
 				right: 0;
@@ -190,7 +190,7 @@
 			}
 
 			// TODO: Temporary
-			&:focus + :global(.feather) {
+			&:focus + :global(.icon) {
 				transform: rotateX(180deg);
 			}
 		}
@@ -317,7 +317,7 @@
 				.name {
 					font-size: 20px;
 
-					:global(.feather) {
+					:global(.icon) {
 						--icon-size: 24px;
 						margin-right: 8px;
 					}
diff --git a/src/assets/views/utils/Icon.svelte b/src/assets/views/utils/Icon.svelte
index b17bd44..5063048 100644
--- a/src/assets/views/utils/Icon.svelte
+++ b/src/assets/views/utils/Icon.svelte
@@ -1,23 +1,17 @@
 <script lang="ts">
-    import {replaceIcons} from "../../ts/featherIcons.js";
-    import {afterUpdate, onMount} from "svelte";
+    import {replaceIcons} from "../../ts/icons.js";
+    import {onMount} from "svelte";
 
     export let name: string;
 
-
     onMount(() => {
-        replaceIcons();
-    });
-    afterUpdate(() => {
-        replaceIcons(false);
+        replaceIcons(true);
     });
+
 </script>
 
 <style lang="scss">
-	// ---
-	// --- Feather
-	// ---
-	:global(.feather) {
+	:global(.icon) {
 		display: inline-flex;
 		justify-content: center;
 		align-items: center;
@@ -43,8 +37,8 @@
 
 {#if name}
     {#if name.startsWith('fa') }
-        <i class="{name} feather icon" aria-hidden="true" {...$$restProps}></i>
+        <i class="{name} icon" aria-hidden="true" {...$$restProps}></i>
     {:else}
-        <i data-feather="{name}" class="feather icon" aria-hidden="true" {...$$restProps}></i>
+        <i icon-name="{name}" class="icon" aria-hidden="true" {...$$restProps}></i>
     {/if}
 {/if}
diff --git a/yarn.lock b/yarn.lock
index 13ee92e..281bf46 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -803,11 +803,6 @@
     "@types/qs" "*"
     "@types/serve-static" "*"
 
-"@types/feather-icons@^4.7.0":
-  version "4.7.0"
-  resolved "https://registry.yarnpkg.com/@types/feather-icons/-/feather-icons-4.7.0.tgz#ec66bc046bcd1513835f87541ecef54b50c57ec9"
-  integrity sha512-vflOrmlHMGIGVN4AEl6ErPCNKBLcP1ehEpLqnJkTgf69r5QmJzy7BF1WzbBc8Hqs9KffROPT/JqlSKH4o5vB/w==
-
 "@types/formidable@^2.0.0":
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/@types/formidable/-/formidable-2.0.0.tgz#7100d6121871c6300e16c89cf4002f3b66157359"
@@ -1843,11 +1838,6 @@ cjs-module-lexer@^1.0.0:
   resolved "https://registry.yarnpkg.com/cjs-module-lexer/-/cjs-module-lexer-1.2.2.tgz#9f84ba3244a512f3a54e5277e8eef4c489864e40"
   integrity sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA==
 
-classnames@^2.2.5:
-  version "2.3.1"
-  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.1.tgz#dfcfa3891e306ec1dad105d0e88f4417b8535e8e"
-  integrity sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==
-
 clean-css@^4.2.1:
   version "4.2.4"
   resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.2.4.tgz#733bf46eba4e607c6891ea57c24a989356831178"
@@ -2112,11 +2102,6 @@ cookiejar@^2.1.2:
   resolved "https://registry.yarnpkg.com/cookiejar/-/cookiejar-2.1.3.tgz#fc7a6216e408e74414b90230050842dacda75acc"
   integrity sha512-JxbCBUdrfr6AQjOXrxoTvAMJO4HBTUIlBzslcJPAz+/KT8yk53fXun51u+RenNYvad/+Vc2DIz5o9UxlCDymFQ==
 
-core-js@^3.1.3:
-  version "3.19.1"
-  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.19.1.tgz#f6f173cae23e73a7d88fa23b6e9da329276c6641"
-  integrity sha512-Tnc7E9iKd/b/ff7GFbhwPVzJzPztGrChB8X8GLqoYGdEOG8IpLnK1xPyo3ZoO3HsK6TodJS58VGPOxA+hLHQMg==
-
 core-util-is@~1.0.0:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.3.tgz#a6042d3634c2b27e9328f837b965fac83808db85"
@@ -3225,14 +3210,6 @@ fd-slicer@~1.1.0:
   dependencies:
     pend "~1.2.0"
 
-feather-icons@^4.28.0:
-  version "4.28.0"
-  resolved "https://registry.yarnpkg.com/feather-icons/-/feather-icons-4.28.0.tgz#e1892a401fe12c4559291770ff6e68b0168e760f"
-  integrity sha512-gRdqKESXRBUZn6Nl0VBq2wPHKRJgZz7yblrrc2lYsS6odkNFDnA4bqvrlEVRUPjE1tFax+0TdbJKZ31ziJuzjg==
-  dependencies:
-    classnames "^2.2.5"
-    core-js "^3.1.3"
-
 fetch-blob@^3.1.2:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/fetch-blob/-/fetch-blob-3.1.3.tgz#a7dca4855e39d3e3c5a1da62d4ee335c37d26012"
@@ -5105,6 +5082,11 @@ lru-cache@^6.0.0:
   dependencies:
     yallist "^4.0.0"
 
+lucide@^0.16.17:
+  version "0.16.17"
+  resolved "https://registry.yarnpkg.com/lucide/-/lucide-0.16.17.tgz#52466954e97ea3efac0191b2452f42932d41fdf7"
+  integrity sha512-zAB+aRo6/naheCMQ8AYNAXCnsxCZQb7pI52taqjcfBDPkH3jJnx+b5UnvR4kncVPw4t7/U4GARH/23PleFgnHQ==
+
 magic-string@^0.25.7:
   version "0.25.7"
   resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.25.7.tgz#3f497d6fd34c669c6798dcb821f2ef31f5445051"

From c0918b17ed6881d1e7690b44cbff0df38f4e004e Mon Sep 17 00:00:00 2001
From: Alice Gaudon <alice@gaudon.pro>
Date: Sun, 21 Nov 2021 13:08:57 +0100
Subject: [PATCH 3/7] Rename front layouts to templates

---
 src/assets/views/auth/account/account.svelte           |  6 +++---
 src/assets/views/auth/auth.svelte                      | 10 +++++-----
 src/assets/views/backend/accounts_approval.svelte      |  6 +++---
 src/assets/views/backend/index.svelte                  |  6 +++---
 src/assets/views/errors/400.svelte                     |  4 ++--
 src/assets/views/errors/401.svelte                     |  4 ++--
 src/assets/views/errors/403.svelte                     |  4 ++--
 src/assets/views/errors/404.svelte                     |  4 ++--
 src/assets/views/errors/429.svelte                     |  4 ++--
 src/assets/views/errors/500.svelte                     |  4 ++--
 src/assets/views/errors/503.svelte                     |  4 ++--
 src/assets/views/home.svelte                           |  6 +++---
 src/assets/views/magic_link.svelte                     |  6 +++---
 src/assets/views/magic_link_lobby.svelte               |  6 +++---
 .../BaseTemplate.svelte}                               |  0
 .../Error.svelte => templates/ErrorTemplate.svelte}    |  0
 .../{layouts => templates}/base/BaseFooter.svelte      |  0
 .../{layouts => templates}/base/BaseHeader.svelte      |  0
 .../{layouts => templates}/base/BaseHeaderLogo.svelte  |  0
 .../{layouts => templates}/base/BaseNavMenuAuth.svelte |  0
 .../base/BaseNavMenuLinks.svelte                       |  0
 .../svelte_template.html}                              |  0
 src/frontend/SvelteViewEngine.ts                       |  2 +-
 test/assets/views/design.svelte                        |  6 +++---
 test/assets/views/tests.svelte                         |  2 +-
 25 files changed, 42 insertions(+), 42 deletions(-)
 rename src/assets/views/{layouts/BaseLayout.svelte => templates/BaseTemplate.svelte} (100%)
 rename src/assets/views/{errors/Error.svelte => templates/ErrorTemplate.svelte} (100%)
 rename src/assets/views/{layouts => templates}/base/BaseFooter.svelte (100%)
 rename src/assets/views/{layouts => templates}/base/BaseHeader.svelte (100%)
 rename src/assets/views/{layouts => templates}/base/BaseHeaderLogo.svelte (100%)
 rename src/assets/views/{layouts => templates}/base/BaseNavMenuAuth.svelte (100%)
 rename src/assets/views/{layouts => templates}/base/BaseNavMenuLinks.svelte (100%)
 rename src/assets/views/{layouts/svelte_layout.html => templates/svelte_template.html} (100%)

diff --git a/src/assets/views/auth/account/account.svelte b/src/assets/views/auth/account/account.svelte
index a8d2fbf..dcb0329 100644
--- a/src/assets/views/auth/account/account.svelte
+++ b/src/assets/views/auth/account/account.svelte
@@ -1,6 +1,6 @@
 <script>
     import {locals} from "../../../ts/stores";
-    import BaseLayout from "../../layouts/BaseLayout.svelte";
+    import BaseTemplate from "../../templates/BaseTemplate.svelte";
     import Message from "../../components/Message.svelte";
     import NamePanel from "./NamePanel.svelte";
     import PasswordPanel from "./PasswordPanel.svelte";
@@ -14,7 +14,7 @@
     const emails = $locals.emails || [];
 </script>
 
-<BaseLayout title="Account" description="Manage your account settings and data.">
+<BaseTemplate title="Account" description="Manage your account settings and data.">
     <div class="container">
         <div class="panel">
             <h2><Icon name="user"/> Personal information</h2>
@@ -101,4 +101,4 @@
             {/if}
         </section>
     </div>
-</BaseLayout>
+</BaseTemplate>
diff --git a/src/assets/views/auth/auth.svelte b/src/assets/views/auth/auth.svelte
index db3f8d4..c34d380 100644
--- a/src/assets/views/auth/auth.svelte
+++ b/src/assets/views/auth/auth.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import {locals} from "../../ts/stores.js";
-    import BaseLayout from "../layouts/BaseLayout.svelte";
+    import BaseTemplate from "../templates/BaseTemplate.svelte";
     import Form from "../utils/Form.svelte";
     import Field from "../utils/Field.svelte";
     import Icon from "../utils/Icon.svelte";
@@ -18,9 +18,9 @@
     }
 </script>
 
-<BaseLayout title="Authentication / Registration"
-            description="Join {$locals.app.name} and share your files!"
-            h1="Authentication and registration">
+<BaseTemplate title="Authentication / Registration"
+              description="Join {$locals.app.name} and share your files!"
+              h1="Authentication and registration">
 
     <div class="container">
         {#if hasRoute('login')}
@@ -74,4 +74,4 @@
         </section>
         {/if}
     </div>
-</BaseLayout>
+</BaseTemplate>
diff --git a/src/assets/views/backend/accounts_approval.svelte b/src/assets/views/backend/accounts_approval.svelte
index dd9cbc2..1eff009 100644
--- a/src/assets/views/backend/accounts_approval.svelte
+++ b/src/assets/views/backend/accounts_approval.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import {locals} from "../../ts/stores";
-    import BaseLayout from "../layouts/BaseLayout.svelte";
+    import BaseTemplate from "../templates/BaseTemplate.svelte";
     import Pagination from "../components/Pagination.svelte";
     import Form from "../utils/Form.svelte";
     import Field from "../utils/Field.svelte";
@@ -16,7 +16,7 @@
     }
 </style>
 
-<BaseLayout title="{$locals.app.name} - Review accounts" h1={false}>
+<BaseTemplate title="{$locals.app.name} - Review accounts" h1={false}>
     {#if hasRoute('backend')}
     <Breadcrumb currentPageTitle="Accounts pending review" pages={[
         {link: route('backend'), title:'Backend'},
@@ -78,4 +78,4 @@
     </div>
 
     <Pagination pagination={$locals.pagination} routeName="accounts-approval" contextSize="3" />
-</BaseLayout>
+</BaseTemplate>
diff --git a/src/assets/views/backend/index.svelte b/src/assets/views/backend/index.svelte
index fba4ee8..6ad2f95 100644
--- a/src/assets/views/backend/index.svelte
+++ b/src/assets/views/backend/index.svelte
@@ -1,13 +1,13 @@
 <script lang="ts">
     import {locals} from "../../ts/stores.js";
-    import BaseLayout from "../layouts/BaseLayout.svelte";
+    import BaseTemplate from "../templates/BaseTemplate.svelte";
     import Breadcrumb from "../components/Breadcrumb.svelte";
     import Icon from "../utils/Icon.svelte";
 
     const menu = $locals.menu || [];
 </script>
 
-<BaseLayout title="{$locals.app.name} backend" h1={false}>
+<BaseTemplate title="{$locals.app.name} backend" h1={false}>
     <div class="container">
         <Breadcrumb currentPageTitle="Backend"/>
 
@@ -30,4 +30,4 @@
             </nav>
         </div>
     </div>
-</BaseLayout>
+</BaseTemplate>
diff --git a/src/assets/views/errors/400.svelte b/src/assets/views/errors/400.svelte
index 5ad9f17..26064ed 100644
--- a/src/assets/views/errors/400.svelte
+++ b/src/assets/views/errors/400.svelte
@@ -1,5 +1,5 @@
 <script>
-    import Error from "./Error.svelte";
+    import ErrorTemplate from "../templates/ErrorTemplate.svelte";
 </script>
 
-<Error code={400} message="Bad request." />
+<ErrorTemplate code={400} message="Bad request." />
diff --git a/src/assets/views/errors/401.svelte b/src/assets/views/errors/401.svelte
index a6d9d83..516d82a 100644
--- a/src/assets/views/errors/401.svelte
+++ b/src/assets/views/errors/401.svelte
@@ -1,5 +1,5 @@
 <script>
-    import Error from "./Error.svelte";
+    import ErrorTemplate from "../templates/ErrorTemplate.svelte";
 </script>
 
-<Error code={401} message="Unauthorized." />
+<ErrorTemplate code={401} message="Unauthorized." />
diff --git a/src/assets/views/errors/403.svelte b/src/assets/views/errors/403.svelte
index 98a397f..489c6b5 100644
--- a/src/assets/views/errors/403.svelte
+++ b/src/assets/views/errors/403.svelte
@@ -1,5 +1,5 @@
 <script>
-    import Error from "./Error.svelte";
+    import ErrorTemplate from "../templates/ErrorTemplate.svelte";
 </script>
 
-<Error code={403} message="Forbidden" />
+<ErrorTemplate code={403} message="Forbidden" />
diff --git a/src/assets/views/errors/404.svelte b/src/assets/views/errors/404.svelte
index 69c414d..1e526bb 100644
--- a/src/assets/views/errors/404.svelte
+++ b/src/assets/views/errors/404.svelte
@@ -1,5 +1,5 @@
 <script>
-    import Error from "./Error.svelte";
+    import ErrorTemplate from "../templates/ErrorTemplate.svelte";
 </script>
 
-<Error code={404} message="Page not found." />
+<ErrorTemplate code={404} message="Page not found." />
diff --git a/src/assets/views/errors/429.svelte b/src/assets/views/errors/429.svelte
index cd0e471..04ef391 100644
--- a/src/assets/views/errors/429.svelte
+++ b/src/assets/views/errors/429.svelte
@@ -1,5 +1,5 @@
 <script>
-    import Error from "./Error.svelte";
+    import ErrorTemplate from "../templates/ErrorTemplate.svelte";
 </script>
 
-<Error code={429} message="Too many requests." />
+<ErrorTemplate code={429} message="Too many requests." />
diff --git a/src/assets/views/errors/500.svelte b/src/assets/views/errors/500.svelte
index 4682025..ab3ccd4 100644
--- a/src/assets/views/errors/500.svelte
+++ b/src/assets/views/errors/500.svelte
@@ -1,5 +1,5 @@
 <script>
-    import Error from "./Error.svelte";
+    import ErrorTemplate from "../templates/ErrorTemplate.svelte";
 </script>
 
-<Error code={500} message="Internal server error." />
+<ErrorTemplate code={500} message="Internal server error." />
diff --git a/src/assets/views/errors/503.svelte b/src/assets/views/errors/503.svelte
index 47e7f5b..4f7ceef 100644
--- a/src/assets/views/errors/503.svelte
+++ b/src/assets/views/errors/503.svelte
@@ -1,5 +1,5 @@
 <script>
-    import Error from "./Error.svelte";
+    import ErrorTemplate from "../templates/ErrorTemplate.svelte";
 </script>
 
-<Error code={503} message="Service unavailable." />
+<ErrorTemplate code={503} message="Service unavailable." />
diff --git a/src/assets/views/home.svelte b/src/assets/views/home.svelte
index b03826a..ac6c4c3 100644
--- a/src/assets/views/home.svelte
+++ b/src/assets/views/home.svelte
@@ -1,10 +1,10 @@
 <script lang="ts">
     import {locals} from "../ts/stores";
     import {route, hasRoute, hasAnyRoute} from "../../common/Routing";
-    import BaseLayout from "./layouts/BaseLayout.svelte";
+    import BaseTemplate from "./templates/BaseTemplate.svelte";
 </script>
 
-<BaseLayout title="{$locals.app.name}" h1={false}>
+<BaseTemplate title="{$locals.app.name}" h1={false}>
     <div class="panel">
         <h1>swaf - Svelte Web Application Framework</h1>
         <p>Welcome to {$locals.app.name}!</p>
@@ -22,4 +22,4 @@
         </nav>
         {/if}
     </div>
-</BaseLayout>
+</BaseTemplate>
diff --git a/src/assets/views/magic_link.svelte b/src/assets/views/magic_link.svelte
index d764927..fc3346b 100644
--- a/src/assets/views/magic_link.svelte
+++ b/src/assets/views/magic_link.svelte
@@ -1,13 +1,13 @@
 <script>
     import {locals} from "../ts/stores";
-    import BaseLayout from "./layouts/BaseLayout.svelte";
+    import BaseTemplate from "./templates/BaseTemplate.svelte";
     import Message from "./components/Message.svelte";
 
     const actionType = $locals.magicLink?.action_type;
     const h1 = 'Magic Link' + (actionType ? (' - ' + actionType) : '');
 </script>
 
-<BaseLayout title="{$locals.app.name} {h1}" {h1}>
+<BaseTemplate title="{$locals.app.name} {h1}" {h1}>
     <div class="container">
         <div class="panel">
             {#if $locals.err}
@@ -18,4 +18,4 @@
             {/if}
         </div>
     </div>
-</BaseLayout>
+</BaseTemplate>
diff --git a/src/assets/views/magic_link_lobby.svelte b/src/assets/views/magic_link_lobby.svelte
index b82e291..21b8eb9 100644
--- a/src/assets/views/magic_link_lobby.svelte
+++ b/src/assets/views/magic_link_lobby.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import {locals} from "../ts/stores.js";
-    import BaseLayout from "./layouts/BaseLayout.svelte";
+    import BaseTemplate from "./templates/BaseTemplate.svelte";
     import Message from "./components/Message.svelte";
     import WebsocketClient from "../ts/WebsocketClient.js";
     import {Time} from "../../common/Time.js";
@@ -37,7 +37,7 @@
     });
 </script>
 
-<BaseLayout h1="Authentication lobby" title="{$locals.app.name} authentication lobby">
+<BaseTemplate h1="Authentication lobby" title="{$locals.app.name} authentication lobby">
     <div class="container">
         <div class="panel">
             <Message type="success" sticky
@@ -48,4 +48,4 @@
             <p class="center">Waiting for you to open the link...</p>
         </div>
     </div>
-</BaseLayout>
+</BaseTemplate>
diff --git a/src/assets/views/layouts/BaseLayout.svelte b/src/assets/views/templates/BaseTemplate.svelte
similarity index 100%
rename from src/assets/views/layouts/BaseLayout.svelte
rename to src/assets/views/templates/BaseTemplate.svelte
diff --git a/src/assets/views/errors/Error.svelte b/src/assets/views/templates/ErrorTemplate.svelte
similarity index 100%
rename from src/assets/views/errors/Error.svelte
rename to src/assets/views/templates/ErrorTemplate.svelte
diff --git a/src/assets/views/layouts/base/BaseFooter.svelte b/src/assets/views/templates/base/BaseFooter.svelte
similarity index 100%
rename from src/assets/views/layouts/base/BaseFooter.svelte
rename to src/assets/views/templates/base/BaseFooter.svelte
diff --git a/src/assets/views/layouts/base/BaseHeader.svelte b/src/assets/views/templates/base/BaseHeader.svelte
similarity index 100%
rename from src/assets/views/layouts/base/BaseHeader.svelte
rename to src/assets/views/templates/base/BaseHeader.svelte
diff --git a/src/assets/views/layouts/base/BaseHeaderLogo.svelte b/src/assets/views/templates/base/BaseHeaderLogo.svelte
similarity index 100%
rename from src/assets/views/layouts/base/BaseHeaderLogo.svelte
rename to src/assets/views/templates/base/BaseHeaderLogo.svelte
diff --git a/src/assets/views/layouts/base/BaseNavMenuAuth.svelte b/src/assets/views/templates/base/BaseNavMenuAuth.svelte
similarity index 100%
rename from src/assets/views/layouts/base/BaseNavMenuAuth.svelte
rename to src/assets/views/templates/base/BaseNavMenuAuth.svelte
diff --git a/src/assets/views/layouts/base/BaseNavMenuLinks.svelte b/src/assets/views/templates/base/BaseNavMenuLinks.svelte
similarity index 100%
rename from src/assets/views/layouts/base/BaseNavMenuLinks.svelte
rename to src/assets/views/templates/base/BaseNavMenuLinks.svelte
diff --git a/src/assets/views/layouts/svelte_layout.html b/src/assets/views/templates/svelte_template.html
similarity index 100%
rename from src/assets/views/layouts/svelte_layout.html
rename to src/assets/views/templates/svelte_template.html
diff --git a/src/frontend/SvelteViewEngine.ts b/src/frontend/SvelteViewEngine.ts
index 58bda91..e267b90 100644
--- a/src/frontend/SvelteViewEngine.ts
+++ b/src/frontend/SvelteViewEngine.ts
@@ -64,7 +64,7 @@ export default class SvelteViewEngine extends ViewEngine {
         const view = await this.fileCache.get(actualFile, !config.get<boolean>('view.cache'));
 
         // Root template
-        const templateFile = await this.resolveFileFromCanonicalNameOrFail('layouts/svelte_layout.html');
+        const templateFile = await this.resolveFileFromCanonicalNameOrFail('templates/svelte_template.html');
         const rawOutput = await this.fileCache.get(templateFile, !config.get<boolean>('view.cache'));
 
         // Pre-compiled parts
diff --git a/test/assets/views/design.svelte b/test/assets/views/design.svelte
index 7986e35..f672b3a 100644
--- a/test/assets/views/design.svelte
+++ b/test/assets/views/design.svelte
@@ -1,6 +1,6 @@
 <script>
     import {route} from "../../common/Routing";
-    import BaseLayout from "./layouts/BaseLayout.svelte";
+    import BaseTemplate from "./templates/BaseTemplate.svelte";
     import Message from "./components/Message.svelte";
     import Form from "./utils/Form.svelte";
     import Field from "./utils/Field.svelte";
@@ -13,7 +13,7 @@
     const paginationData = new PaginationData(20, 20, 1000).serialize();
 </script>
 
-<BaseLayout title="Design test">
+<BaseTemplate title="Design test">
     <DesignButtons/>
 
     <div class="panel">
@@ -114,6 +114,6 @@
             {link: route('design'), title: 'self'},
         ]}/>
     </div>
-</BaseLayout>
+</BaseTemplate>
 
 
diff --git a/test/assets/views/tests.svelte b/test/assets/views/tests.svelte
index a2821f4..705f159 100644
--- a/test/assets/views/tests.svelte
+++ b/test/assets/views/tests.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
     import AllTests from "./AllTests.svelte";
-    import BaseLayout from "./layouts/BaseLayout.svelte";
+    import BaseLayout from "./templates/BaseTemplate.svelte";
 </script>
 
 <BaseLayout title="Frontend tests">

From 428990dc00b73c5058eaa037b6e74eb155682ac6 Mon Sep 17 00:00:00 2001
From: Alice Gaudon <alice@gaudon.pro>
Date: Sun, 21 Nov 2021 13:15:15 +0100
Subject: [PATCH 4/7] front/home page: make first word of the title choosen at
 random in a list

---
 src/assets/views/home.svelte | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/assets/views/home.svelte b/src/assets/views/home.svelte
index ac6c4c3..4dc7521 100644
--- a/src/assets/views/home.svelte
+++ b/src/assets/views/home.svelte
@@ -2,11 +2,19 @@
     import {locals} from "../ts/stores";
     import {route, hasRoute, hasAnyRoute} from "../../common/Routing";
     import BaseTemplate from "./templates/BaseTemplate.svelte";
+    import {onMount} from "svelte";
+
+    let randomTitleSWord = 'Svelte';
+    const possibleSWords = ['Svelte', 'Simple', 'Scalable', 'Super', 'Structure', 'Satisfying'];
+
+    onMount(() => {
+        randomTitleSWord = possibleSWords[Math.floor(Math.random() * possibleSWords.length)];
+    });
 </script>
 
 <BaseTemplate title="{$locals.app.name}" h1={false}>
     <div class="panel">
-        <h1>swaf - Svelte Web Application Framework</h1>
+        <h1>swaf - {randomTitleSWord} Web Application Framework</h1>
         <p>Welcome to {$locals.app.name}!</p>
 
         {#if hasAnyRoute('tests', 'design')}

From e9db1f4ded10e9cac9ec50b0142bcda6fc1cd7c0 Mon Sep 17 00:00:00 2001
From: Alice Gaudon <alice@gaudon.pro>
Date: Sun, 21 Nov 2021 15:02:31 +0100
Subject: [PATCH 5/7] front: add an external link icon to external links

---
 src/assets/scss/base.scss                     |  2 +-
 .../views/scripts/ExternalLinkIcons.svelte    | 32 +++++++++++++++++++
 .../views/templates/BaseTemplate.svelte       |  3 ++
 .../views/templates/CommonScripts.svelte      |  5 +++
 .../views/templates/ErrorTemplate.svelte      |  3 ++
 test/assets/views/design.svelte               |  2 +-
 6 files changed, 45 insertions(+), 2 deletions(-)
 create mode 100644 src/assets/views/scripts/ExternalLinkIcons.svelte
 create mode 100644 src/assets/views/templates/CommonScripts.svelte

diff --git a/src/assets/scss/base.scss b/src/assets/scss/base.scss
index a98f1d3..22ae0fc 100644
--- a/src/assets/scss/base.scss
+++ b/src/assets/scss/base.scss
@@ -155,7 +155,7 @@ h1 {
 a {
 	text-decoration: none;
 
-	.icon.feather-external-link { //todo add js
+	.icon.lucide-external-link { //todo add js
 		--icon-size: 16px;
 		margin-left: 4px;
 		margin-top: -3px;
diff --git a/src/assets/views/scripts/ExternalLinkIcons.svelte b/src/assets/views/scripts/ExternalLinkIcons.svelte
new file mode 100644
index 0000000..62f0a81
--- /dev/null
+++ b/src/assets/views/scripts/ExternalLinkIcons.svelte
@@ -0,0 +1,32 @@
+<script lang="ts">
+    import {onMount} from "svelte";
+    import Icon from "../utils/Icon.svelte";
+
+    let iconTemplate: HTMLTemplateElement;
+
+    function addExternalLinkIcons(): void {
+        console.log('Add icons to external links...');
+
+        const iconElement = iconTemplate.childNodes.item(0);
+
+        document.querySelectorAll('a[target="_blank"]').forEach(el => {
+            if (!el.classList.contains('no-icon')) {
+                el.appendChild(iconElement.cloneNode(true));
+            }
+        });
+    }
+
+    onMount(() => {
+        addExternalLinkIcons();
+    });
+</script>
+
+<style>
+    div {
+        display: none;
+    }
+</style>
+
+<div bind:this={iconTemplate}>
+    <Icon name="external-link"/>
+</div>
diff --git a/src/assets/views/templates/BaseTemplate.svelte b/src/assets/views/templates/BaseTemplate.svelte
index 4d10962..755d987 100644
--- a/src/assets/views/templates/BaseTemplate.svelte
+++ b/src/assets/views/templates/BaseTemplate.svelte
@@ -2,6 +2,7 @@
     import FlashMessages from "../components/FlashMessages.svelte";
     import BaseFooter from "./base/BaseFooter.svelte";
     import BaseHeader from "./base/BaseHeader.svelte";
+    import CommonScripts from "./CommonScripts.svelte";
 
     export let title: string;
     export let h1: string = title;
@@ -9,6 +10,8 @@
     export let refresh_after: number | undefined = undefined;
 </script>
 
+<CommonScripts/>
+
 <style lang="scss">
     @import "../../scss/vars";
     @import "../../scss/helpers";
diff --git a/src/assets/views/templates/CommonScripts.svelte b/src/assets/views/templates/CommonScripts.svelte
new file mode 100644
index 0000000..7bd6ab6
--- /dev/null
+++ b/src/assets/views/templates/CommonScripts.svelte
@@ -0,0 +1,5 @@
+<script>
+    import ExternalLinkIcons from "../scripts/ExternalLinkIcons.svelte";
+</script>
+
+<ExternalLinkIcons/>
diff --git a/src/assets/views/templates/ErrorTemplate.svelte b/src/assets/views/templates/ErrorTemplate.svelte
index a881ef5..5c7c05b 100644
--- a/src/assets/views/templates/ErrorTemplate.svelte
+++ b/src/assets/views/templates/ErrorTemplate.svelte
@@ -2,6 +2,7 @@
     import {locals} from "../../ts/stores.js";
     import FlashMessages from "../components/FlashMessages.svelte";
     import Icon from "../utils/Icon.svelte";
+    import CommonScripts from "./CommonScripts.svelte";
 
     const previousUrl = $locals.getPreviousUrl();
 
@@ -15,6 +16,8 @@
     instructions = $locals.error_instructions || instructions;
 </script>
 
+<CommonScripts/>
+
 <svelte:head>
     <title>{code + ' - ' + message}</title>
 
diff --git a/test/assets/views/design.svelte b/test/assets/views/design.svelte
index f672b3a..a41f23f 100644
--- a/test/assets/views/design.svelte
+++ b/test/assets/views/design.svelte
@@ -23,7 +23,7 @@
         </h2>
         <p>Paragraph</p>
 
-        <p>Paragraph, <a href={route('home')}>Link</a></p>
+        <p>Paragraph, <a href={route('home')}>Link</a>, <a href={route('home')} target="_blank">External link</a></p>
 
         <ul>
             <li>Unordered</li>

From b24e9ab58015240b1ca3d2e660c863d63027bd19 Mon Sep 17 00:00:00 2001
From: Alice Gaudon <alice@gaudon.pro>
Date: Sun, 21 Nov 2021 16:10:38 +0100
Subject: [PATCH 6/7] front: add CopyableText component

---
 src/assets/scss/_helpers.scss                 | 29 +++---
 .../views/components/CopyableText.svelte      | 95 +++++++++++++++++++
 test/assets/views/design.svelte               | 10 ++
 3 files changed, 121 insertions(+), 13 deletions(-)
 create mode 100644 src/assets/views/components/CopyableText.svelte

diff --git a/src/assets/scss/_helpers.scss b/src/assets/scss/_helpers.scss
index fbc2059..34cce16 100644
--- a/src/assets/scss/_helpers.scss
+++ b/src/assets/scss/_helpers.scss
@@ -27,6 +27,22 @@
 	}
 
 
+	// Buttons
+	button, .button {
+		&:not(.bold) {
+			--background-color: var(--surface);
+
+			&:hover::after {
+				--background-color: var(--on-surface);
+
+				:global(&) {
+					--background-color: var(--on-surface);
+				}
+			}
+		}
+	}
+
+
 	// States modifiers
 	.primary:not(.bold) {
 		--color: var(--primary-on-surface);
@@ -49,19 +65,6 @@
 		--background-color: var(--surface);
 	}
 
-
-	// Buttons
-	button {
-		--background-color: var(--surface);
-	}
-	button:hover::after {
-		background-color: var(--on-surface);
-	}
-
-	:global(button:hover::after) {
-		background-color: var(--on-surface);
-	}
-
 	@if ($shadowStrength > 0) {
 		box-shadow: 0 #{$shadowStrength}px #{$shadowStrength}px #00000045;
 	}
diff --git a/src/assets/views/components/CopyableText.svelte b/src/assets/views/components/CopyableText.svelte
new file mode 100644
index 0000000..9b6ee3b
--- /dev/null
+++ b/src/assets/views/components/CopyableText.svelte
@@ -0,0 +1,95 @@
+<script lang="ts">
+    import Icon from "../utils/Icon.svelte";
+    import { fade } from "svelte/transition";
+
+    export let title: string;
+    export let content: string;
+
+    let contentNode: HTMLElement;
+    let copiedOverlay: HTMLElement;
+
+
+    function selectAll() {
+        const selection = window.getSelection();
+        if (contentNode && selection) {
+            selection.selectAllChildren(contentNode);
+        }
+    }
+
+    function copy() {
+        const selection = window.getSelection();
+        if (contentNode && selection) {
+            selectAll();
+            navigator.clipboard.writeText(contentNode.innerText);
+            showOverlay();
+        }
+    }
+
+    let showCopiedOverlay = false;
+    function showOverlay() {
+        showCopiedOverlay = true;
+    }
+    function releaseOverlay() {
+        showCopiedOverlay = false;
+    }
+</script>
+
+<style lang="scss">
+    @import "../../scss/helpers";
+	.copyable-text {
+        position: relative;
+		display: flex;
+		flex-direction: row;
+		margin: 8px;
+        padding: 0;
+
+		border-radius: 5px;
+		overflow: hidden;
+
+		.title {
+			padding: 8px;
+		}
+
+		.content {
+			width: 0;
+			flex-grow: 1;
+			overflow: hidden;
+			white-space: nowrap;
+			padding: 8px;
+		}
+
+		.copy-button {
+			margin: 0;
+			padding: 0;
+			border-radius: 0;
+
+			:global(.icon) {
+				--icon-size: 20px;
+				margin: 8px;
+			}
+		}
+
+        .copied-overlay {
+			position: absolute;
+            left: 0;
+            top: 0;
+            width: 100%;
+			height: 100%;
+            padding: 8px;
+
+            text-align: center;
+            background-color: var(--success);
+        }
+	}
+</style>
+
+
+<div class="copyable-text panel">
+    <div class="title">{title}</div>
+    <div class="content" bind:this={contentNode} on:click={selectAll}>{content}</div>
+    <button class="bold copy-button" on:click={copy}><Icon name="copy"/></button>
+
+    {#if showCopiedOverlay}
+        <div class="copied-overlay" bind:this={copiedOverlay} out:fade on:mouseleave={releaseOverlay}>Copied!</div>
+    {/if}
+</div>
diff --git a/test/assets/views/design.svelte b/test/assets/views/design.svelte
index a41f23f..800cc67 100644
--- a/test/assets/views/design.svelte
+++ b/test/assets/views/design.svelte
@@ -9,6 +9,7 @@
     import Breadcrumb from "./components/Breadcrumb.svelte";
     import Icon from "./utils/Icon.svelte";
     import DesignButtons from "./DesignButtons.svelte";
+    import CopyableText from "./components/CopyableText.svelte";
 
     const paginationData = new PaginationData(20, 20, 1000).serialize();
 </script>
@@ -114,6 +115,15 @@
             {link: route('design'), title: 'self'},
         ]}/>
     </div>
+
+    <div class="panel">
+        <h2>
+            <Icon name="copy"/>
+            Copyable text
+        </h2>
+
+        <CopyableText title="URL" content="https://swaf.dev"/>
+    </div>
 </BaseTemplate>
 
 

From c7d0238d22ebda8cb513d56ba9ee0ea23eb8255c Mon Sep 17 00:00:00 2001
From: Alice Gaudon <alice@gaudon.pro>
Date: Sun, 21 Nov 2021 16:50:47 +0100
Subject: [PATCH 7/7] Version 0.24.6

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index b5f27d2..1091a0b 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "swaf",
-    "version": "0.24.5",
+    "version": "0.24.6",
     "description": "Structure Web Application Framework.",
     "repository": "https://eternae.ink/ashpie/swaf",
     "author": "Alice Gaudon <alice@gaudon.pro>",