versia-pub/frontend
2
0
Fork 0
mirror of https://github.com/versia-pub/frontend.git synced 2026-03-13 03:29:16 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: ✨ Add settings page to configure account and preferences

Browse source
This commit is contained in:
Jesse Wierzbinski 2024-06-18 20:16:28 -10:00
parent 633ff184e3
commit 1691daa000
No known key found for this signature in database
21 changed files with 687 additions and 183 deletions
Download patch file Download diff file Expand all files Collapse all files

22
components/sidebars/account-picker.vue
View file

@ -12,7 +12,7 @@
<div class="flex flex-row items-center justify-between w-full">
<div class="font-semibold text-gray-200 text-sm line-clamp-1 break-all">
{{
currentIdentity.account.display_name }}
currentIdentity.account.display_name }}
</div>
</div>
<span class="text-gray-400 text-xs line-clamp-1 break-all w-full">
@ -44,13 +44,13 @@
<div class="flex flex-row items-center justify-between w-full">
<div class="font-semibold text-gray-200 line-clamp-1 break-all">
{{
identity.account.display_name }}
identity.account.display_name }}
</div>
</div>
<span class="text-gray-400 text-sm line-clamp-1 break-all w-full">
@{{
identity.account.acct
}}
identity.account.acct
}}
</span>
</div>
<button data-part="item"
@ -60,6 +60,20 @@
</button>
</div>
</Menu.Item>
<Menu.Item value="" v-if="currentIdentity">
<NuxtLink href="/settings" class="w-full">
<div class="rounded text-left flex flex-row gap-x-2 hover:scale-[95%]">
<div
class="shrink-0 size-12 border-dashed border-white/20 border flex items-center justify-center rounded">
<iconify-icon icon="tabler:adjustments" class="size-6 text-gray-200" width="none" />
</div>
<div
class="flex flex-col items-start font-semibold p-1 justify-around text-sm text-gray-300 grow overflow-hidden">
Settings
</div>
</div>
</NuxtLink>
</Menu.Item>
<Menu.Item value="">
<button @click="$emit('signIn')" class="w-full">
<div class="rounded text-left flex flex-row gap-x-2 hover:scale-[95%]">

14
components/sidebars/navigation.vue
View file

@ -34,6 +34,20 @@
<span class="pr-28 line-clamp-1">Register</span>
</ButtonsBase>
</NuxtLink>
<NuxtLink href="/settings" v-if="identity">
<button @click="$emit('signIn')" class="w-full overflow-hidden">
<div class="rounded text-left flex flex-row items-center gap-x-2 hover:scale-[95%]">
<div
class="shrink-0 size-12 border-dashed border-white/20 border flex items-center justify-center rounded">
<iconify-icon icon="tabler:adjustments" class="size-6 text-gray-200" width="none" />
</div>
<span
class="line-clamp-1 font-semibold p-1 justify-around text-sm text-gray-300 grow overflow-hidden">
Settings
</span>
</div>
</button>
</NuxtLink>
<h3 v-if="identity"
class="font-semibold text-gray-300 text-xs uppercase opacity-0 group-hover:opacity-100 duration-200">
Posts</h3>

33
components/sidebars/settings.vue Normal file
View file

@ -0,0 +1,33 @@
<template>
<Tabs.Root v-model="tab">
<Tabs.List class="flex flex-row p-4 gap-4 bg-dark-800 relative ring-1 ring-white/5 overflow-x-auto">
<Tabs.Trigger :value="page" v-for="page of SettingPages" :as-child="true">
<ButtonsBase class="capitalize hover:bg-white/5">
{{ page }}
</ButtonsBase>
</Tabs.Trigger>
<Tabs.Indicator class="h-1 bg-gray-300 w-[--width] top-0 rounded-b" />
</Tabs.List>
<Tabs.Content :value="page" v-for="page of SettingPages">
<slot :name="page" />
</Tabs.Content>
</Tabs.Root>
</template>
<script lang="ts" setup>
import { Tabs } from "@ark-ui/vue";
import { SettingPages } from "~/settings";
const tab = ref<SettingPages>(
(window.location.hash.slice(1) as SettingPages) || SettingPages.Account,
);
// Update page hash when tab changes
watch(
tab,
(value) => {
window.location.hash = value;
},
{ immediate: true },
);
</script>