# Decentral Ninja 
The easiest way to connect with others without the need for phone numbers or email exchanges!


## Install & Run
- git submodule init
- git submodule update
- npm install
- npm run serve

## Icon Lib
https://tabler.io/icons

### TODO:
- [x] choose license (https://www.infoworld.com/article/3703768/the-open-source-licensing-war-is-over.html?utm_source=changelog-news)
- [x] move exampleTwo to here...
- [x] textarea instead of input field
- [x] reorganize exampleTwo, hidden appear effect, chat-, room-, user-, provider- controller
- [x] finish completely style/transform exampleTwo
- [x] src/es/chat/es/components/molecules/Users.js listen to "yjs-users" event dispatched from controller/Users.js with func. detail.getData() and not awareness-change event!!!
- [x] pimp Router to open new components on certain query parameters (as key) and make room view to choose room or create room
- [x] header controls in dialog (nav modal)
- [x] replace confirm box with input dialog and fix lost username by storing it to local storage
- [x] controllers/Rooms.js getting a room event from EventDrivenYjs.js and maintaining the rooms at local storage for further consumption at Rooms view / manifest to fullscreen / give option to open in new tab
- [x] delete room local storage
- [x] add an atom listening to "yjs-room" any event and displaying the "room name" info "in the header" (also replace 'yjs-get-room' in the header with that atom) where ever placed (general element with info batch support and dispatch Event to open dialog menu) & nickname on each message which on click opens the nickname window and updates on yjs-nickname
- [x] on app reset directly route to last visited room vs. home
- [x] room overview show current chat grayed out
- [x] notification on request per room (deliver through message channel), cache notification at sw cache with room name (cache this uid, see MasterServiceWorker.js L:37), badge: https://developer.mozilla.org/en-US/docs/Web/API/Badging_API
- [x] MasterServiceWorker add a Notification Queue which can be read through events
- [x] WebWorkers for controller/Notifications.js _updateNotifications, controller/User.js + controller/Provider.js
- [x] add scroll down/not read messages button
- [x] room filter rooms list by typing
- [x] Delete message disappear effect
- [x] ~~wormhole iframe~~ does not work due to policy restrictions
- [x] start video meeting in iframe (JitsiDialog)
- [x] replyTo (continuer src/es/chat/es/components/atoms/Input.js L:136 + src/es/chat/es/components/molecules/dialogs/MessageDialog.js L:121)
- [x] copy message button
- [x] each instance of message must link to chat ul main message and update on each connect, resp replace with fresh clone, or rerender with fresh data
- [x] message dialog on initial open scroll to bottom
- [x] dialog close cross hover color
- [x] message edit self and info other make same info icon [or other ...](https://tabler.io/icons/icon/dots-circle-horizontal)
- [x] ~~emoji (https://nolanlawson.github.io/emoji-picker-element/) all in one dialog overlay per message but triggers normal reply message with one emoji and effect on intersection evtl.~~ (done by reply and keep existing picker for the moment)
- [x] QR code generator (something like https://github.com/sumimakito/Awesome-qr.js#browsers) and print css https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Printing
- [x] empty message when opening new chat room
- [x] process message at ww
- [x] share room, share in this room, share api + https://developer.mozilla.org/en-US/docs/Web/API/Clipboard_API
- [x] on resize scroll to right message position, last message visible scroll to that instead
- [x] not connected providers users crdt delete mechanism at users controller
- [x] BUG: notifications are empty from websocket
- [ ] navigation menu redesign, new icon, room link share from rooms menu with qr
  - [x] user dialog and clean up users dialog
    - [x] https://github.com/feross/p2p-graph
    - [x] other (notSelf) nickname open users dialog and nickname change keep link in footer
    - [x] li el text (sort and describe keys)
    - [x] user icon https://stackoverflow.com/questions/3426404/create-a-hexadecimal-colour-based-on-a-string-with-javascript#answer-68968983, https://codepen.io/blindfish3/pen/LYbaNrw, https://svelte.dev/playground/e3500b1fd6da49dc9eb5813bdbc6d12b?version=3.35.0, https://developer.mozilla.org/en-US/docs/Web/API/SubtleCrypto/digest + indicate if user is connected to self with icon
  - [ ] providers dialog and share incl. provider choose in dialog
    - [x] fixes: Providers.js molecules status active check hostname for provider and hostname for url instead of only includes, only order providers after closing dialog
    - [x] connected providers counter (number bubble)
    - [x] info users connected with specific provider, historical providers and users at user overview card inside details summary
    - [x] user view show all, incl. none active connections, to inform about providers | details summary with option to see all historical connections
    - [/] provider graph tab which opens user graph (remove list link to user graph)
    - [x] move user info besides provider icon
    - [ ] user dialog - no innerHTML at the TODO marked sections within: src/es/chat/es/components/molecules/Users.js (// TODO: Proper update diffing logic, only render the graph when having changes, to avoid jumping on multiple updates) / consider awarenessEventListenerDelay exception dialog open again on 200ms instead of now 2000ms
    - [ ] at user graph/connection detail card, click on provider opens provider dialog and scrolls to the provider as well as graph svg click within provider dialog should scroll to the provider, also active room notification on provider open dialog -> scroll to the certain provider! (provider-dialog-show-event)
    - [ ] reload smart icon (move it left of notification icon)
      - [ ] refresh after longer session inactive and focus comes back, check navigator.onLine, provider pings when all status "timeout" and mutually connected users
        - [ ] mobile on focus ask by dialog to refresh (reload), when the last activity to provider is old: https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API
    - [/] providers with origins: ['crdt'] && status: ['unknown'] were never connected but a user in the crdt claims the connection. sort those providers into a details-summary labeled further providers (fixed with "connected" providers not allProviders)
    - [ ] WebSocket api call to check the status and deliver some context from the owner as well as fallback providers (if websocket pingProviders after api info call, on 503 service unavailable or 511 = failed) data.getWebsocketInfo & data.pingProvider
    - [ ] infos about provider origins, users active and historically connected
    - [ ] indicate providerFallbacks especially when provider active but not connected with highlight
    - [ ] permanentFallbacks test (see Environment.js)
    - [ ] dialog share/clipboard to message/copy the provider url 
    - [ ] dialog share room with provider selection options
    - [ ] first time enter room or entering link with new providers for the existing room, block automatic provider connection with provider selection options
    - [ ] only set default providers when room is newly opened, don't enforce those when no provider is chosen
    - [x] link to users dialog, docker hub and github y-websocket repo and add p2pGraph for connected providers
    - [x] fix btn hover and connect/disconnect button different color
    - [x] mute state change loading animation
    - [x] rename chat-notification-mutes and add provider urls to include as well as inform at notification event if provider is included
    - [x] intersection lazy load provider
    - [x] notifications do abort by signal all fetches
    - [x] allow mute even when there is no message (this allows to block unwanted or dead providers), allow unmute (add) for those which were even not included in the getNotification and not muted (add those ignored providers, when added, to localStorage) [NOTE: think about all possible notification states (success, failed, ignored, muted)]
    - [/] show at status connected provider the amount of users and on the header provider icon the amount of connected providers
    - [x] provider url is missing :port
    - [x] Provider controller getWebsocketInfo function save ('yjs-merge-unique-active-room') fallbacks to local storage, incase api call does not always work. And consume it at fillProvidersWithProvidersFromRooms.
    - [x] check for notifications at provider molecule for origin/host related notifications
    - [x] mute/un-mute providers regarding notifications at notification molecule and controller, saving providers for which to block get-notifications (loading animation on change)
    - [x] only show notification on provider if websocket is available
    - [/] sort muted providers last (will be sorted by statusPriority)
    - [x] update Providers when link copy/pasted into room name field
    - [/] dialog for choosing providers when sharing (show provider dialog link to adjust) ~~and entering room~~, remove default provider at src/es/components/pages/Chat.js:39 and take only default from Environment when no other provider present, attention local storage router-resume (only share the connected providers with a share link)
    - [/] dialog for choosing providers before entering a new room (when receiving a link, automatically choose those providers)
    - [/] shared room link in message or pasted room link in room dialog input: navigate to provider select window with preselection provider query param from link (already shared through crdt)
    - [/] Kill Room Button for KeepAlive at "You are alone" disconnect, before unload, change room
    - [/] share provider setting with other users to click & change (sends a message with the provider to share, when clicked opens the provider dialog and adds the received provider for the session) (The connected)
    - [x] open at rooms online status in room overview and/or navigation
    - [x] ping providers to see if they are online before trying connection or proposing it for connection: https://jsfiddle.net/4yrmknfa/15/ (Image error) , check if self online
    - [x] check navigator online offline
- [x] Decentral href share inside message, open by routing (no refresh) same as room input field
- [ ] when room delete also delete localStorage and Indexeddb
  - [ ] IndexedDB delete Option per room, etc. general Storage management: https://developer.mozilla.org/en-US/docs/Web/API/Storage_API
- [ ] cooler https://github.com/ipv6rslimited/cloudseeder/blob/main/LICENSE.md
- [ ] Inform new version available message and/or fetch the newest providers and permanent fallback providers from: fetch('https://raw.githubusercontent.com/decentral-ninja/website/refs/heads/main/src/es/Environment.js').then(res => res.text()).then(text => console.log(text))
- [ ] chat end to end encryption https://developer.mozilla.org/en-US/docs/Web/API/SubtleCrypto with asymmetrical private/public key -> https://github.com/mdn/dom-examples/blob/main/web-crypto/derive-key/ecdh.js (read & write [key pair], only read [private key ? must not include pub key], only write [public key]) | https://developer.mozilla.org/en-US/docs/Web/API/Web_Authentication_API | explanation video: https://www.ted.com/talks/andy_yen_think_your_email_s_private_think_agai, https://developer.mozilla.org/en-US/docs/Web/API/Credential_Management_API
  - [ ] Filters for different encryption keys
  Should read:
  - [ ] https://www.crypto101.io/
  - [ ] https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Bitwise_XOR
  - [ ] https://getstream.io/blog/web-crypto-api-chat/
  - [ ] Ernie Turner: Dodging Web Crypto API Landmines | Web Rebels 2018 https://www.youtube.com/watch?v=lbt2_M1hZeg
  - [ ] stealth message with all (sender, date?, message etc.) encrypted
  - [ ] password share in url link but salted. Salt solution placed in public channel and once consumed salt solution in pub channel and password in url gets resolved permanently deleted, or salt with a question
  - [ ] approve key holding by pub key encryption signature or simply declare key uid in user crdt to be in possession
- [ ] Service Worker for caching assets PWA + Fallback local hosting von decentral.ninja, https://docs.pwabuilder.com/#/home/native-features?id=periodic-background-sync-overview, https://docs.pwabuilder.com/#/home/sw-intro?id=pre-caching-during-the-install-event
- [ ] Update yjs rollup stuff
- [ ] test again webRTC server and fire up an instance, also get some backup server instances
- [/] BugFix, persistence clears document (crdt) before timeout or possible never saved it, research: https://github.com/Weedshaker/y-websocket/blob/master/bin/utils.js#L243
--- Beta ---
- [ ] **ipfs and webtorrent integrations (https://developer.mozilla.org/en-US/docs/Web/API/Navigator/registerProtocolHandler?retiredLocale=de)** with WakeLock for video playing | https://developer.mozilla.org/en-US/docs/Web/API/Media_Session_API | https://developer.mozilla.org/en-US/docs/Web/API/Picture-in-Picture_API + encrypt files with stream https://github.com/SocketDev/wormhole-crypto, https://github.com/xuset/indexeddb-chunk-store/tree/master, https://github.com/webtorrent/webtorrent/blob/master/docs/tutorials.md, consistent webtorrent: webtorrent/webtorrent#1293, https://developer.mozilla.org/en-US/docs/Web/API/File_System_API/Origin_private_file_system
- [x] indicator on message from who it was, at least by connection data, seen or in the user dialog if user is up to date
- [x] rooms wct-load-template-tag for chat-m-rooms > dialog > ul > li > (room entry) to make the rerendering faster (opening the dialog always has a slight delay)
- [ ] add/make new providers... best make your own libp2p provider: https://github.com/Weedshaker/y-p2pt/blob/ec64f3accbd854d9a2d0317ca19a08351821ecf5/readme.md or https://github.com/MarcoPolo/y-libp2p (awareness not done yet: https://cdn.jsdelivr.net/npm/[email protected]/dist/index.js + needs "tsc" compiler action), https://github.com/YousefED/Matrix-CRDT (awareness in code: https://cdn.jsdelivr.net/npm/[email protected]/dist/matrix-crdt.js but needs "lerna" compiler action + matrix user access token: https://matrix.org/docs/older/usage-of-the-matrix-js-sdk/), https://github.com/YousefED/nostr-crdt (awareness unclear since it could not be found in code: https://cdn.jsdelivr.net/npm/[email protected]/dist/nostr-crdt.js + needs "lerna" compiler action), https://github.com/dmotz/trystero 👍: https://github.com/kahnpoint/y-trystero (needs "vite" compiler action) or https://github.com/WinstonFassett/y-labs/blob/0f943e77f514298f068bb98cd1703e4601fabc91/src/lib/yjs-trystero/y-trystero.js (needs "astro" compiler action), https://peerbit.org/, search others: https://github.com/search?q=yjs%20provider&type=repositories
- [ ] announce room publicly with active user numbers
- [ ] keep fetching notifications and don't discard the tab (wake lock) or fetch in service worker
- [ ] speech (tests/exampleThree.html) see tests/exampleThree/Input.js
- [/] Provider support keepAlive=[string] = forever
- [ ] bug: mobile keyboard scrolls rooms because of dvh
- [ ] allow an aka. (also known as) user name saved locally
- [ ] add dark mode (@media (prefers-color-scheme: dark))
- [ ] markdown support: https://github.com/marcopolo/gossip-pad?tab=readme-ov-file when selecting showing italic, bold, etc.
- [ ] On Desktop keep chat rooms alive even with route or focus lost (maybe even show in room overview which has active connections). Ether just hide at route.js or set the following attributes on EventDrivenYjs controller (https://github.com/Weedshaker/event-driven-web-components-yjs/blob/master/src/es/EventDrivenYjs.js#L938 + https://github.com/Weedshaker/event-driven-web-components-yjs/blob/master/src/es/EventDrivenYjs.js#L986)
- [ ] ai eg. https://github.com/ngxson/wllama, https://medium.com/@heyamit10/fine-tuning-gguf-models-a-practical-guide-d4cc83f9e157, https://technotim.live/posts/ai-stack-tutorial/, https://www.kla.tv/36858
- [ ] verification service through signature. chat host same domain and provider (websocket) owner and user can verify to other users through sending public key encrypted message/token to same domain fetch url, websocket host has more crud control and can by running the chat on localhost where the websocket runs push those through origin restricted to localhost api call into websocket, which answers to other members on other origin and can verify admin rights. verified admin can define moderators and hand them a key to verify at provider who knows the role from admin. w.
- [ ] crdt snapshot
- [ ] record audio https://developer.mozilla.org/en-US/docs/Web/API/MediaStream_Recording_API
- [ ] integrate https://github.com/webxdc
- [ ] Hint dialog component (help and texts with translation)
  - [ ] interactive elements often found as wct-icon-mdx must have an <a href="#"> tag preventing default but accessible for click by tab and enter key
  - Room Eg.: <h4>Open or enter a room by typing a room name below or pasting a decentral ninja link:</h4><h5>Hint: The more random the room name, the less likely to get unwanted visitors!</h5>
  - [ ] tour explaining the website, self made or with something like https://driverjs.com/
- [ ] pin messages with pin categories (local and shared) and filters for pinned messages
- [ ] Chat full text search (https://github.com/nextapps-de/flexsearch#installation, https://github.com/bvaughn/js-search) (+ https://yacy.net/)
- [ ] search chat texts of publicly announced chats
- [ ] send user to overwrite/share between devices
- [ ] CRDT Corrupted undo option with Room change
- [/] https://www.runonflux.io/ done for website 8080 interface (not applicable since it load balances between a minimum of three instances, which makes it unreliable if clients land on different nodes aka. instances.)
  - [ ] video call in iframe from local instance (https://jitsi.github.io/handbook/docs/dev-guide/dev-guide-ljm-api)
  - [x] https://github.com/localtunnel/server
  - [x] website on flux
  - [ ] forward proxy to local instance (local tunnel) (https://github.com/anderspitman/awesome-tunneling expl. https://github.com/rapiz1/rathole)
  - [ ] from local instance https://github.com/Weedshaker/y-websocket
  - [ ] from local instance https://github.com/yjs/y-webrtc
  - [ ] Local hosting https://localtunnel.github.io/www/~~, https://ipv6.rs/cloudseeder/, https://www.noip.com/, https://tailscale.com/blog/tailscale-funnel-beta/?utm_source=changelog-news, https://theeconomictruth.org/f/the-outerrnet-founders-box-the-dawn-of-digital-freedom, https://github.com/traefik/traefik~~
- [ ] go through check list (https://github.com/Weedshaker/event-driven-web-components-yjs/blob/master/readme.md)
--- Version One ---
- [ ] Local hosting 2.0 https://github.com/anderspitman/awesome-tunneling?tab=readme-ov-file
- [ ] restore/recover crdt state from saved data
- [ ] user give a room a hint name (local storage only) and allow hide un-hide room with or without password
  - [ ] security and text & room link encryption 
- [ ] native operating system share dialog behavior (https://docs.pwabuilder.com/#/builder/manifest?id=share_target-object)
  - [ ] open pwa on decentral.ninja link
- [x] Chat message on intersection declare as read by filling it into array with own uid (https://github.com/mits-gossau/web-components-toolbox/blob/master/src/es/components/prototypes/Intersection.js)
- [x] Keep chat scroll position by intersection (https://github.com/mits-gossau/web-components-toolbox/blob/master/src/es/components/prototypes/Intersection.js)
- [x] Pin and sort rooms (https://github.com/shresthalucky/sortable-dnd/blob/master/src/sortable-dnd.js + https://artecher.github.io/react-dnd-ax-demo/?selectedKind=Button&selectedStory=Complex%20Example&full=0&down=1&left=1&panelRight=0&downPanel=storybook%2Factions%2Factions-panel + https://github.com/blackboard/react-dnd-ax)
- [ ] QR code scanner: https://github.com/nimiq/qr-scanner | https://developer.mozilla.org/en-US/docs/Web/API/Barcode_Detection_API
- [ ] https://xmpp.org
- [ ] add gifs from gify or similar
- [ ] Notification: When new messages change document.title (emoji) until read plus allow notification sound
- [ ] fix Iphone/IOS Notifications/Batches (https://devtails.xyz/@adam/how-to-setup-web-push-notifications-in-ios-safari#server-side-push-notifications) : alternative when app open go through all rooms, get the new messages and release event with the notifications, that at least the user doesn't have to check each room but just open the app
- [ ] controllers/Providers.js when on automatic connect look for the most favorable connections and avoid orphans else allow manual choice at Providers view (User controller if not connected offer to connect to other urls max. 2 per socket / connecting to other servers according user crdt data [provider has mutually connected users with some connected to other providers with mutually connected users and vice versa]) + handle on error ws connection at provider
- [ ] enable sending money https://docs.metamask.io/wallet/how-to/connect/set-up-sdk/javascript/pure-js/ | https://developer.mozilla.org/en-US/docs/Web/API/Payment_Request_API
- [ ] check security requirements from https://www.securemessagingapps.com
- [ ] Mail Notifications or voluntary authentication by mail (https://github.com/nodemailer/nodemailer)
- [ ] draw https://github.com/tldraw/tldraw
- [ ] Add Spaces that act as buckets for rooms and Users
  - [ ] dns (link board) / dns crdt
- [ ] id, room administrators (nostr)
- [ ] organization (DAO?)
- [ ] Add Contact Book Functionality --> Users "list"
- [ ] rewrite parts with: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/withResolvers
- [ ] yjs in webworker (https://github.com/y-js/y-webworker)
Add Chat Options:
- [x] Delete Messages
- [x] Reply To Message
- [ ] Emoji Reply to Message
- [ ] Edit Message
- [x] Forward Message

--- UI / UX ---
- [x] Add Days or/and Date of the message section

--- Emoji TODO ---
- [ ] evaluate: https://nolanlawson.github.io/emoji-picker-element/
- [ ] Output larger if only emoji is sent
- [x] Make EmojiPicker Responsive
- [x] create top global used emojis list
- [ ] search function for emojis
- [ ] display recent used emojis
- [x] add emojis where cursor is in text
- [ ] dont hide emoji picker when clicked in textarea
- [ ] use "own" emoji style --> symbl.cc