feat: convert friends list sidebar into resizable sidebar
All checks were successful
ci/woodpecker/push/build-and-publish Pipeline was successful
ci/woodpecker/pr/build-and-publish Pipeline was successful

This commit is contained in:
SauceyRed 2025-07-18 04:37:49 +02:00
parent 89d0023c07
commit 60e7a42f92
Signed by: sauceyred
GPG key ID: 2BF92EB6D8A5CCA7

View file

@ -1,27 +1,30 @@
<template> <template>
<div id="middle-left-column"> <ResizableSidebar width="14rem" min-width="10rem" max-width="30rem" border-sides="right" local-storage-name="friendsListWidth">
<div id="friend-sidebar"> <div id="middle-left-column">
<div> <div id="friend-sidebar">
<h3>Direct Messages</h3> <div>
</div> <h3>Direct Messages</h3>
<VerticalSpacer /> </div>
<VerticalSpacer />
<NuxtLink class="user-item" :href="`/me`" tabindex="0">
<Icon class="user-avatar" name="lucide:user" /> <NuxtLink class="user-item" :href="`/me`" tabindex="0">
<span class="user-display-name">Friends</span> <Icon class="user-avatar" name="lucide:user" />
</NuxtLink> <span class="user-display-name">Friends</span>
<VerticalSpacer /> </NuxtLink>
<VerticalSpacer />
<div id="direct-message-list">
<UserEntry v-for="user of friends" :user="user" <div id="direct-message-list">
:href="`/me/${user.uuid}`"/> <UserEntry v-for="user of friends" :user="user"
:href="`/me/${user.uuid}`"/>
</div>
</div> </div>
</div> </div>
</div> </ResizableSidebar>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import VerticalSpacer from '~/components/UserInterface/VerticalSpacer.vue'; import VerticalSpacer from '~/components/UserInterface/VerticalSpacer.vue';
import ResizableSidebar from '../UserInterface/ResizableSidebar.vue';
const { fetchFriends } = useApi(); const { fetchFriends } = useApi();