Update client design

.erb/configs/webpack.config.base.ts

@@ -4,6 +4,7 @@
 
 import webpack from 'webpack';
 import TsconfigPathsPlugins from 'tsconfig-paths-webpack-plugin';
+import path from 'path';
 import webpackPaths from './webpack.paths';
 import { dependencies as externals } from '../../release/app/package.json';
 
@@ -47,6 +48,10 @@ const configuration: webpack.Configuration = {
     modules: [webpackPaths.srcPath, 'node_modules'],
     // There is no need to add aliases here, the paths in tsconfig get mirrored
     plugins: [new TsconfigPathsPlugins()],
+    alias: {
+      '@': path.join(__dirname, '../../src/renderer'),
+      '@/discord': path.join(__dirname, '../../src/discord'),
+    },
   },
 
   plugins: [

.vscode/settings.json

@@ -17,6 +17,11 @@
     "editor.formatOnPaste": true
   },
 
+  "[typescriptreact]": {
+    "editor.formatOnSave": true,
+    "editor.formatOnPaste": true
+  },
+
   "javascript.validate.enable": false,
   "javascript.format.enable": false,
   "typescript.format.enable": false,

src/discord/structures/Attachment.ts

@@ -0,0 +1,13 @@
+import { Snowflake } from './Snowflake';
+
+export interface Attachment {
+  content_type: string;
+  filename: string;
+  height: number;
+  id: Snowflake;
+  placeholder: string;
+  proxy_url: string;
+  size: number;
+  url: string;
+  width: number;
+}

src/discord/structures/Message.ts

