refactor-frontend-containers #72

Manually merged
offbyn merged 34 commits from refactor-frontend-containers into master 2 years ago
offbyn commented 2 years ago
Owner

this took a bit longer.

the global feed, notes or profile new get their own fullscreen "view". Each view should have its own scrollbar and navigating between views should add a history entry so that native browser back works 🤞 .

also since the code had to be organized a bit I rewrote everything in typescript.

closes #7 #8

this took a bit longer. the global feed, notes or profile new get their own fullscreen "view". Each view should have its own scrollbar and navigating between views should add a history entry so that native browser back works 🤞 . also since the code had to be organized a bit I rewrote everything in typescript. closes https://git.qcode.ch/nostr/nostrweb/issues/7 https://git.qcode.ch/nostr/nostrweb/issues/8
offbyn added 33 commits 2 years ago
ad81d892e1
routes: use generic view containers
proof of concept to use generic view containers instead of specifc
functions to show and hide particular views.

a view has an identifier (path) which is used to subscribe to
relevant data. changing a view updates the history so that browser
back displays the last view. each view container has its own
scrollbar so that the scrolling position should be preserved when
changing back and forth between different views.

this change also removes CSS tabs in favor of view or overlays
such settings or write a new text note.

profile and notes deeplink use now native HTML anchors to improve
accessibility (copy/paste, open-in-new-tab, search engines).
589e65ae40
relays: type and upgrade to nostr-tools@1.6.0
move and typed relay related code to relays.ts

upgrade nostr-tools to latest greatest, major version with
breaking changes:

- relayPool is gone in favor of SimplePool, but this commit just
  used relayInit directly as relays should become configurable at
  some point
b65a1b5d95
nip19: use bech32 npub and note in uris
convert pubkey to npub and event id to note and store for
later. use npub and note for uri's so that we dont need to
guess what the view of a specific uri has to render.

this is only the first step that changes uri's, next step is
for the view to react to npub or note and render the
correct view accordingly.
6688bb65fc
routes: use nip19 as routes
so we need no guessing logic and know what to subscribe too. in a
later step it add more to the view i.e. show profile meta data for
npub.
faca657ce4
refactor: type subscriptions.ts
typed subscribe functions in subscriptions.ts
334b09afa1
refactor: type elem and enforce inferred generic type
typed elem so that it returns the exact type of the HTMLElement,
and that name must be a key of HTMLElementTagNameMap.

example:

elem('form'); // returns HTMLFormElement

elem('abc'); // not assignable to parameter of type 'keyof HTMLElementTagNameMap'
838afa9ed8
refactor: type element attributes
use attributes of html element type.

so that the following example is correctly typed:

elem('input', {
  className: 'foo',
  hidden: false,
  onclick: () => alert('hi'),
  tabIndex: 1,
  valueAsNumber: 1,
});

but this fails as foo is no valid attribute on div element:

elem('div', {foo: 'bar'});
4cdbf0349f
utils: import directly from utils
it is not worth to import everything from utils, as there are too
many functions, better import them directly from each module.
44bfc83732
settings: refactor pubkey into config.pubkey global
starting to move global application user config to settings.ts.
plan is to only share user settings via the config object, with
this all settings related ui can be moved out of main.js into its
own module.
43b74fd890
system: move pow function and error overlay to system
type and move powEvent and its error overlay to system.ts
857f188816
settings: move mining difficulty, filter and timeout configs
type and move mining related configs to settings.ts.
0b48332bfb
settings: move remaining settings code
with this change everything related to user settings is now
in settings.ts module.
d4050767ac
refactor: global click listener and cleanup
breaking up the global click callback to make it easier in the future
to move some parts into ui modules such as settings.ts.
cb0bd5ed2e
view: fix hidden settings view
css regression, somehow flex order doesnt overlay on the main
views, fixed with z-index.
4ba3f62f12
main: fix global click handler
settings view and write new message didnt show. reason was typescript
expected an instance of an HTMLElement but this didnt allow for
SVG elements inside the write button. Another reason was that the
condition expected a parent with data-id which isn't the case for
settings button nor write-new-message.
f5a218c53b
refactor: function to es6 arrow functions
so that it doesnt depend on function hoisting.
d058bdd35d
feed: ignore vmess protocol messages
Drop encrypted vmess messages.
174e6e43d9
feed: ignore ctrl click
ctrl/command click should do the native browser thing and not be
intercepted as normal click, i.e. ctrl click open-in-new-tab works
ci/woodpecker/push/woodpecker Pipeline was successful Details
ci/woodpecker/pr/woodpecker Pipeline was successful Details
5be04fa2d3
refactor: improve view and move code to ui and notes
cleanup code and move parts to ui.ts and notes.ts.

