Compare commits

..

395 commits

Author SHA1 Message Date
b217b4dc25
Merge branch 'pull-v0.13.2'
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
ci/woodpecker/tag/woodpecker Pipeline was successful
2024-04-07 14:35:26 +02:00
f2edec194f
feat(config): switch default instance
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
ci/woodpecker/pr/woodpecker Pipeline was successful
ci/woodpecker/pull_request_closed/woodpecker Pipeline was successful
set fedi.femby.page as default instance
2024-04-07 14:31:19 +02:00
087f8cc992
fix(ci): add missing docker pushes 2024-04-07 14:29:15 +02:00
6efbf8768b
fix(ci): add secrets 2024-04-07 14:29:15 +02:00
cd934fcd55
fix(ci): docker login 2024-04-07 14:29:15 +02:00
7f1e97a37c
fix(ci): remove docker login 2024-04-07 14:29:15 +02:00
58c84b2f9b
fix(ci): add docker login 2024-04-07 14:29:14 +02:00
322ffeef12
feat(ci): add docker push test 2024-04-07 14:29:14 +02:00
4a8110a52e
fix(ci): add missing flags docker buildx 2024-04-07 14:29:14 +02:00
d481c0ae7a
fix(ci): added missing flag for cut 2024-04-07 14:29:14 +02:00
68ffb627e7
fix(ci): deleted sh uncompatible line 2024-04-07 14:29:14 +02:00
b221687139
feat(ci): Made ci sh compatible (hopefully^^) 2024-04-07 14:29:14 +02:00
7b10620cca
feat(ci): Add build tags 2024-04-07 14:29:13 +02:00
498face3cf
test(ci): 2024-04-07 14:29:13 +02:00
672ff46072
test(ci): add git to image 2024-04-07 14:29:13 +02:00
81b5f8b8e7
test(ci): another syntax test 2024-04-07 14:29:13 +02:00
721e55be06
test(ci): another syntax test 2024-04-07 14:29:13 +02:00
eba4cc0757
test(ci): another syntax test 2024-04-07 14:29:13 +02:00
80818ed52d
test(ci): syntax test 2024-04-07 14:28:32 +02:00
patak-dev
25fb7c1c97 chore: release v0.13.2 2024-04-05 18:29:15 +02:00
TAKAHASHI Shuuji
839aa52e86
fix: adjust background spacing in direct message (#2764) 2024-04-05 16:23:52 +00:00
TAKAHASHI Shuuji
9ff55289ea
ci(ci.yml): limit maximum execution time of ci test (#2763) 2024-04-05 16:19:53 +00:00
Joaquín Sánchez
73293fbcd3
chore: update nuxt to 3.11.2 (#2755) 2024-04-05 14:34:42 +00:00
TAKAHASHI Shuuji
a27c218802
chore: update github avatar images (#2762) 2024-04-05 14:34:19 +00:00
Emanuel Pina
f8fc0efadc
feat(i18n): Update portuguese from Portugal translation (#2756) 2024-04-05 09:16:30 +00:00
Joaquín Sánchez
618a5b2df3
chore(ui): use full width in settings toggle items (#2754) 2024-04-05 09:16:11 +00:00
lazzzis
1146dca5f6
fix(ui): media preview card is misaligned (#2751) 2024-04-05 09:15:44 +00:00
Joaquín Sánchez
f86e856ee6
feat(i18n): add missing spanish translations (gifs, docs and contributing) (#2753) 2024-04-04 18:36:03 +00:00
renovate[bot]
6d13d61227
chore(deps): update devdependencies (#2725)
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: TAKAHASHI Shuuji <shuuji3@gmail.com>
2024-04-04 16:47:27 +00:00
Francesco
0de9825bf2
feat(i18n): Update it-IT locale (#2750) 2024-04-04 13:25:09 +00:00
Joaquín Sánchez
3f0b234cc4
feat(ui): add max. file size check before upload attachment (#2709)
Co-authored-by: TAKAHASHI Shuuji <shuuji3@gmail.com>
2024-04-04 10:28:18 +00:00
lazzzis
8f04ea8eee
feat(ui): improve gif support (#2752) 2024-04-04 10:27:52 +00:00
Emanuel Pina
7dcafa3fe0
feat(i18n): Update portuguese from Portugal translation (#2747) 2024-04-04 05:17:03 +00:00
Joaquín Sánchez
bead2183b2
fix(ui): don't scroll on settings item click when external or _blank target link (#2742) 2024-04-03 13:59:42 +00:00
patak
59dda09cd4
fix: notifications in update timeline (#2740) 2024-04-03 13:59:24 +00:00
lazzzis
d0b115751f
feat(ui): style blockquote (#2744) 2024-04-03 04:17:52 +00:00
lazzzis
c6787aae3f
fix(ui): clicking on custom emoji does not navigate to status detail (#2743) 2024-04-03 04:17:30 +00:00
patak
9025416ab3
feat: update info dialog (#2741) 2024-04-02 03:17:45 +00:00
TAKAHASHI Shuuji
aa28257754
feat: add "Documentation" link to "About" page (#2734) 2024-04-01 14:57:11 +00:00
TAKAHASHI Shuuji
d807e06fa0
refactor: various typo fixes (#2735) 2024-04-01 14:56:30 +00:00
TAKAHASHI Shuuji
611d556936
feat: put sign-in icon to default "Sign in" button (#2736) 2024-04-01 14:55:31 +00:00
Xabi
4313002950
feat(i18n): update eu-ES.json (#2737) 2024-04-01 14:54:37 +00:00
TAKAHASHI Shuuji
de11a60b17
feat: add "How to contribute?" link next to language status (#2733) 2024-04-01 05:27:47 +00:00
TAKAHASHI Shuuji
5064b269e7
feat: show background color for direct post to reduce mistake (#2732) 2024-04-01 05:26:51 +00:00
TAKAHASHI Shuuji
d8d9975756
fix: hide duplicated status actions items on details page in zen mode (#2731) 2024-04-01 05:25:53 +00:00
TAKAHASHI Shuuji
eee671cdc3
fix: improve keyboard operability especially on search page and editor (#2730)
Co-authored-by: patak <583075+patak-dev@users.noreply.github.com>
2024-04-01 05:24:42 +00:00
lazzzis
587c063aba
fix(ui): remove a duplicated command (#2718) 2024-03-30 04:19:22 +00:00
lazzzis
28514e956d
fix(ui): wrong polls are removed (#2720) 2024-03-30 04:18:33 +00:00
lazzzis
42aeb8fa35
fix(ui): prevent from navigating to search page when opening command panel (#2719) 2024-03-30 04:15:58 +00:00
Joaquín Sánchez
f6f50a582e
fix(ui): change status actions title (#2717) 2024-03-29 20:04:55 +00:00
patak-dev
f86818867b chore: release v0.13.1 2024-03-29 16:37:28 +01:00
Sma11X
82d962a54b
fix: add missing notification event type (#2714) 2024-03-29 15:31:53 +00:00
renovate[bot]
1b189043e4
chore(deps): update devdependencies (major) (#2400)
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
2024-03-26 08:51:07 +00:00
renovate[bot]
a4867566d9
chore(deps): update devdependencies (#2697)
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
2024-03-26 08:34:06 +00:00
renovate[bot]
0757db69b2
chore(deps): update dependency @types/prettier to v3 (#2712)
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
2024-03-26 08:33:11 +00:00
renovate[bot]
f0de25c992
chore(deps): update dependency @antfu/eslint-config to ^2.9.0 (#2711)
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
2024-03-26 08:32:33 +00:00
TAKAHASHI Shuuji
660549b08b
chore: update masto to v6.7.0 (#2708) 2024-03-21 15:18:53 +00:00
Joaquín Sánchez
7807730118
feat(i18n): add missing spanish mute duration dialog entries (#2696) 2024-03-21 12:37:57 +00:00
Joaquín Sánchez
b526db0860
chore: update i18n module to 8.2.0 (#2703) 2024-03-21 12:13:28 +00:00
Sma11X
0133324ded
fix: correct local timeline stream (#2707) 2024-03-21 10:08:51 +00:00
TAKAHASHI Shuuji
e9ab0cd40b
fix: prevent showing notification errors for dev for known emoji reaction types (#2704) 2024-03-19 15:04:16 +00:00
Joaquín Sánchez
9251ec496b
chore: add ofetch to typescript.hoist (#2693)
Co-authored-by: Daniel Roe <daniel@roe.dev>
2024-03-19 12:56:14 +00:00
renovate[bot]
bd4cd02b2b
chore(deps): update pnpm to v8.15.5 (#2698)
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
2024-03-19 12:40:13 +00:00
Joaquín Sánchez
74ccfece5d
chore: update nuxt to 3.11.1 (#2702) 2024-03-19 12:36:25 +00:00
35b4c80311
fix(ci): add missing docker pushes
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
ci/woodpecker/tag/woodpecker Pipeline was successful
2024-03-18 14:50:56 +01:00
f6a081d199 Merge pull request 'feat-add-woodpecker' (#1) from feat-add-woodpecker into main
All checks were successful
ci/woodpecker/push/woodpecker Pipeline was successful
Reviewed-on: #1
2024-03-18 13:42:55 +00:00
5e419045ed
fix(ci): add secrets
All checks were successful
ci/woodpecker/pr/woodpecker Pipeline was successful
ci/woodpecker/pull_request_closed/woodpecker Pipeline was successful
2024-03-18 14:24:49 +01:00
cfdbb66b96
fix(ci): docker login 2024-03-18 14:16:41 +01:00
c717aace86
fix(ci): remove docker login 2024-03-18 14:10:31 +01:00
6713329a5e
fix(ci): add docker login 2024-03-18 14:00:02 +01:00
7470468077
feat(ci): add docker push test 2024-03-18 13:53:05 +01:00
9044b3bcad
fix(ci): add missing flags docker buildx 2024-03-18 13:41:39 +01:00
5bd9dce91e
fix(ci): added missing flag for cut 2024-03-18 13:39:40 +01:00
12e14cfc05
fix(ci): deleted sh uncompatible line 2024-03-18 13:37:51 +01:00
1ea4399765
feat(ci): Made ci sh compatible (hopefully^^) 2024-03-18 13:34:44 +01:00
991cb812da
feat(ci): Add build tags 2024-03-18 13:26:08 +01:00
Sma11X
c89e499f96
fix: pre tag overwritten by default style (#2699) 2024-03-18 11:34:03 +00:00
Dohány Tamás
89e3582dd7
feat(i18n): Update hu-HU.json (#2694) 2024-03-17 19:11:42 +00:00
TAKAHASHI Shuuji
48c013709a
ci(docker.yml): support linux/arm64 container (#2691) 2024-03-17 15:15:04 +00:00
renovate[bot]
f90f0a2e61
chore(deps): update pnpm to v8.15.4 (#2627)
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
2024-03-17 15:14:19 +00:00
renovate[bot]
c58b585855
chore(deps): update lint (#2399)
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
2024-03-17 15:14:04 +00:00
Joaquín Sánchez
ded2e0f3d7
chore: update nuxt to 3.11.0 (#2692) 2024-03-17 14:32:02 +00:00
9b77efe1d7
test(ci): 2024-03-16 15:52:25 +01:00
aec670a903
test(ci): add git to image 2024-03-16 15:48:38 +01:00
1218f92133
test(ci): another syntax test 2024-03-16 15:45:13 +01:00
7c0986a005
test(ci): another syntax test 2024-03-16 15:42:49 +01:00
ac01207283
test(ci): another syntax test 2024-03-16 15:37:04 +01:00
ef169d682f
test(ci): syntax test 2024-03-16 15:33:04 +01:00
Joaquín Sánchez
21d5633233
chore: bump to eslint-config to 2.8.1 (#2685) 2024-03-13 06:39:28 +00:00
Joaquín Sánchez
7703565c75
fix(ui): hashtags not working when composing (#2686) 2024-03-12 20:47:05 +00:00
cuithon
5a9546ec0a
chore: fix typo (#2681)
Signed-off-by: cuithon <dscs@outlook.com>
2024-03-12 07:58:20 +00:00
patak
bc30a8bd82 chore: release v0.13.0 2024-03-11 12:08:52 +01:00
Duy
c432c2bd0d
feat(i18n): Update vi-VN.json (#2664) 2024-03-11 10:55:18 +00:00
Francesco
364fbd350b
feat(i18n): Update it-IT locale (#2666) 2024-03-11 10:55:05 +00:00
Xabi
c64580f782
feat(i18n): update eu-ES.json (#2670) 2024-03-11 10:54:53 +00:00
Emanuel Pina
e7dfdafd59
feat(i18n): Update portuguese from Portugal translation (#2671) 2024-03-11 10:54:38 +00:00
Ayo Ayco
b06ec9356d
feat(i18n): update Tagalog translations (#2677) 2024-03-11 10:54:20 +00:00
TAKAHASHI Shuuji
3b1a66c93c
fix: fix vue/no-ref-as-operand and vue/return-in-computed-property ESLint errors (#2679) 2024-03-11 10:53:25 +00:00
TAKAHASHI Shuuji
ed8a1811cc
chore: upgrade @vueuse/core from 10.8.0 to 10.9.0 (#2674) 2024-03-10 18:38:37 +00:00
TAKAHASHI Shuuji
dfbe2e080d
fix: prevent empty search keyword to send invalid request (#2676) 2024-03-10 18:37:32 +00:00
TAKAHASHI Shuuji
0fd9374e8c
fix: fix incorrect follow status on followers and following pages (#2669) 2024-03-09 19:31:40 +00:00
TAKAHASHI Shuuji
1c8e48bee4
fix: show loading spinner on follow button while fetching account relationship (#2667)
Co-authored-by: patak <583075+patak-dev@users.noreply.github.com>
2024-03-09 18:44:44 +00:00
TAKAHASHI Shuuji
3448335356
feat: allow to set mute duration and notifications mute option (#2665) 2024-03-09 09:52:41 +00:00
Joaquín Sánchez
4954473f50
chore: extract bg and theme colors to constants (#2662) 2024-03-07 19:15:35 +00:00
TAKAHASHI Shuuji
efa17caf5e
fix: consistent hover highlight styling in mobile bottom navigation menus (#2661) 2024-03-07 19:14:20 +00:00
Joaquín Sánchez
df165f0023
fix(pwa): wrong web manifest colors (#2659) 2024-03-07 14:55:27 +00:00
TAKAHASHI Shuuji
0f583ece28
feat: remember last accessed explore tab (#2658) 2024-03-07 14:33:25 +00:00
Ivan Demchuk
d579977790
feat(i18n): update Ukrainian translations (#2660) 2024-03-07 13:41:24 +00:00
TAKAHASHI Shuuji
8786c83db7
fix: remember last accessed notification tab (#2654) 2024-03-06 22:00:07 +00:00
patak
1ce913e69d chore: release v0.12.1 2024-03-06 16:52:16 +01:00
Joaquín Sánchez
48a8b74e7c
fix(ui): mentions not working when composing (#2655) 2024-03-06 15:42:41 +00:00
patak
1ff13952b0 chore: release v0.12.0 2024-03-06 08:48:14 +01:00
Francesco
02f7c4b291
feat(i18n): Update it-IT locale (#2652) 2024-03-05 20:12:05 +00:00
Joaquín Sánchez
9da77637b2
chore: bump to eslint-config v2.8.0 (#2651)
Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>
2024-03-05 14:48:58 +00:00
Joaquín Sánchez
62f70250d5
fix(ui): wrong reply to account (#2649) 2024-03-05 13:21:58 +00:00
Joaquín Sánchez
873c62e9ef
feat(i18n): add missing nav.hashtags entry for Spanish translation (#2650) 2024-03-05 13:21:12 +00:00
Emanuel Pina
b1ff1e6277
feat(i18n): Update portuguese from Portugal translation (#2648) 2024-03-05 13:20:44 +00:00
TAKAHASHI Shuuji
f644148844
feat: introduce new "Followed tags" page (#2642)
Co-authored-by: patak <583075+patak-dev@users.noreply.github.com>
2024-03-05 10:27:10 +00:00
Joaquín Sánchez
3120bbb77f
feat(content-rich html parsing): add paragraphs LTR/RTL direction support (#2545) 2024-03-05 06:25:58 +00:00
renovate[bot]
6cbe65c9d8
chore(deps): update devdependencies (#2646)
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
2024-03-04 20:39:12 +00:00
qezwan
1c908363cb
feat(i18n): Add central kurdish locale(ckb) (#2332)
Co-authored-by: userquin <userquin@gmail.com>
2024-03-04 20:28:57 +00:00
Jafar Farganlooj
c01a15c930
feat(i18n): Add Persian translation (#2535)
Co-authored-by: userquin <userquin@gmail.com>
2024-03-04 19:59:03 +00:00
nonnullish
0c15aa55d8
fix: fix emoji placement (#2626) (#2645) 2024-03-04 19:56:59 +00:00
Joaquín Sánchez
9f04e17e57
fix(ui): avoid fetching status account in replying to until visible (#2638) 2024-03-04 19:55:02 +00:00
Joaquín Sánchez
308b50cbad
feat(ui): fetch account data on demand (#2632) 2024-03-04 19:20:13 +00:00
TAKAHASHI Shuuji
e44833b18a
feat: show tag hover card when hovering cursor on hashtag links (#2621)
Co-authored-by: userquin <userquin@gmail.com>
2024-03-04 16:45:25 +00:00
Joaquín Sánchez
0fa87f71a4
chore(tests): fix vitest can't terminate worker (#2644) 2024-03-04 16:41:38 +00:00
Emanuel Pina
edfbe2c3ed
feat(i18n): Update portuguese from Portugal translation (#2633) 2024-03-04 16:02:35 +00:00
Joaquín Sánchez
70c7e93919
refactor: update no reactivity transform changes (#2639) 2024-03-04 16:01:56 +00:00
TAKAHASHI Shuuji
95e466146d
fix: show correct reply target user account in reply post header (#2640) 2024-02-29 20:55:46 +00:00
Joaquín Sánchez
efec212a9f
fix(pwa): update pwa plugin to fix broken prompt (#2634) 2024-02-29 16:55:31 +00:00
Kevin Pliester
1844af0a41
feat(i18n): German translation for new shortcuts (#2641) 2024-02-29 16:09:04 +00:00
Joaquín Sánchez
72b80d4984
fix(ui): missing replying to links (#2637) 2024-02-28 18:02:09 +00:00
Francesco
6dc5a68c80
feat(i18n): Update it-IT locale (#2630) 2024-02-26 13:22:51 +00:00
TAKAHASHI Shuuji
310b32c123
fix: allow to edit alt description of attached image again (#2631) 2024-02-26 13:11:21 +00:00
Joaquín Sánchez
748dd5e19f
fix(cache): return cached account as promise (#2623) 2024-02-25 19:43:34 +00:00
Joaquín Sánchez
c00d6f7bf8
feat(ui): add missing goto magic keys spanish translation entries (#2625) 2024-02-25 19:39:57 +00:00
Joaquín Sánchez
fc5d248094
fix(ui): account mentions not being fetched when visible (#2624) 2024-02-25 19:28:38 +00:00
Joaquín Sánchez
6f20ce5bba
chore(test): add hanging-process reporter on CI (#2622) 2024-02-25 14:13:27 +00:00
TAKAHASHI Shuuji
edcc8741bf
feat: add several new shortcut keys for navigation (#2618) 2024-02-24 19:28:56 +00:00
renovate[bot]
3584151fab
fix(deps): update tiptap to v2.2.4 (#2398)
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: userquin <userquin@gmail.com>
2024-02-24 19:26:14 +00:00
Joaquín Sánchez
efb6967e6a
fix(ui): help preview tabindex, auto focus and buttons (#2616) 2024-02-24 18:24:55 +00:00
Joaquín Sánchez
eddbb1eee9
chore: cleanup isHydrated (#2614)
Co-authored-by: patak <583075+patak-dev@users.noreply.github.com>
2024-02-24 18:24:19 +00:00
Joaquín Sánchez
6b40319723
fix(ui): wrong tabindex usage 2 (#2617) 2024-02-24 18:23:37 +00:00
Joaquín Sánchez
913e2892f7
fix(ui): wrong tabindex usage (#2615) 2024-02-24 18:13:12 +00:00
renovate[bot]
a3c5272e07
chore(deps): update devdependencies (#2388)
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
2024-02-24 16:56:38 +00:00
Joaquín Sánchez
55037f04cd
chore: update nuxt to 3.10.3 (#2610) 2024-02-24 16:46:14 +00:00
patak
1fefb6e5b6
fix: paginator watch (#2613) 2024-02-24 14:51:51 +00:00
patak
3769176eaa
feat: . shortcut to show new items (#2612) 2024-02-24 14:46:54 +00:00
TAKAHASHI Shuuji
082650d458
fix: fix [object Object] on the mentions tab (#2611) 2024-02-24 14:18:13 +00:00
Joaquín Sánchez
36004a7eba
feat: bump to latest vue 3.4.19 (#2607)
Co-authored-by: patak <matias.capeletto@gmail.com>
2024-02-24 12:24:21 +00:00
Joaquín Sánchez
81ef8ff9aa
chore: include .gitattributes for eol (#2606) 2024-02-23 13:32:51 +00:00
Joaquín Sánchez
da163903b1
chore: bump to @vueuse/gesture v2.0.0 (#2605) 2024-02-23 13:04:44 +00:00
patak
ccfa7a8d10
refactor: no reactivity transform (#2600) 2024-02-21 15:20:08 +00:00
Xabi
b9394c2fa5
fix(i18n): update eu-ES.json (#2594) 2024-02-19 12:42:57 +00:00
Yudai Nishiyama
1954c34628
feat(i18n): Update ja-JP.json (#2588) 2024-02-19 12:05:02 +00:00
patak
9f005a0a59 chore: release v0.11.0 2024-02-19 10:33:00 +01:00
TAKAHASHI Shuuji
bf0c562794
fix(suggestion): allow case-insensitive emoji suggestion (#2565) 2024-02-19 09:23:58 +00:00
renovate[bot]
54fe0c1ab9
chore(deps): update dependency vitest to ^1.3.0 (#2556)
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
2024-02-17 17:29:14 +00:00
Shinigami
1bbc2eca24
fix: notification badge (#2592)
Co-authored-by: Ayo <ramon.aycojr@gmail.com>
2024-02-16 16:48:53 +00:00
renovate[bot]
dcc1b74824
chore(deps): update pnpm to v8.15.3 (#2557)
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
2024-02-15 15:49:27 +00:00
ocavue
8eb6b2378a
refactor: migrate from shikiji to shiki v1 (#2591) 2024-02-15 07:43:09 +00:00
lazzzis
40415f34a4
fix: fix tooltip overlaps with editor tool popup on Mobile (#2582) 2024-02-11 06:39:45 +00:00
Emanuel Pina
be4752ee0c
feat(i18n): Update portuguese from Portugal translation (#2577) 2024-02-08 15:41:26 +00:00
Joaquín Sánchez
30e2295af4
feat(i18n): Update es.json (#2576) 2024-01-26 23:23:57 +00:00
华丽
285f83e2fa
feat: Add option to preserve whitespace in parseOptions (#2448) 2024-01-26 18:44:07 +00:00
Duy
8db37617d4
feat(i18n): Update vi-VN.json (#2574) 2024-01-26 18:43:07 +00:00
Francesco
172883a499
feat(i18n): Update it-IT locale (#2572) 2024-01-26 03:21:23 +00:00
TAKAHASHI Shuuji
2a59543836
fix: allow to translate "Lock" string on profile (#2571) 2024-01-24 15:48:24 +00:00
TAKAHASHI Shuuji
77b917a921
fix: rename tab label from "Mention" to "Mentions" (#2570) 2024-01-24 12:12:42 +00:00
Francesco
af8a6e6809
feat(i18n): Update it-IT locale (#2569) 2024-01-24 09:13:02 +00:00
Francesco
6d8b33a58a
feat(i18n): Update it-IT locale (#2567) 2024-01-23 05:26:09 +00:00
patak
7322711609
fix: subscribe to proper user.notification stream (#2566) 2024-01-21 08:52:52 +00:00
Duy
b8e8693342
feat(i18n): Update vi-VN.json (#2560) 2024-01-21 08:31:22 +00:00
TAKAHASHI Shuuji
f0bc78ba2c
refactor: fix lint warnings (#2564) 2024-01-21 09:30:15 +01:00
TAKAHASHI Shuuji
cadf1b4a7c
feat: add Bluesky and Friendica icons (#2563) 2024-01-18 10:21:49 +00:00
TAKAHASHI Shuuji
f79d84ad6e
feat: add new setting to disable blur for low-performance device (#2561) 2024-01-18 08:18:49 +00:00
renovate[bot]
b0125eb3fc
chore(deps): update docker/setup-qemu-action action to v3 (#2558)
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
2024-01-15 08:35:52 +00:00
Emanuel Pina
77175416a6
feat(i18n): Update portuguese from Portugal translation (#2555) 2024-01-10 15:31:28 +00:00
renovate[bot]
7836edd10a
chore(deps): update docker/metadata-action action to v5 (#2527)
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
2024-01-10 15:02:29 +00:00
renovate[bot]
0ae189207f
chore(deps): update docker/login-action action to v3 (#2515)
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
2024-01-10 14:01:10 +00:00
renovate[bot]
56d4967eb7
chore(deps): update docker/setup-buildx-action action to v3 (#2528)
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
2024-01-10 13:46:05 +00:00
TAKAHASHI Shuuji
0451ac98c9
feat: improve title and layout of the confirm dialog (#2307) 2024-01-09 19:51:36 +00:00
ghose
54e53889e5
feat(i18n): updated gl-ES translation (#2522)
Co-authored-by: Joaquín Sánchez <userquin@gmail.com>
Co-authored-by: patak <matias.capeletto@gmail.com>
2024-01-09 14:35:04 +01:00
yrming
149963c304
feat(i18n): complete the translation of copy_account_name (#2487) 2024-01-09 09:12:29 +00:00
Cesar Gomez
44f5ec1fa2
feat(i18n): missing and rewording es and es-419 keys (#2511)
Co-authored-by: patak <matias.capeletto@gmail.com>
2024-01-09 09:08:42 +00:00
patak
6c5bb83ac3
feat: upgrade to masto.js v6 (#2530) 2024-01-09 08:56:15 +00:00
Joshix-1
d8ea685803
fix: meta og:url should use the origin of the request instead of elk.zone (#2550) 2024-01-09 08:14:35 +00:00
Duy
3fa1fc349c
feat(i18n): update vi-VN.json (#2506) 2024-01-08 20:26:04 +00:00
Joaquín Sánchez
3adf92ea56
feat: add LTR/RTL in hashtags and mentions support (#2541)
Co-authored-by: Daniel Roe <daniel@roe.dev>
2024-01-04 19:51:32 +00:00
Matty Jorgensen
b016320eaf
feat: add Vercel KV (#2533) 2024-01-02 10:58:37 +00:00
ocavue
77588c1890
fix: trigger code block highlighting when the highlighter is ready (#2539) 2024-01-01 16:46:37 +00:00
北雁云依
e43993770d
fix: spoiler button style in notifications (#2537) 2024-01-01 17:48:52 +01:00
TAKAHASHI Shuuji
9070fa4053
feat: add a new link icon (#2534) 2024-01-01 17:48:10 +01:00
Roshan Jossy
7f041c3ac8
docs: use GitHub markdown formatting for note in Readme (#2536) 2024-01-01 17:47:49 +01:00
Sebastian Di Luzio
b7c22287d6
chore: run unit tests in watch mode by default (#2525) 2023-12-22 21:50:59 +00:00
Sebastian Di Luzio
07042b9f31
fix: correct linking of theme colors (#2524) 2023-12-22 13:25:34 +01:00
Shinigami
c0bb6e293c
feat: show emoji tooltip (#2485) 2023-12-22 12:16:46 +00:00
ocavue
74138a9a58
refactor: migrate from shiki to shikiji (#2520) 2023-12-20 18:54:40 +00:00
renovate[bot]
e63473a5f8
chore(deps): update pnpm to v8.12.1 (#2514)
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
2023-12-19 20:59:20 +00:00
renovate[bot]
24378e0be8
chore(deps): update dependency vitest to ^1.1.0 (#2338)
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
2023-12-19 20:58:50 +00:00
Daniel Roe
5ce005b55a
chore: correct type import from floating-vue (#2518) 2023-12-19 22:31:39 +01:00
Daniel Roe
3ae2d50bff
test: reenable nuxt runtime tests (with latest test-utils) (#2497) 2023-12-14 11:45:52 +00:00
renovate[bot]
2b421f1039
chore(deps): update pnpm to v8.12.0 (#2507)
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
2023-12-12 21:42:53 +00:00
renovate[bot]
e0ddbc1da2
chore(deps): update dependency vitest to v1 (#2508)
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
2023-12-12 21:42:19 +00:00
Xabi
ca3a818678
fix(i18n): update Basque localisation (#2503) 2023-12-09 16:05:10 +00:00
Joaquín Sánchez
9155c32ece
chore(pwa): improve DX for $pwa (#2498) 2023-12-09 16:04:41 +00:00
Cesar Gomez
3dbdb99118
feat(i18n): es & es-419 locales sync (#2505) 2023-12-09 16:03:43 +00:00
renovate[bot]
c3d96d2811
chore(deps): update dependency node to v20 (#2501)
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
2023-12-05 10:18:22 +00:00
renovate[bot]
429d1d7ce8
chore(deps): update actions/setup-node action to v4 (#2499)
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
2023-12-05 10:18:19 +00:00
Joaquín Sánchez
5503ecbea2
chore(pwa): change sw generation logic (#2494) 2023-12-01 17:28:31 +00:00
Tamas
21376e013a
feat(i18n): hu-HU.json update (#2489) 2023-11-29 22:27:04 +00:00
Daniel Roe
17f6d93c7c
chore: update nuxt to v3.8.2 (#2490) 2023-11-29 22:26:10 +00:00
renovate[bot]
0e701afb98
chore(deps): update all non-major dependencies (#2389)
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
2023-11-29 17:55:12 +00:00
renovate[bot]
cdcc89518a
chore(deps): update actions/checkout action to v4 (#2391)
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
2023-11-29 17:54:45 +00:00
renovate[bot]
1f6a7186f8
chore(deps): update docker/build-push-action action to v5 (#2401)
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
2023-11-29 17:54:13 +00:00
Tamas
ad1461bd2d
feat(i18n): hu-HU.json issue (#2486)
Co-authored-by: Tamas Dohany <iamdtms@gmail.com>
Co-authored-by: Tamas Dohany <dohany.tamas@atlatszo.hu>
2023-11-29 11:19:28 +00:00
Daniel Roe
7ba9b05d12
chore: bump @nuxtjs/color-mode (#2488) 2023-11-29 11:09:44 +00:00
yrming
9c39eed209
feat: unify the style of under construction page (#2483) 2023-11-28 10:54:22 +00:00
Francesco
7ed95e317f
feat(i18n): Update it-IT locale (#2473) 2023-11-27 17:55:51 +00:00
Tamas
46105c86c6
feat(i18n): update hu-HU.json (#2480)
Co-authored-by: Tamas Dohany <iamdtms@gmail.com>
2023-11-27 12:19:13 +00:00
Sma11X
7785f4fe06
feat(settings): convert metadata to text (#2444) 2023-11-27 12:17:58 +00:00
Emanuel Pina
585d8c6f0b
fix(i18n): Update portuguese from Portugal translation (#2482) 2023-11-27 12:11:11 +00:00
Alex
1f752e65ed
fix: move the ALT text button for video attahcments to the top (#2479) 2023-11-24 08:19:53 +00:00
Tamas
7595162a0e
feat(i18n): update hu-HU.json (#2477)
Co-authored-by: Tamas Dohany <iamdtms@gmail.com>
2023-11-22 18:10:22 +00:00
TAKAHASHI Shuuji
20c30e92a3
feat: support Threads icon in profile links (#2474) 2023-11-17 08:40:23 +00:00
TAKAHASHI Shuuji
e00e4074e1
feat: put account name copy button (#2347) 2023-11-14 14:34:56 +00:00
patak
7ec76ffed9 chore: release v0.10.3 2023-11-14 11:05:09 +01:00
patak
c41b427c2e
fix: btn-solid text color for dark mode (#2471) 2023-11-13 17:30:36 +00:00
Ayo Ayco
c55545612e
feat: allow https as frame-src (#2468) 2023-11-12 06:42:02 +00:00
Adityawarman Dewa Putra
dab0502319
feat(i18n): Update id-ID locale (#2460) 2023-11-11 09:21:20 +00:00
Adityawarman Dewa Putra
10bd555926
feat: add pinterest icon in profile metadata (#2461) 2023-11-11 09:20:41 +00:00
Xabi
53dc1f37ca
fix(i18n): update Basque localisation (#2465) 2023-11-11 09:18:41 +00:00
TAKAHASHI Shuuji
68f92e07b7
feat(a11y): improve button color contrast with white text (#2449) 2023-11-09 20:24:11 +00:00
Ayo Ayco
957f0d3b17
feat: display embedded media player (#2417) 2023-11-07 09:57:44 +00:00
JP
0bd1209bee
feat(i18n): Update arabic locale (#2459) 2023-11-06 07:42:17 +00:00
Tamas
00c4a369cc
feat(i18n): update hu-HU.json (#2458)
Co-authored-by: Tamas Dohany <iamdtms@gmail.com>
2023-11-06 07:41:52 +00:00
Adityawarman Dewa Putra
8a5ddb7c87
feat(i18n): Update the id-ID locale (#2456) 2023-11-06 07:40:50 +00:00
Francesco
90878f97b5
feat(i18n): Update it-IT locale (#2440) 2023-11-03 15:00:41 +00:00
Emanuel Pina
09189378e0
fix(i18n): Update portuguese from Portugal translation (#2446) 2023-11-03 15:00:16 +00:00
Ɗʊƴ
769968c2e8
fix(i18n): Add new strings (#2447) 2023-11-03 14:59:33 +00:00
Tom Doe
5d09e7d2ab
fix: #2439 - endMessage in CommonPaginator (#2441) 2023-10-24 13:01:57 +00:00
Francesco
0924c9d9be
feat(i18n): Update it-IT locale (#2438) 2023-10-22 20:47:46 -05:00
Sma11X
293534fb8b
fix: correct links content with query symbol (#2377) 2023-10-22 16:14:37 +00:00
Sma11X
5fceb70971
feat: handle follow request (#2339) 2023-10-22 16:11:00 +00:00
Emanuel Pina
d825a71d1f
fix(i18n): Update portuguese from Portugal translation (#2437) 2023-10-22 16:07:23 +00:00
Daniel Roe
a47071d341 chore: bump some lockfile dependencies 2023-10-18 09:47:29 +01:00
Daniel Roe
52c947f9e5 chore: update nuxt-vitest 2023-10-18 09:36:46 +01:00
Xabi
07b7f38386
fix(i18n): update eu-ES.json (#2432) 2023-10-17 08:09:47 +00:00
TAKAHASHI Shuuji
291f99cbea
feat(ui): add "search" to the keyboard shortcut help (#2429) 2023-10-16 10:51:37 +00:00
Sma11X
1fe598f554
fix: some keyboard shortcuts not working in non-english (#2324) 2023-10-13 07:13:37 +00:00
Sma11X
e9f274f304
feat: replace links in status after translated (#2385)
Co-authored-by: patak <matias.capeletto@gmail.com>
2023-10-13 07:12:48 +00:00
Daniel Roe
ca0afe585d chore: dedupe dependencies 2023-10-12 16:30:35 +01:00
Joaquín Sánchez
1a0e83365a
fix(pwa): add manifest-src to CSP (#2428) 2023-10-12 16:57:52 +02:00
Anthony Fu
77a3bd833d chore: update devtools 2023-10-11 17:46:23 +08:00
Abel Derderian
02abe2d920
feat(i18n): Update the fr-FR locale (#2421) 2023-10-09 21:24:23 +00:00
Joaquín Sánchez
c8d9c4b871
fix(ui): exclude notifications without the status (#2375) 2023-10-09 20:33:02 +00:00
Emanuel Pina
fee811dd75
fix(i18n): Update portguese from Portugal translation (#2364) 2023-10-09 20:20:42 +00:00
Xabi
1910a1d782
fix(i18n): update Basque localisation (#2376) 2023-10-09 20:19:14 +00:00
Joaquín Sánchez
c387702bb1
feat(i18n): include missing Spanish entries (#2381) 2023-10-09 20:17:33 +00:00
Sebastian Di Luzio
e015adcf4e
fix: profile header avatar being pushed lower on smaller devices (#2423) 2023-10-09 20:14:04 +00:00
Daniel Roe
12eaae6bbb chore: export Emoji as explicit type 2023-10-03 00:09:18 +01:00
patak
e199e02e79 chore: release v0.10.2 2023-10-02 09:24:30 +02:00
Pavel Ruzicka
b42e77af24
i18n: update cs-CZ.json (#2418) 2023-10-01 02:41:21 -05:00
patak
0343898146 fix: revert publish height (#2334)
This reverts commit b74eec6a03.
2023-09-30 09:59:03 +02:00
TAKAHASHI Shuuji
b5f2cea1dc
feat(i18n): update Japanese localization (#2415) 2023-09-28 12:03:44 +00:00
Ɗʊƴ
2a9f607049
fix(i18n): Update vi-VN.json (#2396)
Co-authored-by: patak <matias.capeletto@gmail.com>
2023-09-25 19:11:15 +00:00
Francesco
043883bd8e
feat(i18n): Update it-IT locale (#2408) 2023-09-25 19:10:05 +00:00
Francesco
ed5592260f
feat(i18n): Update it-IT locale (#2370) 2023-09-20 06:52:50 +00:00
Sebastian Di Luzio
f4b0be8aed
feat: make new users signup notifications link to their profile (#2406) 2023-09-20 06:52:05 +00:00
Tamas
b723d51786
feat(i18n): Add Hungarian translation (hu-HU) (#2373)
Co-authored-by: Tamas Dohany <iamdtms@gmail.com>
Co-authored-by: Zsolt Botykai <zsolt.botykai@gmail.com>
2023-09-15 21:25:34 +00:00
renovate[bot]
25d4325bd0
chore(deps): update lint (#2390)
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
2023-09-13 06:34:15 +00:00
Anthony Fu
319f9c4ece fix(ui): improve notifications alignment and icons consistenty 2023-09-08 18:14:19 +02:00
Anthony Fu
06ef226440 chore: clean up footer 2023-09-08 17:57:08 +02:00
Anthony Fu
3691ec389a fix: improve elk-group-hover shortcut, close #2386 2023-09-08 17:56:29 +02:00
YRMING
ca2ca2bef4
feat: unify the format of locale keys (#2380) 2023-09-06 12:51:01 +00:00
Ayo Ayco
907d9999dc
feat: filter notifications by type (#2371)
Co-authored-by: Xabi <xabi.rn@gmail.com>
Co-authored-by: userquin <userquin@gmail.com>
2023-09-06 09:13:16 +00:00
renovate[bot]
e9c5de577e
chore(deps): update dependency lint-staged to v14 (#2354)
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
2023-09-05 14:22:33 +00:00
renovate[bot]
87d6ed39eb
fix(deps): update dependency iso-639-1 to v3 (#2355)
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
2023-09-05 13:43:52 +00:00
renovate[bot]
cf20ac29db
chore(deps): update lint (#2311)
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
2023-09-05 13:42:20 +00:00
renovate[bot]
1a96f87da0
fix(deps): update tiptap to v2.1.8 (#2256)
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
2023-09-05 13:42:01 +00:00
renovate[bot]
0f825a6efb
chore(deps): update devdependencies (#2310)
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Daniel Roe <daniel@roe.dev>
2023-09-05 12:55:03 +00:00
renovate[bot]
1b8d72105d
chore(deps): update pnpm to v8.7.1 (#2337)
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
2023-09-05 11:57:03 +00:00
TAKAHASHI Shuuji
5ef2996b40
feat: add keyboard shortcut helper link or button (#2365) 2023-08-28 15:24:34 +00:00
Sma11X
1ac3164d0c
fix(i18n): add missing translation (#2340) 2023-08-24 11:09:54 +00:00
Liberal dev
e4725d433e
fix(i18n): fix Korean translation (#2335) 2023-08-24 11:09:35 +00:00
Valtteri Laitinen
3716e3af6e
feat(i18n): update and improve Finnish locale (#2341) 2023-08-24 11:08:56 +00:00
Francesco
366f3e07df
feat(i18n): Update it-IT locale (#2350) 2023-08-24 11:06:00 +00:00
Joaquín Sánchez
6801ea6c2d
fix: compose page error (#2360) 2023-08-23 10:33:26 +00:00
Sma11X
4b37d19f65
fix: change status focus style (#2356) 2023-08-23 10:32:59 +00:00
Sma11X
c1bca79c50
fix: shrink the height of avatar (#2361) 2023-08-22 21:58:31 +00:00
Valtteri Laitinen
ee88c111f2
fix(i18n): use "post" and "boost" consistently (#2344) 2023-08-20 21:41:02 +00:00
舜岳
067550720a
refactor: solve the problem that the title is not centered (#2353) 2023-08-19 10:35:11 +00:00
Valtteri Laitinen
c5b1b32f2c
fix(i18n): correct typo (#2343) 2023-08-15 16:13:44 +00:00
Joaquín Sánchez
bd7436e5d2
feat(i18n): Add missing Spanish translations (#2336) 2023-08-14 14:05:35 +00:00
Valtteri Laitinen
8b883dc957
fix(i18n): delete unused strings (#2345) 2023-08-14 13:57:38 +00:00
Valtteri Laitinen
06808da616
fix(i18n): use normal question mark (#2342) 2023-08-14 13:56:33 +00:00
Anthony Fu
0b900128c1 chore: release v0.10.1 2023-08-13 12:31:14 +02:00
Florian Martinez
b74eec6a03
fix: publish height (#2334) 2023-08-13 08:39:18 +00:00
Florian Martinez
92d0f18389
fix: role indicator (#2333) 2023-08-13 08:28:32 +00:00
Liberal dev
c0f936f8fe
feat(i18n): Improve Korean translation (#2320) 2023-08-12 10:27:37 +00:00
Francesco
7e492422fe
fix(i18n): it-IT typo (#2323) 2023-08-12 10:27:07 +00:00
lazzzis
4325bca22b
feat(a11y): enhance post-related a11y features (#2328) 2023-08-12 10:26:37 +00:00
Duy
5a765187ab
fix(i18n): Update vi-VN.json (#2330) 2023-08-12 10:25:40 +00:00
lazzzis
e9a02ca337
fix: like/bookmark button is disappeared (#2327) 2023-08-12 12:25:24 +02:00
Xabi
221a6f2fc3
fix(i18n): update Basque localisation (#2325) 2023-08-11 12:21:40 +00:00
lazzzis
2267db11c6
feat: disabled boost button (#2326) 2023-08-11 11:56:47 +00:00
lazzzis
a4d34323ed
feat(a11y): add checkbox role to toggle items (#2321) 2023-08-10 10:18:35 +00:00
lazzzis
91db9b03a8
docs: fix a broken link in README (#2322) 2023-08-10 10:06:52 +00:00
Liberal dev
0be47261c7
fix(i18n): Improve Korean translation (#2319) 2023-08-09 22:33:12 +00:00
Liberal dev
49b39b7fa8
fix(i18n): Update Korean translation (#2318) 2023-08-09 18:59:32 +02:00
Vee Satayamas
1f37e3ab8b
feat(i18n): Add Thai locale (#2115) 2023-08-09 11:51:07 +00:00
Eric
e183c62036
fix(i18n): Update zh-CN.json (#2313) 2023-08-09 11:50:25 +00:00
Mikhail
370c8dd58e
fix(i18n): Add missing translations for ru-RU (#2212) 2023-08-09 11:49:15 +00:00
Liberal dev
b19f73c870
feat(i18n): Improve Korean translation (#2316) 2023-08-09 11:48:04 +00:00
Emanuel Pina
dccdcbbbe2
fix(i18n): Update portuguese from Portugal translation (#2285) 2023-08-09 11:47:25 +00:00
Duy
280911b233
fix(i18n): Update vi-VN.json (#2303) 2023-08-09 11:46:46 +00:00
Liberal dev
f3d17d3be2
fix: improve default font family (#2314) 2023-08-09 11:46:26 +00:00
Francesco
3f6cc16850
fix(i18n): Update it-IT locale (#2294) 2023-08-09 11:46:13 +00:00
Daniel Roe
4ebc8b6798 fix: deduplicate unstorage version 2023-08-08 11:30:38 +01:00
三咲智子 Kevin Deng
7079564ffe
refactor: upgrade vue-macros 2023-08-08 02:32:35 +08:00
Ayaka Rizumu
991034115b
feat: pull down to close bottom nav sidebar (#2290) 2023-08-03 15:05:58 +00:00
Nicolas Lœuillet
57814915d6
fix(i18n): fr-FR typo (#2295)
Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>
2023-08-02 10:45:53 +00:00
Chanhwi Joo
8181738d48
fix(i18n): Update Korean localization (#2292) 2023-08-02 10:44:24 +00:00
TAKAHASHI Shuuji
0a8cc317a9
feat: show delete confirmation dialog when clicking "Delete & re-draft" menu (#2296)
Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>
2023-08-02 10:41:47 +00:00
renovate[bot]
8df73b13bd
chore(deps): update dependency prettier to v3 (#2257)
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>
2023-08-02 10:37:43 +00:00
Sma11X
d975c6fc2c
fix: add attributes before status update (#2293) 2023-08-02 10:31:08 +00:00
renovate[bot]
67d5d5c00a
chore(deps): update lint (#2233)
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>
2023-08-02 10:28:18 +00:00
Sma11X
603e10b6ca
fix: check login in zen mode (#2258) 2023-08-02 10:27:31 +00:00
Anthony Fu
9ae0d9b744 ci: add merge_group event for merge queue 2023-08-02 12:13:23 +02:00
Anthony Fu
28f9540113 pref: improve unocss perf 2023-08-02 12:12:48 +02:00
Sma11X
468a17ad58
fix: nav more menu not active (#2300) 2023-08-02 11:43:24 +02:00
renovate[bot]
b84a6ccc32
chore(deps): update devdependencies (#2236)
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
2023-08-01 22:57:32 +01:00
Daniel Roe
a45b7173e5
chore: update to nuxt v3.6.5 (#2299) 2023-08-01 22:11:26 +01:00
三咲智子 Kevin Deng
d23f1d39eb
refactor: replace defineModels with defineModel 2023-08-01 17:44:01 +08:00
Daniel Roe
e6172ad38b chore: update nuxt-vitest 2023-08-01 10:36:19 +01:00
Daniel Roe
5870e8d6e6 test: work around mocking issue 2023-07-31 23:56:21 +01:00
renovate[bot]
3d696646c5
chore(deps): update dependency vitest to ^0.33.0 (#2235)
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
2023-07-31 20:20:25 +01:00
Daniel Roe
6edb6ccb15 chore: update nuxt-vitest 2023-07-31 19:53:33 +01:00
renovate[bot]
6cb7fca3ab
chore(deps): update all non-major dependencies (#2234)
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
2023-07-31 19:48:59 +01:00
Daniel Roe
3375563e64 fix: augment vueCompilerOptions in pkg-types 2023-07-31 17:15:53 +01:00
Liberal dev
832ee35a93
fix(i18n): update Korean localisation (#2275) 2023-07-30 21:39:32 +02:00
TAKAHASHI Shuuji
550540fad0
fix: correct ratio of profile header avatar (#2288) 2023-07-30 21:24:06 +02:00
Alex
e59c2af818
fix: cannot fullscreen due to Permission-Policy (#2281) 2023-07-29 20:45:30 +02:00
TAKAHASHI Shuuji
ee6ee30df1
feat: hide original post area in the edit widget (#2283) 2023-07-29 20:38:13 +02:00
Niklas Wolf
675f5184a0
feat: use configured writing/post language of user from mastodon (#2282) 2023-07-29 14:01:17 +02:00
tzhao11
0a9f2d99d5
feat(i18n): Update zh-CN locale (#2200) 2023-07-29 11:43:18 +02:00
Sma11X
35dcf91a06
feat(i18n): sync zh-CN (#2248) 2023-07-29 11:42:59 +02:00
kernoeb
7876727a41
chore(docs): add notice for notifications on Brave browser (#2260) 2023-07-29 11:02:34 +02:00
Xabi
3c3fad808d
fix(i18n): update eu-ES.json (#2259) 2023-07-29 11:02:09 +02:00
TAKAHASHI Shuuji
357fac4d49
feat: show save failed error messages on the profile config page (#2274) 2023-07-29 10:52:57 +02:00
Duy
f45f51d44b
feat(i18n): Update vi-VN.json (#2278) 2023-07-29 10:31:07 +02:00
Duy
5bbbf14c92
feat(i18n): update vi-VN.json (#2268) 2023-07-26 15:39:35 +02:00
Florian Martinez
0a933614fa
feat: role labels wrap (#2266) 2023-07-25 17:29:54 +02:00
Florian Martinez
22a1388d50
feat: add roles into account header and info (#2265) 2023-07-25 16:43:26 +02:00
TAKAHASHI Shuuji
0719ad0afd
docs: fix image URLs (#2264) 2023-07-25 07:15:07 +01:00
patak
1671dfb617 chore: release v0.10.0 2023-07-24 10:26:17 +02:00
TAKAHASHI Shuuji
b730fab643
fix: prevent the lost of focus on compose icons (#2253) 2023-07-22 19:22:17 +02:00
Francesco
81e1383da5
feat(i18n): Update it-IT locale (#2249) 2023-07-22 14:00:21 +02:00
linjin
cdc43775a6
fix: display background when text is selected (#2222) 2023-07-21 14:55:00 +02:00
Natsu Kagami
2a57c64fa0
fix: only add domain when none was provided (#2225) 2023-07-21 14:52:55 +02:00
Kowlin
8a86282951
fix: Show lock indicator with the correct state (#2226) 2023-07-21 14:50:36 +02:00
Emanuel Pina
da31709677
fix(i18n): Update portuguese from Portugal translation (#2242) 2023-07-21 14:48:12 +02:00
klrtk
b14a8e63c6
fix: Use favorite star icon in notifications when enabled (#2229) 2023-07-21 14:41:43 +02:00
TAKAHASHI Shuuji
cc89692d80
fix(a11y): make the bottom menu button focusable and navigable with a11y label (#2247) 2023-07-21 12:17:32 +02:00
Francesco
5782c326b2
feat(i18n): Update it-IT locale (#2246) 2023-07-21 09:08:49 +02:00
Kevin Pliester
af444391b5
fix(i18n): add missing translations for de-DE (#2241) 2023-07-19 14:40:27 +02:00
Cesar Gomez
9bc44f44a0
feat(i18n): sync report keys into es lang (#2202) 2023-07-19 14:16:06 +02:00
Abel Derderian
f7f4167b06
feat(i18n): Update the fr-FR locale (#2231) 2023-07-17 12:14:31 +02:00
Xabi
8fa9c40e86
fix(i18n): update Basque localisation (#2136) 2023-07-17 10:53:25 +02:00
Xabi
31a4924186
fix(i18n): update Basque localisation (#2230) 2023-07-17 10:52:39 +02:00
Emanuel Pina
a6b9d4a82b
fix(i18n): update portuguese from Portugal translation (#2186) 2023-07-15 15:21:15 +02:00
Florian Martinez
ca897bdd2f
feat: add experimental features descriptions (#2228)
Co-authored-by: patak <matias.capeletto@gmail.com>
2023-07-14 21:01:35 +02:00
Ryan Cao
fa44850686
chore(renovate): ignore node version correctly (#2224) 2023-07-11 16:03:59 +01:00
Natsu Kagami
a6e4da8c41
fix: add domain when querying for user on GoToSocial (#2221) 2023-07-11 13:59:48 +01:00
Daniel Roe
895c1ecd8d chore(docs): bump docus version and remove baseURL 2023-07-11 11:33:28 +01:00
Aaron Ransley
ae35f9d11d
fix: Update command key in keyboard shortcuts modal (#2208) 2023-07-10 11:32:15 +02:00
Joaquín Sánchez
2506c02c39
fix(ui): stop question mark propagation (#2209) 2023-07-10 11:29:42 +02:00
Joaquín Sánchez
a08d9d147c
fix: installed pwa shortcuts (#2205) 2023-07-07 11:56:06 +01:00
Daniel Roe
cb109b49b8 fix: don't redirect to generated path 2023-07-06 21:19:01 +01:00
Daniel Roe
d51303cb8b
chore: update to nuxt v3.6.2 (#2203) 2023-07-06 21:13:25 +01:00
patak
c00354c833 fix: custom emojis 2023-07-06 21:33:01 +02:00
三咲智子 Kevin Deng
1ee0ec68c5
feat: show hint on empty timeline 2023-07-05 14:33:41 +08:00
三咲智子 Kevin Deng
5c1411b3de
chore: fix pwa type 2023-07-04 13:32:22 +08:00
三咲智子 Kevin Deng
2d8ec4ab89
chore: upgrade deps 2023-07-04 13:18:36 +08:00
三咲智子 Kevin Deng
c7e20296a2
chore: remove default npm option 2023-07-04 13:06:17 +08:00
Horváth Bálint
a98ca69382
fix: status card confusion (#2196) 2023-07-03 21:04:16 +02:00
Philip Sorst
886fc89df6
fix(i18n): add missing translations for de-DE (#2194) 2023-07-03 18:34:43 +02:00
三咲智子 Kevin Deng
112502155e
feat: add account share 2023-07-03 15:58:48 +08:00
Guto Carvalho
be446f5433
docs: add bolha.us server to readme (#2191) 2023-07-03 15:46:55 +08:00
Francesco
a9f5e4b5e7
fix(i18n): update it-IT locale (#2178) 2023-07-02 22:13:05 +02:00
Joaquín Sánchez
78b8b441ba
fix(ui): do not show poll expiration if missing (#2176) 2023-07-03 02:12:24 +08:00
三咲智子 Kevin Deng
d52755a153
feat: withdraw follow request
closes #2179
closes #2162
2023-07-03 02:09:30 +08:00
三咲智子 Kevin Deng
d5856b83c6
feat: add locked for account 2023-07-03 01:55:18 +08:00
三咲智子 Kevin Deng
338e203b6f
chore: upgrade devtools 2023-07-03 01:31:09 +08:00
332 changed files with 17522 additions and 9736 deletions

View file

@ -11,7 +11,6 @@ dist
.netlify/ .netlify/
.eslintcache .eslintcache
public/shiki
public/emojis public/emojis
*~ *~

View file

@ -8,7 +8,7 @@ NUXT_CLOUDFLARE_ACCOUNT_ID=
NUXT_CLOUDFLARE_NAMESPACE_ID= NUXT_CLOUDFLARE_NAMESPACE_ID=
NUXT_CLOUDFLARE_API_TOKEN= NUXT_CLOUDFLARE_API_TOKEN=
# 'cloudflare' | 'fs' # 'cloudflare' | 'vercel' | 'fs'
NUXT_STORAGE_DRIVER= NUXT_STORAGE_DRIVER=
NUXT_STORAGE_FS_BASE= NUXT_STORAGE_FS_BASE=

View file

@ -1,15 +0,0 @@
*.css
*.png
*.ico
*.toml
*.patch
*.txt
Dockerfile
public/
public-dev/
public-staging/
https-dev-config/localhost.crt
https-dev-config/localhost.key
Dockerfile
elk-translation-status.json
docs/translation-status.json

View file

@ -1,18 +0,0 @@
{
"extends": "@antfu",
"ignorePatterns": ["!pages/public"],
"overrides": [
{
"files": ["locales/**.json"],
"rules": {
"jsonc/sort-keys": "error"
}
}
],
"rules": {
"vue/no-restricted-syntax":["error", {
"selector": "VElement[name='a']",
"message": "Use NuxtLink instead."
}]
}
}

1
.gitattributes vendored Normal file
View file

@ -0,0 +1 @@
* text=auto eol=lf

View file

@ -3,7 +3,6 @@
"extends": ["config:base", "schedule:weekly", "group:allNonMajor"], "extends": ["config:base", "schedule:weekly", "group:allNonMajor"],
"labels": ["c: dependencies"], "labels": ["c: dependencies"],
"rangeStrategy": "bump", "rangeStrategy": "bump",
"node": false,
"ignoreDeps": [ "ignoreDeps": [
"vue", "vue",
"vue-tsc", "vue-tsc",
@ -65,6 +64,10 @@
{ {
"groupName": "typescript", "groupName": "typescript",
"matchPackageNames": ["typescript"] "matchPackageNames": ["typescript"]
},
{
"matchDatasources": ["node-version"],
"enabled": false
} }
], ],
"vulnerabilityAlerts": { "vulnerabilityAlerts": {

View file

@ -10,17 +10,18 @@ on:
branches: branches:
- main - main
workflow_dispatch: {} workflow_dispatch: {}
merge_group: {}
jobs: jobs:
ci: ci:
runs-on: ubuntu-latest runs-on: ubuntu-latest
steps: steps:
- uses: actions/checkout@v3 - uses: actions/checkout@v4
- run: corepack enable - run: corepack enable
- uses: actions/setup-node@v3 - uses: actions/setup-node@v4
with: with:
node-version: 18 node-version: 20
cache: pnpm cache: pnpm
- name: 📦 Install dependencies - name: 📦 Install dependencies
@ -30,7 +31,8 @@ jobs:
run: pnpm nuxi prepare run: pnpm nuxi prepare
- name: 🧪 Test project - name: 🧪 Test project
run: pnpm test tests/unit run: pnpm test:ci
timeout-minutes: 10
- name: 📝 Lint - name: 📝 Lint
run: pnpm lint run: pnpm lint

View file

@ -16,29 +16,29 @@ jobs:
packages: write packages: write
steps: steps:
- name: Checkout - name: Checkout
uses: actions/checkout@v3 uses: actions/checkout@v4
- name: Docker meta - name: Docker meta
id: metal id: metal
uses: docker/metadata-action@v4 uses: docker/metadata-action@v5
with: with:
images: | images: |
ghcr.io/${{ github.repository }} ghcr.io/${{ github.repository }}
- name: Set up QEMU - name: Set up QEMU
uses: docker/setup-qemu-action@v2 uses: docker/setup-qemu-action@v3
- name: Set up Docker Buildx - name: Set up Docker Buildx
uses: docker/setup-buildx-action@v2 uses: docker/setup-buildx-action@v3
- name: Login to GitHub Container Registry - name: Login to GitHub Container Registry
if: github.event_name != 'pull_request' if: github.event_name != 'pull_request'
uses: docker/login-action@v2 uses: docker/login-action@v3
with: with:
registry: ghcr.io registry: ghcr.io
username: ${{ github.actor }} username: ${{ github.actor }}
password: ${{ github.token }} password: ${{ github.token }}
- name: Build and push - name: Build and push
uses: docker/build-push-action@v4 uses: docker/build-push-action@v5
with: with:
context: . context: .
platforms: linux/amd64 platforms: linux/amd64,linux/arm64
push: ${{ github.event_name != 'pull_request' }} push: ${{ github.event_name != 'pull_request' }}
tags: ${{ steps.metal.outputs.tags }} tags: ${{ steps.metal.outputs.tags }}
labels: ${{ steps.metal.outputs.labels }} labels: ${{ steps.metal.outputs.labels }}

View file

@ -12,12 +12,12 @@ jobs:
release: release:
runs-on: ubuntu-latest runs-on: ubuntu-latest
steps: steps:
- uses: actions/checkout@v3 - uses: actions/checkout@v4
with: with:
fetch-depth: 0 fetch-depth: 0
- name: Set node - name: Set node
uses: actions/setup-node@v3 uses: actions/setup-node@v4
with: with:
node-version: 18 node-version: 18

View file

@ -19,6 +19,6 @@ jobs:
name: Semantic Pull Request name: Semantic Pull Request
steps: steps:
- name: Validate PR title - name: Validate PR title
uses: amannn/action-semantic-pull-request@v5.2.0 uses: amannn/action-semantic-pull-request@v5.4.0
env: env:
GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

2
.gitignore vendored
View file

@ -2,6 +2,7 @@ node_modules
*.log *.log
dist dist
.output .output
.pnpm-store
.nuxt .nuxt
.env .env
.DS_Store .DS_Store
@ -11,7 +12,6 @@ dist
.eslintcache .eslintcache
elk-translation-status.json elk-translation-status.json
public/shiki
public/emojis public/emojis
*~ *~

1
.npmrc
View file

@ -1,4 +1,3 @@
shamefully-hoist=true shamefully-hoist=true
strict-peer-dependencies=false
shell-emulator=true shell-emulator=true
ignore-workspace-root-check=true ignore-workspace-root-check=true

2
.nvmrc
View file

@ -1 +1 @@
v18 20

45
.vscode/settings.json vendored
View file

@ -5,10 +5,6 @@
"unmute", "unmute",
"unstorage" "unstorage"
], ],
"editor.codeActionsOnSave": {
"source.fixAll.eslint": true
},
"editor.formatOnSave": false,
"files.associations": { "files.associations": {
"*.css": "postcss" "*.css": "postcss"
}, },
@ -23,7 +19,44 @@
"i18n-ally.preferredDelimiter": "_", "i18n-ally.preferredDelimiter": "_",
"i18n-ally.sortKeys": true, "i18n-ally.sortKeys": true,
"i18n-ally.sourceLanguage": "en", "i18n-ally.sourceLanguage": "en",
// Enable the ESlint flat config support
"eslint.experimental.useFlatConfig": true,
// Disable the default formatter, use eslint instead
"prettier.enable": false, "prettier.enable": false,
"volar.completion.preferredTagNameCase": "pascal", "editor.formatOnSave": false,
"volar.completion.preferredAttrNameCase": "kebab"
// Auto fix
"editor.codeActionsOnSave": {
"source.fixAll": "explicit",
"source.organizeImports": "never"
},
// Silent the stylistic rules in you IDE, but still auto fix them
"eslint.rules.customizations": [
{ "rule": "style/*", "severity": "off" },
{ "rule": "*-indent", "severity": "off" },
{ "rule": "*-spacing", "severity": "off" },
{ "rule": "*-spaces", "severity": "off" },
{ "rule": "*-order", "severity": "off" },
{ "rule": "*-dangle", "severity": "off" },
{ "rule": "*-newline", "severity": "off" },
{ "rule": "*quotes", "severity": "off" },
{ "rule": "*semi", "severity": "off" }
],
// Enable eslint for all supported languages
"eslint.validate": [
"javascript",
"javascriptreact",
"typescript",
"typescriptreact",
"vue",
"html",
"markdown",
"json",
"jsonc",
"yaml"
]
} }

22
.woodpecker.yml Normal file
View file

@ -0,0 +1,22 @@
steps:
- name: build docker
image: docker:25-cli
secrets: [user, pass]
commands:
- apk add git
- REPO=$(echo "$CI_REPO" | tr '[:upper:]' '[:lower:]')
- REGISTRY="dev.cat-enby.club"
- MAJOR=$(echo ${CI_COMMIT_TAG} | cut -d '.' -f 1 | tr -d 'v')
- MINOR=$(echo ${CI_COMMIT_TAG} | cut -d '.' -f 2)
- PATCH=$(echo ${CI_COMMIT_TAG} | cut -d '.' -f 3 | cut -d '-' -f 1)
- docker buildx build -t $${REGISTRY}/$${REPO}:v$${MAJOR:-0}.$${MINOR:-0}.$${PATCH-0} -t $${REGISTRY}/$${REPO}:v$${MAJOR:-0}.$${MINOR} -t $${REGISTRY}/$$REPO:v$${MAJOR:-0} -t $${REGISTRY}/$$REPO:latest .
- docker login --username $USER --password $PASS $${REGISTRY}
- docker push $${REGISTRY}/$${REPO}:v$${MAJOR:-0}.$${MINOR:-0}.$${PATCH-0}
- docker push $${REGISTRY}/$${REPO}:v$${MAJOR:-0}.$${MINOR}
- docker push $${REGISTRY}/$${REPO}:v$${MAJOR:-0}
- docker push $${REGISTRY}/$${REPO}:latest
volumes:
- /var/run/docker.sock:/var/run/docker.sock
when:
- repo: nikurasu:elk-test-ci
- event: tag

View file

@ -21,7 +21,6 @@ To develop and test the Elk package:
2. Ensure using the latest Node.js (16.x). 2. Ensure using the latest Node.js (16.x).
If you have [nvm](https://github.com/nvm-sh/nvm), you can run `nvm i` to install the required version. If you have [nvm](https://github.com/nvm-sh/nvm), you can run `nvm i` to install the required version.
3. The package manager used to install and link dependencies must be [pnpm](https://pnpm.io/) v7. To use it you must first enable [Corepack](https://github.com/nodejs/corepack) by running `corepack enable`. (Note: on Linux in a standard Node 16+ environment, you should follow the instructions to install via Node's `corepack` rather than using the `curl` command) 3. The package manager used to install and link dependencies must be [pnpm](https://pnpm.io/) v7. To use it you must first enable [Corepack](https://github.com/nodejs/corepack) by running `corepack enable`. (Note: on Linux in a standard Node 16+ environment, you should follow the instructions to install via Node's `corepack` rather than using the `curl` command)
4. Check out a branch where you can work and commit your changes: 4. Check out a branch where you can work and commit your changes:
@ -84,7 +83,7 @@ Simple approach used by most websites of relying on direction set in HTML elemen
We've added some `UnoCSS` utilities styles to help you with that: We've added some `UnoCSS` utilities styles to help you with that:
- Do not use `left/right` padding and margin: for example `pl-1`. Use `padding-inline-start/end` instead. So `pl-1` should be `ps-1`, `pr-1` should be `pe-1`. The same rules apply to margin. - Do not use `left/right` padding and margin: for example `pl-1`. Use `padding-inline-start/end` instead. So `pl-1` should be `ps-1`, `pr-1` should be `pe-1`. The same rules apply to margin.
- Do not use `rtl-` classes, such as `rtl-left-0`. - Do not use `rtl-` classes, such as `rtl-left-0`.
- For icons that should be rotated for RTL, add `class="rtl-flip"`. This can only be used for icons outside of elements with `dir="auto"`, such as timeline, and is the only exception from the rule above. For icons inside the timeline, it might not work as expected. - For icons that should be rotated for RTL, add `class="rtl-flip"`. This can only be used for icons outside of elements with `dir="auto"`, such as timeline, and is the only exception to the rule above. For icons inside the timeline, it might not work as expected.
- For absolute positioned elements, don't use `left/right`: for example `left-0`. Use `inset-inline-start/end` instead. `UnoCSS` shortcuts are `inset-is` for `inset-inline-start` and `inset-ie` for `inset-inline-end`. Example: `left-0` should be replaced with `inset-is-0`. - For absolute positioned elements, don't use `left/right`: for example `left-0`. Use `inset-inline-start/end` instead. `UnoCSS` shortcuts are `inset-is` for `inset-inline-start` and `inset-ie` for `inset-inline-end`. Example: `left-0` should be replaced with `inset-is-0`.
- If you need to change the border radius for an entire left or right side, use `border-inline-start/end`. `UnoCSS` shortcuts are `rounded-is` for left side, `rounded-ie` for right side. Example: `rounded-l-5` should be replaced with `rounded-ie-5`. - If you need to change the border radius for an entire left or right side, use `border-inline-start/end`. `UnoCSS` shortcuts are `rounded-is` for left side, `rounded-ie` for right side. Example: `rounded-l-5` should be replaced with `rounded-ie-5`.
- If you need to change the border radius for one corner, use `border-start-end-radius` and similar rules. `UnoCSS` shortcuts are `rounded` + top/bottom as either `-bs` (top) or `-be` (bottom) + left/right as either `-is` (left) or `-ie` (right). Example: `rounded-tl-0` should be replaced with `rounded-bs-is-0`. - If you need to change the border radius for one corner, use `border-start-end-radius` and similar rules. `UnoCSS` shortcuts are `rounded` + top/bottom as either `-bs` (top) or `-be` (bottom) + left/right as either `-is` (left) or `-ie` (right). Example: `rounded-tl-0` should be replaced with `rounded-bs-is-0`.

View file

@ -49,8 +49,8 @@ One could put Elk behind popular reverse proxies with SSL Handling like Traefik,
1. adjust permissions of storage dir: ```sudo chown 911:911 ./elk-storage``` 1. adjust permissions of storage dir: ```sudo chown 911:911 ./elk-storage```
1. start container: ```docker-compose up -d``` 1. start container: ```docker-compose up -d```
Note: The provided Dockerfile creates a container which will eventually run Elk as non-root user and create a persistent named Docker volume upon first start (if that volume does not yet exist). This volume is always created with root permission. Failing to change the permissions of ```/elk/data``` inside this volume to UID:GID 911 (as specified for Elk in the Dockerfile) will prevent Elk from storing it's config for user accounts. You either have to fix the permission in the created named volume, or mount a directory with the correct permission to ```/elk/data``` into the container. > [!NOTE]
> The provided Dockerfile creates a container which will eventually run Elk as non-root user and create a persistent named Docker volume upon first start (if that volume does not yet exist). This volume is always created with root permission. Failing to change the permissions of ```/elk/data``` inside this volume to UID:GID 911 (as specified for Elk in the Dockerfile) will prevent Elk from storing it's config for user accounts. You either have to fix the permission in the created named volume, or mount a directory with the correct permission to ```/elk/data``` into the container.
### Ecosystem ### Ecosystem
@ -66,6 +66,7 @@ These are known deployments using Elk as an alternative Web client for Mastodon
- [elk.aus.social](https://elk.aus.social) - Use Elk for the `aus.social` Server - [elk.aus.social](https://elk.aus.social) - Use Elk for the `aus.social` Server
- [elk.mstdn.ca](https://elk.mstdn.ca) - Use Elk for the `mstdn.ca` Server - [elk.mstdn.ca](https://elk.mstdn.ca) - Use Elk for the `mstdn.ca` Server
- [elk.mastodonapp.uk](https://elk.mastodonapp.uk) - Use Elk for the `mastodonapp.uk` Server - [elk.mastodonapp.uk](https://elk.mastodonapp.uk) - Use Elk for the `mastodonapp.uk` Server
- [elk.bolha.us](https://elk.bolha.us) - Use Elk for the `bolha.us` Server
> **Note**: Community deployments are **NOT** maintained by the Elk team. It may not be synced with Elk's source code. Please do your own research about the host servers before using them. > **Note**: Community deployments are **NOT** maintained by the Elk team. It may not be synced with Elk's source code. Please do your own research about the host servers before using them.
@ -137,7 +138,7 @@ nr test
## 📲 PWA ## 📲 PWA
You can consult the [PWA documentation](https://docs.elk.zone/docs/pwa) to learn more about the PWA capabilities on Elk, how to install Elk PWA in your desktop or mobile device and some hints about PWA stuff on Elk. You can consult the [PWA documentation](https://docs.elk.zone/pwa) to learn more about the PWA capabilities on Elk, how to install Elk PWA in your desktop or mobile device and some hints about PWA stuff on Elk.
## 🦄 Stack ## 🦄 Stack
@ -150,7 +151,7 @@ You can consult the [PWA documentation](https://docs.elk.zone/docs/pwa) to learn
- [UnoCSS](https://uno.antfu.me/) - The instant on-demand atomic CSS engine - [UnoCSS](https://uno.antfu.me/) - The instant on-demand atomic CSS engine
- [Iconify](https://github.com/iconify/icon-sets#iconify-icon-sets-in-json-format) - Iconify icon sets in JSON format - [Iconify](https://github.com/iconify/icon-sets#iconify-icon-sets-in-json-format) - Iconify icon sets in JSON format
- [Masto.js](https://neet.github.io/masto.js) - Mastodon API client in TypeScript - [Masto.js](https://neet.github.io/masto.js) - Mastodon API client in TypeScript
- [shiki](https://shiki.matsu.io/) - A beautiful Syntax Highlighter - [shiki](https://shiki.style/) - A beautiful yet powerful syntax highlighter
- [vite-plugin-pwa](https://github.com/vite-pwa/vite-plugin-pwa) - Prompt for update, Web Push Notifications and Web Share Target API - [vite-plugin-pwa](https://github.com/vite-pwa/vite-plugin-pwa) - Prompt for update, Web Push Notifications and Web Share Target API
## 👨‍💻 Contributors ## 👨‍💻 Contributors

View file

@ -4,10 +4,12 @@ provideGlobalCommands()
const route = useRoute() const route = useRoute()
if (process.server && !route.path.startsWith('/settings')) { if (import.meta.server && !route.path.startsWith('/settings')) {
const url = useRequestURL()
useHead({ useHead({
meta: [ meta: [
{ property: 'og:url', content: `https://elk.zone${route.path}` }, { property: 'og:url', content: `${url.origin}${route.path}` },
], ],
}) })
} }

View file

@ -6,8 +6,8 @@ defineProps<{
square?: boolean square?: boolean
}>() }>()
const loaded = $ref(false) const loaded = ref(false)
const error = $ref(false) const error = ref(false)
</script> </script>
<template> <template>

View file

@ -5,7 +5,7 @@ defineOptions({
inheritAttrs: false, inheritAttrs: false,
}) })
const { account, as = 'div' } = $defineProps<{ const { account, as = 'div' } = defineProps<{
account: mastodon.v1.Account account: mastodon.v1.Account
as?: string as?: string
}>() }>()

View file

@ -19,8 +19,10 @@ cacheAccount(account)
overflow-hidden overflow-hidden
:to="getAccountRoute(account)" :to="getAccountRoute(account)"
/> />
<div h-full p1 shrink-0> <slot>
<AccountFollowButton :account="account" :context="relationshipContext" /> <div h-full p1 shrink-0>
</div> <AccountFollowButton :account="account" :context="relationshipContext" />
</div>
</slot>
</div> </div>
</template> </template>

View file

@ -10,35 +10,36 @@ const { account, command, context, ...props } = defineProps<{
}>() }>()
const { t } = useI18n() const { t } = useI18n()
const isSelf = $(useSelfAccount(() => account)) const isSelf = useSelfAccount(() => account)
const enable = $computed(() => !isSelf && currentUser.value) const enable = computed(() => !isSelf.value && currentUser.value)
const relationship = $computed(() => props.relationship || useRelationship(account).value) const relationship = computed(() => props.relationship || useRelationship(account).value)
const isLoading = computed(() => relationship.value === undefined)
const { client } = $(useMasto()) const { client } = useMasto()
async function unblock() { async function unblock() {
relationship!.blocking = false relationship.value!.blocking = false
try { try {
const newRel = await client.v1.accounts.unblock(account.id) const newRel = await client.value.v1.accounts.$select(account.id).unblock()
Object.assign(relationship!, newRel) Object.assign(relationship!, newRel)
} }
catch (err) { catch (err) {
console.error(err) console.error(err)
// TODO error handling // TODO error handling
relationship!.blocking = true relationship.value!.blocking = true
} }
} }
async function unmute() { async function unmute() {
relationship!.muting = false relationship.value!.muting = false
try { try {
const newRel = await client.v1.accounts.unmute(account.id) const newRel = await client.value.v1.accounts.$select(account.id).unmute()
Object.assign(relationship!, newRel) Object.assign(relationship!, newRel)
} }
catch (err) { catch (err) {
console.error(err) console.error(err)
// TODO error handling // TODO error handling
relationship!.muting = true relationship.value!.muting = true
} }
} }
@ -46,21 +47,25 @@ useCommand({
scope: 'Actions', scope: 'Actions',
order: -2, order: -2,
visible: () => command && enable, visible: () => command && enable,
name: () => `${relationship?.following ? t('account.unfollow') : t('account.follow')} ${getShortHandle(account)}`, name: () => `${relationship.value?.following ? t('account.unfollow') : t('account.follow')} ${getShortHandle(account)}`,
icon: 'i-ri:star-line', icon: 'i-ri:star-line',
onActivate: () => toggleFollowAccount(relationship!, account), onActivate: () => toggleFollowAccount(relationship.value!, account),
}) })
const buttonStyle = $computed(() => { const buttonStyle = computed(() => {
if (relationship?.blocking) if (relationship.value?.blocking)
return 'text-inverted bg-red border-red' return 'text-inverted bg-red border-red'
if (relationship?.muting) if (relationship.value?.muting)
return 'text-base bg-card border-base' return 'text-base bg-card border-base'
// If following, use a label style with a strong border for Mutuals // If following, use a label style with a strong border for Mutuals
if (relationship ? relationship.following : context === 'following') if (relationship.value ? relationship.value.following : context === 'following')
return `text-base ${relationship?.followedBy ? 'border-strong' : 'border-base'}` return `text-base ${relationship.value?.followedBy ? 'border-strong' : 'border-base'}`
// If loading, use a plain style
if (isLoading.value)
return 'text-base border-base'
// If not following, use a button style // If not following, use a button style
return 'text-inverted bg-primary border-primary' return 'text-inverted bg-primary border-primary'
@ -71,34 +76,39 @@ const buttonStyle = $computed(() => {
<button <button
v-if="enable" v-if="enable"
gap-1 items-center group gap-1 items-center group
:disabled="relationship?.requested"
border-1 border-1
rounded-full flex="~ gap2 center" font-500 min-w-30 h-fit px3 py1 rounded-full flex="~ gap2 center" font-500 min-w-30 h-fit px3 py1
:class="buttonStyle" :class="buttonStyle"
:hover="!relationship?.blocking && !relationship?.muting && relationship?.following ? 'border-red text-red' : 'bg-base border-primary text-primary'" :hover="!relationship?.blocking && !relationship?.muting && relationship?.following ? 'border-red text-red' : 'bg-base border-primary text-primary'"
@click="relationship?.blocking ? unblock() : relationship?.muting ? unmute() : toggleFollowAccount(relationship!, account)" @click="relationship?.blocking ? unblock() : relationship?.muting ? unmute() : toggleFollowAccount(relationship!, account)"
> >
<template v-if="relationship?.blocking"> <template v-if="isLoading">
<span elk-group-hover="hidden">{{ $t('account.blocking') }}</span> <span i-svg-spinners-180-ring-with-bg />
<span hidden elk-group-hover="inline">{{ $t('account.unblock') }}</span>
</template>
<template v-if="relationship?.muting">
<span elk-group-hover="hidden">{{ $t('account.muting') }}</span>
<span hidden elk-group-hover="inline">{{ $t('account.unmute') }}</span>
</template>
<template v-else-if="relationship ? relationship.following : context === 'following'">
<span elk-group-hover="hidden">{{ relationship?.followedBy ? $t('account.mutuals') : $t('account.following') }}</span>
<span hidden elk-group-hover="inline">{{ $t('account.unfollow') }}</span>
</template>
<template v-else-if="relationship?.requested">
<span>{{ $t('account.follow_requested') }}</span>
</template>
<template v-else-if="relationship ? relationship.followedBy : context === 'followedBy'">
<span elk-group-hover="hidden">{{ $t('account.follows_you') }}</span>
<span hidden elk-group-hover="inline">{{ $t('account.follow_back') }}</span>
</template> </template>
<template v-else> <template v-else>
<span>{{ account.locked ? $t('account.request_follow') : $t('account.follow') }}</span> <template v-if="relationship?.blocking">
<span elk-group-hover="hidden">{{ $t('account.blocking') }}</span>
<span hidden elk-group-hover="inline">{{ $t('account.unblock') }}</span>
</template>
<template v-if="relationship?.muting">
<span elk-group-hover="hidden">{{ $t('account.muting') }}</span>
<span hidden elk-group-hover="inline">{{ $t('account.unmute') }}</span>
</template>
<template v-else-if="relationship ? relationship.following : context === 'following'">
<span elk-group-hover="hidden">{{ relationship?.followedBy ? $t('account.mutuals') : $t('account.following') }}</span>
<span hidden elk-group-hover="inline">{{ $t('account.unfollow') }}</span>
</template>
<template v-else-if="relationship?.requested">
<span elk-group-hover="hidden">{{ $t('account.follow_requested') }}</span>
<span hidden elk-group-hover="inline">{{ $t('account.withdraw_follow_request') }}</span>
</template>
<template v-else-if="relationship ? relationship.followedBy : context === 'followedBy'">
<span elk-group-hover="hidden">{{ $t('account.follows_you') }}</span>
<span hidden elk-group-hover="inline">{{ account.locked ? $t('account.request_follow') : $t('account.follow_back') }}</span>
</template>
<template v-else>
<span>{{ account.locked ? $t('account.request_follow') : $t('account.follow') }}</span>
</template>
</template> </template>
</button> </button>
</template> </template>

View file

@ -0,0 +1,68 @@
<script setup lang="ts">
import type { mastodon } from 'masto'
const { account, ...props } = defineProps<{
account: mastodon.v1.Account
relationship?: mastodon.v1.Relationship
}>()
const relationship = computed(() => props.relationship || useRelationship(account).value)
const { client } = useMasto()
async function authorizeFollowRequest() {
relationship.value!.requestedBy = false
relationship.value!.followedBy = true
try {
const newRel = await client.value.v1.followRequests.$select(account.id).authorize()
Object.assign(relationship!, newRel)
}
catch (err) {
console.error(err)
relationship.value!.requestedBy = true
relationship.value!.followedBy = false
}
}
async function rejectFollowRequest() {
relationship.value!.requestedBy = false
try {
const newRel = await client.value.v1.followRequests.$select(account.id).reject()
Object.assign(relationship!, newRel)
}
catch (err) {
console.error(err)
relationship.value!.requestedBy = true
}
}
</script>
<template>
<div flex gap-4>
<template v-if="relationship?.requestedBy">
<CommonTooltip :content="$t('account.authorize')" no-auto-focus>
<button
type="button"
rounded-full text-sm p2 border-1
hover:text-green transition-colors
@click="authorizeFollowRequest"
>
<span block text-current i-ri:check-fill />
</button>
</CommonTooltip>
<CommonTooltip :content="$t('account.reject')" no-auto-focus>
<button
type="button"
rounded-full text-sm p2 border-1
hover:text-red transition-colors
@click="rejectFollowRequest"
>
<span block text-current i-ri:close-fill />
</button>
</CommonTooltip>
</template>
<template v-else>
<span text-secondary>
{{ relationship?.followedBy ? $t('account.authorized') : $t('account.rejected') }}
</span>
</template>
</div>
</template>

View file

@ -5,7 +5,7 @@ const { account } = defineProps<{
account: mastodon.v1.Account account: mastodon.v1.Account
}>() }>()
const serverName = $computed(() => getServerName(account)) const serverName = computed(() => getServerName(account))
</script> </script>
<template> <template>

View file

@ -6,29 +6,30 @@ const { account } = defineProps<{
command?: boolean command?: boolean
}>() }>()
const { client } = $(useMasto()) const { client } = useMasto()
const { t } = useI18n() const { t } = useI18n()
const createdAt = $(useFormattedDateTime(() => account.createdAt, { const createdAt = useFormattedDateTime(() => account.createdAt, {
month: 'long', month: 'long',
day: 'numeric', day: 'numeric',
year: 'numeric', year: 'numeric',
})) })
const relationship = $(useRelationship(account)) const relationship = useRelationship(account)
const namedFields = ref<mastodon.v1.AccountField[]>([]) const namedFields = ref<mastodon.v1.AccountField[]>([])
const iconFields = ref<mastodon.v1.AccountField[]>([]) const iconFields = ref<mastodon.v1.AccountField[]>([])
const isEditingPersonalNote = ref<boolean>(false) const isEditingPersonalNote = ref<boolean>(false)
const hasHeader = $computed(() => !account.header.endsWith('/original/missing.png')) const hasHeader = computed(() => !account.header.endsWith('/original/missing.png'))
const isCopied = ref<boolean>(false)
function getFieldIconTitle(fieldName: string) { function getFieldIconTitle(fieldName: string) {
return fieldName === 'Joined' ? t('account.joined') : fieldName return fieldName === 'Joined' ? t('account.joined') : fieldName
} }
function getNotificationIconTitle() { function getNotificationIconTitle() {
return relationship?.notifying ? t('account.notifications_on_post_disable', { username: `@${account.username}` }) : t('account.notifications_on_post_enable', { username: `@${account.username}` }) return relationship.value?.notifying ? t('account.notifications_on_post_disable', { username: `@${account.username}` }) : t('account.notifications_on_post_enable', { username: `@${account.username}` })
} }
function previewHeader() { function previewHeader() {
@ -50,14 +51,14 @@ function previewAvatar() {
} }
async function toggleNotifications() { async function toggleNotifications() {
relationship!.notifying = !relationship?.notifying relationship.value!.notifying = !relationship.value?.notifying
try { try {
const newRel = await client.v1.accounts.follow(account.id, { notify: relationship?.notifying }) const newRel = await client.value.v1.accounts.$select(account.id).follow({ notify: relationship.value?.notifying })
Object.assign(relationship!, newRel) Object.assign(relationship!, newRel)
} }
catch { catch {
// TODO error handling // TODO error handling
relationship!.notifying = !relationship?.notifying relationship.value!.notifying = !relationship.value?.notifying
} }
} }
@ -74,49 +75,70 @@ watchEffect(() => {
}) })
icons.push({ icons.push({
name: 'Joined', name: 'Joined',
value: createdAt, value: createdAt.value,
}) })
namedFields.value = named namedFields.value = named
iconFields.value = icons iconFields.value = icons
}) })
const personalNoteDraft = ref(relationship?.note ?? '') const personalNoteDraft = ref(relationship.value?.note ?? '')
watch($$(relationship), (relationship, oldValue) => { watch(relationship, (relationship, oldValue) => {
if (!oldValue && relationship) if (!oldValue && relationship)
personalNoteDraft.value = relationship.note ?? '' personalNoteDraft.value = relationship.note ?? ''
}) })
async function editNote(event: Event) { async function editNote(event: Event) {
if (!event.target || !('value' in event.target) || !relationship) if (!event.target || !('value' in event.target) || !relationship.value)
return return
const newNote = event.target?.value as string const newNote = event.target?.value as string
if (relationship.note?.trim() === newNote.trim()) if (relationship.value.note?.trim() === newNote.trim())
return return
const newNoteApiResult = await client.v1.accounts.createNote(account.id, { comment: newNote }) const newNoteApiResult = await client.value.v1.accounts.$select(account.id).note.create({ comment: newNote })
relationship.note = newNoteApiResult.note relationship.value.note = newNoteApiResult.note
personalNoteDraft.value = relationship.note ?? '' personalNoteDraft.value = relationship.value.note ?? ''
} }
const isSelf = $(useSelfAccount(() => account)) const isSelf = useSelfAccount(() => account)
const isNotifiedOnPost = $computed(() => !!relationship?.notifying) const isNotifiedOnPost = computed(() => !!relationship.value?.notifying)
const personalNoteMaxLength = 2000 const personalNoteMaxLength = 2000
async function copyAccountName() {
try {
const shortHandle = getShortHandle(account)
const serverName = getServerName(account)
const accountName = `${shortHandle}@${serverName}`
await navigator.clipboard.writeText(accountName)
}
catch (err) {
console.error('Failed to copy account name:', err)
}
isCopied.value = true
setTimeout(() => {
isCopied.value = false
}, 2000)
}
</script> </script>
<template> <template>
<div flex flex-col> <div flex flex-col>
<div v-if="relationship?.requestedBy" p-4 flex justify-between items-center bg-card>
<span text-primary font-bold>{{ $t('account.requested', [account.displayName]) }}</span>
<AccountFollowRequestButton :account="account" :relationship="relationship" />
</div>
<component :is="hasHeader ? 'button' : 'div'" border="b base" z-1 @click="hasHeader ? previewHeader() : undefined"> <component :is="hasHeader ? 'button' : 'div'" border="b base" z-1 @click="hasHeader ? previewHeader() : undefined">
<img h-50 height="200" w-full object-cover :src="account.header" :alt="t('account.profile_description', [account.username])"> <img h-50 height="200" w-full object-cover :src="account.header" :alt="t('account.profile_description', [account.username])">
</component> </component>
<div p4 mt--18 flex flex-col gap-4> <div p4 mt--18 flex flex-col gap-4>
<div relative> <div relative>
<div flex justify-between> <div flex justify-between>
<button shrink-0 :class="{ 'rounded-full': !isSelf, 'squircle': isSelf }" w-30 h-30 p1 bg-base border-bg-base z-2 @click="previewAvatar"> <button shrink-0 h-full :class="{ 'rounded-full': !isSelf, 'squircle': isSelf }" p1 bg-base border-bg-base z-2 @click="previewAvatar">
<AccountAvatar :square="isSelf" :account="account" hover:opacity-90 transition-opacity /> <AccountAvatar :square="isSelf" :account="account" hover:opacity-90 transition-opacity w-28 h-28 />
</button> </button>
<div inset-ie-0 flex="~ wrap row-reverse" gap-2 items-center pt18 justify-start> <div inset-ie-0 flex="~ wrap row-reverse" gap-2 items-center pt18 justify-start>
<!-- Edit profile --> <!-- Edit profile -->
@ -165,11 +187,21 @@ const personalNoteMaxLength = 2000
</div> </div>
</div> </div>
<div flex="~ col gap1" pt2> <div flex="~ col gap1" pt2>
<div flex justify-between> <div flex gap2 items-center flex-wrap>
<AccountDisplayName :account="account" font-bold sm:text-2xl text-xl /> <AccountDisplayName :account="account" font-bold sm:text-2xl text-xl />
<AccountRolesIndicator v-if="account.roles?.length" :account="account" />
<AccountLockIndicator v-if="account.locked" show-label />
<AccountBotIndicator v-if="account.bot" show-label /> <AccountBotIndicator v-if="account.bot" show-label />
</div> </div>
<AccountHandle :account="account" overflow-unset line-clamp-unset />
<div flex items-center gap-1>
<AccountHandle :account="account" overflow-unset line-clamp-unset />
<CommonTooltip placement="bottom" :content="$t('account.copy_account_name')" no-auto-focus flex>
<button text-secondary-light text-sm :class="isCopied ? 'i-ri:check-fill text-green' : 'i-ri:file-copy-line'" @click="copyAccountName">
<span sr-only>{{ $t('account.copy_account_name') }}</span>
</button>
</CommonTooltip>
</div>
</div> </div>
</div> </div>
<label <label

View file

@ -5,7 +5,7 @@ const { account } = defineProps<{
account: mastodon.v1.Account account: mastodon.v1.Account
}>() }>()
const relationship = $(useRelationship(account)) const relationship = useRelationship(account)
</script> </script>
<template> <template>

View file

@ -1,26 +1,69 @@
<script setup lang="ts"> <script setup lang="ts">
import type { mastodon } from 'masto' import type { mastodon } from 'masto'
import { fetchAccountByHandle } from '~/composables/cache'
type WatcherType = [acc?: mastodon.v1.Account | null, h?: string, v?: boolean]
defineOptions({ defineOptions({
inheritAttrs: false, inheritAttrs: false,
}) })
const props = defineProps<{ const props = defineProps<{
account?: mastodon.v1.Account account?: mastodon.v1.Account | null
handle?: string handle?: string
disabled?: boolean disabled?: boolean
}>() }>()
const account = computed(() => props.account || (props.handle ? useAccountByHandle(props.handle!) : undefined)) const accountHover = ref()
const hovered = useElementHover(accountHover)
const account = ref<mastodon.v1.Account | null | undefined>(props.account)
watch(
() => [props.account, props.handle, hovered.value] satisfies WatcherType,
([newAccount, newHandle, newVisible], oldProps) => {
if (!newVisible || process.test)
return
if (newAccount) {
account.value = newAccount
return
}
if (newHandle) {
const [_oldAccount, oldHandle, _oldVisible] = oldProps ?? [undefined, undefined, false]
if (!oldHandle || newHandle !== oldHandle || !account.value) {
// new handle can be wrong: using server instead of webDomain
fetchAccountByHandle(newHandle).then((acc) => {
if (newHandle === props.handle)
account.value = acc
})
}
return
}
account.value = undefined
},
{ immediate: true, flush: 'post' },
)
const userSettings = useUserSettings() const userSettings = useUserSettings()
</script> </script>
<template> <template>
<VMenu v-if="!disabled && account && !getPreferences(userSettings, 'hideAccountHoverCard')" placement="bottom-start" :delay="{ show: 500, hide: 100 }" v-bind="$attrs" :close-on-content-click="false"> <span ref="accountHover">
<slot /> <VMenu
<template #popper> v-if="!disabled && account && !getPreferences(userSettings, 'hideAccountHoverCard')"
<AccountHoverCard v-if="account" :account="account" /> placement="bottom-start"
</template> :delay="{ show: 500, hide: 100 }"
</VMenu> v-bind="$attrs"
<slot v-else /> :close-on-content-click="false"
>
<slot />
<template #popper>
<AccountHoverCard v-if="account" :account="account" />
</template>
</VMenu>
<slot v-else />
</span>
</template> </template>

View file

@ -23,6 +23,8 @@ const { account, as = 'div' } = defineProps<{
<div flex="~ col" shrink pt-1 h-full overflow-hidden justify-center leading-none select-none> <div flex="~ col" shrink pt-1 h-full overflow-hidden justify-center leading-none select-none>
<div flex="~" gap-2> <div flex="~" gap-2>
<AccountDisplayName :account="account" font-bold line-clamp-1 ws-pre-wrap break-all text-lg /> <AccountDisplayName :account="account" font-bold line-clamp-1 ws-pre-wrap break-all text-lg />
<AccountRolesIndicator v-if="account.roles?.length" :account="account" :limit="1" />
<AccountLockIndicator v-if="account.locked" text-xs />
<AccountBotIndicator v-if="account.bot" text-xs /> <AccountBotIndicator v-if="account.bot" text-xs />
</div> </div>
<AccountHandle :account="account" text-secondary-light /> <AccountHandle :account="account" text-secondary-light />

View file

@ -0,0 +1,23 @@
<script setup lang="ts">
defineProps<{
showLabel?: boolean
}>()
const { t } = useI18n()
</script>
<template>
<div
flex="~ gap1" items-center
:class="{ 'border border-base rounded-md px-1': showLabel }"
text-secondary-light
>
<slot name="prepend" />
<CommonTooltip no-auto-focus content="Lock" :disabled="showLabel">
<div i-ri:lock-line />
</CommonTooltip>
<div v-if="showLabel">
{{ t('account.lock') }}
</div>
</div>
</template>

View file

@ -11,24 +11,33 @@ const emit = defineEmits<{
(evt: 'removeNote'): void (evt: 'removeNote'): void
}>() }>()
let relationship = $(useRelationship(account)) const relationship = useRelationship(account)
const isSelf = $(useSelfAccount(() => account)) const isSelf = useSelfAccount(() => account)
const { t } = useI18n() const { t } = useI18n()
const { client } = $(useMasto()) const { client } = useMasto()
const useStarFavoriteIcon = usePreferences('useStarFavoriteIcon') const useStarFavoriteIcon = usePreferences('useStarFavoriteIcon')
const { share, isSupported: isShareSupported } = useShare()
function shareAccount() {
share({ url: location.href })
}
async function toggleReblogs() { async function toggleReblogs() {
if (!relationship!.showingReblogs && await openConfirmDialog({ if (!relationship.value!.showingReblogs) {
title: t('confirm.show_reblogs.title', [account.acct]), const dialogChoice = await openConfirmDialog({
confirm: t('confirm.show_reblogs.confirm'), title: t('confirm.show_reblogs.title'),
cancel: t('confirm.show_reblogs.cancel'), description: t('confirm.show_reblogs.description', [account.acct]),
}) !== 'confirm') confirm: t('confirm.show_reblogs.confirm'),
return cancel: t('confirm.show_reblogs.cancel'),
})
if (dialogChoice.choice !== 'confirm')
return
}
const showingReblogs = !relationship?.showingReblogs const showingReblogs = !relationship.value?.showingReblogs
relationship = await client.v1.accounts.follow(account.id, { reblogs: showingReblogs }) relationship.value = await client.value.v1.accounts.$select(account.id).follow({ reblogs: showingReblogs })
} }
async function addUserNote() { async function addUserNote() {
@ -36,11 +45,11 @@ async function addUserNote() {
} }
async function removeUserNote() { async function removeUserNote() {
if (!relationship!.note || relationship!.note.length === 0) if (!relationship.value!.note || relationship.value!.note.length === 0)
return return
const newNote = await client.v1.accounts.createNote(account.id, { comment: '' }) const newNote = await client.value.v1.accounts.$select(account.id).note.create({ comment: '' })
relationship!.note = newNote.note relationship.value!.note = newNote.note
emit('removeNote') emit('removeNote')
} }
</script> </script>
@ -61,6 +70,13 @@ async function removeUserNote() {
:command="command" :command="command"
/> />
</NuxtLink> </NuxtLink>
<CommonDropdownItem
v-if="isShareSupported"
:text="$t('menu.share_account', [`@${account.acct}`])"
icon="i-ri:share-line"
:command="command"
@click="shareAccount()"
/>
<template v-if="currentUser"> <template v-if="currentUser">
<template v-if="!isSelf"> <template v-if="!isSelf">

View file

@ -1,17 +1,17 @@
<script setup lang="ts"> <script setup lang="ts">
import type { Paginator, mastodon } from 'masto' import type { mastodon } from 'masto'
const { paginator, account, context } = defineProps<{ const { paginator, account, context } = defineProps<{
paginator: Paginator<mastodon.v1.Account[], mastodon.DefaultPaginationParams> paginator: mastodon.Paginator<mastodon.v1.Account[], mastodon.DefaultPaginationParams | undefined>
context?: 'following' | 'followers' context?: 'following' | 'followers'
account?: mastodon.v1.Account account?: mastodon.v1.Account
relationshipContext?: 'followedBy' | 'following' relationshipContext?: 'followedBy' | 'following'
}>() }>()
const fallbackContext = $computed(() => { const fallbackContext = computed(() => {
return ['following', 'followers'].includes(context!) return ['following', 'followers'].includes(context!)
}) })
const showOriginSite = $computed(() => const showOriginSite = computed(() =>
account && account.id !== currentUser.value?.account.id && getServerName(account) !== currentServer.value, account && account.id !== currentUser.value?.account.id && getServerName(account) !== currentServer.value,
) )
</script> </script>

View file

@ -0,0 +1,31 @@
<script setup lang="ts">
import type { mastodon } from 'masto'
defineProps<{
account: mastodon.v1.Account
limit?: number
}>()
</script>
<template>
<div
flex="~ gap1" items-center
class="border border-base rounded-md px-1"
text-secondary-light
>
<slot name="prepend" />
<div v-for="role in account.roles?.slice(0, limit)" :key="role.id" flex>
<div :style="`color: ${role.color}; border-color: ${role.color}`">
{{ role.name }}
</div>
</div>
</div>
<div
v-if="limit && account.roles?.length > limit"
flex="~ gap1" items-center
class="border border-base rounded-md px-1"
text-secondary-light
>
+{{ account.roles?.length - limit }}
</div>
</template>

View file

@ -1,18 +1,18 @@
<script setup lang="ts"> <script setup lang="ts">
import type { CommonRouteTabOption } from '../common/CommonRouteTabs.vue' import type { CommonRouteTabOption } from '~/types'
const { t } = useI18n() const { t } = useI18n()
const route = useRoute() const route = useRoute()
const server = $(computedEager(() => route.params.server as string)) const server = computed(() => route.params.server as string)
const account = $(computedEager(() => route.params.account as string)) const account = computed(() => route.params.account as string)
const tabs = $computed<CommonRouteTabOption[]>(() => [ const tabs = computed<CommonRouteTabOption[]>(() => [
{ {
name: 'account-index', name: 'account-index',
to: { to: {
name: 'account-index', name: 'account-index',
params: { server, account }, params: { server: server.value, account: account.value },
}, },
display: t('tab.posts'), display: t('tab.posts'),
icon: 'i-ri:file-list-2-line', icon: 'i-ri:file-list-2-line',
@ -21,7 +21,7 @@ const tabs = $computed<CommonRouteTabOption[]>(() => [
name: 'account-replies', name: 'account-replies',
to: { to: {
name: 'account-replies', name: 'account-replies',
params: { server, account }, params: { server: server.value, account: account.value },
}, },
display: t('tab.posts_with_replies'), display: t('tab.posts_with_replies'),
icon: 'i-ri:chat-1-line', icon: 'i-ri:chat-1-line',
@ -30,7 +30,7 @@ const tabs = $computed<CommonRouteTabOption[]>(() => [
name: 'account-media', name: 'account-media',
to: { to: {
name: 'account-media', name: 'account-media',
params: { server, account }, params: { server: server.value, account: account.value },
}, },
display: t('tab.media'), display: t('tab.media'),
icon: 'i-ri:camera-2-line', icon: 'i-ri:camera-2-line',

View file

@ -0,0 +1,45 @@
<script setup lang="ts">
import type { mastodon } from 'masto'
defineOptions({
inheritAttrs: false,
})
const { tagName, disabled } = defineProps<{
tagName?: string
disabled?: boolean
}>()
const tag = ref<mastodon.v1.Tag>()
const tagHover = ref()
const hovered = useElementHover(tagHover)
watch(hovered, (newHovered) => {
if (newHovered && tagName) {
fetchTag(tagName).then((t) => {
tag.value = t
})
}
})
const userSettings = useUserSettings()
</script>
<template>
<span ref="tagHover">
<VMenu
v-if="!disabled && !getPreferences(userSettings, 'hideTagHoverCard')"
placement="bottom-start"
:delay="{ show: 500, hide: 100 }"
v-bind="$attrs"
:close-on-content-click="false"
>
<slot />
<template #popper>
<TagCardSkeleton v-if="!tag" />
<TagCard v-else :tag="tag" />
</template>
</VMenu>
<slot v-else />
</span>
</template>

View file

@ -1,6 +1,6 @@
<script setup lang="ts"> <script setup lang="ts">
import type { LocaleObject } from '@nuxtjs/i18n'
import type { AriaAnnounceType, AriaLive } from '~/composables/aria' import type { AriaAnnounceType, AriaLive } from '~/composables/aria'
import type { LocaleObject } from '#i18n'
const router = useRouter() const router = useRouter()
const { t, locale, locales } = useI18n() const { t, locale, locales } = useI18n()
@ -11,16 +11,16 @@ const localeMap = (locales.value as LocaleObject[]).reduce((acc, l) => {
return acc return acc
}, {} as Record<string, string>) }, {} as Record<string, string>)
let ariaLive = $ref<AriaLive>('polite') const ariaLive = ref<AriaLive>('polite')
let ariaMessage = $ref<string>('') const ariaMessage = ref<string>('')
function onMessage(event: AriaAnnounceType, message?: string) { function onMessage(event: AriaAnnounceType, message?: string) {
if (event === 'announce') if (event === 'announce')
ariaMessage = message! ariaMessage.value = message!
else if (event === 'mute') else if (event === 'mute')
ariaLive = 'off' ariaLive.value = 'off'
else else
ariaLive = 'polite' ariaLive.value = 'polite'
} }
watch(locale, (l, ol) => { watch(locale, (l, ol) => {

View file

@ -1,19 +1,19 @@
<script lang="ts" setup> <script lang="ts" setup>
import type { ResolvedCommand } from '~/composables/command' import type { ResolvedCommand } from '~/composables/command'
const emit = defineEmits<{
(event: 'activate'): void
}>()
const { const {
cmd, cmd,
index, index,
active = false, active = false,
} = $defineProps<{ } = defineProps<{
cmd: ResolvedCommand cmd: ResolvedCommand
index: number index: number
active?: boolean active?: boolean
}>() }>()
const emit = defineEmits<{
(event: 'activate'): void
}>()
</script> </script>
<template> <template>

View file

@ -5,7 +5,7 @@ const props = defineProps<{
const isMac = useIsMac() const isMac = useIsMac()
const keys = $computed(() => props.name.toLowerCase().split('+')) const keys = computed(() => props.name.toLowerCase().split('+'))
</script> </script>
<template> <template>

View file

@ -10,21 +10,21 @@ const registry = useCommandRegistry()
const router = useRouter() const router = useRouter()
const inputEl = $ref<HTMLInputElement>() const inputEl = ref<HTMLInputElement>()
const resultEl = $ref<HTMLDivElement>() const resultEl = ref<HTMLDivElement>()
const scopes = $ref<CommandScope[]>([]) const scopes = ref<CommandScope[]>([])
let input = $(commandPanelInput) const input = commandPanelInput
onMounted(() => { onMounted(() => {
inputEl?.focus() inputEl.value?.focus()
}) })
const commandMode = $computed(() => input.startsWith('>')) const commandMode = computed(() => input.value.startsWith('>'))
const query = $computed(() => commandMode ? '' : input.trim()) const query = computed(() => commandMode.value ? '' : input.value.trim())
const { accounts, hashtags, loading } = useSearch($$(query)) const { accounts, hashtags, loading } = useSearch(query)
function toSearchQueryResultItem(search: SearchResultType): QueryResultItem { function toSearchQueryResultItem(search: SearchResultType): QueryResultItem {
return { return {
@ -35,8 +35,8 @@ function toSearchQueryResultItem(search: SearchResultType): QueryResultItem {
} }
} }
const searchResult = $computed<QueryResult>(() => { const searchResult = computed<QueryResult>(() => {
if (query.length === 0 || loading.value) if (query.value.length === 0 || loading.value)
return { length: 0, items: [], grouped: {} as any } return { length: 0, items: [], grouped: {} as any }
// TODO extract this scope // TODO extract this scope
@ -61,22 +61,22 @@ const searchResult = $computed<QueryResult>(() => {
} }
}) })
const result = $computed<QueryResult>(() => commandMode const result = computed<QueryResult>(() => commandMode.value
? registry.query(scopes.map(s => s.id).join('.'), input.slice(1).trim()) ? registry.query(scopes.value.map(s => s.id).join('.'), input.value.slice(1).trim())
: searchResult, : searchResult.value,
) )
const isMac = useIsMac() const isMac = useIsMac()
const modifierKeyName = $computed(() => isMac.value ? '⌘' : 'Ctrl') const modifierKeyName = computed(() => isMac.value ? '⌘' : 'Ctrl')
let active = $ref(0) const active = ref(0)
watch($$(result), (n, o) => { watch(result, (n, o) => {
if (n.length !== o.length || !n.items.every((i, idx) => i === o.items[idx])) if (n.length !== o.length || !n.items.every((i, idx) => i === o.items[idx]))
active = 0 active.value = 0
}) })
function findItemEl(index: number) { function findItemEl(index: number) {
return resultEl?.querySelector(`[data-index="${index}"]`) as HTMLDivElement | null return resultEl.value?.querySelector(`[data-index="${index}"]`) as HTMLDivElement | null
} }
function onCommandActivate(item: QueryResultItem) { function onCommandActivate(item: QueryResultItem) {
if (item.onActivate) { if (item.onActivate) {
@ -84,14 +84,14 @@ function onCommandActivate(item: QueryResultItem) {
emit('close') emit('close')
} }
else if (item.onComplete) { else if (item.onComplete) {
scopes.push(item.onComplete()) scopes.value.push(item.onComplete())
input = '> ' input.value = '> '
} }
} }
function onCommandComplete(item: QueryResultItem) { function onCommandComplete(item: QueryResultItem) {
if (item.onComplete) { if (item.onComplete) {
scopes.push(item.onComplete()) scopes.value.push(item.onComplete())
input = '> ' input.value = '> '
} }
else if (item.onActivate) { else if (item.onActivate) {
item.onActivate() item.onActivate()
@ -105,9 +105,9 @@ function intoView(index: number) {
} }
function setActive(index: number) { function setActive(index: number) {
const len = result.length const len = result.value.length
active = (index + len) % len active.value = (index + len) % len
intoView(active) intoView(active.value)
} }
function onKeyDown(e: KeyboardEvent) { function onKeyDown(e: KeyboardEvent) {
@ -118,7 +118,7 @@ function onKeyDown(e: KeyboardEvent) {
break break
e.preventDefault() e.preventDefault()
setActive(active - 1) setActive(active.value - 1)
break break
} }
@ -128,7 +128,7 @@ function onKeyDown(e: KeyboardEvent) {
break break
e.preventDefault() e.preventDefault()
setActive(active + 1) setActive(active.value + 1)
break break
} }
@ -136,9 +136,9 @@ function onKeyDown(e: KeyboardEvent) {
case 'Home': { case 'Home': {
e.preventDefault() e.preventDefault()
active = 0 active.value = 0
intoView(active) intoView(active.value)
break break
} }
@ -146,7 +146,7 @@ function onKeyDown(e: KeyboardEvent) {
case 'End': { case 'End': {
e.preventDefault() e.preventDefault()
setActive(result.length - 1) setActive(result.value.length - 1)
break break
} }
@ -154,7 +154,7 @@ function onKeyDown(e: KeyboardEvent) {
case 'Enter': { case 'Enter': {
e.preventDefault() e.preventDefault()
const cmd = result.items[active] const cmd = result.value.items[active.value]
if (cmd) if (cmd)
onCommandActivate(cmd) onCommandActivate(cmd)
@ -164,7 +164,7 @@ function onKeyDown(e: KeyboardEvent) {
case 'Tab': { case 'Tab': {
e.preventDefault() e.preventDefault()
const cmd = result.items[active] const cmd = result.value.items[active.value]
if (cmd) if (cmd)
onCommandComplete(cmd) onCommandComplete(cmd)
@ -172,9 +172,9 @@ function onKeyDown(e: KeyboardEvent) {
} }
case 'Backspace': { case 'Backspace': {
if (input === '>' && scopes.length) { if (input.value === '>' && scopes.value.length) {
e.preventDefault() e.preventDefault()
scopes.pop() scopes.value.pop()
} }
break break
} }

View file

@ -2,9 +2,7 @@
const emit = defineEmits<{ const emit = defineEmits<{
(event: 'close'): void (event: 'close'): void
}>() }>()
const { modelValue: visible } = defineModels<{ const visible = defineModel<boolean>()
modelValue?: boolean
}>()
function close() { function close() {
emit('close') emit('close')

View file

@ -4,10 +4,10 @@ defineProps<{
hover?: boolean hover?: boolean
iconChecked?: string iconChecked?: string
iconUnchecked?: string iconUnchecked?: string
checkedIconColor?: string
prependCheckbox?: boolean
}>() }>()
const { modelValue } = defineModels<{ const modelValue = defineModel<boolean | null>()
modelValue?: boolean | null
}>()
</script> </script>
<template> <template>
@ -17,9 +17,12 @@ const { modelValue } = defineModels<{
v-bind="$attrs" v-bind="$attrs"
@click.prevent="modelValue = !modelValue" @click.prevent="modelValue = !modelValue"
> >
<span v-if="label" flex-1 ms-2 pointer-events-none>{{ label }}</span> <span v-if="label && !prependCheckbox" flex-1 ms-2 pointer-events-none>{{ label }}</span>
<span <span
:class="modelValue ? (iconChecked ?? 'i-ri:checkbox-line') : (iconUnchecked ?? 'i-ri:checkbox-blank-line')" :class="[
modelValue ? (iconChecked ?? 'i-ri:checkbox-line') : (iconUnchecked ?? 'i-ri:checkbox-blank-line'),
modelValue && checkedIconColor,
]"
text-lg text-lg
aria-hidden="true" aria-hidden="true"
/> />
@ -28,6 +31,7 @@ const { modelValue } = defineModels<{
type="checkbox" type="checkbox"
sr-only sr-only
> >
<span v-if="label && prependCheckbox" flex-1 ms-2 pointer-events-none>{{ label }}</span>
</label> </label>
</template> </template>

View file

@ -14,10 +14,7 @@ const props = withDefaults(defineProps<Props>(), {
stencilSizePercentage: 0.9, stencilSizePercentage: 0.9,
}) })
const { modelValue: file } = defineModels<{ const file = defineModel<File | null>()
/** Images to be cropped */
modelValue: File | null
}>()
const cropperDialog = ref(false) const cropperDialog = ref(false)

View file

@ -22,9 +22,7 @@ const emit = defineEmits<{
(event: 'error', code: number, message: string): void (event: 'error', code: number, message: string): void
}>() }>()
const { modelValue: file } = defineModels<{ const file = defineModel<FileWithHandle | null>()
modelValue: FileWithHandle | null
}>()
const { t } = useI18n() const { t } = useI18n()
@ -35,7 +33,7 @@ const previewImage = ref('')
const imageSrc = computed<string>(() => previewImage.value || defaultImage.value) const imageSrc = computed<string>(() => previewImage.value || defaultImage.value)
async function pickImage() { async function pickImage() {
if (process.server) if (import.meta.server)
return return
const image = await fileOpen({ const image = await fileOpen({
description: 'Image', description: 'Image',

View file

@ -2,23 +2,23 @@
// @ts-expect-error missing types // @ts-expect-error missing types
import { DynamicScroller } from 'vue-virtual-scroller' import { DynamicScroller } from 'vue-virtual-scroller'
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css' import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
import type { Paginator, WsEvents } from 'masto' import type { mastodon } from 'masto'
import type { UnwrapRef } from 'vue' import type { UnwrapRef } from 'vue'
const { const {
paginator, paginator,
stream, stream,
eventType,
keyProp = 'id', keyProp = 'id',
virtualScroller = false, virtualScroller = false,
eventType = 'update',
preprocess, preprocess,
endMessage = true, endMessage = true,
} = defineProps<{ } = defineProps<{
paginator: Paginator<T[], O> paginator: mastodon.Paginator<T[], O>
keyProp?: keyof T keyProp?: keyof T
virtualScroller?: boolean virtualScroller?: boolean
stream?: Promise<WsEvents> stream?: mastodon.streaming.Subscription
eventType?: 'notification' | 'update' eventType?: 'update' | 'notification'
preprocess?: (items: (U | T)[]) => U[] preprocess?: (items: (U | T)[]) => U[]
endMessage?: boolean | string endMessage?: boolean | string
}>() }>()
@ -39,14 +39,14 @@ defineSlots<{
number: number number: number
update: () => void update: () => void
}) => void }) => void
loading: (props: {}) => void loading: (props: object) => void
done: (props: {}) => void done: (props: { items: U[] }) => void
}>() }>()
const { t } = useI18n() const { t } = useI18n()
const nuxtApp = useNuxtApp() const nuxtApp = useNuxtApp()
const { items, prevItems, update, state, endAnchor, error } = usePaginator(paginator, $$(stream), eventType, preprocess) const { items, prevItems, update, state, endAnchor, error } = usePaginator(paginator, toRef(() => stream), eventType, preprocess)
nuxtApp.hook('elk-logo:click', () => { nuxtApp.hook('elk-logo:click', () => {
update() update()
@ -96,8 +96,8 @@ defineExpose({ createEntry, removeEntry, updateEntry })
</template> </template>
<template v-else> <template v-else>
<slot <slot
v-for="item, index of items" v-for="(item, index) of items"
v-bind="{ key: item[keyProp as keyof U] }" v-bind="{ key: (item as U)[keyProp as keyof U] }"
:item="item as U" :item="item as U"
:older="items[index + 1] as U" :older="items[index + 1] as U"
:newer="items[index - 1] as U" :newer="items[index - 1] as U"
@ -110,9 +110,9 @@ defineExpose({ createEntry, removeEntry, updateEntry })
<slot v-if="state === 'loading'" name="loading"> <slot v-if="state === 'loading'" name="loading">
<TimelineSkeleton /> <TimelineSkeleton />
</slot> </slot>
<slot v-else-if="state === 'done' && endMessage !== false" name="done"> <slot v-else-if="state === 'done' && endMessage !== false" name="done" :items="items as U[]">
<div p5 text-secondary italic text-center> <div p5 text-secondary italic text-center>
{{ t(typeof endMessage === 'string' ? endMessage : 'common.end_of_list') }} {{ t(typeof endMessage === 'string' && items.length <= 0 ? endMessage : 'common.end_of_list') }}
</div> </div>
</slot> </slot>
<div v-else-if="state === 'error'" p5 text-secondary> <div v-else-if="state === 'error'" p5 text-secondary>

View file

@ -4,9 +4,7 @@ defineProps<{
value: any value: any
hover?: boolean hover?: boolean
}>() }>()
const { modelValue } = defineModels<{ const modelValue = defineModel()
modelValue: any
}>()
</script> </script>
<template> <template>

View file

@ -1,27 +1,20 @@
<script setup lang="ts"> <script setup lang="ts">
import type { RouteLocationRaw } from 'vue-router' import type { CommonRouteTabMoreOption, CommonRouteTabOption } from '~/types'
export interface CommonRouteTabOption { const { options, command, replace, preventScrollTop = false, moreOptions } = defineProps<{
to: RouteLocationRaw
display: string
disabled?: boolean
name?: string
icon?: string
hide?: boolean
}
const { options, command, replace, preventScrollTop = false } = $defineProps<{
options: CommonRouteTabOption[] options: CommonRouteTabOption[]
moreOptions?: CommonRouteTabMoreOption
command?: boolean command?: boolean
replace?: boolean replace?: boolean
preventScrollTop?: boolean preventScrollTop?: boolean
}>() }>()
const { t } = useI18n()
const router = useRouter() const router = useRouter()
useCommands(() => command useCommands(() => command
? options.map(tab => ({ ? options.map(tab => ({
scope: 'Tabs', scope: 'Tabs',
name: tab.display, name: tab.display,
icon: tab.icon ?? 'i-ri:file-list-2-line', icon: tab.icon ?? 'i-ri:file-list-2-line',
onActivate: () => router.replace(tab.to), onActivate: () => router.replace(tab.to),
@ -40,7 +33,7 @@ useCommands(() => command
:to="option.to" :to="option.to"
:replace="replace" :replace="replace"
relative flex flex-auto cursor-pointer sm:px6 px2 rounded transition-all relative flex flex-auto cursor-pointer sm:px6 px2 rounded transition-all
tabindex="1" tabindex="0"
hover:bg-active transition-100 hover:bg-active transition-100
exact-active-class="children:(text-secondary !border-primary !op100 !text-base)" exact-active-class="children:(text-secondary !border-primary !op100 !text-base)"
@click="!preventScrollTop && $scrollToTop()" @click="!preventScrollTop && $scrollToTop()"
@ -51,5 +44,43 @@ useCommands(() => command
<span ws-nowrap mxa sm:px2 sm:py3 py2 text-center text-secondary-light op50>{{ option.display }}</span> <span ws-nowrap mxa sm:px2 sm:py3 py2 text-center text-secondary-light op50>{{ option.display }}</span>
</div> </div>
</template> </template>
<template v-if="isHydrated && moreOptions?.options?.length">
<CommonDropdown placement="bottom" flex cursor-pointer mx-1.25rem>
<CommonTooltip placement="top" no-auto-focus :content="moreOptions.tooltip || t('action.more')">
<button
cursor-pointer
flex
gap-1
w-12
rounded
hover:bg-active
btn-action-icon
op75
px4
group
:aria-label="t('action.more')"
:class="moreOptions.match ? 'text-primary' : 'text-secondary'"
>
<span v-if="moreOptions.icon" :class="moreOptions.icon" text-sm me--1 block />
<span i-ri:arrow-down-s-line text-sm me--1 block />
</button>
</CommonTooltip>
<template #popper>
<NuxtLink
v-for="(option, index) in moreOptions.options.filter(item => !item.hide)"
:key="option?.name || index"
:to="option.to"
>
<CommonDropdownItem>
<span flex="~ row" gap-x-4 items-center :class="option.match ? 'text-primary' : ''">
<span v-if="option.icon" :class="[option.icon, option.match ? 'text-primary' : 'text.secondary']" text-md me--1 block />
<span v-else block>&#160;</span>
<span>{{ option.display }}</span>
</span>
</CommonDropdownItem>
</NuxtLink>
</template>
</commondropdown>
</template>
</div> </div>
</template> </template>

View file

@ -1,5 +1,9 @@
<script setup lang="ts"> <script setup lang="ts">
const { as = 'div', active } = defineProps<{ as: any; active: boolean }>() const { as = 'div', active } = defineProps<{
as: any
active: boolean
}>()
const el = ref() const el = ref()
watch(() => active, (active) => { watch(() => active, (active) => {

View file

@ -8,11 +8,9 @@ const { options, command } = defineProps<{
command?: boolean command?: boolean
}>() }>()
const { modelValue } = defineModels<{ const modelValue = defineModel<string>({ required: true })
modelValue: string
}>()
const tabs = $computed(() => { const tabs = computed(() => {
return options.map((option) => { return options.map((option) => {
if (typeof option === 'string') if (typeof option === 'string')
return { name: option, display: option } return { name: option, display: option }
@ -21,12 +19,12 @@ const tabs = $computed(() => {
}) })
}) })
function toValidName(otpion: string) { function toValidName(option: string) {
return otpion.toLowerCase().replace(/[^a-zA-Z0-9]/g, '-') return option.toLowerCase().replace(/[^a-zA-Z0-9]/g, '-')
} }
useCommands(() => command useCommands(() => command
? tabs.map(tab => ({ ? tabs.value.map(tab => ({
scope: 'Tabs', scope: 'Tabs',
name: tab.display, name: tab.display,
@ -51,7 +49,7 @@ useCommands(() => command
><label ><label
flex flex-auto cursor-pointer px3 m1 rounded transition-all flex flex-auto cursor-pointer px3 m1 rounded transition-all
:for="`tab-${toValidName(option.name)}`" :for="`tab-${toValidName(option.name)}`"
tabindex="1" tabindex="0"
hover:bg-active transition-100 hover:bg-active transition-100
@keypress.enter="modelValue = option.name" @keypress.enter="modelValue = option.name"
><span ><span

View file

@ -1,5 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import type { Popper as VTooltipType } from 'floating-vue/dist' import type { Popper as VTooltipType } from 'floating-vue'
export interface Props extends Partial<typeof VTooltipType> { export interface Props extends Partial<typeof VTooltipType> {
content?: string content?: string
@ -10,6 +10,7 @@ defineProps<Props>()
<template> <template>
<VTooltip <VTooltip
v-if="isHydrated"
v-bind="$attrs" v-bind="$attrs"
auto-hide auto-hide
> >

View file

@ -4,20 +4,20 @@ import type { mastodon } from 'masto'
const { const {
history, history,
maxDay = 2, maxDay = 2,
} = $defineProps<{ } = defineProps<{
history: mastodon.v1.TagHistory[] history: mastodon.v1.TagHistory[]
maxDay?: number maxDay?: number
}>() }>()
const ongoingHot = $computed(() => history.slice(0, maxDay)) const ongoingHot = computed(() => history.slice(0, maxDay))
const people = $computed(() => const people = computed(() =>
ongoingHot.reduce((total: number, item) => total + (Number(item.accounts) || 0), 0), ongoingHot.value.reduce((total: number, item) => total + (Number(item.accounts) || 0), 0),
) )
</script> </script>
<template> <template>
<p> <p>
{{ $t('command.n-people-in-the-past-n-days', [people, maxDay]) }} {{ $t('command.n_people_in_the_past_n_days', [people, maxDay]) }}
</p> </p>
</template> </template>

View file

@ -6,22 +6,22 @@ const {
history, history,
width = 60, width = 60,
height = 40, height = 40,
} = $defineProps<{ } = defineProps<{
history?: mastodon.v1.TagHistory[] history?: mastodon.v1.TagHistory[]
width?: number width?: number
height?: number height?: number
}>() }>()
const historyNum = $computed(() => { const historyNum = computed(() => {
if (!history) if (!history)
return [1, 1, 1, 1, 1, 1, 1] return [1, 1, 1, 1, 1, 1, 1]
return [...history].reverse().map(item => Number(item.accounts) || 0) return [...history].reverse().map(item => Number(item.accounts) || 0)
}) })
const sparklineEl = $ref<SVGSVGElement>() const sparklineEl = ref<SVGSVGElement>()
const sparklineFn = typeof sparkline !== 'function' ? (sparkline as any).default : sparkline const sparklineFn = typeof sparkline !== 'function' ? (sparkline as any).default : sparkline
watch([$$(historyNum), $$(sparklineEl)], ([historyNum, sparklineEl]) => { watch([historyNum, sparklineEl], ([historyNum, sparklineEl]) => {
if (!sparklineEl) if (!sparklineEl)
return return
sparklineFn(sparklineEl, historyNum) sparklineFn(sparklineEl, historyNum)

View file

@ -10,9 +10,9 @@ const props = defineProps<{
const { formatHumanReadableNumber, formatNumber, forSR } = useHumanReadableNumber() const { formatHumanReadableNumber, formatNumber, forSR } = useHumanReadableNumber()
const useSR = $computed(() => forSR(props.count)) const useSR = computed(() => forSR(props.count))
const rawNumber = $computed(() => formatNumber(props.count)) const rawNumber = computed(() => formatNumber(props.count))
const humanReadableNumber = $computed(() => formatHumanReadableNumber(props.count)) const humanReadableNumber = computed(() => formatHumanReadableNumber(props.count))
</script> </script>
<template> <template>

View file

@ -6,11 +6,11 @@ defineProps<{
autoBoundaryMaxSize?: boolean autoBoundaryMaxSize?: boolean
}>() }>()
const dropdown = $ref<any>() const dropdown = ref<any>()
const colorMode = useColorMode() const colorMode = useColorMode()
function hide() { function hide() {
return dropdown.hide() return dropdown.value.hide()
} }
provide(InjectionKeyDropdownContext, { provide(InjectionKeyDropdownContext, {
hide, hide,

View file

@ -4,7 +4,7 @@ const props = defineProps<{
lang?: string lang?: string
}>() }>()
const raw = $computed(() => decodeURIComponent(props.code).replace(/&#39;/g, '\'')) const raw = computed(() => decodeURIComponent(props.code).replace(/&#39;/g, '\''))
const langMap: Record<string, string> = { const langMap: Record<string, string> = {
js: 'javascript', js: 'javascript',
@ -13,7 +13,7 @@ const langMap: Record<string, string> = {
} }
const highlighted = computed(() => { const highlighted = computed(() => {
return props.lang ? highlightCode(raw, (langMap[props.lang] || props.lang) as any) : raw return props.lang ? highlightCode(raw.value, (langMap[props.lang] || props.lang) as any) : raw
}) })
</script> </script>

View file

@ -5,7 +5,7 @@ const { conversation } = defineProps<{
conversation: mastodon.v1.Conversation conversation: mastodon.v1.Conversation
}>() }>()
const withAccounts = $computed(() => const withAccounts = computed(() =>
conversation.accounts.filter(account => account.id !== conversation.lastStatus?.account.id), conversation.accounts.filter(account => account.id !== conversation.lastStatus?.account.id),
) )
</script> </script>

View file

@ -1,8 +1,8 @@
<script setup lang="ts"> <script setup lang="ts">
import type { Paginator, mastodon } from 'masto' import type { mastodon } from 'masto'
const { paginator } = defineProps<{ const { paginator } = defineProps<{
paginator: Paginator<mastodon.v1.Conversation[], mastodon.DefaultPaginationParams> paginator: mastodon.Paginator<mastodon.v1.Conversation[], mastodon.DefaultPaginationParams>
}>() }>()
function preprocess(items: mastodon.v1.Conversation[]): mastodon.v1.Conversation[] { function preprocess(items: mastodon.v1.Conversation[]): mastodon.v1.Conversation[] {

View file

@ -0,0 +1,30 @@
<script setup lang="ts">
const { as, alt, dataEmojiId } = defineProps<{
as: string
alt?: string
dataEmojiId?: string
}>()
const title = ref<string | undefined>()
if (alt) {
if (alt.startsWith(':')) {
title.value = alt.replace(/:/g, '')
}
else {
import('node-emoji').then(({ find }) => {
title.value = find(alt)?.key.replace(/_/g, ' ')
})
}
}
// if it has a data-emoji-id, use that as the title instead
if (dataEmojiId)
title.value = dataEmojiId
</script>
<template>
<component :is="as" v-bind="$attrs" :alt="alt" :data-emoji-id="dataEmojiId" :title="title">
<slot />
</component>
</template>

View file

@ -2,12 +2,14 @@
const emit = defineEmits<{ const emit = defineEmits<{
(event: 'close'): void (event: 'close'): void
}>() }>()
const vAutoFocus = (el: HTMLElement) => el.focus()
</script> </script>
<template> <template>
<div my-8 px-3 sm:px-8 md:max-w-200 flex="~ col gap-4" relative> <div my-8 px-3 sm:px-8 md:max-w-200 flex="~ col gap-4" relative>
<button btn-action-icon absolute top--8 right-0 m1 aria-label="Close" @click="emit('close')"> <button v-auto-focus type="button" btn-action-icon absolute top--8 right-0 m1 aria-label="Close" @click="emit('close')">
<div i-ri:close-line /> <span i-ri:close-line />
</button> </button>
<img :alt="$t('app_logo')" :src="`/${''}logo.svg`" w-20 h-20 height="80" width="80" mxa class="rtl-flip"> <img :alt="$t('app_logo')" :src="`/${''}logo.svg`" w-20 h-20 height="80" width="80" mxa class="rtl-flip">
@ -28,10 +30,12 @@ const emit = defineEmits<{
</NuxtLink> </NuxtLink>
{{ $t('help.desc_para6') }} {{ $t('help.desc_para6') }}
</p> </p>
{{ $t('help.desc_para3') }} <NuxtLink hover:text-primary href="https://github.com/sponsors/elk-zone" target="_blank">
<p flex="~ gap-2 wrap" mxa> {{ $t('help.desc_para3') }}
</NuxtLink>
<p flex="~ gap-2 wrap justify-center" mxa>
<template v-for="team of elkTeamMembers" :key="team.github"> <template v-for="team of elkTeamMembers" :key="team.github">
<NuxtLink :href="`https://github.com/sponsors/${team.github}`" target="_blank" external rounded-full transition duration-300 border="~ transparent" hover="scale-105 border-primary"> <NuxtLink :href="team.link" target="_blank" external rounded-full transition duration-300 border="~ transparent" hover="scale-105 border-primary">
<img :src="`/avatars/${team.github}-100x100.png`" :alt="team.display" rounded-full w-15 h-15 height="60" width="60"> <img :src="`/avatars/${team.github}-100x100.png`" :alt="team.display" rounded-full w-15 h-15 height="60" width="60">
</NuxtLink> </NuxtLink>
</template> </template>
@ -42,7 +46,7 @@ const emit = defineEmits<{
</NuxtLink> </NuxtLink>
</p> </p>
<button btn-solid mxa tabindex="2" @click="emit('close')"> <button type="button" btn-solid mxa @click="emit('close')">
{{ $t('action.enter_app') }} {{ $t('action.enter_app') }}
</button> </button>
</div> </div>

View file

@ -16,8 +16,8 @@ const isRemoved = ref(false)
async function edit() { async function edit() {
try { try {
isRemoved.value isRemoved.value
? await client.v1.lists.addAccount(list, { accountIds: [account.id] }) ? await client.v1.lists.$select(list).accounts.create({ accountIds: [account.id] })
: await client.v1.lists.removeAccount(list, { accountIds: [account.id] }) : await client.v1.lists.$select(list).accounts.remove({ accountIds: [account.id] })
isRemoved.value = !isRemoved.value isRemoved.value = !isRemoved.value
} }
catch (err) { catch (err) {

View file

@ -6,9 +6,7 @@ const emit = defineEmits<{
(e: 'listUpdated', list: mastodon.v1.List): void (e: 'listUpdated', list: mastodon.v1.List): void
(e: 'listRemoved', id: string): void (e: 'listRemoved', id: string): void
}>() }>()
const { list } = defineModels<{ const list = defineModel<mastodon.v1.List>({ required: true })
list: mastodon.v1.List
}>()
const { t } = useI18n() const { t } = useI18n()
const client = useMastoClient() const client = useMastoClient()
@ -17,23 +15,23 @@ const { form, isDirty, submitter, reset } = useForm({
form: () => ({ ...list.value }), form: () => ({ ...list.value }),
}) })
let isEditing = $ref<boolean>(false) const isEditing = ref<boolean>(false)
let deleting = $ref<boolean>(false) const deleting = ref<boolean>(false)
let actionError = $ref<string | undefined>(undefined) const actionError = ref<string | undefined>(undefined)
const input = ref<HTMLInputElement>() const input = ref<HTMLInputElement>()
const editBtn = ref<HTMLButtonElement>() const editBtn = ref<HTMLButtonElement>()
const deleteBtn = ref<HTMLButtonElement>() const deleteBtn = ref<HTMLButtonElement>()
async function prepareEdit() { async function prepareEdit() {
isEditing = true isEditing.value = true
actionError = undefined actionError.value = undefined
await nextTick() await nextTick()
input.value?.focus() input.value?.focus()
} }
async function cancelEdit() { async function cancelEdit() {
isEditing = false isEditing.value = false
actionError = undefined actionError.value = undefined
reset() reset()
await nextTick() await nextTick()
@ -42,58 +40,59 @@ async function cancelEdit() {
const { submit, submitting } = submitter(async () => { const { submit, submitting } = submitter(async () => {
try { try {
list.value = await client.v1.lists.update(form.id, { list.value = await client.v1.lists.$select(form.id).update({
title: form.title, title: form.title,
}) })
cancelEdit() cancelEdit()
} }
catch (err) { catch (err) {
console.error(err) console.error(err)
actionError = (err as Error).message actionError.value = (err as Error).message
await nextTick() await nextTick()
input.value?.focus() input.value?.focus()
} }
}) })
async function removeList() { async function removeList() {
if (deleting) if (deleting.value)
return return
const confirmDelete = await openConfirmDialog({ const confirmDelete = await openConfirmDialog({
title: t('confirm.delete_list.title', [list.value.title]), title: t('confirm.delete_list.title'),
description: t('confirm.delete_list.description', [list.value.title]),
confirm: t('confirm.delete_list.confirm'), confirm: t('confirm.delete_list.confirm'),
cancel: t('confirm.delete_list.cancel'), cancel: t('confirm.delete_list.cancel'),
}) })
deleting = true deleting.value = true
actionError = undefined actionError.value = undefined
await nextTick() await nextTick()
if (confirmDelete === 'confirm') { if (confirmDelete.choice === 'confirm') {
await nextTick() await nextTick()
try { try {
await client.v1.lists.remove(list.value.id) await client.v1.lists.$select(list.value.id).remove()
emit('listRemoved', list.value.id) emit('listRemoved', list.value.id)
} }
catch (err) { catch (err) {
console.error(err) console.error(err)
actionError = (err as Error).message actionError.value = (err as Error).message
await nextTick() await nextTick()
deleteBtn.value?.focus() deleteBtn.value?.focus()
} }
finally { finally {
deleting = false deleting.value = false
} }
} }
else { else {
deleting = false deleting.value = false
} }
} }
async function clearError() { async function clearError() {
actionError = undefined actionError.value = undefined
await nextTick() await nextTick()
if (isEditing) if (isEditing.value)
input.value?.focus() input.value?.focus()
else else
deleteBtn.value?.focus() deleteBtn.value?.focus()

View file

@ -3,9 +3,9 @@ const { userId } = defineProps<{
userId: string userId: string
}>() }>()
const { client } = $(useMasto()) const { client } = useMasto()
const paginator = client.v1.lists.list() const paginator = client.value.v1.lists.list()
const listsWithUser = ref((await client.v1.accounts.listLists(userId)).map(list => list.id)) const listsWithUser = ref((await client.value.v1.accounts.$select(userId).lists.list()).map(list => list.id))
function indexOfUserInList(listId: string) { function indexOfUserInList(listId: string) {
return listsWithUser.value.indexOf(listId) return listsWithUser.value.indexOf(listId)
@ -15,11 +15,11 @@ async function edit(listId: string) {
try { try {
const index = indexOfUserInList(listId) const index = indexOfUserInList(listId)
if (index === -1) { if (index === -1) {
await client.v1.lists.addAccount(listId, { accountIds: [userId] }) await client.value.v1.lists.$select(listId).accounts.create({ accountIds: [userId] })
listsWithUser.value.push(listId) listsWithUser.value.push(listId)
} }
else { else {
await client.v1.lists.removeAccount(listId, { accountIds: [userId] }) await client.value.v1.lists.$select(listId).accounts.remove({ accountIds: [userId] })
listsWithUser.value = listsWithUser.value.filter(id => id !== listId) listsWithUser.value = listsWithUser.value.filter(id => id !== listId)
} }
} }

View file

@ -21,7 +21,10 @@ interface ShortcutItemGroup {
items: ShortcutItem[] items: ShortcutItem[]
} }
const shortcutItemGroups: ShortcutItemGroup[] = [ const isMac = useIsMac()
const modifierKeyName = computed(() => isMac.value ? '⌘' : 'Ctrl')
const shortcutItemGroups = computed<ShortcutItemGroup[]>(() => [
{ {
name: t('magic_keys.groups.navigation.title'), name: t('magic_keys.groups.navigation.title'),
items: [ items: [
@ -37,6 +40,10 @@ const shortcutItemGroups: ShortcutItemGroup[] = [
// description: t('magic_keys.groups.navigation.previous_status'), // description: t('magic_keys.groups.navigation.previous_status'),
// shortcut: { keys: ['k'], isSequence: false }, // shortcut: { keys: ['k'], isSequence: false },
// }, // },
{
description: t('magic_keys.groups.navigation.go_to_search'),
shortcut: { keys: ['/'], isSequence: false },
},
{ {
description: t('magic_keys.groups.navigation.go_to_home'), description: t('magic_keys.groups.navigation.go_to_home'),
shortcut: { keys: ['g', 'h'], isSequence: true }, shortcut: { keys: ['g', 'h'], isSequence: true },
@ -45,19 +52,63 @@ const shortcutItemGroups: ShortcutItemGroup[] = [
description: t('magic_keys.groups.navigation.go_to_notifications'), description: t('magic_keys.groups.navigation.go_to_notifications'),
shortcut: { keys: ['g', 'n'], isSequence: true }, shortcut: { keys: ['g', 'n'], isSequence: true },
}, },
{
description: t('magic_keys.groups.navigation.go_to_conversations'),
shortcut: { keys: ['g', 'c'], isSequence: true },
},
{
description: t('magic_keys.groups.navigation.go_to_favourites'),
shortcut: { keys: ['g', 'f'], isSequence: true },
},
{
description: t('magic_keys.groups.navigation.go_to_bookmarks'),
shortcut: { keys: ['g', 'b'], isSequence: true },
},
{
description: t('magic_keys.groups.navigation.go_to_explore'),
shortcut: { keys: ['g', 'e'], isSequence: true },
},
{
description: t('magic_keys.groups.navigation.go_to_local'),
shortcut: { keys: ['g', 'l'], isSequence: true },
},
{
description: t('magic_keys.groups.navigation.go_to_federated'),
shortcut: { keys: ['g', 't'], isSequence: true },
},
{
description: t('magic_keys.groups.navigation.go_to_lists'),
shortcut: { keys: ['g', 'i'], isSequence: true },
},
{
description: t('magic_keys.groups.navigation.go_to_settings'),
shortcut: { keys: ['g', 's'], isSequence: true },
},
{
description: t('magic_keys.groups.navigation.go_to_profile'),
shortcut: { keys: ['g', 'p'], isSequence: true },
},
], ],
}, },
{ {
name: t('magic_keys.groups.actions.title'), name: t('magic_keys.groups.actions.title'),
items: [ items: [
{
description: t('magic_keys.groups.actions.search'),
shortcut: { keys: [modifierKeyName.value, 'k'], isSequence: false },
},
{ {
description: t('magic_keys.groups.actions.command_mode'), description: t('magic_keys.groups.actions.command_mode'),
shortcut: { keys: ['cmd', '/'], isSequence: false }, shortcut: { keys: [modifierKeyName.value, '/'], isSequence: false },
}, },
{ {
description: t('magic_keys.groups.actions.compose'), description: t('magic_keys.groups.actions.compose'),
shortcut: { keys: ['c'], isSequence: false }, shortcut: { keys: ['c'], isSequence: false },
}, },
{
description: t('magic_keys.groups.actions.show_new_items'),
shortcut: { keys: ['.'], isSequence: false },
},
{ {
description: t('magic_keys.groups.actions.favourite'), description: t('magic_keys.groups.actions.favourite'),
shortcut: { keys: ['f'], isSequence: false }, shortcut: { keys: ['f'], isSequence: false },
@ -72,7 +123,7 @@ const shortcutItemGroups: ShortcutItemGroup[] = [
name: t('magic_keys.groups.media.title'), name: t('magic_keys.groups.media.title'),
items: [], items: [],
}, },
] ])
</script> </script>
<template> <template>

View file

@ -10,6 +10,7 @@ defineProps<{
const container = ref() const container = ref()
const route = useRoute() const route = useRoute()
const userSettings = useUserSettings()
const { height: windowHeight } = useWindowSize() const { height: windowHeight } = useWindowSize()
const { height: containerHeight } = useElementBounding(container) const { height: containerHeight } = useElementBounding(container)
const wideLayout = computed(() => route.meta.wideLayout ?? false) const wideLayout = computed(() => route.meta.wideLayout ?? false)
@ -26,10 +27,13 @@ const containerClass = computed(() => {
<template> <template>
<div ref="container" :class="containerClass"> <div ref="container" :class="containerClass">
<div <div
sticky top-0 z10 backdrop-blur sticky top-0 z10
pt="[env(safe-area-inset-top,0)]" pt="[env(safe-area-inset-top,0)]"
bg="[rgba(var(--rgb-bg-base),0.7)]" bg="[rgba(var(--rgb-bg-base),0.7)]"
class="native:lg:w-[calc(100vw-5rem)] native:xl:w-[calc(135%+(100vw-1200px)/2)]" class="native:lg:w-[calc(100vw-5rem)] native:xl:w-[calc(135%+(100vw-1200px)/2)]"
:class="{
'backdrop-blur': !getPreferences(userSettings, 'optimizeForLowPerformanceDevice'),
}"
> >
<div flex justify-between px5 py2 :class="{ 'xl:hidden': $route.name !== 'tag' }" class="native:xl:flex" border="b base"> <div flex justify-between px5 py2 :class="{ 'xl:hidden': $route.name !== 'tag' }" class="native:xl:flex" border="b base">
<div flex gap-3 items-center :overflow-hidden="!noOverflowHidden ? '' : false" py2 w-full> <div flex gap-3 items-center :overflow-hidden="!noOverflowHidden ? '' : false" py2 w-full>
@ -40,7 +44,7 @@ const containerClass = computed(() => {
> >
<div i-ri:arrow-left-line class="rtl-flip" /> <div i-ri:arrow-left-line class="rtl-flip" />
</NuxtLink> </NuxtLink>
<div :truncate="!noOverflowHidden ? '' : false" flex w-full data-tauri-drag-region class="native-mac:justify-center native-mac:text-center native-mac:sm:justify-start"> <div :truncate="!noOverflowHidden ? '' : false" flex w-full data-tauri-drag-region class="native-mac:justify-start native-mac:text-center">
<slot name="title" /> <slot name="title" />
</div> </div>
<div sm:hidden h-7 w-1px /> <div sm:hidden h-7 w-1px />

View file

@ -0,0 +1,45 @@
<script setup lang="ts">
const model = defineModel<number>()
const isValid = defineModel<boolean>('isValid')
const days = ref<number | ''>(0)
const hours = ref<number | ''>(1)
const minutes = ref<number | ''>(0)
watchEffect(() => {
if (days.value === '' || hours.value === '' || minutes.value === '') {
isValid.value = false
return
}
const duration
= days.value * 24 * 60 * 60
+ hours.value * 60 * 60
+ minutes.value * 60
if (duration <= 0) {
isValid.value = false
return
}
isValid.value = true
model.value = duration
})
</script>
<template>
<div flex flex-grow-0 gap-2>
<label flex items-center gap-2>
<input v-model="days" type="number" min="0" max="1999" input-base :class="!isValid ? 'input-error' : null">
{{ $t('confirm.mute_account.days', days === '' ? 0 : days) }}
</label>
<label flex items-center gap-2>
<input v-model="hours" type="number" min="0" max="24" input-base :class="!isValid ? 'input-error' : null">
{{ $t('confirm.mute_account.hours', hours === '' ? 0 : hours) }}
</label>
<label flex items-center gap-2>
<input v-model="minutes" type="number" min="0" max="59" step="5" input-base :class="!isValid ? 'input-error' : null">
{{ $t('confirm.mute_account.minute', minutes === '' ? 0 : minutes) }}
</label>
</div>
</template>

View file

@ -1,26 +1,55 @@
<script setup lang="ts"> <script setup lang="ts">
import type { ConfirmDialogChoice, ConfirmDialogLabel } from '~/types' import type { ConfirmDialogChoice, ConfirmDialogOptions } from '~/types'
import DurationPicker from '~/components/modal/DurationPicker.vue'
defineProps<ConfirmDialogLabel>() const props = defineProps<ConfirmDialogOptions>()
const emit = defineEmits<{ const emit = defineEmits<{
(evt: 'choice', choice: ConfirmDialogChoice): void (evt: 'choice', choice: ConfirmDialogChoice): void
}>() }>()
const hasDuration = ref(false)
const isValidDuration = ref(true)
const duration = ref(60 * 60) // default to 1 hour
const shouldMuteNotifications = ref(true)
const isMute = computed(() => props.extraOptionType === 'mute')
function handleChoice(choice: ConfirmDialogChoice['choice']) {
const dialogChoice = {
choice,
...isMute.value && {
extraOptions: {
mute: {
duration: hasDuration.value ? duration.value : 0,
notifications: shouldMuteNotifications.value,
},
},
},
}
emit('choice', dialogChoice)
}
</script> </script>
<template> <template>
<div flex="~ col" gap-6> <div flex="~ col" gap-6>
<div font-bold text-lg text-center> <div font-bold text-lg>
{{ title }} {{ title }}
</div> </div>
<div v-if="description"> <div v-if="description">
{{ description }} {{ description }}
</div> </div>
<div v-if="isMute" flex-col flex gap-4>
<CommonCheckbox v-model="hasDuration" :label="$t('confirm.mute_account.specify_duration')" prepend-checkbox checked-icon-color="text-primary" />
<DurationPicker v-if="hasDuration" v-model="duration" v-model:is-valid="isValidDuration" />
<CommonCheckbox v-model="shouldMuteNotifications" :label="$t('confirm.mute_account.notifications')" prepend-checkbox checked-icon-color="text-primary" />
</div>
<div flex justify-end gap-2> <div flex justify-end gap-2>
<button btn-text @click="emit('choice', 'cancel')"> <button btn-text @click="handleChoice('cancel')">
{{ cancel || $t('confirm.common.cancel') }} {{ cancel || $t('confirm.common.cancel') }}
</button> </button>
<button btn-solid @click="emit('choice', 'confirm')"> <button btn-solid :disabled="!isValidDuration" @click="handleChoice('confirm')">
{{ confirm || $t('confirm.common.confirm') }} {{ confirm || $t('confirm.common.confirm') }}
</button> </button>
</div> </div>

View file

@ -49,16 +49,14 @@ const props = withDefaults(defineProps<Props>(), {
const emit = defineEmits<{ const emit = defineEmits<{
/** v-model dialog visibility */ /** v-model dialog visibility */
(event: 'close',): void (event: 'close'): void
}>() }>()
const { modelValue: visible } = defineModels<{ const visible = defineModel<boolean>({ required: true })
/** v-model dislog visibility */
modelValue: boolean
}>()
const deactivated = useDeactivated() const deactivated = useDeactivated()
const route = useRoute() const route = useRoute()
const userSettings = useUserSettings()
/** scrollable HTML element */ /** scrollable HTML element */
const elDialogMain = ref<HTMLDivElement>() const elDialogMain = ref<HTMLDivElement>()
@ -80,6 +78,8 @@ defineExpose({
/** close the dialog */ /** close the dialog */
function close() { function close() {
if (!visible.value)
return
visible.value = false visible.value = false
emit('close') emit('close')
} }
@ -157,7 +157,13 @@ useEventListener('keydown', (e: KeyboardEvent) => {
<!-- corresponding to issue: #106, so please don't remove it. --> <!-- corresponding to issue: #106, so please don't remove it. -->
<!-- Mask layer: blur --> <!-- Mask layer: blur -->
<div class="dialog-mask" absolute inset-0 z-0 bg-transparent opacity-100 backdrop-filter backdrop-blur-sm touch-none /> <div
class="dialog-mask"
:class="{
'backdrop-blur-sm': !getPreferences(userSettings, 'optimizeForLowPerformanceDevice'),
}"
absolute inset-0 z-0 bg-transparent opacity-100 backdrop-filter touch-none
/>
<!-- Mask layer: dimming --> <!-- Mask layer: dimming -->
<div class="dialog-mask" absolute inset-0 z-0 bg-black opacity-48 touch-none h="[calc(100%+0.5px)]" @click="clickMask" /> <div class="dialog-mask" absolute inset-0 z-0 bg-black opacity-48 touch-none h="[calc(100%+0.5px)]" @click="clickMask" />
<!-- Dialog container --> <!-- Dialog container -->

View file

@ -37,7 +37,7 @@ onUnmounted(() => locked.value = false)
</script> </script>
<template> <template>
<div relative h-full w-full flex pt-12 w-100vh @click="onClick"> <div relative h-full w-full flex pt-12 @click="onClick">
<button <button
v-if="hasNext" pointer-events-auto btn-action-icon bg="black/20" :aria-label="$t('action.previous')" v-if="hasNext" pointer-events-auto btn-action-icon bg="black/20" :aria-label="$t('action.previous')"
hover:bg="black/40" dark:bg="white/30" dark-hover:bg="white/20" absolute top="1/2" right-1 z5 hover:bg="black/40" dark:bg="white/30" dark-hover:bg="white/20" absolute top="1/2" right-1 z5

View file

@ -12,19 +12,17 @@ const emit = defineEmits<{
(event: 'close'): void (event: 'close'): void
}>() }>()
const { modelValue } = defineModels<{ const modelValue = defineModel<number>({ required: true })
modelValue: number
}>()
const slideGap = 20 const slideGap = 20
const doubleTapTreshold = 250 const doubleTapThreshold = 250
const view = ref() const view = ref()
const slider = ref() const slider = ref()
const slide = ref() const slide = ref()
const image = ref() const image = ref()
const reduceMotion = process.server ? ref(false) : useReducedMotion() const reduceMotion = import.meta.server ? ref(false) : useReducedMotion()
const isInitialScrollDone = useTimeout(350) const isInitialScrollDone = useTimeout(350)
const canAnimate = computed(() => isInitialScrollDone.value && !reduceMotion.value) const canAnimate = computed(() => isInitialScrollDone.value && !reduceMotion.value)
@ -38,6 +36,8 @@ const isPinching = ref(false)
const maxZoomOut = ref(1) const maxZoomOut = ref(1)
const isZoomedIn = computed(() => scale.value > 1) const isZoomedIn = computed(() => scale.value > 1)
const enableAutoplay = usePreferences('enableAutoplay')
function goToFocusedSlide() { function goToFocusedSlide() {
scale.value = 1 scale.value = 1
x.value = slide.value[modelValue.value].offsetLeft * scale.value x.value = slide.value[modelValue.value].offsetLeft * scale.value
@ -149,7 +149,7 @@ function handleLastDrag(tap: boolean, swipe: Vector2, movement: Vector2, positio
let lastTapAt = 0 let lastTapAt = 0
function handleTap([positionX, positionY]: Vector2) { function handleTap([positionX, positionY]: Vector2) {
const now = Date.now() const now = Date.now()
const isDoubleTap = now - lastTapAt < doubleTapTreshold const isDoubleTap = now - lastTapAt < doubleTapThreshold
lastTapAt = now lastTapAt = now
if (!isDoubleTap) if (!isDoubleTap)
@ -220,7 +220,7 @@ function handleZoomDrag([deltaX, deltaY]: Vector2) {
function handleSlideDrag([movementX, movementY]: Vector2) { function handleSlideDrag([movementX, movementY]: Vector2) {
goToFocusedSlide() goToFocusedSlide()
if (Math.abs(movementY) > Math.abs(movementX)) // vertical movement is more then horizontal if (Math.abs(movementY) > Math.abs(movementX)) // vertical movement is more than horizontal
y.value -= movementY / scale.value y.value -= movementY / scale.value
else else
x.value -= movementX / scale.value x.value -= movementX / scale.value
@ -266,8 +266,12 @@ const imageStyle = computed(() => ({
items-center items-center
justify-center justify-center
> >
<img <component
:is="item.type === 'gifv' ? 'video' : 'img'"
ref="image" ref="image"
:autoplay="enableAutoplay"
controls
loop
select-none select-none
max-w-full max-w-full
max-h-full max-h-full
@ -275,7 +279,7 @@ const imageStyle = computed(() => ({
:draggable="false" :draggable="false"
:src="item.url || item.previewUrl" :src="item.url || item.previewUrl"
:alt="item.description || ''" :alt="item.description || ''"
> />
</div> </div>
</div> </div>
</div> </div>

View file

@ -1,8 +1,12 @@
<script setup lang="ts"> <script setup lang="ts">
// only one icon can be lit up at the same time // only one icon can be lit up at the same time
import { STORAGE_KEY_LAST_ACCESSED_EXPLORE_ROUTE, STORAGE_KEY_LAST_ACCESSED_NOTIFICATION_ROUTE } from '~/constants'
const moreMenuVisible = ref(false) const moreMenuVisible = ref(false)
const { notifications } = useNotifications() const { notifications } = useNotifications()
const lastAccessedNotificationRoute = useLocalStorage(STORAGE_KEY_LAST_ACCESSED_NOTIFICATION_ROUTE, '')
const lastAccessedExploreRoute = useLocalStorage(STORAGE_KEY_LAST_ACCESSED_EXPLORE_ROUTE, '')
</script> </script>
<template> <template>
@ -19,7 +23,7 @@ const { notifications } = useNotifications()
<NuxtLink to="/search" :aria-label="$t('nav.search')" :active-class="moreMenuVisible ? '' : 'text-primary'" flex flex-row items-center place-content-center h-full flex-1 class="coarse-pointer:select-none" @click="$scrollToTop"> <NuxtLink to="/search" :aria-label="$t('nav.search')" :active-class="moreMenuVisible ? '' : 'text-primary'" flex flex-row items-center place-content-center h-full flex-1 class="coarse-pointer:select-none" @click="$scrollToTop">
<div i-ri:search-line /> <div i-ri:search-line />
</NuxtLink> </NuxtLink>
<NuxtLink to="/notifications" :aria-label="$t('nav.notifications')" :active-class="moreMenuVisible ? '' : 'text-primary'" flex flex-row items-center place-content-center h-full flex-1 class="coarse-pointer:select-none" @click="$scrollToTop"> <NuxtLink :to="`/notifications/${lastAccessedNotificationRoute}`" :aria-label="$t('nav.notifications')" :active-class="moreMenuVisible ? '' : 'text-primary'" flex flex-row items-center place-content-center h-full flex-1 class="coarse-pointer:select-none" @click="$scrollToTop">
<div flex relative> <div flex relative>
<div class="i-ri:notification-4-line" text-xl /> <div class="i-ri:notification-4-line" text-xl />
<div v-if="notifications" class="top-[-0.3rem] right-[-0.3rem]" absolute font-bold rounded-full h-4 w-4 text-xs bg-primary text-inverted flex items-center justify-center> <div v-if="notifications" class="top-[-0.3rem] right-[-0.3rem]" absolute font-bold rounded-full h-4 w-4 text-xs bg-primary text-inverted flex items-center justify-center>
@ -32,8 +36,8 @@ const { notifications } = useNotifications()
</NuxtLink> </NuxtLink>
</template> </template>
<template v-else> <template v-else>
<NuxtLink :to="`/${currentServer}/explore`" :aria-label="$t('nav.explore')" :active-class="moreMenuVisible ? '' : 'text-primary'" flex flex-row items-center place-content-center h-full flex-1 class="coarse-pointer:select-none" @click="$scrollToTop"> <NuxtLink :to="`/${currentServer}/explore/${lastAccessedExploreRoute}`" :aria-label="$t('nav.explore')" :active-class="moreMenuVisible ? '' : 'text-primary'" flex flex-row items-center place-content-center h-full flex-1 class="coarse-pointer:select-none" @click="$scrollToTop">
<div i-ri:hashtag /> <div i-ri:compass-3-line />
</NuxtLink> </NuxtLink>
<NuxtLink group :to="`/${currentServer}/public/local`" :aria-label="$t('nav.local')" :active-class="moreMenuVisible ? '' : 'text-primary'" flex flex-row items-center place-content-center h-full flex-1 class="coarse-pointer:select-none" @click="$scrollToTop"> <NuxtLink group :to="`/${currentServer}/public/local`" :aria-label="$t('nav.local')" :active-class="moreMenuVisible ? '' : 'text-primary'" flex flex-row items-center place-content-center h-full flex-1 class="coarse-pointer:select-none" @click="$scrollToTop">
<div i-ri:group-2-line /> <div i-ri:group-2-line />
@ -43,14 +47,14 @@ const { notifications } = useNotifications()
</NuxtLink> </NuxtLink>
</template> </template>
<NavBottomMoreMenu v-slot="{ toggleVisible, show }" v-model="moreMenuVisible" flex flex-row items-center place-content-center h-full flex-1 cursor-pointer> <NavBottomMoreMenu v-slot="{ toggleVisible, show }" v-model="moreMenuVisible" flex flex-row items-center place-content-center h-full flex-1 cursor-pointer>
<label <button
flex items-center place-content-center h-full flex-1 class="select-none" flex items-center place-content-center h-full flex-1 class="select-none"
:class="show ? '!text-primary' : ''" :class="show ? '!text-primary' : ''"
aria-label="More menu"
@click="toggleVisible"
> >
<input type="checkbox" z="-1" absolute inset-0 opacity-0 @click="toggleVisible"> <span :class="show ? 'i-ri:close-fill' : 'i-ri:more-fill'" />
<span v-show="show" i-ri:close-fill /> </button>
<span v-show="!show" i-ri:more-fill />
</label>
</NavBottomMoreMenu> </NavBottomMoreMenu>
</nav> </nav>
</template> </template>

View file

@ -1,22 +1,27 @@
<script lang="ts" setup> <script lang="ts" setup>
let { modelValue } = $defineModels<{ import { invoke } from '@vueuse/core'
modelValue: boolean
}>() const modelValue = defineModel<boolean>({ required: true })
const colorMode = useColorMode() const colorMode = useColorMode()
const userSettings = useUserSettings() const userSettings = useUserSettings()
const drawerEl = ref<HTMLDivElement>()
function toggleVisible() { function toggleVisible() {
modelValue = !modelValue modelValue.value = !modelValue.value
} }
const buttonEl = ref<HTMLDivElement>() const buttonEl = ref<HTMLDivElement>()
/** Close the drop-down menu if the mouse click is not on the drop-down menu button when the drop-down menu is opened */ /**
* Close the drop-down menu if the mouse click is not on the drop-down menu button when the drop-down menu is opened
* @param mouse
*/
function clickEvent(mouse: MouseEvent) { function clickEvent(mouse: MouseEvent) {
if (mouse.target && !buttonEl.value?.children[0].contains(mouse.target as any)) { if (mouse.target && !buttonEl.value?.children[0].contains(mouse.target as any)) {
if (modelValue) { if (modelValue.value) {
document.removeEventListener('click', clickEvent) document.removeEventListener('click', clickEvent)
modelValue = false modelValue.value = false
} }
} }
} }
@ -25,7 +30,7 @@ function toggleDark() {
colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark' colorMode.preference = colorMode.value === 'dark' ? 'light' : 'dark'
} }
watch($$(modelValue), (val) => { watch(modelValue, (val) => {
if (val && typeof document !== 'undefined') if (val && typeof document !== 'undefined')
document.addEventListener('click', clickEvent) document.addEventListener('click', clickEvent)
}) })
@ -33,6 +38,80 @@ watch($$(modelValue), (val) => {
onBeforeUnmount(() => { onBeforeUnmount(() => {
document.removeEventListener('click', clickEvent) document.removeEventListener('click', clickEvent)
}) })
// Pull down to close
const { dragging, dragDistance } = invoke(() => {
const triggerDistance = 120
let scrollTop = 0
let beforeTouchPointY = 0
const dragDistance = ref(0)
const dragging = ref(false)
useEventListener(drawerEl, 'scroll', (e: Event) => {
scrollTop = (e.target as HTMLDivElement).scrollTop
// Prevent the page from scrolling when the drawer is being dragged.
if (dragDistance.value > 0)
(e.target as HTMLDivElement).scrollTop = 0
}, { passive: true })
useEventListener(drawerEl, 'touchstart', (e: TouchEvent) => {
if (!modelValue.value)
return
beforeTouchPointY = e.touches[0].pageY
dragDistance.value = 0
}, { passive: true })
useEventListener(drawerEl, 'touchmove', (e: TouchEvent) => {
if (!modelValue.value)
return
// Do not move the entire drawer when its contents are not scrolled to the top.
if (scrollTop > 0 && dragDistance.value <= 0) {
dragging.value = false
beforeTouchPointY = e.touches[0].pageY
return
}
const { pageY } = e.touches[0]
// Calculate the drag distance.
dragDistance.value += pageY - beforeTouchPointY
if (dragDistance.value < 0)
dragDistance.value = 0
beforeTouchPointY = pageY
// Marked as dragging.
if (dragDistance.value > 1)
dragging.value = true
// Prevent the page from scrolling when the drawer is being dragged.
if (dragDistance.value > 0) {
if (e?.cancelable && e?.preventDefault)
e.preventDefault()
e?.stopPropagation()
}
}, { passive: true })
useEventListener(drawerEl, 'touchend', () => {
if (!modelValue.value)
return
if (dragDistance.value >= triggerDistance)
modelValue.value = false
dragging.value = false
// code
}, { passive: true })
return {
dragDistance,
dragging,
}
})
</script> </script>
<template> <template>
@ -41,12 +120,12 @@ onBeforeUnmount(() => {
<!-- Drawer --> <!-- Drawer -->
<Transition <Transition
enter-active-class="transition duration-250 ease-out children:(transition duration-250 ease-out)" enter-active-class="transition duration-250 ease-out"
enter-from-class="opacity-0 children:(transform translate-y-full)" enter-from-class="opacity-0 children:(translate-y-full)"
enter-to-class="opacity-100 children:(transform translate-y-0)" enter-to-class="opacity-100 children:(translate-y-0)"
leave-active-class="transition duration-250 ease-in children:(transition duration-250 ease-in)" leave-active-class="transition duration-250 ease-in"
leave-from-class="opacity-100 children:(transform translate-y-0)" leave-from-class="opacity-100 children:(translate-y-0)"
leave-to-class="opacity-0 children:(transform translate-y-full)" leave-to-class="opacity-0 children:(translate-y-full)"
> >
<div <div
v-show="modelValue" v-show="modelValue"
@ -58,10 +137,19 @@ onBeforeUnmount(() => {
<!-- corresponding to issue: #106, so please don't remove it. --> <!-- corresponding to issue: #106, so please don't remove it. -->
<div absolute inset-0 opacity-0 h="[calc(100vh+0.5px)]" /> <div absolute inset-0 opacity-0 h="[calc(100vh+0.5px)]" />
<div <div
ref="drawerEl"
:style="{
transform: dragging ? `translateY(${dragDistance}px)` : '',
}"
:class="{
'duration-0': dragging,
'duration-250': !dragging,
'backdrop-blur-md': !getPreferences(userSettings, 'optimizeForLowPerformanceDevice'),
}"
transition="transform ease-in"
flex-1 min-w-48 py-6 mb="-1px" flex-1 min-w-48 py-6 mb="-1px"
of-y-auto scrollbar-hide overscroll-none max-h="[calc(100vh-200px)]" of-y-auto scrollbar-hide overscroll-none max-h="[calc(100vh-200px)]"
rounded-t-lg bg="white/85 dark:neutral-900/85" backdrop-filter backdrop-blur-md rounded-t-lg bg="white/85 dark:neutral-900/85" backdrop-filter
border-t-1 border-base border-t-1 border-base
> >
<!-- Nav --> <!-- Nav -->

View file

@ -28,6 +28,9 @@ function toggleDark() {
@click="togglePreferences('zenMode')" @click="togglePreferences('zenMode')"
/> />
</CommonTooltip> </CommonTooltip>
<CommonTooltip :content="$t('magic_keys.dialog_header')">
<button flex i-ri:keyboard-box-line dark-i-ri:keyboard-box-line text-lg :aria-label="$t('magic_keys.dialog_header')" @click="toggleKeyboardShortcuts" />
</CommonTooltip>
<CommonTooltip :content="$t('settings.about.sponsor_action')"> <CommonTooltip :content="$t('settings.about.sponsor_action')">
<NuxtLink <NuxtLink
flex flex

View file

@ -1,9 +1,13 @@
<script setup lang="ts"> <script setup lang="ts">
import { STORAGE_KEY_LAST_ACCESSED_EXPLORE_ROUTE, STORAGE_KEY_LAST_ACCESSED_NOTIFICATION_ROUTE } from '~/constants'
const { command } = defineProps<{ const { command } = defineProps<{
command?: boolean command?: boolean
}>() }>()
const { notifications } = useNotifications() const { notifications } = useNotifications()
const useStarFavoriteIcon = usePreferences('useStarFavoriteIcon') const useStarFavoriteIcon = usePreferences('useStarFavoriteIcon')
const lastAccessedNotificationRoute = useLocalStorage(STORAGE_KEY_LAST_ACCESSED_NOTIFICATION_ROUTE, '')
const lastAccessedExploreRoute = useLocalStorage(STORAGE_KEY_LAST_ACCESSED_EXPLORE_ROUTE, '')
</script> </script>
<template> <template>
@ -12,7 +16,7 @@ const useStarFavoriteIcon = usePreferences('useStarFavoriteIcon')
<div class="spacer" shrink xl:hidden /> <div class="spacer" shrink xl:hidden />
<NavSideItem :text="$t('nav.home')" to="/home" icon="i-ri:home-5-line" user-only :command="command" /> <NavSideItem :text="$t('nav.home')" to="/home" icon="i-ri:home-5-line" user-only :command="command" />
<NavSideItem :text="$t('nav.notifications')" to="/notifications" icon="i-ri:notification-4-line" user-only :command="command"> <NavSideItem :text="$t('nav.notifications')" :to="`/notifications/${lastAccessedNotificationRoute}`" icon="i-ri:notification-4-line" user-only :command="command">
<template #icon> <template #icon>
<div flex relative> <div flex relative>
<div class="i-ri:notification-4-line" text-xl /> <div class="i-ri:notification-4-line" text-xl />
@ -30,10 +34,11 @@ const useStarFavoriteIcon = usePreferences('useStarFavoriteIcon')
<NavSideItem :text="$t('action.compose')" to="/compose" icon="i-ri:quill-pen-line" user-only :command="command" /> <NavSideItem :text="$t('action.compose')" to="/compose" icon="i-ri:quill-pen-line" user-only :command="command" />
<div class="spacer" shrink hidden sm:block /> <div class="spacer" shrink hidden sm:block />
<NavSideItem :text="$t('nav.explore')" :to="isHydrated ? `/${currentServer}/explore` : '/explore'" icon="i-ri:hashtag" :command="command" /> <NavSideItem :text="$t('nav.explore')" :to="isHydrated ? `/${currentServer}/explore/${lastAccessedExploreRoute}` : `/explore/${lastAccessedExploreRoute}`" icon="i-ri:compass-3-line" :command="command" />
<NavSideItem :text="$t('nav.local')" :to="isHydrated ? `/${currentServer}/public/local` : '/public/local'" icon="i-ri:group-2-line " :command="command" /> <NavSideItem :text="$t('nav.local')" :to="isHydrated ? `/${currentServer}/public/local` : '/public/local'" icon="i-ri:group-2-line " :command="command" />
<NavSideItem :text="$t('nav.federated')" :to="isHydrated ? `/${currentServer}/public` : '/public'" icon="i-ri:earth-line" :command="command" /> <NavSideItem :text="$t('nav.federated')" :to="isHydrated ? `/${currentServer}/public` : '/public'" icon="i-ri:earth-line" :command="command" />
<NavSideItem :text="$t('nav.lists')" :to="isHydrated ? `/${currentServer}/lists` : '/lists'" icon="i-ri:list-check" user-only :command="command" /> <NavSideItem :text="$t('nav.lists')" :to="isHydrated ? `/${currentServer}/lists` : '/lists'" icon="i-ri:list-check" user-only :command="command" />
<NavSideItem :text="$t('nav.hashtags')" to="/hashtags" icon="i-ri:hashtag" user-only :command="command" />
<div class="spacer" shrink hidden sm:block /> <div class="spacer" shrink hidden sm:block />
<NavSideItem :text="$t('nav.settings')" to="/settings" icon="i-ri:settings-3-line" :command="command" /> <NavSideItem :text="$t('nav.settings')" to="/settings" icon="i-ri:settings-3-line" :command="command" />

View file

@ -10,8 +10,8 @@ const props = withDefaults(defineProps<{
}) })
defineSlots<{ defineSlots<{
icon: (props: {}) => void icon: (props: object) => void
default: (props: {}) => void default: (props: object) => void
}>() }>()
const router = useRouter() const router = useRouter()
@ -28,13 +28,13 @@ useCommand({
}, },
}) })
let activeClass = $ref('text-primary') const activeClass = ref('text-primary')
onHydrated(async () => { onHydrated(async () => {
// TODO: force NuxtLink to reevaluate, we now we are in this route though, so we should force it to active // TODO: force NuxtLink to reevaluate, we now we are in this route though, so we should force it to active
// we don't have currentServer defined until later // we don't have currentServer defined until later
activeClass = '' activeClass.value = ''
await nextTick() await nextTick()
activeClass = 'text-primary' activeClass.value = 'text-primary'
}) })
// Optimize rendering for the common case of being logged in, only show visual feedback for disabled user-only items // Optimize rendering for the common case of being logged in, only show visual feedback for disabled user-only items
@ -57,11 +57,21 @@ const noUserVisual = computed(() => isHydrated.value && props.userOnly && !curre
<div <div
class="item" class="item"
flex items-center gap4 flex items-center gap4
w-fit rounded-3
px2 mx3 sm:mxa
xl="ml0 mr5 px5 w-auto" xl="ml0 mr5 px5 w-auto"
transition-100 :class="isSmallScreen
elk-group-hover="bg-active" group-focus-visible:ring="2 current" ? `
w-full
px5 sm:mxa
transition-colors duration-200 transform
hover-bg-gray-100 hover-dark:(bg-gray-700 text-white)
` : `
w-fit rounded-3
px2 mx3 sm:mxa
transition-100
elk-group-hover-bg-active
group-focus-visible:ring-2
group-focus-visible:ring-current
`"
> >
<slot name="icon"> <slot name="icon">
<div :class="icon" text-xl /> <div :class="icon" text-xl />

View file

@ -34,7 +34,13 @@ const { busy, oauth, singleInstanceServer } = useSignIn()
<strong>{{ currentServer }}</strong> <strong>{{ currentServer }}</strong>
</i18n-t> </i18n-t>
</button> </button>
<button v-else btn-solid text-sm px-2 py-1 text-center xl:hidden @click="openSigninDialog()"> <button
v-else
flex="~ row"
gap-x-1 items-center justify-center btn-solid text-sm px-2 py-1 xl:hidden
@click="openSigninDialog()"
>
<span aria-hidden="true" block i-ri:login-circle-line class="rtl-flip" />
{{ $t('action.sign_in') }} {{ $t('action.sign_in') }}
</button> </button>
</template> </template>

View file

@ -4,6 +4,13 @@ import type { mastodon } from 'masto'
const { notification } = defineProps<{ const { notification } = defineProps<{
notification: mastodon.v1.Notification notification: mastodon.v1.Notification
}>() }>()
const { t } = useI18n()
// well-known emoji reactions types Elk does not support yet
const unsupportedEmojiReactionTypes = ['pleroma:emoji_reaction', 'reaction']
if (unsupportedEmojiReactionTypes.includes(notification.type))
console.warn(`[DEV] ${t('notification.missing_type')} '${notification.type}' (notification.id: ${notification.id})`)
</script> </script>
<template> <template>
@ -15,34 +22,35 @@ const { notification } = defineProps<{
ps-3 pe-4 inset-is-0 ps-3 pe-4 inset-is-0
rounded-ie-be-3 rounded-ie-be-3
py-3 bg-base top-0 py-3 bg-base top-0
:lang="notification.status?.language ?? undefined"
> >
<div i-ri:user-follow-fill me-1 color-primary /> <div i-ri-user-3-line text-xl me-3 color-blue />
<AccountDisplayName :account="notification.account" text-primary me-1 font-bold line-clamp-1 ws-pre-wrap break-all /> <AccountDisplayName :account="notification.account" text-primary me-1 font-bold line-clamp-1 ws-pre-wrap break-all />
<span ws-nowrap> <span ws-nowrap>
{{ $t('notification.followed_you') }} {{ $t('notification.followed_you') }}
</span> </span>
</div> </div>
<AccountBigCard <AccountBigCard
ms10
:account="notification.account" :account="notification.account"
:lang="notification.status?.language ?? undefined"
/> />
</NuxtLink> </NuxtLink>
</template> </template>
<template v-else-if="notification.type === 'admin.sign_up'"> <template v-else-if="notification.type === 'admin.sign_up'">
<div flex p3 items-center bg-shaded> <NuxtLink :to="getAccountRoute(notification.account)">
<div i-ri:admin-fill me-1 color-purple /> <div flex p4 items-center bg-shaded>
<AccountDisplayName <div i-ri:user-add-line text-xl me-2 color-purple />
:account="notification.account" <AccountDisplayName
text-purple me-1 font-bold line-clamp-1 ws-pre-wrap break-all :account="notification.account"
/> text-purple me-1 font-bold line-clamp-1 ws-pre-wrap break-all
<span>{{ $t("notification.signed_up") }}</span> />
</div> <span>{{ $t("notification.signed_up") }}</span>
</div>
</NuxtLink>
</template> </template>
<template v-else-if="notification.type === 'admin.report'"> <template v-else-if="notification.type === 'admin.report'">
<NuxtLink :to="getReportRoute(notification.report?.id!)"> <NuxtLink :to="getReportRoute(notification.report?.id!)">
<div flex p3 items-center bg-shaded> <div flex p4 items-center bg-shaded>
<div i-ri:flag-fill me-1 color-purple /> <div i-ri:flag-line text-xl me-2 color-purple />
<i18n-t keypath="notification.reported"> <i18n-t keypath="notification.reported">
<AccountDisplayName <AccountDisplayName
:account="notification.account" :account="notification.account"
@ -57,12 +65,19 @@ const { notification } = defineProps<{
</NuxtLink> </NuxtLink>
</template> </template>
<template v-else-if="notification.type === 'follow_request'"> <template v-else-if="notification.type === 'follow_request'">
<div flex ms-4 items-center class="-top-2.5" absolute inset-ie-2 px-2> <div flex px-3 py-2>
<div i-ri:user-follow-fill text-xl me-1 /> <div i-ri-user-shared-line text-xl me-3 color-blue />
<AccountInlineInfo :account="notification.account" me1 /> <AccountDisplayName
:account="notification.account"
text-primary me-1 font-bold line-clamp-1 ws-pre-wrap break-all
/>
<span me-1 ws-nowrap>
{{ $t('notification.request_to_follow') }}
</span>
</div> </div>
<!-- TODO: accept request --> <AccountCard p="s-2 e-4 b-2" hover-card :account="notification.account">
<AccountCard :account="notification.account" /> <AccountFollowRequestButton :account="notification.account" />
</AccountCard>
</template> </template>
<template v-else-if="notification.type === 'update'"> <template v-else-if="notification.type === 'update'">
<StatusCard :status="notification.status!" :in-notification="true" :actions="false"> <StatusCard :status="notification.status!" :in-notification="true" :actions="false">
@ -80,7 +95,8 @@ const { notification } = defineProps<{
<template v-else-if="notification.type === 'mention' || notification.type === 'poll' || notification.type === 'status'"> <template v-else-if="notification.type === 'mention' || notification.type === 'poll' || notification.type === 'status'">
<StatusCard :status="notification.status!" /> <StatusCard :status="notification.status!" />
</template> </template>
<template v-else> <template v-else-if="!unsupportedEmojiReactionTypes.includes(notification.type)">
<!-- prevent showing errors for dev for known emoji reaction types -->
<!-- type 'favourite' and 'reblog' should always rendered by NotificationGroupedLikes --> <!-- type 'favourite' and 'reblog' should always rendered by NotificationGroupedLikes -->
<div text-red font-bold> <div text-red font-bold>
[DEV] {{ $t('notification.missing_type') }} '{{ notification.type }}' [DEV] {{ $t('notification.missing_type') }} '{{ notification.type }}'

View file

@ -10,7 +10,7 @@ defineProps<{
defineEmits(['hide', 'subscribe']) defineEmits(['hide', 'subscribe'])
defineSlots<{ defineSlots<{
error: (props: {}) => void error: (props: object) => void
}>() }>()
const xl = useMediaQuery('(min-width: 1280px)') const xl = useMediaQuery('(min-width: 1280px)')

View file

@ -5,17 +5,17 @@ const { items } = defineProps<{
items: GroupedNotifications items: GroupedNotifications
}>() }>()
const count = $computed(() => items.items.length) const count = computed(() => items.items.length)
const isExpanded = ref(false) const isExpanded = ref(false)
const lang = $computed(() => { const lang = computed(() => {
return (count > 1 || count === 0) ? undefined : items.items[0].status?.language return (count.value > 1 || count.value === 0) ? undefined : items.items[0].status?.language
}) })
</script> </script>
<template> <template>
<article flex flex-col relative :lang="lang ?? undefined"> <article flex flex-col relative :lang="lang ?? undefined">
<div flex items-center top-0 left-2 pt-2 px-3> <div flex items-center top-0 left-2 pt-2 px-3>
<div i-ri:user-follow-fill me-3 color-primary aria-hidden="true" /> <div :class="count > 1 ? 'i-ri-group-line' : 'i-ri-user-3-line'" me-3 color-blue text-xl aria-hidden="true" />
<template v-if="count > 1"> <template v-if="count > 1">
<CommonLocalizedNumber <CommonLocalizedNumber
keypath="notification.followed_you_count" keypath="notification.followed_you_count"
@ -32,7 +32,7 @@ const lang = $computed(() => {
</span> </span>
</template> </template>
</div> </div>
<div pb-2> <div pb-2 ps8>
<div v-if="isExpanded"> <div v-if="isExpanded">
<AccountCard <AccountCard
v-for="item in items.items" v-for="item in items.items"

View file

@ -4,17 +4,18 @@ import type { GroupedLikeNotifications } from '~/types'
const { group } = defineProps<{ const { group } = defineProps<{
group: GroupedLikeNotifications group: GroupedLikeNotifications
}>() }>()
const useStarFavoriteIcon = usePreferences('useStarFavoriteIcon')
const reblogs = $computed(() => group.likes.filter(i => i.reblog)) const reblogs = computed(() => group.likes.filter(i => i.reblog))
const likes = $computed(() => group.likes.filter(i => i.favourite && !i.reblog)) const likes = computed(() => group.likes.filter(i => i.favourite && !i.reblog))
</script> </script>
<template> <template>
<article flex flex-col relative> <article flex flex-col relative>
<StatusLink :status="group.status!" pb2 pt3> <StatusLink :status="group.status!" pb4 pt5>
<div flex flex-col gap-2> <div flex flex-col gap-3>
<div v-if="reblogs.length" flex="~ gap-1"> <div v-if="reblogs.length" flex="~ gap-1">
<div i-ri:repeat-fill text-xl me-1 color-green /> <div i-ri:repeat-fill text-xl me-2 color-green />
<template v-for="i, idx of reblogs" :key="idx"> <template v-for="i, idx of reblogs" :key="idx">
<AccountHoverWrapper :account="i.account"> <AccountHoverWrapper :account="i.account">
<NuxtLink :to="getAccountRoute(i.account)"> <NuxtLink :to="getAccountRoute(i.account)">
@ -27,7 +28,7 @@ const likes = $computed(() => group.likes.filter(i => i.favourite && !i.reblog))
</div> </div>
</div> </div>
<div v-if="likes.length" flex="~ gap-1"> <div v-if="likes.length" flex="~ gap-1">
<div i-ri:heart-fill text-xl me-1 color-red /> <div :class="useStarFavoriteIcon ? 'i-ri:star-line color-yellow' : 'i-ri:heart-line color-red'" text-xl me-2 />
<template v-for="i, idx of likes" :key="idx"> <template v-for="i, idx of likes" :key="idx">
<AccountHoverWrapper :account="i.account"> <AccountHoverWrapper :account="i.account">
<NuxtLink :to="getAccountRoute(i.account)"> <NuxtLink :to="getAccountRoute(i.account)">
@ -35,12 +36,12 @@ const likes = $computed(() => group.likes.filter(i => i.favourite && !i.reblog))
</NuxtLink> </NuxtLink>
</AccountHoverWrapper> </AccountHoverWrapper>
</template> </template>
<div ml1> <div ms1>
{{ $t('notification.favourited_post') }} {{ $t('notification.favourited_post') }}
</div> </div>
</div> </div>
</div> </div>
<div pl8 mt-1> <div ps9 mt-1>
<StatusBody :status="group.status!" text-secondary /> <StatusBody :status="group.status!" text-secondary />
<!-- When no text content is presented, we show media instead --> <!-- When no text content is presented, we show media instead -->
<template v-if="!group.status!.content"> <template v-if="!group.status!.content">

View file

@ -1,21 +1,31 @@
<script setup lang="ts"> <script setup lang="ts">
// @ts-expect-error missing types // @ts-expect-error missing types
import { DynamicScrollerItem } from 'vue-virtual-scroller' import { DynamicScrollerItem } from 'vue-virtual-scroller'
import type { Paginator, WsEvents, mastodon } from 'masto' import type { mastodon } from 'masto'
import type { GroupedAccountLike, NotificationSlot } from '~/types' import type { GroupedAccountLike, NotificationSlot } from '~/types'
const { paginator, stream } = defineProps<{ const { paginator, stream } = defineProps<{
paginator: Paginator<mastodon.v1.Notification[], mastodon.v1.ListNotificationsParams> paginator: mastodon.Paginator<mastodon.v1.Notification[], mastodon.rest.v1.ListNotificationsParams>
stream?: Promise<WsEvents> stream?: mastodon.streaming.Subscription
}>() }>()
const virtualScroller = false // TODO: fix flickering issue with virtual scroll const virtualScroller = false // TODO: fix flickering issue with virtual scroll
const groupCapacity = Number.MAX_VALUE // No limit const groupCapacity = Number.MAX_VALUE // No limit
const includeNotificationTypes: mastodon.v1.NotificationType[] = ['update', 'mention', 'poll', 'status']
function includeNotificationsForStatusCard({ type, status }: mastodon.v1.Notification) {
// Exclude update, mention, pool and status notifications without the status entry:
// no makes sense to include them
// Those notifications will be shown using StatusCard SFC:
// check NotificationCard SFC L68 and L81 => :status="notification.status!"
return status || !includeNotificationTypes.includes(type)
}
// Group by type (and status when applicable) // Group by type (and status when applicable)
function groupId(item: mastodon.v1.Notification): string { function groupId(item: mastodon.v1.Notification): string {
// If the update is related to an status, group notifications from the same account (boost + favorite the same status) // If the update is related to a status, group notifications from the same account (boost + favorite the same status)
const id = item.status const id = item.status
? { ? {
status: item.status?.id, status: item.status?.id,
@ -108,9 +118,9 @@ function groupItems(items: mastodon.v1.Notification[]): NotificationSlot[] {
results.push(...group) results.push(...group)
} }
for (const item of items) { for (const item of items.filter(includeNotificationsForStatusCard)) {
const itemId = groupId(item) const itemId = groupId(item)
// Finalize group if it already has too many notifications // Finalize the group if it already has too many notifications
if (currentGroupId !== itemId || currentGroup.length >= groupCapacity) if (currentGroupId !== itemId || currentGroup.length >= groupCapacity)
processGroup() processGroup()
@ -161,11 +171,11 @@ const { formatNumber } = useHumanReadableNumber()
:paginator="paginator" :paginator="paginator"
:preprocess="preprocess" :preprocess="preprocess"
:stream="stream" :stream="stream"
:virtualScroller="virtualScroller"
eventType="notification" eventType="notification"
:virtualScroller="virtualScroller"
> >
<template #updater="{ number, update }"> <template #updater="{ number, update }">
<button py-4 border="b base" flex="~ col" p-3 w-full text-primary font-bold @click="() => { update(); clearNotifications() }"> <button id="elk_show_new_items" py-4 border="b base" flex="~ col" p-3 w-full text-primary font-bold @click="() => { update(); clearNotifications() }">
{{ $t('timeline.show_new_items', number, { named: { v: formatNumber(number) } }) }} {{ $t('timeline.show_new_items', number, { named: { v: formatNumber(number) } }) }}
</button> </button>
</template> </template>

View file

@ -17,12 +17,12 @@ const { t } = useI18n()
const pwaEnabled = useAppConfig().pwaEnabled const pwaEnabled = useAppConfig().pwaEnabled
let busy = $ref<boolean>(false) const busy = ref<boolean>(false)
let animateSave = $ref<boolean>(false) const animateSave = ref<boolean>(false)
let animateSubscription = $ref<boolean>(false) const animateSubscription = ref<boolean>(false)
let animateRemoveSubscription = $ref<boolean>(false) const animateRemoveSubscription = ref<boolean>(false)
let subscribeError = $ref<string>('') const subscribeError = ref<string>('')
let showSubscribeError = $ref<boolean>(false) const showSubscribeError = ref<boolean>(false)
function hideNotification() { function hideNotification() {
const key = currentUser.value?.account?.acct const key = currentUser.value?.account?.acct
@ -30,22 +30,22 @@ function hideNotification() {
hiddenNotification.value[key] = true hiddenNotification.value[key] = true
} }
const showWarning = $computed(() => { const showWarning = computed(() => {
if (!pwaEnabled) if (!pwaEnabled)
return false return false
return isSupported return isSupported
&& (!isSubscribed.value || !notificationPermission.value || notificationPermission.value === 'prompt') && (!isSubscribed.value || !notificationPermission.value || notificationPermission.value === 'prompt')
&& !(hiddenNotification.value[currentUser.value?.account?.acct ?? ''] === true) && !(hiddenNotification.value[currentUser.value?.account?.acct ?? ''])
}) })
async function saveSettings() { async function saveSettings() {
if (busy) if (busy.value)
return return
busy = true busy.value = true
await nextTick() await nextTick()
animateSave = true animateSave.value = true
try { try {
await updateSubscription() await updateSubscription()
@ -55,48 +55,48 @@ async function saveSettings() {
console.error(err) console.error(err)
} }
finally { finally {
busy = false busy.value = false
animateSave = false animateSave.value = false
} }
} }
async function doSubscribe() { async function doSubscribe() {
if (busy) if (busy.value)
return return
busy = true busy.value = true
await nextTick() await nextTick()
animateSubscription = true animateSubscription.value = true
try { try {
const result = await subscribe() const result = await subscribe()
if (result !== 'subscribed') { if (result !== 'subscribed') {
subscribeError = t(`settings.notifications.push_notifications.subscription_error.${result === 'notification-denied' ? 'permission_denied' : 'request_error'}`) subscribeError.value = t(`settings.notifications.push_notifications.subscription_error.${result === 'notification-denied' ? 'permission_denied' : 'request_error'}`)
showSubscribeError = true showSubscribeError.value = true
} }
} }
catch (err) { catch (err) {
if (err instanceof PushSubscriptionError) { if (err instanceof PushSubscriptionError) {
subscribeError = t(`settings.notifications.push_notifications.subscription_error.${err.code}`) subscribeError.value = t(`settings.notifications.push_notifications.subscription_error.${err.code}`)
} }
else { else {
console.error(err) console.error(err)
subscribeError = t('settings.notifications.push_notifications.subscription_error.request_error') subscribeError.value = t('settings.notifications.push_notifications.subscription_error.request_error')
} }
showSubscribeError = true showSubscribeError.value = true
} }
finally { finally {
busy = false busy.value = false
animateSubscription = false animateSubscription.value = false
} }
} }
async function removeSubscription() { async function removeSubscription() {
if (busy) if (busy.value)
return return
busy = true busy.value = true
await nextTick() await nextTick()
animateRemoveSubscription = true animateRemoveSubscription.value = true
try { try {
await unsubscribe() await unsubscribe()
} }
@ -104,11 +104,11 @@ async function removeSubscription() {
console.error(err) console.error(err)
} }
finally { finally {
busy = false busy.value = false
animateRemoveSubscription = false animateRemoveSubscription.value = false
} }
} }
onActivated(() => (busy = false)) onActivated(() => (busy.value = false))
</script> </script>
<template> <template>

View file

@ -3,9 +3,7 @@ defineProps<{
title?: string title?: string
message: string message: string
}>() }>()
const { modelValue } = defineModels<{ const modelValue = defineModel<boolean>({ required: true })
modelValue: boolean
}>()
</script> </script>
<template> <template>

View file

@ -20,9 +20,10 @@ const maxDescriptionLength = 1500
const isEditDialogOpen = ref(false) const isEditDialogOpen = ref(false)
const description = ref(props.attachment.description ?? '') const description = ref(props.attachment.description ?? '')
function toggleApply() { function toggleApply() {
isEditDialogOpen.value = false isEditDialogOpen.value = false
emit('setDescription', unref(description)) emit('setDescription', description.value)
} }
</script> </script>

View file

@ -8,9 +8,10 @@ const { editor } = defineProps<{
<template> <template>
<CommonTooltip placement="top" :content="$t('tooltip.open_editor_tools')"> <CommonTooltip placement="top" :content="$t('tooltip.open_editor_tools')">
<VDropdown v-if="editor" placement="top"> <VDropdown v-if="editor" placement="bottom">
<button <button
btn-action-icon btn-action-icon
:aria-label="$t('tooltip.open_editor_tools')"
> >
<div i-ri:font-size-2 /> <div i-ri:font-size-2 />
</button> </button>

View file

@ -9,16 +9,16 @@ const emit = defineEmits<{
const { locale } = useI18n() const { locale } = useI18n()
const el = $ref<HTMLElement>() const el = ref<HTMLElement>()
let picker = $ref<Picker>() const picker = ref<Picker>()
const colorMode = useColorMode() const colorMode = useColorMode()
async function openEmojiPicker() { async function openEmojiPicker() {
await updateCustomEmojis() await updateCustomEmojis()
if (picker) { if (picker.value) {
picker.update({ picker.value.update({
theme: colorMode.value, theme: colorMode,
custom: customEmojisData.value, custom: customEmojisData.value,
}) })
} }
@ -29,7 +29,7 @@ async function openEmojiPicker() {
importEmojiLang(locale.value.split('-')[0]), importEmojiLang(locale.value.split('-')[0]),
]) ])
picker = new Picker({ picker.value = new Picker({
data: () => dataPromise, data: () => dataPromise,
onEmojiSelect({ native, src, alt, name }: any) { onEmojiSelect({ native, src, alt, name }: any) {
native native
@ -37,19 +37,19 @@ async function openEmojiPicker() {
: emit('selectCustom', { src, alt, 'data-emoji-id': name }) : emit('selectCustom', { src, alt, 'data-emoji-id': name })
}, },
set: 'twitter', set: 'twitter',
theme: colorMode.value, theme: colorMode,
custom: customEmojisData.value, custom: customEmojisData.value,
i18n, i18n,
}) })
} }
await nextTick() await nextTick()
// TODO: custom picker // TODO: custom picker
el?.appendChild(picker as any as HTMLElement) el.value?.appendChild(picker.value as any as HTMLElement)
} }
function hideEmojiPicker() { function hideEmojiPicker() {
if (picker) if (picker.value)
el?.removeChild(picker as any as HTMLElement) el.value?.removeChild(picker.value as any as HTMLElement)
} }
</script> </script>

View file

@ -1,30 +1,28 @@
<script setup lang="ts"> <script setup lang="ts">
import Fuse from 'fuse.js' import Fuse from 'fuse.js'
let { modelValue } = $defineModels<{ const modelValue = defineModel<string>({ required: true })
modelValue: string
}>()
const { t } = useI18n() const { t } = useI18n()
const userSettings = useUserSettings() const userSettings = useUserSettings()
const languageKeyword = $ref('') const languageKeyword = ref('')
const fuse = new Fuse(languagesNameList, { const fuse = new Fuse(languagesNameList, {
keys: ['code', 'nativeName', 'name'], keys: ['code', 'nativeName', 'name'],
shouldSort: true, shouldSort: true,
}) })
const languages = $computed(() => const languages = computed(() =>
languageKeyword.trim() languageKeyword.value.trim()
? fuse.search(languageKeyword).map(r => r.item) ? fuse.search(languageKeyword.value).map(r => r.item)
: [...languagesNameList].filter(entry => !userSettings.value.disabledTranslationLanguages.includes(entry.code)) : [...languagesNameList].filter(entry => !userSettings.value.disabledTranslationLanguages.includes(entry.code))
.sort(({ code: a }, { code: b }) => { .sort(({ code: a }, { code: b }) => {
// Put English on the top // Put English on the top
if (a === 'en') if (a === 'en')
return -1 return -1
return a === modelValue ? -1 : b === modelValue ? 1 : a.localeCompare(b) return a === modelValue.value ? -1 : b === modelValue.value ? 1 : a.localeCompare(b)
}), }),
) )
@ -41,7 +39,7 @@ const preferredLanguages = computed(() => {
) )
function chooseLanguage(language: string) { function chooseLanguage(language: string) {
modelValue = language modelValue.value = language
} }
</script> </script>

View file

@ -3,16 +3,16 @@ const { editing } = defineProps<{
editing?: boolean editing?: boolean
}>() }>()
let { modelValue } = $defineModels<{ const modelValue = defineModel<string>({
modelValue: string required: true,
}>() })
const currentVisibility = $computed(() => const currentVisibility = computed(() =>
statusVisibilities.find(v => v.value === modelValue) || statusVisibilities[0], statusVisibilities.find(v => v.value === modelValue.value) || statusVisibilities[0],
) )
function chooseVisibility(visibility: string) { function chooseVisibility(visibility: string) {
modelValue = visibility modelValue.value = visibility
} }
</script> </script>

View file

@ -27,64 +27,73 @@ const emit = defineEmits<{
const { t } = useI18n() const { t } = useI18n()
const draftState = useDraft(draftKey, initial) const draftState = useDraft(draftKey, initial)
const { draft } = $(draftState) const { draft } = draftState
const { const {
isExceedingAttachmentLimit, isUploading, failedAttachments, isOverDropZone, isExceedingAttachmentLimit,
uploadAttachments, pickAttachments, setDescription, removeAttachment, isUploading,
failedAttachments,
isOverDropZone,
uploadAttachments,
pickAttachments,
setDescription,
removeAttachment,
dropZoneRef, dropZoneRef,
} = $(useUploadMediaAttachment($$(draft))) } = useUploadMediaAttachment(draft)
let { shouldExpanded, isExpanded, isSending, isPublishDisabled, publishDraft, failedMessages, preferredLanguage, publishSpoilerText } = $(usePublish( const { shouldExpanded, isExpanded, isSending, isPublishDisabled, publishDraft, failedMessages, preferredLanguage, publishSpoilerText } = usePublish(
{ {
draftState, draftState,
...$$({ expanded, isUploading, initialDraft: initial }), ...{ expanded: toRef(() => expanded), isUploading, initialDraft: toRef(() => initial) },
}, },
)) )
const { editor } = useTiptap({ const { editor } = useTiptap({
content: computed({ content: computed({
get: () => draft.params.status, get: () => draft.value.params.status,
set: (newVal) => { set: (newVal) => {
draft.params.status = newVal draft.value.params.status = newVal
draft.lastUpdated = Date.now() draft.value.lastUpdated = Date.now()
}, },
}), }),
placeholder: computed(() => placeholder ?? draft.params.inReplyToId ? t('placeholder.replying') : t('placeholder.default_1')), placeholder: computed(() => placeholder ?? draft.value.params.inReplyToId ? t('placeholder.replying') : t('placeholder.default_1')),
autofocus: shouldExpanded, autofocus: shouldExpanded.value,
onSubmit: publish, onSubmit: publish,
onFocus() { onFocus() {
if (!isExpanded && draft.initialText) { if (!isExpanded && draft.value.initialText) {
editor.value?.chain().insertContent(`${draft.initialText} `).focus('end').run() editor.value?.chain().insertContent(`${draft.value.initialText} `).focus('end').run()
draft.initialText = '' draft.value.initialText = ''
} }
isExpanded = true isExpanded.value = true
}, },
onPaste: handlePaste, onPaste: handlePaste,
}) })
function trimPollOptions() { function trimPollOptions() {
const indexLastNonEmpty = draft.params.poll!.options.findLastIndex(option => option.trim().length > 0) const indexLastNonEmpty = draft.value.params.poll!.options.findLastIndex(option => option.trim().length > 0)
const trimmedOptions = draft.params.poll!.options.slice(0, indexLastNonEmpty + 1) const trimmedOptions = draft.value.params.poll!.options.slice(0, indexLastNonEmpty + 1)
if (currentInstance.value?.configuration if (currentInstance.value?.configuration
&& trimmedOptions.length >= currentInstance.value?.configuration?.polls.maxOptions) && trimmedOptions.length >= currentInstance.value?.configuration?.polls.maxOptions)
draft.params.poll!.options = trimmedOptions draft.value.params.poll!.options = trimmedOptions
else else
draft.params.poll!.options = [...trimmedOptions, ''] draft.value.params.poll!.options = [...trimmedOptions, '']
} }
function editPollOptionDraft(event: Event, index: number) { function editPollOptionDraft(event: Event, index: number) {
draft.params.poll!.options[index] = (event.target as HTMLInputElement).value draft.value.params.poll!.options = Object.assign(draft.value.params.poll!.options.slice(), { [index]: (event.target as HTMLInputElement).value })
trimPollOptions() trimPollOptions()
} }
function deletePollOption(index: number) { function deletePollOption(index: number) {
draft.params.poll!.options.splice(index, 1) const newPollOptions = draft.value.params.poll!.options.slice()
newPollOptions.splice(index, 1)
draft.value.params.poll!.options = newPollOptions
trimPollOptions() trimPollOptions()
} }
const expiresInOptions = [ const expiresInOptions = computed(() => [
{ {
seconds: 1 * 60 * 60, seconds: 1 * 60 * 60,
label: t('time_ago_options.hour_future', 1), label: t('time_ago_options.hour_future', 1),
@ -105,11 +114,11 @@ const expiresInOptions = [
seconds: 7 * 24 * 60 * 60, seconds: 7 * 24 * 60 * 60,
label: t('time_ago_options.day_future', 7), label: t('time_ago_options.day_future', 7),
}, },
] ])
const expiresInDefaultOptionIndex = 2 const expiresInDefaultOptionIndex = 2
const characterCount = $computed(() => { const characterCount = computed(() => {
const text = htmlToText(editor.value?.getHTML() || '') const text = htmlToText(editor.value?.getHTML() || '')
let length = stringLength(text) let length = stringLength(text)
@ -130,24 +139,26 @@ const characterCount = $computed(() => {
for (const [fullMatch, before, _handle, username] of text.matchAll(countableMentionRegex)) for (const [fullMatch, before, _handle, username] of text.matchAll(countableMentionRegex))
length -= fullMatch.length - (before + username).length - 1 // - 1 for the @ length -= fullMatch.length - (before + username).length - 1 // - 1 for the @
if (draft.mentions) { if (draft.value.mentions) {
// + 1 is needed as mentions always need a space seperator at the end // + 1 is needed as mentions always need a space separator at the end
length += draft.mentions.map((mention) => { length += draft.value.mentions.map((mention) => {
const [handle] = mention.split('@') const [handle] = mention.split('@')
return `@${handle}` return `@${handle}`
}).join(' ').length + 1 }).join(' ').length + 1
} }
length += stringLength(publishSpoilerText) length += stringLength(publishSpoilerText.value)
return length return length
}) })
const isExceedingCharacterLimit = $computed(() => { const isExceedingCharacterLimit = computed(() => {
return characterCount > characterLimit.value return characterCount.value > characterLimit.value
}) })
const postLanguageDisplay = $computed(() => languagesNameList.find(i => i.code === (draft.params.language || preferredLanguage))?.nativeName) const postLanguageDisplay = computed(() => languagesNameList.find(i => i.code === (draft.value.params.language || preferredLanguage))?.nativeName)
const isDM = computed(() => draft.value.params.visibility === 'direct')
async function handlePaste(evt: ClipboardEvent) { async function handlePaste(evt: ClipboardEvent) {
const files = evt.clipboardData?.files const files = evt.clipboardData?.files
@ -166,7 +177,7 @@ function insertCustomEmoji(image: any) {
} }
async function toggleSensitive() { async function toggleSensitive() {
draft.params.sensitive = !draft.params.sensitive draft.value.params.sensitive = !draft.value.params.sensitive
} }
async function publish() { async function publish() {
@ -200,6 +211,11 @@ defineExpose({
}, },
}) })
function stopQuestionMarkPropagation(e: KeyboardEvent) {
if (e.key === '?')
e.stopImmediatePropagation()
}
onDeactivated(() => { onDeactivated(() => {
clearEmptyDrafts() clearEmptyDrafts()
}) })
@ -208,17 +224,13 @@ onDeactivated(() => {
<template> <template>
<div v-if="isHydrated && currentUser" flex="~ col gap-4" py3 px2 sm:px4 aria-roledescription="publish-widget"> <div v-if="isHydrated && currentUser" flex="~ col gap-4" py3 px2 sm:px4 aria-roledescription="publish-widget">
<template v-if="draft.editingStatus"> <template v-if="draft.editingStatus">
<div flex="~ col gap-1"> <div id="state-editing" text-secondary self-center>
<div id="state-editing" text-secondary self-center> {{ $t('state.editing') }}
{{ $t('state.editing') }}
</div>
<StatusCard :status="draft.editingStatus" :actions="false" :hover="false" is-preview px-0 />
</div> </div>
<div border="b dashed gray/40" />
</template> </template>
<div flex gap-3 flex-1> <div flex gap-3 flex-1>
<NuxtLink :to="getAccountRoute(currentUser.account)"> <NuxtLink self-start :to="getAccountRoute(currentUser.account)">
<AccountBigAvatar :account="currentUser.account" square /> <AccountBigAvatar :account="currentUser.account" square />
</NuxtLink> </NuxtLink>
<!-- This `w-0` style is used to avoid overflow problems in flex layoutsso don't remove it unless you know what you're doing --> <!-- This `w-0` style is used to avoid overflow problems in flex layoutsso don't remove it unless you know what you're doing -->
@ -267,11 +279,16 @@ onDeactivated(() => {
</ol> </ol>
</CommonErrorMessage> </CommonErrorMessage>
<div relative flex-1 flex flex-col> <div relative flex-1 flex flex-col min-h-30>
<EditorContent <EditorContent
:editor="editor" :editor="editor"
flex max-w-full flex max-w-full
:class="shouldExpanded ? 'min-h-30 md:max-h-[calc(100vh-200px)] sm:max-h-[calc(100vh-400px)] max-h-35 of-y-auto overscroll-contain' : ''" :class="{
'md:max-h-[calc(100vh-200px)] sm:max-h-[calc(100vh-400px)] max-h-35 of-y-auto overscroll-contain': shouldExpanded,
'py2 px3.5 bg-dm rounded-4 me--1 ms--1 mt--1': isDM,
}"
@keydown="stopQuestionMarkPropagation"
@keydown.esc.prevent="editor?.commands.blur()"
/> />
</div> </div>
@ -367,31 +384,31 @@ onDeactivated(() => {
@select="insertEmoji" @select="insertEmoji"
@select-custom="insertCustomEmoji" @select-custom="insertCustomEmoji"
> >
<button btn-action-icon :title="$t('tooltip.emoji')"> <button btn-action-icon :title="$t('tooltip.emojis')" :aria-label="$t('tooltip.add_emojis')">
<div i-ri:emotion-line /> <div i-ri:emotion-line />
</button> </button>
</PublishEmojiPicker> </PublishEmojiPicker>
<CommonTooltip v-if="draft.params.poll === undefined" placement="top" :content="$t('tooltip.add_media')"> <CommonTooltip v-if="draft.params.poll === undefined" placement="top" :content="$t('tooltip.add_media')" no-auto-focus>
<button btn-action-icon :aria-label="$t('tooltip.add_media')" @click="pickAttachments"> <button btn-action-icon :aria-label="$t('tooltip.add_media')" @click="pickAttachments">
<div i-ri:image-add-line /> <div i-ri:image-add-line />
</button> </button>
</CommonTooltip> </CommonTooltip>
<template v-if="draft.attachments.length === 0"> <template v-if="draft.attachments.length === 0">
<CommonTooltip v-if="!draft.params.poll" placement="top" :content="$t('polls.create')"> <CommonTooltip v-if="!draft.params.poll" placement="top" :content="$t('polls.create')" no-auto-focus>
<button btn-action-icon :aria-label="$t('polls.create')" @click="draft.params.poll = { options: [''], expiresIn: expiresInOptions[expiresInDefaultOptionIndex].seconds }"> <button btn-action-icon :aria-label="$t('polls.create')" @click="draft.params.poll = { options: [''], expiresIn: expiresInOptions[expiresInDefaultOptionIndex].seconds }">
<div i-ri:chat-poll-line /> <div i-ri:chat-poll-line />
</button> </button>
</CommonTooltip> </CommonTooltip>
<div v-else rounded-full b-1 border-dark flex="~ row" gap-1> <div v-else rounded-full b-1 border-dark flex="~ row" gap-1>
<CommonTooltip placement="top" :content="$t('polls.cancel')"> <CommonTooltip placement="top" :content="$t('polls.cancel')" no-auto-focus>
<button btn-action-icon b-r border-dark :aria-label="$t('polls.cancel')" @click="draft.params.poll = undefined"> <button btn-action-icon b-r border-dark :aria-label="$t('polls.cancel')" @click="draft.params.poll = undefined">
<div i-ri:close-line /> <div i-ri:close-line />
</button> </button>
</CommonTooltip> </CommonTooltip>
<CommonDropdown placement="top"> <CommonDropdown placement="top">
<CommonTooltip placement="top" :content="$t('polls.settings')"> <CommonTooltip placement="top" :content="$t('polls.settings')" no-auto-focus>
<button :aria-label="$t('polls.settings')" btn-action-icon w-12> <button :aria-label="$t('polls.settings')" btn-action-icon w-12>
<div i-ri:list-settings-line /> <div i-ri:list-settings-line />
<div i-ri:arrow-down-s-line text-sm text-secondary me--1 /> <div i-ri:arrow-down-s-line text-sm text-secondary me--1 />
@ -405,7 +422,7 @@ onDeactivated(() => {
</template> </template>
</CommonDropdown> </CommonDropdown>
<CommonDropdown placement="bottom"> <CommonDropdown placement="bottom">
<CommonTooltip placement="top" :content="$t('polls.expiration')"> <CommonTooltip placement="top" :content="$t('polls.expiration')" no-auto-focus>
<button :aria-label="$t('polls.expiration')" btn-action-icon w-12> <button :aria-label="$t('polls.expiration')" btn-action-icon w-12>
<div i-ri:hourglass-line /> <div i-ri:hourglass-line />
<div i-ri:arrow-down-s-line text-sm text-secondary me--1 /> <div i-ri:arrow-down-s-line text-sm text-secondary me--1 />
@ -430,7 +447,7 @@ onDeactivated(() => {
<PublishCharacterCounter :max="characterLimit" :length="characterCount" /> <PublishCharacterCounter :max="characterLimit" :length="characterCount" />
<CommonTooltip placement="top" :content="$t('tooltip.change_language')"> <CommonTooltip placement="top" :content="$t('tooltip.change_language')" no-auto-focus>
<CommonDropdown placement="bottom" auto-boundary-max-size> <CommonDropdown placement="bottom" auto-boundary-max-size>
<button btn-action-icon :aria-label="$t('tooltip.change_language')" w-max mr1> <button btn-action-icon :aria-label="$t('tooltip.change_language')" w-max mr1>
<span v-if="postLanguageDisplay" text-secondary text-sm ml1>{{ postLanguageDisplay }}</span> <span v-if="postLanguageDisplay" text-secondary text-sm ml1>{{ postLanguageDisplay }}</span>
@ -444,7 +461,7 @@ onDeactivated(() => {
</CommonDropdown> </CommonDropdown>
</CommonTooltip> </CommonTooltip>
<CommonTooltip placement="top" :content="$t('tooltip.add_content_warning')"> <CommonTooltip placement="top" :content="$t('tooltip.add_content_warning')" no-auto-focus>
<button btn-action-icon :aria-label="$t('tooltip.add_content_warning')" @click="toggleSensitive"> <button btn-action-icon :aria-label="$t('tooltip.add_content_warning')" @click="toggleSensitive">
<div v-if="draft.params.sensitive" i-ri:alarm-warning-fill text-orange /> <div v-if="draft.params.sensitive" i-ri:alarm-warning-fill text-orange />
<div v-else i-ri:alarm-warning-line /> <div v-else i-ri:alarm-warning-line />
@ -460,7 +477,7 @@ onDeactivated(() => {
</template> </template>
</PublishVisibilityPicker> </PublishVisibilityPicker>
<CommonTooltip v-if="failedMessages.length > 0" id="publish-failed-tooltip" placement="top" :content="$t('tooltip.publish_failed')"> <CommonTooltip v-if="failedMessages.length > 0" id="publish-failed-tooltip" placement="top" :content="$t('tooltip.publish_failed')" no-auto-focus>
<button <button
btn-danger rounded-3 text-sm w-full flex="~ gap1" items-center md:w-fit aria-describedby="publish-failed-tooltip" btn-danger rounded-3 text-sm w-full flex="~ gap1" items-center md:w-fit aria-describedby="publish-failed-tooltip"
> >
@ -471,7 +488,7 @@ onDeactivated(() => {
</button> </button>
</CommonTooltip> </CommonTooltip>
<CommonTooltip v-else id="publish-tooltip" placement="top" :content="$t('tooltip.add_publishable_content')" :disabled="!(isPublishDisabled || isExceedingCharacterLimit)"> <CommonTooltip v-else id="publish-tooltip" placement="top" :content="$t('tooltip.add_publishable_content')" :disabled="!(isPublishDisabled || isExceedingCharacterLimit)" no-auto-focus>
<button <button
btn-solid rounded-3 text-sm w-full flex="~ gap1" items-center btn-solid rounded-3 text-sm w-full flex="~ gap1" items-center
md:w-fit md:w-fit

View file

@ -5,16 +5,16 @@ const route = useRoute()
const { formatNumber } = useHumanReadableNumber() const { formatNumber } = useHumanReadableNumber()
const timeAgoOptions = useTimeAgoOptions() const timeAgoOptions = useTimeAgoOptions()
let draftKey = $ref('home') const draftKey = ref('home')
const draftKeys = $computed(() => Object.keys(currentUserDrafts.value)) const draftKeys = computed(() => Object.keys(currentUserDrafts.value))
const nonEmptyDrafts = $computed(() => draftKeys const nonEmptyDrafts = computed(() => draftKeys.value
.filter(i => i !== draftKey && !isEmptyDraft(currentUserDrafts.value[i])) .filter(i => i !== draftKey.value && !isEmptyDraft(currentUserDrafts.value[i]))
.map(i => [i, currentUserDrafts.value[i]] as const), .map(i => [i, currentUserDrafts.value[i]] as const),
) )
watchEffect(() => { watchEffect(() => {
draftKey = route.query.draft?.toString() || 'home' draftKey.value = route.query.draft?.toString() || 'home'
}) })
onDeactivated(() => { onDeactivated(() => {

View file

@ -1,9 +1,9 @@
<template> <template>
<button <button
v-if="$pwa?.needRefresh" v-if="useNuxtApp().$pwa?.needRefresh"
bg="primary-fade" relative rounded bg="primary-fade" relative rounded
flex="~ gap-1 center" px3 py1 text-primary flex="~ gap-1 center" px3 py1 text-primary
@click="$pwa.updateServiceWorker()" @click="useNuxtApp().$pwa?.updateServiceWorker()"
> >
<div i-ri-download-cloud-2-line /> <div i-ri-download-cloud-2-line />
<h2 flex="~ gap-2" items-center> <h2 flex="~ gap-2" items-center>

View file

@ -1,6 +1,6 @@
<template> <template>
<div <div
v-if="$pwa?.showInstallPrompt && !$pwa?.needRefresh" v-if="useNuxtApp().$pwa?.showInstallPrompt && !useNuxtApp().$pwa?.needRefresh"
m-2 p5 bg="primary-fade" relative m-2 p5 bg="primary-fade" relative
rounded-lg of-hidden rounded-lg of-hidden
flex="~ col gap-3" flex="~ col gap-3"
@ -10,10 +10,10 @@
{{ $t('pwa.install_title') }} {{ $t('pwa.install_title') }}
</h2> </h2>
<div flex="~ gap-1"> <div flex="~ gap-1">
<button type="button" btn-solid px-4 py-1 text-center text-sm @click="$pwa.install()"> <button type="button" btn-solid px-4 py-1 text-center text-sm @click="useNuxtApp().$pwa?.install()">
{{ $t('pwa.install') }} {{ $t('pwa.install') }}
</button> </button>
<button type="button" btn-text filter-saturate-0 px-4 py-1 text-center text-sm @click="$pwa.cancelInstall()"> <button type="button" btn-text filter-saturate-0 px-4 py-1 text-center text-sm @click="useNuxtApp().$pwa?.cancelInstall()">
{{ $t('pwa.dismiss') }} {{ $t('pwa.dismiss') }}
</button> </button>
</div> </div>

View file

@ -1,6 +1,6 @@
<template> <template>
<div <div
v-if="$pwa?.needRefresh" v-if="useNuxtApp().$pwa?.needRefresh"
m-2 p5 bg="primary-fade" relative m-2 p5 bg="primary-fade" relative
rounded-lg of-hidden rounded-lg of-hidden
flex="~ col gap-3" flex="~ col gap-3"
@ -9,10 +9,10 @@
{{ $t('pwa.title') }} {{ $t('pwa.title') }}
</h2> </h2>
<div flex="~ gap-1"> <div flex="~ gap-1">
<button type="button" btn-solid px-4 py-1 text-center text-sm @click="$pwa.updateServiceWorker()"> <button type="button" btn-solid px-4 py-1 text-center text-sm @click="useNuxtApp().$pwa?.updateServiceWorker()">
{{ $t('pwa.update') }} {{ $t('pwa.update') }}
</button> </button>
<button type="button" btn-text filter-saturate-0 px-4 py-1 text-center text-sm @click="$pwa.close()"> <button type="button" btn-text filter-saturate-0 px-4 py-1 text-center text-sm @click="useNuxtApp().$pwa?.close()">
{{ $t('pwa.dismiss') }} {{ $t('pwa.dismiss') }}
</button> </button>
</div> </div>

View file

@ -34,11 +34,11 @@ function categoryChosen() {
async function loadStatuses() { async function loadStatuses() {
if (status) { if (status) {
// Load the 5 statuses before and after the reported status // Load the 5 statuses before and after the reported status
const prevStatuses = await client.value.v1.accounts.listStatuses(account.id, { const prevStatuses = await client.value.v1.accounts.$select(account.id).statuses.list({
maxId: status.id, maxId: status.id,
limit: 5, limit: 5,
}) })
const nextStatuses = await client.value.v1.accounts.listStatuses(account.id, { const nextStatuses = await client.value.v1.accounts.$select(account.id).statuses.list({
minId: status.id, minId: status.id,
limit: 5, limit: 5,
}) })
@ -48,7 +48,7 @@ async function loadStatuses() {
else { else {
// Reporting an account directly // Reporting an account directly
// Load the 10 most recent statuses // Load the 10 most recent statuses
const mostRecentStatuses = await client.value.v1.accounts.listStatuses(account.id, { const mostRecentStatuses = await client.value.v1.accounts.$select(account.id).statuses.list({
limit: 10, limit: 10,
}) })
availableStatuses.value = mostRecentStatuses availableStatuses.value = mostRecentStatuses

View file

@ -6,12 +6,15 @@ defineProps<{
}>() }>()
</script> </script>
<!-- TODO: reuse AccountInfo.vue -->
<template> <template>
<div flex gap-2 items-center> <div flex gap-2 items-center>
<AccountAvatar w-10 h-10 :account="account" shrink-0 /> <AccountAvatar w-10 h-10 :account="account" shrink-0 />
<div flex="~ col gap1" shrink h-full overflow-hidden leading-none> <div flex="~ col gap1" shrink h-full overflow-hidden leading-none>
<div flex="~" gap-2> <div flex="~" gap-2>
<AccountDisplayName :account="account" line-clamp-1 ws-pre-wrap break-all text-base /> <AccountDisplayName :account="account" line-clamp-1 ws-pre-wrap break-all text-base />
<AccountLockIndicator v-if="account.locked" text-xs />
<AccountBotIndicator v-if="account.bot" text-xs /> <AccountBotIndicator v-if="account.bot" text-xs />
</div> </div>
<AccountHandle text-sm :account="account" text-secondary-light /> <AccountHandle text-sm :account="account" text-secondary-light />

View file

@ -5,7 +5,7 @@ const { hashtag } = defineProps<{
hashtag: mastodon.v1.Tag hashtag: mastodon.v1.Tag
}>() }>()
const totalTrend = $computed(() => const totalTrend = computed(() =>
hashtag.history?.reduce((total: number, item) => total + (Number(item.accounts) || 0), 0), hashtag.history?.reduce((total: number, item) => total + (Number(item.accounts) || 0), 0),
) )
</script> </script>

View file

@ -77,11 +77,12 @@ function activate() {
ps-3 ps-3
pe-1 pe-1
ml-1 ml-1
:placeholder="isHydrated ? t('nav.search') : ''" :placeholder="t('nav.search')"
pb="1px" pb="1px"
placeholder-text-secondary placeholder-text-secondary
@keydown.down.prevent="shift(1)" @keydown.down.prevent="shift(1)"
@keydown.up.prevent="shift(-1)" @keydown.up.prevent="shift(-1)"
@keydown.esc.prevent="input?.blur()"
@keypress.enter="activate" @keypress.enter="activate"
> >
<button v-if="query.length" btn-action-icon text-secondary @click="query = ''; input?.focus()"> <button v-if="query.length" btn-action-icon text-secondary @click="query = ''; input?.focus()">

View file

@ -4,7 +4,7 @@ import type { FontSize } from '~/composables/settings'
const userSettings = useUserSettings() const userSettings = useUserSettings()
const sizes = (new Array(11)).fill(0).map((x, i) => `${10 + i}px`) as FontSize[] const sizes = (Array.from({ length: 11 })).fill(0).map((x, i) => `${10 + i}px`) as FontSize[]
function setFontSize(e: Event) { function setFontSize(e: Event) {
if (e.target && 'valueAsNumber' in e.target) if (e.target && 'valueAsNumber' in e.target)

View file

@ -10,20 +10,22 @@ const props = defineProps<{
external?: true external?: true
large?: true large?: true
match?: boolean match?: boolean
target?: string
}>() }>()
const router = useRouter() const router = useRouter()
const scrollOnClick = computed(() => props.to && !(props.target === '_blank' || props.external))
useCommand({ useCommand({
scope: 'Settings', scope: 'Settings',
name: () => props.text name: () => props.text
?? (props.to ?? (props.to
? typeof props.to === 'string' ? typeof props.to === 'string'
? props.to ? props.to
: props.to.name : props.to.name
: '' : ''
), ),
description: () => props.description, description: () => props.description,
icon: () => props.icon || '', icon: () => props.icon || '',
visible: () => props.command && props.to, visible: () => props.command && props.to,
@ -39,14 +41,15 @@ useCommand({
:disabled="disabled" :disabled="disabled"
:to="to" :to="to"
:external="external" :external="external"
:target="target"
exact-active-class="text-primary" exact-active-class="text-primary"
:class="disabled ? 'op25 pointer-events-none ' : match ? 'text-primary' : ''" :class="disabled ? 'op25 pointer-events-none ' : match ? 'text-primary' : ''"
block w-full group focus:outline-none block w-full group focus:outline-none
:tabindex="disabled ? -1 : null" :tabindex="disabled ? -1 : null"
@click="to ? $scrollToTop() : undefined" @click="scrollOnClick ? $scrollToTop() : undefined"
> >
<div <div
w-full flex w-fit px5 py3 md:gap2 gap4 items-center w-full flex px5 py3 md:gap2 gap4 items-center
transition-250 group-hover:bg-active transition-250 group-hover:bg-active
group-focus-visible:ring="2 current" group-focus-visible:ring="2 current"
> >

View file

@ -1,6 +1,6 @@
<script lang="ts" setup> <script lang="ts" setup>
import type { ComputedRef } from 'vue' import type { ComputedRef } from 'vue'
import type { LocaleObject } from '#i18n' import type { LocaleObject } from '@nuxtjs/i18n'
const userSettings = useUserSettings() const userSettings = useUserSettings()

View file

@ -1,20 +1,17 @@
<script setup lang="ts"> <script setup lang="ts">
import type { mastodon } from 'masto' import type { mastodon } from 'masto'
const { form } = defineModels<{ const form = defineModel<{
form: { fieldsAttributes: NonNullable<mastodon.rest.v1.UpdateCredentialsParams['fieldsAttributes']>
fieldsAttributes: NonNullable<mastodon.v1.UpdateCredentialsParams['fieldsAttributes']> }>({ required: true })
} const dropdown = ref<any>()
}>()
const dropdown = $ref<any>()
const fieldIcons = computed(() => const fieldIcons = computed(() =>
Array.from({ length: maxAccountFieldCount.value }, (_, i) => Array.from({ length: maxAccountFieldCount.value }, (_, i) =>
getAccountFieldIcon(form.value.fieldsAttributes[i].name), getAccountFieldIcon(form.value.fieldsAttributes[i].name)),
),
) )
const fieldCount = $computed(() => { const fieldCount = computed(() => {
// find last non-empty field // find last non-empty field
const idx = [...form.value.fieldsAttributes].reverse().findIndex(f => f.name || f.value) const idx = [...form.value.fieldsAttributes].reverse().findIndex(f => f.name || f.value)
if (idx === -1) if (idx === -1)
@ -27,7 +24,7 @@ const fieldCount = $computed(() => {
function chooseIcon(i: number, text: string) { function chooseIcon(i: number, text: string) {
form.value.fieldsAttributes[i].name = text form.value.fieldsAttributes[i].name = text
dropdown[i]?.hide() dropdown.value[i]?.hide()
} }
</script> </script>

View file

@ -2,12 +2,12 @@
import type { ThemeColors } from '~/composables/settings' import type { ThemeColors } from '~/composables/settings'
const themes = await import('~/constants/themes.json').then(r => r.default) as [string, ThemeColors][] const themes = await import('~/constants/themes.json').then(r => r.default) as [string, ThemeColors][]
const settings = $(useUserSettings()) const settings = useUserSettings()
const currentTheme = $computed(() => settings.themeColors?.['--theme-color-name'] || themes[0][0]) const currentTheme = computed(() => settings.value.themeColors?.['--theme-color-name'] || themes[0][1]['--theme-color-name'])
function updateTheme(theme: ThemeColors) { function updateTheme(theme: ThemeColors) {
settings.themeColors = theme settings.value.themeColors = theme
} }
</script> </script>
@ -19,8 +19,8 @@ function updateTheme(theme: ThemeColors) {
'background': key, 'background': key,
'--local-ring-color': key, '--local-ring-color': key,
}" }"
:class="currentTheme === key ? 'ring-2' : 'scale-90'" :class="currentTheme === theme['--theme-color-name'] ? 'ring-2' : 'scale-90'"
:title="key" :title="theme['--theme-color-name']"
w-8 h-8 rounded-full transition-all w-8 h-8 rounded-full transition-all
ring="$local-ring-color offset-3 offset-$c-bg-base" ring="$local-ring-color offset-3 offset-$c-bg-base"
@click="updateTheme(theme)" @click="updateTheme(theme)"

View file

@ -11,11 +11,12 @@ const { disabled = false } = defineProps<{
<button <button
exact-active-class="text-primary" exact-active-class="text-primary"
block w-full group focus:outline-none text-start block w-full group focus:outline-none text-start
role="checkbox" :aria-checked="checked"
:disabled="disabled" :disabled="disabled"
:class="disabled ? 'opacity-50 cursor-not-allowed' : ''" :class="disabled ? 'opacity-50 cursor-not-allowed' : ''"
> >
<div <div
w-full flex w-fit px5 py3 md:gap2 gap4 items-center w-full flex px5 py3 md:gap2 gap4 items-center
transition-250 transition-250
:class="disabled ? '' : 'group-hover:bg-active'" :class="disabled ? '' : 'group-hover:bg-active'"
group-focus-visible:ring="2 current" group-focus-visible:ring="2 current"

Some files were not shown because too many files have changed in this diff Show more