feat(ui): UI tweaks round 3 #114
3 changed files with 18 additions and 6 deletions
|
|
@ -1,7 +1,7 @@
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { computed, ref } from 'vue'
|
import { computed, ref } from 'vue'
|
||||||
import { useI18n } from 'vue-i18n'
|
import { useI18n } from 'vue-i18n'
|
||||||
import { Check, Copy, Home, LogIn, LogOut, Pencil, Zap } from 'lucide-vue-next'
|
import { Check, Copy, LogIn, LogOut, Pencil, Zap } from 'lucide-vue-next'
|
||||||
import { nip19 } from 'nostr-tools'
|
import { nip19 } from 'nostr-tools'
|
||||||
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
|
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
|
||||||
import { Button } from '@/components/ui/button'
|
import { Button } from '@/components/ui/button'
|
||||||
|
|
@ -66,7 +66,9 @@ const npubPreview = computed(() => {
|
||||||
return value.length > 24 ? `${value.slice(0, 12)}…${value.slice(-8)}` : value
|
return value.length > 24 ? `${value.slice(0, 12)}…${value.slice(-8)}` : value
|
||||||
})
|
})
|
||||||
|
|
||||||
const hubRootUrl = computed(() => import.meta.env.VITE_HUB_ROOT_URL || '/')
|
// "Back to hub" is hidden for the events-only launch (see template).
|
||||||
|
// Re-enable this alongside the commented-out link below when the hub ships.
|
||||||
|
// const hubRootUrl = computed(() => import.meta.env.VITE_HUB_ROOT_URL || '/')
|
||||||
|
|
||||||
const copiedField = ref<string | null>(null)
|
const copiedField = ref<string | null>(null)
|
||||||
async function copyToClipboard(text: string, field: string) {
|
async function copyToClipboard(text: string, field: string) {
|
||||||
|
|
@ -188,16 +190,24 @@ async function onLogout() {
|
||||||
|
|
||||||
<!-- Cross-app links + global preferences (always visible, auth or not) -->
|
<!-- Cross-app links + global preferences (always visible, auth or not) -->
|
||||||
<div class="mt-4">
|
<div class="mt-4">
|
||||||
|
<!-- "Back to hub" hidden for the events-only launch — re-enable when
|
||||||
|
the hub ships. When re-enabled, show the HUB's brand-kit logo
|
||||||
|
(the brand's primary/global logo, or a hub-specific override) —
|
||||||
|
NOT the per-standalone @brand-app-logo, which resolves to this
|
||||||
|
standalone's own logo. This needs a hub-logo alias (e.g.
|
||||||
|
@brand-hub-logo = resolveAppLogo for the hub) added in
|
||||||
|
vite-branding.ts + the standalone vite configs.
|
||||||
<a
|
<a
|
||||||
:href="hubRootUrl"
|
:href="hubRootUrl"
|
||||||
class="flex items-center justify-between gap-3 px-3 py-3 hover:bg-accent rounded-md transition-colors"
|
class="flex items-center justify-between gap-3 px-3 py-3 hover:bg-accent rounded-md transition-colors"
|
||||||
:aria-label="t('common.nav.backToHub')"
|
:aria-label="t('common.nav.backToHub')"
|
||||||
>
|
>
|
||||||
<div class="flex items-center gap-3">
|
<div class="flex items-center gap-3">
|
||||||
<Home class="w-5 h-5 text-muted-foreground" />
|
<img src="@brand-hub-logo" :alt="t('common.nav.backToHub')" class="w-5 h-5 shrink-0" />
|
||||||
<span class="text-sm font-medium">{{ t('common.nav.backToHub') }}</span>
|
<span class="text-sm font-medium">{{ t('common.nav.backToHub') }}</span>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
|
-->
|
||||||
|
|
||||||
<PreferencesRow layout="list" />
|
<PreferencesRow layout="list" />
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,7 @@
|
||||||
import { ref, type Component } from 'vue'
|
import { ref, type Component } from 'vue'
|
||||||
import { useI18n } from 'vue-i18n'
|
import { useI18n } from 'vue-i18n'
|
||||||
import { useRouter } from 'vue-router'
|
import { useRouter } from 'vue-router'
|
||||||
import { LogIn } from 'lucide-vue-next'
|
import { User } from 'lucide-vue-next'
|
||||||
import {
|
import {
|
||||||
Sheet,
|
Sheet,
|
||||||
SheetContent,
|
SheetContent,
|
||||||
|
|
@ -62,7 +62,7 @@ function handleClick(item: SidebarNavItem) {
|
||||||
<AvatarImage v-if="pictureUrl" :src="pictureUrl" :alt="displayName ?? ''" />
|
<AvatarImage v-if="pictureUrl" :src="pictureUrl" :alt="displayName ?? ''" />
|
||||||
<AvatarFallback>{{ fallbackInitial || '?' }}</AvatarFallback>
|
<AvatarFallback>{{ fallbackInitial || '?' }}</AvatarFallback>
|
||||||
</Avatar>
|
</Avatar>
|
||||||
<LogIn v-else class="w-5 h-5" />
|
<User v-else class="w-5 h-5" />
|
||||||
</button>
|
</button>
|
||||||
</SheetTrigger>
|
</SheetTrigger>
|
||||||
<SheetContent side="right" class="w-80 sm:w-96 max-w-full overflow-y-auto overflow-x-hidden">
|
<SheetContent side="right" class="w-80 sm:w-96 max-w-full overflow-y-auto overflow-x-hidden">
|
||||||
|
|
|
||||||
|
|
@ -105,7 +105,9 @@ onBeforeRouteLeave(() => {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="container mx-auto py-4 px-4">
|
<!-- pt-2.5 (not py-4) so the header logo/banner sits centered on the
|
||||||
|
same horizontal axis as the fixed top-right profile icon. -->
|
||||||
|
<div class="container mx-auto pt-2.5 pb-4 px-4">
|
||||||
<!-- Page header. A brand may ship a wide banner (logo + wordmark in
|
<!-- Page header. A brand may ship a wide banner (logo + wordmark in
|
||||||
one image) that replaces the logo + name pair; otherwise we show
|
one image) that replaces the logo + name pair; otherwise we show
|
||||||
the brand-kit logo (per-standalone override or global) paired
|
the brand-kit logo (per-standalone override or global) paired
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue