Re-organise assets to be closer to their respective uses.

index.html

@@ -2,7 +2,8 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
+    <link rel="icon" type="image/png" href="/src/assets/logo_round.png" />
+    <!--<link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />-->
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>REVOLT</title>
   </head>

package.json

@@ -2,7 +2,7 @@
   "version": "0.0.0",
   "scripts": {
     "dev": "vite",
-    "build": "rimraf build && tsc && vite build",
+    "build": "rimraf build && tsc --noEmit && vite build",
     "preview": "vite preview",
     "lint": "eslint 'src/**/*.{js,jsx,ts,tsx}'",
     "fmt": "prettier --write 'src/**/*.{js,jsx,ts,tsx}'",

public/assets/logo.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="193.733" height="37.438" viewBox="0 0 193.733 37.438"><path d="M23.393,1.382c0,2.787-1.52,4.46-4.764,4.46H13.258V-2.977H18.63C21.873-2.977,23.393-1.254,23.393,1.382Zm-24-11.555,5.2,7.213V25.4h8.666V11.973h2.078l7.4,13.43h9.781l-8.21-14.089A10.355,10.355,0,0,0,32.212,1.027c0-6.183-4.358-11.2-13.075-11.2Zm60.035,0H37.634V25.4H59.426V18.46H46.3v-7.8H57.906V3.966H46.3V-2.969H59.426Zm20.981,26.86-8.818-26.86H62.365L74.984,25.4H85.83L98.449-10.173H89.276Zm56.659-9.173c0-10.693-8.058-18.194-18.194-18.194-10.085,0-18.3,7.5-18.3,18.194a17.9,17.9,0,0,0,18.3,18.244A17.815,17.815,0,0,0,137.066,7.514Zm-27.62,0c0-6.335,3.649-10.338,9.426-10.338,5.676,0,9.376,4,9.376,10.338,0,6.233-3.7,10.338-9.376,10.338C113.095,17.852,109.446,13.747,109.446,7.514ZM141.88-10.173V25.4H161.9v-6.95H150.545V-10.173Zm22.248,7.2h9.426V25.4h8.666V-2.975h9.426v-7.2H164.128Z" transform="translate(1.586 11.18)" fill="#fff" stroke="#fff" stroke-width="1"/></svg>

src/assets/logo.svg

@@ -0,0 +1,3 @@
+<svg width="500" height="500" viewBox="0 0 500 500" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M290.947 209.226C290.947 227.612 280.944 238.648 259.595 238.648H224.247V180.471H259.601C280.944 180.471 290.947 191.837 290.947 209.226ZM133 133L167.222 180.583V367.669H224.254V279.094H237.93L286.63 367.689H351L296.969 274.746C312.054 271.066 325.434 262.333 334.893 249.993C344.353 237.652 349.325 222.444 348.986 206.885C348.986 166.096 320.306 133 262.938 133H167.222H133Z" fill="#FF4654" stroke="#FF4654" stroke-width="1.04306"/>
+</svg>

src/components/common/ChannelIcon.tsx

@@ -8,7 +8,8 @@ interface Props extends IconBaseProps<Channels.GroupChannel | Channels.TextChann
     isServerChannel?: boolean;
 }
 
