Skip to content

Commit a6366b3

Browse files
garywoodfinegarywoodfine
authored
Merge pull request #12 from threenine/feature/ux-improvements
feature/ux improvements
2 parents 875f8e2 + 762dd94 commit a6366b3

File tree

14 files changed

+287
-131
lines changed

14 files changed

+287
-131
lines changed

‎eslint.config.mjs‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,9 @@ export default createConfigForNuxt({
1717
})
1818
.append(
1919
{
20-
ignores: ['playground/**/*'],
20+
rules: {
21+
'vue/multi-word-component-names': 'off',
22+
},
2123

2224
},
2325
// your custom flat config here...

‎playground/app/app.config.ts‎

Lines changed: 71 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -1,84 +1,84 @@
11
export default defineAppConfig({
22

3-
ui: {
4-
colors: {
5-
primary: 'orange',
6-
neutral: 'neutral'
3+
ui: {
4+
colors: {
5+
primary: 'orange',
6+
neutral: 'neutral',
7+
},
8+
chip: {
9+
slots: {
10+
root: 'relative inline-flex items-center justify-center shrink-0',
11+
base: 'rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap',
712
},
8-
chip: {
9-
slots: {
10-
root: 'relative inline-flex items-center justify-center shrink-0',
11-
base: 'rounded-full ring ring-bg flex items-center justify-center text-inverted font-medium whitespace-nowrap'
13+
variants: {
14+
color: {
15+
primary: 'bg-primary',
16+
secondary: 'bg-secondary',
17+
success: 'bg-success',
18+
info: 'bg-info',
19+
warning: 'bg-warning',
20+
error: 'bg-error',
21+
neutral: 'bg-inverted',
22+
},
23+
size: {
24+
'3xs': 'h-[4px] min-w-[4px] text-[4px]',
25+
'2xs': 'h-[5px] min-w-[5px] text-[5px]',
26+
'xs': 'h-[6px] min-w-[6px] text-[6px]',
27+
'sm': 'h-[7px] min-w-[7px] text-[7px]',
28+
'md': 'h-[8px] min-w-[8px] text-[8px]',
29+
'lg': 'h-[9px] min-w-[9px] text-[9px]',
30+
'xl': 'h-[10px] min-w-[10px] text-[10px]',
31+
'2xl': 'h-[11px] min-w-[11px] text-[11px]',
32+
'3xl': 'h-[12px] min-w-[12px] text-[12px]',
33+
},
34+
position: {
35+
'top-right': 'top-0 right-0',
36+
'bottom-right': 'bottom-0 right-0',
37+
'top-left': 'top-0 left-0',
38+
'bottom-left': 'bottom-0 left-0',
1239
},
13-
variants: {
14-
color: {
15-
primary: 'bg-primary',
16-
secondary: 'bg-secondary',
17-
success: 'bg-success',
18-
info: 'bg-info',
19-
warning: 'bg-warning',
20-
error: 'bg-error',
21-
neutral: 'bg-inverted'
22-
},
23-
size: {
24-
'3xs': 'h-[4px] min-w-[4px] text-[4px]',
25-
'2xs': 'h-[5px] min-w-[5px] text-[5px]',
26-
xs: 'h-[6px] min-w-[6px] text-[6px]',
27-
sm: 'h-[7px] min-w-[7px] text-[7px]',
28-
md: 'h-[8px] min-w-[8px] text-[8px]',
29-
lg: 'h-[9px] min-w-[9px] text-[9px]',
30-
xl: 'h-[10px] min-w-[10px] text-[10px]',
31-
'2xl': 'h-[11px] min-w-[11px] text-[11px]',
32-
'3xl': 'h-[12px] min-w-[12px] text-[12px]'
33-
},
34-
position: {
35-
'top-right': 'top-0 right-0',
36-
'bottom-right': 'bottom-0 right-0',
37-
'top-left': 'top-0 left-0',
38-
'bottom-left': 'bottom-0 left-0'
39-
},
40-
inset: {
41-
false: ''
42-
},
43-
standalone: {
44-
false: 'absolute'
45-
}
40+
inset: {
41+
false: '',
42+
},
43+
standalone: {
44+
false: 'absolute',
4645
},
47-
compoundVariants: [
48-
{
49-
position: 'top-right',
50-
inset: false,
51-
class: '-translate-y-1/2 translate-x-1/2 transform'
52-
},
53-
{
54-
position: 'bottom-right',
55-
inset: false,
56-
class: 'translate-y-1/2 translate-x-1/2 transform'
57-
},
58-
{
59-
position: 'top-left',
60-
inset: false,
61-
class: '-translate-y-1/2 -translate-x-1/2 transform'
62-
},
63-
{
64-
position: 'bottom-left',
65-
inset: false,
66-
class: 'translate-y-1/2 -translate-x-1/2 transform'
67-
}
68-
],
69-
defaultVariants: {
70-
size: 'md',
71-
color: 'primary',
72-
position: 'top-right'
73-
}
7446
},
47+
compoundVariants: [
48+
{
49+
position: 'top-right',
50+
inset: false,
51+
class: '-translate-y-1/2 translate-x-1/2 transform',
52+
},
53+
{
54+
position: 'bottom-right',
55+
inset: false,
56+
class: 'translate-y-1/2 translate-x-1/2 transform',
57+
},
58+
{
59+
position: 'top-left',
60+
inset: false,
61+
class: '-translate-y-1/2 -translate-x-1/2 transform',
62+
},
63+
{
64+
position: 'bottom-left',
65+
inset: false,
66+
class: 'translate-y-1/2 -translate-x-1/2 transform',
67+
},
68+
],
69+
defaultVariants: {
70+
size: 'md',
71+
color: 'primary',
72+
position: 'top-right',
73+
},
74+
},
7575
icons: {
7676
light: 'i-ph-sun',
77-
dark: 'i-ph-moon'
77+
dark: 'i-ph-moon',
7878
},
7979
skeleton: {
80-
base: 'animate-pulse rounded-md bg-elevated'
81-
}
80+
base: 'animate-pulse rounded-md bg-elevated',
81+
},
8282

8383
},
8484
})

‎playground/app/pages/another-page.vue‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,14 @@
22

33
<template>
44
<div>
5-
<nuxt-link to="/" class="text-primary">Back</nuxt-link>
6-
<nuxt-link to="/another" class="text-primary">Another</nuxt-link>
5+
<nuxt-link
6+
to="/"
7+
class="text-primary"
8+
>Back</nuxt-link>
9+
<nuxt-link
10+
to="/another"
11+
class="text-primary"
12+
>Another</nuxt-link>
713
<nuxstr-comments />
814
</div>
915
</template>

‎playground/app/pages/another/deeper/index.vue‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@
33
</script>
44

55
<template>
6-
76
<nuxstr-comments />
87
</template>
98

‎playground/app/pages/another/index.vue‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,14 +3,14 @@
33
</script>
44

55
<template>
6-
76
<div>
8-
9-
<nuxt-link to="/another/deeper" class="text-primary">Another deeper</nuxt-link>
10-
<u-separator></u-separator>
7+
<nuxt-link
8+
to="/another/deeper"
9+
class="text-primary"
10+
>Another deeper</nuxt-link>
11+
<u-separator />
1112
<nuxstr-comments />
1213
</div>
13-
1414
</template>
1515

1616
<style scoped>

‎playground/app/pages/index.vue‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,12 @@
44
<template>
55
<nuxt-layout name="default-layout">
66
<UContainer>
7-
<h1>Playground</h1>
8-
<p>Index Page</p> <nuxt-link
9-
to="another-page"
10-
class="text-primary"
11-
> Another Page</nuxt-link>
12-
<NuxstrComments />
7+
<h1>Playground</h1>
8+
<p>Index Page</p> <nuxt-link
9+
to="another-page"
10+
class="text-primary"
11+
> Another Page</nuxt-link>
12+
<NuxstrComments />
1313
</UContainer>
1414
</nuxt-layout>
1515
</template>

‎playground/nuxt.config.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,6 @@ export default defineNuxtConfig({
44
css: ['~/assets/css/main.css'],
55
compatibilityDate: '2025-08-19',
66
nuxstrComments: {
7-
relays: ['ws://localhost:10547']
7+
relays: ['ws://localhost:10547'],
88
},
99
})

‎src/runtime/classes/NostrManager.ts‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,13 +26,16 @@ export class NostrManager {
2626
return NostrManager.instance
2727
}
2828

29-
public subscribe(filter: Filter, onEvent: (event: NToolEvent) => void) {
29+
public subscribe(filter: Filter, onEvent: (event: NToolEvent) => void, onEose?: () => void) {
3030
return this.pool.subscribeMany(this.relays, filter, {
3131
onevent(event) {
3232
if (verifyEvent(event)) {
3333
onEvent(event)
3434
}
3535
},
36+
oneose() {
37+
if (onEose) onEose()
38+
},
3639
})
3740
}
3841

‎src/runtime/components/NuxstrComments.vue‎

Lines changed: 41 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,29 @@
11
<script setup lang="ts">
2-
import { onMounted } from 'vue'
2+
import { onMounted, ref, watch } from 'vue'
33
import useNuxstr from '../composables/useNuxstr'
44
import useComments from '../composables/useComments'
5+
import SignInModal from './SignInModal.vue'
56
67
const props = defineProps<{ contentId?: string }>()
7-
const { login, isLoggedIn } = useNuxstr()
8+
const emit = defineEmits(['querying', 'completed', 'no-comments'])
9+
10+
const { isLoggedIn } = useNuxstr()
811
const { comments, subscribeComments, loading } = useComments(props.contentId)
912
13+
const isSignInModalOpen = ref(false)
14+
15+
watch(loading, (isLoading) => {
16+
if (isLoading) {
17+
emit('querying')
18+
}
19+
else {
20+
emit('completed')
21+
if (comments.value.length === 0) {
22+
emit('no-comments')
23+
}
24+
}
25+
})
26+
1027
onMounted(() => {
1128
subscribeComments()
1229
})
@@ -23,16 +40,16 @@ onMounted(() => {
2340
v-if="!isLoggedIn"
2441
class="text-sm text-muted-foreground"
2542
>
26-
<u-tooltip text="Sign in with NIP07 browser extension like Alby or nos2fx to comment">
27-
<UButton
28-
color="primary"
29-
variant="solid"
30-
leading-icon="game-icons:ostrich"
31-
@click="login"
32-
>
33-
Sign in
34-
</UButton>
35-
</u-tooltip>
43+
<UButton
44+
color="primary"
45+
variant="solid"
46+
leading-icon="game-icons:ostrich"
47+
@click="isSignInModalOpen = true"
48+
>
49+
Sign in
50+
</UButton>
51+
52+
<SignInModal v-model:open="isSignInModalOpen" />
3653
</div>
3754
</div>
3855

@@ -46,16 +63,26 @@ onMounted(() => {
4663
<div class="space-y-4">
4764
<div
4865
v-if="loading"
66+
class="space-y-4"
4967
>
50-
<scaffold-comment />
68+
<scaffold-comment
69+
v-for="n in 3"
70+
:key="n"
71+
/>
5172
</div>
5273

5374
<div
5475
v-else
5576
class="space-y-6"
5677
>
5778
<div v-if="comments.length === 0">
58-
<scaffold-comment />
79+
<UEmpty
80+
icon="i-lucide-message-square-off"
81+
title="No comments yet"
82+
description="Be the first to share your thoughts!"
83+
variant="subtle"
84+
size="sm"
85+
/>
5986
</div>
6087
<UCard
6188
v-for="c in comments"

‎src/runtime/components/ScaffoldComment.vue‎

Lines changed: 13 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -3,21 +3,19 @@
33
</script>
44

55
<template>
6-
<div>
7-
<p class="text-xs">
8-
No comments available
9-
</p>
10-
<UCard
11-
variant="subtle"
12-
class="mt-auto"
13-
:ui="{ header: 'flex items-center gap-1.5 text-dimmed' }"
14-
>
15-
<span><USkeleton class="h-4 w-5 rounded-full" /></span><USkeleton class="h-4" />
16-
<div class="mt-3">
17-
<USkeleton class="h-4" />
18-
</div>
19-
</UCard>
20-
</div>
6+
<UCard
7+
variant="subtle"
8+
class="mt-auto"
9+
:ui="{ header: 'flex items-center gap-1.5 text-dimmed' }"
10+
>
11+
<div class="flex items-center gap-1.5">
12+
<USkeleton class="h-4 w-5 rounded-full" /><USkeleton class="h-4" />
13+
</div>
14+
15+
<div class="mt-3 space-y-2">
16+
<USkeleton class="h-4" />
17+
</div>
18+
</UCard>
2119
</template>
2220

2321
<style scoped>

0 commit comments

Comments
 (0)