@@ -1,7 +1,9 @@
+import { Attachment } from './Attachment';
 import { Snowflake } from './Snowflake';
 import { IUserData } from './user/BaseUser';
 
 export interface Message {
+  attachments: Attachment[];
   content: string;
   timestamp: string;
   id: Snowflake;

src/discord/structures/guild/BaseGuild.ts

@@ -288,7 +288,11 @@ export abstract class BaseGuild {
   }
 
   public getIconUrl(): string {
-    return '';
+    return `https://cdn.discordapp.com/icons/${this.id}/${this.icon}.png`;
+  }
+
+  public getBannerUrl(): string {
+    return `https://cdn.discordapp.com/banners/${this.id}/${this.banner}.webp?size=300`;
   }
 
   public toRaw(): IGuildData {

src/discord/structures/user/BaseUser.ts

@@ -121,17 +121,28 @@ export default class BaseUser {
       data.avatar_decoration_data ?? this.avatarDecorationData;
   }
 
-  public getAvatarUrl(): string {
+  public getAvatarUrl(animated: boolean = false): string {
     if (this.avatar === null) {
       const id = BigInt(this.id);
       // eslint-disable-next-line no-bitwise
       const index = (id >> 22n) % 6n;
       return `https://cdn.discordapp.com/embed/avatars/${index < 0 ? 0 : index}.png`;
     }
 
+    if (this.avatar.startsWith('a_') && animated)
+      return `https://cdn.discordapp.com/avatars/${this.id}/${this.avatar}.gif`;
+
     return `https://cdn.discordapp.com/avatars/${this.id}/${this.avatar}.png`;
   }
 
+  public getAvatarDecorationUrl(): string | null {
+    if (this.avatarDecorationData === null) return null;
+
+    return `https://cdn.discordapp.com/avatar-decoration-presets/${
+      this.avatarDecorationData.asset
+    }.png`;
+  }
+
   public toRaw(): IUserData {
     return {
       id: this.id,

src/main/app.ts

@@ -8,6 +8,7 @@ import { GatewayDispatchEvents, GatewaySocketEvent } from '../discord/ws/types';
 import { registerHandler, registerListener, sendToRenderer } from './ipc';
 import { CreateMessageOptions } from '../discord/structures/channel/BaseChannel';
 import { Message } from '../discord/structures/Message';
+import Tenor from './utils/tenor';
 
 export default class WaveCordApp {
   public readonly resourcesPath: string;
@@ -25,6 +26,8 @@ export default class WaveCordApp {
 
   public discord: Client;
 
+  public tenor: Tenor;
+
   public ready: boolean = false;
 
   public quitting: boolean = false;
@@ -33,6 +36,7 @@ export default class WaveCordApp {
 
   public constructor() {
     this.discord = new Client({ debug: true });
+    this.tenor = new Tenor();
 
     app.setPath('userData', path.join(app.getPath('appData'), 'WaveCord'));
 
@@ -59,12 +63,6 @@ export default class WaveCordApp {
     this.discord.on('dispatch', (event: GatewaySocketEvent) => {
       logger.info('Received event: ', event.event);
 
-      if (event.event === GatewayDispatchEvents.Ready)
-        fs.writeFileSync(
-          '/home/rohloff/Documents/discord_ready_output.txt',
-          JSON.stringify(event.data ?? {}),
-        );
-
       if (event.event === GatewayDispatchEvents.MessageCreate) {
         const message = event.data as Message;
         sendToRenderer(this.window!, 'discord:gateway:message-create', message);
@@ -111,8 +109,8 @@ export default class WaveCordApp {
     logger.info('Creating new window.');
     this.window = new BrowserWindow({
       show: false,
-      width: 1250,
-      height: 697,
+      width: 1320,
+      height: 763,
       minWidth: 450,
       minHeight: 250,
       icon: path.join(this.resourcesPath, 'icon.png'),
@@ -245,6 +243,11 @@ export default class WaveCordApp {
         return channel.createMessage(options);
       },
     );
+
+    registerHandler('tenor:fetch-gif', async (url: string) => {
+      const result = await this.tenor.fetchGif(url);
+      return result;
+    });
   }
 
   private initTray() {

src/main/ipc.ts

@@ -20,7 +20,8 @@ export type IpcChannels =
   | 'discord:set-last-visited-channel'
   | 'discord:create-message'
   | 'discord:gateway:message-create'
-  | 'discord:relationships';
+  | 'discord:relationships'
+  | 'tenor:fetch-gif';
 
 export function registerHandler(
   channel: IpcChannels,

src/main/utils/tenor.ts

@@ -0,0 +1,81 @@
+export interface TenorGifFormat {
+  type: string;
+  url: string;
+  duration: number;
+  preview: string;
+  width: number;
+  height: number;
+  size: number;
+}
+
+export interface TenorGif {
+  id: string;
+  title: string;
+  media_formats: TenorGifFormat[];
+  created: number;
+  content_description: string;
+  h1_title: string;
+  tags: string[];
+  flags: string[];
+  hasaudio: boolean;
+}
+
+export interface TenorFetchResult {
+  gif: TenorGif | null;
+}
+
+export default class Tenor {
+  public async fetchGif(url: string): Promise<TenorFetchResult> {
+    const result: TenorFetchResult = {
+      gif: null,
+    };
+
+    const uri = new URL(url);
+
+    if (uri.hostname.toLowerCase() !== 'tenor.com') return result;
+    if (!uri.pathname.toLowerCase().startsWith('/view/')) return result;
+
+    const response = await fetch(url);
+    const text = await response.text();
+
+    const raw = `{"appConfig${text.split('appConfig')[1].split('</script>')[0]}`;
+    const json = JSON.parse(raw);
+
+    // eslint-disable-next-line no-restricted-syntax
+    for (const id of Object.keys(json.gifs.byId)) {
+      const data = json.gifs.byId[id];
+
+      if (!data.loaded) continue;
+
+      const dataRes = data.results[0];
+
+      result.gif = {
+        id: dataRes.id,
+        title: dataRes.title,
+        created: dataRes.created,
+        content_description: dataRes.content_description,
+        flags: dataRes.flags,
+        h1_title: dataRes.h1_title,
+        hasaudio: dataRes.hasaudio,
+        media_formats: [],
+        tags: dataRes.tags,
+      };
+
+      // eslint-disable-next-line no-restricted-syntax
+      for (const formatType of Object.keys(dataRes.media_formats)) {
+        const formatData = dataRes.media_formats[formatType];
+        result.gif.media_formats.push({
+          type: formatType,
+          url: formatData.url,
+          duration: formatData.duration,
+          preview: formatData.preview,
+          size: formatData.size,
+          width: formatData.dims[0],
+          height: formatData.dims[1],
+        });
+      }
+    }
+
+    return result;
+  }
+}

src/renderer/App.tsx

@@ -1,36 +1,53 @@
+/* eslint-disable import/order */
 import { MemoryRouter as Router, Routes, Route } from 'react-router-dom';
 
 // Styles
-import './styles/global.css';
-import './styles/vars.css';
+import '@/styles/app/App.css';
+import '@/styles/app/TitleBar.css';
+import '@/styles/app/SideBar.css';
+import '@/styles/app/UserBar.css';
+
+import '@/styles/channel/ChannelButton.css';
+import '@/styles/channel/ChannelList.css';
+import '@/styles/channel/Message.css';
+import '@/styles/channel/MessageAttachment.css';
+
+import '@/styles/page/GuildChannelPage.css';
+import '@/styles/page/GuildPage.css';
+import '@/styles/page/PageLayout.css';
+import '@/styles/page/PageSideBar.css';
+
+import '@/styles/server/ServerBar.css';
+import '@/styles/server/Server.css';
+import '@/styles/server/ServerInfo.css';
+
+import '@/styles/user/UserPanel.css';
 
 // Components
-import Titlebar from './components/Titlebar';
-import Serverbar from './components/Serverbar';
-import Loading from './components/Loading';
+import AppContent from '@/components/app/AppContent';
+import TitleBar from '@/components/app/TitleBar';
+import UserPanel from '@/components/user/UserPanel';
+import SideBar from '@/components/app/SideBar';
 
 // Pages
-import HomePage from './pages/Home';
-import GuildPage from './pages/Guild';
-import ChannelPage from './pages/Guild/Channel';
-import DirectMessagePage from './pages/Home/DirectMessage';
+import HomePage from '@/pages/HomePage/HomePage';
+import GuildPage from '@/pages/GuildPage/GuildPage';
+import GuildChannelPage from './pages/GuildPage/GuildChannelPage';
 
 export default function App() {
   return (
     <Router>
-      <Titlebar />
-      <Loading />
-      <Serverbar />
-      <div className="app__content">
+      <TitleBar />
+      <AppContent>
+        <SideBar />
+        <UserPanel />
         <Routes>
-          <Route path="/" element={<HomePage />}>
-            <Route path="dm/:dmId" element={<DirectMessagePage />} />
-          </Route>
-          <Route path="/guild/:id" element={<GuildPage />}>
-            <Route path="channel/:channelId" element={<ChannelPage />} />
+          <Route path="/" element={<HomePage />} />
+          <Route path="/guild/:guildId" element={<GuildPage />}>
+            <Route path="channel/:channelId" element={<GuildChannelPage />} />
           </Route>
         </Routes>
-      </div>
+      </AppContent>
     </Router>
   );
 }