-const fallback = '/assets/group.png';
+import fallback from './assets/group.png';
+
 export default function ChannelIcon(props: Props & Omit<JSX.HTMLAttributes<HTMLImageElement>, keyof Props>) {
     const client = useContext(AppContext);
 

src/components/common/UserIcon.tsx

@@ -47,7 +47,8 @@ const VoiceIndicator = styled.div<{ status: VoiceStatus }>`
     ` }
 `;
 
-const fallback = '/assets/user.png';
+import fallback from './assets/user.png';
+
 export default function UserIcon(props: Props & Omit<JSX.SVGAttributes<SVGSVGElement>, keyof Props>) {
     const client = useContext(AppContext);
 

src/components/navigation/left/ServerListSidebar.tsx

@@ -1,15 +1,17 @@
+import LineDivider from "../../ui/LineDivider";
+import { mapChannelWithUnread } from "./common";
+import styled, { css } from "styled-components";
+import ServerIcon from "../../common/ServerIcon";
+import { Children } from "../../../types/Preact";
+import PaintCounter from "../../../lib/PaintCounter";
+import { attachContextMenu } from 'preact-context-menu';
+import { connectState } from "../../../redux/connector";
+import { Unreads } from "../../../redux/reducers/unreads";
 import { Channel, Servers } from "revolt.js/dist/api/objects";
 import { Link, useLocation, useParams } from "react-router-dom";
 import { useChannels, useForceUpdate, useServers } from "../../../context/revoltjs/hooks";
-import { mapChannelWithUnread } from "./common";
-import { Unreads } from "../../../redux/reducers/unreads";
-import { connectState } from "../../../redux/connector";
-import styled, { css } from "styled-components";
-import { Children } from "../../../types/Preact";
-import LineDivider from "../../ui/LineDivider";
-import ServerIcon from "../../common/ServerIcon";
-import PaintCounter from "../../../lib/PaintCounter";
-import { attachContextMenu } from 'preact-context-menu';
+
+import logoSVG from '../../../assets/logo.svg';
 
 function Icon({ children, unread, size }: { children: Children, unread?: 'mention' | 'unread', size: number }) {
     return (
@@ -146,7 +148,7 @@ export function ServerListSidebar({ unreads }: Props) {
                     <ServerEntry invert
                         active={typeof server === 'undefined' && !path.startsWith('/invite')}>
                         <Icon size={36} unread={homeUnread}>
-                            <img src="/assets/app_icon.png"  />
+                            <img src={logoSVG} />
                         </Icon>
                     </ServerEntry>
                 </Link>

src/context/intermediate/modals/Onboarding.tsx

@@ -7,6 +7,8 @@ import Button from "../../../components/ui/Button";
 import FormField from "../../../pages/login/FormField";
 import Preloader from "../../../components/ui/Preloader";
 
+import wideSVG from '../../../assets/wide.svg';
+
 interface Props {
     onClose: () => void;
     callback: (username: string, loginAfterSuccess?: true) => Promise<void>;
@@ -32,7 +34,7 @@ export function OnboardingModal({ onClose, callback }: Props) {
             <div className={styles.header}>
                 <h1>
                     <Text id="app.special.modals.onboarding.welcome" />
-                    <img src="/assets/wide.svg" />
+                    <img src={wideSVG} />
                 </h1>
             </div>
             <div className={styles.form}>

src/pages/home/Home.tsx

@@ -4,12 +4,14 @@ import { Link } from "react-router-dom";
 import { Text } from "preact-i18n";
 import Header from "../../components/ui/Header";
 
+import wideSVG from '../../assets/wide.svg';
+
 export default function Home() {
     return (
         <div className={styles.home}>
             <Header placement="primary"><Text id="app.navigation.tabs.home" /></Header>
             <h3>
-                <Text id="app.special.modals.onboarding.welcome" /> <img src="/assets/wide.svg" />
+                <Text id="app.special.modals.onboarding.welcome" /> <img src={wideSVG} />
             </h3>
             <ul>
                 <li>

src/pages/settings/panes/Appearance.tsx

@@ -15,6 +15,14 @@ import { useIntermediate } from "../../../context/intermediate/Intermediate";
 // @ts-ignore
 import pSBC from 'shade-blend-color';
 
+import lightSVG from '../assets/light.svg';
+import darkSVG from '../assets/dark.svg';
+
+import mutantSVG from '../assets/mutant_emoji.svg';
+import notoSVG from '../assets/noto_emoji.svg';
+import openmojiSVG from '../assets/openmoji_emoji.svg';
+import twemojiSVG from '../assets/twemoji_emoji.svg';
+
 interface Props {
     settings: Settings;
 }
@@ -72,7 +80,7 @@ export function Component(props: Props & WithDispatcher) {
             <div className={styles.themes}>
                 <div className={styles.theme}>
                     <img
-                        src="/assets/images/light.svg"
+                        src={lightSVG}
                         data-active={selected === "light"}
                         onClick={() =>
                             selected !== "light" &&
@@ -84,7 +92,7 @@ export function Component(props: Props & WithDispatcher) {
                 </div>
                 <div className={styles.theme}>
                     <img
-                        src="/assets/images/dark.svg"
+                        src={darkSVG}
                         data-active={selected === "dark"}
                         onClick={() =>
                             selected !== "dark" && setTheme({ preset: "dark" })
@@ -131,7 +139,7 @@ export function Component(props: Props & WithDispatcher) {
                         <div className={styles.button}
                             onClick={() => setEmojiPack('mutant')}
                             data-active={emojiPack === 'mutant'}>
-                            <img src="/assets/images/mutant_emoji.svg" draggable={false} />
+                            <img src={mutantSVG} draggable={false} />
                         </div>
                         <h4>Mutant Remix <a href="https://mutant.revolt.chat" target="_blank">(by Revolt)</a></h4>
                     </div>
@@ -139,7 +147,7 @@ export function Component(props: Props & WithDispatcher) {
                         <div className={styles.button}
                             onClick={() => setEmojiPack('twemoji')}
                             data-active={emojiPack === 'twemoji'}>
-                            <img src="/assets/images/twemoji_emoji.svg" draggable={false} />
+                            <img src={twemojiSVG} draggable={false} />
                         </div>
                         <h4>Twemoji</h4>
                     </div>
@@ -149,7 +157,7 @@ export function Component(props: Props & WithDispatcher) {
                         <div className={styles.button}
                             onClick={() => setEmojiPack('openmoji')}
                             data-active={emojiPack === 'openmoji'}>
-                            <img src="/assets/images/openmoji_emoji.svg" draggable={false} />
+                            <img src={openmojiSVG} draggable={false} />
                         </div>
                         <h4>Openmoji</h4>
                     </div>
@@ -157,7 +165,7 @@ export function Component(props: Props & WithDispatcher) {
                         <div className={styles.button}
                             onClick={() => setEmojiPack('noto')}
                             data-active={emojiPack === 'noto'}>
-                            <img src="/assets/images/noto_emoji.svg" draggable={false} />
+                            <img src={notoSVG} draggable={false} />
                         </div>
                         <h4>Noto Emoji</h4>
                     </div>