Inveracity · Inveracity · Jul 22, 2023 · Jul 22, 2023
diff --git a/frontend/.eslintignore b/frontend/.eslintignore
@@ -11,3 +11,6 @@ node_modules
 pnpm-lock.yaml
 package-lock.json
 yarn.lock
+
+# Proto generated files
+/src/lib/proto
diff --git a/frontend/.eslintrc.cjs b/frontend/.eslintrc.cjs
@@ -1,30 +1,30 @@
 module.exports = {
-	root: true,
-	extends: [
-		'eslint:recommended',
-		'plugin:@typescript-eslint/recommended',
-		'plugin:svelte/recommended',
-		'prettier'
-	],
-	parser: '@typescript-eslint/parser',
-	plugins: ['@typescript-eslint'],
-	parserOptions: {
-		sourceType: 'module',
-		ecmaVersion: 2020,
-		extraFileExtensions: ['.svelte']
-	},
-	env: {
-		browser: true,
-		es2017: true,
-		node: true
-	},
-	overrides: [
-		{
-			files: ['*.svelte'],
-			parser: 'svelte-eslint-parser',
-			parserOptions: {
-				parser: '@typescript-eslint/parser'
-			}
-		}
-	]
+  root: true,
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:svelte/recommended',
+    'plugin:svelte/prettier'
+  ],
+  parser: '@typescript-eslint/parser',
+  plugins: ['@typescript-eslint'],
+  parserOptions: {
+    sourceType: 'module',
+    ecmaVersion: 2020,
+    extraFileExtensions: ['.svelte']
+  },
+  env: {
+    browser: true,
+    es2017: true,
+    node: true
+  },
+  overrides: [
+    {
+      files: ['*.svelte'],
+      parser: 'svelte-eslint-parser',
+      parserOptions: {
+        parser: '@typescript-eslint/parser'
+      }
+    }
+  ]
 };
diff --git a/frontend/.prettierignore b/frontend/.prettierignore
@@ -11,3 +11,5 @@ node_modules
 pnpm-lock.yaml
 package-lock.json
 yarn.lock
+
+/src/lib/proto
diff --git a/frontend/.prettierrc b/frontend/.prettierrc
@@ -1,9 +1,8 @@
 {
-	"useTabs": true,
-	"singleQuote": true,
-	"trailingComma": "none",
-	"printWidth": 100,
-	"plugins": ["prettier-plugin-svelte"],
-	"pluginSearchDirs": ["."],
-	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
+  "useTabs": false,
+  "singleQuote": true,
+  "trailingComma": "none",
+  "printWidth": 120,
+  "plugins": ["prettier-plugin-svelte"],
+  "overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
 }
diff --git a/frontend/package.json b/frontend/package.json
@@ -8,8 +8,8 @@
     "preview": "vite preview",
     "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
     "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
-    "lint": "prettier --plugin-search-dir . --check . && eslint .",
-    "format": "prettier --plugin-search-dir . --write ."
+    "lint": "prettier --check . && eslint .",
+    "format": "prettier --write ."
   },
   "devDependencies": {
     "@sveltejs/kit": "^1.22.3",

diff --git a/frontend/postcss.config.cjs b/frontend/postcss.config.cjs
@@ -1,3 +1,3 @@
 module.exports = {
-  plugins: [require('tailwindcss'), require('autoprefixer')],
+  plugins: [require('tailwindcss'), require('autoprefixer')]
 };
diff --git a/frontend/src/app.d.ts b/frontend/src/app.d.ts
@@ -9,4 +9,4 @@ declare global {
   }
 }
 
-export { };
+export {};
diff --git a/frontend/src/app.html b/frontend/src/app.html
@@ -1,15 +1,13 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%sveltekit.assets%/favicon.png" />
+    <meta name="viewport" content="width=device-width" />
+    %sveltekit.head%
+  </head>
 
-<head>
-  <meta charset="utf-8" />
-  <link rel="icon" href="%sveltekit.assets%/favicon.png" />
-  <meta name="viewport" content="width=device-width" />
-  %sveltekit.head%
-</head>
-
-<body data-sveltekit-preload-data="hover">
-  <div style="display: contents">%sveltekit.body%</div>
-</body>
-
+  <body data-sveltekit-preload-data="hover">
+    <div style="display: contents">%sveltekit.body%</div>
+  </body>
 </html>
diff --git a/frontend/src/components/Channels.svelte b/frontend/src/components/Channels.svelte
@@ -1,66 +1,64 @@
 <script lang="ts">
-	import { SendMessage } from '$lib/grpc';
-	import { pb, writeChannel } from '$lib/pocketbase';
-	import { channel, channels } from '$lib/stores/channel';
+  import { SendMessage } from '$lib/grpc';
+  import { pb, writeChannel } from '$lib/pocketbase';
+  import { channel, channels } from '$lib/stores/channel';
 
-	let newChannelActive = false;
-	let newChannelName = '';
+  let newChannelActive = false;
+  let newChannelName = '';
 
-	const selectChannel = (e: any, channelName: string) => {
-		e.preventDefault();
-		channel.set(channelName);
-	};
+  const selectChannel = (channelName: string) => {
+    channel.set(channelName);
+  };
 
