Skip to content
This repository was archived by the owner on Aug 27, 2025. It is now read-only.

Commit 9aa4a4e

Browse files
CandinyaCandinya
committed
feat: handle very long text
1 parent ea72a25 commit 9aa4a4e

7 files changed

Lines changed: 149 additions & 154 deletions

File tree

‎src/common/router.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@ import IndexRootPage from '../pages/IndexRoot.vue';
55
import MintPage from '../pages/Mint.vue';
66
import CharactersPage from '../pages/Characters.vue';
77
import FaucetPage from '../pages/Faucet.vue';
8+
import Layout from '../pages/Layout.vue';
89
import HomePage from '../pages/Home.vue';
9-
import HomeRootPage from '../pages/HomeRoot.vue';
1010
import NotePage from '../pages/Note.vue';
1111
import SettingsPage from '../pages/Settings.vue';
1212
import HelpPage from '../pages/Help.vue';
@@ -38,11 +38,11 @@ export const router = createRouter({
3838
},
3939
{
4040
path: '/home',
41-
component: HomePage,
41+
component: Layout,
4242
children: [
4343
{
4444
path: '',
45-
component: HomeRootPage,
45+
component: HomePage,
4646
},
4747
{
4848
path: 'note/:id',

‎src/components/Notes.vue‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
<div class="w-10 h-10 mr-3" v-if="character.avatars?.[0]">
55
<img class="rounded-full" :src="character.avatars?.[0]" />
66
</div>
7-
<div class="flex-1">
7+
<div class="flex-1 break-all">
88
<div class="mb-1">
99
<span class="font-bold align-middle">{{ character.name || character.username }}</span>
1010
<span class="text-gray-500 ml-1 align-middle" v-if="character.username"
@@ -106,7 +106,6 @@ const props = defineProps({
106106
},
107107
});
108108
109-
const note = props.note;
110109
const character = props.character;
111110
112111
const getHost = (url: string) => {

‎src/pages/Help.vue‎

Lines changed: 16 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,20 @@
11
<template>
2-
<div class="flex-1 flex flex-col">
3-
<h1 class="flex text-4xl font-bold my-5 py-4">Help</h1>
4-
<div class="flex flex-col">
5-
<p class="leading-7 my-3 text-gray-700">
6-
CrossSync is a socially-oriented web3 Dapp that runs on the Crossbell. CrossSync aims to allow a
7-
user-owned flow of social information, including but not limited to: following other user characters,
8-
integrated Twitter UI, note-posting, achievement badges, and more.
9-
</p>
10-
<p class="leading-7 my-3 text-gray-700">
11-
Crossbell allows users the ability to take back their data ownership; CrossSync makes owning your data a
12-
fun and engaging social experience.
13-
</p>
14-
<p class="leading-7 my-3 text-gray-700">
15-
To get started, you’ll need go to
16-
<a class="underline" href="https://faucet.crossbell.io">faucet.crossbell.io</a> and get some $CSB. After
17-
you’ve connected your wallet and received the $CSB, you’ll be able to mint a character on CrossSync.
18-
</p>
19-
</div>
2+
<h1 class="flex text-4xl font-bold my-5 py-4">Help</h1>
3+
<div class="flex flex-col">
4+
<p class="leading-7 my-3 text-gray-700">
5+
CrossSync is a socially-oriented web3 Dapp that runs on the Crossbell. CrossSync aims to allow a user-owned
6+
flow of social information, including but not limited to: following other user characters, integrated
7+
Twitter UI, note-posting, achievement badges, and more.
8+
</p>
9+
<p class="leading-7 my-3 text-gray-700">
10+
Crossbell allows users the ability to take back their data ownership; CrossSync makes owning your data a fun
11+
and engaging social experience.
12+
</p>
13+
<p class="leading-7 my-3 text-gray-700">
14+
To get started, you’ll need go to
15+
<a class="underline" href="https://faucet.crossbell.io">faucet.crossbell.io</a> and get some $CSB. After
16+
you’ve connected your wallet and received the $CSB, you’ll be able to mint a character on CrossSync.
17+
</p>
2018
</div>
2119
</template>
2220

‎src/pages/Home.vue‎

Lines changed: 83 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,90 @@
11
<template>
2-
<div class="flex w-full h-full px-8 max-w-screen-lg">
3-
<Sidebar />
4-
<router-view></router-view>
5-
</div>
2+
<ul v-infinite-scroll="load" class="infinite-list flex-1" style="overflow: auto">
3+
<li class="flex text-4xl font-bold my-5 py-4">Home</li>
4+
<li v-for="(_, index) in Array(5)" :key="index" v-show="loading">
5+
<el-skeleton animated>
6+
<template #template>
7+
<el-card class="relative border-0" shadow="never">
8+
<div class="flex flex-row">
9+
<el-skeleton-item variant="circle" class="w-10 h-10 mr-3"></el-skeleton-item>
10+
<div class="flex-1">
11+
<el-skeleton-item variant="p" class="w-64"></el-skeleton-item>
12+
<el-skeleton-item variant="p" class="h-9 w-96"></el-skeleton-item>
13+
</div>
14+
</div>
15+
</el-card>
16+
</template>
17+
</el-skeleton>
18+
</li>
19+
<li v-for="note in notes" :key="note.id">
20+
<Note :note="note" :character="character" />
21+
</li>
22+
<li v-if="!loading && notes.length === 0">
23+
<p class="text-center text-gray-500">
24+
<span class="align-middle">No notes yet... Try to </span>
25+
<el-button class="align-middle" text bg type="primary" @click="tweet">sync a tweet</el-button>
26+
</p>
27+
</li>
28+
</ul>
629
</template>
730

831
<script setup lang="ts">
9-
import Sidebar from '@/components/Sidebar.vue';
32+
import { ref } from 'vue';
33+
import { useRouter } from 'vue-router';
34+
import { useStore } from '@/common/store';
35+
import Note from '@/components/Notes.vue';
36+
import type { Note as TypeNote } from 'unidata.js';
37+
38+
const router = useRouter();
39+
const store = useStore();
40+
41+
const notes = ref<TypeNote[]>([]);
42+
const loading = ref(true);
43+
44+
if (store.state.settings.address) {
45+
if (!store.state.characters?.list.length) {
46+
router.push('/mint');
47+
} else if (!store.state.settings.handle) {
48+
router.push('/characters');
49+
}
50+
} else {
51+
router.push('/');
52+
}
53+
54+
let cursor: any;
55+
let first = true;
56+
const load = async () => {
57+
if (cursor || first) {
58+
first = false;
59+
const result = await window.unidata.notes.get({
60+
identity: store.state.settings.handle!,
61+
platform: 'Crossbell',
62+
source: 'Crossbell Note',
63+
...(store.state.settings.notesShowCSSCOnly && {
64+
filter: {
65+
applications: ['CrossSync'],
66+
},
67+
}),
68+
cursor,
69+
});
70+
notes.value = notes.value.concat(result?.list || []);
71+
cursor = result?.cursor;
72+
loading.value = false;
73+
}
74+
};
75+
76+
load();
77+
78+
const character =
79+
store.state.characters!.list.find((character) => character.username === store.state.settings.handle) ||
80+
store.state.characters!.list[0]; // As a fallback, use the first character
81+
82+
const tweet = () => {
83+
const text = encodeURIComponent(
84+
`#OwnMyTweets I'm proudly syncing my Tweet to blockchain and truly owning my tweet!`,
85+
);
86+
window.open(`https://twitter.com/compose/tweet`);
87+
};
1088
</script>
1189

1290
<style></style>

‎src/pages/HomeRoot.vue‎

Lines changed: 0 additions & 92 deletions
This file was deleted.

‎src/pages/Layout.vue‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
<template>
2+
<div class="flex w-full h-full px-8 max-w-screen-lg">
3+
<Sidebar />
4+
<div class="flex-1 flex flex-col w-0">
5+
<router-view></router-view>
6+
</div>
7+
</div>
8+
</template>
9+
10+
<script setup lang="ts">
11+
import Sidebar from '@/components/Sidebar.vue';
12+
</script>
13+
14+
<style></style>

‎src/pages/Settings.vue‎

Lines changed: 32 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,40 @@
11
<template>
2-
<div class="flex-1 flex flex-col">
3-
<h1 class="flex text-4xl font-bold my-5 py-4">Settings</h1>
4-
<div class="flex flex-col">
5-
<el-col class="flex flex-col gap-3">
6-
<el-card shadow="hover" class="cursor-pointer" @click="switchcharacter">
7-
<div class="flex flex-row" style="justify-content: space-between">
8-
<div class="flex">Switch Character</div>
9-
<div class="flex w-4">
10-
<ArrowRight />
11-
</div>
2+
<h1 class="flex text-4xl font-bold my-5 py-4">Settings</h1>
3+
<div class="flex flex-col">
4+
<el-col class="flex flex-col gap-3">
5+
<el-card shadow="hover" class="cursor-pointer" @click="switchcharacter">
6+
<div class="flex flex-row" style="justify-content: space-between">
7+
<div class="flex">Switch Character</div>
8+
<div class="flex w-4">
9+
<ArrowRight />
1210
</div>
13-
</el-card>
14-
<el-card shadow="hover" class="cursor-pointer" @click="switchAccount">
15-
<div class="flex flex-row" style="justify-content: space-between">
16-
<div class="flex">Switch Account</div>
17-
<div class="flex w-4">
18-
<ArrowRight />
19-
</div>
11+
</div>
12+
</el-card>
13+
<el-card shadow="hover" class="cursor-pointer" @click="switchAccount">
14+
<div class="flex flex-row" style="justify-content: space-between">
15+
<div class="flex">Switch Account</div>
16+
<div class="flex w-4">
17+
<ArrowRight />
2018
</div>
21-
</el-card>
22-
<el-card shadow="hover" class="cursor-pointer">
23-
<div class="flex flex-row" style="justify-content: space-between">
24-
<div class="flex">Syncing</div>
25-
<div class="flex">
26-
<el-switch class="switch h-6" v-model="isSyncing" @change="setSyncing" />
27-
</div>
19+
</div>
20+
</el-card>
21+
<el-card shadow="hover" class="cursor-pointer">
22+
<div class="flex flex-row" style="justify-content: space-between">
23+
<div class="flex">Syncing</div>
24+
<div class="flex">
25+
<el-switch class="switch h-6" v-model="isSyncing" @change="setSyncing" />
2826
</div>
29-
</el-card>
30-
<el-card shadow="hover" class="cursor-pointer">
31-
<div class="flex flex-row" style="justify-content: space-between">
32-
<div class="flex">Show CrossSync notes only</div>
33-
<div class="flex">
34-
<el-switch class="switch h-6" v-model="isNotesCSSCOnly" @change="setNotesCSSCOnly" />
35-
</div>
27+
</div>
28+
</el-card>
29+
<el-card shadow="hover" class="cursor-pointer">
30+
<div class="flex flex-row" style="justify-content: space-between">
31+
<div class="flex">Show CrossSync notes only</div>
32+
<div class="flex">
33+
<el-switch class="switch h-6" v-model="isNotesCSSCOnly" @change="setNotesCSSCOnly" />
3634
</div>
37-
</el-card>
38-
</el-col>
39-
</div>
35+
</div>
36+
</el-card>
37+
</el-col>
4038
</div>
4139
</template>
4240

0 commit comments

Comments
 (0)