brutalism design

2026-05-14 01:05:01 +06:00
parent 6a2111092b
commit edef0a70d2
42 changed files with 1114 additions and 316 deletions
--- a/new-client/src/app/Error.vue
+++ b/new-client/src/app/Error.vue
@@ -24,12 +24,19 @@ defineProps<{

  &__image {
    width: 120px;
-    margin-bottom: 32px;
+    margin-bottom: var(--space-6);
    user-select: none;
+    opacity: 0.9;
  }

  &__message {
-    color: var(--text-muted);
+    @include font-body-bold;
+
+    padding: var(--space-2) var(--space-3);
+    background-color: var(--paper);
+    outline: var(--border-w) solid var(--ink);
+    outline-offset: calc(var(--border-w) * -1);
+    box-shadow: var(--shadow);
  }
 }
 </style>
--- a/new-client/src/app/Preloader.vue
+++ b/new-client/src/app/Preloader.vue
@@ -16,10 +16,14 @@
  height: 100%;

  > p {
+    @include font-body-bold;
+
    margin: auto;
-    padding: 8px 16px;
-    border-radius: 16px;
-    background-color: var(--bg-light);
+    padding: var(--space-2) var(--space-3);
+    background-color: var(--paper);
+    outline: var(--border-w) solid var(--ink);
+    outline-offset: calc(var(--border-w) * -1);
+    box-shadow: var(--shadow);
  }
 }
 </style>
--- a/new-client/src/app/Updater.vue
+++ b/new-client/src/app/Updater.vue
@@ -21,10 +21,14 @@ const { checking, lastUpdate } = useUpdater()
  height: 100%;

  > p {
+    @include font-body-bold;
+
    margin: auto;
-    padding: 8px 16px;
-    border-radius: 16px;
-    background-color: var(--bg-light);
+    padding: var(--space-2) var(--space-3);
+    background-color: var(--paper);
+    outline: var(--border-w) solid var(--ink);
+    outline-offset: calc(var(--border-w) * -1);
+    box-shadow: var(--shadow);
  }
 }
 </style>
--- a/new-client/src/app/bootstrap/app.ts
+++ b/new-client/src/app/bootstrap/app.ts
@@ -2,6 +2,7 @@ import { useAuth } from '@shared/composables/use-auth'
 import { createApp } from 'vue'
 import App from '../App.vue'
 import routerPlugin, { router } from '../plugins/router'
+import tanstackQueryPlugin from '../plugins/tanstack-query'

 const mountPoint = '#app'

@@ -14,8 +15,14 @@ export default async function () {
  await router.isReady()

  if (!authorized.value && router.currentRoute.value.meta.auth === undefined) {
-    router.push('/auth/login')
+    await router.push({ name: '/auth/login', replace: true })
  }

+  if (authorized.value && router.currentRoute.value.meta.auth === 'guest') {
+    await router.push({ name: '/', replace: true })
+  }
+
+  app.use(tanstackQueryPlugin)
+
  app.mount(mountPoint)
 }
--- a/new-client/src/app/entry.ts
+++ b/new-client/src/app/entry.ts
@@ -13,16 +13,16 @@ import checkUpdates from './bootstrap/updater'

    await authorize()

-    initializeApp()
+    await initializeApp()
  }
  catch (error) {
    console.error(error)

    if (error instanceof Error && error.message) {
-      showError(error.message)
+      await showError(error.message)
    }
    else {
-      showError('Something went wrong')
+      await showError('Something went wrong')
    }
  }
  finally {
--- a/new-client/src/app/plugins/router.ts
+++ b/new-client/src/app/plugins/router.ts
@@ -1,4 +1,5 @@
 import type { Component, FunctionPlugin } from 'vue'
+import { useAuth } from '@shared/composables/use-auth'
 import { createRouter, createWebHistory } from 'vue-router'
 import { routes } from 'vue-router/auto-routes'

@@ -13,6 +14,23 @@ export const router = createRouter({
  history: createWebHistory(),
  routes,
 })
+router.onError((e) => {
+  console.log('wtf', e)
+})
+
+router.isReady().then(() => {
+  router.beforeEach((to) => {
+    const { authorized } = useAuth()
+
+    if (authorized.value && to.meta.auth === 'guest') {
+      return { name: '/', replace: true }
+    }
+
+    if (!authorized.value && to.meta.auth === undefined) {
+      return { name: '/auth/login', replace: true }
+    }
+  })
+})

 export default {
  install(app) {
--- a/new-client/src/app/plugins/tanstack-query.ts
+++ b/new-client/src/app/plugins/tanstack-query.ts
@@ -0,0 +1,8 @@
+import type { FunctionPlugin } from 'vue'
+import { VueQueryPlugin } from '@tanstack/vue-query'
+
+export default {
+  install(app) {
+    app.use(VueQueryPlugin, {})
+  },
+} as FunctionPlugin
--- a/new-client/src/pages/auth.vue
+++ b/new-client/src/pages/auth.vue
@@ -10,5 +10,6 @@ definePage({
    auth: 'guest',
    layout: AuthLayout,
  },
+  // redirect: '/auth/login',
 })
 </script>
--- a/new-client/src/pages/auth/login.vue
+++ b/new-client/src/pages/auth/login.vue
@@ -1,35 +1,71 @@
 <template>
-  <div class="login-page">
-    <form class="login-page__form" @submit.prevent="">
-      <div class="login-page__fields">
-        <ChadInput placeholder="Login" error="Jopa" />
-        <ChadInput placeholder="Password" />
-        <ChadPasswordInput placeholder="Password" label="Test" />
-      </div>
+  <ChadCard class="login-page" as="form" title="Sign In" @submit.prevent="submit">
+    <div class="login-page__fields">
+      <ChadInput v-model="formData.username" label="Username" />
+      <ChadPasswordInput v-model="formData.password" label="Password" />
+    </div>

-      <ChadButton class="login-page__submit" full type="submit">
+    <template #actions>
+      <ChadButton full type="submit" :disabled="!valid" :loading="submitting">
        Let's go
      </ChadButton>
-    </form>
-  </div>
+    </template>
+
+    <template #bottom>
+      Don't have an account?
+
+      <RouterLink :to="{ name: '/auth/register' }">
+        Register
+      </RouterLink>
+    </template>
+  </ChadCard>
 </template>

 <script setup lang="ts">
 import ChadButton from '@shared/components/ui/Button.vue'
+import ChadCard from '@shared/components/ui/Card.vue'
 import ChadInput from '@shared/components/ui/Input.vue'
 import ChadPasswordInput from '@shared/components/ui/PasswordInput.vue'
+import { useAuth } from '@shared/composables/use-auth.ts'
+import { computed, reactive, ref } from 'vue'
+
+const { login } = useAuth()
+
+const submitting = ref(false)
+
+const formData = reactive({
+  username: '',
+  password: '',
+})
+
+const valid = computed(() => {
+  if (!formData.username)
+    return false
+
+  if (!formData.password)
+    return false
+
+  return true
+})
+
+async function submit() {
+  if (!valid.value || submitting.value)
+    return
+
+  submitting.value = true
+
+  await login(formData.username, formData.password)
+
+  submitting.value = false
+}
 </script>

 <style lang="scss">
 .login-page {
  &__fields {
    > *:not(:last-child) {
-      margin-bottom: 16px;
+      margin-bottom: var(--space-4);
    }
  }
-
-  &__submit {
-    margin-top: 24px;
-  }
 }
 </style>
--- a/new-client/src/pages/auth/register.vue
+++ b/new-client/src/pages/auth/register.vue
@@ -1,6 +1,76 @@
 <template>
-  Register page
+  <ChadCard class="register-page" as="form" title="Register" @submit.prevent="submit">
+    <div class="register-page__fields">
+      <ChadInput v-model="formData.username" label="Username" />
+      <ChadPasswordInput v-model="formData.password" label="Password" />
+      <ChadPasswordInput v-model="formData.repeatPassword" label="Repeat password" />
+    </div>
+
+    <template #actions>
+      <ChadButton full type="submit" :disabled="!valid" :loading="submitting">
+        Create an account
+      </ChadButton>
+    </template>
+
+    <template #bottom>
+      Already have an account?
+
+      <RouterLink :to="{ name: '/auth/login' }">
+        Sign In
+      </RouterLink>
+    </template>
+  </ChadCard>
 </template>

 <script setup lang="ts">
+import ChadButton from '@shared/components/ui/Button.vue'
+import ChadCard from '@shared/components/ui/Card.vue'
+import ChadInput from '@shared/components/ui/Input.vue'
+import ChadPasswordInput from '@shared/components/ui/PasswordInput.vue'
+import { useAuth } from '@shared/composables/use-auth.ts'
+import { computed, reactive, ref } from 'vue'
+
+const { login } = useAuth()
+
+const submitting = ref(false)
+
+const formData = reactive({
+  username: '',
+  password: '',
+  repeatPassword: '',
+})
+
+const valid = computed(() => {
+  if (!formData.username)
+    return false
+
+  if (!formData.password)
+    return false
+
+  if (formData.password !== formData.repeatPassword)
+    return false
+
+  return true
+})
+
+async function submit() {
+  if (!valid.value || submitting.value)
+    return
+
+  submitting.value = true
+
+  await login(formData.username, formData.password)
+
+  submitting.value = false
+}
 </script>
+
+<style lang="scss">
+.register-page {
+  &__fields {
+    > *:not(:last-child) {
+      margin-bottom: var(--space-4);
+    }
+  }
+}
+</style>
--- a/new-client/src/pages/index.vue
+++ b/new-client/src/pages/index.vue
@@ -1,5 +1,7 @@
 <template>
-  Index page
+  <Chat />
 </template>

-<script setup lang="ts"></script>
+<script setup lang="ts">
+import Chat from '@widgets/chat/ui/Chat.vue'
+</script>
--- a/new-client/src/shared/api/generated-chad-api.ts
+++ b/new-client/src/shared/api/generated-chad-api.ts
@@ -232,7 +232,7 @@ export class HttpClient<SecurityDataType = unknown> {
    fetch(...fetchParams);

  private baseApiParams: RequestParams = {
-    credentials: "same-origin",
+    credentials: "include",
    headers: {},
    redirect: "follow",
    referrerPolicy: "no-referrer",
--- a/new-client/src/shared/components/AppLogo.vue
+++ b/new-client/src/shared/components/AppLogo.vue
@@ -17,15 +17,21 @@ const { version } = useApp()

 <style lang="scss">
 .app-logo {
+  background-color: var(--ink);
+  padding: var(--space-2);
+  text-align: center;
+
  &__title {
-    color: var(--primary);
-    font-weight: 700;
-    line-height: 20px;
+    @include font-display-22;
+
+    color: var(--yellow);
  }

  &__version {
-    font-size: 0.75rem;
-    color: var(--text-muted);
+    @include font-micro;
+
+    color: var(--grey-3);
+    margin-top: var(--space-1);
  }
 }
 </style>
--- a/new-client/src/shared/components/ui/Avatar.vue
+++ b/new-client/src/shared/components/ui/Avatar.vue
@@ -0,0 +1,50 @@
+<template>
+  <div class="chad-avatar" v-bind="api.getRootProps()">
+    <span class="chad-avatar__fallback" v-bind="api.getFallbackProps()">{{ fallback }}</span>
+    <img class="chad-avatar__image" :alt="fallback" :src="src" v-bind="api.getImageProps()">
+  </div>
+</template>
+
+<script setup lang="ts">
+import * as avatar from '@zag-js/avatar'
+import { normalizeProps, useMachine } from '@zag-js/vue'
+import { computed, useId } from 'vue'
+
+defineOptions({
+  name: 'ChadAvatar',
+})
+
+defineProps<{
+  src: string
+  fallback: string
+  size?: 'sm'
+}>()
+
+const service = useMachine(avatar.machine, { id: useId() })
+
+const api = computed(() => avatar.connect(service, normalizeProps))
+</script>
+
+<style lang="scss">
+.chad-avatar {
+  outline: var(--border-w) solid var(--ink);
+  outline-offset: calc(var(--border-w) * -1);
+  width: 40px;
+  aspect-ratio: 1;
+
+  &__fallback {
+    @include font-label;
+
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  &__image {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+}
+</style>
--- a/new-client/src/shared/components/ui/Button.vue
+++ b/new-client/src/shared/components/ui/Button.vue
@@ -2,6 +2,7 @@
  <button
    class="chad-button"
    :data-loading="loading || undefined"
+    :data-disabled="disabled || undefined"
    :disabled="disabled"
    :type="type"
    :data-full="full || undefined"
@@ -32,28 +33,43 @@ interface Props {

 <style lang="scss">
 .chad-button {
+  @include font-display-14;
+
  border: none;
-  color: var(--bg-dark);
-  border-radius: 12px;
-  padding-inline: 12px;
+  color: var(--ink);
+  padding-inline: var(--space-3);
  height: 44px;
-  background-color: var(--primary);
+  background-color: var(--yellow);
  font-weight: 700;
  text-align: center;
  cursor: pointer;
-  transition-property: color, background-color;
-  transition-duration: 150ms;
-  transition-timing-function: ease-out;
-  outline: none;
+  outline: var(--border-w) solid var(--ink);
+  outline-offset: calc(var(--border-w) * -1);

  &[data-full] {
    width: 100%;
  }

  &:hover,
-  &:focus,
+  &:focus {
+    background-color: var(--yellow-deep);
+  }
+
  &:active {
-    background-color: var(--secondary);
+    background-color: var(--ink);
+    color: var(--yellow);
+  }
+
+  &[data-disabled],
+  &[data-loading],
+  &:disabled {
+    cursor: not-allowed;
+    background-color: var(--grey-1);
+    color: var(--grey-3);
+  }
+
+  &[data-loading] {
+    cursor: wait;
  }
 }
 </style>
--- a/new-client/src/shared/components/ui/Card.vue
+++ b/new-client/src/shared/components/ui/Card.vue
@@ -0,0 +1,68 @@
+<template>
+  <Component :is="as" class="chad-card">
+    <p v-if="title" class="chad-card__title">
+      {{ title }}
+    </p>
+
+    <div class="chad-card__content">
+      <slot />
+    </div>
+
+    <div v-if="!!slots.actions" class="chad-card__actions">
+      <slot name="actions" />
+    </div>
+
+    <div v-if="!!slots.bottom" class="chad-card__bottom">
+      <slot name="bottom" />
+    </div>
+  </Component>
+</template>
+
+<script setup lang="ts">
+defineOptions({
+  name: 'ChadCard',
+})
+
+withDefaults(
+  defineProps<Props>(),
+  {
+    as: 'div',
+  },
+)
+
+const slots = defineSlots<{
+  default: []
+  actions: []
+  bottom: []
+}>()
+
+interface Props {
+  as?: string
+  title?: string
+}
+</script>
+
+<style lang="scss">
+.chad-card {
+  display: block;
+  background-color: var(--paper);
+  padding: var(--space-6);
+  outline: var(--border-w) solid var(--ink);
+  outline-offset: calc(var(--border-w) * -1);
+  box-shadow: var(--shadow);
+
+  &__title {
+    @include font-display-22;
+
+    margin-bottom: var(--space-6);
+  }
+
+  &__actions {
+    margin-top: var(--space-6);
+  }
+
+  &__bottom {
+    margin-top: var(--space-4);
+  }
+}
+</style>
--- a/new-client/src/shared/components/ui/Input.vue
+++ b/new-client/src/shared/components/ui/Input.vue
@@ -1,40 +1,47 @@
 <template>
-  <FieldRoot class="chad-input" :invalid="!!error">
-    <FieldLabel v-if="label" class="chad-input__label">
+  <div
+    class="chad-input"
+    :class="{
+      'is-invalid': !!error,
+    }"
+  >
+    <label v-if="label" :for="inputId" class="chad-input__label">
      {{ label }}
-    </FieldLabel>
+    </label>

-    <div class="chad-input__control">
-      <FieldInput v-model="modelValue" class="chad-input__input" :placeholder="placeholder" type="text" />
-    </div>
+    <input :id="inputId" v-model="modelValue" class="chad-input__input" :placeholder="placeholder" type="text">

-    <FieldHelperText v-if="helper" class="chad-input__helper">
+    <p v-if="helper" class="chad-input__helper">
      {{ helper }}
-    </FieldHelperText>
-    <FieldErrorText v-if="error" class="chad-input__error">
+    </p>
+    <p v-if="error" class="chad-input__error">
      {{ error }}
-    </FieldErrorText>
-  </FieldRoot>
+    </p>
+  </div>
 </template>

 <script setup lang="ts">
-import type { FieldInputProps, FieldRootProps } from '@ark-ui/vue/field'
-import { FieldErrorText, FieldHelperText, FieldInput, FieldLabel, FieldRoot } from '@ark-ui/vue/field'
+import { computed, useId } from 'vue'

-defineOptions({
-  name: 'ChadInput',
-})
-
-defineProps<Props>()
-
-const modelValue = defineModel<FieldInputProps['modelValue']>('modelValue')
-
-interface Props extends Omit<FieldRootProps, 'ids' | 'invalid'> {
+interface Props {
+  id?: string
  label?: string
  placeholder?: string
  helper?: string
  error?: string
 }
+
+defineOptions({
+  name: 'ChadInput',
+})
+
+const props = defineProps<Props>()
+
+const modelValue = defineModel<string>('modelValue')
+
+const inputId = computed(() => {
+  return props.id ?? `input-${useId()}`
+})
 </script>

 <style lang="scss">
@@ -42,47 +49,30 @@ interface Props extends Omit<FieldRootProps, 'ids' | 'invalid'> {
  $self: &;

  &__label {
+    @include font-label;
+
    display: block;
-    color: var(--text-muted);
-    margin-bottom: 6px;
-    font-size: 0.75rem;
-  }
-
-  &__control {
-    border-radius: 12px;
-    padding-inline: 12px;
-    height: 44px;
-    background-color: var(--bg-light);
-    border: none;
-    outline: 1px solid var(--border);
-    outline-offset: -1px;
-    font-size: 1rem;
-    transition-property: background-color, outline-color;
-    transition-duration: 150ms;
-    transition-timing-function: ease-out;
-
-    &:hover,
-    &:focus-within {
-      outline-color: var(--primary);
-    }
-
-    #{$self}[data-invalid] & {
-      outline-color: var(--danger);
-    }
+    color: var(--grey-3);
+    margin-bottom: var(--space-2);
  }

  &__input {
+    padding-inline: var(--space-3);
+    height: 44px;
+    background-color: var(--paper);
+    outline: var(--border-w) solid var(--ink);
+    outline-offset: calc(var(--border-w) * -1);
    width: 100%;
-    height: 100%;
-    background: none;
    border: none;
-    outline: none;
-    color: var(--text);
-    caret-color: var(--secondary);
+    color: var(--ink);
+    caret-color: var(--yellow);
+    caret-shape: block;

    &::placeholder {
-      color: var(--text-muted);
+      font: inherit;
+      color: var(--grey-3);
      opacity: 0.4;
+      font-style: italic;
    }

    &:-webkit-autofill,
@@ -94,21 +84,26 @@ interface Props extends Omit<FieldRootProps, 'ids' | 'invalid'> {
      box-shadow: 0 0 0px 1000px var(--bg) inset;
      background-color: var(--bg);
    }
+
+    #{$self}.is-invalid & {
+      outline-color: var(--red);
+    }
  }

  &__helper,
  &__error {
+    @include font-micro;
+
    display: block;
-    font-size: 0.75rem;
-    margin-top: 6px;
+    margin-top: var(--space-1);
  }

  &__helper {
-    color: var(--text-muted);
+    color: var(--grey-3);
  }

  &__error {
-    color: var(--danger);
+    color: var(--red);
  }
 }
 </style>
--- a/new-client/src/shared/components/ui/PasswordInput.vue
+++ b/new-client/src/shared/components/ui/PasswordInput.vue
@@ -1,126 +1,131 @@
 <template>
-  <FieldRoot class="chad-password-input" :invalid="!!error">
-    <FieldLabel v-if="label" class="chad-password-input__label">
+  <div class="chad-password-input" v-bind="api.getRootProps()">
+    <label v-if="label" class="chad-password-input__label" v-bind="api.getLabelProps()">
      {{ label }}
-    </FieldLabel>
+    </label>

-    <PasswordInputRoot>
-      <PasswordInputControl class="chad-password-input__control">
-        <PasswordInputInput v-model="modelValue" class="chad-password-input__input" :placeholder="placeholder" />
-        <PasswordInputVisibilityTrigger class="chad-password-input__visibility-trigger">
-          <PasswordInputIndicator>
-            Z
-            <template #fallback>
-              X
-            </template>
-          </PasswordInputIndicator>
-        </PasswordInputVisibilityTrigger>
-      </PasswordInputControl>
-    </PasswordInputRoot>
+    <div class="chad-password-input__control" v-bind="api.getControlProps()">
+      <input v-bind="api.getInputProps()" v-model="modelValue" class="chad-password-input__input">

-    <FieldHelperText v-if="helper" class="chad-password-input__helper">
-      {{ helper }}
-    </FieldHelperText>
-    <FieldErrorText v-if="error" class="chad-password-input__error">
-      {{ error }}
-    </FieldErrorText>
-  </FieldRoot>
+      <button class="chad-password-input__visibility-trigger" v-bind="api.getVisibilityTriggerProps()">
+        <Component :is="api.visible ? EyeIcon : EyeOffIcon " v-bind="api.getIndicatorProps()" />
+      </button>
+    </div>
+  </div>
 </template>

 <script setup lang="ts">
-import type { FieldInputProps, FieldRootProps } from '@ark-ui/vue/field'
-import { FieldErrorText, FieldHelperText, FieldLabel, FieldRoot } from '@ark-ui/vue/field'
-import { PasswordInputControl, PasswordInputIndicator, PasswordInputInput, PasswordInputRoot, PasswordInputVisibilityTrigger } from '@ark-ui/vue/password-input'
+import { EyeIcon, EyeOffIcon } from '@lucide/vue'
+import * as passwordInput from '@zag-js/password-input'
+import { normalizeProps, useMachine } from '@zag-js/vue'
+import { computed, useId } from 'vue'

-defineOptions({
-  name: 'ChadPasswordInput',
-})
-
-defineProps<Props>()
-
-const modelValue = defineModel<FieldInputProps['modelValue']>('modelValue')
-
-interface Props extends Omit<FieldRootProps, 'ids' | 'invalid'> {
+interface Props {
+  id?: string
  label?: string
  placeholder?: string
  helper?: string
  error?: string
 }
+
+defineOptions({
+  name: 'ChadPasswordInput',
+})
+
+const props = defineProps<Props>()
+
+const modelValue = defineModel<string>('modelValue')
+
+const inputId = computed(() => {
+  return props.id ?? `input-${useId()}`
+})
+
+const service = useMachine(passwordInput.machine, computed(() => {
+  return {
+    id: inputId.value,
+    ignorePasswordManagers: true,
+    autoComplete: undefined,
+  }
+}))
+
+const api = computed(() => passwordInput.connect(service, normalizeProps))
 </script>

 <style lang="scss">
 .chad-password-input {
+  $self: &;
+
  &__label {
+    @include font-label;
+
    display: block;
-    color: var(--text-muted);
-    margin-bottom: 6px;
-    font-size: 0.75rem;
+    color: var(--grey-3);
+    margin-bottom: var(--space-2);
  }

  &__control {
-    position: relative;
-    border-radius: 12px;
-    padding-inline: 12px;
+    display: flex;
+    align-items: center;
    height: 44px;
-    width: 100%;
-    background-color: var(--bg-light);
-    border: none;
-    outline: 1px solid var(--border);
-    outline-offset: -1px;
-    color: var(--text);
-    caret-color: var(--secondary);
-    font-size: 1rem;
-
-    &:hover,
-    &:focus {
-      outline-color: var(--primary);
-    }
-
-    &::placeholder {
-      color: var(--text-muted);
-      opacity: 0.4;
-    }
-
-    &[data-invalid] {
-      outline-color: var(--danger);
-    }
-
-    &:-webkit-autofill,
-    &:-webkit-autofill:enabled,
-    &:-webkit-autofill:hover,
-    &:-webkit-autofill:focus {
-      -webkit-text-fill-color: var(--text);
-      -webkit-box-shadow: 0 0 0px 1000px var(--bg) inset;
-      box-shadow: 0 0 0px 1000px var(--bg) inset;
-      background-color: var(--bg);
-    }
  }

  &__input {
+    flex: 1;
+    padding-inline: var(--space-3);
+    background-color: var(--paper);
+    outline: var(--border-w) solid var(--ink);
+    outline-offset: calc(var(--border-w) * -1);
    width: 100%;
    height: 100%;
-    background: none;
    border: none;
-    outline: none;
+    color: var(--ink);
+    caret-color: var(--yellow);
+    caret-shape: block;
+
+    &::placeholder {
+      font: inherit;
+      color: var(--grey-3);
+      opacity: 0.4;
+      font-style: italic;
+    }
+
+    &[data-state='invalid'] {
+      outline-color: var(--red);
+    }
  }

  &__visibility-trigger {
-    position: absolute;
+    flex-shrink: 0;
+    background-color: var(--grey-1);
+    border: var(--border-w) solid var(--ink);
+    aspect-ratio: 1;
+    border-left: 0;
+    height: 100%;
+
+    &:hover,
+    &:focus {
+      background-color: var(--grey-2);
+    }
+
+    &:active {
+      background-color: var(--grey-3);
+    }
  }

  &__helper,
  &__error {
+    @include font-micro;
+
    display: block;
-    font-size: 0.75rem;
-    margin-top: 6px;
+    margin-top: var(--space-1);
  }

  &__helper {
-    color: var(--text-muted);
+    color: var(--grey-3);
  }

  &__error {
-    color: var(--danger);
+    color: var(--red);
  }
 }
 </style>
--- a/new-client/src/shared/composables/use-auth.ts
+++ b/new-client/src/shared/composables/use-auth.ts
@@ -1,4 +1,5 @@
 import type { User } from '../api/generated-chad-api'
+import { router } from '@app/plugins/router'
 import { createGlobalState } from '@vueuse/core'
 import { computed, readonly, shallowRef } from 'vue'
 import api from '../api/client'
@@ -20,6 +21,8 @@ export const useAuth = createGlobalState(() => {
      })

      setMe(response.data)
+
+      await router.push({ name: '/', replace: true })
    }
    catch {
      setMe(undefined)
@@ -34,6 +37,8 @@ export const useAuth = createGlobalState(() => {
      })

      setMe(response.data)
+
+      await router.push({ name: '/', replace: true })
    }
    catch {}
  }
@@ -43,6 +48,8 @@ export const useAuth = createGlobalState(() => {
      await api.chad.authLogout()

      setMe(undefined)
+
+      await router.push({ name: '/auth/login' })
    }
    catch {}
  }
--- a/new-client/src/shared/composables/use-event-bus.ts
+++ b/new-client/src/shared/composables/use-event-bus.ts
@@ -0,0 +1,43 @@
+import type { EventType } from 'mitt'
+import mitt from 'mitt'
+
+export interface AppEvents extends Record<EventType, unknown> {
+  // 'socket:connected': void
+  // 'socket:disconnected': void
+  // 'socket:authenticated': { socketId: string }
+  //
+  // 'client:added': ChadClient
+  // 'client:removed': ChadClient
+  // 'client:updated': { socketId: string, oldClient: ChadClient, updatedClient: Partial<ChadClient> }
+  //
+  // 'consumer:added': Consumer
+  // 'consumer:removed': Consumer
+  // 'consumer:paused': Consumer
+  // 'consumer:resumed': Consumer
+  //
+  // 'producer:added': Producer
+  // 'producer:removed': Producer
+  // 'producer:paused': Producer
+  // 'producer:resumed': Producer
+
+  'audio:muted': void
+  'audio:unmuted': void
+  'output:muted': void
+  'output:unmuted': void
+  'video:enabled': void
+  'video:disabled': void
+  'share:enabled': void
+  'share:disabled': void
+
+  'chat:new-message': void
+}
+
+const emitter = mitt<AppEvents>()
+
+export function useEventBus() {
+  return {
+    emit: emitter.emit,
+    on: emitter.on,
+    off: emitter.off,
+  }
+}
--- a/new-client/src/shared/composables/use-signaling.ts
+++ b/new-client/src/shared/composables/use-signaling.ts
@@ -0,0 +1,87 @@
+import type { Socket } from 'socket.io-client'
+import { createSharedComposable } from '@vueuse/core'
+import { io } from 'socket.io-client'
+import { parseURL } from 'ufo'
+import { onScopeDispose, ref, shallowRef, watch } from 'vue'
+import { useAuth } from './use-auth'
+import { useEventBus } from './use-event-bus'
+
+export const useSignaling = createSharedComposable(() => {
+  const { emit } = useEventBus()
+  const { me } = useAuth()
+
+  const socket = shallowRef<Socket>()
+
+  const connected = ref(false)
+
+  watch(socket, (socket, prevSocket) => {
+    if (prevSocket) {
+      prevSocket.close()
+    }
+
+    if (!socket) {
+      return
+    }
+
+    if (import.meta.dev) {
+      socket.onAny((event, ...args) => {
+        console.info('[onAny]', event, args)
+      })
+
+      socket.onAnyOutgoing((event, ...args) => {
+        console.info('[onAnyOutgoing]', event, args)
+      })
+    }
+
+    socket.on('connect', async () => {
+      connected.value = true
+    })
+
+    socket.on('disconnect', async () => {
+      connected.value = false
+    })
+  }, { immediate: true, flush: 'sync' })
+
+  watch(connected, (connected) => {
+    if (connected)
+      emit('socket:connected')
+    else
+      emit('socket:disconnected')
+  }, { immediate: true })
+
+  watch(me, (me) => {
+    if (!me) {
+      socket.value?.close()
+      socket.value = undefined
+    }
+  })
+
+  onScopeDispose(() => {
+    socket.value?.close()
+    socket.value = undefined
+  })
+
+  function connect() {
+    if (socket.value || !me.value)
+      return
+
+    const { protocol, host, pathname } = parseURL(__API_BASE_URL__)
+
+    const uri = host ? `${protocol}//${host}` : ``
+
+    socket.value = io(uri, {
+      path: `${pathname}/ws`,
+      transports: ['websocket'],
+      withCredentials: true,
+      auth: {
+        userId: me.value.id,
+      },
+    })
+  }
+
+  return {
+    socket,
+    connected,
+    connect,
+  }
+})
--- a/new-client/src/shared/layouts/Auth.vue
+++ b/new-client/src/shared/layouts/Auth.vue
@@ -27,18 +27,12 @@ defineOptions({
  &__container {
    margin: auto;
    width: 100%;
-    max-width: 380px;
+    max-width: 440px;
  }

  &__logo {
-    text-align: center;
-    margin-bottom: 24px;
-  }
-
-  &__content {
-    padding: 24px;
-    background-color: var(--bg);
-    border-radius: 36px;
+    justify-self: center;
+    margin-bottom: var(--space-6);
  }
 }
 </style>
--- a/new-client/src/shared/layouts/Default.vue
+++ b/new-client/src/shared/layouts/Default.vue
@@ -1,30 +1,42 @@
 <template>
  <div class="default-layout">
-    <header class="app-header">
-      <div class="app-header__sidebar">
-        <AppLogo />
+    <header class="header">
+      <div class="header__left">
+        <p class="header__app-title">
+          Chad
+        </p>
+
+        <p class="header__version">
+          {{ version }}
+        </p>
      </div>
-      <div class="app-header__content">
-        Header
+
+      <div class="header__right">
+        <p class="header__title">
+          Messages
+        </p>
      </div>
    </header>

-    <aside class="app-sidebar">
-      Sidebar
+    <aside class="sidebar">
+      <ChannelList class="sidebar__channel-list" />
    </aside>

-    <div class="default-layout__content">
+    <div class="content">
      <slot />
    </div>
  </div>
 </template>

 <script setup lang="ts">
-import AppLogo from '@shared/components/AppLogo.vue'
+import { useApp } from '@shared/composables/use-app.js'
+import ChannelList from '@widgets/channel-list/ui/ChannelList.vue'

 defineOptions({
  name: 'DefaultLayout',
 })
+
+const { version } = useApp()
 </script>

 <style lang="scss">
@@ -37,46 +49,62 @@ defineOptions({
  grid-template-rows: auto 1fr;
  grid-template-areas: 'header header' 'sidebar content';

-  &__content {
-    grid-area: content;
-  }
-
-  .app-header {
+  .header {
    grid-area: header;
    display: grid;
    grid-template-columns: var(--sidebar-width) 1fr;
    align-items: stretch;
    background-color: var(--bg);
    border-bottom: 1px solid var(--border-muted);
-    height: 52px;
+    height: 56px;
+    border-bottom: var(--border-w) solid var(--ink);

-    &__sidebar {
-      border-right: 1px solid var(--border-muted);
-    }
-
-    &__sidebar,
-    &__content {
+    &__left {
      display: flex;
      align-items: center;
-      padding: 8px;
+      justify-content: space-between;
+      background-color: var(--ink);
+      padding-inline: var(--space-4);
    }

-    &__title {
-      font-weight: 700;
+    &__app-title {
+      @include font-display-14;
+
+      color: var(--white);
    }

    &__version {
-      margin-left: 4px;
-      color: var(--text-muted);
-      font-size: 0.75rem;
+      @include font-micro;
+
+      color: var(--grey-3);
+    }
+
+    &__right {
+      display: flex;
+      align-items: center;
+      padding-inline: var(--space-4);
+    }
+
+    &__title {
+      @include font-display-14;
    }
  }

-  .app-sidebar {
+  .sidebar {
    grid-area: sidebar;
-    background-color: var(--bg);
-    border-right: 1px solid var(--border-muted);
-    padding: 8px;
+    display: flex;
+    flex-direction: column;
+    border-right: var(--border-w) solid var(--ink);
+    overflow-y: auto;
+
+    &__channel-list {
+      flex: 1;
+    }
+  }
+
+  .content {
+    grid-area: content;
+    overflow-y: auto;
  }
 }
 </style>
--- a/new-client/src/shared/styles/main.scss
+++ b/new-client/src/shared/styles/main.scss
@@ -3,27 +3,41 @@
 html,
 body,
 [data-mount-point]:not(:empty) {
-    height: 100%;
+  height: 100%;
 }

 [data-mount-point]:empty {
-    display: none;
+  display: none;
 }

 body {
-    background-color: var(--bg-dark);
-    color: var(--text);
-    height: 100%;
+  @include font-body;
+
+  background-color: var(--paper);
+  color: var(--ink);
+  height: 100%;
 }

-*,
-*::before,
-*::after {
-    font-family: 'Inter', sans-serif;
-    font-optical-sizing: auto;
-    font-weight: 400;
-    font-style: normal;
-    font-variation-settings:
-            'wdth' 100,
-            'YTLC' 500;
+a {
+  background-color: var(--yellow);
+  text-decoration: none;
+  color: var(--ink);
+  padding-inline: var(--space-1);
+  outline: none;
+
+  &:focus,
+  &:hover {
+    background-color: var(--yellow-deep);
+  }
+
+  &:active {
+    background-color: var(--ink);
+    color: var(--yellow);
+  }
 }
+//
+//*,
+//*::before,
+//*::after {
+//  @include font-body;
+//}
--- a/new-client/src/shared/styles/mixins.scss
+++ b/new-client/src/shared/styles/mixins.scss
@@ -0,0 +1 @@
+@forward 'mixins/typography';
--- a/new-client/src/shared/styles/mixins/typography.scss
+++ b/new-client/src/shared/styles/mixins/typography.scss
@@ -0,0 +1,54 @@
+$display-font-family: 'Unbounded', 'Manrope', system-ui, sans-serif;
+$regular-font-family: 'Manrope', system-ui, sans-serif;
+
+@mixin font-display-36 {
+  font-family: $display-font-family;
+  font-size: 36px;
+  letter-spacing: 0.01em;
+  text-transform: uppercase;
+  font-weight: 900;
+}
+
+@mixin font-display-22 {
+  font-family: $display-font-family;
+  font-size: 22px;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+  font-weight: 900;
+}
+
+@mixin font-display-14 {
+  font-family: $display-font-family;
+  font-size: 14px;
+  letter-spacing: 0.02em;
+  text-transform: uppercase;
+  font-weight: 900;
+}
+
+@mixin font-body {
+  font-family: $regular-font-family;
+  font-size: 14px;
+  font-weight: 400;
+}
+
+@mixin font-body-bold {
+  font-family: $regular-font-family;
+  font-size: 14px;
+  font-weight: 700;
+}
+
+@mixin font-label {
+  font-family: $regular-font-family;
+  font-size: 12px;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  font-weight: 700;
+}
+
+@mixin font-micro {
+  font-family: $regular-font-family;
+  font-size: 10px;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  font-weight: 500;
+}
--- a/new-client/src/shared/styles/tokens.scss
+++ b/new-client/src/shared/styles/tokens.scss
@@ -1,64 +1,25 @@
 :root {
-  /* hsl (fallback color) */
-  --bg-dark: hsl(208 100% 2%);
-  --bg: hsl(201 86% 4%);
-  --bg-light: hsl(198 56% 8%);
-  --text: hsl(199 100% 93%);
-  --text-muted: hsl(199 36% 68%);
-  --highlight: hsl(199 28% 37%);
-  --border: hsl(198 40% 26%);
-  --border-muted: hsl(197 70% 15%);
-  --primary: hsl(198 69% 65%);
-  --secondary: hsl(20 68% 69%);
-  --danger: hsl(9 26% 64%);
-  --warning: hsl(52 19% 57%);
-  --success: hsl(146 17% 59%);
-  --info: hsl(217 28% 65%);
-  /* oklch */
-  --bg-dark: oklch(0.1 0.025 228);
-  --bg: oklch(0.15 0.025 228);
-  --bg-light: oklch(0.2 0.025 228);
-  --text: oklch(0.96 0.05 228);
-  --text-muted: oklch(0.76 0.05 228);
-  --highlight: oklch(0.5 0.05 228);
-  --border: oklch(0.4 0.05 228);
-  --border-muted: oklch(0.3 0.05 228);
-  --primary: oklch(0.76 0.1 228);
-  --secondary: oklch(0.76 0.1 48);
-  --danger: oklch(0.7 0.05 30);
-  --warning: oklch(0.7 0.05 100);
-  --success: oklch(0.7 0.05 160);
-  --info: oklch(0.7 0.05 260);
-}
-[data-theme="light"] {
-  /* hsl (fallback color) */
-  --bg-dark: hsl(199 53% 89%);
-  --bg: hsl(199 100% 94%);
-  --bg-light: hsl(199 100% 99%);
-  --text: hsl(204 100% 4%);
-  --text-muted: hsl(198 40% 26%);
-  --highlight: hsl(199 100% 99%);
-  --border: hsl(199 22% 49%);
-  --border-muted: hsl(199 28% 61%);
-  --primary: hsl(193 100% 16%);
-  --secondary: hsl(23 81% 25%);
-  --danger: hsl(9 21% 41%);
-  --warning: hsl(52 23% 34%);
-  --success: hsl(147 19% 36%);
-  --info: hsl(217 22% 41%);
-  /* oklch */
-  --bg-dark: oklch(0.92 0.025 228);
-  --bg: oklch(0.96 0.025 228);
-  --bg-light: oklch(1 0.025 228);
-  --text: oklch(0.15 0.05 228);
-  --text-muted: oklch(0.4 0.05 228);
-  --highlight: oklch(1 0.05 228);
-  --border: oklch(0.6 0.05 228);
-  --border-muted: oklch(0.7 0.05 228);
-  --primary: oklch(0.4 0.1 228);
-  --secondary: oklch(0.4 0.1 48);
-  --danger: oklch(0.5 0.05 30);
-  --warning: oklch(0.5 0.05 100);
-  --success: oklch(0.5 0.05 160);
-  --info: oklch(0.5 0.05 260);
+  --white: #fff;
+  --paper: #f4f1e8;
+  --ink: #0d0d0d;
+  --yellow: #ffd400;
+  --yellow-deep: #f5c400;
+  --red: #ff3b30;
+  --green: #1f9d55;
+  --grey-1: #ededed;
+  --grey-2: #c9c6bd;
+  --grey-3: #8a8a82;
+
+  --shadow: 6px 6px 0 0 var(--ink);
+
+  --border-w: 2px;
+
+  --space-1: 4px;
+  --space-2: 8px;
+  --space-3: 12px;
+  --space-4: 16px;
+  --space-5: 20px;
+  --space-6: 24px;
+  --space-7: 28px;
+  --space-8: 32px;
 }
--- a/new-client/src/shared/types.ts
+++ b/new-client/src/shared/types.ts
@@ -0,0 +1,7 @@
+export interface ChadClient {
+  socketId: string
+  userId: string
+  channelId: string
+  inputMuted?: boolean
+  outputMuted?: boolean
+}
--- a/new-client/src/widgets/channel-list/api/qChannelList.ts
+++ b/new-client/src/widgets/channel-list/api/qChannelList.ts
@@ -0,0 +1,16 @@
+import type { Channel, ResponseError } from '@shared/api/generated-chad-api.ts'
+import api from '@shared/api/client.ts'
+import { useQuery } from '@tanstack/vue-query'
+
+export function qChannelList() {
+  return useQuery<Channel[], ResponseError>({
+    queryKey: ['channel-list'],
+    queryFn: async () => {
+      const response = await api.chad.channelList()
+
+      return response.data
+    },
+    placeholderData: () => [],
+    staleTime: Infinity,
+  })
+}
--- a/new-client/src/widgets/channel-list/ui/ChannelItem.vue
+++ b/new-client/src/widgets/channel-list/ui/ChannelItem.vue
@@ -0,0 +1,41 @@
+<template>
+  <li v-bind="api.getRootProps()" class="channel">
+    <div class="channel__header" v-bind="api.getTriggerProps()">
+      {{ channel.name }}
+    </div>
+
+    <div v-bind="api.getContentProps()" class="channel__content">
+      Clients...
+    </div>
+  </li>
+</template>
+
+<script setup lang="ts">
+import type { Channel } from '@shared/api/generated-chad-api.ts'
+import type { ChadClient } from '@shared/types.ts'
+import * as collapsible from '@zag-js/collapsible'
+import { normalizeProps, useMachine } from '@zag-js/vue'
+import { computed } from 'vue'
+
+const props = defineProps<{
+  channel: Channel
+  clients: ChadClient[]
+}>()
+
+const service = useMachine(collapsible.machine, { id: '1' })
+
+const api = computed(() => collapsible.connect(service, normalizeProps))
+</script>
+
+<style lang="scss">
+.channel {
+  padding-inline: var(--space-3);
+
+  &__header {
+    @include font-micro;
+
+    padding-block: var(--space-2);
+    color: var(--grey-3);
+  }
+}
+</style>
--- a/new-client/src/widgets/channel-list/ui/ChannelList.vue
+++ b/new-client/src/widgets/channel-list/ui/ChannelList.vue
@@ -0,0 +1,22 @@
+<template>
+  <div class="channel-list">
+    <ul class="channel-list__list">
+      <ChannelItem v-for="channel in channels" :key="channel.id" :channel="channel" />
+    </ul>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { qChannelList } from '../api/qChannelList.ts'
+import ChannelItem from './ChannelItem.vue'
+
+const { data: channels } = qChannelList()
+</script>
+
+<style lang="scss">
+.channel-list {
+  > *:not(:last-child) {
+    margin-bottom: var(--space-6);
+  }
+}
+</style>
--- a/new-client/src/widgets/chat/api/qChatMessages.ts
+++ b/new-client/src/widgets/chat/api/qChatMessages.ts
@@ -0,0 +1,33 @@
+import type { ChatMessage, ResponseError } from '@shared/api/generated-chad-api.ts'
+import type { InfiniteData, QueryKey } from '@tanstack/vue-query'
+import api from '@shared/api/client.ts'
+import { useInfiniteQuery } from '@tanstack/vue-query'
+
+interface Response {
+  messages: ChatMessage[]
+  nextCursor?: string
+}
+type PageParam = string | undefined
+
+export function qChatMessages() {
+  return useInfiniteQuery<Response, ResponseError, InfiniteData<Response, PageParam>, QueryKey, PageParam>({
+    queryKey: ['chat-messages'],
+    queryFn: async ({ pageParam }) => {
+      const response = await api.chad.chatMessages({ cursor: pageParam, limit: 30 })
+
+      return {
+        messages: response.data.messages.reverse(),
+        nextCursor: response.data.nextCursor,
+      }
+    },
+    select: data => ({
+      pages: [...data.pages].reverse(),
+      pageParams: [...data.pageParams].reverse(),
+    }),
+    initialPageParam: undefined,
+    getNextPageParam: (lastPage) => {
+      return lastPage.nextCursor
+    },
+    shallow: true,
+  })
+}
--- a/new-client/src/widgets/chat/composables/use-chat.ts
+++ b/new-client/src/widgets/chat/composables/use-chat.ts
@@ -0,0 +1,12 @@
+import { createGlobalState } from '@vueuse/core'
+import { qChatMessages } from '../api/qChatMessages.ts'
+
+export const useChat = createGlobalState(() => {
+  const { data: messages, hasNextPage: hasMoreMessages, fetchNextPage } = qChatMessages()
+
+  return {
+    messages,
+    hasMoreMessages,
+    fetchNextPage,
+  }
+})
--- a/new-client/src/widgets/chat/ui/Chat.vue
+++ b/new-client/src/widgets/chat/ui/Chat.vue
@@ -0,0 +1,24 @@
+<template>
+  <div class="chat">
+    <button v-if="hasMoreMessages" type="button" @click="fetchNextPage()">
+      Load more
+    </button>
+
+    <div v-if="messages" class="chat__messages">
+      <template v-for="(page, pageIdx) in messages.pages" :key="pageIdx">
+        <ChatMessage v-for="message in page.messages" :key="message.id" :message="message" />
+      </template>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import ChatMessage from '@widgets/chat/ui/ChatMessage.vue'
+import { useChat } from '../composables/use-chat'
+
+const { messages, hasMoreMessages, fetchNextPage } = useChat()
+</script>
+
+<style lang="scss">
+
+</style>
--- a/new-client/src/widgets/chat/ui/ChatMessage.vue
+++ b/new-client/src/widgets/chat/ui/ChatMessage.vue
@@ -0,0 +1,47 @@
+<template>
+  <div class="chat-message">
+    <ChadAvatar class="chat-message__avatar" src="" :fallback="initials" />
+    <p class="chat-message__sender">
+      {{ message.senderId }}
+    </p>
+    <p class="chat-message__body">
+      {{ message.text }}
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { ChatMessage } from '@shared/api/generated-chad-api.ts'
+import ChadAvatar from '@shared/components/ui/Avatar.vue'
+import { computed } from 'vue'
+
+const props = defineProps<{
+  message: ChatMessage
+}>()
+
+const initials = computed(() => props.message.senderId.slice(props.message.senderId.length - 2))
+</script>
+
+<style lang="scss">
+.chat-message {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  grid-template-areas: 'avatar sender' 'avatar body';
+  column-gap: var(--space-3);
+  padding: var(--space-3) var(--space-6);
+
+  &__avatar {
+    grid-area: avatar;
+  }
+
+  &__sender {
+    @include font-body-bold;
+
+    grid-area: sender;
+  }
+
+  &__body {
+    grid-area: body;
+  }
+}
+</style>