-	const newChannelActivate = (e: any) => {
-		if ($channels.length >= 10) {
-			return;
-		}
-		e.preventDefault();
-		newChannelActive = true;
-	};
+  const newChannelActivate = () => {
+    if ($channels.length >= 10) {
+      return;
+    }
+    newChannelActive = true;
+  };
 
-	const addChannel = (name: string) => {
-		channels.add(name);
-		writeChannel(name);
-		SendMessage({
-			channelId: 'system',
-			text: `channel_add ${name}`,
-			userId: pb.authStore.model?.name || ''
-		});
-		newChannelActive = false;
-		newChannelName = '';
-	};
+  const addChannel = (name: string) => {
+    channels.add(name);
+    writeChannel(name);
+    SendMessage({
+      channelId: 'system',
+      text: `channel_add ${name}`,
+      userId: pb.authStore.model?.name || ''
+    });
+    newChannelActive = false;
+    newChannelName = '';
+  };
 </script>
 
 <div class="flex w-40 bg-neutral-focus overflow-auto">
-	<div class="flex flex-col w-full">
-		{#each $channels as chan}
-			<button
-				class="btn m-2 {chan === $channel ? 'btn-accent' : 'btn-accent btn-outline'}"
-				on:click={(e) => selectChannel(e, chan)}
-			>
-				<p>{chan}</p>
-			</button>
-		{/each}
-		{#if newChannelActive}
-			<div class="m-1">
-				<form class="form-control" on:submit|preventDefault={(_) => addChannel(newChannelName)}>
-					<!-- svelte-ignore a11y-autofocus -->
-					<input
-						autofocus={true}
-						class="input input-bordered input-md max-w-sm input-accent w-full"
-						type="text"
-						placeholder="new channel"
-						maxlength="12"
-						bind:value={newChannelName}
-						on:focusout={() => (newChannelActive = false)}
-					/>
-				</form>
-			</div>
-		{:else}
-			<button class="btn btn-ghost" on:click={newChannelActivate}>
-				<p>+</p>
-			</button>
-		{/if}
-	</div>
+  <div class="flex flex-col w-full">
+    {#each $channels as chan}
+      <button
+        class="btn m-2 {chan === $channel ? 'btn-accent' : 'btn-accent btn-outline'}"
+        on:click|preventDefault={() => selectChannel(chan)}
+      >
+        <p>{chan}</p>
+      </button>
+    {/each}
+    {#if newChannelActive}
+      <div class="m-1">
+        <form class="form-control" on:submit|preventDefault={() => addChannel(newChannelName)}>
+          <!-- svelte-ignore a11y-autofocus -->
+          <input
+            autofocus={true}
+            class="input input-bordered input-md max-w-sm input-accent w-full"
+            type="text"
+            placeholder="new channel"
+            maxlength="12"
+            bind:value={newChannelName}
+            on:focusout={() => (newChannelActive = false)}
+          />
+        </form>
+      </div>
+    {:else}
+      <button class="btn btn-ghost" on:click|preventDefault={newChannelActivate}>
+        <p>+</p>
+      </button>
+    {/if}
+  </div>
 </div>
diff --git a/frontend/src/components/Input.svelte b/frontend/src/components/Input.svelte
@@ -1,41 +1,40 @@
 <script lang="ts">
-	import { channel } from '$lib/stores/channel';
-	import { status } from '$lib/stores/status';
-	import { currentUser, pb } from '$lib/pocketbase';
-	import { SendMessage } from '$lib/grpc';
-	import type { OutgoingMessage } from '$lib/types';
+  import { channel } from '$lib/stores/channel';
+  import { status } from '$lib/stores/status';
+  import { currentUser } from '$lib/pocketbase';
+  import { SendMessage } from '$lib/grpc';
+  import type { OutgoingMessage } from '$lib/types';
 
-	let message = '';
+  let message = '';
 
-	const onKeyPress = (e: any) => {
-		if (e.charCode === 13 && !e.shiftKey) {
-			e.preventDefault();
-			let msg: OutgoingMessage = {
-				channelId: $channel,
-				userId: $currentUser?.username,
-				text: message,
-				jwt: pb.authStore.token
-			};
-			SendMessage(msg);
-			message = '';
-		}
-	};
+  const onKeyPress = (e: KeyboardEvent) => {
+    if (e.code === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      let msg: OutgoingMessage = {
+        channelId: $channel,
+        userId: $currentUser?.username,
+        text: message
+      };
+      SendMessage(msg);
+      message = '';
+    }
+  };
 </script>
 
 <div class="w-full">
-	<div class="m-2">
-		<textarea
-			class="textarea textarea-secondary w-full h-12"
-			placeholder={$status === 'connected' ? 'Message' : '⛔'}
-			bind:value={message}
-			on:keypress={onKeyPress}
-			disabled={$status !== 'connected'}
-		/>
-	</div>
+  <div class="m-2">
+    <textarea
+      class="textarea textarea-secondary w-full h-12"
+      placeholder={$status === 'connected' ? 'Message' : '⛔'}
+      bind:value={message}
+      on:keypress={onKeyPress}
+      disabled={$status !== 'connected'}
+    />
+  </div>
 </div>
 
 <style>
-	::-webkit-resizer {
-		display: none; /* remove the resize handle on the bottom right */
-	}
+  ::-webkit-resizer {
+    display: none; /* remove the resize handle on the bottom right */
+  }
 </style>