simplify view and fix some weird animation issue, it should run
pretty stable now.

updated color and spacings.

profile view now showing kind 0 name, but it is unnecessarily
re-rendering. this part should probably go to a custom profil
subscription callback in the future. keeping as is for now and
refactor later.
offbyn force-pushed refactor-frontend-containers from 5be04fa2d3 to c88cfa74bb 2 years ago
offbyn reviewed 2 years ago
src/settings.ts Outdated
@ -0,0 +175,4 @@
});
privateKeyInput.value = localStorage.getItem('private_key') || '';
pubKeyInput.value = localStorage.getItem('pub_key') || '';
offbyn commented 2 years ago
Poster
Owner

oups

oups
x1ddos commented 2 years ago
Owner

yeah, funny! gitea checks unicode :)
my editor didn't notice anything 🙈

yeah, funny! gitea checks unicode :) my editor didn't notice anything 🙈
x1ddos commented 2 years ago
Owner

very nice! the scrollbar is amazing. much better than twitter :)

on mobile, in the future, might want to hide the bar at the bottom. unsure when or how. and another thing is "x" in front of the feed: maybe just "feed"?

otherwise, looks fantastic! ship it.

very nice! the scrollbar is amazing. much better than twitter :) on mobile, in the future, might want to hide the bar at the bottom. unsure when or how. and another thing is "x" in front of the feed: maybe just "feed"? otherwise, looks fantastic! ship it.
x1ddos commented 2 years ago
Owner

on mobile, in the future, might want to hide the bar at the bottom. unsure when or how. and another thing is "x" in front of the feed: maybe just "feed"?

or maybe, if you remove "x", then the height is smaller and it should be ok?

> on mobile, in the future, might want to hide the bar at the bottom. unsure when or how. and another thing is "x" in front of the feed: maybe just "feed"? or maybe, if you remove "x", then the height is smaller and it should be ok?
offbyn added 1 commit 2 years ago
ci/woodpecker/pr/woodpecker Pipeline was successful Details
ci/woodpecker/push/woodpecker Pipeline was successful Details
683b500121
cleanup
- remove X icon placeholder
- remove weird unicode whitespace
- delete comment out code
x1ddos commented 2 years ago
Owner

🎉

🎉
offbyn commented 2 years ago
Poster
Owner

indeed 👍

or maybe, if you remove "x", then the height is smaller and it should be ok?

indeed 👍 > or maybe, if you remove "x", then the height is smaller and it should be ok?
offbyn merged commit 683b500121 into master manually 2 years ago
ci/woodpecker/pr/woodpecker Pipeline was successful
ci/woodpecker/push/woodpecker Pipeline was successful
The pull request has been manually merged as 683b500121.
You can also view command line instructions.

Step 1:

From your project repository, check out a new branch and test the changes.
git checkout -b refactor-frontend-containers master
git pull origin refactor-frontend-containers

Step 2:

Merge the changes and update on Gitea.
git checkout master
git merge --no-ff refactor-frontend-containers
git push origin master
Sign in to join this conversation.
No reviewers
No Milestone
No project
No Assignees
2 Participants
Notifications
Due Date
The due date is invalid or out of range. Please use the format 'yyyy-mm-dd'.

No due date set.

Dependencies

No dependencies set.

Reference: nostr/nostrweb#72
Loading…
There is no content yet.