|<[^>]*>', 'gm'), '');
+
+ return renderFormattedMessageText(cleanText);
+}
+
+function renderFormattedMessageText(text) {
+ if (!text) return '';
+ const lines = text.split('\n');
+ const elements = [];
+ let currentQuoteLines = [];
+
+ const flushQuote = () => {
+ if (currentQuoteLines.length > 0) {
+ const quoteText = currentQuoteLines.join('\n');
+ elements.push(
+ m('blockquote.chat-quote-block', {
+ style: {
+ borderLeft: '3px solid #3b82f6',
+ backgroundColor: '#f8fafc',
+ color: '#475569',
+ padding: '0.35rem 0.65rem',
+ margin: '0.35rem 0',
+ borderRadius: '0 0.375rem 0.375rem 0',
+ fontSize: '0.9em',
+ fontStyle: 'italic',
+ whiteSpace: 'pre-wrap',
+ wordBreak: 'break-word',
+ }
+ }, renderTextWithEmoji(quoteText))
+ );
+ currentQuoteLines = [];
+ }
+ };
+
+ lines.forEach((line, idx) => {
+ if (line.trim().startsWith('>')) {
+ const lineContent = line.trim().replace(/^>\s?/, '');
+ currentQuoteLines.push(lineContent);
+ } else {
+ flushQuote();
+ if (line) {
+ elements.push(renderTextWithEmoji(line));
+ }
+ if (idx < lines.length - 1) {
+ elements.push(m('br'));
+ }
+ }
+ });
+ flushQuote();
+
+ return elements.length > 0 ? elements : renderTextWithEmoji(text);
+}
+
+/**
+ * Wraps emoji characters in a span so CSS can size them independently.
+ */
+function renderTextWithEmoji(text) {
+ if (!text) return '';
+ const emojiRegex = /(?:\p{Emoji_Presentation}|\p{Extended_Pictographic})(?:[\u{1F3FB}-\u{1F3FF}])?(?:\u{FE0F})?(?:\u{20E3})?(?:(?:\u{200D}(?:\p{Emoji_Presentation}|\p{Extended_Pictographic})(?:[\u{1F3FB}-\u{1F3FF}])?(?:\u{FE0F})?)*)/gu;
+ const parts = [];
+ let last = 0;
+ let match;
+ // eslint-disable-next-line no-cond-assign
+ while ((match = emojiRegex.exec(text)) !== null) {
+ if (match[0].length === 0) { emojiRegex.lastIndex++; continue; }
+ if (match.index > last) parts.push(text.slice(last, match.index));
+ parts.push(m('span.chat-emoji', match[0]));
+ last = match.index + match[0].length;
+ }
+ if (last < text.length) parts.push(text.slice(last));
+ return parts.length > 0 ? parts : text;
+}
+
+function getSafeAvatar(details) {
+ if (
+ details &&
+ details.mAvatar &&
+ details.mAvatar.mData &&
+ details.mAvatar.mData.base64 !== ''
+ ) {
+ return details.mAvatar;
+ }
+ return undefined;
+}
+
+// ***************************** models ***********************************
+
+const MobileState = {
+ showLobbies: false,
+ showUsers: false,
+ toggleLobbies() {
+ this.showLobbies = !this.showLobbies;
+ this.showUsers = false;
+ },
+ toggleUsers() {
+ this.showUsers = !this.showUsers;
+ this.showLobbies = false;
+ },
+ closeAll() {
+ this.showLobbies = false;
+ this.showUsers = false;
+ },
+};
+
+const ChatRoomsModel = {
+ allRooms: [],
+ knownSubscrIds: [],
+ subscribedRooms: {},
+ loadPublicRooms() {
+ rs.rsJsonApiRequest(
+ '/rsChats/getListOfNearbyChatLobbies',
+ {},
+ (data) => {
+ if (data && data.public_lobbies) {
+ const seen = new Set();
+ const uniqueLobbies = data.public_lobbies.filter((lobby) => {
+ const id = rs.idToHex(lobby.lobby_id);
+ if (seen.has(id)) return false;
+ seen.add(id);
+ return true;
+ });
+ ChatRoomsModel.allRooms = sortLobbies(uniqueLobbies);
+ } else {
+ ChatRoomsModel.allRooms = [];
+ }
+ }
+ );
+ },
+ loadSubscribedRooms(after = null) {
+ rs.rsJsonApiRequest(
+ '/rsChats/getChatLobbyList',
+ {},
+ (data) => {
+ if (data && data.cl_list) {
+ const ids = [...new Set(data.cl_list.map((lid) => rs.idToHex(lid)))];
+ ChatRoomsModel.knownSubscrIds = ids;
+
+ Object.keys(ChatRoomsModel.subscribedRooms).forEach((id) => {
+ if (!ids.includes(id)) {
+ delete ChatRoomsModel.subscribedRooms[id];
+ }
+ });
+
+ if (ids.length === 0) {
+ ChatRoomsModel.loadPublicRooms();
+ if (after != null) after();
+ m.redraw();
+ return;
+ }
+
+ let count = 0;
+ ids.forEach((id) =>
+ loadLobbyDetails(id, (info) => {
+ if (info) {
+ ChatRoomsModel.subscribedRooms[id] = info;
+ }
+ count++;
+ if (count === ids.length) {
+ ChatRoomsModel.loadPublicRooms();
+ if (after != null) {
+ after();
+ }
+ m.redraw();
+ }
+ })
+ );
+ } else {
+ ChatRoomsModel.loadPublicRooms();
+ }
+ }
+ );
+ },
+ subscribed(info) {
+ return this.knownSubscrIds.includes(rs.idToHex(info.lobby_id));
+ },
+};
+
+/**
+ * Message displays a single Chat-Message
+ * currently removes formatting and in consequence inline links
+ */
+const Message = () => {
+ return {
+ view: (vnode) => {
+ const msg = vnode.attrs;
+ const datetime = new Date(msg.sendTime * 1000).toLocaleTimeString();
+ if (msg.isSystem) {
+ const text = msg.msg || msg.message;
+ const isSecured = text.includes('secured') || text.includes('talk');
+ const bgColor = isSecured ? '#fffbeb' : '#f8fafc';
+ const borderColor = isSecured ? '#fcd34d' : '#cbd5e1';
+ const textColor = isSecured ? '#b45309' : '#475569';
+ const borderStyle = isSecured ? 'solid' : 'dashed';
+
+ return m(
+ '.message.incoming',
+ [
+ m('span.datetime', datetime),
+ m('span.username', 'Chat status'),
+ m('.messagetext', {
+ style: {
+ backgroundColor: bgColor,
+ border: `1px ${borderStyle} ${borderColor}`,
+ color: textColor,
+ padding: '0.5rem 0.75rem',
+ borderRadius: '0.375rem',
+ display: 'inline-block',
+ marginTop: '0.25rem',
+ }
+ }, text)
+ ]
+ );
+ }
+ const rawGxsId = msg.lobby_peer_gxs_id || msg.peerId;
+ let gxsId = rs.idToHex(rawGxsId);
+
+ const isZero = (id) => !id || id === '00000000000000000000000000000000';
+ if (isZero(gxsId)) {
+ const lobby = ChatLobbyModel.currentLobby;
+ if (lobby && (lobby.chatType === 1 || lobby.chatType === 2)) {
+ gxsId = msg.incoming ? rs.idToHex(lobby.to_id || lobby.peer_id || lobby.distant_chat_id) : rs.idToHex(lobby.own_id || lobby.gxs_id);
+ }
+ }
+
+ const isMuted = ChatHubState.mutedUsers && ChatHubState.mutedUsers.has(gxsId);
+ const details = ChatHubState.gxsDetails[gxsId];
+ const opinion = details && details.mReputation ? details.mReputation.mOwnOpinion : 1;
+ const isBanned = opinion === 0;
+
+ if (isMuted || isBanned) {
+ return null;
+ }
+
+ let username = rs.userList.username(gxsId) || msg.peerName || '???';
+ if (username === gxsId && msg.peerName) {
+ username = msg.peerName;
+ }
+ if (username === gxsId && gxsId && gxsId.length > 12) {
+ username = gxsId.substring(0, 8) + '...';
+ }
+ const rawText = msg.msg || msg.message || '';
+
+ const chatType = ChatLobbyModel.currentLobby && ChatLobbyModel.currentLobby.chatType;
+ const isRoom = chatType === 3;
+
+ const handleContextMenu = (e) => {
+ e.preventDefault();
+ e.stopPropagation();
+ const sel = window.getSelection() ? window.getSelection().toString() : '';
+ const targetText = sel && sel.trim() ? sel : rawText;
+
+ ChatHubState.messageContextMenu = {
+ show: true,
+ x: e.clientX,
+ y: e.clientY,
+ messageText: targetText,
+ username: username,
+ gxsId: gxsId,
+ };
+ m.redraw();
+ };
+
+ if (isRoom) {
+ const nickColor = getNicknameColor(gxsId, username);
+ return m(
+ '.message.compact',
+ {
+ oncontextmenu: handleContextMenu,
+ },
+ [
+ m('span.datetime', datetime),
+ m('span.username', { style: { color: nickColor } }, username + ':'),
+ m('span.messagetext', renderChatMessage(rawText)),
+ ]
+ );
+ }
+
+ return m(
+ '.message' + (msg.incoming ? '.incoming' : '.outgoing'),
+ m('span.datetime', datetime),
+ m('span.username', username),
+ m('span.messagetext', renderChatMessage(rawText))
+ );
+ },
+ };
+};
+
+const ChatLobbyModel = {
+ currentLobby: {
+ lobby_name: '...',
+ },
+ lobby_user: '...',
+ isSubscribed: false,
+ messages: [],
+ users: [],
+ messageKeys: new Set(),
+ lastLobbyId: null,
+ distantChatStatus: null,
+ statusPollInterval: null,
+
+ pollDistantChatStatus() {
+ if (!this.currentLobby || this.currentLobby.chatType !== 2) return;
+ rs.rsJsonApiRequest(
+ '/rsChats/getDistantChatStatus',
+ {
+ pid: this.currentLobby.lobby_id,
+ },
+ (detail, success) => {
+ if (success && detail.retval) {
+ const oldStatus = this.distantChatStatus ? this.distantChatStatus.status : null;
+ this.distantChatStatus = detail.info;
+
+ if (oldStatus !== null && oldStatus !== detail.info.status) {
+ if (detail.info.status === 2) {
+ this.addMessages([{
+ chat_id: this.chatId(),
+ isSystem: true,
+ msg: 'Tunnel is secured. You can talk!',
+ sendTime: Math.floor(Date.now() / 1000)
+ }]);
+ } else if (detail.info.status === 3) {
+ this.addMessages([{
+ chat_id: this.chatId(),
+ isSystem: true,
+ msg: 'Your partner closed the conversation.',
+ sendTime: Math.floor(Date.now() / 1000)
+ }]);
+ }
+ }
+ m.redraw();
+ }
+ }
+ );
+ },
+
+ startStatusPolling() {
+ this.stopStatusPolling();
+ this.pollDistantChatStatus();
+ this.statusPollInterval = setInterval(() => this.pollDistantChatStatus(), 3000);
+ },
+
+ stopStatusPolling() {
+ if (this.statusPollInterval) {
+ clearInterval(this.statusPollInterval);
+ this.statusPollInterval = null;
+ }
+ this.distantChatStatus = null;
+ },
+
+ getMessageKey(msg) {
+ if (msg.msgId && msg.msgId !== 0) return 'id_' + msg.msgId;
+ const text = msg.msg || msg.message || '';
+ return 't_' + msg.sendTime + '_' + text.substring(0, 32);
+ },
+
+ addMessages(newMsgs, scroll = false) {
+ let added = false;
+ newMsgs.forEach((msg) => {
+ const key = this.getMessageKey(msg);
+ if (!this.messageKeys.has(key)) {
+ const text = msg.msg || msg.message || '';
+ const isNearDuplicate = this.messages.some((existingMsg) => {
+ const eAttrs = existingMsg.attrs;
+ const eText = eAttrs.msg || eAttrs.message || '';
+ return (
+ eText === text &&
+ Math.abs(eAttrs.sendTime - msg.sendTime) < 5
+ );
+ });
+
+ if (!isNearDuplicate) {
+ this.messageKeys.add(key);
+ this.messages.push(m(Message, msg));
+ added = true;
+ }
+ }
+ });
+
+ if (added) {
+ this.messages.sort((a, b) => a.attrs.sendTime - b.attrs.sendTime);
+ m.redraw();
+ if (scroll) {
+ setTimeout(() => {
+ const element = document.querySelector('.messages');
+ if (element) {
+ element.scrollTop = element.scrollHeight;
+ }
+ }, 100);
+ }
+ }
+ },
+
+ loadHistory(id, type) {
+ const chatPeerId = {
+ broadcast_status_peer_id: '00000000000000000000000000000000',
+ type: type,
+ peer_id: '00000000000000000000000000000000',
+ distant_chat_id: '00000000000000000000000000000000',
+ lobby_id: { xstr64: '0' },
+ };
+
+ if (type === 3) chatPeerId.lobby_id.xstr64 = id;
+ else if (type === 2) chatPeerId.distant_chat_id = id;
+ else if (type === 1) chatPeerId.peer_id = id;
+
+ rs.rsJsonApiRequest(
+ '/rsHistory/getMessages',
+ {
+ chatPeerId: chatPeerId,
+ loadCount: 20,
+ },
+ (data, success) => {
+ if (success && data.msgs) {
+ this.addMessages(data.msgs);
+ }
+ }
+ );
+ },
+ loadAllHistoryForRoom(lobbyId, callback) {
+ ChatHubState.isHistoryLoading = true;
+ ChatHubState.fullHistoryMessages = [];
+ m.redraw();
+
+ const chatType = this.currentLobby && this.currentLobby.chatType;
+ const isDistant = chatType === 2;
+
+ const chatPeerId = {
+ broadcast_status_peer_id: '00000000000000000000000000000000',
+ type: isDistant ? 2 : 3,
+ peer_id: '00000000000000000000000000000000',
+ distant_chat_id: isDistant ? (lobbyId || '') : '00000000000000000000000000000000',
+ lobby_id: { xstr64: isDistant ? '0' : (lobbyId || '0') },
+ };
+
+ rs.rsJsonApiRequest(
+ '/rsHistory/getMessages',
+ {
+ chatPeerId: chatPeerId,
+ loadCount: 0,
+ },
+ (data, success) => {
+ let msgs = (success && data && data.msgs) ? data.msgs : [];
+ msgs.sort((a, b) => (a.sendTime || a.recvTime) - (b.sendTime || b.recvTime));
+ ChatHubState.fullHistoryMessages = msgs;
+ ChatHubState.isHistoryLoading = false;
+ m.redraw();
+ if (callback) callback();
+ }
+ );
+ },
+ setupAction: (lobbyId, nick) => { },
+ setIdentity(lobbyId, nick) {
+ rs.rsJsonApiRequest(
+ '/rsChats/setIdentityForChatLobby',
+ {
+ lobby_id: { xstr64: lobbyId },
+ nick: nick,
+ },
+ () => m.route.set('/chat/:lobby', { lobby: lobbyId }),
+ true
+ );
+ },
+ enterPublicLobby(lobbyId, nick) {
+ rs.rsJsonApiRequest(
+ '/rsChats/joinVisibleChatLobby',
+ {
+ lobby_id: { xstr64: lobbyId },
+ own_id: nick,
+ },
+ () => {
+ loadLobbyDetails(lobbyId, (info) => {
+ ChatRoomsModel.subscribedRooms[lobbyId] = info;
+ ChatRoomsModel.loadSubscribedRooms(() => {
+ m.route.set('/chat/:lobby', { lobby: rs.idToHex(info.lobby_id) });
+ });
+ });
+ },
+ true
+ );
+ },
+ unsubscribeChatLobby(lobbyId, follow) {
+ rs.rsJsonApiRequest(
+ '/rsChats/unsubscribeChatLobby',
+ {
+ lobby_id: { xstr64: lobbyId },
+ },
+ (data, success) => {
+ if (success) {
+ ChatRoomsModel.loadSubscribedRooms(follow);
+ }
+ },
+ true
+ );
+ },
+ chatId() {
+ const type = (this.currentLobby && this.currentLobby.chatType) || 3;
+ const id = this.lastLobbyId || m.route.param('lobby');
+ const cid = {
+ broadcast_status_peer_id: '00000000000000000000000000000000',
+ type: type,
+ peer_id: '00000000000000000000000000000000',
+ distant_chat_id: '00000000000000000000000000000000',
+ lobby_id: { xstr64: '0' },
+ };
+ if (type === 3) cid.lobby_id.xstr64 = id;
+ else if (type === 2) cid.distant_chat_id = id;
+ else if (type === 1) cid.peer_id = id;
+ return cid;
+ },
+ loadLobby(currentlobbyid) {
+ this.stopStatusPolling();
+ this.lastLobbyId = currentlobbyid;
+
+ const finishLoad = (detail) => {
+ this.setupAction = this.setIdentity;
+ this.currentLobby = detail;
+ this.isSubscribed = true;
+ this.lobby_user = rs.userList.username(detail.gxs_id) || '???';
+
+ this.messages = [];
+ this.messageKeys.clear();
+
+ this.loadHistory(currentlobbyid, detail.chatType);
+
+ const cid = this.chatId();
+ rs.events[15].chatMessages(cid, rs.events[15], (l) => {
+ this.addMessages(l);
+ });
+
+ rs.events[15].notify = (chatMessage) => {
+ const msgCid = chatMessage.chat_id;
+ let msgId;
+
+ if (msgCid.type === 3) {
+ msgId = rs.idToHex(msgCid.lobby_id);
+ } else if (msgCid.type === 2) {
+ msgId = rs.idToHex(msgCid.distant_chat_id);
+ } else if (msgCid.type === 1) {
+ msgId = rs.idToHex(msgCid.peer_id);
+ } else {
+ msgId = rs.idToHex(msgCid);
+ }
+
+ if (msgId === currentlobbyid) {
+ this.addMessages([chatMessage]);
+ }
+ };
+
+ let list = [];
+ if (detail.gxs_ids) {
+ if (Array.isArray(detail.gxs_ids)) {
+ list = detail.gxs_ids.map((u) => {
+ const key = u.key;
+ return { key, name: rs.userList.username(key) || key, lastAct: get64Num(u.value) };
+ });
+ } else if (typeof detail.gxs_ids === 'object') {
+ list = Object.keys(detail.gxs_ids).map((key) => {
+ return { key, name: rs.userList.username(key) || key, lastAct: get64Num(detail.gxs_ids[key]) };
+ });
+ }
+ }
+
+ const ownId = detail.gxs_id;
+ if (ownId && ownId !== '00000000000000000000000000000000') {
+ const hasOwn = list.some((u) => u.key === ownId);
+ if (!hasOwn) {
+ list.push({
+ key: ownId,
+ name: rs.userList.username(ownId) || ownId,
+ lastAct: Math.floor(Date.now() / 1000)
+ });
+ }
+ }
+
+ if (list.length === 0) {
+ list = [{ key: ownId || '', name: rs.userList.username(ownId) || detail.lobby_name || '???', lastAct: Math.floor(Date.now() / 1000) }];
+ }
+
+ list.sort((a, b) => a.name.localeCompare(b.name));
+ this.users = list;
+
+ if (detail.chatType === 2) {
+ this.startStatusPolling();
+ }
+
+ m.redraw();
+ };
+
+ loadLobbyDetails(currentlobbyid, (detail) => {
+ if (detail) {
+ finishLoad(detail);
+ } else {
+ loadDistantChatDetails(currentlobbyid, (dDetail) => {
+ if (dDetail) {
+ finishLoad(dDetail);
+ }
+ });
+ }
+ });
+ },
+ loadPublicLobby(currentlobbyid) {
+ this.setupAction = this.enterPublicLobby;
+ this.isSubscribed = false;
+ ChatRoomsModel.allRooms.forEach((it) => {
+ if (rs.idToHex(it.lobby_id) === currentlobbyid) {
+ this.currentLobby = it;
+ this.lobby_user = '???';
+ this.lobbyid = currentlobbyid;
+ }
+ });
+ this.users = [];
+ },
+ sendMessage(msg, onsuccess) {
+ const cid = this.chatId();
+
+ rs.rsJsonApiRequest(
+ '/rsChats/sendChat',
+ {
+ id: cid,
+ msg: msg,
+ },
+ (data, success) => {
+ if (success) {
+ const echoMsg = {
+ chat_id: cid,
+ msg: msg,
+ sendTime: Math.floor(Date.now() / 1000),
+ lobby_peer_gxs_id: this.currentLobby.gxs_id,
+ };
+ this.addMessages([echoMsg], true);
+ if (onsuccess) onsuccess();
+ } else {
+ console.error('[RS] Failed to send chat message:', data);
+ alert('Failed to send chat message. The image/payload exceeds RetroShare max chat packet size.');
+ if (onsuccess) onsuccess();
+ }
+ }
+ );
+ },
+ selected(info, selName, defaultName) {
+ const currid = rs.idToHex(ChatLobbyModel.currentLobby.lobby_id || { xstr64: m.route.param('lobby') });
+ return (rs.idToHex(info.lobby_id) === currid ? selName : '') + defaultName;
+ },
+ switchToEvent(info) {
+ return () => {
+ ChatLobbyModel.currentLobby = info;
+ m.route.set('/chat/:lobby', { lobby: rs.idToHex(info.lobby_id) });
+ ChatLobbyModel.loadLobby(rs.idToHex(info.lobby_id));
+ };
+ },
+ setupEvent(info) {
+ return () => {
+ m.route.set('/chat/:lobby/setup', { lobby: rs.idToHex(info.lobby_id) });
+ ChatLobbyModel.loadPublicLobby(rs.idToHex(info.lobby_id));
+ };
+ },
+};
+
+// ************************* Chat Hub State ****************************
+
+const ChatHubState = {
+ selectedRoomId: null,
+ selectedRoom: null,
+ selectedRoomType: null,
+ searchString: '',
+ ownProfile: { name: 'Loading...' },
+ gxsDetails: {},
+ hoveredUser: null,
+ mutedUsers: new Set(),
+ activeMenu: null,
+ showAttachModal: false,
+ attachPath: '',
+ attachBrowseHint: false,
+ isHashing: false,
+ hashingError: '',
+ showEmojiPicker: false,
+ emojiSearch: '',
+ emojiCategory: 'Smileys',
+ showCreateRoomModal: false,
+ newRoomName: '',
+ newRoomTopic: '',
+ newRoomIdentity: '',
+ newRoomPublic: true,
+ newRoomSigned: false,
+ ownGxsIdentities: [],
+ createRoomError: '',
+ userSortMethod: 'name',
+ showInviteModal: false,
+ friendsList: [],
+ selectedFriendsToInvite: new Set(),
+ showHistoryModal: false,
+ historySearchQuery: '',
+ fullHistoryMessages: [],
+ isHistoryLoading: false,
+ messageContextMenu: {
+ show: false,
+ x: 0,
+ y: 0,
+ messageText: '',
+ username: '',
+ gxsId: '',
+ },
+};
+
+module.exports = {
+ get64Num,
+ loadLobbyDetails,
+ loadDistantChatDetails,
+ sortLobbies,
+ getNicknameColor,
+ getStatusColor,
+ getStatusTooltip,
+ renderTextWithEmoji,
+ renderChatMessage,
+ getSafeAvatar,
+ MobileState,
+ ChatRoomsModel,
+ Message,
+ ChatLobbyModel,
+ ChatHubState,
+};
diff --git a/webui-src/app/config/config_chat.js b/webui-src/app/config/config_chat.js
new file mode 100644
index 0000000..6b6714e
--- /dev/null
+++ b/webui-src/app/config/config_chat.js
@@ -0,0 +1,205 @@
+const m = require('mithril');
+const rs = require('rswebui');
+const peopleUtil = require('people/people_util');
+const peopleState = require('people/people_state');
+
+const ConfigChat = () => {
+ let defaultIdentity = '';
+ let ownIdentities = [];
+ let acceptChatFrom = 0; // 0 = Everyone, 1 = Contacts Only, 2 = Nobody
+ let maxStorageDays = 10;
+
+ // History states
+ let historyEnable = { private: true, distant: true, lobby: true };
+ let historySaveCount = { private: 500, distant: 500, lobby: 500 };
+
+ function loadSettings() {
+ // Load Own Identities
+ peopleUtil.ownIds((ids) => {
+ ownIdentities = ids || [];
+ ownIdentities.forEach((id) => {
+ peopleState.fetchIdDetails(id);
+ });
+ m.redraw();
+ });
+
+ // Load Default Lobby Identity
+ rs.rsJsonApiRequest('/rsChats/getDefaultIdentityForChatLobby', {}, (data) => {
+ if (data && data.id) {
+ defaultIdentity = data.id;
+ peopleState.fetchIdDetails(defaultIdentity);
+ m.redraw();
+ }
+ });
+
+ // Load Distant Chat Accept Permission Flags (silent error fallback)
+ rs.rsJsonApiRequest('/rsChats/getDistantChatPermissionFlags', {}, (data, success) => {
+ if (success && data && data.retval !== undefined) {
+ acceptChatFrom = data.retval;
+ m.redraw();
+ }
+ }, true);
+
+ // Load Max Storage Duration (silent error fallback)
+ rs.rsJsonApiRequest('/rsHistory/getMaxStorageDuration', {}, (data, success) => {
+ if (success && data && data.retval !== undefined) {
+ maxStorageDays = Math.round(data.retval / 86400);
+ m.redraw();
+ }
+ }, true);
+
+ // Load History Enables & Save Counts
+ const types = [
+ { key: 'private', type: 1 },
+ { key: 'distant', type: 3 },
+ { key: 'lobby', type: 2 },
+ ];
+
+ types.forEach(({ key, type }) => {
+ rs.rsJsonApiRequest('/rsHistory/getEnable', { chat_type: type }, (data, success) => {
+ if (success && data && data.retval !== undefined) {
+ historyEnable[key] = data.retval;
+ m.redraw();
+ }
+ }, true);
+ rs.rsJsonApiRequest('/rsHistory/getSaveCount', { chat_type: type }, (data, success) => {
+ if (success && data && data.retval !== undefined) {
+ historySaveCount[key] = data.retval;
+ m.redraw();
+ }
+ }, true);
+ });
+ }
+
+ return {
+ oninit: () => {
+ loadSettings();
+ },
+ view: () => {
+ const selectedDetails = defaultIdentity ? peopleState.State.gxsIdToDetailsMap[defaultIdentity] : null;
+
+ return m('.node-config', [
+ // General Chat Settings
+ m('.widget', [
+ m('.widget__heading', m('h3', 'General Chat Settings')),
+ m('.widget__body', [
+ m('.config-grid', { style: 'display: grid; grid-template-columns: 200px 1fr; gap: 1rem; align-items: center;' }, [
+ m('label', { style: 'font-weight: 500; color: #334155;' }, 'Default identity for chat rooms:'),
+ m('.default-id-selector', { style: 'display: flex; align-items: center; gap: 0.5rem;' }, [
+ m(peopleUtil.UserAvatar, {
+ avatar: selectedDetails ? selectedDetails.mAvatar : null,
+ identityId: defaultIdentity,
+ size: 24,
+ }),
+ m('select', {
+ style: 'padding: 0.35rem 0.6rem; border-radius: 0.375rem; border: 1px solid #cbd5e1; outline: none; background: #ffffff; min-width: 240px; font-weight: 600;',
+ value: defaultIdentity,
+ onchange: (e) => {
+ defaultIdentity = e.target.value;
+ rs.rsJsonApiRequest('/rsChats/setDefaultIdentityForChatLobby', { id: defaultIdentity }, () => {});
+ },
+ }, [
+ m('option', { value: '' }, '-- Select Default Identity --'),
+ ownIdentities.map((id) => {
+ const det = peopleState.State.gxsIdToDetailsMap[id];
+ const nick = (det ? det.mNickname : null) || rs.userList.username(id) || id;
+ return m('option', { value: id }, nick);
+ }),
+ ]),
+ ]),
+
+ m('label', { style: 'font-weight: 500; color: #334155;' }, 'Accept chat from:'),
+ m('select', {
+ style: 'padding: 0.35rem 0.6rem; border-radius: 0.375rem; border: 1px solid #cbd5e1; outline: none; background: #ffffff; max-width: 320px; font-weight: 600;',
+ value: acceptChatFrom,
+ onchange: (e) => {
+ acceptChatFrom = parseInt(e.target.value);
+ rs.rsJsonApiRequest('/rsChats/setDistantChatPermissionFlags', { flags: acceptChatFrom }, () => {}, true);
+ },
+ }, [
+ m('option', { value: 0 }, 'Everyone'),
+ m('option', { value: 1 }, 'Contacts Only'),
+ m('option', { value: 2 }, 'Nobody'),
+ ]),
+ ]),
+ ]),
+ ]),
+
+ // Chat History Settings
+ m('.widget', [
+ m('.widget__heading', m('h3', 'Chat History Settings')),
+ m('.widget__body', [
+ m('.config-grid', { style: 'display: flex; align-items: center; justify-content: space-between; background: #f8fafc; padding: 0.75rem 1rem; border-radius: 0.5rem; border: 1px solid #e2e8f0; margin-bottom: 1.25rem; max-width: 500px; width: 100%;' }, [
+ m('div', [
+ m('span', { style: 'font-weight: 600; color: #1e293b; display: block;' }, 'Max Storage Duration'),
+ m('span', { style: 'font-size: 0.8rem; color: #64748b;' }, 'Global expiration period for messages stored in history database'),
+ ]),
+ m('.storage-input-group', { style: 'display: flex; align-items: center; gap: 0.5rem;' }, [
+ m('input[type=number][min=1][max=365]', {
+ style: 'width: 70px; padding: 0.35rem 0.5rem; border-radius: 0.375rem; border: 1px solid #cbd5e1; outline: none; font-weight: 600; text-align: center;',
+ value: maxStorageDays,
+ oninput: (e) => (maxStorageDays = parseInt(e.target.value) || 1),
+ onchange: () => {
+ rs.rsJsonApiRequest('/rsHistory/setMaxStorageDuration', { seconds: maxStorageDays * 86400 }, () => {}, true);
+ },
+ }),
+ m('span', { style: 'font-weight: 500; color: #475569; font-size: 0.85rem;' }, 'Days'),
+ ]),
+ ]),
+
+ m('.table-container', { style: 'border: 1px solid #e2e8f0; border-radius: 0.5rem; overflow: hidden; background: #ffffff; max-width: 500px; width: 100%;' }, [
+ m('table.history-config-table', { style: 'width: 100%; border-collapse: collapse; text-align: left;' }, [
+ m('thead', [
+ m('tr', { style: 'background: #f8fafc; border-bottom: 1px solid #e2e8f0;' }, [
+ m('th', { style: 'padding: 0.75rem 0.75rem; color: #475569; font-weight: 600; font-size: 0.85rem; width: 220px; text-align: left;' }, 'Chat Type'),
+ m('th', { style: 'padding: 0.75rem 0.75rem; color: #475569; font-weight: 600; font-size: 0.85rem; width: 120px; text-align: center;' }, 'Enable History'),
+ m('th', { style: 'padding: 0.75rem 0.75rem; color: #475569; font-weight: 600; font-size: 0.85rem; width: 160px; text-align: center;' }, 'Max Saved Messages'),
+ ]),
+ ]),
+ m('tbody', [
+ [
+ { label: 'Direct Chat (Private)', icon: 'fa-user-lock', key: 'private', type: 1 },
+ { label: 'Distant Chat', icon: 'fa-network-wired', key: 'distant', type: 3 },
+ { label: 'Chat Rooms (Lobbies)', icon: 'fa-comments', key: 'lobby', type: 2 },
+ ].map(({ label, icon, key, type }) =>
+ m('tr', { style: 'border-bottom: 1px solid #f1f5f9; transition: background 0.15s ease;' }, [
+ m('td', { style: 'padding: 0.75rem 0.75rem; font-weight: 600; color: #1e293b; text-align: left;' }, [
+ m('i.fas.' + icon, { style: 'margin-right: 0.5rem; color: #64748b; font-size: 0.9rem;' }),
+ label,
+ ]),
+ m('td', { style: 'padding: 0.75rem 0.75rem; text-align: center;' }, [
+ m('input[type=checkbox]', {
+ style: 'width: 17px; height: 17px; cursor: pointer; accent-color: #3b82f6;',
+ checked: historyEnable[key],
+ oninput: (e) => {
+ historyEnable[key] = e.target.checked;
+ rs.rsJsonApiRequest('/rsHistory/setEnable', { chat_type: type, enable: historyEnable[key] }, () => {}, true);
+ },
+ }),
+ ]),
+ m('td', { style: 'padding: 0.75rem 0.75rem; text-align: center;' }, [
+ m('div', { style: 'display: flex; align-items: center; justify-content: center; gap: 0.4rem;' }, [
+ m('input[type=number][min=0][max=50000]', {
+ style: 'width: 80px; padding: 0.3rem 0.4rem; border-radius: 0.375rem; border: 1px solid #cbd5e1; outline: none; text-align: center; font-weight: 500;',
+ value: historySaveCount[key],
+ oninput: (e) => (historySaveCount[key] = parseInt(e.target.value) || 0),
+ onchange: () => {
+ rs.rsJsonApiRequest('/rsHistory/setSaveCount', { chat_type: type, count: historySaveCount[key] }, () => {}, true);
+ },
+ }),
+ m('span', { style: 'font-size: 0.8rem; color: #94a3b8;' }, 'msgs'),
+ ]),
+ ]),
+ ])
+ ),
+ ]),
+ ]),
+ ]),
+ ]),
+ ]),
+ ]);
+ },
+ };
+};
+
+module.exports = ConfigChat;
diff --git a/webui-src/app/config/config_network.js b/webui-src/app/config/config_network.js
index ffbb2d7..1af47d6 100644
--- a/webui-src/app/config/config_network.js
+++ b/webui-src/app/config/config_network.js
@@ -10,6 +10,10 @@ const SetNwMode = () => {
'Inverted: DHT only',
'Dark Net: None',
];
+ const hiddenModes = [
+ 'Discovery On (recommended)',
+ 'Discovery Off',
+ ];
let vsDisc = 0;
let vsDht = 0;
@@ -17,8 +21,41 @@ const SetNwMode = () => {
let sslId = '';
let details = {};
+ const updateSelectedMode = (isHiddenMode) => {
+ if (!details || details.vs_dht === undefined) return;
+ if (isHiddenMode) {
+ if (details.vs_disc === util.RS_VS_DISC_OFF) {
+ selectedMode = hiddenModes[1];
+ } else {
+ selectedMode = hiddenModes[0];
+ }
+ } else {
+ if (
+ details.vs_dht === util.RS_VS_DHT_FULL &&
+ details.vs_disc === util.RS_VS_DISC_FULL
+ ) {
+ selectedMode = networkModes[0];
+ } else if (
+ details.vs_dht === util.RS_VS_DHT_OFF &&
+ details.vs_disc === util.RS_VS_DISC_FULL
+ ) {
+ selectedMode = networkModes[1];
+ } else if (
+ details.vs_dht === util.RS_VS_DHT_FULL &&
+ details.vs_disc === util.RS_VS_DISC_OFF
+ ) {
+ selectedMode = networkModes[2];
+ } else if (
+ details.vs_dht === util.RS_VS_DHT_OFF &&
+ details.vs_disc === util.RS_VS_DISC_OFF
+ ) {
+ selectedMode = networkModes[3];
+ }
+ }
+ };
+
return {
- oninit: () => {
+ oninit: (vnode) => {
rs.rsJsonApiRequest('/rsAccounts/getCurrentAccountId').then((res) => {
if (res.body.retval) {
sslId = res.body.id;
@@ -27,57 +64,53 @@ const SetNwMode = () => {
}).then((res) => {
if (res.body.retval) {
details = res.body.det;
- if (
- details.vs_dht === util.RS_VS_DHT_FULL &&
- details.vs_disc === util.RS_VS_DISC_FULL
- ) {
- selectedMode = networkModes[0];
- } else if (
- details.vs_dht === util.RS_VS_DHT_OFF &&
- details.vs_disc === util.RS_VS_DISC_FULL
- ) {
- selectedMode = networkModes[1];
- } else if (
- details.vs_dht === util.RS_VS_DHT_FULL &&
- details.vs_disc === util.RS_VS_DISC_OFF
- ) {
- selectedMode = networkModes[2];
- } else if (
- details.vs_dht === util.RS_VS_DHT_OFF &&
- details.vs_disc === util.RS_VS_DISC_OFF
- ) {
- selectedMode = networkModes[3];
- }
+ updateSelectedMode(vnode.attrs && vnode.attrs.isHiddenMode);
+ m.redraw();
}
});
}
});
},
- view: () => {
+ onupdate: (vnode) => {
+ updateSelectedMode(vnode.attrs && vnode.attrs.isHiddenMode);
+ },
+ view: (vnode) => {
+ const isHiddenMode = vnode.attrs && vnode.attrs.isHiddenMode;
+ const hideLabel = vnode.attrs && vnode.attrs.hideLabel;
+ const modes = isHiddenMode ? hiddenModes : networkModes;
+
return [
- m('p', 'Network mode:'),
+ !hideLabel && m('p', isHiddenMode ? 'Discovery:' : 'Network mode:'),
m(
'select',
{
+ style: 'flex: 1; max-width: 320px; padding: 0.4rem; border: 1px solid #cbd5e1; border-radius: 4px;',
value: selectedMode,
onchange: (e) => {
- selectedMode = networkModes[e.target.selectedIndex];
- if (e.target.selectedIndex === 0) {
- // Public: DHT & Discovery
- vsDisc = util.RS_VS_DISC_FULL;
- vsDht = util.RS_VS_DHT_FULL;
- } else if (e.target.selectedIndex === 1) {
- // Private: Discovery only
- vsDisc = util.RS_VS_DISC_FULL;
- vsDht = util.RS_VS_DHT_OFF;
- } else if (e.target.selectedIndex === 2) {
- // Inverted: DHT only
- vsDisc = util.RS_VS_DISC_OFF;
- vsDht = util.RS_VS_DHT_FULL;
- } else if (e.target.selectedIndex === 3) {
- // Dark Net: None
- vsDisc = util.RS_VS_DISC_OFF;
- vsDht = util.RS_VS_DHT_OFF;
+ const idx = e.target.selectedIndex;
+ selectedMode = modes[idx];
+ if (isHiddenMode) {
+ if (idx === 0) {
+ vsDisc = util.RS_VS_DISC_FULL;
+ vsDht = util.RS_VS_DHT_OFF;
+ } else if (idx === 1) {
+ vsDisc = util.RS_VS_DISC_OFF;
+ vsDht = util.RS_VS_DHT_OFF;
+ }
+ } else {
+ if (idx === 0) {
+ vsDisc = util.RS_VS_DISC_FULL;
+ vsDht = util.RS_VS_DHT_FULL;
+ } else if (idx === 1) {
+ vsDisc = util.RS_VS_DISC_FULL;
+ vsDht = util.RS_VS_DHT_OFF;
+ } else if (idx === 2) {
+ vsDisc = util.RS_VS_DISC_OFF;
+ vsDht = util.RS_VS_DHT_FULL;
+ } else if (idx === 3) {
+ vsDisc = util.RS_VS_DISC_OFF;
+ vsDht = util.RS_VS_DHT_OFF;
+ }
}
if (
details &&
@@ -92,59 +125,13 @@ const SetNwMode = () => {
}
},
},
- [networkModes.map((o) => m('option', { value: o }, o))]
+ [modes.map((o) => m('option', { value: o }, o))]
),
];
},
};
};
-const SetNAT = () => {
- let sslId;
- let netMode;
-
- return {
- oninit: () => {
- rs.rsJsonApiRequest('/rsAccounts/getCurrentAccountId').then((res) => {
- if (res.body.retval) {
- sslId = res.body.id;
- rs.rsJsonApiRequest('/rsPeers/getPeerDetails', {
- sslId,
- }).then((res) => {
- if (res.body.retval) {
- netMode = res.body.det.netMode;
- }
- });
- }
- });
- },
- view: () => [
- m('p', 'NAT:'),
- m(
- 'select',
- {
- value: netMode,
- onchange: (e) => {
- rs.rsJsonApiRequest('/rsPeers/setNetworkMode', {
- sslId,
- netMode,
- }).then((res) => {
- if (res.body.retval) {
- netMode = e.target.value;
- }
- });
- },
- },
- [
- m('option', { value: util.RS_NETMODE_UPNP }, 'Automatic (UPnP)'),
- m('option', { value: util.RS_NETMODE_UDP }, 'FireWalled'),
- m('option', { value: util.RS_NETMODE_EXT }, 'Manually Forwarded Port'),
- ]
- ),
- ],
- };
-};
-
const SetLimits = () => {
let dlim = undefined;
let ulim = undefined;
@@ -160,37 +147,41 @@ const SetLimits = () => {
ulim = data.outKb;
}),
view: () => [
- m(
- 'p',
- util.tooltip(
- 'The download limit covers the whole application. ' +
- 'However, in some situations, such as when transfering ' +
- 'many files at once, the estimated bandwidth becomes ' +
- 'unreliable and the total value reported by Retroshare ' +
- 'might exceed that limit.'
- ),
- 'Download limit(KB/s):'
- ),
- m('input[type=number][name=download]', {
- value: dlim,
- oninput: (e) => (dlim = Number(e.target.value)),
- onchange: setMaxRates,
- }),
- m(
- 'p',
- util.tooltip(
- 'The upload limit covers the entire software. ' +
- 'Too small an upload limit may eventually block ' +
- 'low priority services(forums, channels). ' +
- 'A minimum recommended value is 50KB/s.'
- ),
- 'Upload limit(KB/s):'
- ),
- m('input[type=number][name=upload]', {
- value: ulim,
- oninput: (e) => (ulim = Number(e.target.value)),
- onchange: setMaxRates,
- }),
+ m('.nw-config-row', { style: 'display: grid; grid-template-columns: 200px 1fr; gap: 1rem; align-items: center; margin-bottom: 0.75rem;' }, [
+ m('p', { style: 'font-weight: 600; color: #475569;' }, [
+ util.tooltip(
+ 'The download limit covers the whole application. ' +
+ 'However, in some situations, such as when transfering ' +
+ 'many files at once, the estimated bandwidth becomes ' +
+ 'unreliable and the total value reported by Retroshare ' +
+ 'might exceed that limit.'
+ ),
+ 'Download limit(KB/s):'
+ ]),
+ m('input[type=number][name=download]', {
+ style: 'padding: 0.4rem; border: 1px solid #cbd5e1; border-radius: 4px; max-width: 320px; width: 100%;',
+ value: dlim,
+ oninput: (e) => (dlim = Number(e.target.value)),
+ onchange: setMaxRates,
+ }),
+ ]),
+ m('.nw-config-row', { style: 'display: grid; grid-template-columns: 200px 1fr; gap: 1rem; align-items: center; margin-bottom: 0.75rem;' }, [
+ m('p', { style: 'font-weight: 600; color: #475569;' }, [
+ util.tooltip(
+ 'The upload limit covers the entire software. ' +
+ 'Too small an upload limit may eventually block ' +
+ 'low priority services(forums, channels). ' +
+ 'A minimum recommended value is 50KB/s.'
+ ),
+ 'Upload limit(KB/s):'
+ ]),
+ m('input[type=number][name=upload]', {
+ style: 'padding: 0.4rem; border: 1px solid #cbd5e1; border-radius: 4px; max-width: 320px; width: 100%;',
+ value: ulim,
+ oninput: (e) => (ulim = Number(e.target.value)),
+ onchange: setMaxRates,
+ }),
+ ]),
],
};
};
@@ -205,88 +196,292 @@ const SetOpMode = () => {
oninit: () =>
rs.rsJsonApiRequest('/rsConfig/getOperatingMode', {}, (data) => (opmode = data.retval)),
view: () => [
- m(
- 'p',
- 'Operating mode:',
- util.tooltip(
- `No Anon D/L: Switches off file forwarding\n
- Gaming Mode: 25% standard traffic and TODO: Reduced popups\n
- Low traffic: 10% standard traffic and TODO: pause all file transfers\n`
- )
- ),
- m(
- 'select',
- {
- oninput: (e) => (opmode = e.target.value),
- value: opmode,
- onchange: setmode,
- },
- ['Normal', 'No Anon D/L', 'Gaming', 'Low traffic'].map((val, i) =>
- m(`option[value=${i + 1}]`, val)
- )
- ),
+ m('.nw-config-row', { style: 'display: grid; grid-template-columns: 200px 1fr; gap: 1rem; align-items: center; margin-bottom: 0.75rem;' }, [
+ m('p', { style: 'font-weight: 600; color: #475569;' }, [
+ 'Operating mode: ',
+ util.tooltip(
+ `No Anon D/L: Switches off file forwarding\n
+ Gaming Mode: 25% standard traffic and TODO: Reduced popups\n
+ Low traffic: 10% standard traffic and TODO: pause all file transfers\n`
+ )
+ ]),
+ m(
+ 'select',
+ {
+ style: 'padding: 0.4rem; border: 1px solid #cbd5e1; border-radius: 4px; max-width: 320px; width: 100%;',
+ oninput: (e) => (opmode = e.target.value),
+ value: opmode,
+ onchange: setmode,
+ },
+ ['Normal', 'No Anon D/L', 'Gaming', 'Low traffic'].map((val, i) =>
+ m(`option[value=${i + 1}]`, val)
+ )
+ ),
+ ]),
],
};
};
-const displayLocalIPAddress = () => {
- return {
- view: ({ attrs: { details } }) =>
- details && [m('p', 'Local Address: '), m('p', details.localAddr)],
- };
-};
-const displayExternalIPAddress = () => {
- return {
- view: ({ attrs: { details } }) =>
- details && [m('p', 'External Address: '), m('p', details.extAddr)],
- };
-};
-
const displayIPAddresses = () => {
return {
view: ({ attrs: { details } }) =>
- details && [
- m('p', 'External Address: '),
+ details && m('.nw-config-row', { style: 'display: grid; grid-template-columns: 200px 1fr; gap: 1rem; align-items: flex-start; margin-bottom: 0.75rem;' }, [
+ m('p', { style: 'font-weight: 600; color: #475569;' }, 'External Address: '),
m(
'ul.external-address',
details.ipAddressList.map((ip) => m('li', ip))
),
- ],
+ ]),
};
};
-const SetDynamicDNS = () => {
- let addr = '';
+const NetworkConfigForm = () => {
let sslId = '';
+ let details = {};
+ let netStatus = {};
+ let localAddr = '';
+ let localPort = 0;
+ let extAddr = '';
+ let extPort = 0;
+ let dyndns = '';
+ let netMode = util.RS_NETMODE_EXT;
+
+ const loadData = () => {
+ rs.rsJsonApiRequest('/rsAccounts/getCurrentAccountId').then((res) => {
+ if (res.body.retval) {
+ sslId = res.body.id;
+ rs.rsJsonApiRequest('/rsPeers/getPeerDetails', { sslId }).then((pRes) => {
+ if (pRes.body.retval) {
+ details = pRes.body.det;
+ localAddr = details.localAddr || '';
+ localPort = details.localPort || 0;
+ extAddr = details.extAddr || '';
+ extPort = details.extPort || 0;
+ dyndns = details.dyndns || '';
+ netMode = details.netMode || util.RS_NETMODE_EXT;
+ m.redraw();
+ }
+ });
+ rs.rsJsonApiRequest('/rsConfig/getConfigNetStatus', {}).then((nRes) => {
+ if (nRes.body) {
+ netStatus = nRes.body;
+ if (netStatus.localPort) localPort = netStatus.localPort;
+ if (netStatus.extPort) extPort = netStatus.extPort;
+ m.redraw();
+ }
+ });
+ }
+ });
+ };
+
+ const saveLocalAddress = () => {
+ if (!sslId) return;
+ rs.rsJsonApiRequest('/rsPeers/setLocalAddress', {
+ sslId,
+ addr: localAddr,
+ port: parseInt(localPort) || 0,
+ }).then(() => loadData());
+ };
+
+ const saveExtAddress = () => {
+ if (!sslId) return;
+ rs.rsJsonApiRequest('/rsPeers/setExtAddress', {
+ sslId,
+ addr: extAddr,
+ port: parseInt(extPort) || 0,
+ }).then(() => loadData());
+ };
+
+ const saveDynDNS = () => {
+ if (!sslId) return;
+ rs.rsJsonApiRequest('/rsPeers/setDynDNS', {
+ sslId,
+ addr: dyndns,
+ });
+ };
+
+ const saveNetMode = (newMode) => {
+ if (!sslId) return;
+ netMode = newMode;
+ rs.rsJsonApiRequest('/rsPeers/setNetworkMode', {
+ sslId,
+ netMode: parseInt(newMode),
+ }).then(() => loadData());
+ };
+
return {
oninit: () => {
- rs.rsJsonApiRequest('/rsAccounts/getCurrentAccountId').then((res) => {
- if (res.body.retval) {
- sslId = res.body.id;
- rs.rsJsonApiRequest('/rsPeers/getPeerDetails', {
- sslId,
- }).then((res) => {
- if (res.body.retval) {
- addr = res.body.det.dyndns;
+ loadData();
+ },
+ view: ({ attrs: { isHiddenMode } }) => {
+ const isUpnpOk = Boolean(netStatus.netUpnpOk || netStatus.uPnPActive);
+ const isLocalOk = Boolean(netStatus.netLocalOk !== false);
+ const isExtOk = Boolean(netStatus.netExtAddressOk);
+
+ return m('.network-config-form', {
+ style: {
+ display: 'flex',
+ flexDirection: 'column',
+ gap: '0.75rem',
+ width: '100%',
+ }
+ }, [
+ // Network Mode row
+ m('.nw-config-row', { style: 'display: grid; grid-template-columns: 200px 1fr; gap: 1rem; align-items: center;' }, [
+ m('label', { style: 'font-weight: 600; color: #475569;' }, 'Network Mode'),
+ m('.nw-mode-group', { style: 'display: flex; align-items: center; gap: 1rem;' }, [
+ m(SetNwMode, { isHiddenMode, hideLabel: true }),
+ isHiddenMode && m('.status-indicator', { style: 'display: flex; align-items: center; gap: 0.4rem;' }, [
+ m('.bullet', {
+ style: 'width: 10px; height: 10px; border-radius: 50%; background-color: #22c55e;'
+ }),
+ m('span', { style: 'font-size: 0.85rem; font-weight: 700; color: #000000;' }, '[Hidden mode]'),
+ ]),
+ ]),
+ ]),
+
+ // NAT row + UPnP status bullet
+ !isHiddenMode && m('.nw-config-row', { style: 'display: grid; grid-template-columns: 200px 1fr; gap: 1rem; align-items: center;' }, [
+ m('label', { style: 'font-weight: 600; color: #475569;' }, 'NAT'),
+ m('.nat-control-group', { style: 'display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;' }, [
+ m('select', {
+ style: 'flex: 1; max-width: 320px; padding: 0.4rem; border: 1px solid #cbd5e1; border-radius: 4px;',
+ value: netMode,
+ onchange: (e) => saveNetMode(e.target.value),
+ }, [
+ m('option', { value: util.RS_NETMODE_UPNP }, 'Automatic (UPnP)'),
+ m('option', { value: util.RS_NETMODE_UDP }, 'FireWalled'),
+ m('option', { value: util.RS_NETMODE_EXT }, 'Manually Forwarded Port'),
+ ]),
+ m('.status-indicator', { style: 'display: flex; align-items: center; gap: 0.4rem;' }, [
+ m('.bullet', {
+ style: `width: 10px; height: 10px; border-radius: 50%; background-color: ${isUpnpOk ? '#22c55e' : '#475569'};`
+ }),
+ m('span', { style: 'font-size: 0.85rem; font-weight: 600; color: #334155;' }, 'UPnP'),
+ ]),
+ ]),
+ ]),
+
+ // Local Address + Port + Local network status bullet
+ m('.nw-config-row', { style: 'display: grid; grid-template-columns: 200px 1fr; gap: 1rem; align-items: center;' }, [
+ m('label', { style: 'font-weight: 600; color: #475569;' }, 'Local Address'),
+ m('.addr-control-group', { style: 'display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;' }, [
+ m('input[type=text]', {
+ style: 'flex: 1; max-width: 320px; padding: 0.4rem; border: 1px solid #cbd5e1; border-radius: 4px;',
+ value: localAddr,
+ oninput: (e) => (localAddr = e.target.value),
+ onchange: saveLocalAddress,
+ }),
+ m('.port-group', { style: 'display: flex; align-items: center; gap: 0.4rem;' }, [
+ m('span', { style: 'font-size: 0.85rem; font-weight: 600; color: #475569;' }, 'Port:'),
+ m('input[type=number]', {
+ style: 'width: 90px; padding: 0.4rem; border: 1px solid #cbd5e1; border-radius: 4px;',
+ value: localPort,
+ oninput: (e) => (localPort = parseInt(e.target.value) || 0),
+ onchange: saveLocalAddress,
+ }),
+ ]),
+ !isHiddenMode && m('.status-indicator', { style: 'display: flex; align-items: center; gap: 0.4rem; margin-left: 0.5rem;' }, [
+ m('.bullet', {
+ style: `width: 10px; height: 10px; border-radius: 50%; background-color: ${isLocalOk ? '#22c55e' : '#ef4444'};`
+ }),
+ m('span', { style: 'font-size: 0.85rem; font-weight: 600; color: #334155;' }, 'Local network'),
+ ]),
+ ]),
+ ]),
+
+ // External Address + Port + External ip address finder status bullet
+ m('.nw-config-row', { style: 'display: grid; grid-template-columns: 200px 1fr; gap: 1rem; align-items: center;' }, [
+ m('label', { style: 'font-weight: 600; color: #475569;' }, 'External Address'),
+ m('.addr-control-group', { style: 'display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;' }, [
+ m('input[type=text]', {
+ style: 'flex: 1; max-width: 320px; padding: 0.4rem; border: 1px solid #cbd5e1; border-radius: 4px;',
+ value: isHiddenMode ? 'Hidden' : extAddr,
+ disabled: isHiddenMode,
+ oninput: (e) => (extAddr = e.target.value),
+ onchange: saveExtAddress,
+ }),
+ !isHiddenMode && m('.port-group', { style: 'display: flex; align-items: center; gap: 0.4rem;' }, [
+ m('span', { style: 'font-size: 0.85rem; font-weight: 600; color: #475569;' }, 'Port:'),
+ m('input[type=number]', {
+ style: 'width: 90px; padding: 0.4rem; border: 1px solid #cbd5e1; border-radius: 4px;',
+ value: extPort,
+ oninput: (e) => (extPort = parseInt(e.target.value) || 0),
+ onchange: saveExtAddress,
+ }),
+ ]),
+ !isHiddenMode && m('.status-indicator', { style: 'display: flex; align-items: center; gap: 0.4rem; margin-left: 0.5rem;' }, [
+ m('.bullet', {
+ style: `width: 10px; height: 10px; border-radius: 50%; background-color: ${isExtOk ? '#22c55e' : '#808080'};`
+ }),
+ m('span', { style: 'font-size: 0.85rem; font-weight: 600; color: #334155;' }, 'External ip address finder'),
+ ]),
+ ]),
+ ]),
+
+ // Dynamic DNS row
+ !isHiddenMode && m('.nw-config-row', { style: 'display: grid; grid-template-columns: 200px 1fr; gap: 1rem; align-items: center;' }, [
+ m('label', { style: 'font-weight: 600; color: #475569;' }, 'Dynamic DNS'),
+ m('input[type=text]', {
+ style: 'flex: 1; max-width: 320px; padding: 0.4rem; border: 1px solid #cbd5e1; border-radius: 4px;',
+ value: dyndns,
+ oninput: (e) => (dyndns = e.target.value),
+ onchange: saveDynDNS,
+ }),
+ ]),
+ ]);
+ }
+ };
+};
+
+const checkPortReachable = (addr, port, timeoutMs = 800) => {
+ if (!addr || !port) return Promise.resolve(false);
+
+ return new Promise((resolve) => {
+ let resolved = false;
+ const start = Date.now();
+ const controller = new AbortController();
+
+ const timer = setTimeout(() => {
+ if (!resolved) {
+ resolved = true;
+ controller.abort();
+ // Timeout expired without server connection -> Port is closed / not enabled!
+ resolve(false);
+ }
+ }, timeoutMs);
+
+ fetch(`http://${addr}:${port}`, {
+ mode: 'no-cors',
+ signal: controller.signal,
+ cache: 'no-store',
+ })
+ .then(() => {
+ if (!resolved) {
+ resolved = true;
+ clearTimeout(timer);
+ resolve(true);
+ }
+ })
+ .catch((err) => {
+ if (!resolved) {
+ resolved = true;
+ clearTimeout(timer);
+ if (err && err.name === 'AbortError') {
+ resolve(true);
+ } else {
+ // Tor SOCKS port returns HTTP 501 ("Tor is not an HTTP Proxy").
+ // Connection refused fails in < 15ms. If Tor server responded (501 / > 20ms), port is OPEN!
+ const duration = Date.now() - start;
+ if (duration > 20 || (err && err.message && err.message.includes('501'))) {
+ resolve(true);
+ } else {
+ resolve(false);
}
- });
+ }
}
});
- },
- view: () => [
- m('p', 'Set Dynamic DNS:'),
- m('input[type=text]', {
- value: addr,
- oninput: (e) => (addr = e.target.value),
- onchange: () => {
- rs.rsJsonApiRequest('/rsPeers/setDynDNS', {
- sslId,
- addr,
- });
- },
- }),
- ],
- };
+ });
};
const SetSocksProxy = () => {
@@ -296,14 +491,16 @@ const SetSocksProxy = () => {
};
const fetchOutgoing = () => {
Object.keys(socksProxyObj).forEach((proxyItem) => {
- fetch(`http://${socksProxyObj[proxyItem].addr}:${socksProxyObj[proxyItem].port}`)
- .then(() => {
- socksProxyObj[proxyItem].outgoing = true;
+ const item = socksProxyObj[proxyItem];
+ if (item.retval && item.addr && item.port) {
+ checkPortReachable(item.addr, item.port).then((isReachable) => {
+ item.outgoing = isReachable;
m.redraw();
- })
- .catch(() => {
- socksProxyObj[proxyItem].outgoing = false;
});
+ } else {
+ item.outgoing = false;
+ m.redraw();
+ }
});
};
const handleProxyChange = (proxyItem) => {
@@ -311,7 +508,12 @@ const SetSocksProxy = () => {
type: util[`RS_HIDDEN_TYPE_${proxyItem.toUpperCase()}`],
addr: socksProxyObj[proxyItem].addr,
port: socksProxyObj[proxyItem].port,
- }).then(fetchOutgoing);
+ }).then((res) => {
+ if (res && res.body) {
+ socksProxyObj[proxyItem] = res.body;
+ }
+ fetchOutgoing();
+ });
};
return {
oninit: () => {
@@ -320,7 +522,7 @@ const SetSocksProxy = () => {
type: util[`RS_HIDDEN_TYPE_${proxyItem.toUpperCase()}`],
})
.then((res) => {
- if (res.body.retval) {
+ if (res && res.body) {
socksProxyObj[proxyItem] = res.body;
}
})
@@ -328,46 +530,98 @@ const SetSocksProxy = () => {
});
},
view: () =>
- m('.proxy-server', [
- m(
- 'p',
+ m('.proxy-server-form', { style: 'display: flex; flex-direction: column; gap: 0.75rem; width: 100%;' }, [
+ m('p.proxy-description', { style: 'margin-bottom: 0.5rem; color: #475569;' },
'Configure your TOR and I2P SOCKS proxy here. It will allow you to also connect to hidden nodes.'
),
Object.keys(socksProxyObj).map((proxyItem) => {
- return m(`.proxy-server__${proxyItem}`, [
- m('h6', `${proxyItem.toUpperCase()} Socks Proxy: `),
- m('input[type=text]', {
- value: socksProxyObj[proxyItem].addr,
- oninput: (e) => (socksProxyObj[proxyItem].addr = e.target.value),
- onchange: () => handleProxyChange(proxyItem),
- }),
- m('input[type=number]', {
- value: socksProxyObj[proxyItem].port,
- oninput: (e) => (socksProxyObj[proxyItem].port = parseInt(e.target.value)),
- onchange: () => handleProxyChange(proxyItem),
- }),
- socksProxyObj[proxyItem].outgoing !== undefined &&
- m('.proxy-outgoing', [
- m('.proxy-outgoing__status', {
- style: {
- backgroundColor: socksProxyObj[proxyItem].outgoing ? '#00dd44' : '#808080',
- },
- }),
- m(
- 'p',
- `${proxyItem.toUpperCase()} outgoing ${
- socksProxyObj[proxyItem].outgoing ? 'on' : 'off'
- }`
- ),
- ]),
+ const isTor = proxyItem === 'tor';
+ const labelText = isTor ? 'TOR Socks Proxy:' : 'I2P Socks Proxy:';
+ const outgoingText = isTor ? 'TOR outgoing' : 'I2P outgoing';
+ const notEnabledText = isTor ? 'Tor proxy is not enabled' : 'I2P proxy is not enabled';
+ const isOutgoing = socksProxyObj[proxyItem].outgoing;
+
+ return m('.nw-config-row', { style: 'display: grid; grid-template-columns: 200px 1fr; gap: 1rem; align-items: center;' }, [
+ m('label', { style: 'font-weight: 600; color: #475569;' }, labelText),
+ m('.proxy-control-group', { style: 'display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;' }, [
+ m('input[type=text]', {
+ style: 'flex: 1; max-width: 480px; min-width: 320px; padding: 0.4rem; border: 1px solid #cbd5e1; border-radius: 4px;',
+ value: socksProxyObj[proxyItem].addr || '',
+ oninput: (e) => (socksProxyObj[proxyItem].addr = e.target.value),
+ onchange: () => handleProxyChange(proxyItem),
+ }),
+ m('input[type=number]', {
+ style: 'width: 90px; padding: 0.4rem; border: 1px solid #cbd5e1; border-radius: 4px;',
+ value: socksProxyObj[proxyItem].port || 0,
+ oninput: (e) => (socksProxyObj[proxyItem].port = parseInt(e.target.value) || 0),
+ onchange: () => handleProxyChange(proxyItem),
+ }),
+ socksProxyObj[proxyItem].outgoing !== undefined &&
+ m('.status-indicator', { style: 'display: flex; align-items: center; gap: 0.4rem; margin-left: 0.5rem;' }, [
+ m('.bullet', {
+ style: `width: 10px; height: 10px; border-radius: 50%; background-color: ${isOutgoing ? '#22c55e' : '#808080'};`,
+ title: isOutgoing ? 'Proxy seems to work.' : notEnabledText,
+ }),
+ m('span', { style: 'font-size: 0.85rem; font-weight: 600; color: #334155;' },
+ `${outgoingText} ${isOutgoing ? 'on' : 'off'}`
+ ),
+ ]),
+ ]),
]);
}),
]),
};
};
+const displayHiddenServiceInfo = () => {
+ return {
+ view: ({ attrs: { details } }) =>
+ details && details.hiddenNodeAddress &&
+ m('.hidden-service-info', { style: 'display: flex; flex-direction: column; gap: 0.75rem; width: 100%;' }, [
+ m('p.proxy-description', { style: 'margin-bottom: 0.5rem; color: #475569;' }, details.hiddenType === 4
+ ? "I2P has been automatically configured by Retroshare. You shouldn't need to change anything here."
+ : "Tor has been automatically configured by Retroshare. You shouldn't need to change anything here."
+ ),
+ // Local Address + Local Port row
+ m('.nw-config-row', { style: 'display: grid; grid-template-columns: 200px 1fr; gap: 1rem; align-items: center;' }, [
+ m('label', { style: 'font-weight: 600; color: #475569;' }, 'Local Address:'),
+ m('.addr-port-group', { style: 'display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;' }, [
+ m('input[type=text]', {
+ style: 'flex: 1; max-width: 480px; min-width: 320px; padding: 0.4rem; border: 1px solid #cbd5e1; border-radius: 4px; background-color: #f8fafc; color: #334155;',
+ readOnly: true,
+ value: details.localAddr || '127.0.0.1',
+ }),
+ m('input[type=number]', {
+ style: 'width: 90px; padding: 0.4rem; border: 1px solid #cbd5e1; border-radius: 4px; background-color: #f8fafc; color: #334155;',
+ readOnly: true,
+ value: details.localPort || 0,
+ }),
+ ]),
+ ]),
+ // Onion / I2P Address + Service Port row
+ m('.nw-config-row', { style: 'display: grid; grid-template-columns: 200px 1fr; gap: 1rem; align-items: center;' }, [
+ m('label', { style: 'font-weight: 600; color: #475569;' }, details.hiddenType === 4 ? 'I2P Address:' : 'Onion Address:'),
+ m('.addr-port-group', { style: 'display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;' }, [
+ m('input[type=text]', {
+ style: 'flex: 1; max-width: 480px; min-width: 320px; padding: 0.4rem; border: 1px solid #cbd5e1; border-radius: 4px; background-color: #f8fafc; color: #334155; font-family: monospace;',
+ readOnly: true,
+ value: details.hiddenNodeAddress,
+ }),
+ details.hiddenNodePort && m('input[type=number]', {
+ style: 'width: 90px; padding: 0.4rem; border: 1px solid #cbd5e1; border-radius: 4px; background-color: #f8fafc; color: #334155;',
+ readOnly: true,
+ value: details.hiddenNodePort,
+ }),
+ ]),
+ ]),
+ ]),
+ };
+};
+
const Component = () => {
let details;
+ let isHiddenMode = false;
+
return {
oninit: () => {
rs.rsJsonApiRequest('/rsAccounts/getCurrentAccountId').then((res) => {
@@ -377,28 +631,44 @@ const Component = () => {
}).then((res) => {
if (res.body.retval) {
details = res.body.det;
+ isHiddenMode = Boolean(
+ details && (
+ details.hiddenType === util.RS_HIDDEN_TYPE_TOR ||
+ details.hiddenType === util.RS_HIDDEN_TYPE_I2P ||
+ details.extAddr === 'Hidden'
+ )
+ );
+ m.redraw();
}
});
}
});
},
view: () =>
- m('.widget', [
- m('.widget__heading', m('h3', 'Network Configuration')),
- m('.widget__body', [
- m('.grid-2col', [
- m(SetNwMode),
- m(SetNAT),
- m(displayLocalIPAddress, { details }),
- m(displayExternalIPAddress, { details }),
- m(SetDynamicDNS),
+ m('.config-network', { style: 'display:flex; flex-direction:column; gap:1rem;' }, [
+ m('.widget', [
+ m('.widget__heading', m('h3', 'Network Configuration')),
+ m('.widget__body', [
+ m(NetworkConfigForm, { isHiddenMode }),
+ m('hr', { style: 'margin: 1rem 0; border: none; border-top: 1px solid #e2e8f0;' }),
m(SetLimits),
- m(SetOpMode),
- m(displayIPAddresses, { details }),
+ !isHiddenMode && m(SetOpMode),
+ !isHiddenMode && m(displayIPAddresses, { details }),
]),
- m('.widget__heading', m('h3', 'Hidden Service Configuration')),
- m('.widget__body', [m('.grid-2col', [m(SetSocksProxy)])]),
]),
+ m('.widget', [
+ m('.widget__heading', m('h3', 'Hidden Service Configuration')),
+ m('.widget__body', [
+ m(SetSocksProxy),
+ ]),
+ ]),
+ isHiddenMode &&
+ m('.widget', [
+ m('.widget__heading', m('h3', details && details.hiddenType === 4 ? 'Incoming I2P' : 'Incoming Tor')),
+ m('.widget__body', [
+ m(displayHiddenServiceInfo, { details }),
+ ]),
+ ]),
]),
};
};
diff --git a/webui-src/app/config/config_people.js b/webui-src/app/config/config_people.js
index 979c717..e3c7944 100644
--- a/webui-src/app/config/config_people.js
+++ b/webui-src/app/config/config_people.js
@@ -5,6 +5,7 @@ const Reputation = () => {
let addFriendIdAsContacts = undefined;
let usePositiveDefault = undefined;
let deleteBannedAfter = undefined;
+ let rememberBannedAfter = undefined;
let negativeThreshold = undefined;
let positiveThreshold = undefined;
@@ -25,6 +26,11 @@ const Reputation = () => {
{},
(data) => (deleteBannedAfter = data.retval)
);
+ rs.rsJsonApiRequest(
+ '/rsreputations/rememberBannedIdThreshold',
+ {},
+ (data) => (rememberBannedAfter = data.retval)
+ );
rs.rsJsonApiRequest(
'/rsreputations/thresholdForRemotelyPositiveReputation',
{},
@@ -95,7 +101,7 @@ const Reputation = () => {
() => {}
),
}),
- m('p', 'Delete banned identities after(in days, 0 means indefinitely):'),
+ m('p', 'Delete banned identities after(0 means never):'),
m('input[type=number]', {
oninput: (e) => (deleteBannedAfter = parseInt(e.target.value)),
value: deleteBannedAfter,
@@ -108,6 +114,19 @@ const Reputation = () => {
() => {}
),
}),
+ m('p', 'Reset reputation of banned identities after (0 means never):'),
+ m('input[type=number]', {
+ oninput: (e) => (rememberBannedAfter = parseInt(e.target.value)),
+ value: rememberBannedAfter,
+ onchange: () =>
+ rs.rsJsonApiRequest(
+ '/rsreputations/setRememberBannedIdThreshold',
+ {
+ days: rememberBannedAfter,
+ },
+ () => {}
+ ),
+ }),
]),
]),
]),
diff --git a/webui-src/app/config/config_resolver.js b/webui-src/app/config/config_resolver.js
index fe21627..dd9f82e 100644
--- a/webui-src/app/config/config_resolver.js
+++ b/webui-src/app/config/config_resolver.js
@@ -7,6 +7,7 @@ const sections = {
services: require('config/config_services'),
files: require('config/config_files'),
people: require('config/config_people'),
+ chat: require('config/config_chat'),
mail: require('config/config_mail'),
};
diff --git a/webui-src/app/home.js b/webui-src/app/home.js
index bb9e932..461aaff 100644
--- a/webui-src/app/home.js
+++ b/webui-src/app/home.js
@@ -72,6 +72,11 @@ const ConfirmCopied = () => {
};
const retroshareId = () => {
+ function autoResize(el) {
+ if (!el) return;
+ el.style.height = 'auto';
+ el.style.height = el.scrollHeight + 'px';
+ }
return {
view(v) {
return m('.retroshareID', [
@@ -83,6 +88,8 @@ const retroshareId = () => {
onclick: () => {
document.getElementById('retroId').select();
},
+ oncreate: (vnode) => autoResize(vnode.dom),
+ onupdate: (vnode) => autoResize(vnode.dom),
},
v.attrs.ownCert
),
diff --git a/webui-src/app/jdenticon.js b/webui-src/app/jdenticon.js
new file mode 100644
index 0000000..b8b21eb
--- /dev/null
+++ b/webui-src/app/jdenticon.js
@@ -0,0 +1,102 @@
+const CORNER_SPRITES = {
+ 0: [[0.5, 1.0], [1.0, 0.0], [1.0, 1.0]],
+ 1: [[0.5, 0.0], [1.0, 0.0], [0.5, 1.0], [0.0, 1.0]],
+ 2: [[0.5, 0], [1, 0], [1, 1], [0.5, 1], [1, 0.5]],
+ 3: [[0, 0.5], [0.5, 0], [1, 0.5], [0.5, 1], [0.5, 0.5]],
+ 4: [[0, 0.5], [1, 0], [1, 1], [0, 1], [1, 0.5]],
+ 5: [[1, 0], [1, 1], [0.5, 1], [1, 0.5], [0.5, 0.5]],
+ 6: [[0, 0], [1, 0], [1, 0.5], [0, 0], [0.5, 1], [0, 1]],
+ 7: [[0, 0], [0.5, 0], [1, 0.5], [0.5, 1], [0, 1], [0.5, 0.5]],
+ 8: [[0.5, 0], [0.5, 0.5], [1, 0.5], [1, 1], [0.5, 1], [0.5, 0.5], [0, 0.5]],
+ 9: [[0, 0], [1, 0], [0.5, 0.5], [1, 0.5], [0.5, 1], [0.5, 0.5], [0, 1]],
+ 10: [[0, 0.5], [0.5, 1], [1, 0.5], [0.5, 0], [1, 0], [1, 1], [0, 1]],
+ 11: [[0.5, 0], [1, 0], [1, 1], [0.5, 1], [1, 0.75], [0.5, 0.5], [1, 0.25]],
+ 12: [[0, 0.5], [0.5, 0], [0.5, 0.5], [1, 0], [1, 0.5], [0.5, 1], [0.5, 0.5], [0, 1]],
+ 13: [[0, 0], [1, 0], [1, 1], [0, 1], [1, 0.5], [0.5, 0.25], [0.5, 0.75], [0, 0.5], [0.5, 0.25]],
+ 14: [[0, 0.5], [0.5, 0.5], [0.5, 0], [1, 0], [0.5, 0.5], [1, 0.5], [0.5, 1], [0.5, 0.5], [0, 1]],
+ 15: [[0, 0], [1, 0], [0.5, 0.5], [0.5, 0], [0, 0.5], [1, 0.5], [0.5, 1], [0.5, 0.5], [0, 1]]
+};
+
+const CENTER_SPRITES = {
+ 0: [],
+ 1: [[0, 0], [1, 0], [1, 1], [0, 1]],
+ 2: [[0.5, 0], [1, 0.5], [0.5, 1], [0, 0.5]],
+ 3: [[0, 0], [1, 0], [1, 1], [0, 1], [0, 0.5], [0.5, 1], [1, 0.5], [0.5, 0], [0, 0.5]],
+ 4: [[0.25, 0], [0.75, 0], [0.5, 0.5], [1, 0.25], [1, 0.75], [0.5, 0.5], [0.75, 1], [0.25, 1], [0.5, 0.5], [0, 0.75], [0, 0.25], [0.5, 0.5]],
+ 5: [[0, 0], [0.5, 0.25], [1, 0], [0.75, 0.5], [1, 1], [0.5, 0.75], [0, 1], [0.25, 0.5]],
+ 6: [[0.33, 0.33], [0.67, 0.33], [0.67, 0.67], [0.33, 0.67]],
+ 7: [[0, 0], [0.33, 0], [0.33, 0.33], [0.66, 0.33], [0.67, 0], [1, 0], [1, 0.33], [0.67, 0.33], [0.67, 0.67], [1, 0.67], [1, 1], [0.67, 1], [0.67, 0.67], [0.33, 0.67], [0.33, 1], [0, 1], [0, 0.67], [0.33, 0.67], [0.33, 0.33], [0, 0.33]]
+};
+
+function getSpritePoints(shapePoints, size) {
+ return shapePoints.map(([rx, ry]) => `${(rx - 0.5) * size},${(ry - 0.5) * size}`).join(' ');
+}
+
+function renderPolygon(shapePoints, x, y, angle, shapeAngle, size, color) {
+ if (!shapePoints || shapePoints.length === 0) return '';
+ const halfSize = size / 2;
+ const pointsStr = getSpritePoints(shapePoints, size);
+ return ``;
+}
+
+function toSvg(hash, width) {
+ if (!hash || hash.length < 18) {
+ hash = "00000000000000000000000000000000";
+ }
+
+ const csh = parseInt(hash.substr(0, 1), 16);
+ const ssh = parseInt(hash.substr(1, 1), 16);
+ const xsh = parseInt(hash.substr(2, 1), 16) & 7;
+
+ // We rotate shape by default (rotate = true)
+ const cro = 90 * (parseInt(hash.substr(3, 1), 16) & 3);
+ const sro = 90 * (parseInt(hash.substr(4, 1), 16) & 3);
+ const xbg = parseInt(hash.substr(5, 1), 16) % 2;
+
+ const cfr = parseInt(hash.substr(6, 2), 16);
+ const cfg = parseInt(hash.substr(8, 2), 16);
+ const cfb = parseInt(hash.substr(10, 2), 16);
+
+ const sfr = parseInt(hash.substr(12, 2), 16);
+ const sfg = parseInt(hash.substr(14, 2), 16);
+ const sfb = parseInt(hash.substr(16, 2), 16);
+
+ const fillCorner = `rgb(${cfr}, ${cfg}, ${cfb})`;
+ const fillSide = `rgb(${sfr}, ${sfg}, ${sfb})`;
+
+ let fillCenter;
+ if (xbg > 0 && (Math.abs(cfr - sfr) > 127 || Math.abs(cfg - sfg) > 127 || Math.abs(cfb - sfb) > 127)) {
+ fillCenter = fillSide;
+ } else {
+ fillCenter = fillCorner;
+ }
+
+ const size = width / 3;
+ const totalsize = width;
+
+ let svgContent = ``;
+
+ // Draw corners
+ const cornerPoints = CORNER_SPRITES[csh] || CORNER_SPRITES[15];
+ svgContent += renderPolygon(cornerPoints, 0, 0, 0, cro, size, fillCorner);
+ svgContent += renderPolygon(cornerPoints, totalsize, 0, 90, cro, size, fillCorner);
+ svgContent += renderPolygon(cornerPoints, totalsize, totalsize, 180, cro, size, fillCorner);
+ svgContent += renderPolygon(cornerPoints, 0, totalsize, 270, cro, size, fillCorner);
+
+ // Draw sides
+ const sidePoints = CORNER_SPRITES[ssh] || CORNER_SPRITES[15];
+ svgContent += renderPolygon(sidePoints, 0, size, 0, sro, size, fillSide);
+ svgContent += renderPolygon(sidePoints, 2 * size, 0, 90, sro, size, fillSide);
+ svgContent += renderPolygon(sidePoints, 3 * size, 2 * size, 180, sro, size, fillSide);
+ svgContent += renderPolygon(sidePoints, size, 3 * size, 270, sro, size, fillSide);
+
+ // Draw center
+ const centerPoints = CENTER_SPRITES[xsh] !== undefined ? CENTER_SPRITES[xsh] : CORNER_SPRITES[15];
+ svgContent += renderPolygon(centerPoints, size, size, 0, 0, size, fillCenter);
+
+ return ``;
+}
+
+module.exports = {
+ toSvg
+};
\ No newline at end of file
diff --git a/webui-src/app/mail/mail_attachment.js b/webui-src/app/mail/mail_attachment.js
index 042d9e6..89ecbe8 100644
--- a/webui-src/app/mail/mail_attachment.js
+++ b/webui-src/app/mail/mail_attachment.js
@@ -52,6 +52,7 @@ const Layout = () => {
'tbody',
v.attrs.list.map((msg) =>
m(util.MessageSummary, {
+ key: msg.msgId,
details: msg,
category: 'attachment',
})
diff --git a/webui-src/app/mail/mail_compose.js b/webui-src/app/mail/mail_compose.js
index faff4f9..230d376 100644
--- a/webui-src/app/mail/mail_compose.js
+++ b/webui-src/app/mail/mail_compose.js
@@ -2,13 +2,34 @@ const m = require('mithril');
const rs = require('rswebui');
const widget = require('widgets');
const peopleUtil = require('people/people_util');
+const chatEmoji = require('chat/chat_emoji');
+
+const UserAvatarsCache = {};
+const MAX_RECIPIENTS = 20;
+
+function formatFileSize(bytes) {
+ if (!bytes) return '0 B';
+ const k = 1024;
+ const sizes = ['B', 'KB', 'MB', 'GB'];
+ const i = Math.floor(Math.log(bytes) / Math.log(k));
+ return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];
+}
const Layout = () => {
+ let showCc = false;
+ let showBcc = false;
+ let ownAvatars = {};
+ let attachments = [];
+ let showEmojiPicker = false;
+ let emojiSearch = '';
+ let emojiCategory = 'Smileys';
+
const Data = {
allUsers: [],
ownId: [],
subject: '',
identity: null,
+ bodyHtml: '',
recipients: {
to: {
inputVal: '',
@@ -27,40 +48,203 @@ const Layout = () => {
},
},
};
- async function loadMailUserDetails(msgType, senderId, recipientList) {
- Data.allUsers = await peopleUtil.sortUsers(rs.userList.users);
- if (msgType === 'reply') {
- Data.allUsers.forEach(async (user) => {
- if (user.mGroupId === (await senderId)) Data.recipients.to.sendList.push(user);
- });
- }
- await peopleUtil.ownIds(async (data) => {
- Data.ownId = await data;
- for (let i = 0; i < Data.ownId.length; i++) {
- if (Number(Data.ownId[i]) === 0) {
- Data.ownId.splice(i, 1); // workaround for id '0'
+
+ function insertContentIntoMailBody(content) {
+ const mailBody = document.querySelector('#composerMailBody');
+ if (!mailBody) return;
+ mailBody.focus();
+ const sel = window.getSelection();
+ if (sel && sel.rangeCount > 0) {
+ const range = sel.getRangeAt(0);
+ if (mailBody.contains(range.commonAncestorContainer)) {
+ range.deleteContents();
+ if (typeof content === 'string') {
+ const temp = document.createElement('div');
+ temp.innerHTML = content;
+ const frag = document.createDocumentFragment();
+ let node, lastNode;
+ while ((node = temp.firstChild)) {
+ lastNode = frag.appendChild(node);
+ }
+ range.insertNode(frag);
+ if (lastNode) {
+ range.setStartAfter(lastNode);
+ range.collapse(true);
+ sel.removeAllRanges();
+ sel.addRange(range);
+ }
+ } else if (content instanceof Node) {
+ range.insertNode(content);
+ range.setStartAfter(content);
+ range.collapse(true);
+ sel.removeAllRanges();
+ sel.addRange(range);
}
+ return;
}
- if (msgType === 'reply') {
- Data.identity = Data.ownId.filter((id) =>
- Object.prototype.hasOwnProperty.call(recipientList, id)
- )[0];
+ }
+ if (typeof content === 'string') {
+ mailBody.innerHTML += content;
+ } else if (content instanceof Node) {
+ mailBody.appendChild(content);
+ }
+ }
+
+ function insertEmoji(emoji) {
+ insertContentIntoMailBody(document.createTextNode(emoji));
+ }
+ async function loadMailUserDetails(msgType, senderId, recipientList, isDirectMail, ccList) {
+ Data.allUsers = await peopleUtil.sortUsers(rs.userList.users);
+
+ // Wrap ownIds in a Promise
+ const gxsIds = await new Promise((resolve) => {
+ peopleUtil.ownIds((ids) => {
+ resolve(ids || []);
+ });
+ });
+
+ Data.ownId = gxsIds.filter((id) => id && id !== '0000000000000000' && Number(id) !== 0);
+
+ Data.ownId.forEach((id) => {
+ if (!ownAvatars[id]) {
+ rs.rsJsonApiRequest(
+ '/rsIdentity/getIdDetails',
+ { id },
+ (data) => {
+ if (data?.details) {
+ ownAvatars[id] = data.details.mAvatar;
+ }
+ }
+ );
}
});
+
+ // Fetch own Node GPG ID
+ const netStatus = await new Promise((resolve) => {
+ rs.rsJsonApiRequest('/rsConfig/getConfigNetStatus', {}, (res) => {
+ resolve(res || null);
+ });
+ });
+
+ if (netStatus && netStatus.status) {
+ const ownNodeId = netStatus.status.ownId;
+ if (ownNodeId && !Data.ownId.includes(ownNodeId)) {
+ rs.userList.userMap[ownNodeId] = {
+ name: (netStatus.status.ownName || 'Node') + ' (Node GPG Key)',
+ isContact: false,
+ };
+ Data.ownId.push(ownNodeId);
+ }
+ if (msgType === 'compose' && isDirectMail) {
+ Data.identity = ownNodeId;
+ }
+ }
+
+ const resolvedSenderId = await senderId;
+
+ if (msgType === 'reply' || msgType === 'replyAll') {
+ Data.allUsers.forEach((user) => {
+ if (user.mGroupId === resolvedSenderId) {
+ Data.recipients.to.sendList.push(user);
+ if (!UserAvatarsCache[resolvedSenderId]) {
+ rs.rsJsonApiRequest(
+ '/rsIdentity/getIdDetails',
+ { id: resolvedSenderId },
+ (data) => {
+ if (data?.details) {
+ UserAvatarsCache[resolvedSenderId] = data.details.mAvatar;
+ }
+ }
+ );
+ }
+ }
+ });
+ }
+
+ if (msgType === 'replyAll') {
+ // Add other "To" recipients
+ if (recipientList) {
+ Object.keys(recipientList).forEach((recip) => {
+ if (recip !== resolvedSenderId && !Data.ownId.includes(recip)) {
+ const user = Data.allUsers.find((u) => u.mGroupId === recip);
+ if (user && !Data.recipients.to.sendList.some((item) => item.mGroupId === recip)) {
+ Data.recipients.to.sendList.push(user);
+ if (!UserAvatarsCache[recip]) {
+ rs.rsJsonApiRequest(
+ '/rsIdentity/getIdDetails',
+ { id: recip },
+ (data) => {
+ if (data?.details) {
+ UserAvatarsCache[recip] = data.details.mAvatar;
+ }
+ }
+ );
+ }
+ }
+ }
+ });
+ }
+ // Add other "Cc" recipients
+ if (ccList) {
+ Object.keys(ccList).forEach((recip) => {
+ if (recip !== resolvedSenderId && !Data.ownId.includes(recip)) {
+ const user = Data.allUsers.find((u) => u.mGroupId === recip);
+ if (user && !Data.recipients.cc.sendList.some((item) => item.mGroupId === recip)) {
+ Data.recipients.cc.sendList.push(user);
+ if (!UserAvatarsCache[recip]) {
+ rs.rsJsonApiRequest(
+ '/rsIdentity/getIdDetails',
+ { id: recip },
+ (data) => {
+ if (data?.details) {
+ UserAvatarsCache[recip] = data.details.mAvatar;
+ }
+ }
+ );
+ }
+ }
+ }
+ });
+ }
+ }
+
+ if (msgType === 'reply' || msgType === 'replyAll' || msgType === 'forward') {
+ Data.identity = Data.ownId.filter((id) =>
+ Object.prototype.hasOwnProperty.call(recipientList, id)
+ )[0];
+ }
}
async function loadDetails(attrs) {
- const { msgType, senderId, recipientList } = await attrs;
- await loadMailUserDetails(msgType, senderId, recipientList);
+ const { msgType, senderId, recipientList, ccList, isDirectMail } = await attrs;
+ await loadMailUserDetails(msgType, senderId, recipientList, isDirectMail, ccList);
Object.keys(Data.recipients).forEach((item) => {
Data.recipients[item].inputList = Data.allUsers;
});
+ if (Data.recipients.cc.sendList.length > 0) showCc = true;
+ if (Data.recipients.bcc.sendList.length > 0) showBcc = true;
+
if (msgType === 'compose') {
- Data.identity = Data.ownId[0];
+ if (!isDirectMail) {
+ Data.identity = Data.ownId[0];
+ }
+ if (attrs.toId) {
+ const matchingUser = Data.allUsers.find((user) => user.mGroupId === attrs.toId);
+ if (matchingUser) {
+ Data.recipients.to.sendList.push(matchingUser);
+ } else {
+ // If toId is a GPG ID (not in GXS list), add it manually as a GPG recipient
+ const friendName = attrs.friendName || 'Unknown Friend';
+ Data.recipients.to.sendList.push({
+ mGroupId: attrs.toId,
+ mGroupName: friendName + ' (Node GPG Key)',
+ });
+ }
+ }
}
- if (msgType === 'reply') {
+ if (msgType === 'reply' || msgType === 'replyAll' || msgType === 'forward') {
const { subject, replyMessage, timeStamp } = await attrs;
const tmb = document.querySelector('#composerMailBody');
const time = timeStamp.toLocaleTimeString('UTC', { hour: '2-digit', minute: '2-digit' });
@@ -69,20 +253,21 @@ const Layout = () => {
month: 'long',
day: 'numeric',
});
+ const headerTitle = msgType === 'forward' ? 'Forwarded Message' : 'Original Message';
const replyMessageHeader = `
- -----Original Message-----
+ -----${headerTitle}-----
From:
- ${rs.userList.userMap[senderId]}
+ ${rs.userList.username(senderId)}
To:
- ${Object.keys(recipientList).map(
+ ${recipientList ? Object.keys(recipientList).map(
(recip) => `
- ${rs.userList.userMap[recipientList[recip]._addr_string] || 'Unknown'},
+ ${rs.userList.username(recipientList[recip]._addr_string) || 'Unknown'},
`
- )}
+ ).join('') : ''}
Sent:
@@ -92,13 +277,15 @@ const Layout = () => {
${subject}
+ ${msgType !== 'forward' ? `
On ${timeStamp.toLocaleDateString()} ${time},
- ${rs.userList.userMap[senderId]}
+ ${rs.userList.username(senderId)}
wrote:
+ ` : ''}
`;
- tmb.innerHTML = `
+ const bodyHtml = `
@@ -108,7 +295,15 @@ const Layout = () => {
`;
- Data.subject = subject.substring(0, 4) === 'Re: ' ? subject : `Re: ${subject}`;
+ if (tmb) {
+ tmb.innerHTML = bodyHtml;
+ }
+ Data.bodyHtml = bodyHtml;
+ if (msgType === 'forward') {
+ Data.subject = subject.substring(0, 5) === 'Fwd: ' ? subject : `Fwd: ${subject}`;
+ } else {
+ Data.subject = subject.substring(0, 4) === 'Re: ' ? subject : `Re: ${subject}`;
+ }
}
}
return {
@@ -121,8 +316,25 @@ const Layout = () => {
item.mGroupName.toLowerCase().includes(e.target.value.toLowerCase())
);
}
+ function totalRecipients() {
+ return Data.recipients.to.sendList.length +
+ Data.recipients.cc.sendList.length +
+ Data.recipients.bcc.sendList.length;
+ }
function handleClick(item, recipientType) {
+ if (totalRecipients() >= MAX_RECIPIENTS) return;
Data.recipients[recipientType].sendList.push(item);
+ if (item.mGroupId && !UserAvatarsCache[item.mGroupId]) {
+ rs.rsJsonApiRequest(
+ '/rsIdentity/getIdDetails',
+ { id: item.mGroupId },
+ (data) => {
+ if (data?.details) {
+ UserAvatarsCache[item.mGroupId] = data.details.mAvatar;
+ }
+ }
+ );
+ }
// reset current input values after a sender is selected
Data.recipients[recipientType].inputVal = '';
Data.recipients[recipientType].inputList = Data.allUsers;
@@ -133,37 +345,103 @@ const Layout = () => {
);
}
function sendMail() {
+ // Auto-add inputVal if user typed recipient but didn't click dropdown item
+ ['to', 'cc', 'bcc'].forEach((type) => {
+ const val = Data.recipients[type].inputVal ? Data.recipients[type].inputVal.trim() : '';
+ if (val) {
+ const match = Data.allUsers.find((u) => u.mGroupName && (u.mGroupName.toLowerCase() === val.toLowerCase() || u.mGroupId === val));
+ if (match && !Data.recipients[type].sendList.some((item) => item.mGroupId === match.mGroupId)) {
+ Data.recipients[type].sendList.push(match);
+ } else if (!match && val.length > 5) {
+ Data.recipients[type].sendList.push({ mGroupId: val, mGroupName: val });
+ }
+ Data.recipients[type].inputVal = '';
+ }
+ });
+
const to = Data.recipients.to.sendList.map((toItem) => toItem.mGroupId);
const cc = Data.recipients.cc.sendList.map((ccItem) => ccItem.mGroupId);
const bcc = Data.recipients.bcc.sendList.map((bccItem) => bccItem.mGroupId);
- const { identity: from, subject } = Data;
+
+ let from = Data.identity;
+ if (!from && Data.ownId && Data.ownId.length > 0) {
+ from = Data.ownId[0];
+ Data.identity = from;
+ }
+
+ if (to.length === 0) {
+ widget.popupMessage(
+ m('.widget', [
+ m('.widget__heading', m('h3', 'Missing Recipient')),
+ m('.widget__body', m('p', 'Please select at least one recipient in the "To" field.')),
+ ])
+ );
+ return;
+ }
+
+ if (!from) {
+ widget.popupMessage(
+ m('.widget', [
+ m('.widget__heading', m('h3', 'Missing Identity')),
+ m('.widget__body', m('p', 'Please select a "From" identity.')),
+ ])
+ );
+ return;
+ }
+
+ const subject = Data.subject || '(No Subject)';
const mailBodyElement = document.querySelector('#composerMailBody');
- const mailBody = `${mailBodyElement.innerHTML}
`;
- rs.rsJsonApiRequest('/rsMail/sendMail', { from, subject, mailBody, to, cc, bcc }).then(
- (res) => {
- if (res.body.retval) {
- Object.keys(Data.recipients).forEach((recipientType) => {
- Data.recipients[recipientType].sendList = [];
- });
- Data.subject = '';
- mailBodyElement.innerHTML = '';
- v.attrs.setShowCompose(false);
- }
- const success = res.body.retval === 1;
- widget.popupMessage(
- m('.widget', [
- m('.widget__heading', m('h3', success ? 'Success' : 'Error')),
- m('.widget__body', m('p', success ? 'Mail sent successfully' : res.body.errorMsg)),
- ])
- );
+ let fullMailBody = mailBodyElement ? mailBodyElement.innerHTML : '';
+
+ if (attachments.length > 0) {
+ const attHtml = `
+
Attachments (${attachments.length}):
+
+ ${attachments.map(att => `- 📎 ${att.name} (${att.size})
`).join('')}
+
+ `;
+ fullMailBody += attHtml;
+ }
+
+ const mailBody = `${fullMailBody}
`;
+
+ rs.rsJsonApiRequest('/rsMail/sendMail', { from, subject, mailBody, to, cc, bcc }, (data, success) => {
+ const isOk = success && data && (
+ data.retval > 0 ||
+ data.retval === true ||
+ (Array.isArray(data.trackingIds) && data.trackingIds.length > 0)
+ );
+ if (isOk) {
+ Object.keys(Data.recipients).forEach((recipientType) => {
+ Data.recipients[recipientType].sendList = [];
+ });
+ Data.subject = '';
+ if (mailBodyElement) mailBodyElement.innerHTML = '';
+ attachments = [];
+ v.attrs.setShowCompose(false);
}
- );
+ widget.popupMessage(
+ m('.widget', [
+ m('.widget__heading', m('h3', isOk ? 'Success' : 'Error')),
+ m('.widget__body', m('p', isOk ? 'Mail sent successfully' : (data?.errorMsg || data?.errorMessage || 'Failed to send mail'))),
+ ])
+ );
+ m.redraw();
+ });
}
return m('.widget', [
m('.widget__heading', m('h3', 'Compose a mail')),
m('.widget__body.compose-mail', [
m('.compose-mail__from', [
m('label[for=idtags].bold', 'From: '),
+ Data.identity && m(peopleUtil.UserAvatar, {
+ avatar: ownAvatars[Data.identity],
+ firstLetter: rs.userList.userMap[Data.identity] && typeof rs.userList.userMap[Data.identity] === 'string'
+ ? rs.userList.userMap[Data.identity].slice(0, 1).toUpperCase()
+ : (rs.userList.username(Data.identity) || '').slice(0, 1).toUpperCase(),
+ identityId: Data.identity,
+ size: 24,
+ }),
m(
'select[id=idtags]',
{
@@ -172,13 +450,16 @@ const Layout = () => {
Data.identity = Data.ownId[e.target.selectedIndex];
},
},
- Data.ownId &&
+ Data.ownId &&
Data.ownId.map((id) =>
m(
'option',
- { value: id },
+ {
+ value: id,
+ selected: id === Data.identity,
+ },
rs.userList.userMap[id]
- ? rs.userList.userMap[id].toLocaleString() + ' (' + id.slice(0, 12) + '...)'
+ ? (rs.userList.userMap[id].name || id) + ' (' + id.slice(0, 12) + '...)'
: 'No Signature'
)
)
@@ -191,6 +472,12 @@ const Layout = () => {
Data.recipients.to.sendList.length > 0 &&
Data.recipients.to.sendList.map((recipient) =>
m('.recipients__selected', [
+ m(peopleUtil.UserAvatar, {
+ avatar: UserAvatarsCache[recipient.mGroupId],
+ firstLetter: recipient.mGroupName ? recipient.mGroupName.slice(0, 1).toUpperCase() : '',
+ identityId: recipient.mGroupId,
+ size: 20,
+ }),
m('span', recipient.mGroupName),
m('i.fas.fa-times', {
onclick: () => removeSelectedItem(recipient, 'to'),
@@ -201,6 +488,8 @@ const Layout = () => {
m('input[type=text].recipients__input-field', {
value: Data.recipients.to.inputVal,
oninput: (e) => handleInput(e, 'to'),
+ placeholder: totalRecipients() >= MAX_RECIPIENTS ? 'Max recipients reached' : '',
+ disabled: totalRecipients() >= MAX_RECIPIENTS,
}),
m('ul.recipients__input-list[autocomplete=off]', [
Data.recipients.to.inputList.length > 0
@@ -211,14 +500,40 @@ const Layout = () => {
]),
]),
]),
+ m('.compose-mail__recipients__toggles', {
+ style: {
+ display: 'flex',
+ gap: '1rem',
+ alignItems: 'center',
+ marginLeft: 'auto',
+ paddingRight: '0.5rem',
+ userSelect: 'none',
+ }
+ }, [
+ m('span.bold', {
+ style: { cursor: 'pointer', color: showCc ? '#019DFF' : '#555' },
+ onclick: () => showCc = !showCc
+ }, 'Cc'),
+ m('span.bold', {
+ style: { cursor: 'pointer', color: showBcc ? '#019DFF' : '#555' },
+ onclick: () => showBcc = !showBcc
+ }, 'Bcc')
+ ])
]),
- ['cc', 'bcc'].map((recipientType) =>
- m('.compose-mail__recipients__container', [
+ ['cc', 'bcc'].map((recipientType) => {
+ const isVisible = recipientType === 'cc' ? showCc : showBcc;
+ return isVisible && m('.compose-mail__recipients__container', [
m('label.bold', `${recipientType}: `),
m('.recipients', [
Data.recipients[recipientType].sendList.length > 0 &&
Data.recipients[recipientType].sendList.map((recipient) =>
m('.recipients__selected', [
+ m(peopleUtil.UserAvatar, {
+ avatar: UserAvatarsCache[recipient.mGroupId],
+ firstLetter: recipient.mGroupName ? recipient.mGroupName.slice(0, 1).toUpperCase() : '',
+ identityId: recipient.mGroupId,
+ size: 20,
+ }),
m('span', recipient.mGroupName),
m('i.fas.fa-times', {
onclick: () => removeSelectedItem(recipient, recipientType),
@@ -229,6 +544,8 @@ const Layout = () => {
m('input[type=text].recipients__input-field', {
value: Data.recipients[recipientType].inputVal,
oninput: (e) => handleInput(e, recipientType),
+ placeholder: totalRecipients() >= MAX_RECIPIENTS ? 'Max recipients reached' : '',
+ disabled: totalRecipients() >= MAX_RECIPIENTS,
}),
m('ul.recipients__input-list[autocomplete=off]', [
Data.recipients[recipientType].inputList.length > 0
@@ -243,19 +560,173 @@ const Layout = () => {
]),
]),
]),
- ])
- ),
+ ]);
+ }),
+ totalRecipients() >= MAX_RECIPIENTS && m('.compose-mail__recipient-limit', {
+ style: { color: '#e67e22', fontSize: '0.85rem', padding: '0.25rem 0' }
+ }, `Maximum of ${MAX_RECIPIENTS} recipients reached. Remove a recipient to add more.`),
]),
m('input.compose-mail__subject[type=text][placeholder=Subject]', {
value: Data.subject,
oninput: (e) => (Data.subject = e.target.value),
}),
+
+ // Hidden File Inputs
+ m('input#mail-file-attach[type=file]', {
+ style: 'display: none;',
+ multiple: true,
+ onchange: (e) => {
+ const files = Array.from(e.target.files || []);
+ files.forEach((file) => {
+ attachments.push({
+ name: file.name,
+ size: formatFileSize(file.size),
+ type: file.type,
+ rawFile: file,
+ });
+ });
+ e.target.value = '';
+ m.redraw();
+ },
+ }),
+ m('input#mail-image-attach[type=file]', {
+ style: 'display: none;',
+ accept: 'image/*',
+ onchange: (e) => {
+ const file = e.target.files && e.target.files[0];
+ if (file) {
+ const reader = new FileReader();
+ reader.onload = (event) => {
+ const src = event.target.result;
+ insertContentIntoMailBody(`
`);
+ };
+ reader.readAsDataURL(file);
+ }
+ e.target.value = '';
+ m.redraw();
+ },
+ }),
+
+ // File Attachments Bar
+ attachments.length > 0 &&
+ m('.mail-attachments-bar', {
+ style: 'margin: 0.5rem 0; padding: 0.5rem 0.75rem; background: #f8fafc; border: 1px solid #cbd5e1; border-radius: 0.375rem; display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center;'
+ }, [
+ m('span', { style: 'font-weight: 600; font-size: 0.85rem; color: #475569; display: flex; align-items: center; gap: 0.35rem; margin-right: 0.25rem;' }, [
+ m('i.fas.fa-paperclip', { style: 'color: #019DFF;' }),
+ `Attachments (${attachments.length}):`
+ ]),
+ attachments.map((att, index) =>
+ m('.mail-attachment-chip', {
+ style: 'display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.25rem 0.65rem; background: #ffffff; border: 1px solid #cbd5e1; border-radius: 1rem; font-size: 0.825rem; font-weight: 500; color: #1e293b; box-shadow: 0 1px 2px rgba(0,0,0,0.05);'
+ }, [
+ m('i.fas.fa-file-alt', { style: 'color: #3b82f6;' }),
+ m('span', att.name),
+ m('span', { style: 'color: #94a3b8; font-size: 0.75rem;' }, `(${att.size})`),
+ m('i.fas.fa-times', {
+ style: 'cursor: pointer; color: #ef4444; margin-left: 0.2rem; font-size: 0.8rem;',
+ onclick: () => attachments.splice(index, 1),
+ })
+ ])
+ )
+ ]),
+
m('.compose-mail__message', [
- m('.compose-mail__message-body[placeholder=Message][contenteditable]#composerMailBody'),
- ]),
- m('button.compose-mail__send-btn', { onclick: sendMail }, [
- m('span', 'Send Mail'),
- m('i.fas.fa-paper-plane'),
+ m('.compose-mail__message-body[placeholder=Message][contenteditable]#composerMailBody', {
+ oncreate: (vnode) => {
+ if (Data.bodyHtml) {
+ vnode.dom.innerHTML = Data.bodyHtml;
+ }
+ }
+ }),
+
+ // Modern Mail Composer Bottom Toolbar
+ m('.mail-compose-toolbar', {
+ style: 'display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 0.75rem; background: #ffffff; border: 1px solid #cbd5e1; border-top: 1px solid #e2e8f0; border-radius: 0 0 0.375rem 0.375rem; position: relative;'
+ }, [
+ m('.toolbar-left', { style: 'display: flex; align-items: center; gap: 0.5rem;' }, [
+ m('button.mail-compose-send-btn', {
+ style: 'display: flex; align-items: center; gap: 0.5rem; padding: 0.45rem 1.25rem; background: #019DFF; color: #ffffff; border: none; border-radius: 1.5rem; font-weight: 600; font-size: 0.9rem; cursor: pointer; transition: background 0.15s ease; box-shadow: 0 2px 4px rgba(1,157,255,0.25);',
+ onclick: sendMail,
+ }, [
+ m('span', 'Send'),
+ m('i.fas.fa-paper-plane', { style: 'font-size: 0.85rem;' }),
+ ]),
+ m('.toolbar-divider', { style: 'width: 1px; height: 22px; background: #cbd5e1; margin: 0 0.25rem;' }),
+ m('button.mail-tool-btn', {
+ type: 'button',
+ title: 'Attach files',
+ style: 'width: 34px; height: 34px; border-radius: 50%; border: none; background: transparent; color: #475569; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.15s ease;',
+ onmouseenter: (e) => (e.currentTarget.style.background = '#f1f5f9'),
+ onmouseleave: (e) => (e.currentTarget.style.background = 'transparent'),
+ onclick: () => {
+ const input = document.getElementById('mail-file-attach');
+ if (input) input.click();
+ },
+ }, m('i.fas.fa-paperclip', { style: 'font-size: 1.05rem;' })),
+ m('button.mail-tool-btn', {
+ type: 'button',
+ title: 'Insert image',
+ style: 'width: 34px; height: 34px; border-radius: 50%; border: none; background: transparent; color: #475569; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.15s ease;',
+ onmouseenter: (e) => (e.currentTarget.style.background = '#f1f5f9'),
+ onmouseleave: (e) => (e.currentTarget.style.background = 'transparent'),
+ onclick: () => {
+ const input = document.getElementById('mail-image-attach');
+ if (input) input.click();
+ },
+ }, m('i.fas.fa-image', { style: 'font-size: 1.05rem;' })),
+ m('button.mail-tool-btn', {
+ type: 'button',
+ title: 'Insert emoji',
+ style: `width: 34px; height: 34px; border-radius: 50%; border: none; background: ${showEmojiPicker ? '#e0f2fe' : 'transparent'}; color: ${showEmojiPicker ? '#0284c7' : '#475569'}; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.15s ease;`,
+ onclick: () => (showEmojiPicker = !showEmojiPicker),
+ }, m('i.fas.fa-smile', { style: 'font-size: 1.05rem;' })),
+ ]),
+
+ // Floating Emoji Picker Popover
+ showEmojiPicker && m('.mail-emoji-picker-popover', {
+ style: 'position: absolute; bottom: 50px; left: 130px; background: #ffffff; border: 1px solid #cbd5e1; border-radius: 0.5rem; box-shadow: 0 10px 25px -5px rgba(0,0,0,0.15), 0 8px 10px -6px rgba(0,0,0,0.1); width: 320px; max-height: 340px; z-index: 2000; display: flex; flex-direction: column; overflow: hidden;',
+ onclick: (e) => e.stopPropagation(),
+ }, [
+ m('.emoji-search-bar', { style: 'padding: 0.5rem; border-bottom: 1px solid #f1f5f9; display: flex; align-items: center; gap: 0.5rem;' }, [
+ m('i.fas.fa-search', { style: 'color: #94a3b8; font-size: 0.85rem;' }),
+ m('input[type=text][placeholder=Search emoji...]', {
+ style: 'border: none; outline: none; width: 100%; font-size: 0.85rem;',
+ value: emojiSearch,
+ oninput: (e) => (emojiSearch = e.target.value),
+ }),
+ emojiSearch && m('i.fas.fa-times', {
+ style: 'cursor: pointer; color: #94a3b8; font-size: 0.85rem;',
+ onclick: () => (emojiSearch = ''),
+ }),
+ ]),
+ !emojiSearch && m('.emoji-cat-bar', { style: 'display: flex; background: #f8fafc; border-bottom: 1px solid #e2e8f0; padding: 0.25rem; overflow-x: auto;' },
+ chatEmoji.EMOJI_CATEGORIES.map(c =>
+ m('button', {
+ style: `border: none; background: ${c === emojiCategory ? '#ffffff' : 'transparent'}; border-radius: 0.25rem; padding: 0.3rem 0.4rem; cursor: pointer; font-size: 1rem; box-shadow: ${c === emojiCategory ? '0 1px 2px rgba(0,0,0,0.1)' : 'none'};`,
+ title: c,
+ onclick: () => (emojiCategory = c),
+ }, chatEmoji.EMOJI_ICONS[c])
+ )
+ ),
+ m('.emoji-grid-body', { style: 'padding: 0.5rem; display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.25rem; max-height: 230px; overflow-y: auto;' },
+ (emojiSearch
+ ? Object.values(chatEmoji.EMOJI_DATA).flat().filter(e => e.includes(emojiSearch))
+ : (chatEmoji.EMOJI_DATA[emojiCategory] || [])
+ ).map(e =>
+ m('button', {
+ style: 'border: none; background: transparent; font-size: 1.25rem; cursor: pointer; padding: 0.25rem; border-radius: 0.25rem; transition: background 0.15s ease;',
+ onmouseenter: (ev) => (ev.currentTarget.style.background = '#f1f5f9'),
+ onmouseleave: (ev) => (ev.currentTarget.style.background = 'transparent'),
+ onclick: () => {
+ insertEmoji(e);
+ showEmojiPicker = false;
+ },
+ }, e)
+ )
+ ),
+ ])
+ ]),
]),
]),
]);
diff --git a/webui-src/app/mail/mail_resolver.js b/webui-src/app/mail/mail_resolver.js
index 7568d84..de0648e 100644
--- a/webui-src/app/mail/mail_resolver.js
+++ b/webui-src/app/mail/mail_resolver.js
@@ -41,6 +41,22 @@ const Messages = {
Messages.spam = Messages.all.filter((msg) => msg.msgflags & util.RS_MSG_SPAM);
Messages.attachment = Messages.all.filter((msg) => msg.count);
+
+ Messages.important = Messages.all.filter(
+ (msg) => msg.msgtags && msg.msgtags.includes(util.RS_MSGTAGTYPE_IMPORTANT)
+ );
+ Messages.work = Messages.all.filter(
+ (msg) => msg.msgtags && msg.msgtags.includes(util.RS_MSGTAGTYPE_WORK)
+ );
+ Messages.personal = Messages.all.filter(
+ (msg) => msg.msgtags && msg.msgtags.includes(util.RS_MSGTAGTYPE_PERSONAL)
+ );
+ Messages.todo = Messages.all.filter(
+ (msg) => msg.msgtags && msg.msgtags.includes(util.RS_MSGTAGTYPE_TODO)
+ );
+ Messages.later = Messages.all.filter(
+ (msg) => msg.msgtags && msg.msgtags.includes(util.RS_MSGTAGTYPE_LATER)
+ );
}
});
},
@@ -98,7 +114,14 @@ const Layout = () => {
return [
m('.side-bar', [
- m('button.mail-compose-btn', { onclick: () => setShowCompose(true) }, 'Compose'),
+ m(
+ 'button.mail-compose-btn',
+ {
+ style: 'display: flex; align-items: center; justify-content: center; gap: 0.5rem;',
+ onclick: () => setShowCompose(true),
+ },
+ [m('i.fas.fa-pen'), 'Compose']
+ ),
m(util.Sidebar, {
tabs: Object.keys(sections),
size: sectionsSize,
@@ -128,9 +151,8 @@ const Layout = () => {
vnode.children,
])
),
- m(
+ showCompose && m(
'.composePopupOverlay#mailComposerPopup',
- { style: { display: showCompose ? 'block' : 'none' } },
m(
'.composePopup',
m(compose, { msgType: 'compose', setShowCompose }),
@@ -142,20 +164,80 @@ const Layout = () => {
};
};
+const tabConfig = {
+ inbox: { title: 'Inbox', category: 'inbox' },
+ outbox: { title: 'Outbox', category: 'outbox' },
+ drafts: { title: 'Draft', category: 'drafts' },
+ sent: { title: 'Sent', category: 'sent' },
+ trash: { title: 'Trash', category: 'trash' },
+ starred: { title: 'Starred', category: 'starred' },
+ system: { title: 'System', category: 'system' },
+ spam: { title: 'Spam', category: 'spam' },
+ important: { title: 'Important', category: 'important' },
+ work: { title: 'Work', category: 'work' },
+ todo: { title: 'Todo', category: 'todo' },
+ later: { title: 'Later', category: 'later' },
+ personal: { title: 'Personal', category: 'personal' },
+};
+
+const GenericMailList = () => {
+ return {
+ view: (vnode) => {
+ const { title, category, list } = vnode.attrs;
+ return [
+ m('.widget__heading', m('h3', title)),
+ m('.widget__body', [
+ m(
+ util.Table,
+ m(
+ 'tbody',
+ list.map((msg) =>
+ m(util.MessageSummary, {
+ key: msg.msgId,
+ details: msg,
+ category: category,
+ })
+ )
+ )
+ ),
+ ]),
+ ];
+ },
+ };
+};
+
module.exports = {
view: ({ attrs, attrs: { tab, msgId } }) => {
// TODO: utilize multiple routing params
if (Object.prototype.hasOwnProperty.call(attrs, 'msgId')) {
return m(Layout, m(util.MessageView, { msgId }));
}
+
+ if (tab === 'attachment') {
+ return m(
+ Layout,
+ m(sectionsquickview.attachment, {
+ list: util.sortList(Messages[tab]),
+ })
+ );
+ }
+
+ const config = tabConfig[tab];
+ if (config) {
+ return m(
+ Layout,
+ m(GenericMailList, {
+ title: config.title,
+ category: config.category,
+ list: util.sortList(Messages[tab]),
+ })
+ );
+ }
+
return m(
Layout,
m(sections[tab] || sectionsquickview[tab], {
- list: (Messages[tab] || []).sort((msgA, msgB) => {
- const msgADate = new Date((msgA.ts.xint64 || 0) * 1000);
- const msgBDate = new Date((msgB.ts.xint64 || 0) * 1000);
- return msgADate < msgBDate;
- }),
+ list: util.sortList(Messages[tab]),
})
);
},
diff --git a/webui-src/app/mail/mail_util.js b/webui-src/app/mail/mail_util.js
index ca5511f..a46f073 100644
--- a/webui-src/app/mail/mail_util.js
+++ b/webui-src/app/mail/mail_util.js
@@ -34,6 +34,85 @@ const MSG_ADDRESS_MODE_BCC = 0x03;
const BOX_ALL = 0x06;
+const MessageCache = {};
+const UserNicknamesCache = {};
+const MailGxsDetailsCache = {};
+const MailHoverState = {
+ hoveredUser: null,
+};
+
+function renderMailUserTooltip() {
+ if (!MailHoverState.hoveredUser) return null;
+ const hUser = MailHoverState.hoveredUser;
+ const details = MailGxsDetailsCache[hUser.gxsId];
+ if (!details) return null;
+
+ const avatar = details.mAvatar && details.mAvatar.base64 ? details.mAvatar.base64 : null;
+ const firstLetter = (hUser.name || '?').slice(0, 1).toUpperCase();
+ const votes = details.mReputation
+ ? ((details.mReputation.mFriendsPositiveVotes || 0) - (details.mReputation.mFriendsNegativeVotes || 0))
+ : 0;
+
+ const top = hUser.rect.top - 10;
+ const left = Math.min(Math.max(hUser.rect.left, 140), window.innerWidth - 280);
+
+ return m('.user-tooltip', {
+ style: {
+ position: 'fixed',
+ top: `${top}px`,
+ left: `${left}px`,
+ transform: 'translateY(-100%)',
+ zIndex: 10000,
+ }
+ }, [
+ m('.tooltip-avatar', m(peopleUtil.UserAvatar, { avatar, firstLetter, identityId: hUser.gxsId, size: 64 })),
+ m('.tooltip-details', [
+ m('.tooltip-row', [m('span.tooltip-label', 'Identity name: '), m('span.tooltip-value', hUser.name)]),
+ m('.tooltip-row', [m('span.tooltip-label', 'Identity Id: '), m('span.tooltip-value.tooltip-id', hUser.gxsId)]),
+ details.mPgpId && details.mPgpId !== '0000000000000000' && m('.tooltip-row', [
+ m('span.tooltip-label', 'Node: '),
+ m('span.tooltip-value', `${rs.userList.username(details.mPgpId) || hUser.name} [${details.mPgpId}]`)
+ ]),
+ m('.tooltip-row', [
+ m('span.tooltip-label', 'Votes: '),
+ m('span.tooltip-value', {
+ style: {
+ color: votes >= 0 ? '#22c55e' : '#ef4444',
+ fontWeight: 'bold'
+ }
+ }, (votes >= 0 ? '+' : '') + votes)
+ ])
+ ])
+ ]);
+}
+
+const tagTypesCache = {};
+const defaultTagTypes = {
+ 1: { name: 'Important', color: '#ef4444' },
+ 2: { name: 'Work', color: '#f97316' },
+ 3: { name: 'Personal', color: '#22c55e' },
+ 4: { name: 'Todo', color: '#3b82f6' },
+ 5: { name: 'Later', color: '#a855f7' },
+};
+
+function getTagDetails(tagId) {
+ return tagTypesCache[tagId] || defaultTagTypes[tagId] || { name: `Tag ${tagId}`, color: '#cbd5e1' };
+}
+
+function loadTagTypes() {
+ rs.rsJsonApiRequest('/rsMail/getMessageTagTypes', {}, (res) => {
+ if (res && res.body && res.body.tags && res.body.tags.types) {
+ res.body.tags.types.forEach((tag) => {
+ tagTypesCache[tag.key] = {
+ name: tag.value.first,
+ color: `#${tag.value.second.toString(16).padStart(6, '0')}`,
+ };
+ });
+ }
+ });
+}
+loadTagTypes();
+
// Utility functions
const humanReadableSize = (fileSize) => {
return fileSize / 1024 > 1024
@@ -65,10 +144,12 @@ const MessageSummary = () => {
.then((res) => {
if (res.body.retval) {
details = res.body.msg;
+ details.msgtags = v.attrs.details.msgtags;
files = details.files;
isStarred = (details.msgflags & 0xf00) === RS_MSG_STAR;
const flag = details.msgflags & 0xf0;
msgStatus = flag === RS_MSG_NEW || flag === RS_MSG_UNREAD_BY_USER ? 'unread' : 'read';
+ MessageCache[v.attrs.details.msgId] = details;
}
})
.then(() => {
@@ -76,7 +157,13 @@ const MessageSummary = () => {
rs.rsJsonApiRequest(
'/rsIdentity/getIdDetails',
{ id: details.from._addr_string },
- (data) => (fromUserInfo = data.details)
+ (data) => {
+ fromUserInfo = data.details;
+ if (fromUserInfo) {
+ UserNicknamesCache[details.from._addr_string] = fromUserInfo.mNickname || '';
+ MailGxsDetailsCache[details.from._addr_string] = fromUserInfo;
+ }
+ }
);
}
});
@@ -85,18 +172,18 @@ const MessageSummary = () => {
m(
'tr.msgbody',
{
- key: details.msgId,
+ key: v.attrs.details.msgId,
class: msgStatus,
onclick: () =>
- m.route.set('/mail/:tab/:msgId', { tab: v.attrs.category, msgId: details.msgId }),
+ m.route.set('/mail/:tab/:msgId', { tab: v.attrs.category, msgId: v.attrs.details.msgId }),
},
[
m(
'td',
- m(`input.star-check[type=checkbox][id=msg-${details.msgId}]`, { checked: isStarred }),
+ m(`input.star-check[type=checkbox][id=msg-${v.attrs.details.msgId}]`, { checked: isStarred }),
// Use label with [for] to manipulate hidden checkbox
m(
- `label.star-check[for=msg-${details.msgId}]`,
+ `label.star-check[for=msg-${v.attrs.details.msgId}]`,
{
onclick: starMessage,
class: (details.msgflags & 0xf00) === RS_MSG_STAR ? 'starred' : 'unstarred',
@@ -105,10 +192,70 @@ const MessageSummary = () => {
)
),
files && m('td', files.length),
- m('td', details.title),
+ m('td', { style: 'border-bottom: inherit;' }, [
+ m('div', {
+ style: {
+ display: 'flex',
+ alignItems: 'center',
+ gap: '0.5rem',
+ }
+ }, [
+ m('span', details.title),
+ details.msgtags && details.msgtags.length > 0 && m('.mail-tags-container', { style: 'display: inline-flex; gap: 0.25rem;' },
+ details.msgtags.map((tagId) => {
+ const tag = getTagDetails(tagId);
+ return m('span.mail-tag-badge', {
+ title: tag.name,
+ style: `display: inline-block; width: 10px; height: 10px; border-radius: 2px; background-color: ${tag.color};`
+ });
+ })
+ )
+ ])
+ ]),
m(
'td',
- fromUserInfo && Number(fromUserInfo.mId) !== 0 ? fromUserInfo.mNickname : '[Unknown]'
+ m(
+ 'div',
+ {
+ style: {
+ display: 'flex',
+ alignItems: 'center',
+ gap: '0.5rem',
+ justifyContent: 'start',
+ cursor: 'pointer',
+ },
+ onmouseenter: (e) => {
+ if (!details?.from?._addr_string) return;
+ const gxsId = details.from._addr_string;
+ const name = fromUserInfo && Number(fromUserInfo.mId) !== 0 ? fromUserInfo.mNickname : '[Unknown]';
+ const rect = e.currentTarget.getBoundingClientRect();
+ MailHoverState.hoveredUser = { gxsId, name, rect };
+ if (fromUserInfo) MailGxsDetailsCache[gxsId] = fromUserInfo;
+ if (!MailGxsDetailsCache[gxsId]) {
+ rs.rsJsonApiRequest('/rsIdentity/getIdDetails', { id: gxsId }, (d) => {
+ if (d && d.details) {
+ MailGxsDetailsCache[gxsId] = d.details;
+ m.redraw();
+ }
+ });
+ }
+ m.redraw();
+ },
+ onmouseleave: () => {
+ MailHoverState.hoveredUser = null;
+ m.redraw();
+ }
+ },
+ [
+ m(peopleUtil.UserAvatar, {
+ avatar: fromUserInfo?.mAvatar,
+ firstLetter: (fromUserInfo?.mNickname || '').slice(0, 1).toUpperCase(),
+ identityId: details.from?._addr_string,
+ size: 24,
+ }),
+ m('span', fromUserInfo && Number(fromUserInfo.mId) !== 0 ? fromUserInfo.mNickname : '[Unknown]'),
+ ]
+ )
),
m('td', new Date(details.ts * 1000).toLocaleString()),
]
@@ -158,6 +305,7 @@ const AttachmentSection = () => {
const MessageView = () => {
let showCompose = false;
+ let composeType = 'reply';
// setFunction like react to show/hide popup
function setShowCompose(bool) {
showCompose = bool;
@@ -222,11 +370,27 @@ const MessageView = () => {
} else if (mode === MSG_ADDRESS_MODE_BCC && !MailData.bccList[addrString]) {
MailData.bccList[addrString] = destDetail;
}
+ if (addrString && !UserNicknamesCache[addrString]) {
+ rs.rsJsonApiRequest(
+ '/rsIdentity/getIdDetails',
+ { id: addrString },
+ (data) => {
+ if (data?.details) {
+ UserNicknamesCache[addrString] = data.details.mNickname || '';
+ }
+ }
+ );
+ }
});
rs.rsJsonApiRequest(
'/rsIdentity/getIdDetails',
{ id: MailData?.sender?._addr_string },
- (data) => (MailData.avatar = data?.details?.mAvatar)
+ (data) => {
+ if (data?.details) {
+ MailData.avatar = data.details.mAvatar;
+ UserNicknamesCache[MailData.sender._addr_string] = data.details.mNickname || '';
+ }
+ }
);
}
},
@@ -241,9 +405,9 @@ const MessageView = () => {
m('i.fas.fa-arrow-left')
),
m('.msg-view-nav__action', [
- m('button', { onclick: () => setShowCompose(true) }, 'Reply'),
- m('button', 'Reply All'),
- m('button', 'Forward'),
+ m('button', { onclick: () => { composeType = 'reply'; setShowCompose(true); } }, 'Reply'),
+ m('button', { onclick: () => { composeType = 'replyAll'; setShowCompose(true); } }, 'Reply All'),
+ m('button', { onclick: () => { composeType = 'forward'; setShowCompose(true); } }, 'Forward'),
m('button', { onclick: confirmMailDelete }, 'Delete'),
]),
]),
@@ -253,15 +417,36 @@ const MessageView = () => {
MailData.sender &&
m(peopleUtil.UserAvatar, {
avatar: MailData.avatar,
- firstLetter: rs.userList.userMap[MailData.sender._addr_string]
- ? rs.userList.userMap[MailData.sender._addr_string].slice(0, 1).toUpperCase()
- : '',
+ firstLetter: (UserNicknamesCache[MailData.sender._addr_string] || rs.userList.username(MailData.sender._addr_string) || '').slice(0, 1).toUpperCase(),
+ identityId: MailData.sender._addr_string,
}),
m('.msg-details__info', [
MailData.sender &&
- m('.msg-details__info-item', [
+ m('.msg-details__info-item', {
+ style: { cursor: 'pointer', display: 'inline-flex', gap: '0.25rem', alignItems: 'center' },
+ onmouseenter: (e) => {
+ if (!MailData.sender._addr_string) return;
+ const gxsId = MailData.sender._addr_string;
+ const name = UserNicknamesCache[gxsId] || rs.userList.username(gxsId) || 'Unknown';
+ const rect = e.currentTarget.getBoundingClientRect();
+ MailHoverState.hoveredUser = { gxsId, name, rect };
+ if (!MailGxsDetailsCache[gxsId]) {
+ rs.rsJsonApiRequest('/rsIdentity/getIdDetails', { id: gxsId }, (d) => {
+ if (d && d.details) {
+ MailGxsDetailsCache[gxsId] = d.details;
+ m.redraw();
+ }
+ });
+ }
+ m.redraw();
+ },
+ onmouseleave: () => {
+ MailHoverState.hoveredUser = null;
+ m.redraw();
+ }
+ }, [
m('b', 'From: '),
- rs.userList.userMap[MailData.sender._addr_string] || 'Unknown',
+ UserNicknamesCache[MailData.sender._addr_string] || rs.userList.username(MailData.sender._addr_string) || 'Unknown',
]),
m('.msg-details__info-item', [
m('b', 'To: '),
@@ -269,7 +454,7 @@ const MessageView = () => {
? [
m('#truncate.truncated-view', [
Object.keys(MailData.toList).map((key, index) =>
- m('span', { key: index }, `${rs.userList.userMap[key] || 'Unknown'}, `)
+ m('span', { key: index }, `${UserNicknamesCache[key] || rs.userList.username(key) || 'Unknown'}, `)
),
]),
m(
@@ -294,7 +479,7 @@ const MessageView = () => {
m('.msg-details__info-item', [
m('b', 'Cc: '),
Object.keys(MailData.ccList).map((key, index) =>
- m('p', { key: index }, `${rs.userList.userMap[key]}, `)
+ m('span', { key: index }, `${UserNicknamesCache[key] || rs.userList.username(key) || 'Unknown'}, `)
),
]),
MailData.bccList &&
@@ -302,7 +487,7 @@ const MessageView = () => {
m('.msg-details__info-item', [
m('b', 'Bcc: '),
Object.keys(MailData.bccList).map((key, index) =>
- m('p', { key: index }, `${rs.userList.userMap[key]}, `)
+ m('span', { key: index }, `${UserNicknamesCache[key] || rs.userList.username(key) || 'Unknown'}, `)
),
]),
]),
@@ -315,16 +500,16 @@ const MessageView = () => {
m('.msg-view__attachment-items', m(AttachmentSection, { files: MailData.files })),
]),
],
- m(
+ showCompose && m(
'.composePopupOverlay#mailComposerPopup',
- { style: { display: showCompose ? 'block' : 'none' } },
m(
'.composePopup',
MailData.sender._addr_string
? m(compose, {
- msgType: 'reply',
+ msgType: composeType,
senderId: MailData.sender._addr_string,
recipientList: MailData.toList,
+ ccList: MailData.ccList,
subject: MailData.subject,
replyMessage: MailData.message,
timeStamp: new Date(MailData.timeStamp * 1000),
@@ -333,24 +518,181 @@ const MessageView = () => {
: m('.widget', m('.widget__heading', m('h3', 'Sender is not known'))),
m('button.red.close-btn', { onclick: () => setShowCompose(false) }, m('i.fas.fa-times'))
)
- )
+ ),
+ renderMailUserTooltip(),
),
};
};
+const SortState = {
+ column: 'date',
+ direction: 'desc',
+};
+
+function setSort(column) {
+ if (SortState.column === column) {
+ SortState.direction = SortState.direction === 'asc' ? 'desc' : 'asc';
+ } else {
+ SortState.column = column;
+ SortState.direction = (column === 'date' || column === 'attachments' || column === 'starred') ? 'desc' : 'asc';
+ }
+}
+
+function sortList(list) {
+ if (!list) return [];
+ return [...list].sort((msgA, msgB) => {
+ let valA, valB;
+ switch (SortState.column) {
+ case 'starred': {
+ const aStarred = (MessageCache[msgA.msgId]?.msgflags & 0xf00) === RS_MSG_STAR || (msgA.msgflags & 0xf00) === RS_MSG_STAR;
+ const bStarred = (MessageCache[msgB.msgId]?.msgflags & 0xf00) === RS_MSG_STAR || (msgB.msgflags & 0xf00) === RS_MSG_STAR;
+ valA = aStarred ? 1 : 0;
+ valB = bStarred ? 1 : 0;
+ break;
+ }
+ case 'attachments': {
+ const aCount = MessageCache[msgA.msgId]?.files?.length || msgA.count || 0;
+ const bCount = MessageCache[msgB.msgId]?.files?.length || msgB.count || 0;
+ valA = Number(aCount);
+ valB = Number(bCount);
+ break;
+ }
+ case 'subject': {
+ const aTitle = MessageCache[msgA.msgId]?.title || msgA.title || '';
+ const bTitle = MessageCache[msgB.msgId]?.title || msgB.title || '';
+ valA = aTitle.toLowerCase();
+ valB = bTitle.toLowerCase();
+ break;
+ }
+ case 'from': {
+ const aSenderId = MessageCache[msgA.msgId]?.from?._addr_string || msgA.from?._addr_string;
+ const bSenderId = MessageCache[msgB.msgId]?.from?._addr_string || msgB.from?._addr_string;
+ const aName = aSenderId && rs.userList.userMap[aSenderId];
+ const bName = bSenderId && rs.userList.userMap[bSenderId];
+ const aFrom = (UserNicknamesCache[aSenderId] || (aName && aName.name) || aName || '') + '';
+ const bFrom = (UserNicknamesCache[bSenderId] || (bName && bName.name) || bName || '') + '';
+ valA = aFrom.toLowerCase();
+ valB = bFrom.toLowerCase();
+ break;
+ }
+ case 'date':
+ default: {
+ const aTs = MessageCache[msgA.msgId]?.ts || msgA.ts?.xint64 || msgA.ts || 0;
+ const bTs = MessageCache[msgB.msgId]?.ts || msgB.ts?.xint64 || msgB.ts || 0;
+ valA = Number(aTs);
+ valB = Number(bTs);
+ break;
+ }
+ }
+
+ if (valA < valB) return SortState.direction === 'asc' ? -1 : 1;
+ if (valA > valB) return SortState.direction === 'asc' ? 1 : -1;
+ return 0;
+ });
+}
+
const Table = () => {
+ let currentPage = 0;
+ const pageSize = 50;
return {
- view: (v) =>
- m('table.mails', [
- m('tr', [
- m('th[title=starred]', m('i.fas.fa-star')),
- m('th[title=attachments]', m('i.fas.fa-paperclip')),
- m('th', 'Subject'),
- m('th', 'From'),
- m('th', 'Date'),
+ view: (v) => {
+ const renderHeader = (colName, label, isIcon = false) => {
+ const isActive = SortState.column === colName;
+ const iconClass = isActive
+ ? (SortState.direction === 'asc' ? 'fas fa-sort-up' : 'fas fa-sort-down')
+ : 'fas fa-sort';
+ return m(
+ 'th.sortable-th',
+ {
+ onclick: () => setSort(colName),
+ style: { cursor: 'pointer', userSelect: 'none' },
+ },
+ [
+ isIcon ? label : m('span', label),
+ ' ',
+ m(`i.${iconClass}`, {
+ style: {
+ marginLeft: '0.25rem',
+ opacity: isActive ? 1 : 0.2,
+ transition: 'opacity 0.2s',
+ },
+ }),
+ ]
+ );
+ };
+
+ let totalItems = 0;
+ let tbody = v.children[0];
+ if (tbody && tbody.children) {
+ const flatChildren = Array.isArray(tbody.children) ? tbody.children.flat().filter(Boolean) : [tbody.children].filter(Boolean);
+ totalItems = flatChildren.length;
+
+ const start = currentPage * pageSize;
+ const end = start + pageSize;
+ tbody.children = flatChildren.slice(start, end);
+ }
+
+ const totalPages = Math.ceil(totalItems / pageSize) || 1;
+ if (currentPage >= totalPages) currentPage = totalPages - 1;
+ if (currentPage < 0) currentPage = 0;
+
+ const paginationUI = totalItems > pageSize && m('.pagination', {
+ style: {
+ display: 'flex',
+ justifyContent: 'center',
+ alignItems: 'center',
+ gap: '1rem',
+ padding: '1rem',
+ borderTop: '1px solid #eee',
+ fontSize: '1rem',
+ color: '#555',
+ userSelect: 'none'
+ }
+ }, [
+ m('button', {
+ disabled: currentPage === 0,
+ onclick: () => currentPage--,
+ style: {
+ padding: '0.4rem 0.8rem',
+ background: currentPage === 0 ? '#ccc' : '#019dff',
+ color: '#fff',
+ border: 'none',
+ borderRadius: '4px',
+ cursor: currentPage === 0 ? 'not-allowed' : 'pointer',
+ boxShadow: 'none'
+ }
+ }, m('i.fas.fa-chevron-left')),
+ m('span.bold', `${totalItems > 0 ? currentPage * pageSize + 1 : 0} - ${Math.min((currentPage + 1) * pageSize, totalItems)} of ${totalItems}`),
+ m('button', {
+ disabled: currentPage >= totalPages - 1,
+ onclick: () => currentPage++,
+ style: {
+ padding: '0.4rem 0.8rem',
+ background: currentPage >= totalPages - 1 ? '#ccc' : '#019dff',
+ color: '#fff',
+ border: 'none',
+ borderRadius: '4px',
+ cursor: currentPage >= totalPages - 1 ? 'not-allowed' : 'pointer',
+ boxShadow: 'none'
+ }
+ }, m('i.fas.fa-chevron-right'))
+ ]);
+
+ return m('.table-pagination-container', [
+ m('table.mails', [
+ m('tr', [
+ renderHeader('starred', m('i.fas.fa-star'), true),
+ renderHeader('attachments', m('i.fas.fa-paperclip'), true),
+ renderHeader('subject', 'Subject'),
+ renderHeader('from', 'From'),
+ renderHeader('date', 'Date'),
+ ]),
+ tbody,
]),
- v.children,
- ]),
+ paginationUI,
+ renderMailUserTooltip(),
+ ]);
+ },
};
};
@@ -375,25 +717,48 @@ const activeSideLink = {
quicksideactive: -1,
};
+const sidebarIcons = {
+ inbox: m('i.fas.fa-inbox', { style: 'color: #3b82f6; margin-right: 0.75rem; font-size: 24px; width: 24px; text-align: center;' }),
+ outbox: m('i.fas.fa-envelope-open-text', { style: 'color: #10b981; margin-right: 0.75rem; font-size: 24px; width: 24px; text-align: center;' }),
+ drafts: m('i.fas.fa-edit', { style: 'color: #6b7280; margin-right: 0.75rem; font-size: 24px; width: 24px; text-align: center;' }),
+ sent: m('i.fas.fa-envelope-open', { style: 'color: #f59e0b; margin-right: 0.75rem; font-size: 24px; width: 24px; text-align: center;' }),
+ trash: m('i.fas.fa-trash-alt', { style: 'color: #ef4444; margin-right: 0.75rem; font-size: 24px; width: 24px; text-align: center;' }),
+ starred: m('i.fas.fa-star', { style: 'color: #eab308; margin-right: 0.75rem; font-size: 24px; width: 24px; text-align: center;' }),
+ system: m('i.fas.fa-bell', { style: 'color: #3b82f6; margin-right: 0.75rem; font-size: 24px; width: 24px; text-align: center;' }),
+ spam: m('i.fas.fa-fire', { style: 'color: #f97316; margin-right: 0.75rem; font-size: 24px; width: 24px; text-align: center;' }),
+ attachment: m('i.fas.fa-paperclip', { style: 'color: #06b6d4; margin-right: 0.75rem; font-size: 24px; width: 24px; text-align: center;' }),
+ important: m('i.fas.fa-square', { style: 'color: #ef4444; margin-right: 0.75rem; font-size: 24px; width: 24px; text-align: center;' }),
+ work: m('i.fas.fa-square', { style: 'color: #f97316; margin-right: 0.75rem; font-size: 24px; width: 24px; text-align: center;' }),
+ personal: m('i.fas.fa-square', { style: 'color: #22c55e; margin-right: 0.75rem; font-size: 24px; width: 24px; text-align: center;' }),
+ todo: m('i.fas.fa-square', { style: 'color: #3b82f6; margin-right: 0.75rem; font-size: 24px; width: 24px; text-align: center;' }),
+ later: m('i.fas.fa-square', { style: 'color: #a855f7; margin-right: 0.75rem; font-size: 24px; width: 24px; text-align: center;' }),
+};
+
const Sidebar = () => {
return {
view: ({ attrs: { tabs, baseRoute, size } }) =>
m(
'.sidebar',
- tabs.map((panelName, index) =>
- m(
+ tabs.map((panelName, index) => {
+ const displayName = panelName.charAt(0).toUpperCase() + panelName.slice(1);
+ const labelText = size[panelName] > 0 ? `${displayName} (${size[panelName]})` : displayName;
+ return m(
m.route.Link,
{
class: index === activeSideLink.sideactive ? 'selected-sidebar-link' : '',
+ style: 'display: flex; align-items: center;',
onclick: () => {
activeSideLink.sideactive = index;
activeSideLink.quicksideactive = -1;
},
href: baseRoute + panelName,
},
- size[panelName] > 0 ? `${panelName} (${size[panelName]})` : panelName
- )
- )
+ [
+ sidebarIcons[panelName] || null,
+ labelText,
+ ]
+ );
+ })
),
};
};
@@ -405,21 +770,27 @@ const SidebarQuickView = () => {
m(
'.sidebarquickview',
m('h6.bold', 'Quick View'),
- tabs.map((panelName, index) =>
- m(
+ tabs.map((panelName, index) => {
+ const displayName = panelName.charAt(0).toUpperCase() + panelName.slice(1);
+ const labelText = size[panelName] > 0 ? `${displayName} (${size[panelName]})` : displayName;
+ return m(
m.route.Link,
{
class:
index === activeSideLink.quicksideactive ? 'selected-sidebarquickview-link' : '',
+ style: 'display: flex; align-items: center;',
onclick: () => {
activeSideLink.quicksideactive = index;
activeSideLink.sideactive = -1;
},
href: baseRoute + panelName,
},
- size[panelName] > 0 ? `${panelName} (${size[panelName]})` : panelName
- )
- )
+ [
+ sidebarIcons[panelName] || null,
+ labelText,
+ ]
+ );
+ })
),
};
};
@@ -432,6 +803,9 @@ module.exports = {
SearchBar,
Sidebar,
SidebarQuickView,
+ SortState,
+ setSort,
+ sortList,
RS_MSG_BOXMASK,
RS_MSG_INBOX,
RS_MSG_SENTBOX,
diff --git a/webui-src/app/main.js b/webui-src/app/main.js
index 2e61068..867acd3 100644
--- a/webui-src/app/main.js
+++ b/webui-src/app/main.js
@@ -12,6 +12,7 @@ const channels = require('channels/channels');
const forums = require('forums/forums');
const boards = require('boards/boards');
const config = require('config/config_resolver');
+const statusbar = require('statusbar');
const navIcon = {
home: m('i.fas.fa-home.sidenav-icon'),
@@ -44,7 +45,7 @@ const navbar = () => {
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
- marginRight: '10px',
+ marginRight: isCollapsed ? 0 : '10px',
},
},
[
@@ -52,28 +53,11 @@ const navbar = () => {
src: 'images/retroshare.svg',
alt: 'retroshare_icon',
}),
- m('i.fas.fa-circle', {
- style: {
- color: rs.connectionState.status ? '#2ecc71' : '#e74c3c',
- fontSize: '0.6em',
- marginTop: '5px',
- transition: 'color 0.3s ease',
- },
- title: rs.connectionState.status ? 'Connected to RetroShare Core' : 'Connection Lost',
- }),
- m('span.webui-version', { style: { fontSize: '0.7em', marginTop: '3px', color: '#888' } }, 'v131'),
- m('i.fas.fa-sync-alt.refresh-icon', {
- style: { fontSize: '0.8em', marginTop: '2px', cursor: 'pointer', color: '#888' },
- onclick: () => window.location.reload(true),
- title: 'Force reload application',
- }),
]
),
- m('.nav-menu__logo-text', [
- m('h5', 'RetroShare'),
- ]),
+ m('.nav-menu__logo-text', [m('h5', 'RetroShare')]),
]),
- m('.nav-menu__box', [
+ m('.nav-menu__box', { style: { flex: 1 } }, [
Object.keys(vnode.attrs.links).map((linkName) => {
const active = m.route.get().split('/')[1] === linkName;
return m(
@@ -82,20 +66,9 @@ const navbar = () => {
href: vnode.attrs.links[linkName],
class: (active ? 'active-link' : '') + ' item',
},
- [
- navIcon[linkName],
- m('span', linkName.charAt(0).toUpperCase() + linkName.slice(1)),
- ]
+ [navIcon[linkName], m('span', linkName.charAt(0).toUpperCase() + linkName.slice(1))]
);
}),
- m(
- 'a.logout-link.item',
- {
- onclick: () => rs.logout(),
- style: { marginTop: 'auto', cursor: 'pointer' },
- },
- [m('i.fas.fa-sign-out-alt'), m('span', 'Logout')]
- ),
m(
'button.toggle-nav',
{
@@ -104,6 +77,84 @@ const navbar = () => {
m('i.fas.fa-angle-double-left')
),
]),
+ m(
+ '.nav-menu__footer',
+ {
+ style: {
+ marginTop: 'auto',
+ padding: '0.75rem 0 0',
+ color: '#888',
+ display: 'flex',
+ flexDirection: 'column',
+ alignItems: 'center',
+ justifyContent: 'center',
+ gap: '0.75rem',
+ },
+ },
+ [
+ m(
+ '.nav-menu__status',
+ {
+ style: {
+ display: 'flex',
+ flexDirection: isCollapsed ? 'column' : 'row',
+ alignItems: 'center',
+ justifyContent: 'center',
+ gap: isCollapsed ? '0.35rem' : '0.6rem',
+ },
+ },
+ [
+ m('i.fas.fa-circle', {
+ style: {
+ color: rs.connectionState.status ? '#2ecc71' : '#e74c3c',
+ fontSize: '0.6em',
+ transition: 'color 0.3s ease',
+ },
+ title: rs.connectionState.status
+ ? 'Connected to RetroShare Core'
+ : 'Connection Lost',
+ }),
+ m('span.webui-version', { style: { fontSize: '0.7em' } }, 'v131'),
+ m('i.fas.fa-sync-alt.refresh-icon', {
+ style: { cursor: 'pointer', fontSize: '0.8em' },
+ onclick: () => window.location.reload(true),
+ title: 'Force reload application',
+ }),
+ ]
+ ),
+ m(
+ 'a.logout-link.item',
+ {
+ onclick: () => rs.logout(),
+ style: {
+ cursor: 'pointer',
+ margin: 0,
+ padding: isCollapsed ? '0.675rem 0' : '0.675rem 0.5rem',
+ width: isCollapsed ? '2.5rem' : '10rem',
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: isCollapsed ? 'center' : 'flex-start',
+ lineHeight: 1,
+ borderRadius: '0.5rem',
+ textDecoration: 'none',
+ color: '#ccc',
+ textTransform: 'capitalize',
+ },
+ },
+ [
+ m('i.fas.fa-sign-out-alt.sidenav-icon', {
+ style: {
+ width: '2.5rem',
+ height: '1.4rem',
+ display: 'grid',
+ placeItems: 'center',
+ },
+ }),
+ !isCollapsed && m('span', 'Logout'),
+ ]
+ ),
+ ]
+ ),
]
),
};
@@ -117,7 +168,7 @@ const Layout = () => {
links: {
home: '/home',
network: '/network',
- people: '/people/OwnIdentity',
+ people: '/people/MyContacts',
chat: '/chat',
mail: '/mail/inbox',
files: '/files/files',
@@ -127,7 +178,22 @@ const Layout = () => {
config: '/config/network',
},
}),
- m('.tab-content', vnode.children),
+ m(
+ '.main-container',
+ {
+ style: {
+ display: 'flex',
+ flexDirection: 'column',
+ width: '100%',
+ height: '100%',
+ overflow: 'hidden',
+ },
+ },
+ [
+ m('.tab-content', { style: { flex: '1', overflow: 'auto' } }, vnode.children),
+ m(statusbar),
+ ]
+ ),
]),
};
};
@@ -204,8 +270,8 @@ m.route(document.getElementById('main'), '/', {
if (rs.loginKey.isVerified && rs.loginKey.username && rs.loginKey.passwd) {
rs.logon(
{ Authorization: `Basic ${btoa(`${rs.loginKey.username}:${rs.loginKey.passwd}`)}` },
- () => { }, // displayAuthError
- () => { }, // displayErrorMessage
- () => { }
+ () => {}, // displayAuthError
+ () => {}, // displayErrorMessage
+ () => {}
);
}
diff --git a/webui-src/app/network/network.js b/webui-src/app/network/network.js
index 2b3d494..99d7752 100644
--- a/webui-src/app/network/network.js
+++ b/webui-src/app/network/network.js
@@ -1,149 +1,115 @@
const m = require('mithril');
const rs = require('rswebui');
-const widget = require('widgets');
const Data = require('network/network_data');
+const compose = require('mail/mail_compose');
+const {
+ State,
+ loadOwnProfile,
+ loadGxsIdentities,
+ fetchIdDetails,
+ startDirectChat,
+ getOnlineSslId,
+} = require('network/network_state');
+const { OwnProfileCard, FriendsList } = require('network/network_friends_list');
+const DetailsTab = require('network/network_details_tab');
+const ChatTab = require('network/network_chat_tab');
-const ConfirmRemove = () => {
- return {
- view: (vnode) => [
- m('h3', 'Remove Friend'),
- m('hr'),
- m('p', 'Are you sure you want to end connections with this node?'),
- m(
- 'button',
- {
- onclick: () => {
- rs.rsJsonApiRequest('/rsPeers/removeFriend', {
- pgpId: vnode.attrs.gpg_id,
- });
- m.redraw();
- },
- },
- 'Confirm'
- ),
- ],
- };
-};
-
-const Locations = () => {
- return {
- view: (v) => [
- m('h4', 'Locations'),
- v.attrs.locations.map((loc) =>
- m('.location', [
- m('i.fas.fa-user-tag', { style: 'margin-top:3px' }),
- m('span', { style: 'margin-top:1px' }, loc.name),
- m('p', 'ID :'),
- m('p', loc.id),
- m('p', 'Last contacted :'),
- m('p', new Date(loc.lastSeen * 1000).toDateString()),
- m('p', 'Online :'),
- m('i.fas', {
- class: loc.isOnline ? 'fa-check-circle' : 'fa-times-circle',
- }),
- m(
- 'button.red',
- {
- onclick: () =>
- widget.popupMessage(
- m(ConfirmRemove, {
- gpg: loc.gpg_id,
- })
- ),
- },
- 'Remove node'
- ),
- ])
- ),
- ],
- };
-};
-
-const Friend = () => {
- return {
- isExpanded: false,
-
- view: (vnode) =>
- m(
- '.friend',
- {
- key: vnode.attrs.id,
- class: Data.gpgDetails[vnode.attrs.id].isSearched ? '' : 'hidden',
- },
- [
- m('i.fas.fa-angle-right', {
- class: 'fa-rotate-' + (vnode.state.isExpanded ? '90' : '0'),
- style: 'margin-top:12px',
- onclick: () => (vnode.state.isExpanded = !vnode.state.isExpanded),
- }),
- m('.brief-info', { class: Data.gpgDetails[vnode.attrs.id].isOnline ? 'online' : '' }, [
- m('i.fas.fa-2x.fa-user-circle'),
- m('span', Data.gpgDetails[vnode.attrs.id].name),
- ]),
- m(
- '.details',
- {
- style: 'display:' + (vnode.state.isExpanded ? 'block' : 'none'),
- },
- [
- m(Locations, {
- locations: Data.gpgDetails[vnode.attrs.id].locations,
- }),
- ]
- ),
- ]
- ),
- };
-};
-
-const SearchBar = () => {
- let searchString = '';
- return {
- view: () =>
- m('input.searchbar', {
- type: 'text',
- placeholder: 'search',
- value: searchString,
- oninput: (e) => {
- searchString = e.target.value.toLowerCase();
- for (const id in Data.gpgDetails) {
- if (Data.gpgDetails[id].name.toLowerCase().indexOf(searchString) > -1) {
- Data.gpgDetails[id].isSearched = true;
- } else {
- Data.gpgDetails[id].isSearched = false;
- }
- }
- },
- }),
- };
-};
-
-const FriendsList = () => {
+const NetworkLayout = () => {
return {
oninit: () => {
- Data.refreshGpgDetails();
+ Data.refreshGpgDetails().then(() => m.redraw());
+ loadOwnProfile();
+ loadGxsIdentities();
},
- view: () =>
- m('.widget', [
- m('.widget__heading', [m('h3', 'Friend nodes'), m(SearchBar)]),
- m('.widget__body', [
- Object.entries(Data.gpgDetails)
- .sort((a, b) => {
- return a[1].isOnline === b[1].isOnline ? 0 : a[1].isOnline ? -1 : 1;
- })
- .map((item) => {
- const id = item[0];
- return m(Friend, { id });
- }),
+ onremove: () => {
+ if (rs.events[15]) {
+ rs.events[15].notify = () => {};
+ }
+ },
+ view: () => {
+ const selectedFriend = State.selectedFriendGpgId
+ ? Data.gpgDetails[State.selectedFriendGpgId]
+ : null;
+
+ const selectedGxsId = State.selectedFriendGpgId
+ ? State.gpgToGxsIdMap[State.selectedFriendGpgId.toLowerCase()]
+ : null;
+
+ if (State.selectedFriendGpgId && !selectedGxsId && State.gxsIdentities) {
+ State.gxsIdentities.forEach((gxsId) => fetchIdDetails(gxsId));
+ }
+
+ return m('.network-container', [
+ m('.network-left-pane', [m(OwnProfileCard), m(FriendsList)]),
+ m('.network-right-pane', [
+ selectedFriend
+ ? [
+ m('.network-tabs', [
+ m(
+ 'button.tab-btn' + (State.activeTab === 'details' ? '.active' : ''),
+ {
+ onclick: () => {
+ State.activeTab = 'details';
+ },
+ },
+ 'Details View'
+ ),
+ m(
+ 'button.tab-btn' + (State.activeTab === 'chat' ? '.active' : ''),
+ {
+ onclick: () => {
+ State.activeTab = 'chat';
+ const sslId = getOnlineSslId(State.selectedFriendGpgId);
+ if (sslId && !State.currentChatPeerId) {
+ startDirectChat(sslId);
+ }
+ },
+ },
+ 'Chat Conversation'
+ ),
+ ]),
+ m('.network-tab-content', [
+ State.activeTab === 'details' ? m(DetailsTab) : m(ChatTab),
+ ]),
+ ]
+ : m('.network-pane-placeholder', [
+ m('i.fas.fa-network-wired'),
+ m(
+ 'p',
+ 'Select a friend node from the left side panel to view locations details or start a private chat.'
+ ),
+ ]),
]),
- ]),
+ State.showMailCompose &&
+ State.selectedFriendGpgId &&
+ m(
+ '.composePopupOverlay#mailComposerPopup',
+ { style: { display: 'block' } },
+ m(
+ '.composePopup',
+ m(compose, {
+ msgType: 'compose',
+ toId: selectedGxsId || State.selectedFriendGpgId,
+ friendName: selectedFriend ? selectedFriend.name : 'Unknown Friend',
+ isDirectMail: true,
+ setShowCompose: (val) => {
+ State.showMailCompose = val;
+ },
+ }),
+ m(
+ 'button.red.close-btn',
+ {
+ onclick: () => {
+ State.showMailCompose = false;
+ },
+ },
+ m('i.fas.fa-times')
+ )
+ )
+ ),
+ ]);
+ },
};
};
-const Layout = () => {
- return {
- view: () => m('.node-panel', m(FriendsList)),
- };
-};
-
-module.exports = Layout;
+module.exports = NetworkLayout;
diff --git a/webui-src/app/network/network_chat_tab.js b/webui-src/app/network/network_chat_tab.js
new file mode 100644
index 0000000..a10bf86
--- /dev/null
+++ b/webui-src/app/network/network_chat_tab.js
@@ -0,0 +1,125 @@
+const m = require('mithril');
+const Data = require('network/network_data');
+const { State, startDirectChat, getOnlineSslId, sendDirectChatMessage } = require('network/network_state');
+
+const ChatTab = () => {
+ return {
+ view: () => {
+ const gpgId = State.selectedFriendGpgId;
+ const friend = Data.gpgDetails[gpgId];
+ if (!friend) return null;
+
+ const sslId = getOnlineSslId(gpgId);
+
+ if (!sslId) {
+ return m('.network-chat-view', [
+ m('.chat-warning', [
+ m('i.fas.fa-exclamation-triangle'),
+ m('h4', 'No Location Found'),
+ m('p', 'This friend has no known locations to start a direct chat with.'),
+ ]),
+ ]);
+ }
+
+ if (!State.currentChatPeerId) {
+ return m('.network-chat-view', [
+ m('.chat-warning', [
+ m('i.fas.fa-comments'),
+ m('h4', 'Direct Chat'),
+ m('p', 'Click below to start a direct chat with ' + friend.name + '.'),
+ m(
+ 'button',
+ {
+ onclick: () => startDirectChat(sslId),
+ },
+ 'Start Chat'
+ ),
+ ]),
+ ]);
+ }
+
+ return m('.network-chat-view', [
+ (() => {
+ const activeLoc = friend.locations.find((loc) => loc.id === State.currentChatPeerId);
+ const locName = activeLoc ? activeLoc.name : 'Unknown Location';
+ const locOnline = activeLoc ? activeLoc.isOnline : false;
+ return m('.chat-header-bar', {
+ style: {
+ padding: '0.75rem 1rem',
+ backgroundColor: '#ffffff',
+ borderBottom: '1px solid #cbd5e1',
+ display: 'flex',
+ alignItems: 'center',
+ justifyContent: 'space-between'
+ }
+ }, [
+ m('.chat-header-info', [
+ m('.chat-header-name', { style: { fontWeight: '700', color: '#1e293b' } }, friend.name),
+ m('.chat-header-location', { style: { fontSize: '0.8rem', color: '#64748b', display: 'flex', alignItems: 'center', marginTop: '0.25rem' } }, [
+ m('span', 'Location: ' + locName),
+ m('span.status-dot', {
+ style: {
+ display: 'inline-block',
+ width: '8px',
+ height: '8px',
+ borderRadius: '50%',
+ backgroundColor: locOnline ? '#10b981' : '#ef4444',
+ marginLeft: '6px',
+ marginRight: '4px'
+ }
+ }),
+ m('span', { style: { color: locOnline ? '#10b981' : '#ef4444', fontWeight: '500' } }, locOnline ? 'Online' : 'Offline')
+ ])
+ ])
+ ]);
+ })(),
+ m(
+ '.chat-messages[id=chat-messages-container]',
+ State.chatMessages.map((msg) => {
+ const isOwn = msg.own === true;
+ const senderName = isOwn
+ ? (State.ownProfile.name || 'Me')
+ : friend.name;
+ const time = new Date(msg.sendTime * 1000).toLocaleTimeString();
+ const text = (msg.msg || '')
+ .replaceAll('
', '\n')
+ .replace(new RegExp('|<[^>]*>', 'gm'), '');
+
+ return m(
+ '.chat-bubble-container' + (isOwn ? '.outgoing' : '.incoming'),
+ [
+ !isOwn && m('.chat-sender', senderName),
+ m('.chat-bubble', text),
+ m('.chat-time', time),
+ ]
+ );
+ })
+ ),
+ m('.chat-input-area', [
+ m('textarea.chat-textarea', {
+ placeholder: 'Type your message... Press Enter to send',
+ value: State.chatInputMsg,
+ oninput: (e) => {
+ State.chatInputMsg = e.target.value;
+ },
+ onkeydown: (e) => {
+ if (e.code === 'Enter' && !e.shiftKey) {
+ e.preventDefault();
+ sendDirectChatMessage();
+ }
+ },
+ }),
+ m(
+ 'button.send-btn',
+ {
+ onclick: () => sendDirectChatMessage(),
+ },
+ [m('i.fas.fa-paper-plane'), ' Send']
+ ),
+ ]),
+ ]);
+ },
+ };
+};
+
+module.exports = ChatTab;
diff --git a/webui-src/app/network/network_data.js b/webui-src/app/network/network_data.js
index de6bc61..427cbf3 100644
--- a/webui-src/app/network/network_data.js
+++ b/webui-src/app/network/network_data.js
@@ -33,28 +33,68 @@ Data.refreshGpgDetails = async function () {
(stat) => (isOnline = stat.retval)
)
.then(() => {
- const loc = {
- name: data.location,
- id: data.id,
- lastSeen: data.lastConnect,
- isOnline,
- gpg_id: data.gpg_id,
- };
+ let customState = '';
+ return rs
+ .rsJsonApiRequest(
+ '/rsChats/getCustomStateString',
+ { peer_id: data.id },
+ (statusData) => {
+ if (statusData && statusData.retval) {
+ customState = statusData.retval;
+ }
+ }
+ )
+ .catch(() => {})
+ .then(() => {
+ let avatar = '';
+ return rs
+ .rsJsonApiRequest(
+ '/rsChats/getAvatar',
+ { pid: data.id },
+ (avatarData) => {
+ if (avatarData && avatarData.retval && avatarData.avatar_base64_string) {
+ avatar = avatarData.avatar_base64_string;
+ }
+ }
+ )
+ .catch(() => {})
+ .then(() => {
+ const gpgId = (data.gpg_id || '').toLowerCase();
+ const loc = {
+ name: data.location,
+ id: data.id,
+ lastSeen: data.lastConnect,
+ isOnline,
+ gpg_id: gpgId,
+ customState,
+ avatar,
+ };
- if (details[data.gpg_id] === undefined) {
- details[data.gpg_id] = {
- name: data.name,
- isSearched: true,
- isOnline,
- locations: [loc],
- };
- } else {
- details[data.gpg_id].locations.push(loc);
- }
- details[data.gpg_id].isOnline = details[data.gpg_id].isOnline || isOnline;
+ if (details[gpgId] === undefined) {
+ details[gpgId] = {
+ name: data.name,
+ isSearched: true,
+ isOnline,
+ locations: [loc],
+ customState,
+ avatar: avatar || '',
+ };
+ } else {
+ details[gpgId].locations.push(loc);
+ if (avatar) {
+ details[gpgId].avatar = avatar;
+ }
+ if (!details[gpgId].customState || (isOnline && customState)) {
+ details[gpgId].customState = customState;
+ }
+ }
+ details[gpgId].isOnline = details[gpgId].isOnline || isOnline;
+ });
+ });
});
})
);
+
Data.gpgDetails = details;
};
module.exports = Data;
diff --git a/webui-src/app/network/network_details_tab.js b/webui-src/app/network/network_details_tab.js
new file mode 100644
index 0000000..44793fc
--- /dev/null
+++ b/webui-src/app/network/network_details_tab.js
@@ -0,0 +1,151 @@
+const m = require('mithril');
+const rs = require('rswebui');
+const widget = require('widgets');
+const Data = require('network/network_data');
+const peopleUtil = require('people/people_util');
+const { State, startDirectChat, getOnlineSslId } = require('network/network_state');
+
+const ConfirmRemove = () => {
+ return {
+ view: (vnode) => [
+ m('h3', 'Remove Friend'),
+ m('hr'),
+ m('p', 'Are you sure you want to end connections with this node?'),
+ m(
+ 'button',
+ {
+ onclick: () => {
+ rs.rsJsonApiRequest('/rsPeers/removeFriend', {
+ pgpId: vnode.attrs.gpg_id,
+ });
+ State.selectedFriendGpgId = null;
+ Data.refreshGpgDetails().then(() => m.redraw());
+ widget.popupMessage(m('p', 'Friend removed successfully.'));
+ },
+ },
+ 'Confirm'
+ ),
+ ],
+ };
+};
+
+const DetailsTab = () => {
+ return {
+ view: () => {
+ const gpgId = State.selectedFriendGpgId;
+ const friend = Data.gpgDetails[gpgId];
+ if (!friend) return null;
+
+ const friendGxsId = State.gpgToGxsIdMap[gpgId.toLowerCase()];
+
+ return m('.network-detail-view', [
+ m('.detail-header', [
+ m('.friend-avatar', m(peopleUtil.UserAvatar, {
+ avatar: friend.avatar ? { mData: { base64: friend.avatar } } : undefined,
+ firstLetter: (friend.name || '?').slice(0, 1).toUpperCase(),
+ size: 128,
+ seed: gpgId,
+ })),
+ m('.detail-title', [
+ m('h2', friend.name),
+ m('.detail-subtitle', [
+ m('i.fas.fa-fingerprint'),
+ m('span', 'GPG ID: ' + gpgId),
+ ]),
+ ]),
+ m('.detail-actions', [
+ m(
+ 'button',
+ {
+ onclick: () => {
+ const sslId = getOnlineSslId(gpgId);
+ if (sslId) {
+ State.activeTab = 'chat';
+ startDirectChat(sslId);
+ }
+ },
+ },
+ [m('i.fas.fa-comments'), ' Start Chat']
+ ),
+ m(
+ 'button',
+ {
+ onclick: () => {
+ State.showMailCompose = true;
+ },
+ },
+ [m('i.fas.fa-envelope'), ' Send Mail']
+ ),
+ ]),
+ ]),
+
+ m('.detail-section', [
+ m('h3', 'Profile Info'),
+ m('.info-grid', [
+ m('.info-label', 'Status'),
+ m(
+ '.info-value',
+ { style: friend.isOnline ? 'color: #10b981; font-weight: 600;' : '' },
+ friend.isOnline ? 'Online' : 'Offline'
+ ),
+ m('.info-label', 'Custom Status'),
+ m(
+ '.info-value',
+ { style: 'font-style: italic; color: #64748b;' },
+ friend.customState || 'None'
+ ),
+ friendGxsId ? [
+ m('.info-label', 'GXS Identity'),
+ m('.info-value', friendGxsId),
+ ] : null,
+ m('.info-label', 'Node GPG Key'),
+ m('.info-value', gpgId),
+ ]),
+ ]),
+
+ m('.detail-section', [
+ m('h3', 'Locations (' + friend.locations.length + ')'),
+ m(
+ '.locations-grid',
+ friend.locations
+ .slice()
+ .sort((a, b) => (a.isOnline === b.isOnline ? 0 : a.isOnline ? -1 : 1))
+ .map((loc) =>
+ m('.location-card', { key: loc.id }, [
+ m('.loc-header', [
+ m('.loc-name', loc.name),
+ m(
+ '.loc-status' + (loc.isOnline ? '.online' : '.offline'),
+ loc.isOnline ? 'Online' : 'Offline'
+ ),
+ ]),
+ m('.loc-body', [
+ m('.loc-label', 'SSL ID'),
+ m('.loc-val', loc.id),
+ m('.loc-label', 'Last Seen'),
+ m('.loc-val', new Date(loc.lastSeen * 1000).toLocaleString()),
+ ]),
+ m('.loc-footer', [
+ m(
+ 'button.red',
+ {
+ onclick: () =>
+ widget.popupMessage(
+ m(ConfirmRemove, {
+ gpg_id: loc.gpg_id,
+ })
+ ),
+ },
+ 'Remove Location'
+ ),
+ ]),
+ ])
+ )
+ ),
+ ]),
+ ]);
+ },
+ };
+};
+
+module.exports = DetailsTab;
diff --git a/webui-src/app/network/network_friends_list.js b/webui-src/app/network/network_friends_list.js
new file mode 100644
index 0000000..cee5328
--- /dev/null
+++ b/webui-src/app/network/network_friends_list.js
@@ -0,0 +1,107 @@
+const m = require('mithril');
+const Data = require('network/network_data');
+const peopleUtil = require('people/people_util');
+const { State, startDirectChat, getOnlineSslId } = require('network/network_state');
+
+const OwnProfileCard = () => {
+ return {
+ view: () => {
+ const avatar = State.ownProfile.avatar ? { mData: { base64: State.ownProfile.avatar } } : undefined;
+ const firstLetter = (State.ownProfile.name || 'U').slice(0, 1).toUpperCase();
+
+ return m('.own-profile-card', [
+ m('.profile-header', [
+ m(peopleUtil.UserAvatar, { avatar, firstLetter, seed: State.ownProfile.name }),
+ m('.profile-info', [
+ m('.profile-name', State.ownProfile.name || 'Loading...'),
+ m('.profile-status', 'Online'),
+ State.ownProfile.customState &&
+ m(
+ '.profile-custom-status',
+ {
+ style: 'font-size: 0.8rem; color: #94a3b8; font-style: italic; margin-top: 2px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; max-width: 150px;',
+ title: State.ownProfile.customState,
+ },
+ State.ownProfile.customState
+ ),
+ ]),
+ ]),
+ ]);
+ },
+ };
+};
+
+const FriendsList = () => {
+ return {
+ view: () => {
+ const search = State.searchString.toLowerCase();
+ const filteredFriends = Object.entries(Data.gpgDetails).filter(
+ ([gpgId, friend]) => (friend.name || '').toLowerCase().includes(search)
+ );
+
+ return m('.friends-list-container', [
+ m('.searchbar-container', [
+ m('input.searchbar', {
+ type: 'text',
+ placeholder: 'Search friends...',
+ value: State.searchString,
+ oninput: (e) => {
+ State.searchString = e.target.value;
+ },
+ }),
+ ]),
+ m('.friends-scroll', [
+ filteredFriends.length === 0
+ ? m('p', { style: 'padding: 1rem; color: #94a3b8; text-align: center;' }, 'No friends found')
+ : filteredFriends
+ .sort((a, b) => (a[1].isOnline === b[1].isOnline ? 0 : a[1].isOnline ? -1 : 1))
+ .map(([gpgId, friend]) => {
+ const avatar = friend.avatar ? { mData: { base64: friend.avatar } } : undefined;
+ const firstLetter = (friend.name || '?').slice(0, 1).toUpperCase();
+ const isSelected = State.selectedFriendGpgId === gpgId;
+
+ return m(
+ `.friend-list-item${isSelected ? '.selected' : ''}`,
+ {
+ key: gpgId,
+ onclick: () => {
+ State.selectedFriendGpgId = gpgId;
+ State.currentChatPeerId = null;
+ State.chatMessages = [];
+ if (State.activeTab === 'chat') {
+ const sslId = getOnlineSslId(gpgId);
+ if (sslId) startDirectChat(sslId);
+ }
+ },
+ },
+ [
+ m('.friend-avatar', m(peopleUtil.UserAvatar, { avatar, firstLetter, seed: gpgId })),
+ m('.friend-meta', [
+ m('.friend-name', friend.name),
+ m(
+ `.friend-status${friend.isOnline ? '.online' : ''}`,
+ friend.isOnline ? 'Online' : 'Offline'
+ ),
+ friend.customState &&
+ m(
+ '.friend-custom-status',
+ {
+ style: 'font-size: 0.85rem; color: #64748b; margin-top: 2px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; max-width: 160px;',
+ title: friend.customState,
+ },
+ friend.customState
+ ),
+ ]),
+ ]
+ );
+ }),
+ ]),
+ ]);
+ },
+ };
+};
+
+module.exports = {
+ OwnProfileCard,
+ FriendsList,
+};
diff --git a/webui-src/app/network/network_state.js b/webui-src/app/network/network_state.js
new file mode 100644
index 0000000..be29209
--- /dev/null
+++ b/webui-src/app/network/network_state.js
@@ -0,0 +1,190 @@
+const m = require('mithril');
+const rs = require('rswebui');
+const Data = require('network/network_data');
+const peopleUtil = require('people/people_util');
+
+const State = {
+ ownProfile: {
+ name: 'Loading...',
+ ssl_id: '',
+ gpg_id: '',
+ customState: '',
+ avatar: '',
+ },
+ ownGxsIds: [],
+ selectedOwnGxsId: '',
+ selectedOwnGxsDetails: null,
+ selectedFriendGpgId: null,
+ activeTab: 'details', // 'details' | 'chat'
+ searchString: '',
+ gpgToGxsIdMap: {},
+ gxsIdToDetailsMap: {},
+ gxsIdentities: [],
+ currentChatPeerId: null,
+ chatMessages: [],
+ chatInputMsg: '',
+ showMailCompose: false,
+};
+
+function loadOwnProfile() {
+ rs.rsJsonApiRequest('/rsConfig/getConfigNetStatus', {}, (data) => {
+ if (data && data.status) {
+ State.ownProfile.name = data.status.ownName || 'Unknown';
+ State.ownProfile.ssl_id = data.status.ownId || '';
+
+ if (State.ownProfile.ssl_id) {
+ rs.rsJsonApiRequest('/rsChats/getCustomStateString', { peer_id: State.ownProfile.ssl_id }, (statusData) => {
+ if (statusData && statusData.retval) {
+ State.ownProfile.customState = statusData.retval;
+ m.redraw();
+ }
+ });
+
+ rs.rsJsonApiRequest('/rsPeers/getPeerDetails', { sslId: State.ownProfile.ssl_id }, (detData) => {
+ if (detData && detData.det && detData.det.gpg_id) {
+ State.ownProfile.gpg_id = detData.det.gpg_id;
+ m.redraw();
+ }
+ });
+
+ rs.rsJsonApiRequest('/rsChats/getAvatar', { pid: State.ownProfile.ssl_id }, (avatarData) => {
+ if (avatarData && avatarData.retval && avatarData.avatar_base64_string) {
+ State.ownProfile.avatar = avatarData.avatar_base64_string;
+ m.redraw();
+ }
+ });
+ }
+ m.redraw();
+ }
+ });
+
+ peopleUtil.ownIds((ids) => {
+ if (ids) {
+ State.ownGxsIds = ids.filter(
+ (id) => id && id !== '0000000000000000' && Number(id) !== 0
+ );
+ if (State.ownGxsIds.length > 0 && !State.selectedOwnGxsId) {
+ State.selectedOwnGxsId = State.ownGxsIds[0];
+ loadSelectedOwnGxsDetails();
+ }
+ m.redraw();
+ }
+ });
+}
+
+function loadSelectedOwnGxsDetails() {
+ if (!State.selectedOwnGxsId) return;
+ rs.rsJsonApiRequest(
+ '/rsIdentity/getIdDetails',
+ { id: State.selectedOwnGxsId },
+ (data) => {
+ if (data && data.details) {
+ State.selectedOwnGxsDetails = data.details;
+ m.redraw();
+ }
+ }
+ );
+}
+
+function fetchIdDetails(gxsId) {
+ if (!gxsId) return;
+ if (State.gxsIdToDetailsMap[gxsId] === undefined) {
+ State.gxsIdToDetailsMap[gxsId] = null;
+ rs.rsJsonApiRequest('/rsIdentity/getIdDetails', { id: gxsId }, (detData) => {
+ if (detData && detData.details) {
+ State.gxsIdToDetailsMap[gxsId] = detData.details;
+ const pgpId = detData.details.mPgpId;
+ if (pgpId && pgpId !== '0000000000000000') {
+ State.gpgToGxsIdMap[pgpId.toLowerCase()] = gxsId;
+ }
+ m.redraw();
+ }
+ });
+ }
+}
+
+function loadGxsIdentities() {
+ rs.rsJsonApiRequest('/rsIdentity/getIdentitiesSummaries', {}, (data) => {
+ if (data && data.ids) {
+ State.gxsIdentities = data.ids.map((u) => u.mGroupId);
+ m.redraw();
+ }
+ });
+}
+
+function startDirectChat(sslId) {
+ State.currentChatPeerId = sslId;
+ State.chatMessages = [];
+ loadDirectChatMessages();
+}
+
+function getOnlineSslId(gpgId) {
+ const friend = Data.gpgDetails[gpgId];
+ if (!friend || !friend.locations || friend.locations.length === 0) return null;
+ const onlineLoc = friend.locations.find((loc) => loc.isOnline);
+ return onlineLoc ? onlineLoc.id : friend.locations[0].id;
+}
+
+function loadDirectChatMessages() {
+ rs.events[15].notify = (chatMessage) => {
+ if (
+ chatMessage.chat_id &&
+ (chatMessage.chat_id.type === 1 || chatMessage.chat_id.type === 2) &&
+ rs.idToHex(chatMessage.chat_id) === State.currentChatPeerId
+ ) {
+ State.chatMessages.push(chatMessage);
+ m.redraw();
+ scrollChatToBottom();
+ }
+ };
+}
+
+function sendDirectChatMessage() {
+ if (!State.chatInputMsg.trim() || !State.currentChatPeerId) return;
+
+ const msg = State.chatInputMsg;
+ State.chatInputMsg = '';
+
+ rs.rsJsonApiRequest(
+ '/rsChats/sendChat',
+ {
+ id: { type: 1, peer_id: State.currentChatPeerId },
+ msg: msg,
+ },
+ (data, success) => {
+ if (success) {
+ State.chatMessages.push({
+ chat_id: { type: 1, peer_id: State.currentChatPeerId },
+ msg,
+ sendTime: Date.now() / 1000,
+ incoming: false,
+ own: true,
+ });
+ m.redraw();
+ scrollChatToBottom();
+ } else {
+ console.error('[RS] Failed to send direct chat message');
+ }
+ }
+ );
+}
+
+function scrollChatToBottom() {
+ setTimeout(() => {
+ const el = document.getElementById('chat-messages-container');
+ if (el) el.scrollTop = el.scrollHeight;
+ }, 100);
+}
+
+module.exports = {
+ State,
+ loadOwnProfile,
+ loadSelectedOwnGxsDetails,
+ fetchIdDetails,
+ loadGxsIdentities,
+ startDirectChat,
+ getOnlineSslId,
+ loadDirectChatMessages,
+ sendDirectChatMessage,
+ scrollChatToBottom,
+};
diff --git a/webui-src/app/people/people.js b/webui-src/app/people/people.js
index 4c64942..249ecf4 100644
--- a/webui-src/app/people/people.js
+++ b/webui-src/app/people/people.js
@@ -1,25 +1,210 @@
const m = require('mithril');
const rs = require('rswebui');
+const Data = require('network/network_data');
+const compose = require('mail/mail_compose');
+const {
+ State,
+ fetchIdDetails,
+ loadGxsIdentities,
+ loadOwnGxsIds,
+ preloadAllChatHistory,
+ syncFilter,
+ startStatusPolling,
+ stopStatusPolling,
+ initializeDistantChat,
+} = require('people/people_state');
-const peopleUtil = require('people/people_util');
+const PeopleSidebar = require('people/people_sidebar');
+const DetailsTab = require('people/people_details_tab');
+const ChatTab = require('people/people_chat_tab');
+
+const PeopleLayout = () => {
+ const dismissMenu = () => {
+ if (State.activeMenu) {
+ State.activeMenu = null;
+ m.redraw();
+ }
+ };
-const AllContacts = () => {
- const list = peopleUtil.sortUsers(rs.userList.users);
return {
+ oninit: (vnode) => {
+ syncFilter(vnode.attrs.tab);
+ Data.refreshGpgDetails().then(() => m.redraw());
+ loadGxsIdentities();
+ loadOwnGxsIds().then(() => preloadAllChatHistory());
+ preloadAllChatHistory();
+ window.addEventListener('click', dismissMenu);
+
+ // Register for chatEvents to receive live incoming messages
+ rs.events[15].notify = (chatMessage) => {
+ const msgCid = chatMessage.chat_id;
+ if (msgCid && msgCid.type === 2) {
+ const msgPid = rs.idToHex(msgCid.distant_chat_id);
+
+ // Find active session matching this distant chat PID
+ let session = null;
+ let targetGxsId = null;
+ Object.keys(State.activeDistantChats || {}).forEach((id) => {
+ if (State.activeDistantChats[id] && State.activeDistantChats[id].pid === msgPid) {
+ session = State.activeDistantChats[id];
+ targetGxsId = id;
+ }
+ });
+
+ if (session) {
+ const isNearDuplicate = session.messages.some(
+ (m) => (m.msg || m.message) === chatMessage.msg && Math.abs(m.sendTime - chatMessage.sendTime) < 5
+ );
+ if (!isNearDuplicate) {
+ session.messages.push(chatMessage);
+ session.messages.sort((a, b) => a.sendTime - b.sendTime);
+ if (targetGxsId) {
+ State.chatHistoryMap[targetGxsId] = {
+ lastMsg: chatMessage.msg || chatMessage.message || '',
+ lastTime: chatMessage.sendTime || Math.floor(Date.now() / 1000),
+ };
+ }
+ m.redraw();
+ if (State.selectedId === targetGxsId) {
+ setTimeout(() => {
+ const element = document.querySelector('.chat-messages');
+ if (element) element.scrollTop = element.scrollHeight;
+ }, 100);
+ }
+ }
+ } else if (State.chatPid && msgPid === State.chatPid) {
+ const isNearDuplicate = State.chatMessages.some(
+ (m) => (m.msg || m.message) === chatMessage.msg && Math.abs(m.sendTime - chatMessage.sendTime) < 5
+ );
+ if (!isNearDuplicate) {
+ State.chatMessages.push(chatMessage);
+ State.chatMessages.sort((a, b) => a.sendTime - b.sendTime);
+ m.redraw();
+ setTimeout(() => {
+ const element = document.querySelector('.chat-messages');
+ if (element) element.scrollTop = element.scrollHeight;
+ }, 100);
+ }
+ }
+ }
+ };
+
+ if (State.chatPid && !State.chatDisconnected) {
+ startStatusPolling();
+ }
+ },
+ onremove: () => {
+ if (rs.events[15]) {
+ rs.events[15].notify = () => {};
+ }
+ stopStatusPolling();
+ window.removeEventListener('click', dismissMenu);
+ },
+
+ onupdate: (vnode) => {
+ syncFilter(vnode.attrs.tab);
+ },
view: () => {
- return m('.widget', [
- m('.widget__heading', [
- m('h3', 'Contacts', m('span.counter', list.length)),
- m(peopleUtil.SearchBar),
+ fetchIdDetails(State.selectedId);
+ const details = State.selectedId ? State.gxsIdToDetailsMap[State.selectedId] : null;
+ const name = details ? details.mNickname || details.mGroupName || 'Unknown' : '';
+
+ return m('.people-container', [
+ // Left Side Panel
+ m(PeopleSidebar),
+
+ // Right Side Details / Actions Pane
+ m('.people-right-pane', [
+ State.selectedId && details
+ ? [
+ m('.network-tabs', [
+ m(
+ 'button.tab-btn' + (State.activeTab === 'details' ? '.active' : ''),
+ {
+ onclick: () => {
+ State.activeTab = 'details';
+ stopStatusPolling();
+ },
+ },
+ 'Profile Details'
+ ),
+ m(
+ 'button.tab-btn' + (State.activeTab === 'chat' ? '.active' : ''),
+ {
+ onclick: () => {
+ State.activeTab = 'chat';
+ initializeDistantChat();
+ },
+ },
+ 'Chat Conversation'
+ ),
+ ]),
+ m('.network-tab-content', [
+ State.activeTab === 'details' ? m(DetailsTab) : m(ChatTab),
+ ]),
+ ]
+ : m('.network-pane-placeholder', [
+ m('i.fas.fa-users'),
+ m('p', 'Select an identity from the left panel to view profile details or perform actions.'),
+ ]),
]),
- m('.widget__body', [list.map((id) => m(peopleUtil.regularcontactInfo, { id }))]),
+
+ // Mail composer overlay popup
+ State.showMailCompose &&
+ State.selectedId &&
+ m(
+ '.composePopupOverlay#mailComposerPopup',
+ { style: { display: 'block' } },
+ m(
+ '.composePopup',
+ m(compose, {
+ msgType: 'compose',
+ toId: State.selectedId,
+ friendName: name,
+ isDirectMail: false,
+ setShowCompose: (val) => {
+ State.showMailCompose = val;
+ },
+ }),
+ m(
+ 'button.red.close-btn',
+ {
+ onclick: () => {
+ State.showMailCompose = false;
+ },
+ },
+ m('i.fas.fa-times')
+ )
+ )
+ ),
]);
},
};
};
-module.exports = {
- view: () => {
- return m(AllContacts);
- },
+PeopleLayout.setSelectedId = (id, activeTab = 'details', showCompose = false) => {
+ const isOwn = State.ownGxsIds.includes(id);
+ const entry = rs.userList.userMap[id];
+ const isContact = entry && entry.isContact;
+
+ let filter = 'all';
+ let route = '/people/All';
+ if (isOwn) {
+ filter = 'own';
+ route = '/people/OwnIdentity';
+ } else if (isContact) {
+ filter = 'contacts';
+ route = '/people/MyContacts';
+ }
+
+ State.activeFilter = filter;
+ State.selectedId = id;
+ State.activeTab = activeTab;
+ if (showCompose) {
+ State.showMailCompose = true;
+ }
+
+ m.route.set(route);
};
+
+module.exports = PeopleLayout;
diff --git a/webui-src/app/people/people_chat_tab.js b/webui-src/app/people/people_chat_tab.js
new file mode 100644
index 0000000..5221fa7
--- /dev/null
+++ b/webui-src/app/people/people_chat_tab.js
@@ -0,0 +1,341 @@
+const m = require('mithril');
+const rs = require('rswebui');
+const {
+ State,
+ fetchIdDetails,
+ getStatusColor,
+ getStatusTooltip,
+ initializeDistantChat,
+ sendDistantChatMessage,
+ stopStatusPolling,
+ loadAllHistoryForSelectedPeer,
+} = require('people/people_state');
+const { renderChatMessage } = require('chat/chat_state');
+const chatEmoji = require('chat/chat_emoji');
+const peopleUtil = require('people/people_util');
+const HistoryBrowserModal = require('people/people_history');
+
+// Mirroring C++ Distant Chat packet size limit (200KB)
+function formatChatImage(file, callback) {
+ if (!file) return;
+ const reader = new FileReader();
+ reader.onload = (evt) => {
+ const img = new Image();
+ img.onload = () => {
+ // Bounding box for Distant Chat images: 800x600 max
+ const maxWidth = 800;
+ const maxHeight = 600;
+ let width = img.width;
+ let height = img.height;
+
+ if (width > maxWidth || height > maxHeight) {
+ const ratio = Math.min(maxWidth / width, maxHeight / height);
+ width = Math.round(width * ratio);
+ height = Math.round(height * ratio);
+ }
+
+ const canvas = document.createElement('canvas');
+ canvas.width = width;
+ canvas.height = height;
+ const ctx = canvas.getContext('2d');
+ ctx.drawImage(img, 0, 0, width, height);
+
+ // Dynamically step down JPEG quality until base64 string is under 190,000 characters (190KB)
+ let quality = 0.85;
+ let dataUrl = canvas.toDataURL('image/jpeg', quality);
+ while (dataUrl.length > 190000 && quality > 0.20) {
+ quality -= 0.10;
+ dataUrl = canvas.toDataURL('image/jpeg', quality);
+ }
+
+ if (dataUrl.length <= 200000) {
+ callback(`
`);
+ } else {
+ alert('Image file is too large to send over Distant Chat 200KB packet size limit.');
+ callback(null);
+ }
+ };
+ img.onerror = () => callback(null);
+ img.src = evt.target.result;
+ };
+ reader.readAsDataURL(file);
+}
+
+const ChatTab = () => {
+ return {
+ view: () => {
+ fetchIdDetails(State.selectedId);
+ const details = State.selectedId ? State.gxsIdToDetailsMap[State.selectedId] : null;
+ if (!details) return null;
+
+ const name = details.mNickname || details.mGroupName || 'Unknown';
+
+ if (State.ownGxsIds.length === 0) {
+ return m('.chat-warning', [
+ m('i.fas.fa-exclamation-triangle'),
+ m('h4', 'No Identities Found'),
+ m('p', 'You need to create a GXS identity in the "My Identities" tab before you can start distant chats.'),
+ ]);
+ }
+
+ if (State.chatDisconnected) {
+ return m('.chat-warning', [
+ m('i.fas.fa-unlink', { style: 'font-size: 2rem; color: #ef4444; margin-bottom: 1rem;' }),
+ m('h4', 'Conversation Ended'),
+ m('p', 'You have closed the distant chat tunnel. Click below to reconnect.'),
+ m('button.blue', {
+ style: 'margin-top: 1rem; padding: 0.5rem 1.5rem; border-radius: 0.375rem; border: none; font-weight: 600; cursor: pointer;',
+ onclick: () => initializeDistantChat(),
+ }, 'Reconnect'),
+ ]);
+ }
+
+ if (!State.chatPid) {
+ return m('.chat-warning', [
+ m('i.fas.fa-spinner.fa-spin'),
+ m('h4', 'Connecting...'),
+ m('p', 'Initiating distant chat tunnel to the peer identity...'),
+ ]);
+ }
+
+ const canTalk = State.distantChatStatus && State.distantChatStatus.status === 2;
+
+ // Filter history by search query for history modal
+ const query = (State.historySearchQuery || '').toLowerCase();
+ const filteredHistory = (State.fullHistoryMessages || []).filter((msg) => {
+ if (!query) return true;
+ const text = (msg.msg || msg.message || '').toLowerCase();
+ return text.includes(query);
+ });
+
+ return m('.network-chat-view', [
+ m('.chat-identity-select-container', {
+ style: 'padding: 0.5rem 1rem; background-color: #ffffff; border-bottom: 1px solid #cbd5e1; display: flex; align-items: center; justify-content: space-between; font-size: 0.85rem;',
+ }, [
+ m('.chat-tunnel-status', { style: 'display: flex; align-items: center; gap: 0.5rem;' }, [
+ m('span', { style: 'color: #64748b; font-weight: 500;' }, 'Distant Chat Tunnel'),
+ m('i.fas.fa-circle', {
+ style: {
+ color: getStatusColor(State.distantChatStatus ? State.distantChatStatus.status : 0),
+ fontSize: '0.85rem',
+ transition: 'color 0.3s ease',
+ },
+ title: getStatusTooltip(State.distantChatStatus ? State.distantChatStatus.status : 0),
+ }),
+ ]),
+ m('.chat-actions', { style: 'display: flex; align-items: center; gap: 0.75rem;' }, [
+ m('.select-own-profile', { style: 'display: flex; align-items: center; gap: 0.5rem;' }, [
+ m('span', { style: 'color: #64748b;' }, 'Chatting as:'),
+ (() => {
+ const ownId = State.selectedOwnGxsIdForChat;
+ if (ownId) fetchIdDetails(ownId);
+ const ownDetails = State.gxsIdToDetailsMap[ownId];
+ return m('.own-profile-badge', { style: 'display: flex; align-items: center; gap: 0.4rem;' }, [
+ m(peopleUtil.UserAvatar, {
+ avatar: ownDetails ? ownDetails.mAvatar : null,
+ identityId: ownId,
+ size: 24,
+ }),
+ m('select', {
+ style: 'padding: 0.25rem 0.5rem; border-radius: 0.25rem; border: 1px solid #cbd5e1; outline: none; background: #f8fafc; font-weight: 600;',
+ value: ownId,
+ onchange: (e) => {
+ State.selectedOwnGxsIdForChat = e.target.value;
+ initializeDistantChat(true);
+ },
+ }, State.ownGxsIds.map((id) => m('option', { value: id }, rs.userList.username(id)))),
+ ]);
+ })(),
+ ]),
+ m('button.blue.history-btn', {
+ style: 'padding: 0.25rem 0.75rem; border-radius: 0.25rem; font-size: 0.85rem; display: flex; align-items: center; gap: 0.35rem; border: none; cursor: pointer; background-color: #3b82f6; color: #ffffff; font-weight: 600;',
+ title: 'View all past chat history with this contact',
+ onclick: () => {
+ State.showHistoryModal = true;
+ State.historySearchQuery = '';
+ loadAllHistoryForSelectedPeer();
+ },
+ }, [
+ m('i.fas.fa-history', { style: 'color: #ffffff;' }),
+ 'History',
+ ]),
+ m('button.red.leave-btn', {
+ style: 'padding: 0.25rem 0.75rem; border-radius: 0.25rem; font-size: 0.85rem; display: flex; align-items: center; gap: 0.25rem; border: none; cursor: pointer; background-color: #ef4444; color: #ffffff;',
+ onclick: () => {
+ if (confirm('Are you sure you want to leave this distant chat conversation?')) {
+ rs.rsJsonApiRequest(
+ '/rsChats/closeDistantChatConnexion',
+ {
+ pid: State.chatPid,
+ },
+ (data, success) => {
+ if (success) {
+ if (State.selectedId && State.activeDistantChats[State.selectedId]) {
+ delete State.activeDistantChats[State.selectedId];
+ }
+ State.chatPid = null;
+ State.chatMessages = [];
+ State.distantChatStatus = null;
+ State.chatDisconnected = true;
+ stopStatusPolling();
+ m.redraw();
+ }
+ }
+ );
+ }
+ },
+ }, [
+
+ m('i.fas.fa-sign-out-alt'),
+ 'Leave Chat',
+ ]),
+ ]),
+ ]),
+
+ m('.chat-messages', [
+ State.chatMessages.length === 0
+ ? m('.chat-warning', [
+ m('i.fas.fa-comments'),
+ m('h4', 'No Messages'),
+ m('p', 'Distant chats are secure and encrypted. Start the conversation by typing a message below.'),
+ ])
+ : State.chatMessages.map((msg) => {
+ if (msg.isSystem) {
+ const text = msg.msg || msg.message;
+ const isSecured = text.includes('secured') || text.includes('talk');
+ const bgColor = isSecured ? '#fffbeb' : '#f8fafc';
+ const borderColor = isSecured ? '#fcd34d' : '#cbd5e1';
+ const textColor = isSecured ? '#b45309' : '#475569';
+ const borderStyle = isSecured ? 'solid' : 'dashed';
+
+ return m('.chat-bubble-container.incoming', [
+ m('.chat-sender', 'Chat status'),
+ m('.chat-bubble', {
+ style: {
+ backgroundColor: bgColor,
+ border: `1px ${borderStyle} ${borderColor}`,
+ color: textColor,
+ },
+ }, text),
+ m('.chat-time', new Date(msg.sendTime * 1000).toLocaleTimeString()),
+ ]);
+ }
+ const isIncoming = msg.incoming;
+ const senderName = isIncoming ? name : rs.userList.username(State.selectedOwnGxsIdForChat);
+ const rawText = msg.msg || msg.message || '';
+
+ return m('.chat-bubble-container' + (isIncoming ? '.incoming' : '.outgoing'), [
+ m('.chat-sender', senderName),
+ m('.chat-bubble', renderChatMessage(rawText)),
+ m('.chat-time', new Date(msg.sendTime * 1000).toLocaleTimeString()),
+ ]);
+ }),
+ ]),
+
+ m('.chat-input-area', { style: 'display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem; background: #ffffff; border-top: 1px solid #cbd5e1;' }, [
+ m('button.chat-hub-action-btn', {
+ disabled: !canTalk,
+ style: !canTalk ? 'opacity: 0.5; cursor: not-allowed;' : '',
+ title: 'Attach file link',
+ onclick: () => {
+ const path = prompt('Enter file path to attach as Retroshare link:');
+ if (path && path.trim()) {
+ const val = State.chatInputMsg || '';
+ State.chatInputMsg = val ? val + '\n' + path.trim() : path.trim();
+ m.redraw();
+ }
+ }
+ }, m('i.fas.fa-paperclip')),
+
+ m('.emoji-picker-wrapper', { style: 'position: relative;' }, [
+ m('button.chat-hub-action-btn', {
+ disabled: !canTalk,
+ style: !canTalk ? 'opacity: 0.5; cursor: not-allowed;' : '',
+ title: 'Insert emoji',
+ onclick: (e) => {
+ e.stopPropagation();
+ State.showEmojiPicker = !State.showEmojiPicker;
+ }
+ }, m('i.fas.fa-smile')),
+ State.showEmojiPicker && m(chatEmoji.EmojiPicker, {
+ onSelect: (emoji) => {
+ State.chatInputMsg = (State.chatInputMsg || '') + emoji;
+ State.showEmojiPicker = false;
+ m.redraw();
+ }
+ }),
+ ]),
+
+ m('label.chat-hub-action-btn', {
+ title: 'Send image',
+ style: `cursor: ${canTalk ? 'pointer' : 'not-allowed'}; opacity: ${canTalk ? 1 : 0.5};`,
+ }, [
+ m('i.fas.fa-image'),
+ m('input[type=file][accept=image/*]', {
+ style: 'display: none;',
+ disabled: !canTalk,
+ onchange: (e) => {
+ if (!e.target.files || !e.target.files[0]) return;
+ const file = e.target.files[0];
+ formatChatImage(file, (imgTag) => {
+ if (imgTag) {
+ State.chatInputMsg = (State.chatInputMsg || '') + imgTag;
+ m.redraw();
+ }
+ });
+ e.target.value = '';
+ }
+ })
+ ]),
+
+ m('textarea.chat-textarea', {
+ placeholder: canTalk ? 'Type your encrypted message here... (or paste image)' : 'Waiting for tunnel to be secured...',
+ disabled: !canTalk,
+ value: State.chatInputMsg,
+ style: 'flex: 1; resize: none; border: 1px solid #cbd5e1; border-radius: 6px; padding: 0.5rem; font-family: inherit; font-size: 0.9rem; outline: none; min-height: 40px; max-height: 120px;',
+ oninput: (e) => {
+ State.chatInputMsg = e.target.value;
+ },
+ onpaste: (e) => {
+ if (!canTalk) return;
+ const items = (e.clipboardData || (e.originalEvent && e.originalEvent.clipboardData))?.items;
+ if (!items) return;
+ for (let i = 0; i < items.length; i++) {
+ if (items[i].type.indexOf('image') !== -1) {
+ e.preventDefault();
+ const blob = items[i].getAsFile();
+ formatChatImage(blob, (imgTag) => {
+ if (imgTag) {
+ State.chatInputMsg = (State.chatInputMsg || '') + imgTag;
+ m.redraw();
+ }
+ });
+ break;
+ }
+ }
+ },
+ onkeydown: (e) => {
+ if (e.key === 'Enter' && !e.shiftKey) {
+ e.preventDefault();
+ if (canTalk) sendDistantChatMessage();
+ }
+ },
+ }),
+
+ m('button.send-btn.blue', {
+ disabled: !canTalk,
+ style: !canTalk ? 'opacity: 0.5; cursor: not-allowed; height: 38px;' : 'height: 38px;',
+ onclick: () => {
+ if (canTalk) sendDistantChatMessage();
+ },
+ }, [m('i.fas.fa-paper-plane'), ' Send']),
+ ]),
+
+ // Chat History Browser Modal
+ m(HistoryBrowserModal),
+ ]);
+ },
+ };
+};
+
+module.exports = ChatTab;
diff --git a/webui-src/app/people/people_details_tab.js b/webui-src/app/people/people_details_tab.js
new file mode 100644
index 0000000..8dd1657
--- /dev/null
+++ b/webui-src/app/people/people_details_tab.js
@@ -0,0 +1,231 @@
+const m = require('mithril');
+const rs = require('rswebui');
+const widget = require('widgets');
+const peopleUtil = require('people/people_util');
+const ownIdsLayout = require('people/people_ownids');
+const { EditIdentity, DeleteIdentity } = ownIdsLayout;
+const {
+ State,
+ fetchIdDetails,
+ getSafeAvatar,
+ get64Num,
+ createUsageString,
+ loadGxsIdentities,
+ initializeDistantChat,
+} = require('people/people_state');
+
+const DetailsTab = () => {
+ return {
+ view: () => {
+ fetchIdDetails(State.selectedId);
+ const details = State.selectedId ? State.gxsIdToDetailsMap[State.selectedId] : null;
+ if (!details) return null;
+
+ const name = details.mNickname || details.mGroupName || 'Unknown';
+ const isOwn = State.ownGxsIds.includes(State.selectedId);
+ const entry = rs.userList.userMap[State.selectedId];
+ const isContact = entry && entry.isContact;
+ const pgpId = details.mPgpId;
+
+ return m('.network-detail-view', [
+ m('.detail-header', [
+ m('.avatar-container', {
+ style: {
+ display: 'flex',
+ flexDirection: 'column',
+ alignItems: 'center',
+ gap: '0.5rem',
+ marginRight: '1rem',
+ },
+ }, [
+ m('.friend-avatar', m(peopleUtil.UserAvatar, {
+ avatar: getSafeAvatar(details),
+ firstLetter: (name || '?').slice(0, 1).toUpperCase(),
+ identityId: State.selectedId,
+ size: 128,
+ isSquare: true,
+ })),
+ m('.identity-votes', {
+ style: {
+ display: 'flex',
+ alignItems: 'center',
+ gap: '1rem',
+ marginTop: '0.5rem',
+ },
+ }, [
+ m('.vote-positive', {
+ style: {
+ display: 'flex',
+ alignItems: 'center',
+ gap: '0.25rem',
+ color: '#22c55e',
+ fontSize: '1.25rem',
+ fontWeight: 'bold',
+ },
+ }, [
+ m('i.fas.fa-thumbs-up'),
+ m('span', details.mReputation ? details.mReputation.mFriendsPositiveVotes : 0),
+ ]),
+ m('.vote-negative', {
+ style: {
+ display: 'flex',
+ alignItems: 'center',
+ gap: '0.25rem',
+ color: '#ef4444',
+ fontSize: '1.25rem',
+ fontWeight: 'bold',
+ },
+ }, [
+ m('i.fas.fa-thumbs-down'),
+ m('span', details.mReputation ? details.mReputation.mFriendsNegativeVotes : 0),
+ ]),
+ ]),
+ ]),
+ m('.detail-title', [
+ m('h2', name),
+ m('.detail-subtitle', [
+ m('i.fas.fa-id-card'),
+ m('span', isOwn ? 'My Identity' : isContact ? 'Saved Contact' : 'Discovered Identity'),
+ ]),
+ m('.detail-actions', [
+ isOwn
+ ? [
+ m(
+ 'button.btn',
+ {
+ onclick: () =>
+ widget.popupMessage(
+ m(EditIdentity, {
+ details,
+ })
+ ),
+ },
+ [m('i.fas.fa-edit'), ' Edit']
+ ),
+ m(
+ 'button.btn.red',
+ {
+ onclick: () =>
+ widget.popupMessage(
+ m(DeleteIdentity, {
+ id: details.mId,
+ name: details.mNickname,
+ })
+ ),
+ },
+ [m('i.fas.fa-trash-alt'), ' Delete']
+ ),
+ ]
+ : [
+ m(
+ 'button.btn.blue',
+ {
+ onclick: () => {
+ State.activeTab = 'chat';
+ initializeDistantChat();
+ },
+ },
+ [m('i.fas.fa-comment-alt'), ' Start Chat']
+ ),
+ m(
+ 'button.btn.blue',
+ {
+ onclick: () => {
+ State.showMailCompose = true;
+ },
+ },
+ [m('i.fas.fa-envelope'), ' Send Mail']
+ ),
+ m(
+ 'button.btn' + (isContact ? '.red' : '.blue'),
+ {
+ onclick: () => {
+ rs.rsJsonApiRequest(
+ '/rsIdentity/setAsRegularContact',
+ { id: State.selectedId, isContact: !isContact },
+ () => {
+ rs.userList.loadUsers();
+ loadGxsIdentities();
+ }
+ );
+ },
+ },
+ isContact
+ ? [m('i.fas.fa-user-minus'), ' Remove Contact']
+ : [m('i.fas.fa-user-plus'), ' Add Contact']
+ ),
+ ],
+ ]),
+ ]),
+ ]),
+ m('.detail-section', [
+ m('h3', 'Identity Info'),
+ m('.info-grid', [
+ m('.info-label', 'GXS ID'),
+ m('.info-value', details.mId),
+ m('.info-label', 'Type'),
+ m('.info-value', details.mFlags === 14 ? 'Signed ID' : 'Anonymous ID'),
+ m('.info-label', 'Owner Node GPG'),
+ m('.info-value', pgpId && pgpId !== '0000000000000000' ? pgpId : 'None'),
+ m('.info-label', 'Created On'),
+ m(
+ '.info-value',
+ typeof details.mPublishTS === 'object'
+ ? new Date(details.mPublishTS.xint64 * 1000).toLocaleString()
+ : 'Unknown'
+ ),
+ m('.info-label', 'Last Used'),
+ m(
+ '.info-value',
+ typeof details.mLastUsageTS === 'object'
+ ? new Date(details.mLastUsageTS.xint64 * 1000).toLocaleDateString()
+ : 'Unknown'
+ ),
+ m('.info-label', 'Friend votes'),
+ m('.info-value', details.mReputation && (details.mReputation.mFriendsPositiveVotes > 0 || details.mReputation.mFriendsNegativeVotes > 0)
+ ? `${details.mReputation.mFriendsPositiveVotes} positive, ${details.mReputation.mFriendsNegativeVotes} negative`
+ : 'No votes from friends'),
+ m('.info-label', 'Overall'),
+ m('.info-value', (() => {
+ const pos = details.mReputation ? details.mReputation.mFriendsPositiveVotes : 0;
+ const neg = details.mReputation ? details.mReputation.mFriendsNegativeVotes : 0;
+ if (pos > neg) return 'Positive';
+ if (pos < neg) return 'Negative';
+ return 'Neutral';
+ })()),
+ ]),
+ ]),
+ m('.detail-section', [
+ m('h3', 'Usage Statistics'),
+ m('.usage-list', [
+ (!details.mUseCases || details.mUseCases.length === 0)
+ ? m('p.usage-placeholder', { style: 'font-style: italic; color: #64748b; padding: 0.5rem 0;' }, '[No record in current session]')
+ : (() => {
+ const sorted = [...details.mUseCases].sort((a, b) => get64Num(b.value) - get64Num(a.value));
+ return sorted.map((item) => {
+ const usage = item.key;
+ const ts = get64Num(item.value);
+ const dateStr = ts > 0 ? new Date(ts * 1000).toLocaleString() : 'Unknown';
+ return m('.usage-item', {
+ style: {
+ padding: '0.5rem 0',
+ borderBottom: '1px solid #f1f5f9',
+ fontSize: '0.9rem',
+ display: 'flex',
+ gap: '1rem',
+ alignItems: 'flex-start',
+ },
+ }, [
+ m('strong.usage-time', { style: 'color: #64748b; flex-shrink: 0; min-width: 150px;' }, dateStr),
+ m('span.usage-desc', createUsageString(usage)),
+ ]);
+ });
+ })(),
+ ]),
+ ]),
+ ]);
+ },
+ };
+};
+
+module.exports = DetailsTab;
diff --git a/webui-src/app/people/people_history.js b/webui-src/app/people/people_history.js
new file mode 100644
index 0000000..a5ba3b0
--- /dev/null
+++ b/webui-src/app/people/people_history.js
@@ -0,0 +1,127 @@
+const m = require('mithril');
+const rs = require('rswebui');
+const peopleState = require('people/people_state');
+
+const HistoryBrowserModal = () => {
+ return {
+ oninit: (vnode) => {
+ const chatState = require('chat/chat_state');
+ const isRoom = vnode.attrs && vnode.attrs.isRoom;
+ if (isRoom) {
+ chatState.ChatHubState.historySearchQuery = '';
+ const lobbyId = chatState.ChatLobbyModel.currentLobby ? rs.idToHex(chatState.ChatLobbyModel.currentLobby.lobby_id) : null;
+ if (lobbyId) {
+ chatState.ChatLobbyModel.loadAllHistoryForRoom(lobbyId);
+ }
+ } else {
+ peopleState.State.historySearchQuery = '';
+ peopleState.loadAllHistoryForSelectedPeer();
+ }
+ },
+ view: (vnode) => {
+ const chatState = require('chat/chat_state');
+ const isRoom = vnode.attrs && vnode.attrs.isRoom;
+ const stateObj = isRoom ? chatState.ChatHubState : peopleState.State;
+
+ if (!stateObj.showHistoryModal) return null;
+
+ let name = 'Chat History';
+ if (isRoom) {
+ const lobby = chatState.ChatLobbyModel.currentLobby;
+ name = lobby ? lobby.lobby_name : 'Chat Room';
+ } else {
+ const details = peopleState.State.selectedId ? peopleState.State.gxsIdToDetailsMap[peopleState.State.selectedId] : null;
+ name = details ? (details.mNickname || details.mGroupName || 'Contact') : 'Contact';
+ }
+
+ const query = (stateObj.historySearchQuery || '').toLowerCase();
+ const filteredHistory = (stateObj.fullHistoryMessages || []).filter((msg) => {
+ if (!query) return true;
+ const text = (msg.msg || msg.message || '').toLowerCase();
+ return text.includes(query);
+ });
+
+ return m('.history-modal-overlay', {
+ style: 'position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: rgba(15, 23, 42, 0.4); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: 2000;',
+ onclick: (e) => {
+ if (e.target === e.currentTarget) stateObj.showHistoryModal = false;
+ }
+ }, [
+ m('.history-modal', {
+ style: 'background: #ffffff; border-radius: 0.5rem; width: 780px; max-width: 92%; height: 85vh; max-height: 85vh; display: flex; flex-direction: column; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1); overflow: hidden;'
+ }, [
+ // Header
+ m('.history-modal-header', {
+ style: 'padding: 1rem 1.25rem; background: #f8fafc; border-bottom: 1px solid #e2e8f0; display: flex; align-items: center; justify-content: space-between;'
+ }, [
+ m('.history-title', { style: 'display: flex; align-items: center; gap: 0.5rem;' }, [
+ m('i.fas.fa-history', { style: 'color: #3b82f6; font-size: 1.2rem;' }),
+ m('h3', { style: 'margin: 0; font-size: 1.1rem; font-weight: 700; color: #1e293b;' }, `Chat History Browser — ${name}`),
+ ]),
+ m('button.close-btn', {
+ style: 'background: transparent; border: none; font-size: 1.25rem; color: #64748b; cursor: pointer; padding: 0.25rem; border-radius: 0.25rem;',
+ title: 'Close history browser',
+ onclick: () => (stateObj.showHistoryModal = false),
+ }, m('i.fas.fa-times')),
+ ]),
+
+ // Toolbar
+ m('.history-toolbar', {
+ style: 'padding: 0.75rem 1.25rem; background: #ffffff; border-bottom: 1px solid #f1f5f9; display: flex; align-items: center; justify-content: space-between; gap: 1rem;'
+ }, [
+ m('.search-input-box', { style: 'position: relative; flex: 1;' }, [
+ m('i.fas.fa-search', { style: 'position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); color: #94a3b8; font-size: 0.85rem;' }),
+ m('input[type=text][placeholder=Search past messages or keywords...]', {
+ style: 'width: 100%; padding: 0.4rem 0.75rem 0.4rem 2.2rem; border-radius: 0.375rem; border: 1px solid #cbd5e1; outline: none; font-size: 0.85rem;',
+ value: stateObj.historySearchQuery || '',
+ oninput: (e) => (stateObj.historySearchQuery = e.target.value),
+ }),
+ ]),
+ m('span.history-count', { style: 'font-size: 0.85rem; color: #64748b; font-weight: 600;' },
+ `${filteredHistory.length} messages`
+ ),
+ ]),
+
+ // Message Body
+ m('.history-message-list', {
+ style: 'flex: 1; overflow-y: auto; padding: 1rem 1.25rem; display: flex; flex-direction: column; gap: 0.75rem; background: #f8fafc;'
+ }, [
+ stateObj.isHistoryLoading
+ ? m('.loading-spinner', { style: 'text-align: center; padding: 3rem; color: #64748b;' }, [
+ m('i.fas.fa-spinner.fa-spin', { style: 'font-size: 2rem; margin-bottom: 0.75rem; color: #3b82f6;' }),
+ m('p', { style: 'font-weight: 600;' }, 'Fetching complete chat history from Retroshare database...'),
+ ])
+ : filteredHistory.length === 0
+ ? m('.empty-history', { style: 'text-align: center; padding: 3rem; color: #64748b;' }, [
+ m('i.far.fa-comments', { style: 'font-size: 2.5rem; color: #cbd5e1; margin-bottom: 0.75rem;' }),
+ m('p', 'No past chat messages found matching your query.'),
+ ])
+ : filteredHistory.map((msg) => {
+ const isIncoming = msg.incoming;
+ let senderName = msg.peerName || (isIncoming ? name : 'You');
+ if (!isIncoming) {
+ const ownId = isRoom ? (chatState.ChatLobbyModel.currentLobby ? chatState.ChatLobbyModel.currentLobby.gxs_id : '') : peopleState.State.selectedOwnGxsIdForChat;
+ senderName = rs.userList.username(ownId) || 'You';
+ }
+ const timeStr = new Date((msg.sendTime || msg.recvTime || 0) * 1000).toLocaleString();
+
+ return m('.history-item', {
+ style: 'background: #ffffff; border: 1px solid #e2e8f0; border-radius: 0.5rem; padding: 0.75rem 1rem; box-shadow: 0 1px 2px rgba(0,0,0,0.03);'
+ }, [
+ m('.history-item-header', { style: 'display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.4rem;' }, [
+ m('span.sender', { style: `font-weight: 700; font-size: 0.85rem; color: ${isIncoming ? '#3b82f6' : '#10b981'};` }, senderName),
+ m('span.time', { style: 'font-size: 0.75rem; color: #94a3b8;' }, timeStr),
+ ]),
+ m('.history-item-body', { style: 'font-size: 0.9rem; color: #334155; word-break: break-word;' },
+ chatState.renderChatMessage(msg.msg || msg.message || '')
+ ),
+ ]);
+ })
+ ]),
+ ])
+ ]);
+ },
+ };
+};
+
+module.exports = HistoryBrowserModal;
diff --git a/webui-src/app/people/people_ownids.js b/webui-src/app/people/people_ownids.js
index ae02731..91eed52 100644
--- a/webui-src/app/people/people_ownids.js
+++ b/webui-src/app/people/people_ownids.js
@@ -276,6 +276,7 @@ const Identity = () => {
m(peopleUtil.UserAvatar, {
avatar: details.mAvatar,
firstLetter: details.mNickname.slice(0, 1).toUpperCase(),
+ identityId: details.mId,
}),
m('.details', [
m('p', 'ID:'),
@@ -360,4 +361,8 @@ const Layout = () => {
};
};
+Layout.CreateIdentity = CreateIdentity;
+Layout.EditIdentity = EditIdentity;
+Layout.DeleteIdentity = DeleteIdentity;
+
module.exports = Layout;
diff --git a/webui-src/app/people/people_resolver.js b/webui-src/app/people/people_resolver.js
index 07f5efc..7a583f1 100644
--- a/webui-src/app/people/people_resolver.js
+++ b/webui-src/app/people/people_resolver.js
@@ -1,25 +1,9 @@
const m = require('mithril');
-const widget = require('widgets');
-
-const sections = {
- OwnIdentity: require('people/people_ownids'),
- MyContacts: require('people/people_own_contacts'),
- All: require('people/people'),
-};
-
-const Layout = {
- view: (vnode) => [
- m(widget.Sidebar, {
- tabs: Object.keys(sections),
- baseRoute: '/people/',
- }),
- m('.node-panel .', vnode.children),
- ],
-};
+const PeopleLayout = require('people/people');
module.exports = {
view: (vnode) => {
- const tab = vnode.attrs.tab;
- return m(Layout, m(sections[tab]));
+ const tab = vnode.attrs.tab || 'All';
+ return m(PeopleLayout, { tab });
},
};
diff --git a/webui-src/app/people/people_sidebar.js b/webui-src/app/people/people_sidebar.js
new file mode 100644
index 0000000..4b0109e
--- /dev/null
+++ b/webui-src/app/people/people_sidebar.js
@@ -0,0 +1,397 @@
+const m = require('mithril');
+const rs = require('rswebui');
+const widget = require('widgets');
+const peopleUtil = require('people/people_util');
+const ownIdsLayout = require('people/people_ownids');
+const { CreateIdentity } = ownIdsLayout;
+const {
+ State,
+ isSystemMsg,
+ preloadAllChatHistory,
+ fetchIdDetails,
+ loadGxsIdentities,
+ getSafeAvatar,
+ get64Num,
+ stopStatusPolling,
+ initializeDistantChat,
+} = require('people/people_state');
+
+function formatRelativeTime(ts) {
+ if (!ts) return '';
+ const now = Math.floor(Date.now() / 1000);
+ const diff = now - ts;
+ if (diff < 30) return 'Just Now';
+ if (diff < 3600) return `${Math.floor(diff / 60)} min${Math.floor(diff / 60) > 1 ? 's' : ''}`;
+ if (diff < 86400) return `${Math.floor(diff / 3600)} hr${Math.floor(diff / 3600) > 1 ? 's' : ''}`;
+ return `${Math.floor(diff / 86400)} d`;
+}
+
+const PeopleSidebar = () => {
+ return {
+ oninit: () => {
+ preloadAllChatHistory();
+ },
+ view: () => {
+ // 1. Determine list based on mainTab ('people' vs 'chats')
+ let displayItems = [];
+
+ // 0. Compute active chats count (conversations with real message history)
+ const allUserGroupIds = new Set((rs.userList.users || []).map((u) => u.mGroupId));
+ Object.keys(State.chatHistoryMap || {}).forEach((id) => allUserGroupIds.add(id));
+ let activeChatsCount = 0;
+ allUserGroupIds.forEach((gxsId) => {
+ const hist = State.chatHistoryMap && State.chatHistoryMap[gxsId];
+ if (hist && hist.lastMsg && !isSystemMsg(hist.lastMsg)) {
+ activeChatsCount++;
+ }
+ });
+
+ if (State.mainTab === 'people') {
+ let baseList = [];
+ if (State.activeFilter === 'own') {
+ baseList = peopleUtil.sortIds(State.ownGxsIds) || [];
+ } else if (State.activeFilter === 'contacts') {
+ baseList = peopleUtil.contactlist(rs.userList.users) || [];
+ } else {
+ baseList = peopleUtil.sortUsers(rs.userList.users) || [];
+ }
+
+ displayItems = baseList.filter((item) => {
+ let name = State.activeFilter === 'own' ? (rs.userList.username(item) || 'Unknown') : (item.mGroupName || 'Unknown');
+ return name.toLowerCase().includes(State.searchString.toLowerCase());
+ });
+
+ displayItems.sort((a, b) => {
+ let nameA = State.activeFilter === 'own' ? (rs.userList.username(a) || '') : (a.mGroupName || '');
+ let nameB = State.activeFilter === 'own' ? (rs.userList.username(b) || '') : (b.mGroupName || '');
+ return nameA.localeCompare(nameB);
+ });
+ } else {
+ // Chats Tab: ONLY contacts and identities that have real chat history (ignoring system tunnel status logs)
+ displayItems = Array.from(allUserGroupIds)
+ .map((gxsId) => {
+ const entry = rs.userList.userMap[gxsId];
+ const name = entry && entry.name ? entry.name : (rs.userList.username(gxsId) || 'Unknown');
+ return { mGroupId: gxsId, mGroupName: name };
+ })
+ .filter((item) => {
+ const gxsId = item.mGroupId;
+ fetchIdDetails(gxsId);
+ const hist = State.chatHistoryMap && State.chatHistoryMap[gxsId];
+
+ const hasRealHistory = Boolean(hist && hist.lastMsg && !isSystemMsg(hist.lastMsg));
+
+ if (!hasRealHistory) return false;
+
+ const name = item.mGroupName || 'Unknown';
+ return name.toLowerCase().includes(State.searchString.toLowerCase());
+ });
+
+ // Sort by chat timestamp descending
+ displayItems.sort((a, b) => {
+ const histA = State.chatHistoryMap[a.mGroupId];
+ const histB = State.chatHistoryMap[b.mGroupId];
+ const detailsA = State.gxsIdToDetailsMap[a.mGroupId];
+ const detailsB = State.gxsIdToDetailsMap[b.mGroupId];
+
+ const timeA = histA ? histA.lastTime : (detailsA ? get64Num(detailsA.mLastUsageTS) : 0);
+ const timeB = histB ? histB.lastTime : (detailsB ? get64Num(detailsB.mLastUsageTS) : 0);
+ return timeB - timeA;
+ });
+ }
+
+ return m('.people-left-pane', [
+ // Sidebar Header Container
+ m('.people-sidebar-header', [
+ // 1. Top Search Bar
+ m('.searchbar-wrapper', [
+ m('i.fas.fa-search'),
+ m('input.searchbar-input[type=text][placeholder=Search...]', {
+ value: State.searchString,
+ oninput: (e) => {
+ State.searchString = e.target.value;
+ },
+ }),
+ ]),
+
+ // 2. Dual Segmented Tab Control: [People] | [Chats]
+ m('.segmented-control', [
+ m(
+ 'button.segment-tab' + (State.mainTab === 'people' ? '.active' : ''),
+ {
+ onclick: () => {
+ State.mainTab = 'people';
+ m.redraw();
+ },
+ },
+ [m('i.fas.fa-users'), ' People']
+ ),
+ m(
+ 'button.segment-tab' + (State.mainTab === 'chats' ? '.active' : ''),
+ {
+ onclick: () => {
+ State.mainTab = 'chats';
+ preloadAllChatHistory();
+ m.redraw();
+ },
+ },
+ [
+ m('i.fas.fa-comments'),
+ ' Chats',
+ activeChatsCount > 0 && m('span.segment-badge', activeChatsCount),
+ ]
+ ),
+ ]),
+
+
+ // 3. Sub-Filter Row (People Tab)
+ State.mainTab === 'people' &&
+ m('.sub-filter-row', [
+ m(
+ 'select.filter-select',
+ {
+ value: State.activeFilter,
+ onchange: (e) => {
+ State.activeFilter = e.target.value;
+ m.route.set(
+ '/people/' +
+ (State.activeFilter === 'contacts'
+ ? 'MyContacts'
+ : State.activeFilter === 'own'
+ ? 'OwnIdentity'
+ : 'All')
+ );
+ },
+ },
+ [
+ m('option[value=contacts]', 'Contacts'),
+ m('option[value=own]', 'My Identities'),
+ m('option[value=all]', 'All Users'),
+ ]
+ ),
+ State.activeFilter === 'own' &&
+ m(
+ 'button.btn-add-id[title=Create New Identity]',
+ {
+ onclick: () => widget.popupMessage(m(CreateIdentity)),
+ },
+ m('i.fas.fa-plus')
+ ),
+ ]),
+ ]),
+
+ // Scrollable List Container
+ m('.friends-list-container', [
+ m('.friends-scroll', [
+ displayItems.length === 0
+ ? m('.network-pane-placeholder', { style: 'padding: 2rem 0;' }, State.mainTab === 'chats' ? 'No active chats' : 'No identities found')
+ : displayItems.map((item) => {
+ let gxsId, displayName;
+ if (State.mainTab === 'people' && State.activeFilter === 'own') {
+ gxsId = item;
+ displayName = rs.userList.username(gxsId) || 'Unknown';
+ } else {
+ gxsId = item.mGroupId;
+ displayName = item.mGroupName || 'Unknown';
+ }
+
+ fetchIdDetails(gxsId);
+ const itemDetails = State.gxsIdToDetailsMap[gxsId];
+ const itemAvatar = getSafeAvatar(itemDetails);
+ const itemFirstLetter = (displayName || '?').slice(0, 1).toUpperCase();
+ const isSelected = State.selectedId === gxsId;
+
+ const itemEntry = rs.userList.userMap[gxsId];
+ const itemIsContact = itemEntry && itemEntry.isContact;
+ const itemIsOwn = State.ownGxsIds.includes(gxsId);
+
+ const hist = State.chatHistoryMap[gxsId];
+ const lastTS = hist ? hist.lastTime : (itemDetails ? get64Num(itemDetails.mLastUsageTS) : 0);
+ const relativeTimeStr = formatRelativeTime(lastTS);
+ const lastMsgText = hist && hist.lastMsg ? hist.lastMsg : (itemIsOwn ? 'My Identity' : itemIsContact ? 'Saved Contact' : 'Distant Chat');
+
+ if (State.mainTab === 'chats') {
+ return m(
+ '.chat-item',
+ {
+ class: isSelected ? 'selected' : '',
+ onclick: (e) => {
+ e.preventDefault();
+ e.stopPropagation();
+ State.activeMenu = null;
+ State.selectedId = gxsId;
+ State.activeTab = 'chat';
+ initializeDistantChat();
+ m.redraw();
+ },
+ oncontextmenu: (e) => {
+ e.preventDefault();
+ e.stopPropagation();
+ State.selectedId = gxsId;
+ const container = document.querySelector('.friends-list-container');
+ if (container) {
+ const parentRect = container.getBoundingClientRect();
+ const top = e.clientY - parentRect.top;
+ const left = Math.min(Math.max(e.clientX - parentRect.left, 10), 160);
+ State.activeMenu = { gxsId, displayName, isContact: itemIsContact, top, left };
+ }
+ m.redraw();
+ },
+ },
+ [
+ m('.chat-avatar-wrapper', [
+ m(peopleUtil.UserAvatar, {
+ avatar: itemAvatar,
+ firstLetter: itemFirstLetter,
+ identityId: gxsId,
+ size: 40,
+ }),
+ m('.status-dot', {
+ style: {
+ backgroundColor: itemIsContact || itemIsOwn ? '#22c55e' : '#cbd5e1',
+ },
+ }),
+ ]),
+ m('.chat-info', [
+ m('.chat-name', displayName),
+ m('.chat-last-msg', lastMsgText),
+ ]),
+ m('.chat-meta', [
+ relativeTimeStr && m('.chat-time', relativeTimeStr),
+ ]),
+ ]
+ );
+ }
+
+ // People tab list item
+ return m(
+ '.friend-list-item',
+ {
+ class: isSelected ? 'selected' : '',
+ onclick: (e) => {
+ e.preventDefault();
+ e.stopPropagation();
+ State.activeMenu = null;
+
+ const idChanged = State.selectedId !== gxsId;
+ State.selectedId = gxsId;
+ if (idChanged) {
+ State.chatPid = null;
+ State.chatMessages = [];
+ stopStatusPolling();
+ if (State.activeTab === 'chat') {
+ initializeDistantChat();
+ }
+ }
+ m.redraw();
+ },
+ oncontextmenu: (e) => {
+ e.preventDefault();
+ e.stopPropagation();
+ State.selectedId = gxsId;
+
+ const container = document.querySelector('.friends-list-container');
+ if (container) {
+ const parentRect = container.getBoundingClientRect();
+ const top = e.clientY - parentRect.top;
+ const left = Math.min(Math.max(e.clientX - parentRect.left, 10), 160);
+ State.activeMenu = { gxsId, displayName, isContact: itemIsContact, top, left };
+ }
+ m.redraw();
+ },
+ },
+ [
+ m('.friend-avatar', m(peopleUtil.UserAvatar, {
+ avatar: itemAvatar,
+ firstLetter: itemFirstLetter,
+ identityId: gxsId,
+ })),
+ m('.friend-meta', [
+ m('.friend-name', displayName),
+ m(
+ '.friend-status',
+ itemIsOwn
+ ? 'My Identity'
+ : itemIsContact
+ ? 'Contact'
+ : 'Identity'
+ ),
+ ]),
+ ]
+ );
+ }),
+ ]),
+
+ // Context Menu
+ State.activeMenu && (() => {
+ const menu = State.activeMenu;
+ const isOwn = State.ownGxsIds.includes(menu.gxsId);
+
+ return m('.people-context-menu', {
+ style: {
+ top: `${menu.top}px`,
+ left: menu.left !== undefined ? `${menu.left}px` : '10px',
+ position: 'absolute',
+ zIndex: 1000,
+ },
+ onclick: (e) => {
+ e.stopPropagation();
+ },
+ }, [
+ !isOwn && m('.menu-item', {
+ onclick: () => {
+ State.activeMenu = null;
+ State.selectedId = menu.gxsId;
+ State.activeTab = 'chat';
+ State.chatPid = null;
+ State.chatMessages = [];
+ initializeDistantChat();
+ m.redraw();
+ },
+ }, [
+ m('i.fas.fa-comments', { style: 'color: #3b82f6; margin-right: 0.5rem;' }),
+ 'Start chat',
+ ]),
+ !isOwn && m('.menu-item', {
+ onclick: () => {
+ State.activeMenu = null;
+ State.selectedId = menu.gxsId;
+ State.activeTab = 'details';
+ State.showMailCompose = true;
+ m.redraw();
+ },
+ }, [
+ m('i.fas.fa-envelope', { style: 'color: #10b981; margin-right: 0.5rem;' }),
+ 'Send mail',
+ ]),
+ !isOwn && m('.menu-item', {
+ onclick: () => {
+ State.activeMenu = null;
+ rs.rsJsonApiRequest(
+ '/rsIdentity/setAsRegularContact',
+ { id: menu.gxsId, isContact: !menu.isContact },
+ (data, success) => {
+ if (success) {
+ loadGxsIdentities();
+ }
+ }
+ );
+ },
+ }, [
+ m('i.fas' + (menu.isContact ? '.fa-user-minus' : '.fa-user-plus'), {
+ style: {
+ color: menu.isContact ? '#ef4444' : '#3b82f6',
+ marginRight: '0.5rem',
+ },
+ }),
+ menu.isContact ? 'Remove from Contacts' : 'Add to Contacts',
+ ]),
+ ]);
+ })(),
+ ]),
+ ]);
+ },
+ };
+};
+
+module.exports = PeopleSidebar;
diff --git a/webui-src/app/people/people_state.js b/webui-src/app/people/people_state.js
new file mode 100644
index 0000000..b4fbc3a
--- /dev/null
+++ b/webui-src/app/people/people_state.js
@@ -0,0 +1,628 @@
+const m = require('mithril');
+const rs = require('rswebui');
+const Data = require('network/network_data');
+const peopleUtil = require('people/people_util');
+
+const State = {
+ searchString: '',
+ selectedId: null, // GXS ID of the selected identity
+ mainTab: 'people', // 'people' | 'chats'
+ activeFilter: 'contacts', // 'all' | 'contacts' | 'own'
+ gxsIdToDetailsMap: {},
+ ownGxsIds: [],
+ gpgToGxsIdMap: {},
+ chatHistoryMap: {}, // gxsId -> { lastMsg, lastTime }
+ showMailCompose: false,
+ activeTab: 'details',
+ selectedOwnGxsIdForChat: '',
+ chatPid: null,
+ chatMessages: [],
+ chatInputMsg: '',
+ distantChatStatus: null,
+ statusPollInterval: null,
+ chatDisconnected: false,
+ activeDistantChats: {}, // gxsId -> { pid, status, messages, inputMsg, disconnected }
+ activeMenu: null,
+ showHistoryModal: false,
+ historySearchQuery: '',
+ fullHistoryMessages: [],
+ isHistoryLoading: false,
+};
+
+function getDistantChatSession(gxsId) {
+ if (!gxsId) return null;
+ if (!State.activeDistantChats[gxsId]) {
+ State.activeDistantChats[gxsId] = {
+ pid: null,
+ status: null,
+ messages: [],
+ inputMsg: '',
+ disconnected: false,
+ };
+ }
+ return State.activeDistantChats[gxsId];
+}
+
+
+function fetchIdDetails(gxsId) {
+ if (!gxsId) return;
+ if (State.gxsIdToDetailsMap[gxsId] === undefined) {
+ State.gxsIdToDetailsMap[gxsId] = null; // Mark as loading
+ rs.rsJsonApiRequest('/rsIdentity/getIdDetails', { id: gxsId }, (detData) => {
+ if (detData && detData.details) {
+ State.gxsIdToDetailsMap[gxsId] = detData.details;
+ const pgpId = detData.details.mPgpId;
+ if (pgpId && pgpId !== '0000000000000000') {
+ State.gpgToGxsIdMap[pgpId.toLowerCase()] = gxsId;
+ }
+ m.redraw();
+ }
+ });
+ }
+}
+
+function loadGxsIdentities() {
+ rs.rsJsonApiRequest('/rsIdentity/getIdentitiesSummaries', {}, (data) => {
+ if (data && data.ids) {
+ m.redraw();
+ }
+ });
+}
+
+function loadOwnGxsIds() {
+ return new Promise((resolve) => {
+ peopleUtil.ownIds((ids) => {
+ State.ownGxsIds = ids || [];
+ if (State.ownGxsIds.length > 0 && !State.selectedOwnGxsIdForChat) {
+ State.selectedOwnGxsIdForChat = State.ownGxsIds[0];
+ }
+ m.redraw();
+ resolve();
+ });
+ });
+}
+
+function get64Num(val) {
+ if (!val) return 0;
+ if (typeof val === 'object') {
+ return val.xint64 || parseInt(val.xstr64) || 0;
+ }
+ return Number(val) || 0;
+}
+
+function getServiceName(serviceId) {
+ switch (serviceId) {
+ case 1: return 'Channels';
+ case 2: return 'Forums';
+ case 3: return 'Boards';
+ case 4: return 'Chat';
+ case 5: return 'GxsCircles';
+ case 6: return 'GxsMail';
+ case 7: return 'GxsCircles';
+ case 8: return 'Wire';
+ default: return 'Unknown (' + serviceId + ')';
+ }
+}
+
+function createUsageString(u) {
+ if (!u) return '[Unknown]';
+ const serviceName = getServiceName(u.mServiceId);
+ const usageCode = u.mUsageCode;
+
+ switch (usageCode) {
+ case 0:
+ return '[Unknown]';
+ case 1:
+ return `Admin signature in service ${serviceName}`;
+ case 2:
+ return `Admin signature verification in service ${serviceName}`;
+ case 3:
+ return `Creation of author signature in service ${serviceName}`;
+ case 4:
+ case 7:
+ return `Group author for group ${u.mGrpId || 'Unknown'} in service ${serviceName}`;
+ case 5:
+ return `Message signature creation in group ${u.mGrpId || 'Unknown'} of service ${serviceName}`;
+ case 6:
+ case 8:
+ return `Vote/comment in ${serviceName} service (Group: ${u.mGrpId || 'Unknown'}, Msg: ${u.mMsgId || 'Unknown'})`;
+ case 9:
+ return `Message in chat room (Id: ${get64Num(u.mAdditionalId)})`;
+ case 10:
+ return 'Distant message signature validation.';
+ case 11:
+ return 'Distant message signature creation.';
+ case 12:
+ return 'Signature validation in distant tunnel system.';
+ case 13:
+ return 'Signature in distant tunnel system.';
+ case 14:
+ return 'Received from GXS sync.';
+ case 15:
+ return 'Received from GXS discovery.';
+ case 16:
+ return 'Explicit request to friend.';
+ case 17:
+ return 'Generic signature validation.';
+ case 18:
+ return 'Generic signature creation.';
+ case 19:
+ return 'Generic encryption.';
+ case 20:
+ return 'Generic decryption.';
+ case 21:
+ return 'Circle membership check.';
+ default:
+ return `Usage code ${usageCode} in service ${serviceName}`;
+ }
+}
+
+function getSafeAvatar(details) {
+ return details && details.mAvatar ? details.mAvatar : undefined;
+}
+
+function getOnlineSslId(gpgId) {
+ if (!gpgId) return null;
+ const friend = Data.gpgDetails[gpgId.toLowerCase()];
+ if (friend && friend.locations) {
+ const onlineLoc = friend.locations.find((loc) => loc.isOnline);
+ return onlineLoc ? onlineLoc.id : null;
+ }
+ return null;
+}
+
+function isIdentityOnline(gxsId) {
+ fetchIdDetails(gxsId);
+ const details = State.gxsIdToDetailsMap[gxsId];
+ if (details && details.mPgpId && details.mPgpId !== '0000000000000000') {
+ const friend = Data.gpgDetails[details.mPgpId.toLowerCase()];
+ return friend ? friend.isOnline : false;
+ }
+ return false;
+}
+
+function syncFilter(tab) {
+ let newFilter = 'all';
+ if (tab === 'OwnIdentity') {
+ newFilter = 'own';
+ } else if (tab === 'MyContacts') {
+ newFilter = 'contacts';
+ }
+
+ if (State.activeFilter !== newFilter) {
+ State.activeFilter = newFilter;
+ }
+}
+
+function getStatusColor(status) {
+ switch (status) {
+ case 1: return '#eab308'; // Yellow
+ case 2: return '#22c55e'; // Green
+ case 3: return '#ef4444'; // Red
+ default: return '#94a3b8'; // Grey
+ }
+}
+
+function getStatusTooltip(status) {
+ switch (status) {
+ case 1: return 'Tunnel is pending. Please wait...';
+ case 2: return 'End-to-end encrypted conversation established. You can talk!';
+ case 3: return 'Your partner closed the conversation.';
+ default: return 'Remote status unknown.';
+ }
+}
+
+function pollDistantChatStatus() {
+ if (!State.chatPid) return;
+ const session = State.selectedId ? getDistantChatSession(State.selectedId) : null;
+
+ rs.rsJsonApiRequest(
+ '/rsChats/getDistantChatStatus',
+ {
+ pid: State.chatPid,
+ },
+ (detail, success) => {
+ if (success && detail.retval) {
+ State.distantChatStatus = detail.info;
+ if (session) session.status = detail.info;
+
+ if (detail.info.status === 2) {
+ const text = 'Tunnel is secured. You can talk!';
+ const exists = State.chatMessages.some(
+ (m) => m.isSystem && (m.msg === text || m.message === text)
+ );
+ if (!exists) {
+ State.chatMessages.push({
+ incoming: true,
+ isSystem: true,
+ msg: text,
+ sendTime: Math.floor(Date.now() / 1000),
+ });
+ State.chatMessages.sort((a, b) => a.sendTime - b.sendTime);
+ }
+ } else if (detail.info.status === 3) {
+ const text = 'Your partner closed the conversation.';
+ const exists = State.chatMessages.some(
+ (m) => m.isSystem && (m.msg === text || m.message === text)
+ );
+ if (!exists) {
+ State.chatMessages.push({
+ incoming: true,
+ isSystem: true,
+ msg: text,
+ sendTime: Math.floor(Date.now() / 1000),
+ });
+ State.chatMessages.sort((a, b) => a.sendTime - b.sendTime);
+ }
+ }
+ m.redraw();
+ }
+ }
+ );
+}
+
+function startStatusPolling() {
+ stopStatusPolling();
+ pollDistantChatStatus();
+ State.statusPollInterval = setInterval(pollDistantChatStatus, 3000);
+}
+
+function stopStatusPolling() {
+ if (State.statusPollInterval) {
+ clearInterval(State.statusPollInterval);
+ State.statusPollInterval = null;
+ }
+}
+
+function isSystemMsg(msgText) {
+ if (!msgText || typeof msgText !== 'string') return true;
+ const lower = msgText.toLowerCase();
+ return (
+ lower.includes('starting distant chat') ||
+ lower.includes('please wait for secure tunnel') ||
+ lower.includes('tunnel is secured') ||
+ lower.includes('chat initiated') ||
+ lower.includes('closed the conversation')
+ );
+}
+
+function initializeDistantChat(force = false) {
+ if (!State.selectedId || !State.selectedOwnGxsIdForChat) return;
+
+ const session = getDistantChatSession(State.selectedId);
+
+ // If chat session is already established/initiating for this peer and not forced/disconnected:
+ if (!force && session.pid && !session.disconnected) {
+ State.chatPid = session.pid;
+ State.chatMessages = session.messages;
+ State.distantChatStatus = session.status;
+ State.chatDisconnected = session.disconnected;
+
+ loadChatMessages();
+ pollDistantChatStatus();
+ startStatusPolling();
+ return;
+ }
+
+ // Otherwise, start a new tunnel for this peer
+ session.pid = null;
+ session.status = null;
+ session.messages = [
+ {
+ incoming: true,
+ isSystem: true,
+ msg: 'Starting distant chat... Please wait for secure tunnel.',
+ sendTime: Math.floor(Date.now() / 1000),
+ }
+ ];
+ session.disconnected = false;
+
+ State.chatPid = null;
+ State.chatMessages = session.messages;
+ State.distantChatStatus = null;
+ State.chatDisconnected = false;
+ m.redraw();
+
+ rs.rsJsonApiRequest(
+ '/rsChats/initiateDistantChatConnexion',
+ {
+ to_pid: State.selectedId,
+ from_pid: State.selectedOwnGxsIdForChat,
+ notify: true,
+ },
+ (res) => {
+ if (res && res.pid) {
+ const hexPid = rs.idToHex(res.pid);
+ session.pid = hexPid;
+ State.chatPid = hexPid;
+ State.distantChatStatus = null;
+ loadChatMessages();
+ pollDistantChatStatus();
+ startStatusPolling();
+ }
+ }
+ );
+}
+
+
+function loadChatMessages() {
+ if (!State.chatPid) return;
+
+ const chatPeerId = {
+ broadcast_status_peer_id: '00000000000000000000000000000000',
+ type: 2, // TYPE_PRIVATE_DISTANT
+ peer_id: '00000000000000000000000000000000',
+ distant_chat_id: State.chatPid,
+ lobby_id: { xstr64: '0' },
+ };
+
+ rs.rsJsonApiRequest(
+ '/rsHistory/getMessages',
+ {
+ chatPeerId: chatPeerId,
+ loadCount: 50,
+ },
+ (data, success) => {
+ if (success && data.msgs) {
+ State.chatMessages = data.msgs;
+ const realUserMsgs = data.msgs.filter(
+ (m) => !m.isSystem && !isSystemMsg(m.message || m.msg)
+ );
+ if (realUserMsgs.length > 0 && State.selectedId) {
+ const last = realUserMsgs[realUserMsgs.length - 1];
+ State.chatHistoryMap[State.selectedId] = {
+ lastMsg: last.message || last.msg || '',
+ lastTime: last.sendTime || last.recvTime || Math.floor(Date.now() / 1000),
+ };
+ } else if (State.selectedId) {
+ delete State.chatHistoryMap[State.selectedId];
+ }
+ m.redraw();
+ setTimeout(() => {
+ const element = document.querySelector('.chat-messages');
+ if (element) element.scrollTop = element.scrollHeight;
+ }, 100);
+ }
+ }
+ );
+}
+
+function sendDistantChatMessage() {
+ if (!State.chatInputMsg.trim() || !State.chatPid) return;
+
+ const cid = {
+ broadcast_status_peer_id: '00000000000000000000000000000000',
+ type: 2, // TYPE_PRIVATE_DISTANT
+ peer_id: '00000000000000000000000000000000',
+ distant_chat_id: State.chatPid,
+ lobby_id: { xstr64: '0' },
+ };
+
+ const text = State.chatInputMsg;
+ State.chatInputMsg = '';
+
+ rs.rsJsonApiRequest(
+ '/rsChats/sendChat',
+ {
+ id: cid,
+ msg: text,
+ },
+ (data, success) => {
+ if (success) {
+ const echoMsg = {
+ chat_id: cid,
+ msg: text,
+ sendTime: Math.floor(Date.now() / 1000),
+ incoming: false,
+ lobby_peer_gxs_id: State.selectedOwnGxsIdForChat,
+ };
+ State.chatMessages.push(echoMsg);
+ if (State.selectedId) {
+ State.chatHistoryMap[State.selectedId] = {
+ lastMsg: text,
+ lastTime: Math.floor(Date.now() / 1000),
+ };
+ }
+ m.redraw();
+ setTimeout(() => {
+ const element = document.querySelector('.chat-messages');
+ if (element) element.scrollTop = element.scrollHeight;
+ }, 100);
+ } else {
+ console.error('[RS] Failed to send distant chat message:', data);
+ alert('Failed to send distant chat message. The image/payload exceeds RetroShare max chat packet size.');
+ State.chatInputMsg = text;
+ m.redraw();
+ }
+ }
+ );
+}
+
+function preloadAllChatHistory() {
+ rs.rsJsonApiRequest('/rsIdentity/getIdentitiesSummaries', {}, (data) => {
+ const ids = (data && data.ids) ? data.ids : (rs.userList.users || []);
+ if (!ids || ids.length === 0) return;
+
+ ids.forEach((u) => {
+ const gxsId = typeof u === 'object' ? u.mGroupId : u;
+ if (!gxsId) return;
+
+ // Check Distant Chat History (type: 2 - TYPE_PRIVATE_DISTANT)
+ const distantPeerId = {
+ broadcast_status_peer_id: '00000000000000000000000000000000',
+ type: 2, // TYPE_PRIVATE_DISTANT
+ peer_id: '00000000000000000000000000000000',
+ distant_chat_id: gxsId,
+ lobby_id: { xstr64: '0' },
+ };
+
+ rs.rsJsonApiRequest(
+ '/rsHistory/getMessages',
+ {
+ chatPeerId: distantPeerId,
+ loadCount: 20,
+ },
+ (msgData, success) => {
+ if (success && msgData && msgData.msgs) {
+ const userMsgs = msgData.msgs.filter(
+ (m) => !m.isSystem && !isSystemMsg(m.message || m.msg)
+ );
+ if (userMsgs.length > 0) {
+ const last = userMsgs[userMsgs.length - 1];
+ State.chatHistoryMap[gxsId] = {
+ lastMsg: last.message || last.msg || '',
+ lastTime: last.sendTime || last.recvTime || Math.floor(Date.now() / 1000),
+ };
+ m.redraw();
+ }
+ }
+ }
+ );
+
+ // Also check Private Chat History (type: 1) if PGP ID is known
+ const details = State.gxsIdToDetailsMap[gxsId];
+ const pgpId = details ? details.mPgpId : (typeof u === 'object' ? u.mPgpId : null);
+ if (pgpId && pgpId !== '0000000000000000') {
+ const privatePeerId = {
+ broadcast_status_peer_id: '00000000000000000000000000000000',
+ type: 1, // PRIVATE
+ peer_id: pgpId,
+ distant_chat_id: '00000000000000000000000000000000',
+ lobby_id: { xstr64: '0' },
+ };
+
+ rs.rsJsonApiRequest(
+ '/rsHistory/getMessages',
+ {
+ chatPeerId: privatePeerId,
+ loadCount: 20,
+ },
+ (msgData, success) => {
+ if (success && msgData && msgData.msgs) {
+ const userMsgs = msgData.msgs.filter(
+ (m) => !m.isSystem && !isSystemMsg(m.message || m.msg)
+ );
+ if (userMsgs.length > 0) {
+ const last = userMsgs[userMsgs.length - 1];
+ const existing = State.chatHistoryMap[gxsId];
+ const lastTime = last.sendTime || last.recvTime || Math.floor(Date.now() / 1000);
+ if (!existing || lastTime > existing.lastTime) {
+ State.chatHistoryMap[gxsId] = {
+ lastMsg: last.message || last.msg || '',
+ lastTime: lastTime,
+ };
+ m.redraw();
+ }
+ }
+ }
+ }
+ );
+ }
+ });
+ });
+}
+
+function loadAllHistoryForSelectedPeer(callback) {
+ if (!State.selectedId) return;
+
+ State.isHistoryLoading = true;
+ State.fullHistoryMessages = [];
+ m.redraw();
+
+ const queries = [];
+
+ // Query 1: Distant Chat History by active chatPid (type: 2 - TYPE_PRIVATE_DISTANT)
+ if (State.chatPid) {
+ queries.push({
+ broadcast_status_peer_id: '00000000000000000000000000000000',
+ type: 2, // TYPE_PRIVATE_DISTANT
+ peer_id: '00000000000000000000000000000000',
+ distant_chat_id: State.chatPid,
+ lobby_id: { xstr64: '0' },
+ });
+ }
+
+ // Query 2: Distant Chat History by selectedId if different (type: 2 - TYPE_PRIVATE_DISTANT)
+ if (State.selectedId && State.selectedId !== State.chatPid) {
+ queries.push({
+ broadcast_status_peer_id: '00000000000000000000000000000000',
+ type: 2, // TYPE_PRIVATE_DISTANT
+ peer_id: '00000000000000000000000000000000',
+ distant_chat_id: State.selectedId,
+ lobby_id: { xstr64: '0' },
+ });
+ }
+
+ // Query 3: Private Chat History by PGP ID if available (type: 1 - TYPE_PRIVATE)
+ const details = State.gxsIdToDetailsMap[State.selectedId];
+ const pgpId = details ? details.mPgpId : null;
+ if (pgpId && pgpId !== '0000000000000000') {
+ queries.push({
+ broadcast_status_peer_id: '00000000000000000000000000000000',
+ type: 1, // TYPE_PRIVATE
+ peer_id: pgpId,
+ distant_chat_id: '00000000000000000000000000000000',
+ lobby_id: { xstr64: '0' },
+ });
+ }
+
+ let accumulatedMsgs = [];
+ let completed = 0;
+
+ queries.forEach((chatPeerId) => {
+ rs.rsJsonApiRequest(
+ '/rsHistory/getMessages',
+ {
+ chatPeerId: chatPeerId,
+ loadCount: 0, // 0 = load all messages in C++
+ },
+ (msgData, success) => {
+ if (success && msgData && msgData.msgs) {
+ accumulatedMsgs = accumulatedMsgs.concat(msgData.msgs);
+ }
+ completed++;
+ if (completed === queries.length) {
+ const map = new Map();
+ accumulatedMsgs.forEach((mItem) => {
+ const text = mItem.msg || mItem.message || '';
+ const key = `${mItem.sendTime || mItem.recvTime}_${text}`;
+ if (!map.has(key)) map.set(key, mItem);
+ });
+ let uniqueMsgs = Array.from(map.values());
+ uniqueMsgs.sort((a, b) => (a.sendTime || a.recvTime) - (b.sendTime || b.recvTime));
+ State.fullHistoryMessages = uniqueMsgs;
+ State.isHistoryLoading = false;
+ m.redraw();
+ if (callback) callback();
+ }
+ }
+ );
+ });
+}
+
+module.exports = {
+ State,
+ getDistantChatSession,
+ isSystemMsg,
+ preloadAllChatHistory,
+ loadAllHistoryForSelectedPeer,
+ fetchIdDetails,
+ loadGxsIdentities,
+ loadOwnGxsIds,
+ get64Num,
+ getServiceName,
+ createUsageString,
+ getSafeAvatar,
+ getOnlineSslId,
+ isIdentityOnline,
+ syncFilter,
+ getStatusColor,
+ getStatusTooltip,
+ pollDistantChatStatus,
+ startStatusPolling,
+ stopStatusPolling,
+ initializeDistantChat,
+ loadChatMessages,
+ sendDistantChatMessage,
+};
+
diff --git a/webui-src/app/people/people_util.js b/webui-src/app/people/people_util.js
index 80c4322..95bd48c 100644
--- a/webui-src/app/people/people_util.js
+++ b/webui-src/app/people/people_util.js
@@ -1,27 +1,87 @@
const rs = require('rswebui');
const m = require('mithril');
+const jdenticon = require('jdenticon');
function checksudo(id) {
return id === '0000000000000000';
}
+function getAvatarColor(seed) {
+ let hash = 0;
+ if (seed) {
+ for (let i = 0; i < seed.length; i++) {
+ hash = seed.charCodeAt(i) + ((hash << 5) - hash);
+ }
+ }
+ const hue = Math.abs(hash) % 360;
+ return `hsl(${hue}, 60%, 60%)`;
+}
+
const UserAvatar = () => ({
view: (v) => {
const imageURI = v.attrs.avatar;
- return imageURI === undefined || imageURI.mData.base64 === ''
- ? m(
- 'div.defaultAvatar',
- {
- // image isn't getting loaded
- // ? m('img.defaultAvatar', {
- // src: '../data/user.png'
- // })
- },
- m('p', v.attrs.firstLetter)
- )
- : m('img.avatar', {
+ const identityId = v.attrs.identityId || v.attrs.id;
+ const rawSize = v.attrs.size || 48;
+ const sizeStr = typeof rawSize === 'number' ? `${rawSize}px` : rawSize;
+ const pxSize = typeof rawSize === 'number' ? rawSize : parseInt(rawSize) || 48;
+ const isSquare = !!v.attrs.isSquare;
+
+ if (imageURI && imageURI.mData && imageURI.mData.base64 !== '') {
+ return m('img.avatar', {
src: 'data:image/png;base64,' + imageURI.mData.base64,
+ style: {
+ width: sizeStr,
+ height: sizeStr,
+ borderRadius: isSquare ? '0' : '',
+ }
});
+ }
+
+ if (identityId && identityId !== '0000000000000000') {
+ const svgString = jdenticon.toSvg(identityId, pxSize);
+ return m('div.jdenticon-avatar', {
+ style: {
+ display: 'inline-block',
+ width: sizeStr,
+ height: sizeStr,
+ borderRadius: isSquare ? '0' : '50%',
+ overflow: 'hidden',
+ verticalAlign: 'middle',
+ marginRight: '0.3em',
+ },
+ oncreate: (vnode) => {
+ const svg = vnode.dom.querySelector('svg');
+ if (svg) {
+ svg.style.width = '100%';
+ svg.style.height = '100%';
+ svg.style.display = 'block';
+ }
+ }
+ }, m.trust(svgString));
+ }
+
+ const seed = v.attrs.seed || v.attrs.firstLetter || '';
+ const backgroundColor = getAvatarColor(seed);
+
+ return m(
+ 'div.defaultAvatar',
+ {
+ style: {
+ width: sizeStr,
+ height: sizeStr,
+ borderRadius: isSquare ? '0' : '50%',
+ backgroundColor: backgroundColor,
+ }
+ },
+ m('p', {
+ style: {
+ color: '#ffffff',
+ fontWeight: '900',
+ margin: '0',
+ fontSize: `calc(${sizeStr} * 0.55)`,
+ }
+ }, v.attrs.firstLetter || '?')
+ );
},
});
@@ -120,6 +180,7 @@ const regularcontactInfo = () => {
m(UserAvatar, {
avatar: details.mAvatar,
firstLetter: details.mNickname.slice(0, 1).toUpperCase(),
+ identityId: details.mId || v.attrs.id.mGroupId,
}),
m('.details', [
m('p', 'ID:'),
diff --git a/webui-src/app/scss/components/_index.scss b/webui-src/app/scss/components/_index.scss
index a38e1fd..ee8ea28 100644
--- a/webui-src/app/scss/components/_index.scss
+++ b/webui-src/app/scss/components/_index.scss
@@ -3,3 +3,5 @@
@forward 'navbar';
@forward 'posts';
@forward 'progress-bar';
+@forward 'statusbar';
+
diff --git a/webui-src/app/scss/components/_navbar.scss b/webui-src/app/scss/components/_navbar.scss
index 76a67db..ac38821 100644
--- a/webui-src/app/scss/components/_navbar.scss
+++ b/webui-src/app/scss/components/_navbar.scss
@@ -11,7 +11,7 @@
box-shadow: 0 5px 5px #222;
@include flex(column, $align: center);
height: 100%;
- padding: 0.5rem 0.25rem;
+ padding: 0.25rem;
margin-right: 0rem;
&__logo {
@@ -225,4 +225,4 @@
.sidebarquickview>h6 {
display: none !important;
}
-}
\ No newline at end of file
+}
diff --git a/webui-src/app/scss/components/_statusbar.scss b/webui-src/app/scss/components/_statusbar.scss
new file mode 100644
index 0000000..0f88078
--- /dev/null
+++ b/webui-src/app/scss/components/_statusbar.scss
@@ -0,0 +1,42 @@
+@use '../abstracts' as *;
+
+/* Status Bar Styles */
+.statusbar {
+ @include flex($justify: space-between, $align: center);
+ height: 28px;
+ background-color: $dark-color;
+ border-top: 1px solid #2e2e38;
+ padding: 0 1rem;
+ font-size: 0.8rem;
+ color: #94a3b8;
+ z-index: 100;
+ box-sizing: border-box;
+ user-select: none;
+ flex-shrink: 0;
+
+ &-left {
+ @include flex($align: center);
+ }
+
+ &-right {
+ @include flex($align: center, $gap: 1.5rem);
+ }
+
+ &-item {
+ @include flex($align: center);
+ }
+
+ &-divider {
+ width: 1px;
+ height: 14px;
+ background-color: #2e2e38;
+ }
+}
+
+.status-bullet {
+ width: 8px;
+ height: 8px;
+ border-radius: 50%;
+ display: inline-block;
+ box-shadow: 0 0 4px rgba(0, 0, 0, 0.5);
+}
diff --git a/webui-src/app/scss/pages/_chat.scss b/webui-src/app/scss/pages/_chat.scss
index 84293e5..5226f76 100644
--- a/webui-src/app/scss/pages/_chat.scss
+++ b/webui-src/app/scss/pages/_chat.scss
@@ -1,346 +1,1128 @@
-@use '../abstracts' as *;
-
-.lobby {
- margin: 10px;
- border: 1px solid #aaa;
- border-radius: 20px;
-}
-
-.lobby .mainname {
- margin: 20px;
- font-weight: 100;
- font-size: 1.2em;
-}
-
-.topic {
- color: #666;
-}
-
-.lobby>.topic {
- font-size: 0.95em;
- margin-left: 25px;
- margin-bottom: 5px;
-}
-
-.lefttitle {
- margin-top: 15px;
- margin-bottom: 0;
- font-weight: 100;
- font-size: 1.2em;
-}
-
-.leftname {
- margin-top: 5px;
- margin-bottom: 5px;
- padding: 5px;
- font-weight: 100;
- font-size: 1em;
-}
-
-.leftlobby>.topic {
- font-size: 0.75em;
- margin-left: 15px;
- margin-bottom: 5px;
-}
-
-.subscribed,
-.public {
- cursor: pointer;
-}
-
-.leftlobby {
- border: 1px solid #aaa;
- border-radius: 10px;
- margin-top: 5px;
- background-color: white;
-}
-
-.leftlobby.selected-lobby,
-.selectedidentity {
- color: white;
- background-color: #3ba4d7;
-}
-
-.rightbar {
- position: absolute;
- width: 185px;
- background-color: white;
- overflow: auto;
- top: 130px;
- bottom: 15px;
- right: 15px;
-}
-
-.user {
- padding: 5px;
-}
-
-.lobbyName {
- padding: 15px;
- margin-top: 2rem;
-}
-
-.lobbies {
- position: absolute;
- width: 185px;
- left: 165px;
- bottom: 15px;
- top: 130px;
- overflow: auto;
-}
-
-.messages,
-.setup {
- position: absolute;
- background-color: white;
- top: 130px;
- left: 360px;
- right: 215px;
- overflow: auto;
-}
-
-.messages {
- bottom: 115px;
-}
-
-.messagetext {
- white-space: break-spaces;
- margin-right: 5px;
-}
-
-.message>* {
- margin-left: 5px;
-}
-
-.username {
- color: darkgreen;
- font-weight: bolder;
-}
-
-.chatMessage {
- position: absolute;
- background-color: white;
- height: 85px;
- bottom: 15px;
- right: 215px;
- left: 360px;
-}
-
-textarea.chatMsg {
- height: 100%;
- width: 100%;
-}
-
-.chatatchar {
- margin-left: 0.2em;
- margin-right: 0.2em;
- color: silver;
-}
-
-.setupicon {
- margin-left: 1em;
- cursor: pointer;
-}
-
-.leaveicon {
- margin-left: 1em;
- cursor: pointer;
- color: #d40000;
-}
-
-.selectidentity {
- margin: 15px;
- font-size: 1.2em;
-}
-
-.setup>.identity {
- cursor: pointer;
-}
-
-.setup {
- bottom: 15px;
-}
-
-.createDistantChat {
- margin-top: 1em;
-}
-
-.no-lobbies {
-
- .messages,
- .chatMessage,
- .setup {
- left: 165px;
- }
-}
-
-/* CHAT ROOM (Single Chat) - Desktop Grid Layout */
-@media (min-width: 900px) {
- .node-panel.chat-room {
- display: grid !important;
- grid-template-columns: 250px 1fr 200px !important;
- /* Lobbies, Chat, Users */
- grid-template-rows: auto 1fr auto !important;
- /* Header, Messages, Input */
- grid-template-areas:
- "lobbies header rightbar"
- "lobbies messages rightbar"
- "lobbies input rightbar" !important;
- padding: 0 !important;
- height: 100% !important;
- }
-
- .node-panel.chat-room .lobbyName {
- grid-area: header;
- padding: 10px;
- border-bottom: 1px solid #eee;
- margin: 0;
- z-index: 10;
- background: white;
- }
-
- .node-panel.chat-room .lobbies {
- grid-area: lobbies;
- position: static !important;
- width: auto !important;
- height: auto !important;
- border-right: 1px solid #ccc;
- overflow-y: auto;
- display: block !important;
- top: auto !important;
- bottom: auto !important;
- left: auto !important;
- }
-
- .node-panel.chat-room .messages {
- grid-area: messages;
- position: static !important;
- width: auto !important;
- height: auto !important;
- overflow-y: auto;
- padding: 10px;
- left: auto !important;
- right: auto !important;
- top: auto !important;
- bottom: auto !important;
- margin: 0 !important;
- }
-
- .node-panel.chat-room .rightbar {
- grid-area: rightbar;
- position: static !important;
- width: auto !important;
- border-left: 1px solid #ccc;
- overflow-y: auto;
- display: block !important;
- }
-
- .node-panel.chat-room .chatMessage {
- grid-area: input;
- position: static !important;
- width: auto !important;
- height: auto !important;
- border-top: 1px solid #eee;
- left: auto !important;
- right: auto !important;
- bottom: auto !important;
- flex: 0 0 auto;
- padding: 10px !important;
- background: white;
- z-index: 10;
- }
-}
-
-/* Mobile Overrides - Ensure Flex Column */
-@media (max-width: 899px) {
- .node-panel.chat-room {
- display: flex !important;
- flex-direction: column !important;
- height: 100% !important;
- position: relative !important;
- }
-
- .node-panel.chat-room .lobbyName {
- flex: 0 0 auto;
- }
-
- .node-panel.chat-room .messages {
- flex: 1 !important;
- overflow-y: auto !important;
- position: relative !important;
- top: 0 !important;
- bottom: 0 !important;
- left: 0 !important;
- right: 0 !important;
- width: 100% !important;
- height: auto !important;
- margin: 0 !important;
- }
-
- .node-panel.chat-room .chatMessage {
- flex: 0 0 auto !important;
- position: relative !important;
- bottom: 0 !important;
- left: 0 !important;
- right: 0 !important;
- width: 100% !important;
- height: auto !important;
- z-index: 100;
- }
-
- .node-panel.chat-room .rightbar,
- .node-panel.chat-room .lobbies {
- display: none !important;
- position: fixed !important;
- top: 60px !important;
- bottom: 0 !important;
- width: 80% !important;
- background: white !important;
- z-index: 200 !important;
- box-shadow: 2px 0 10px rgba(0, 0, 0, 0.2) !important;
- }
-
- .node-panel.chat-room.show-lobbies .lobbies {
- display: block !important;
- left: 0 !important;
- }
-
- .node-panel.chat-room.show-users .rightbar {
- display: block !important;
- right: 0 !important;
- }
-
- .chat-overlay {
- display: none;
- position: fixed;
- top: 0;
- left: 0;
- right: 0;
- bottom: 0;
- background: rgba(0, 0, 0, 0.4);
- z-index: 150;
- }
-
- .show-lobbies .chat-overlay,
- .show-users .chat-overlay {
- display: block;
- }
-
- /* Mobile Icons in Header */
- .mobile-menu-icons {
- display: flex;
- gap: 15px;
- font-size: 1.2rem;
- }
-
- .mobile-menu-icons i {
- cursor: pointer;
- padding: 5px;
- }
-}
-
-@media (min-width: 900px) {
- .mobile-menu-icons {
- display: none;
- }
-}
\ No newline at end of file
+@use '../abstracts' as *;
+
+.lobby {
+ margin: 10px;
+ border: 1px solid #aaa;
+ border-radius: 20px;
+}
+
+.lobby .mainname {
+ margin: 20px;
+ font-weight: 100;
+ font-size: 1.2em;
+}
+
+.topic {
+ color: #666;
+}
+
+.lobby>.topic {
+ font-size: 0.95em;
+ margin-left: 25px;
+ margin-bottom: 5px;
+}
+
+.lefttitle {
+ margin-top: 15px;
+ margin-bottom: 0;
+ font-weight: 100;
+ font-size: 1.2em;
+}
+
+.leftname {
+ margin-top: 5px;
+ margin-bottom: 5px;
+ padding: 5px;
+ font-weight: 100;
+ font-size: 1em;
+}
+
+.leftlobby>.topic {
+ font-size: 0.75em;
+ margin-left: 15px;
+ margin-bottom: 5px;
+}
+
+.subscribed,
+.public {
+ cursor: pointer;
+}
+
+.leftlobby {
+ border: 1px solid #aaa;
+ border-radius: 10px;
+ margin-top: 5px;
+ background-color: white;
+}
+
+.leftlobby.selected-lobby,
+.selectedidentity {
+ color: white;
+ background-color: #3ba4d7;
+}
+
+.rightbar {
+ position: absolute;
+ width: 185px;
+ background-color: white;
+ overflow: auto;
+ top: 130px;
+ bottom: 15px;
+ right: 15px;
+}
+
+.user {
+ padding: 5px;
+}
+
+.lobbyName {
+ padding: 15px;
+ margin-top: 2rem;
+}
+
+.lobbies {
+ position: absolute;
+ width: 185px;
+ left: 165px;
+ bottom: 15px;
+ top: 130px;
+ overflow: auto;
+}
+
+.messages,
+.setup {
+ position: absolute;
+ background-color: white;
+ top: 130px;
+ left: 360px;
+ right: 215px;
+ overflow: auto;
+}
+
+.messages {
+ bottom: 115px;
+}
+
+.messagetext {
+ white-space: break-spaces;
+ margin-right: 5px;
+}
+
+.message>* {
+ margin-left: 5px;
+}
+
+.username {
+ color: darkgreen;
+ font-weight: bolder;
+}
+
+.chatMessage {
+ position: absolute;
+ background-color: white;
+ height: 85px;
+ bottom: 15px;
+ right: 215px;
+ left: 360px;
+}
+
+textarea.chatMsg {
+ height: 100%;
+ width: 100%;
+}
+
+.chatatchar {
+ margin-left: 0.2em;
+ margin-right: 0.2em;
+ color: silver;
+}
+
+.setupicon {
+ margin-left: 1em;
+ cursor: pointer;
+}
+
+.leaveicon {
+ margin-left: 1em;
+ cursor: pointer;
+ color: #d40000;
+}
+
+.selectidentity {
+ margin: 15px;
+ font-size: 1.2em;
+}
+
+.setup>.identity {
+ cursor: pointer;
+}
+
+.setup {
+ bottom: 15px;
+}
+
+.createDistantChat {
+ margin-top: 1em;
+}
+
+.no-lobbies {
+
+ .messages,
+ .chatMessage,
+ .setup {
+ left: 165px;
+ }
+}
+
+/* CHAT ROOM (Single Chat) - Desktop Grid Layout */
+@media (min-width: 900px) {
+ .node-panel.chat-room {
+ display: grid !important;
+ grid-template-columns: 250px 1fr 200px !important;
+ /* Lobbies, Chat, Users */
+ grid-template-rows: auto 1fr auto !important;
+ /* Header, Messages, Input */
+ grid-template-areas:
+ "lobbies header rightbar"
+ "lobbies messages rightbar"
+ "lobbies input rightbar" !important;
+ padding: 0 !important;
+ height: 100% !important;
+ }
+
+ .node-panel.chat-room .lobbyName {
+ grid-area: header;
+ padding: 10px;
+ border-bottom: 1px solid #eee;
+ margin: 0;
+ z-index: 10;
+ background: white;
+ }
+
+ .node-panel.chat-room .lobbies {
+ grid-area: lobbies;
+ position: static !important;
+ width: auto !important;
+ height: auto !important;
+ border-right: 1px solid #ccc;
+ overflow-y: auto;
+ display: block !important;
+ top: auto !important;
+ bottom: auto !important;
+ left: auto !important;
+ }
+
+ .node-panel.chat-room .messages {
+ grid-area: messages;
+ position: static !important;
+ width: auto !important;
+ height: auto !important;
+ overflow-y: auto;
+ padding: 10px;
+ left: auto !important;
+ right: auto !important;
+ top: auto !important;
+ bottom: auto !important;
+ margin: 0 !important;
+ }
+
+ .node-panel.chat-room .rightbar {
+ grid-area: rightbar;
+ position: static !important;
+ width: auto !important;
+ border-left: 1px solid #ccc;
+ overflow-y: auto;
+ display: block !important;
+ }
+
+ .node-panel.chat-room .chatMessage {
+ grid-area: input;
+ position: static !important;
+ width: auto !important;
+ height: auto !important;
+ border-top: 1px solid #eee;
+ left: auto !important;
+ right: auto !important;
+ bottom: auto !important;
+ flex: 0 0 auto;
+ padding: 10px !important;
+ background: white;
+ z-index: 10;
+ }
+}
+
+/* Mobile Overrides - Ensure Flex Column */
+@media (max-width: 899px) {
+ .node-panel.chat-room {
+ display: flex !important;
+ flex-direction: column !important;
+ height: 100% !important;
+ position: relative !important;
+ }
+
+ .node-panel.chat-room .lobbyName {
+ flex: 0 0 auto;
+ }
+
+ .node-panel.chat-room .messages {
+ flex: 1 !important;
+ overflow-y: auto !important;
+ position: relative !important;
+ top: 0 !important;
+ bottom: 0 !important;
+ left: 0 !important;
+ right: 0 !important;
+ width: 100% !important;
+ height: auto !important;
+ margin: 0 !important;
+ }
+
+ .node-panel.chat-room .chatMessage {
+ flex: 0 0 auto !important;
+ position: relative !important;
+ bottom: 0 !important;
+ left: 0 !important;
+ right: 0 !important;
+ width: 100% !important;
+ height: auto !important;
+ z-index: 100;
+ }
+
+ .node-panel.chat-room .rightbar,
+ .node-panel.chat-room .lobbies {
+ display: none !important;
+ position: fixed !important;
+ top: 60px !important;
+ bottom: 0 !important;
+ width: 80% !important;
+ background: white !important;
+ z-index: 200 !important;
+ box-shadow: 2px 0 10px rgba(0, 0, 0, 0.2) !important;
+ }
+
+ .node-panel.chat-room.show-lobbies .lobbies {
+ display: block !important;
+ left: 0 !important;
+ }
+
+ .node-panel.chat-room.show-users .rightbar {
+ display: block !important;
+ right: 0 !important;
+ }
+
+ .chat-overlay {
+ display: none;
+ position: fixed;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ background: rgba(0, 0, 0, 0.4);
+ z-index: 150;
+ }
+
+ .show-lobbies .chat-overlay,
+ .show-users .chat-overlay {
+ display: block;
+ }
+
+ /* Mobile Icons in Header */
+ .mobile-menu-icons {
+ display: flex;
+ gap: 15px;
+ font-size: 1.2rem;
+ }
+
+ .mobile-menu-icons i {
+ cursor: pointer;
+ padding: 5px;
+ }
+}
+
+@media (min-width: 900px) {
+ .mobile-menu-icons {
+ display: none;
+ }
+}
+
+/* =====================================================
+ CHAT HUB - Two-Pane Layout (matching Network page)
+ ===================================================== */
+
+.chat-hub-container {
+ display: flex;
+ height: 100%;
+ width: 100%;
+ overflow: hidden;
+ background-color: #f1f5f9;
+}
+
+.chat-hub-left-pane {
+ width: 320px;
+ min-width: 300px;
+ max-width: 350px;
+ border-right: 1px solid #cbd5e1;
+ display: flex;
+ flex-direction: column;
+ background: #ffffff;
+ box-shadow: 2px 0 5px rgba(0, 0, 0, 0.05);
+}
+
+.chat-own-profile-card {
+ padding: 1.25rem;
+ border-bottom: 1px solid #e2e8f0;
+ background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
+
+ .profile-header {
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+ }
+
+ .profile-info {
+ display: flex;
+ flex-direction: column;
+ flex: 1;
+ overflow: hidden;
+
+ .profile-name {
+ font-weight: 700;
+ color: #1e293b;
+ font-size: 1.1rem;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+
+ .profile-status {
+ font-size: 0.85rem;
+ color: #10b981;
+ font-weight: 500;
+ display: flex;
+ align-items: center;
+ gap: 0.35rem;
+
+ &::before {
+ content: '';
+ display: inline-block;
+ width: 8px;
+ height: 8px;
+ background-color: #10b981;
+ border-radius: 50%;
+ }
+ }
+ }
+}
+
+.chat-rooms-list-container {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ overflow: hidden;
+
+ .searchbar-container {
+ padding: 0.75rem 1rem;
+ border-bottom: 1px solid #e2e8f0;
+
+ input.searchbar {
+ width: 100%;
+ padding: 0.5rem 0.75rem;
+ font-size: 0.9rem;
+ border: 1px solid #cbd5e1;
+ border-radius: 0.375rem;
+ background-color: #f8fafc;
+ outline: none;
+ transition: all 0.2s;
+
+ &:focus {
+ background-color: #ffffff;
+ border-color: #3ba4d7;
+ box-shadow: 0 0 0 3px rgba(59, 164, 215, 0.15);
+ }
+ }
+ }
+
+ .rooms-scroll {
+ flex: 1;
+ overflow-y: auto;
+ padding: 0.5rem 0;
+ }
+}
+
+.rooms-section-title {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ padding: 0.75rem 1rem 0.375rem;
+ font-size: 0.75rem;
+ font-weight: 700;
+ color: #64748b;
+ text-transform: uppercase;
+ letter-spacing: 0.05em;
+
+ i {
+ font-size: 0.7rem;
+ color: #94a3b8;
+ }
+}
+
+.chat-room-list-item {
+ display: flex;
+ align-items: center;
+ gap: 0.75rem;
+ padding: 0.75rem 1rem;
+ margin: 0.125rem 0.5rem;
+ border-radius: 0.5rem;
+ cursor: pointer;
+ transition: all 0.2s;
+
+ &:hover {
+ background-color: #f1f5f9;
+ }
+
+ &.selected {
+ background-color: #e0f2fe;
+
+ .room-name {
+ color: #0369a1;
+ font-weight: 600;
+ }
+ }
+
+ .room-icon {
+ flex-shrink: 0;
+ width: 36px;
+ height: 36px;
+ border-radius: 0.5rem;
+ background: linear-gradient(135deg, #3ba4d7, #0ea5e9);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ color: #ffffff;
+ font-size: 1.35rem;
+ }
+
+ &.public-room .room-icon {
+ background: linear-gradient(135deg, #10b981, #059669);
+ }
+
+ .room-meta {
+ flex: 1;
+ min-width: 0;
+
+ .room-name {
+ font-size: 0.95rem;
+ color: #334155;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ transition: color 0.2s;
+ }
+
+ .room-topic {
+ font-size: 0.8rem;
+ color: #94a3b8;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+ }
+
+ .room-badge {
+ flex-shrink: 0;
+ min-width: 24px;
+ height: 24px;
+ border-radius: 12px;
+ background-color: #e2e8f0;
+ color: #475569;
+ font-size: 0.75rem;
+ font-weight: 700;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ padding: 0 0.375rem;
+ }
+}
+
+.chat-hub-right-pane {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ overflow: hidden;
+ background-color: #f8fafc;
+}
+
+.chat-pane-placeholder {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ color: #94a3b8;
+ gap: 1rem;
+ padding: 2rem;
+ text-align: center;
+
+ i {
+ font-size: 4rem;
+ color: #cbd5e1;
+ }
+
+ p {
+ font-size: 1.1rem;
+ max-width: 400px;
+ }
+}
+
+.chat-hub-tab-content {
+ flex: 1;
+ overflow-y: auto;
+ padding: 1.5rem;
+}
+
+.chat-room-detail-view {
+ display: flex;
+ flex-direction: column;
+ gap: 1.5rem;
+
+ .detail-header {
+ display: flex;
+ align-items: flex-start;
+ gap: 1.5rem;
+ padding-bottom: 1.5rem;
+ border-bottom: 1px solid #e2e8f0;
+ flex-wrap: wrap;
+
+ .detail-title {
+ flex: 1;
+ min-width: 200px;
+
+ h2 {
+ font-size: 1.75rem;
+ font-weight: 800;
+ color: #1e293b;
+ margin-bottom: 0.25rem;
+ }
+
+ .detail-subtitle {
+ font-size: 0.9rem;
+ color: #64748b;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ }
+ }
+
+ .detail-actions {
+ display: flex;
+ gap: 0.75rem;
+ flex-wrap: wrap;
+
+ button {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ padding: 0.5rem 1rem;
+ font-size: 0.9rem;
+ }
+ }
+ }
+
+ .detail-section {
+ background-color: #ffffff;
+ border-radius: 0.5rem;
+ border: 1px solid #e2e8f0;
+ padding: 1.25rem;
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
+
+ h3 {
+ font-size: 1.1rem;
+ font-weight: 700;
+ color: #334155;
+ margin-bottom: 1rem;
+ padding-bottom: 0.5rem;
+ border-bottom: 1px solid #f1f5f9;
+ }
+
+ .info-grid {
+ display: grid;
+ grid-template-columns: 130px 1fr;
+ row-gap: 0.75rem;
+ font-size: 0.9rem;
+
+ .info-label {
+ font-weight: 600;
+ color: #64748b;
+ }
+
+ .info-value {
+ color: #1e293b;
+ word-break: break-all;
+ }
+ }
+ }
+}
+
+.participants-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+ gap: 0.5rem;
+}
+
+.participant-card {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ padding: 0.5rem 0.75rem;
+ background-color: #f8fafc;
+ border: 1px solid #e2e8f0;
+ border-radius: 0.375rem;
+
+ .participant-name {
+ font-size: 0.875rem;
+ color: #334155;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+}
+
+.no-participants {
+ color: #94a3b8;
+ font-size: 0.9rem;
+ font-style: italic;
+}
+
+.detail-actions-footer {
+ display: flex;
+ gap: 0.75rem;
+
+ button {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ padding: 0.5rem 1rem;
+ font-size: 0.9rem;
+ }
+}
+
+.join-description {
+ color: #64748b;
+ font-size: 0.9rem;
+ margin-bottom: 1rem;
+}
+
+.identities-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+ gap: 0.75rem;
+}
+
+.identity-card {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ padding: 0.75rem 1rem;
+ background-color: #f8fafc;
+ border: 1px solid #e2e8f0;
+ border-radius: 0.5rem;
+ cursor: pointer;
+ transition: all 0.2s;
+
+ &:hover {
+ background-color: #e0f2fe;
+ border-color: #3ba4d7;
+ }
+
+ .identity-name {
+ font-size: 0.95rem;
+ font-weight: 600;
+ color: #334155;
+ }
+
+ i {
+ color: #3ba4d7;
+ font-size: 0.9rem;
+ }
+}
+
+.no-rooms {
+ padding: 1rem;
+ color: #94a3b8;
+ text-align: center;
+ font-style: italic;
+}
+
+/* Chat Hub Responsive - Mobile */
+@media (max-width: 899px) {
+ .chat-hub-container {
+ flex-direction: column;
+ }
+
+ .chat-hub-left-pane {
+ width: 100%;
+ min-width: 0;
+ max-width: none;
+ max-height: 45%;
+ border-right: none;
+ border-bottom: 1px solid #cbd5e1;
+ }
+
+ .chat-hub-right-pane {
+ flex: 1;
+ min-height: 0;
+ }
+}
+
+/* =====================================================
+ CHAT HUB - Right Pane Conversation & Tabs Styling
+ ===================================================== */
+
+.chat-hub-header-bar {
+ padding: 0.75rem 1.5rem;
+ background-color: #ffffff;
+ border-bottom: 1px solid #e2e8f0;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ height: 65px;
+ flex-shrink: 0;
+}
+
+.chat-hub-header-bar .chat-header-info {
+ display: flex;
+ flex-direction: column;
+ overflow: hidden;
+}
+
+.chat-hub-header-bar .chat-header-info .chat-header-name {
+ font-size: 1.15rem;
+ font-weight: 800;
+ color: #1e293b;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.chat-hub-header-bar .chat-header-info .chat-header-topic {
+ font-size: 0.85rem;
+ color: #64748b;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ margin-top: 0.125rem;
+}
+
+.chat-hub-header-bar .chat-header-actions {
+ display: flex;
+ gap: 0.5rem;
+}
+
+.chat-hub-header-bar .chat-header-actions button {
+ display: flex;
+ align-items: center;
+ gap: 0.35rem;
+ padding: 0.375rem 0.75rem;
+ font-size: 0.85rem;
+}
+
+.chat-hub-tabs-container {
+ background-color: #ffffff;
+ border-bottom: 1px solid #cbd5e1;
+ padding: 0.5rem 1.5rem 0;
+}
+
+.chat-hub-tabs {
+ display: flex;
+ gap: 0.5rem;
+}
+
+.chat-hub-tabs .tab-btn {
+ padding: 0.625rem 1.25rem;
+ font-size: 0.95rem;
+ font-weight: 600;
+ color: #64748b;
+ background: transparent;
+ border: none;
+ border-radius: 0.375rem 0.375rem 0 0;
+ border-bottom: 3px solid transparent;
+ cursor: pointer;
+ box-shadow: none;
+ transition: all 0.2s;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+}
+
+.chat-hub-tabs .tab-btn:hover {
+ color: #334155;
+ background-color: #f1f5f9;
+}
+
+.chat-hub-tabs .tab-btn.active {
+ color: #3ba4d7;
+ border-bottom-color: #3ba4d7;
+ background-color: transparent;
+}
+
+.chat-hub-tab-content {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ overflow: hidden;
+ background-color: #f8fafc;
+}
+
+.chat-hub-conversation-layout {
+ display: flex;
+ flex-direction: row;
+ height: 100%;
+ width: 100%;
+ overflow: hidden;
+}
+
+.chat-hub-conversation-main {
+ display: flex;
+ flex-direction: column;
+ flex: 1;
+ height: 100%;
+ overflow: hidden;
+}
+
+.chat-hub-rightbar {
+ width: 200px;
+ border-left: 1px solid #cbd5e1;
+ background-color: #ffffff;
+ display: flex;
+ flex-direction: column;
+ flex-shrink: 0;
+}
+
+.chat-hub-rightbar .rightbar-title {
+ padding: 0.75rem 1rem;
+ font-size: 0.85rem;
+ font-weight: 700;
+ color: #64748b;
+ text-transform: uppercase;
+ letter-spacing: 0.05em;
+ border-bottom: 1px solid #e2e8f0;
+}
+
+.chat-hub-rightbar .rightbar-users-list {
+ flex: 1;
+ overflow-y: auto;
+ padding: 0.5rem;
+}
+
+.chat-hub-rightbar .user {
+ padding: 0.5rem 0.75rem;
+ font-size: 0.9rem;
+ color: #334155;
+ border-radius: 0.375rem;
+ transition: all 0.2s;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.chat-hub-rightbar .user:hover {
+ background-color: #f1f5f9;
+ color: #0f172a;
+}
+
+.chat-hub-rightbar .user .defaultAvatar {
+ width: 2rem;
+ height: 2rem;
+ font-size: 0.9rem;
+ flex-shrink: 0;
+}
+
+.chat-hub-rightbar .user img.avatar {
+ width: 2rem;
+ height: 2rem;
+ flex-shrink: 0;
+}
+
+@media (max-width: 899px) {
+ .chat-hub-rightbar {
+ display: none;
+ }
+}
+
+.chat-hub-messages {
+ flex: 1;
+ overflow-y: auto;
+ padding: 1.25rem 1.5rem;
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+}
+
+/* Chat bubble overrides for two-pane layout */
+.chat-hub-messages .message {
+ display: flex;
+ flex-direction: column;
+ max-width: 70%;
+ padding: 0.625rem 0.875rem;
+ border-radius: 0.75rem;
+ font-size: 0.925rem;
+ line-height: 1.4;
+ word-break: break-word;
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+}
+
+.chat-hub-messages .message.incoming {
+ align-self: flex-start;
+ align-items: flex-start;
+ background-color: #ffffff;
+ color: #1e293b;
+ border: 1px solid #e2e8f0;
+ border-bottom-left-radius: 0.125rem;
+}
+
+.chat-hub-messages .message.outgoing {
+ align-self: flex-end;
+ align-items: flex-end;
+ background-color: #3ba4d7;
+ color: #ffffff;
+ border-bottom-right-radius: 0.125rem;
+}
+
+.chat-hub-messages .message .username {
+ font-size: 0.75rem;
+ margin-bottom: 0.25rem;
+ padding: 0 0.125rem;
+ font-weight: 700;
+}
+
+.chat-hub-messages .message.incoming .username {
+ color: #0369a1;
+}
+
+.chat-hub-messages .message.outgoing .username {
+ color: #e0f2fe;
+}
+
+.chat-hub-messages .message .messagetext {
+ white-space: break-spaces;
+ margin: 0;
+}
+
+.chat-hub-messages .message .datetime {
+ font-size: 0.7rem;
+ margin-top: 0.25rem;
+ padding: 0 0.125rem;
+ opacity: 0.8;
+}
+
+.chat-hub-messages .message.incoming .datetime {
+ color: #64748b;
+}
+
+.chat-hub-messages .message.outgoing .datetime {
+ color: #f1f5f9;
+}
+
+.chat-hub-input-area {
+ padding: 0.75rem 1.5rem;
+ background-color: #ffffff;
+ border-top: 1px solid #cbd5e1;
+ display: flex;
+ gap: 0.75rem;
+ align-items: flex-end;
+ flex-shrink: 0;
+}
+
+.chat-hub-input-area textarea.chat-hub-textarea {
+ flex: 1;
+ resize: vertical;
+ min-height: 40px;
+ max-height: 250px;
+ height: 40px;
+ padding: 0.5rem 0.75rem;
+ border: 1px solid #cbd5e1;
+ border-radius: 0.375rem;
+ font-size: 0.9rem;
+ outline: none;
+ transition: border-color 0.2s, box-shadow 0.2s;
+ background-color: #f8fafc;
+}
+
+.chat-hub-input-area textarea.chat-hub-textarea:focus {
+ background-color: #ffffff;
+ border-color: #3ba4d7;
+ box-shadow: 0 0 0 3px rgba(59, 164, 215, 0.15);
+}
+
+.chat-hub-input-area button.chat-hub-send-btn {
+ padding: 0.5rem 1.25rem;
+ font-size: 0.9rem;
+ height: 40px;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ border-radius: 0.375rem;
+}
+
+/* Compact Room Chat Style (No bubbles, unique nickname colors, IRC-style) */
+.chat-hub-messages.compact-container,
+.messages.compact-container {
+ gap: 0 !important;
+ padding: 0.75rem 1rem !important;
+ background-color: #ffffff !important;
+ display: flex !important;
+ flex-direction: column !important;
+
+ .message.compact {
+ display: block !important;
+ max-width: 100% !important;
+ padding: 0.1rem 0 !important;
+ border-radius: 0 !important;
+ background-color: transparent !important;
+ border: none !important;
+ box-shadow: none !important;
+ align-self: flex-start !important;
+ font-size: 0.875rem !important;
+ line-height: 1.45 !important;
+ margin: 0 !important;
+ white-space: nowrap !important;
+ // overflow: hidden !important;
+ // text-overflow: ellipsis !important;
+
+ &:hover {
+ background-color: #f8fafc !important;
+ overflow: visible !important;
+ white-space: normal !important;
+ }
+
+ .datetime {
+ color: #a0a0a0 !important;
+ margin-right: 0.4rem !important;
+ font-size: 0.78rem !important;
+ font-family: monospace !important;
+ opacity: 1 !important;
+ display: inline !important;
+ }
+
+ .username {
+ font-weight: bold !important;
+ margin-right: 0.2rem !important;
+ font-size: 0.875rem !important;
+ display: inline !important;
+ }
+
+ .messagetext {
+ color: #1e293b !important;
+ white-space: normal !important;
+ word-break: break-word !important;
+ display: inline !important;
+ margin: 0 !important;
+ }
+ }
+}
+
+
+
diff --git a/webui-src/app/scss/pages/_config.scss b/webui-src/app/scss/pages/_config.scss
index 5bdcf39..659cc95 100644
--- a/webui-src/app/scss/pages/_config.scss
+++ b/webui-src/app/scss/pages/_config.scss
@@ -89,3 +89,58 @@
.config-files {
@include flex(column, $gap: 1rem);
}
+
+/* Hidden Service Configuration layout overrides */
+.proxy-server-container {
+ width: 100%;
+ @include flex(column, $gap: 1rem);
+}
+
+.proxy-description {
+ color: #334155;
+ font-size: 0.95rem;
+ margin-bottom: 0.5rem;
+}
+
+.proxy-rows-container {
+ @include flex(column, $gap: 0.75rem);
+ width: 100%;
+}
+
+.proxy-row {
+ display: grid;
+ grid-template-columns: 160px 220px 220px auto;
+ gap: 0.75rem;
+ align-items: center;
+ width: 100%;
+}
+
+.proxy-label {
+ font-size: 0.95rem;
+ font-weight: 500;
+ color: #1e293b;
+}
+
+.proxy-addr-input,
+.proxy-port-input {
+ width: 100% !important;
+ max-width: none !important;
+}
+
+.proxy-status-container {
+ @include flex($align: center, $gap: 0.5rem);
+}
+
+.proxy-status-bullet {
+ width: 14px;
+ height: 14px;
+ border-radius: 50%;
+ display: inline-block;
+ border: 1px solid #475569;
+}
+
+.proxy-status-text {
+ font-size: 0.95rem;
+ color: #1e293b;
+}
+
diff --git a/webui-src/app/scss/pages/_home.scss b/webui-src/app/scss/pages/_home.scss
index 7311777..5090d03 100644
--- a/webui-src/app/scss/pages/_home.scss
+++ b/webui-src/app/scss/pages/_home.scss
@@ -67,12 +67,14 @@
& .textArea {
padding: 0;
width: 100%;
- min-height: 75px;
+ height: auto;
font-size: 1rem;
font-family: monospace;
background: transparent;
border: none;
resize: none;
+ overflow: hidden;
+ field-sizing: content;
}
& i {
diff --git a/webui-src/app/scss/pages/_mail.scss b/webui-src/app/scss/pages/_mail.scss
index 9050bc0..6149e30 100644
--- a/webui-src/app/scss/pages/_mail.scss
+++ b/webui-src/app/scss/pages/_mail.scss
@@ -12,7 +12,7 @@
.compose-mail {
&__from {
- @include flex($justify: space-between);
+ @include flex($justify: flex-start, $align: center, $gap: 0.5rem);
padding-bottom: 0.5rem;
border-bottom: 2px solid $light-color;
}
@@ -231,6 +231,17 @@ table.mails {
cursor: auto;
background-color: white;
}
+
+ & th.sortable-th {
+ cursor: pointer;
+ user-select: none;
+ transition: background-color 0.2s, color 0.2s;
+
+ &:hover {
+ background-color: $light-color;
+ color: darken($light-color, 80%);
+ }
+ }
}
/* hide checkbox */
diff --git a/webui-src/app/scss/pages/_network.scss b/webui-src/app/scss/pages/_network.scss
index 0510013..2ff74cc 100644
--- a/webui-src/app/scss/pages/_network.scss
+++ b/webui-src/app/scss/pages/_network.scss
@@ -1,46 +1,544 @@
@use '../abstracts' as *;
-.friend {
- color: #444;
- font-size: 1.2em;
- margin: 1rem 0.5rem;
- padding: 1.5rem;
- border: 1px solid #aaa;
- border-radius: 20px;
- & i {
- float: left;
- padding: 0 10px;
- cursor: pointer;
- }
- & h4 {
- margin-bottom: 5px;
- }
- & button {
- font-size: 0.9em;
- }
- &.hidden {
- display: none;
- }
- & .brief-info.online {
- color: green;
+.network-container {
+ display: flex;
+ height: 100%;
+ width: 100%;
+ overflow: hidden;
+ background-color: #f1f5f9;
+}
+
+.network-left-pane {
+ width: 320px;
+ min-width: 300px;
+ max-width: 350px;
+ border-right: 1px solid #cbd5e1;
+ display: flex;
+ flex-direction: column;
+ background: #ffffff;
+ box-shadow: 2px 0 5px rgba(0, 0, 0, 0.05);
+}
+
+.own-profile-card {
+ padding: 1.25rem;
+ border-bottom: 1px solid #e2e8f0;
+ background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
+ display: flex;
+ flex-direction: column;
+ gap: 0.75rem;
+
+ .profile-header {
+ display: flex;
+ align-items: center;
+ gap: 1rem;
}
- & .location {
- margin: 5px;
- border-top: 1px solid #bbb;
- display: grid;
- grid-template-columns: auto auto;
- justify-content: start;
- }
- & .brief-info {
- @include flex($align: center);
- justify-self: start;
+ .profile-info {
+ display: flex;
+ flex-direction: column;
+ flex: 1;
+ overflow: hidden;
+
+ .profile-name {
+ font-weight: 700;
+ color: #1e293b;
+ font-size: 1.1rem;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
+
+ .profile-status {
+ font-size: 0.85rem;
+ color: #10b981;
+ font-weight: 500;
+ display: flex;
+ align-items: center;
+ gap: 0.35rem;
+
+ &::before {
+ content: '';
+ display: inline-block;
+ width: 8px;
+ height: 8px;
+ background-color: #10b981;
+ border-radius: 50%;
+ }
+ }
}
- & .fa-times-circle {
- color: #555;
- }
- & .fa-check-circle {
- color: green;
+ .own-identity-select-container {
+ display: flex;
+ flex-direction: column;
+ gap: 0.25rem;
+
+ label {
+ font-size: 0.75rem;
+ color: #64748b;
+ font-weight: 600;
+ text-transform: uppercase;
+ letter-spacing: 0.05em;
+ }
+
+ select.own-identity-select {
+ width: 100%;
+ padding: 0.375rem 0.5rem;
+ font-size: 0.85rem;
+ border: 1px solid #cbd5e1;
+ border-radius: 0.375rem;
+ background-color: #ffffff;
+ color: #334155;
+ outline: none;
+ cursor: pointer;
+ transition: border-color 0.2s;
+
+ &:focus {
+ border-color: #3ba4d7;
+ }
+ }
+ }
+}
+
+.friends-list-container {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ overflow: hidden;
+
+ .searchbar-container {
+ padding: 0.75rem 1rem;
+ border-bottom: 1px solid #e2e8f0;
+
+ input.searchbar {
+ width: 100%;
+ padding: 0.5rem 0.75rem;
+ font-size: 0.9rem;
+ border: 1px solid #cbd5e1;
+ border-radius: 0.375rem;
+ background-color: #f8fafc;
+ outline: none;
+ transition: all 0.2s;
+
+ &:focus {
+ background-color: #ffffff;
+ border-color: #3ba4d7;
+ box-shadow: 0 0 0 3px rgba(59, 164, 215, 0.15);
+ }
+ }
+ }
+
+ .friends-scroll {
+ flex: 1;
+ overflow-y: auto;
+ padding: 0.5rem 0;
+ }
+}
+
+.friend-list-item {
+ display: flex;
+ align-items: center;
+ gap: 0.75rem;
+ padding: 0.75rem 1rem;
+ margin: 0.125rem 0.5rem;
+ border-radius: 0.5rem;
+ cursor: pointer;
+ transition: all 0.2s;
+
+ &:hover {
+ background-color: #f1f5f9;
+ }
+
+ &.selected {
+ background-color: #e0f2fe;
+
+ .friend-name {
+ color: #0369a1;
+ font-weight: 600;
+ }
+ }
+
+ .friend-avatar {
+ flex-shrink: 0;
+ }
+
+ .friend-meta {
+ flex: 1;
+ min-width: 0;
+
+ .friend-name {
+ font-size: 0.95rem;
+ color: #334155;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ transition: color 0.2s;
+ }
+
+ .friend-status {
+ font-size: 0.8rem;
+ color: #94a3b8;
+
+ &.online {
+ color: #10b981;
+ font-weight: 500;
+ }
+ }
+ }
+}
+
+.network-right-pane {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ overflow: hidden;
+ background-color: #f8fafc;
+}
+
+.network-pane-placeholder {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ color: #94a3b8;
+ gap: 1rem;
+ padding: 2rem;
+ text-align: center;
+
+ i {
+ font-size: 4rem;
+ color: #cbd5e1;
+ }
+
+ p {
+ font-size: 1.1rem;
+ max-width: 400px;
+ }
+}
+
+.network-tabs {
+ display: flex;
+ background-color: #ffffff;
+ border-bottom: 1px solid #cbd5e1;
+ padding: 0.5rem 1rem 0;
+ gap: 0.5rem;
+
+ .tab-btn {
+ padding: 0.625rem 1.25rem;
+ font-size: 0.95rem;
+ font-weight: 600;
+ color: #64748b;
+ background: transparent;
+ border: none;
+ border-radius: 0.375rem 0.375rem 0 0;
+ border-bottom: 3px solid transparent;
+ cursor: pointer;
+ box-shadow: none;
+ transition: all 0.2s;
+
+ &:hover {
+ color: #334155;
+ background-color: #f1f5f9;
+ }
+
+ &.active {
+ color: #3ba4d7;
+ border-bottom-color: #3ba4d7;
+ background-color: transparent;
+ }
+ }
+}
+
+.network-tab-content {
+ flex: 1;
+ overflow-y: auto;
+ padding: 1.5rem;
+}
+
+.network-detail-view {
+ display: flex;
+ flex-direction: column;
+ gap: 1.5rem;
+
+ .detail-header {
+ display: flex;
+ align-items: center;
+ gap: 1.5rem;
+ padding-bottom: 1.5rem;
+ border-bottom: 1px solid #e2e8f0;
+
+ .detail-title {
+ flex: 1;
+
+ h2 {
+ font-size: 1.75rem;
+ font-weight: 800;
+ color: #1e293b;
+ margin-bottom: 0.25rem;
+ }
+
+ .detail-subtitle {
+ font-size: 0.9rem;
+ color: #64748b;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ }
+ }
+
+ .detail-actions {
+ display: flex;
+ gap: 0.75rem;
+
+ button {
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ padding: 0.5rem 1rem;
+ font-size: 0.9rem;
+ }
+ }
+ }
+
+ .detail-section {
+ background-color: #ffffff;
+ border-radius: 0.5rem;
+ border: 1px solid #e2e8f0;
+ padding: 1.25rem;
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
+
+ h3 {
+ font-size: 1.1rem;
+ font-weight: 700;
+ color: #334155;
+ margin-bottom: 1rem;
+ padding-bottom: 0.5rem;
+ border-bottom: 1px solid #f1f5f9;
+ }
+
+ .info-grid {
+ display: grid;
+ grid-template-columns: 120px 1fr;
+ row-gap: 0.75rem;
+ font-size: 0.9rem;
+
+ .info-label {
+ font-weight: 600;
+ color: #64748b;
+ }
+
+ .info-value {
+ color: #1e293b;
+ word-break: break-all;
+ }
+ }
+ }
+
+ .locations-grid {
+ display: grid;
+ grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+ gap: 1rem;
+ }
+
+ .location-card {
+ background-color: #ffffff;
+ border: 1px solid #e2e8f0;
+ border-radius: 0.5rem;
+ padding: 1rem;
+ display: flex;
+ flex-direction: column;
+ gap: 0.5rem;
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
+
+ .loc-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ border-bottom: 1px solid #f1f5f9;
+ padding-bottom: 0.5rem;
+ margin-bottom: 0.25rem;
+
+ .loc-name {
+ font-weight: 700;
+ color: #334155;
+ font-size: 0.95rem;
+ }
+
+ .loc-status {
+ font-size: 0.75rem;
+ font-weight: 600;
+ padding: 0.125rem 0.5rem;
+ border-radius: 0.25rem;
+
+ &.online {
+ background-color: #d1fae5;
+ color: #065f46;
+ }
+
+ &.offline {
+ background-color: #f1f5f9;
+ color: #475569;
+ }
+ }
+ }
+
+ .loc-body {
+ font-size: 0.85rem;
+ display: grid;
+ grid-template-columns: 80px 1fr;
+ row-gap: 0.25rem;
+
+ .loc-label {
+ color: #64748b;
+ }
+
+ .loc-val {
+ color: #334155;
+ word-break: break-all;
+ }
+ }
+
+ .loc-footer {
+ margin-top: 0.5rem;
+ display: flex;
+ justify-content: flex-end;
+
+ button {
+ font-size: 0.8rem;
+ padding: 0.25rem 0.75rem;
+ }
+ }
+ }
+}
+
+.network-chat-view {
+ display: flex;
+ flex-direction: column;
+ height: 100%;
+ overflow: hidden;
+ background-color: #f8fafc;
+
+ .chat-messages {
+ flex: 1;
+ overflow-y: auto;
+ padding: 1.25rem;
+ display: flex;
+ flex-direction: column;
+ gap: 1rem;
+ }
+
+ .chat-bubble-container {
+ display: flex;
+ flex-direction: column;
+ max-width: 70%;
+
+ &.outgoing {
+ align-self: flex-end;
+ align-items: flex-end;
+
+ .chat-bubble {
+ background-color: #3ba4d7;
+ color: #ffffff;
+ border-bottom-right-radius: 0.125rem;
+ }
+ }
+
+ &.incoming {
+ align-self: flex-start;
+ align-items: flex-start;
+
+ .chat-bubble {
+ background-color: #ffffff;
+ color: #1e293b;
+ border: 1px solid #e2e8f0;
+ border-bottom-left-radius: 0.125rem;
+ }
+ }
+
+ .chat-sender {
+ font-size: 0.75rem;
+ color: #64748b;
+ margin-bottom: 0.25rem;
+ padding: 0 0.25rem;
+ }
+
+ .chat-bubble {
+ padding: 0.625rem 0.875rem;
+ border-radius: 0.75rem;
+ font-size: 0.925rem;
+ line-height: 1.4;
+ white-space: break-spaces;
+ word-break: break-word;
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
+ }
+
+ .chat-time {
+ font-size: 0.7rem;
+ color: #94a3b8;
+ margin-top: 0.25rem;
+ padding: 0 0.25rem;
+ }
+ }
+
+ .chat-input-area {
+ padding: 1rem;
+ background-color: #ffffff;
+ border-top: 1px solid #cbd5e1;
+ display: flex;
+ gap: 0.75rem;
+ align-items: center;
+
+ textarea.chat-textarea {
+ flex: 1;
+ resize: none;
+ height: 40px;
+ padding: 0.5rem 0.75rem;
+ border: 1px solid #cbd5e1;
+ border-radius: 0.375rem;
+ font-size: 0.9rem;
+ outline: none;
+ transition: all 0.2s;
+
+ &:focus {
+ border-color: #3ba4d7;
+ box-shadow: 0 0 0 3px rgba(59, 164, 215, 0.15);
+ }
+ }
+
+ button.send-btn {
+ padding: 0.5rem 1.25rem;
+ font-size: 0.9rem;
+ height: 40px;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ }
+ }
+
+ .chat-warning {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ color: #64748b;
+ text-align: center;
+ padding: 2rem;
+ gap: 1rem;
+
+ i {
+ font-size: 3rem;
+ color: #cbd5e1;
+ }
+
+ h4 {
+ font-weight: 700;
+ color: #334155;
+ }
+
+ p {
+ max-width: 350px;
+ font-size: 0.9rem;
+ }
}
}
diff --git a/webui-src/app/scss/pages/_people.scss b/webui-src/app/scss/pages/_people.scss
index 8788b15..36f0810 100644
--- a/webui-src/app/scss/pages/_people.scss
+++ b/webui-src/app/scss/pages/_people.scss
@@ -58,3 +58,140 @@ img.avatar {
color: green;
cursor: pointer;
}
+
+.people-sidebar-header {
+ display: flex;
+ flex-direction: column;
+ padding: 0.75rem 1rem 0.5rem 1rem;
+ gap: 0.75rem;
+ border-bottom: 1px solid #e2e8f0;
+ background-color: #ffffff;
+
+ .searchbar-wrapper {
+ position: relative;
+ display: flex;
+ align-items: center;
+
+ i.fa-search {
+ position: absolute;
+ left: 0.85rem;
+ color: #94a3b8;
+ font-size: 0.9rem;
+ }
+
+ input.searchbar-input {
+ width: 100%;
+ padding: 0.5rem 0.75rem 0.5rem 2.25rem;
+ border: 1px solid #e2e8f0;
+ border-radius: 0.5rem;
+ font-size: 0.9rem;
+ background-color: #f8fafc;
+ color: #1e293b;
+ outline: none;
+ transition: all 0.2s ease;
+
+ &:focus {
+ border-color: #3b82f6;
+ background-color: #ffffff;
+ box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+ }
+ }
+ }
+
+ .segmented-control {
+ display: flex;
+ background-color: #f1f5f9;
+ padding: 3px;
+ border-radius: 0.5rem;
+ gap: 4px;
+
+ button.segment-tab {
+ flex: 1;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 0.5rem;
+ padding: 0.5rem 0.75rem;
+ font-size: 0.9rem;
+ font-weight: 600;
+ color: #64748b;
+ background: transparent;
+ border: none;
+ border-radius: 0.375rem;
+ cursor: pointer;
+ box-shadow: none;
+ transition: all 0.2s ease;
+
+ &:hover {
+ color: #1e293b;
+ }
+
+ &.active {
+ background-color: #ffffff;
+ color: #0f172a;
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
+
+ .segment-badge {
+ background-color: #019dff;
+ color: #ffffff;
+ }
+ }
+
+ .segment-badge {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ background-color: #cbd5e1;
+ color: #334155;
+ font-size: 0.75rem;
+ font-weight: 700;
+ min-width: 1.25rem;
+ height: 1.25rem;
+ padding: 0 0.35rem;
+ border-radius: 9999px;
+ line-height: 1;
+ transition: all 0.2s ease;
+ }
+ }
+ }
+
+ .sub-filter-row {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: 0.5rem;
+ min-height: 32px;
+
+ select.filter-select {
+ padding: 0.35rem 0.6rem;
+ border: 1px solid #cbd5e1;
+ border-radius: 0.375rem;
+ font-size: 0.85rem;
+ font-weight: 600;
+ color: #475569;
+ background-color: #ffffff;
+ cursor: pointer;
+ outline: none;
+ }
+
+ .btn-add-id {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 32px;
+ height: 32px;
+ border-radius: 0.375rem;
+ background-color: #3b82f6;
+ color: #ffffff;
+ border: none;
+ cursor: pointer;
+ font-size: 0.9rem;
+ transition: background-color 0.2s;
+
+ &:hover {
+ background-color: #2563eb;
+ }
+ }
+ }
+}
+
diff --git a/webui-src/app/statusbar.js b/webui-src/app/statusbar.js
new file mode 100644
index 0000000..a9156bd
--- /dev/null
+++ b/webui-src/app/statusbar.js
@@ -0,0 +1,405 @@
+const m = require('mithril');
+const rs = require('rswebui');
+
+// RS_HIDDEN_TYPE constants (from config_util.js / retroshare/rspeers.h)
+const RS_HIDDEN_TYPE_NONE = 0;
+const RS_HIDDEN_TYPE_TOR = 2;
+const RS_HIDDEN_TYPE_I2P = 4;
+
+const State = {
+ friendCount: 0,
+ onlineCount: 0,
+ dhtActive: false,
+ dhtOk: false,
+ dhtRsNetSize: 0,
+ dhtNetSize: 0,
+ natState: 1, // BAD_UNKNOWN
+ firewalled: true,
+ forwardPort: false,
+ stunOk: false,
+ extAddressOk: false,
+
+ // Hidden-mode / Tor+I2P state (mirrors TorStatus widget in Qt)
+ hiddenType: RS_HIDDEN_TYPE_NONE, // 0=none, 2=Tor, 4=I2P
+ torProxyOk: null, // null=unchecked, true=ok, false=fail
+ torChecking: false,
+
+ // Bandwidth rate status (mirrors RatesStatus widget in Qt)
+ rateIn: 0.0,
+ totalIn: 0,
+ rateOut: 0.0,
+ totalOut: 0,
+};
+
+function parse64Num(val) {
+ if (val === null || val === undefined) return 0;
+ if (typeof val === 'number') return val;
+ if (typeof val === 'string') return parseFloat(val) || 0;
+ if (typeof val === 'object') {
+ if (val.xuint64 !== undefined) return parseFloat(val.xuint64) || 0;
+ if (val.xint64 !== undefined) return parseFloat(val.xint64) || 0;
+ if (val.xstr64 !== undefined) return parseFloat(val.xstr64) || 0;
+ }
+ return 0;
+}
+
+function formatUnit(val) {
+ const num = parse64Num(val);
+ if (!num) return '0';
+ if (num >= 1000000) return (num / 1000000).toFixed(1) + 'M';
+ if (num >= 1000) return (num / 1000).toFixed(1) + 'k';
+ return num.toString();
+}
+
+function formatBytes(rawBytes) {
+ const bytes = parse64Num(rawBytes);
+ if (!bytes || bytes <= 0 || isNaN(bytes)) return '0 B';
+ const k = 1024;
+ const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];
+ const i = Math.floor(Math.log(bytes) / Math.log(k));
+ const safeI = Math.max(0, Math.min(i, sizes.length - 1));
+ return parseFloat((bytes / Math.pow(k, safeI)).toFixed(1)) + ' ' + sizes[safeI];
+}
+
+/**
+ * Fetch the own peer's hidden type and proxy status using /rsTor API.
+ * Mirrors Qt's TorStatus::getTorStatus().
+ */
+function updateTorStatus() {
+ if (!rs.loginKey.isVerified) return;
+
+ rs.rsJsonApiRequest('/rsAccounts/getCurrentAccountId').then((res) => {
+ if (!res || !res.body || !res.body.retval) return;
+ const sslId = res.body.id;
+
+ rs.rsJsonApiRequest('/rsPeers/getPeerDetails', { sslId }).then((pres) => {
+ if (!pres || !pres.body || !pres.body.retval) return;
+ const details = pres.body.det;
+
+ const isHiddenNode = Boolean(
+ details && (
+ details.hiddenType === RS_HIDDEN_TYPE_TOR ||
+ details.hiddenType === RS_HIDDEN_TYPE_I2P ||
+ details.extAddr === 'Hidden'
+ )
+ );
+
+ if (!isHiddenNode) {
+ State.hiddenType = RS_HIDDEN_TYPE_NONE;
+ State.torProxyOk = null;
+ State.torChecking = false;
+ m.redraw();
+ return;
+ }
+
+ const targetType = details.hiddenType || RS_HIDDEN_TYPE_TOR;
+ State.hiddenType = targetType;
+
+ // Check if node uses automated Tor management via /rsAccounts/isTorAuto (same as Qt)
+ rs.rsJsonApiRequest('/rsAccounts/isTorAuto', {}).then((autoRes) => {
+ const isAuto = autoRes && (autoRes.retval || (autoRes.body && autoRes.body.retval));
+ if (isAuto) {
+ Promise.all([
+ rs.rsJsonApiRequest('/rsTor/torStatus', {}),
+ rs.rsJsonApiRequest('/rsTor/torConnectivityStatus', {}),
+ ]).then(([torRes, connRes]) => {
+ const torStatus = torRes && torRes.body ? torRes.body.retval : (torRes && torRes.retval !== undefined ? torRes.retval : 0);
+ const connStatus = connRes && connRes.body ? connRes.body.retval : (connRes && connRes.retval !== undefined ? connRes.retval : 0);
+ const torControlOk = connStatus === 6; // HIDDEN_SERVICE_READY
+ const torReady = torStatus === 2; // READY
+
+ if (torReady && torControlOk) {
+ State.torProxyOk = true;
+ State.torChecking = false;
+ } else if (torStatus === 1 || connStatus === 0 || connStatus === 1) {
+ // OFFLINE, ERROR, or NOT_CONNECTED
+ State.torProxyOk = false;
+ State.torChecking = false;
+ } else if (connStatus >= 2 && connStatus <= 5) {
+ // CONNECTING, SOCKET_CONNECTED, AUTHENTICATING, AUTHENTICATED
+ State.torProxyOk = null;
+ State.torChecking = true;
+ } else {
+ // UNKNOWN / default
+ State.torProxyOk = null;
+ State.torChecking = false;
+ }
+ m.redraw();
+ }).catch(() => {
+ State.torProxyOk = true;
+ State.torChecking = false;
+ m.redraw();
+ });
+ } else {
+ // Manual Tor / I2P proxy node
+ State.torProxyOk = true;
+ State.torChecking = false;
+ m.redraw();
+ }
+ }).catch(() => {
+ // Fallback for uncompiled backend: query /rsTor endpoints directly or assume active
+ Promise.all([
+ rs.rsJsonApiRequest('/rsTor/torStatus', {}),
+ rs.rsJsonApiRequest('/rsTor/torConnectivityStatus', {}),
+ ]).then(([torRes, connRes]) => {
+ const torStatus = torRes && torRes.body ? torRes.body.retval : (torRes && torRes.retval !== undefined ? torRes.retval : 0);
+ const connStatus = connRes && connRes.body ? connRes.body.retval : (connRes && connRes.retval !== undefined ? connRes.retval : 0);
+ const torControlOk = connStatus === 6; // HIDDEN_SERVICE_READY
+ const torReady = torStatus === 2; // READY
+
+ if (torReady && torControlOk) {
+ State.torProxyOk = true;
+ State.torChecking = false;
+ } else if (torStatus === 1 || connStatus === 0 || connStatus === 1) {
+ State.torProxyOk = false;
+ State.torChecking = false;
+ } else if (connStatus >= 2 && connStatus <= 5) {
+ State.torProxyOk = null;
+ State.torChecking = true;
+ } else {
+ State.torProxyOk = null;
+ State.torChecking = false;
+ }
+ m.redraw();
+ }).catch(() => {
+ State.torProxyOk = true;
+ State.torChecking = false;
+ m.redraw();
+ });
+ });
+ });
+ }).catch(() => {
+ State.hiddenType = RS_HIDDEN_TYPE_NONE;
+ State.torProxyOk = null;
+ });
+}
+
+function updateStatus() {
+ if (!rs.loginKey.isVerified) return;
+
+ // 1. Friends count
+ rs.rsJsonApiRequest('/rsPeers/getFriendList', {}, (data) => {
+ if (data && data.sslIds) {
+ State.friendCount = data.sslIds.length;
+ }
+ });
+ rs.rsJsonApiRequest('/rsPeers/getOnlineList', {}, (data) => {
+ if (data && data.sslIds) {
+ State.onlineCount = data.sslIds.length;
+ }
+ });
+
+ // 2. Net / DHT config status & NAT state
+ rs.rsJsonApiRequest('/rsConfig/getConfigNetStatus', {}, (data) => {
+ if (data && data.status) {
+ State.dhtActive = data.status.DHTActive;
+ State.dhtOk = data.status.netDhtOk;
+ State.dhtRsNetSize = data.status.netDhtRsNetSize;
+ State.dhtNetSize = data.status.netDhtNetSize;
+ State.firewalled = data.status.firewalled;
+ State.forwardPort = data.status.forwardPort;
+ State.stunOk = data.status.netStunOk;
+ State.extAddressOk = data.status.netExtAddressOk;
+
+ // Compute NAT state directly from RsConfigNetStatus
+ if (!data.status.netLocalOk && !data.status.netExtAddressOk) {
+ State.natState = 2; // BAD_OFFLINE
+ } else if (data.status.firewalled && !data.status.forwardPort && !data.status.netUpnpOk) {
+ State.natState = 6; // WARNING_NATTED
+ } else if (data.status.forwardPort || data.status.netUpnpOk) {
+ State.natState = 9; // ADV_FORWARD
+ } else {
+ State.natState = 8; // GOOD
+ }
+ }
+ });
+
+ // 3. NAT netState from /rsConfig/getNetState
+ rs.rsJsonApiRequest('/rsConfig/getNetState', {}, (data) => {
+ if (data && data.retval !== undefined) {
+ State.natState = data.retval;
+ m.redraw();
+ } else if (data && data.body && data.body.retval !== undefined) {
+ State.natState = data.body.retval;
+ m.redraw();
+ }
+ });
+
+ // 4. Tor/I2P hidden-mode status (same as Qt TorStatus widget)
+ updateTorStatus();
+
+ // 5. Bandwidth rates (same as Qt RatesStatus widget)
+ rs.rsJsonApiRequest('/rsConfig/getTotalBandwidthRates', {}, (data) => {
+ const rates = (data && data.rates) || (data && data.body && data.body.rates);
+ if (rates) {
+ State.rateIn = rates.mRateIn !== undefined ? rates.mRateIn : (rates.rateIn || 0.0);
+ State.totalIn = rates.mTotalIn !== undefined ? rates.mTotalIn : (rates.totalIn || 0);
+ State.rateOut = rates.mRateOut !== undefined ? rates.mRateOut : (rates.rateOut || 0.0);
+ State.totalOut = rates.mTotalOut !== undefined ? rates.mTotalOut : (rates.totalOut || 0);
+ m.redraw();
+ }
+ });
+}
+
+let intervalId = null;
+
+const StatusBar = {
+ oninit() {
+ updateStatus();
+ intervalId = setInterval(updateStatus, 10000); // update every 10s
+ },
+ onremove() {
+ if (intervalId) {
+ clearInterval(intervalId);
+ }
+ },
+ view() {
+ const isHiddenMode = State.hiddenType === RS_HIDDEN_TYPE_TOR ||
+ State.hiddenType === RS_HIDDEN_TYPE_I2P;
+
+ // ── DHT Status (hidden when in hidden/darknet mode) ────────────────────
+ let dhtColor = '#94a3b8'; // grey (off)
+ let dhtTooltip = 'DHT Off';
+ if (State.dhtActive) {
+ if (State.dhtOk) {
+ if (State.dhtRsNetSize < 10) {
+ dhtColor = '#eab308'; // yellow (searching)
+ dhtTooltip = 'DHT Searching for RetroShare Peers';
+ } else {
+ dhtColor = '#22c55e'; // green (good)
+ dhtTooltip = 'DHT Good';
+ }
+ } else {
+ dhtColor = '#ef4444'; // red (error)
+ dhtTooltip = 'No peer found in DHT';
+ }
+ }
+
+ // ── NAT Status (hidden when in hidden/darknet mode) ────────────────────
+ let natColor = '#94a3b8';
+ let natTooltip = 'Offline';
+ switch (State.natState) {
+ case 1: // BAD_UNKNOWN
+ natColor = '#eab308';
+ natTooltip = 'Network Status Unknown';
+ break;
+ case 2: // BAD_OFFLINE
+ natColor = '#94a3b8';
+ natTooltip = 'Offline';
+ break;
+ case 3: // BAD_NATSYM
+ case 4: // BAD_NODHT_NAT
+ natColor = '#ef4444';
+ natTooltip = State.natState === 4 ? 'DHT Disabled and Firewalled' : 'Nasty Firewall';
+ break;
+ case 5: // WARNING_RESTART
+ natColor = '#eab308';
+ natTooltip = 'Network Restarting';
+ break;
+ case 6: // WARNING_NATTED
+ natColor = '#eab308';
+ natTooltip = 'Behind Firewall';
+ break;
+ case 7: // WARNING_NODHT
+ natColor = '#eab308';
+ natTooltip = 'DHT Disabled';
+ break;
+ case 8: // GOOD
+ natColor = '#22c55e';
+ natTooltip = 'RetroShare Server';
+ break;
+ case 9: // ADV_FORWARD
+ natColor = '#22c55e';
+ natTooltip = 'Forwarded Port';
+ break;
+ }
+
+ // ── Tor / I2P status indicator ─────────────────────────────────────────
+ // Only shown when peer is in RS_NETMODE_HIDDEN with a proxy type set.
+ // Mirrors Qt TorStatus widget label + icon logic.
+ let torLabel, torColor, torIcon, torTooltip;
+ if (isHiddenMode) {
+ torLabel = State.hiddenType === RS_HIDDEN_TYPE_TOR ? 'Tor:' : 'I2P:';
+ if (State.torChecking) {
+ torColor = '#f59e0b';
+ torIcon = 'fas fa-spinner fa-spin';
+ torTooltip = 'Checking proxy…';
+ } else if (State.torProxyOk === null) {
+ torColor = '#94a3b8';
+ torIcon = 'fas fa-shield-alt';
+ torTooltip = State.hiddenType === RS_HIDDEN_TYPE_TOR
+ ? 'No Tor configuration'
+ : 'No I2P configuration';
+ } else if (State.torProxyOk) {
+ torColor = '#22c55e';
+ torIcon = 'fas fa-shield-alt';
+ torTooltip = State.hiddenType === RS_HIDDEN_TYPE_TOR
+ ? 'Tor proxy is OK'
+ : 'I2P proxy is OK';
+ } else {
+ torColor = '#ef4444';
+ torIcon = 'fas fa-shield-alt';
+ torTooltip = State.hiddenType === RS_HIDDEN_TYPE_TOR
+ ? 'Tor proxy is not available'
+ : 'I2P proxy is not available';
+ }
+ }
+
+ return m('.statusbar', [
+ m('.statusbar-left', { style: 'display: flex; align-items: center; gap: 0.75rem;' }, [
+ m('.statusbar-item', [
+ m('i.fas.fa-users', { style: 'margin-right: 0.5rem; color: #94a3b8;' }),
+ m('span', `Friends: ${State.onlineCount}/${State.friendCount}`),
+ ]),
+
+ // NAT — hidden when in hidden/darknet mode (same as Qt)
+ !isHiddenMode && m('.statusbar-divider'),
+ !isHiddenMode && m('.statusbar-item', { title: natTooltip, style: 'cursor: help;' }, [
+ m('span', { style: 'margin-right: 0.5rem;' }, 'NAT:'),
+ m('.status-bullet', { style: { backgroundColor: natColor } }),
+ ]),
+
+ // DHT — hidden when in hidden/darknet mode (same as Qt)
+ !isHiddenMode && m('.statusbar-divider'),
+ !isHiddenMode && m('.statusbar-item', { title: dhtTooltip, style: 'cursor: help;' }, [
+ m('span', { style: 'margin-right: 0.5rem;' }, 'DHT:'),
+ m('.status-bullet', { style: { backgroundColor: dhtColor } }),
+ State.dhtActive && State.dhtOk && m('span', { style: 'margin-left: 0.5rem;' }, `${formatUnit(State.dhtRsNetSize)} (${formatUnit(State.dhtNetSize)})`),
+ ]),
+
+ // Tor / I2P — only shown when in hidden/darknet mode (same as Qt)
+ isHiddenMode && m('.statusbar-divider'),
+ isHiddenMode && m('.statusbar-item.statusbar-item--tor', {
+ title: torTooltip,
+ style: 'cursor: help;',
+ }, [
+ m('span.tor-label', { style: 'margin-right: 0.4rem; font-weight: 600;' }, torLabel),
+ m('i.' + torIcon, { style: { color: torColor, fontSize: '1rem', transition: 'color 0.3s' } }),
+ ]),
+ ]),
+
+ // RatesStatus — Bandwidth speeds & total cumulative transfer (Down | Up)
+ m('.statusbar-right', { style: 'display: flex; align-items: center; gap: 0.75rem;' }, [
+ m('.statusbar-item', {
+ title: `Downloaded: ${formatBytes(State.totalIn)}`,
+ style: 'cursor: help; display: flex; align-items: center;'
+ }, [
+ m('i.fas.fa-arrow-down', { style: 'color: #22c55e; margin-right: 0.35rem;' }),
+ m('span', `Down: ${State.rateIn.toFixed(2)} kB/s`),
+ m('span', { style: 'color: #64748b; font-size: 0.8rem; margin-left: 0.35rem;' }, `(${formatBytes(State.totalIn)})`),
+ ]),
+ m('.statusbar-divider'),
+ m('.statusbar-item', {
+ title: `Uploaded: ${formatBytes(State.totalOut)}`,
+ style: 'cursor: help; display: flex; align-items: center;'
+ }, [
+ m('i.fas.fa-arrow-up', { style: 'color: #3b82f6; margin-right: 0.35rem;' }),
+ m('span', `Up: ${State.rateOut.toFixed(2)} kB/s`),
+ m('span', { style: 'color: #64748b; font-size: 0.8rem; margin-left: 0.35rem;' }, `(${formatBytes(State.totalOut)})`),
+ ]),
+ ]),
+ ]);
+ },
+};
+
+module.exports = StatusBar;
diff --git a/webui-src/styles.css b/webui-src/styles.css
index 7930463..369212b 100644
--- a/webui-src/styles.css
+++ b/webui-src/styles.css
@@ -4,4 +4,4 @@
*/.fa,.fas,.far,.fal,.fab{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:inline-block;font-style:normal;font-variant:normal;text-rendering:auto;line-height:1}.fa-lg{font-size:1.33333em;line-height:.75em;vertical-align:-0.0667em}.fa-xs{font-size:.75em}.fa-sm{font-size:.875em}.fa-1x{font-size:1em}.fa-2x{font-size:2em}.fa-3x{font-size:3em}.fa-4x{font-size:4em}.fa-5x{font-size:5em}.fa-6x{font-size:6em}.fa-7x{font-size:7em}.fa-8x{font-size:8em}.fa-9x{font-size:9em}.fa-10x{font-size:10em}.fa-fw{text-align:center;width:1.25em}.fa-ul{list-style-type:none;margin-left:2.5em;padding-left:0}.fa-ul>li{position:relative}.fa-li{left:-2em;position:absolute;text-align:center;width:2em;line-height:inherit}.fa-border{border:solid .08em #eee;border-radius:.1em;padding:.2em .25em .15em}.fa-pull-left{float:left}.fa-pull-right{float:right}.fa.fa-pull-left,.fas.fa-pull-left,.far.fa-pull-left,.fal.fa-pull-left,.fab.fa-pull-left{margin-right:.3em}.fa.fa-pull-right,.fas.fa-pull-right,.far.fa-pull-right,.fal.fa-pull-right,.fab.fa-pull-right{margin-left:.3em}.fa-spin{-webkit-animation:fa-spin 2s infinite linear;animation:fa-spin 2s infinite linear}.fa-pulse{-webkit-animation:fa-spin 1s infinite steps(8);animation:fa-spin 1s infinite steps(8)}@-webkit-keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}100%{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.fa-rotate-90{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";-webkit-transform:rotate(90deg);transform:rotate(90deg)}.fa-rotate-180{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";-webkit-transform:rotate(180deg);transform:rotate(180deg)}.fa-rotate-270{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";-webkit-transform:rotate(270deg);transform:rotate(270deg)}.fa-flip-horizontal{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";-webkit-transform:scale(-1, 1);transform:scale(-1, 1)}.fa-flip-vertical{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)";-webkit-transform:scale(1, -1);transform:scale(1, -1)}.fa-flip-both,.fa-flip-horizontal.fa-flip-vertical{-ms-filter:"progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)";-webkit-transform:scale(-1, -1);transform:scale(-1, -1)}:root .fa-rotate-90,:root .fa-rotate-180,:root .fa-rotate-270,:root .fa-flip-horizontal,:root .fa-flip-vertical,:root .fa-flip-both{-webkit-filter:none;filter:none}.fa-stack{display:inline-block;height:2em;line-height:2em;position:relative;vertical-align:middle;width:2.5em}.fa-stack-1x,.fa-stack-2x{left:0;position:absolute;text-align:center;width:100%}.fa-stack-1x{line-height:inherit}.fa-stack-2x{font-size:2em}.fa-inverse{color:#fff}.fa-500px:before{content:""}.fa-accessible-icon:before{content:""}.fa-accusoft:before{content:""}.fa-acquisitions-incorporated:before{content:""}.fa-ad:before{content:""}.fa-address-book:before{content:""}.fa-address-card:before{content:""}.fa-adjust:before{content:""}.fa-adn:before{content:""}.fa-adobe:before{content:""}.fa-adversal:before{content:""}.fa-affiliatetheme:before{content:""}.fa-air-freshener:before{content:""}.fa-airbnb:before{content:""}.fa-algolia:before{content:""}.fa-align-center:before{content:""}.fa-align-justify:before{content:""}.fa-align-left:before{content:""}.fa-align-right:before{content:""}.fa-alipay:before{content:""}.fa-allergies:before{content:""}.fa-amazon:before{content:""}.fa-amazon-pay:before{content:""}.fa-ambulance:before{content:""}.fa-american-sign-language-interpreting:before{content:""}.fa-amilia:before{content:""}.fa-anchor:before{content:""}.fa-android:before{content:""}.fa-angellist:before{content:""}.fa-angle-double-down:before{content:""}.fa-angle-double-left:before{content:""}.fa-angle-double-right:before{content:""}.fa-angle-double-up:before{content:""}.fa-angle-down:before{content:""}.fa-angle-left:before{content:""}.fa-angle-right:before{content:""}.fa-angle-up:before{content:""}.fa-angry:before{content:""}.fa-angrycreative:before{content:""}.fa-angular:before{content:""}.fa-ankh:before{content:""}.fa-app-store:before{content:""}.fa-app-store-ios:before{content:""}.fa-apper:before{content:""}.fa-apple:before{content:""}.fa-apple-alt:before{content:""}.fa-apple-pay:before{content:""}.fa-archive:before{content:""}.fa-archway:before{content:""}.fa-arrow-alt-circle-down:before{content:""}.fa-arrow-alt-circle-left:before{content:""}.fa-arrow-alt-circle-right:before{content:""}.fa-arrow-alt-circle-up:before{content:""}.fa-arrow-circle-down:before{content:""}.fa-arrow-circle-left:before{content:""}.fa-arrow-circle-right:before{content:""}.fa-arrow-circle-up:before{content:""}.fa-arrow-down:before{content:""}.fa-arrow-left:before{content:""}.fa-arrow-right:before{content:""}.fa-arrow-up:before{content:""}.fa-arrows-alt:before{content:""}.fa-arrows-alt-h:before{content:""}.fa-arrows-alt-v:before{content:""}.fa-artstation:before{content:""}.fa-assistive-listening-systems:before{content:""}.fa-asterisk:before{content:""}.fa-asymmetrik:before{content:""}.fa-at:before{content:""}.fa-atlas:before{content:""}.fa-atlassian:before{content:""}.fa-atom:before{content:""}.fa-audible:before{content:""}.fa-audio-description:before{content:""}.fa-autoprefixer:before{content:""}.fa-avianex:before{content:""}.fa-aviato:before{content:""}.fa-award:before{content:""}.fa-aws:before{content:""}.fa-baby:before{content:""}.fa-baby-carriage:before{content:""}.fa-backspace:before{content:""}.fa-backward:before{content:""}.fa-bacon:before{content:""}.fa-balance-scale:before{content:""}.fa-balance-scale-left:before{content:""}.fa-balance-scale-right:before{content:""}.fa-ban:before{content:""}.fa-band-aid:before{content:""}.fa-bandcamp:before{content:""}.fa-barcode:before{content:""}.fa-bars:before{content:""}.fa-baseball-ball:before{content:""}.fa-basketball-ball:before{content:""}.fa-bath:before{content:""}.fa-battery-empty:before{content:""}.fa-battery-full:before{content:""}.fa-battery-half:before{content:""}.fa-battery-quarter:before{content:""}.fa-battery-three-quarters:before{content:""}.fa-battle-net:before{content:""}.fa-bed:before{content:""}.fa-beer:before{content:""}.fa-behance:before{content:""}.fa-behance-square:before{content:""}.fa-bell:before{content:""}.fa-bell-slash:before{content:""}.fa-bezier-curve:before{content:""}.fa-bible:before{content:""}.fa-bicycle:before{content:""}.fa-biking:before{content:""}.fa-bimobject:before{content:""}.fa-binoculars:before{content:""}.fa-biohazard:before{content:""}.fa-birthday-cake:before{content:""}.fa-bitbucket:before{content:""}.fa-bitcoin:before{content:""}.fa-bity:before{content:""}.fa-black-tie:before{content:""}.fa-blackberry:before{content:""}.fa-blender:before{content:""}.fa-blender-phone:before{content:""}.fa-blind:before{content:""}.fa-blog:before{content:""}.fa-blogger:before{content:""}.fa-blogger-b:before{content:""}.fa-bluetooth:before{content:""}.fa-bluetooth-b:before{content:""}.fa-bold:before{content:""}.fa-bolt:before{content:""}.fa-bomb:before{content:""}.fa-bone:before{content:""}.fa-bong:before{content:""}.fa-book:before{content:""}.fa-book-dead:before{content:""}.fa-book-medical:before{content:""}.fa-book-open:before{content:""}.fa-book-reader:before{content:""}.fa-bookmark:before{content:""}.fa-bootstrap:before{content:""}.fa-border-all:before{content:""}.fa-border-none:before{content:""}.fa-border-style:before{content:""}.fa-bowling-ball:before{content:""}.fa-box:before{content:""}.fa-box-open:before{content:""}.fa-boxes:before{content:""}.fa-braille:before{content:""}.fa-brain:before{content:""}.fa-bread-slice:before{content:""}.fa-briefcase:before{content:""}.fa-briefcase-medical:before{content:""}.fa-broadcast-tower:before{content:""}.fa-broom:before{content:""}.fa-brush:before{content:""}.fa-btc:before{content:""}.fa-buffer:before{content:""}.fa-bug:before{content:""}.fa-building:before{content:""}.fa-bullhorn:before{content:""}.fa-bullseye:before{content:""}.fa-burn:before{content:""}.fa-buromobelexperte:before{content:""}.fa-bus:before{content:""}.fa-bus-alt:before{content:""}.fa-business-time:before{content:""}.fa-buysellads:before{content:""}.fa-calculator:before{content:""}.fa-calendar:before{content:""}.fa-calendar-alt:before{content:""}.fa-calendar-check:before{content:""}.fa-calendar-day:before{content:""}.fa-calendar-minus:before{content:""}.fa-calendar-plus:before{content:""}.fa-calendar-times:before{content:""}.fa-calendar-week:before{content:""}.fa-camera:before{content:""}.fa-camera-retro:before{content:""}.fa-campground:before{content:""}.fa-canadian-maple-leaf:before{content:""}.fa-candy-cane:before{content:""}.fa-cannabis:before{content:""}.fa-capsules:before{content:""}.fa-car:before{content:""}.fa-car-alt:before{content:""}.fa-car-battery:before{content:""}.fa-car-crash:before{content:""}.fa-car-side:before{content:""}.fa-caret-down:before{content:""}.fa-caret-left:before{content:""}.fa-caret-right:before{content:""}.fa-caret-square-down:before{content:""}.fa-caret-square-left:before{content:""}.fa-caret-square-right:before{content:""}.fa-caret-square-up:before{content:""}.fa-caret-up:before{content:""}.fa-carrot:before{content:""}.fa-cart-arrow-down:before{content:""}.fa-cart-plus:before{content:""}.fa-cash-register:before{content:""}.fa-cat:before{content:""}.fa-cc-amazon-pay:before{content:""}.fa-cc-amex:before{content:""}.fa-cc-apple-pay:before{content:""}.fa-cc-diners-club:before{content:""}.fa-cc-discover:before{content:""}.fa-cc-jcb:before{content:""}.fa-cc-mastercard:before{content:""}.fa-cc-paypal:before{content:""}.fa-cc-stripe:before{content:""}.fa-cc-visa:before{content:""}.fa-centercode:before{content:""}.fa-centos:before{content:""}.fa-certificate:before{content:""}.fa-chair:before{content:""}.fa-chalkboard:before{content:""}.fa-chalkboard-teacher:before{content:""}.fa-charging-station:before{content:""}.fa-chart-area:before{content:""}.fa-chart-bar:before{content:""}.fa-chart-line:before{content:""}.fa-chart-pie:before{content:""}.fa-check:before{content:""}.fa-check-circle:before{content:""}.fa-check-double:before{content:""}.fa-check-square:before{content:""}.fa-cheese:before{content:""}.fa-chess:before{content:""}.fa-chess-bishop:before{content:""}.fa-chess-board:before{content:""}.fa-chess-king:before{content:""}.fa-chess-knight:before{content:""}.fa-chess-pawn:before{content:""}.fa-chess-queen:before{content:""}.fa-chess-rook:before{content:""}.fa-chevron-circle-down:before{content:""}.fa-chevron-circle-left:before{content:""}.fa-chevron-circle-right:before{content:""}.fa-chevron-circle-up:before{content:""}.fa-chevron-down:before{content:""}.fa-chevron-left:before{content:""}.fa-chevron-right:before{content:""}.fa-chevron-up:before{content:""}.fa-child:before{content:""}.fa-chrome:before{content:""}.fa-chromecast:before{content:""}.fa-church:before{content:""}.fa-circle:before{content:""}.fa-circle-notch:before{content:""}.fa-city:before{content:""}.fa-clinic-medical:before{content:""}.fa-clipboard:before{content:""}.fa-clipboard-check:before{content:""}.fa-clipboard-list:before{content:""}.fa-clock:before{content:""}.fa-clone:before{content:""}.fa-closed-captioning:before{content:""}.fa-cloud:before{content:""}.fa-cloud-download-alt:before{content:""}.fa-cloud-meatball:before{content:""}.fa-cloud-moon:before{content:""}.fa-cloud-moon-rain:before{content:""}.fa-cloud-rain:before{content:""}.fa-cloud-showers-heavy:before{content:""}.fa-cloud-sun:before{content:""}.fa-cloud-sun-rain:before{content:""}.fa-cloud-upload-alt:before{content:""}.fa-cloudscale:before{content:""}.fa-cloudsmith:before{content:""}.fa-cloudversify:before{content:""}.fa-cocktail:before{content:""}.fa-code:before{content:""}.fa-code-branch:before{content:""}.fa-codepen:before{content:""}.fa-codiepie:before{content:""}.fa-coffee:before{content:""}.fa-cog:before{content:""}.fa-cogs:before{content:""}.fa-coins:before{content:""}.fa-columns:before{content:""}.fa-comment:before{content:""}.fa-comment-alt:before{content:""}.fa-comment-dollar:before{content:""}.fa-comment-dots:before{content:""}.fa-comment-medical:before{content:""}.fa-comment-slash:before{content:""}.fa-comments:before{content:""}.fa-comments-dollar:before{content:""}.fa-compact-disc:before{content:""}.fa-compass:before{content:""}.fa-compress:before{content:""}.fa-compress-arrows-alt:before{content:""}.fa-concierge-bell:before{content:""}.fa-confluence:before{content:""}.fa-connectdevelop:before{content:""}.fa-contao:before{content:""}.fa-cookie:before{content:""}.fa-cookie-bite:before{content:""}.fa-copy:before{content:""}.fa-copyright:before{content:""}.fa-couch:before{content:""}.fa-cpanel:before{content:""}.fa-creative-commons:before{content:""}.fa-creative-commons-by:before{content:""}.fa-creative-commons-nc:before{content:""}.fa-creative-commons-nc-eu:before{content:""}.fa-creative-commons-nc-jp:before{content:""}.fa-creative-commons-nd:before{content:""}.fa-creative-commons-pd:before{content:""}.fa-creative-commons-pd-alt:before{content:""}.fa-creative-commons-remix:before{content:""}.fa-creative-commons-sa:before{content:""}.fa-creative-commons-sampling:before{content:""}.fa-creative-commons-sampling-plus:before{content:""}.fa-creative-commons-share:before{content:""}.fa-creative-commons-zero:before{content:""}.fa-credit-card:before{content:""}.fa-critical-role:before{content:""}.fa-crop:before{content:""}.fa-crop-alt:before{content:""}.fa-cross:before{content:""}.fa-crosshairs:before{content:""}.fa-crow:before{content:""}.fa-crown:before{content:""}.fa-crutch:before{content:""}.fa-css3:before{content:""}.fa-css3-alt:before{content:""}.fa-cube:before{content:""}.fa-cubes:before{content:""}.fa-cut:before{content:""}.fa-cuttlefish:before{content:""}.fa-d-and-d:before{content:""}.fa-d-and-d-beyond:before{content:""}.fa-dashcube:before{content:""}.fa-database:before{content:""}.fa-deaf:before{content:""}.fa-delicious:before{content:""}.fa-democrat:before{content:""}.fa-deploydog:before{content:""}.fa-deskpro:before{content:""}.fa-desktop:before{content:""}.fa-dev:before{content:""}.fa-deviantart:before{content:""}.fa-dharmachakra:before{content:""}.fa-dhl:before{content:""}.fa-diagnoses:before{content:""}.fa-diaspora:before{content:""}.fa-dice:before{content:""}.fa-dice-d20:before{content:""}.fa-dice-d6:before{content:""}.fa-dice-five:before{content:""}.fa-dice-four:before{content:""}.fa-dice-one:before{content:""}.fa-dice-six:before{content:""}.fa-dice-three:before{content:""}.fa-dice-two:before{content:""}.fa-digg:before{content:""}.fa-digital-ocean:before{content:""}.fa-digital-tachograph:before{content:""}.fa-directions:before{content:""}.fa-discord:before{content:""}.fa-discourse:before{content:""}.fa-divide:before{content:""}.fa-dizzy:before{content:""}.fa-dna:before{content:""}.fa-dochub:before{content:""}.fa-docker:before{content:""}.fa-dog:before{content:""}.fa-dollar-sign:before{content:""}.fa-dolly:before{content:""}.fa-dolly-flatbed:before{content:""}.fa-donate:before{content:""}.fa-door-closed:before{content:""}.fa-door-open:before{content:""}.fa-dot-circle:before{content:""}.fa-dove:before{content:""}.fa-download:before{content:""}.fa-draft2digital:before{content:""}.fa-drafting-compass:before{content:""}.fa-dragon:before{content:""}.fa-draw-polygon:before{content:""}.fa-dribbble:before{content:""}.fa-dribbble-square:before{content:""}.fa-dropbox:before{content:""}.fa-drum:before{content:""}.fa-drum-steelpan:before{content:""}.fa-drumstick-bite:before{content:""}.fa-drupal:before{content:""}.fa-dumbbell:before{content:""}.fa-dumpster:before{content:""}.fa-dumpster-fire:before{content:""}.fa-dungeon:before{content:""}.fa-dyalog:before{content:""}.fa-earlybirds:before{content:""}.fa-ebay:before{content:""}.fa-edge:before{content:""}.fa-edit:before{content:""}.fa-egg:before{content:""}.fa-eject:before{content:""}.fa-elementor:before{content:""}.fa-ellipsis-h:before{content:""}.fa-ellipsis-v:before{content:""}.fa-ello:before{content:""}.fa-ember:before{content:""}.fa-empire:before{content:""}.fa-envelope:before{content:""}.fa-envelope-open:before{content:""}.fa-envelope-open-text:before{content:""}.fa-envelope-square:before{content:""}.fa-envira:before{content:""}.fa-equals:before{content:""}.fa-eraser:before{content:""}.fa-erlang:before{content:""}.fa-ethereum:before{content:""}.fa-ethernet:before{content:""}.fa-etsy:before{content:""}.fa-euro-sign:before{content:""}.fa-evernote:before{content:""}.fa-exchange-alt:before{content:""}.fa-exclamation:before{content:""}.fa-exclamation-circle:before{content:""}.fa-exclamation-triangle:before{content:""}.fa-expand:before{content:""}.fa-expand-arrows-alt:before{content:""}.fa-expeditedssl:before{content:""}.fa-external-link-alt:before{content:""}.fa-external-link-square-alt:before{content:""}.fa-eye:before{content:""}.fa-eye-dropper:before{content:""}.fa-eye-slash:before{content:""}.fa-facebook:before{content:""}.fa-facebook-f:before{content:""}.fa-facebook-messenger:before{content:""}.fa-facebook-square:before{content:""}.fa-fan:before{content:""}.fa-fantasy-flight-games:before{content:""}.fa-fast-backward:before{content:""}.fa-fast-forward:before{content:""}.fa-fax:before{content:""}.fa-feather:before{content:""}.fa-feather-alt:before{content:""}.fa-fedex:before{content:""}.fa-fedora:before{content:""}.fa-female:before{content:""}.fa-fighter-jet:before{content:""}.fa-figma:before{content:""}.fa-file:before{content:""}.fa-file-alt:before{content:""}.fa-file-archive:before{content:""}.fa-file-audio:before{content:""}.fa-file-code:before{content:""}.fa-file-contract:before{content:""}.fa-file-csv:before{content:""}.fa-file-download:before{content:""}.fa-file-excel:before{content:""}.fa-file-export:before{content:""}.fa-file-image:before{content:""}.fa-file-import:before{content:""}.fa-file-invoice:before{content:""}.fa-file-invoice-dollar:before{content:""}.fa-file-medical:before{content:""}.fa-file-medical-alt:before{content:""}.fa-file-pdf:before{content:""}.fa-file-powerpoint:before{content:""}.fa-file-prescription:before{content:""}.fa-file-signature:before{content:""}.fa-file-upload:before{content:""}.fa-file-video:before{content:""}.fa-file-word:before{content:""}.fa-fill:before{content:""}.fa-fill-drip:before{content:""}.fa-film:before{content:""}.fa-filter:before{content:""}.fa-fingerprint:before{content:""}.fa-fire:before{content:""}.fa-fire-alt:before{content:""}.fa-fire-extinguisher:before{content:""}.fa-firefox:before{content:""}.fa-first-aid:before{content:""}.fa-first-order:before{content:""}.fa-first-order-alt:before{content:""}.fa-firstdraft:before{content:""}.fa-fish:before{content:""}.fa-fist-raised:before{content:""}.fa-flag:before{content:""}.fa-flag-checkered:before{content:""}.fa-flag-usa:before{content:""}.fa-flask:before{content:""}.fa-flickr:before{content:""}.fa-flipboard:before{content:""}.fa-flushed:before{content:""}.fa-fly:before{content:""}.fa-folder:before{content:""}.fa-folder-minus:before{content:""}.fa-folder-open:before{content:""}.fa-folder-plus:before{content:""}.fa-font:before{content:""}.fa-font-awesome:before{content:""}.fa-font-awesome-alt:before{content:""}.fa-font-awesome-flag:before{content:""}.fa-font-awesome-logo-full:before{content:""}.fa-fonticons:before{content:""}.fa-fonticons-fi:before{content:""}.fa-football-ball:before{content:""}.fa-fort-awesome:before{content:""}.fa-fort-awesome-alt:before{content:""}.fa-forumbee:before{content:""}.fa-forward:before{content:""}.fa-foursquare:before{content:""}.fa-free-code-camp:before{content:""}.fa-freebsd:before{content:""}.fa-frog:before{content:""}.fa-frown:before{content:""}.fa-frown-open:before{content:""}.fa-fulcrum:before{content:""}.fa-funnel-dollar:before{content:""}.fa-futbol:before{content:""}.fa-galactic-republic:before{content:""}.fa-galactic-senate:before{content:""}.fa-gamepad:before{content:""}.fa-gas-pump:before{content:""}.fa-gavel:before{content:""}.fa-gem:before{content:""}.fa-genderless:before{content:""}.fa-get-pocket:before{content:""}.fa-gg:before{content:""}.fa-gg-circle:before{content:""}.fa-ghost:before{content:""}.fa-gift:before{content:""}.fa-gifts:before{content:""}.fa-git:before{content:""}.fa-git-alt:before{content:""}.fa-git-square:before{content:""}.fa-github:before{content:""}.fa-github-alt:before{content:""}.fa-github-square:before{content:""}.fa-gitkraken:before{content:""}.fa-gitlab:before{content:""}.fa-gitter:before{content:""}.fa-glass-cheers:before{content:""}.fa-glass-martini:before{content:""}.fa-glass-martini-alt:before{content:""}.fa-glass-whiskey:before{content:""}.fa-glasses:before{content:""}.fa-glide:before{content:""}.fa-glide-g:before{content:""}.fa-globe:before{content:""}.fa-globe-africa:before{content:""}.fa-globe-americas:before{content:""}.fa-globe-asia:before{content:""}.fa-globe-europe:before{content:""}.fa-gofore:before{content:""}.fa-golf-ball:before{content:""}.fa-goodreads:before{content:""}.fa-goodreads-g:before{content:""}.fa-google:before{content:""}.fa-google-drive:before{content:""}.fa-google-play:before{content:""}.fa-google-plus:before{content:""}.fa-google-plus-g:before{content:""}.fa-google-plus-square:before{content:""}.fa-google-wallet:before{content:""}.fa-gopuram:before{content:""}.fa-graduation-cap:before{content:""}.fa-gratipay:before{content:""}.fa-grav:before{content:""}.fa-greater-than:before{content:""}.fa-greater-than-equal:before{content:""}.fa-grimace:before{content:""}.fa-grin:before{content:""}.fa-grin-alt:before{content:""}.fa-grin-beam:before{content:""}.fa-grin-beam-sweat:before{content:""}.fa-grin-hearts:before{content:""}.fa-grin-squint:before{content:""}.fa-grin-squint-tears:before{content:""}.fa-grin-stars:before{content:""}.fa-grin-tears:before{content:""}.fa-grin-tongue:before{content:""}.fa-grin-tongue-squint:before{content:""}.fa-grin-tongue-wink:before{content:""}.fa-grin-wink:before{content:""}.fa-grip-horizontal:before{content:""}.fa-grip-lines:before{content:""}.fa-grip-lines-vertical:before{content:""}.fa-grip-vertical:before{content:""}.fa-gripfire:before{content:""}.fa-grunt:before{content:""}.fa-guitar:before{content:""}.fa-gulp:before{content:""}.fa-h-square:before{content:""}.fa-hacker-news:before{content:""}.fa-hacker-news-square:before{content:""}.fa-hackerrank:before{content:""}.fa-hamburger:before{content:""}.fa-hammer:before{content:""}.fa-hamsa:before{content:""}.fa-hand-holding:before{content:""}.fa-hand-holding-heart:before{content:""}.fa-hand-holding-usd:before{content:""}.fa-hand-lizard:before{content:""}.fa-hand-middle-finger:before{content:""}.fa-hand-paper:before{content:""}.fa-hand-peace:before{content:""}.fa-hand-point-down:before{content:""}.fa-hand-point-left:before{content:""}.fa-hand-point-right:before{content:""}.fa-hand-point-up:before{content:""}.fa-hand-pointer:before{content:""}.fa-hand-rock:before{content:""}.fa-hand-scissors:before{content:""}.fa-hand-spock:before{content:""}.fa-hands:before{content:""}.fa-hands-helping:before{content:""}.fa-handshake:before{content:""}.fa-hanukiah:before{content:""}.fa-hard-hat:before{content:""}.fa-hashtag:before{content:""}.fa-hat-wizard:before{content:""}.fa-haykal:before{content:""}.fa-hdd:before{content:""}.fa-heading:before{content:""}.fa-headphones:before{content:""}.fa-headphones-alt:before{content:""}.fa-headset:before{content:""}.fa-heart:before{content:""}.fa-heart-broken:before{content:""}.fa-heartbeat:before{content:""}.fa-helicopter:before{content:""}.fa-highlighter:before{content:""}.fa-hiking:before{content:""}.fa-hippo:before{content:""}.fa-hips:before{content:""}.fa-hire-a-helper:before{content:""}.fa-history:before{content:""}.fa-hockey-puck:before{content:""}.fa-holly-berry:before{content:""}.fa-home:before{content:""}.fa-hooli:before{content:""}.fa-hornbill:before{content:""}.fa-horse:before{content:""}.fa-horse-head:before{content:""}.fa-hospital:before{content:""}.fa-hospital-alt:before{content:""}.fa-hospital-symbol:before{content:""}.fa-hot-tub:before{content:""}.fa-hotdog:before{content:""}.fa-hotel:before{content:""}.fa-hotjar:before{content:""}.fa-hourglass:before{content:""}.fa-hourglass-end:before{content:""}.fa-hourglass-half:before{content:""}.fa-hourglass-start:before{content:""}.fa-house-damage:before{content:""}.fa-houzz:before{content:""}.fa-hryvnia:before{content:""}.fa-html5:before{content:""}.fa-hubspot:before{content:""}.fa-i-cursor:before{content:""}.fa-ice-cream:before{content:""}.fa-icicles:before{content:""}.fa-icons:before{content:""}.fa-id-badge:before{content:""}.fa-id-card:before{content:""}.fa-id-card-alt:before{content:""}.fa-igloo:before{content:""}.fa-image:before{content:""}.fa-images:before{content:""}.fa-imdb:before{content:""}.fa-inbox:before{content:""}.fa-indent:before{content:""}.fa-industry:before{content:""}.fa-infinity:before{content:""}.fa-info:before{content:""}.fa-info-circle:before{content:""}.fa-instagram:before{content:""}.fa-intercom:before{content:""}.fa-internet-explorer:before{content:""}.fa-invision:before{content:""}.fa-ioxhost:before{content:""}.fa-italic:before{content:""}.fa-itch-io:before{content:""}.fa-itunes:before{content:""}.fa-itunes-note:before{content:""}.fa-java:before{content:""}.fa-jedi:before{content:""}.fa-jedi-order:before{content:""}.fa-jenkins:before{content:""}.fa-jira:before{content:""}.fa-joget:before{content:""}.fa-joint:before{content:""}.fa-joomla:before{content:""}.fa-journal-whills:before{content:""}.fa-js:before{content:""}.fa-js-square:before{content:""}.fa-jsfiddle:before{content:""}.fa-kaaba:before{content:""}.fa-kaggle:before{content:""}.fa-key:before{content:""}.fa-keybase:before{content:""}.fa-keyboard:before{content:""}.fa-keycdn:before{content:""}.fa-khanda:before{content:""}.fa-kickstarter:before{content:""}.fa-kickstarter-k:before{content:""}.fa-kiss:before{content:""}.fa-kiss-beam:before{content:""}.fa-kiss-wink-heart:before{content:""}.fa-kiwi-bird:before{content:""}.fa-korvue:before{content:""}.fa-landmark:before{content:""}.fa-language:before{content:""}.fa-laptop:before{content:""}.fa-laptop-code:before{content:""}.fa-laptop-medical:before{content:""}.fa-laravel:before{content:""}.fa-lastfm:before{content:""}.fa-lastfm-square:before{content:""}.fa-laugh:before{content:""}.fa-laugh-beam:before{content:""}.fa-laugh-squint:before{content:""}.fa-laugh-wink:before{content:""}.fa-layer-group:before{content:""}.fa-leaf:before{content:""}.fa-leanpub:before{content:""}.fa-lemon:before{content:""}.fa-less:before{content:""}.fa-less-than:before{content:""}.fa-less-than-equal:before{content:""}.fa-level-down-alt:before{content:""}.fa-level-up-alt:before{content:""}.fa-life-ring:before{content:""}.fa-lightbulb:before{content:""}.fa-line:before{content:""}.fa-link:before{content:""}.fa-linkedin:before{content:""}.fa-linkedin-in:before{content:""}.fa-linode:before{content:""}.fa-linux:before{content:""}.fa-lira-sign:before{content:""}.fa-list:before{content:""}.fa-list-alt:before{content:""}.fa-list-ol:before{content:""}.fa-list-ul:before{content:""}.fa-location-arrow:before{content:""}.fa-lock:before{content:""}.fa-lock-open:before{content:""}.fa-long-arrow-alt-down:before{content:""}.fa-long-arrow-alt-left:before{content:""}.fa-long-arrow-alt-right:before{content:""}.fa-long-arrow-alt-up:before{content:""}.fa-low-vision:before{content:""}.fa-luggage-cart:before{content:""}.fa-lyft:before{content:""}.fa-magento:before{content:""}.fa-magic:before{content:""}.fa-magnet:before{content:""}.fa-mail-bulk:before{content:""}.fa-mailchimp:before{content:""}.fa-male:before{content:""}.fa-mandalorian:before{content:""}.fa-map:before{content:""}.fa-map-marked:before{content:""}.fa-map-marked-alt:before{content:""}.fa-map-marker:before{content:""}.fa-map-marker-alt:before{content:""}.fa-map-pin:before{content:""}.fa-map-signs:before{content:""}.fa-markdown:before{content:""}.fa-marker:before{content:""}.fa-mars:before{content:""}.fa-mars-double:before{content:""}.fa-mars-stroke:before{content:""}.fa-mars-stroke-h:before{content:""}.fa-mars-stroke-v:before{content:""}.fa-mask:before{content:""}.fa-mastodon:before{content:""}.fa-maxcdn:before{content:""}.fa-medal:before{content:""}.fa-medapps:before{content:""}.fa-medium:before{content:""}.fa-medium-m:before{content:""}.fa-medkit:before{content:""}.fa-medrt:before{content:""}.fa-meetup:before{content:""}.fa-megaport:before{content:""}.fa-meh:before{content:""}.fa-meh-blank:before{content:""}.fa-meh-rolling-eyes:before{content:""}.fa-memory:before{content:""}.fa-mendeley:before{content:""}.fa-menorah:before{content:""}.fa-mercury:before{content:""}.fa-meteor:before{content:""}.fa-microchip:before{content:""}.fa-microphone:before{content:""}.fa-microphone-alt:before{content:""}.fa-microphone-alt-slash:before{content:""}.fa-microphone-slash:before{content:""}.fa-microscope:before{content:""}.fa-microsoft:before{content:""}.fa-minus:before{content:""}.fa-minus-circle:before{content:""}.fa-minus-square:before{content:""}.fa-mitten:before{content:""}.fa-mix:before{content:""}.fa-mixcloud:before{content:""}.fa-mizuni:before{content:""}.fa-mobile:before{content:""}.fa-mobile-alt:before{content:""}.fa-modx:before{content:""}.fa-monero:before{content:""}.fa-money-bill:before{content:""}.fa-money-bill-alt:before{content:""}.fa-money-bill-wave:before{content:""}.fa-money-bill-wave-alt:before{content:""}.fa-money-check:before{content:""}.fa-money-check-alt:before{content:""}.fa-monument:before{content:""}.fa-moon:before{content:""}.fa-mortar-pestle:before{content:""}.fa-mosque:before{content:""}.fa-motorcycle:before{content:""}.fa-mountain:before{content:""}.fa-mouse-pointer:before{content:""}.fa-mug-hot:before{content:""}.fa-music:before{content:""}.fa-napster:before{content:""}.fa-neos:before{content:""}.fa-network-wired:before{content:""}.fa-neuter:before{content:""}.fa-newspaper:before{content:""}.fa-nimblr:before{content:""}.fa-node:before{content:""}.fa-node-js:before{content:""}.fa-not-equal:before{content:""}.fa-notes-medical:before{content:""}.fa-npm:before{content:""}.fa-ns8:before{content:""}.fa-nutritionix:before{content:""}.fa-object-group:before{content:""}.fa-object-ungroup:before{content:""}.fa-odnoklassniki:before{content:""}.fa-odnoklassniki-square:before{content:""}.fa-oil-can:before{content:""}.fa-old-republic:before{content:""}.fa-om:before{content:""}.fa-opencart:before{content:""}.fa-openid:before{content:""}.fa-opera:before{content:""}.fa-optin-monster:before{content:""}.fa-osi:before{content:""}.fa-otter:before{content:""}.fa-outdent:before{content:""}.fa-page4:before{content:""}.fa-pagelines:before{content:""}.fa-pager:before{content:""}.fa-paint-brush:before{content:""}.fa-paint-roller:before{content:""}.fa-palette:before{content:""}.fa-palfed:before{content:""}.fa-pallet:before{content:""}.fa-paper-plane:before{content:""}.fa-paperclip:before{content:""}.fa-parachute-box:before{content:""}.fa-paragraph:before{content:""}.fa-parking:before{content:""}.fa-passport:before{content:""}.fa-pastafarianism:before{content:""}.fa-paste:before{content:""}.fa-patreon:before{content:""}.fa-pause:before{content:""}.fa-pause-circle:before{content:""}.fa-paw:before{content:""}.fa-paypal:before{content:""}.fa-peace:before{content:""}.fa-pen:before{content:""}.fa-pen-alt:before{content:""}.fa-pen-fancy:before{content:""}.fa-pen-nib:before{content:""}.fa-pen-square:before{content:""}.fa-pencil-alt:before{content:""}.fa-pencil-ruler:before{content:""}.fa-penny-arcade:before{content:""}.fa-people-carry:before{content:""}.fa-pepper-hot:before{content:""}.fa-percent:before{content:""}.fa-percentage:before{content:""}.fa-periscope:before{content:""}.fa-person-booth:before{content:""}.fa-phabricator:before{content:""}.fa-phoenix-framework:before{content:""}.fa-phoenix-squadron:before{content:""}.fa-phone:before{content:""}.fa-phone-alt:before{content:""}.fa-phone-slash:before{content:""}.fa-phone-square:before{content:""}.fa-phone-square-alt:before{content:""}.fa-phone-volume:before{content:""}.fa-photo-video:before{content:""}.fa-php:before{content:""}.fa-pied-piper:before{content:""}.fa-pied-piper-alt:before{content:""}.fa-pied-piper-hat:before{content:""}.fa-pied-piper-pp:before{content:""}.fa-piggy-bank:before{content:""}.fa-pills:before{content:""}.fa-pinterest:before{content:""}.fa-pinterest-p:before{content:""}.fa-pinterest-square:before{content:""}.fa-pizza-slice:before{content:""}.fa-place-of-worship:before{content:""}.fa-plane:before{content:""}.fa-plane-arrival:before{content:""}.fa-plane-departure:before{content:""}.fa-play:before{content:""}.fa-play-circle:before{content:""}.fa-playstation:before{content:""}.fa-plug:before{content:""}.fa-plus:before{content:""}.fa-plus-circle:before{content:""}.fa-plus-square:before{content:""}.fa-podcast:before{content:""}.fa-poll:before{content:""}.fa-poll-h:before{content:""}.fa-poo:before{content:""}.fa-poo-storm:before{content:""}.fa-poop:before{content:""}.fa-portrait:before{content:""}.fa-pound-sign:before{content:""}.fa-power-off:before{content:""}.fa-pray:before{content:""}.fa-praying-hands:before{content:""}.fa-prescription:before{content:""}.fa-prescription-bottle:before{content:""}.fa-prescription-bottle-alt:before{content:""}.fa-print:before{content:""}.fa-procedures:before{content:""}.fa-product-hunt:before{content:""}.fa-project-diagram:before{content:""}.fa-pushed:before{content:""}.fa-puzzle-piece:before{content:""}.fa-python:before{content:""}.fa-qq:before{content:""}.fa-qrcode:before{content:""}.fa-question:before{content:""}.fa-question-circle:before{content:""}.fa-quidditch:before{content:""}.fa-quinscape:before{content:""}.fa-quora:before{content:""}.fa-quote-left:before{content:""}.fa-quote-right:before{content:""}.fa-quran:before{content:""}.fa-r-project:before{content:""}.fa-radiation:before{content:""}.fa-radiation-alt:before{content:""}.fa-rainbow:before{content:""}.fa-random:before{content:""}.fa-raspberry-pi:before{content:""}.fa-ravelry:before{content:""}.fa-react:before{content:""}.fa-reacteurope:before{content:""}.fa-readme:before{content:""}.fa-rebel:before{content:""}.fa-receipt:before{content:""}.fa-recycle:before{content:""}.fa-red-river:before{content:""}.fa-reddit:before{content:""}.fa-reddit-alien:before{content:""}.fa-reddit-square:before{content:""}.fa-redhat:before{content:""}.fa-redo:before{content:""}.fa-redo-alt:before{content:""}.fa-registered:before{content:""}.fa-remove-format:before{content:""}.fa-renren:before{content:""}.fa-reply:before{content:""}.fa-reply-all:before{content:""}.fa-replyd:before{content:""}.fa-republican:before{content:""}.fa-researchgate:before{content:""}.fa-resolving:before{content:""}.fa-restroom:before{content:""}.fa-retweet:before{content:""}.fa-rev:before{content:""}.fa-ribbon:before{content:""}.fa-ring:before{content:""}.fa-road:before{content:""}.fa-robot:before{content:""}.fa-rocket:before{content:""}.fa-rocketchat:before{content:""}.fa-rockrms:before{content:""}.fa-route:before{content:""}.fa-rss:before{content:""}.fa-rss-square:before{content:""}.fa-ruble-sign:before{content:""}.fa-ruler:before{content:""}.fa-ruler-combined:before{content:""}.fa-ruler-horizontal:before{content:""}.fa-ruler-vertical:before{content:""}.fa-running:before{content:""}.fa-rupee-sign:before{content:""}.fa-sad-cry:before{content:""}.fa-sad-tear:before{content:""}.fa-safari:before{content:""}.fa-salesforce:before{content:""}.fa-sass:before{content:""}.fa-satellite:before{content:""}.fa-satellite-dish:before{content:""}.fa-save:before{content:""}.fa-schlix:before{content:""}.fa-school:before{content:""}.fa-screwdriver:before{content:""}.fa-scribd:before{content:""}.fa-scroll:before{content:""}.fa-sd-card:before{content:""}.fa-search:before{content:""}.fa-search-dollar:before{content:""}.fa-search-location:before{content:""}.fa-search-minus:before{content:""}.fa-search-plus:before{content:""}.fa-searchengin:before{content:""}.fa-seedling:before{content:""}.fa-sellcast:before{content:""}.fa-sellsy:before{content:""}.fa-server:before{content:""}.fa-servicestack:before{content:""}.fa-shapes:before{content:""}.fa-share:before{content:""}.fa-share-alt:before{content:""}.fa-share-alt-square:before{content:""}.fa-share-square:before{content:""}.fa-shekel-sign:before{content:""}.fa-shield-alt:before{content:""}.fa-ship:before{content:""}.fa-shipping-fast:before{content:""}.fa-shirtsinbulk:before{content:""}.fa-shoe-prints:before{content:""}.fa-shopping-bag:before{content:""}.fa-shopping-basket:before{content:""}.fa-shopping-cart:before{content:""}.fa-shopware:before{content:""}.fa-shower:before{content:""}.fa-shuttle-van:before{content:""}.fa-sign:before{content:""}.fa-sign-in-alt:before{content:""}.fa-sign-language:before{content:""}.fa-sign-out-alt:before{content:""}.fa-signal:before{content:""}.fa-signature:before{content:""}.fa-sim-card:before{content:""}.fa-simplybuilt:before{content:""}.fa-sistrix:before{content:""}.fa-sitemap:before{content:""}.fa-sith:before{content:""}.fa-skating:before{content:""}.fa-sketch:before{content:""}.fa-skiing:before{content:""}.fa-skiing-nordic:before{content:""}.fa-skull:before{content:""}.fa-skull-crossbones:before{content:""}.fa-skyatlas:before{content:""}.fa-skype:before{content:""}.fa-slack:before{content:""}.fa-slack-hash:before{content:""}.fa-slash:before{content:""}.fa-sleigh:before{content:""}.fa-sliders-h:before{content:""}.fa-slideshare:before{content:""}.fa-smile:before{content:""}.fa-smile-beam:before{content:""}.fa-smile-wink:before{content:""}.fa-smog:before{content:""}.fa-smoking:before{content:""}.fa-smoking-ban:before{content:""}.fa-sms:before{content:""}.fa-snapchat:before{content:""}.fa-snapchat-ghost:before{content:""}.fa-snapchat-square:before{content:""}.fa-snowboarding:before{content:""}.fa-snowflake:before{content:""}.fa-snowman:before{content:""}.fa-snowplow:before{content:""}.fa-socks:before{content:""}.fa-solar-panel:before{content:""}.fa-sort:before{content:""}.fa-sort-alpha-down:before{content:""}.fa-sort-alpha-down-alt:before{content:""}.fa-sort-alpha-up:before{content:""}.fa-sort-alpha-up-alt:before{content:""}.fa-sort-amount-down:before{content:""}.fa-sort-amount-down-alt:before{content:""}.fa-sort-amount-up:before{content:""}.fa-sort-amount-up-alt:before{content:""}.fa-sort-down:before{content:""}.fa-sort-numeric-down:before{content:""}.fa-sort-numeric-down-alt:before{content:""}.fa-sort-numeric-up:before{content:""}.fa-sort-numeric-up-alt:before{content:""}.fa-sort-up:before{content:""}.fa-soundcloud:before{content:""}.fa-sourcetree:before{content:""}.fa-spa:before{content:""}.fa-space-shuttle:before{content:""}.fa-speakap:before{content:""}.fa-speaker-deck:before{content:""}.fa-spell-check:before{content:""}.fa-spider:before{content:""}.fa-spinner:before{content:""}.fa-splotch:before{content:""}.fa-spotify:before{content:""}.fa-spray-can:before{content:""}.fa-square:before{content:""}.fa-square-full:before{content:""}.fa-square-root-alt:before{content:""}.fa-squarespace:before{content:""}.fa-stack-exchange:before{content:""}.fa-stack-overflow:before{content:""}.fa-stackpath:before{content:""}.fa-stamp:before{content:""}.fa-star:before{content:""}.fa-star-and-crescent:before{content:""}.fa-star-half:before{content:""}.fa-star-half-alt:before{content:""}.fa-star-of-david:before{content:""}.fa-star-of-life:before{content:""}.fa-staylinked:before{content:""}.fa-steam:before{content:""}.fa-steam-square:before{content:""}.fa-steam-symbol:before{content:""}.fa-step-backward:before{content:""}.fa-step-forward:before{content:""}.fa-stethoscope:before{content:""}.fa-sticker-mule:before{content:""}.fa-sticky-note:before{content:""}.fa-stop:before{content:""}.fa-stop-circle:before{content:""}.fa-stopwatch:before{content:""}.fa-store:before{content:""}.fa-store-alt:before{content:""}.fa-strava:before{content:""}.fa-stream:before{content:""}.fa-street-view:before{content:""}.fa-strikethrough:before{content:""}.fa-stripe:before{content:""}.fa-stripe-s:before{content:""}.fa-stroopwafel:before{content:""}.fa-studiovinari:before{content:""}.fa-stumbleupon:before{content:""}.fa-stumbleupon-circle:before{content:""}.fa-subscript:before{content:""}.fa-subway:before{content:""}.fa-suitcase:before{content:""}.fa-suitcase-rolling:before{content:""}.fa-sun:before{content:""}.fa-superpowers:before{content:""}.fa-superscript:before{content:""}.fa-supple:before{content:""}.fa-surprise:before{content:""}.fa-suse:before{content:""}.fa-swatchbook:before{content:""}.fa-swimmer:before{content:""}.fa-swimming-pool:before{content:""}.fa-symfony:before{content:""}.fa-synagogue:before{content:""}.fa-sync:before{content:""}.fa-sync-alt:before{content:""}.fa-syringe:before{content:""}.fa-table:before{content:""}.fa-table-tennis:before{content:""}.fa-tablet:before{content:""}.fa-tablet-alt:before{content:""}.fa-tablets:before{content:""}.fa-tachometer-alt:before{content:""}.fa-tag:before{content:""}.fa-tags:before{content:""}.fa-tape:before{content:""}.fa-tasks:before{content:""}.fa-taxi:before{content:""}.fa-teamspeak:before{content:""}.fa-teeth:before{content:""}.fa-teeth-open:before{content:""}.fa-telegram:before{content:""}.fa-telegram-plane:before{content:""}.fa-temperature-high:before{content:""}.fa-temperature-low:before{content:""}.fa-tencent-weibo:before{content:""}.fa-tenge:before{content:""}.fa-terminal:before{content:""}.fa-text-height:before{content:""}.fa-text-width:before{content:""}.fa-th:before{content:""}.fa-th-large:before{content:""}.fa-th-list:before{content:""}.fa-the-red-yeti:before{content:""}.fa-theater-masks:before{content:""}.fa-themeco:before{content:""}.fa-themeisle:before{content:""}.fa-thermometer:before{content:""}.fa-thermometer-empty:before{content:""}.fa-thermometer-full:before{content:""}.fa-thermometer-half:before{content:""}.fa-thermometer-quarter:before{content:""}.fa-thermometer-three-quarters:before{content:""}.fa-think-peaks:before{content:""}.fa-thumbs-down:before{content:""}.fa-thumbs-up:before{content:""}.fa-thumbtack:before{content:""}.fa-ticket-alt:before{content:""}.fa-times:before{content:""}.fa-times-circle:before{content:""}.fa-tint:before{content:""}.fa-tint-slash:before{content:""}.fa-tired:before{content:""}.fa-toggle-off:before{content:""}.fa-toggle-on:before{content:""}.fa-toilet:before{content:""}.fa-toilet-paper:before{content:""}.fa-toolbox:before{content:""}.fa-tools:before{content:""}.fa-tooth:before{content:""}.fa-torah:before{content:""}.fa-torii-gate:before{content:""}.fa-tractor:before{content:""}.fa-trade-federation:before{content:""}.fa-trademark:before{content:""}.fa-traffic-light:before{content:""}.fa-train:before{content:""}.fa-tram:before{content:""}.fa-transgender:before{content:""}.fa-transgender-alt:before{content:""}.fa-trash:before{content:""}.fa-trash-alt:before{content:""}.fa-trash-restore:before{content:""}.fa-trash-restore-alt:before{content:""}.fa-tree:before{content:""}.fa-trello:before{content:""}.fa-tripadvisor:before{content:""}.fa-trophy:before{content:""}.fa-truck:before{content:""}.fa-truck-loading:before{content:""}.fa-truck-monster:before{content:""}.fa-truck-moving:before{content:""}.fa-truck-pickup:before{content:""}.fa-tshirt:before{content:""}.fa-tty:before{content:""}.fa-tumblr:before{content:""}.fa-tumblr-square:before{content:""}.fa-tv:before{content:""}.fa-twitch:before{content:""}.fa-twitter:before{content:""}.fa-twitter-square:before{content:""}.fa-typo3:before{content:""}.fa-uber:before{content:""}.fa-ubuntu:before{content:""}.fa-uikit:before{content:""}.fa-umbrella:before{content:""}.fa-umbrella-beach:before{content:""}.fa-underline:before{content:""}.fa-undo:before{content:""}.fa-undo-alt:before{content:""}.fa-uniregistry:before{content:""}.fa-universal-access:before{content:""}.fa-university:before{content:""}.fa-unlink:before{content:""}.fa-unlock:before{content:""}.fa-unlock-alt:before{content:""}.fa-untappd:before{content:""}.fa-upload:before{content:""}.fa-ups:before{content:""}.fa-usb:before{content:""}.fa-user:before{content:""}.fa-user-alt:before{content:""}.fa-user-alt-slash:before{content:""}.fa-user-astronaut:before{content:""}.fa-user-check:before{content:""}.fa-user-circle:before{content:""}.fa-user-clock:before{content:""}.fa-user-cog:before{content:""}.fa-user-edit:before{content:""}.fa-user-friends:before{content:""}.fa-user-graduate:before{content:""}.fa-user-injured:before{content:""}.fa-user-lock:before{content:""}.fa-user-md:before{content:""}.fa-user-minus:before{content:""}.fa-user-ninja:before{content:""}.fa-user-nurse:before{content:""}.fa-user-plus:before{content:""}.fa-user-secret:before{content:""}.fa-user-shield:before{content:""}.fa-user-slash:before{content:""}.fa-user-tag:before{content:""}.fa-user-tie:before{content:""}.fa-user-times:before{content:""}.fa-users:before{content:""}.fa-users-cog:before{content:""}.fa-usps:before{content:""}.fa-ussunnah:before{content:""}.fa-utensil-spoon:before{content:""}.fa-utensils:before{content:""}.fa-vaadin:before{content:""}.fa-vector-square:before{content:""}.fa-venus:before{content:""}.fa-venus-double:before{content:""}.fa-venus-mars:before{content:""}.fa-viacoin:before{content:""}.fa-viadeo:before{content:""}.fa-viadeo-square:before{content:""}.fa-vial:before{content:""}.fa-vials:before{content:""}.fa-viber:before{content:""}.fa-video:before{content:""}.fa-video-slash:before{content:""}.fa-vihara:before{content:""}.fa-vimeo:before{content:""}.fa-vimeo-square:before{content:""}.fa-vimeo-v:before{content:""}.fa-vine:before{content:""}.fa-vk:before{content:""}.fa-vnv:before{content:""}.fa-voicemail:before{content:""}.fa-volleyball-ball:before{content:""}.fa-volume-down:before{content:""}.fa-volume-mute:before{content:""}.fa-volume-off:before{content:""}.fa-volume-up:before{content:""}.fa-vote-yea:before{content:""}.fa-vr-cardboard:before{content:""}.fa-vuejs:before{content:""}.fa-walking:before{content:""}.fa-wallet:before{content:""}.fa-warehouse:before{content:""}.fa-water:before{content:""}.fa-wave-square:before{content:""}.fa-waze:before{content:""}.fa-weebly:before{content:""}.fa-weibo:before{content:""}.fa-weight:before{content:""}.fa-weight-hanging:before{content:""}.fa-weixin:before{content:""}.fa-whatsapp:before{content:""}.fa-whatsapp-square:before{content:""}.fa-wheelchair:before{content:""}.fa-whmcs:before{content:""}.fa-wifi:before{content:""}.fa-wikipedia-w:before{content:""}.fa-wind:before{content:""}.fa-window-close:before{content:""}.fa-window-maximize:before{content:""}.fa-window-minimize:before{content:""}.fa-window-restore:before{content:""}.fa-windows:before{content:""}.fa-wine-bottle:before{content:""}.fa-wine-glass:before{content:""}.fa-wine-glass-alt:before{content:""}.fa-wix:before{content:""}.fa-wizards-of-the-coast:before{content:""}.fa-wolf-pack-battalion:before{content:""}.fa-won-sign:before{content:""}.fa-wordpress:before{content:""}.fa-wordpress-simple:before{content:""}.fa-wpbeginner:before{content:""}.fa-wpexplorer:before{content:""}.fa-wpforms:before{content:""}.fa-wpressr:before{content:""}.fa-wrench:before{content:""}.fa-x-ray:before{content:""}.fa-xbox:before{content:""}.fa-xing:before{content:""}.fa-xing-square:before{content:""}.fa-y-combinator:before{content:""}.fa-yahoo:before{content:""}.fa-yammer:before{content:""}.fa-yandex:before{content:""}.fa-yandex-international:before{content:""}.fa-yarn:before{content:""}.fa-yelp:before{content:""}.fa-yen-sign:before{content:""}.fa-yin-yang:before{content:""}.fa-yoast:before{content:""}.fa-youtube:before{content:""}.fa-youtube-square:before{content:""}.fa-zhihu:before{content:""}.sr-only{border:0;clip:rect(0, 0, 0, 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.sr-only-focusable:active,.sr-only-focusable:focus{clip:auto;height:auto;margin:0;overflow:visible;position:static;width:auto}/*!
* Font Awesome Free 5.9.0 by @fontawesome - https://fontawesome.com
* License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
- */@font-face{font-family:"Font Awesome 5 Free";font-style:normal;font-weight:900;font-display:auto;src:url("./webfonts/fa-solid-900.eot");src:url("./webfonts/fa-solid-900.eot?#iefix") format("embedded-opentype"),url("./webfonts/fa-solid-900.woff2") format("woff2"),url("./webfonts/fa-solid-900.woff") format("woff"),url("./webfonts/fa-solid-900.ttf") format("truetype"),url("./webfonts/fa-solid-900.svg#fontawesome") format("svg")}.fa,.fas{font-family:"Font Awesome 5 Free";font-weight:900}html{font-size:87.5%;box-sizing:border-box}*,*::before,*::after{box-sizing:inherit}body,h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd{margin:0;padding:0}ul[role=list],ol[role=list]{list-style:none}html:focus-within{scroll-behavior:smooth}body{text-rendering:optimizeSpeed;line-height:1.5;font-family:"Roboto",Arial,Helvetica,sans-serif !important;letter-spacing:-0.025ch}a:not([class]){text-decoration-skip-ink:auto}img,picture{max-width:100%;display:block}input,button,textarea,select{font:inherit}@media(prefers-reduced-motion: reduce){html:focus-within{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}}#main{height:100vh}.content{display:flex;height:100%;overflow:hidden}.tab-content{display:flex;height:100%;width:100%;background-color:#eef3f6;animation:fadein .3s;overflow:auto}input[type=text],input[type=password],input[type=number],textarea{box-sizing:border-box;background:#fff;max-width:100%;font-size:1rem;font-weight:400;border:1px solid #ccc;border-radius:.25rem;padding:.25rem .5rem;outline:rgba(0,0,0,0)}input:focus{border:1px solid #3ba4d7;box-shadow:inset 0 0 5px #ccc}input.stretched{width:90%}input.small{max-width:70%;padding:.1rem}input.searchbar{width:40%}a{cursor:pointer}a[title=Back]{width:max-content;height:max-content;padding:.475rem .75rem;border-radius:50%;transition:100ms}a[title=Back]:hover{background:#eef3f6}table{padding:20px;table-layout:fixed;width:100%;border-collapse:collapse;text-align:center;color:#333;font-size:1.125rem}table th{font-size:1.125rem;color:#000;border-bottom:2px solid #eee}table tr{border-bottom:1px solid #eee}h3{color:#444}hr{margin-left:0;color:#aaa}.grid-2col{display:grid;grid-template-columns:auto auto;gap:1rem;justify-content:start}.grid-2col input[type=checkbox]{margin-top:20px}.error{color:red}.tooltip{color:#333;position:relative;display:inline-block;margin:0 .25rem}.tooltiptext{visibility:hidden;position:absolute;top:100%;left:50%;min-width:250px;margin-left:-120px;z-index:1;color:#ccc;background-color:#333;font-size:.875rem;text-align:center;padding:.25rem;border-radius:.5rem}.tooltip:hover .tooltiptext{visibility:visible;animation:fadein .5s}blockquote{color:#14141b;padding:.75rem 1rem .75rem 2rem;border-radius:.25rem}blockquote.info{position:relative;line-height:1.2;color:rgba(20,20,27,.8);border:1px solid rgba(17,143,204,.8)}blockquote.info::before{font-family:"Font Awesome 5 Free";position:absolute;top:.5rem;left:.5rem;content:"";color:#019dff}@keyframes fadein{from{opacity:0}to{opacity:1}}.fadein{animation:fadein .5s}@keyframes swipe-from-left{from{margin-left:100%}to{margin-left:0}}button{width:max-content;height:max-content;color:#fff;background:#019dff;font-size:1rem;padding:.4rem 1rem;border:0;border-radius:5px;cursor:pointer;box-shadow:inset -3px -3px 0 rgb(0,94.5826771654,154)}button:active{outline:none;box-shadow:inset 3px 3px 0 rgb(0,94.5826771654,154)}button.red{width:max-content;height:max-content;color:#fff;background:#ff3a4a;font-size:1rem;padding:.4rem 1rem;border:0;border-radius:5px;cursor:pointer;box-shadow:inset -3px -3px 0 rgb(211,0,17.1370558376)}button.red:active{outline:none;box-shadow:inset 3px 3px 0 rgb(211,0,17.1370558376)}.media-item{display:flex;margin-top:.5rem;padding:1rem;border:1px solid rgba(20,20,27,.1);border-radius:4px}.media-item__details{flex-basis:40%;display:flex;align-items:start;gap:.5rem}.media-item__details img{width:6rem;object-fit:contain}.media-item__desc{flex-basis:60%}.active-link{background:hsla(0,0%,100%,.1) !important}.nav-menu{background-color:#14141b;box-shadow:0 5px 5px #222;display:flex;flex-direction:column;align-items:center;height:100%;padding:.5rem .25rem;margin-right:0rem}.nav-menu__logo{padding:1.2rem 0;display:flex;align-items:center;gap:.3rem}.nav-menu__logo img{width:1.6rem}.nav-menu__logo h5{line-height:1;color:#fff}.nav-menu__box{padding:2rem .125rem;display:flex;flex-direction:column;gap:.5rem;position:relative}.nav-menu__box .item{margin:0;padding:.675rem .5rem;width:10rem;display:flex;align-items:center;line-height:1;border-radius:.5rem;text-decoration:none;color:#ccc;text-transform:capitalize;transition:0ms}.nav-menu__box .item:hover{background-color:rgba(238,243,246,.15)}.nav-menu__box .item i.sidenav-icon{width:2.5rem;height:1.4rem;display:grid;place-items:center}.nav-menu__box .item.item-selected{color:#9bdaff;background-color:rgba(155,218,255,.15);font-weight:medium}.nav-menu__box button.toggle-nav{display:none;position:absolute;padding:0;top:0;right:-1rem;background:rgb(77.5,186.5157480315,255);width:1.5rem;height:1.5rem;aspect-ratio:1;justify-content:center;align-items:center;border-radius:50%;box-shadow:none}.nav-menu.collapsed .nav-menu__logo .logo-container{display:flex;flex-direction:column;align-items:center;gap:.5rem}.nav-menu.collapsed .nav-menu__logo .logo-container>*:not(img){display:block}.nav-menu.collapsed .nav-menu__logo .nav-menu__logo-text{display:none !important}.nav-menu.collapsed .nav-menu__box .item{padding:.675rem 0;width:2.5rem;justify-content:center;transition:300ms}.nav-menu.collapsed .nav-menu__box .item span,.nav-menu.collapsed .nav-menu__box .item p{display:none !important}.nav-menu.collapsed button i{rotate:180deg}.nav-menu:hover button.toggle-nav{display:flex}.sidebar{width:13rem;background-color:#fff;display:flex;flex-direction:column}.sidebar a{text-decoration:none;text-transform:capitalize;padding:1rem;cursor:pointer;color:#999}.sidebar a:hover{color:#222}.sidebar .selected-sidebar-link{font-weight:bold;color:#222;border-left:5px solid #3ba4d7;animation:expand-left-border .1s}.sidebarquickview>h6{padding:.5rem}.sidebarquickview a{text-decoration:none;text-transform:capitalize;padding:.5rem 1rem;display:block;color:#999}.sidebarquickview a a:hover{color:#222}.sidebarquickview .selected-sidebarquickview-link{font-weight:bold;color:#222;border-left:5px solid #3ba4d7;animation:expand-left-border .1s}.node-panel{width:100%;padding:.5rem;animation:fadein .5s}@keyframes expand-left-border{from{border-left:0}to{border-left:5px solid #3ba4d7}}@media(max-width: 700px){.tab-content{flex-direction:column}.sidebar{width:100% !important;flex-direction:row !important;overflow-x:auto !important;overflow-y:hidden !important;white-space:nowrap !important;border-bottom:1px solid rgba(20,20,27,.1) !important;background:#fff !important;z-index:50 !important;flex-shrink:0 !important;height:auto !important;padding:0 !important}.sidebar a{display:inline-block !important;padding:.8rem 1.2rem !important;border-bottom:3px solid rgba(0,0,0,0) !important;border-left:none !important}.sidebar .selected-sidebar-link{border-left:none !important;border-bottom:3px solid #3ba4d7 !important;animation:none !important}.sidebarquickview>h4,.sidebarquickview>h6{display:none !important}}.posts{height:100%;margin-top:1rem;flex-direction:column;overflow:auto}.posts__heading{display:flex;flex-direction:column;justify-content:space-between}.posts-container{height:100%;padding:1rem;display:grid;grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));gap:2rem;border:1px solid rgba(20,20,27,.1);border-radius:4px;overflow:auto}.posts-container-card{min-height:240px;flex-direction:column;border:1px solid rgba(20,20,27,.5);border-radius:4px;cursor:pointer;text-align:center}.posts-container-card img{flex-basis:90%;object-fit:cover}.posts-container-card p{padding:0 .125rem;flex-basis:10%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.progress-bar{width:100%;height:2rem;position:relative;text-align:center;background-color:#eef3f6;border-radius:20px;overflow:hidden}.progress-bar__status{position:absolute;top:0;left:0;height:100%;color:#14141b;background-color:#019dff}.progress-bar__percent{position:absolute;inset:0;margin:auto;width:fit-content;height:fit-content}.progress-bar-chunks{position:relative;margin-top:.5rem;width:100%;height:2rem;display:flex;border-radius:.25rem;overflow:hidden;background-color:#eef3f6}.progress-bar-chunks .chunk{width:100%}.progress-bar-chunks .chunk[data-chunkVal="0"]{background-color:rgba(155,218,255,.2)}.progress-bar-chunks .chunk[data-chunkVal="1"]{background-color:#ff3a4a}.progress-bar-chunks .chunk[data-chunkVal="2"]{background-color:#019dff}.progress-bar-chunks .chunk[data-chunkVal="3"]{background-color:#fcba03}.progress-bar-chunks__percent{position:absolute;inset:0;margin:auto;width:fit-content;height:fit-content}.widget{height:100%;padding:1rem;display:flex;flex-direction:column;gap:.5rem;background-color:#fff;border-radius:.5rem;overflow:auto}.widget .top-heading{display:flex;justify-content:space-between}.widget__heading{display:flex;justify-content:space-between;align-items:center;border-bottom:2px solid #999}.widget__body{height:100%;display:flex;flex-direction:column;overflow:auto}.widget__body-heading{display:flex;justify-content:space-between;align-items:center}.widget__body-heading .action{display:flex;gap:.5rem}.widget__body-content{height:100%;overflow:auto}.widget__body-box{display:flex;flex-direction:column;gap:.5rem}.widget-half{max-width:50%}#modal-container{display:none;position:fixed;z-index:1;height:100%;top:0;left:0;width:100%;background-color:rgba(0,0,0,.2)}.modal-content{position:absolute;color:#555;width:40%;min-height:10rem;height:max-content;padding:1.5rem;inset:0;margin:auto;background-color:#fff;border-radius:.5rem;animation:fadein .5s;display:flex;flex-direction:column}.modal-content button:last-child{margin-top:auto}.modal-content .close-btn{position:absolute;right:1.5rem}.modal-content .widget{padding:0}#notification-container{position:absolute;bottom:0;right:0}.login-page{background-image:linear-gradient(-45deg, rgba(1, 157, 255, 0.75), rgba(17, 143, 204, 0.75));height:100%;animation:fadein .5s}.login-page .login-container{background-color:#fff;box-shadow:3px 3px 5px rgba(20,20,27,.4);margin:auto;position:relative;top:100px;max-width:400px;max-height:500px;border-radius:5px;display:flex;flex-direction:column;align-items:center}.login-page .login-container input{padding:.375rem .75rem;border-radius:.275rem}.login-page .login-container *{margin-bottom:1rem}.login-page .login-container>img{margin:1rem 0 2rem}.login-page .login-container extra{margin:0}.login-page .login-container>a{text-decoration:underline;cursor:pointer}.login-page .extra>label,.login-page .extra>br,.login-page .extra>input{margin-bottom:0}.homepage{margin:2rem auto 0;display:flex;flex-direction:column;gap:4rem}.homepage .logo{display:flex;justify-content:center;align-items:center}.homepage .logo img{width:90px}.homepage .logo .retroshareText{display:flex;flex-direction:column;align-items:center}.homepage .logo .retroshareText .retrotext{font-size:36px;font-weight:600;line-height:1.125}.homepage .logo .retroshareText .retrotext>span{color:#118fcc}.homepage .logo .retroshareText>b{font-size:14px;line-height:1}.homepage .certificate{display:flex;flex-direction:column;gap:4rem}.homepage .certificate__heading{text-align:center}.homepage .certificate__heading>h1{margin-bottom:1rem}.homepage .certificate__content{display:flex;flex-direction:column;gap:2rem;padding:2rem;text-align:center;border:1.5px solid rgba(17,143,204,.2);border-radius:6px;box-shadow:0px 0px 8px 2px rgba(20,20,27,.05)}.homepage .certificate__content .rsId>p{margin-bottom:.5rem;color:#118fcc}.homepage .certificate__content .retroshareID{padding:.25rem;display:flex;align-items:center;justify-self:start;font-size:1.25rem;border-radius:4px;background:rgba(20,20,27,.05)}.homepage .certificate__content .retroshareID .textArea{padding:0;width:100%;min-height:75px;font-size:1rem;font-family:monospace;background:rgba(0,0,0,0);border:none;resize:none}.homepage .certificate__content .retroshareID i{color:#118fcc}.homepage .certificate__content .retroshareID>i{margin:0 .5rem;cursor:pointer}.homepage .certificate__content .webhelp{padding:.5rem;background:#f5f5f5;display:flex;justify-content:center;align-items:center;gap:.5rem;border-radius:4px;border:1px solid rgba(20,20,27,.5);width:fit-content;cursor:pointer}.homepage .certificate__content .webhelp-container{display:grid;place-items:center}.homepage .certificate__content .webhelp:hover{background:#eef3f6;border:1px solid #14141b}.homepage .certificate__content .webhelp>i{font-size:1.2rem;color:green}.homepage .certificate__content .add-friend>h6,.homepage .certificate__content .webhelp-container>h6{font-weight:normal;margin-bottom:.5rem}.friend{color:#444;font-size:1.2em;margin:1rem .5rem;padding:1.5rem;border:1px solid #aaa;border-radius:20px}.friend i{float:left;padding:0 10px;cursor:pointer}.friend h4{margin-bottom:5px}.friend button{font-size:.9em}.friend.hidden{display:none}.friend .brief-info.online{color:green}.friend .location{margin:5px;border-top:1px solid #bbb;display:grid;grid-template-columns:auto auto;justify-content:start}.friend .brief-info{display:flex;align-items:center;justify-self:start}.friend .fa-times-circle{color:#555}.friend .fa-check-circle{color:green}.identity{color:#444;font-size:1.1em;margin:20px;padding:10px;border:1px solid #aaa;border-radius:20px}.identity>h4{margin:5px;font-size:1.3em}.identity button{font-size:.9em}.identity .details{display:grid;grid-template-columns:140px auto;grid-row-gap:5px;justify-content:left}.defaultAvatar{width:3rem;height:3rem;aspect-ratio:1;background:#b0c4de;border-radius:50%;display:grid;place-items:center}.defaultAvatar p{font-weight:900;color:#666f7f;transform:translateY(1px)}img.avatar{display:block;width:3rem;height:max-content;aspect-ratio:1;margin-right:.3em;border-radius:50%}.counter{margin-left:.5em}.counter:before{content:"("}.counter:after{content:")"}.chatInit{margin-left:.5em;color:green;cursor:pointer}.lobby{margin:10px;border:1px solid #aaa;border-radius:20px}.lobby .mainname{margin:20px;font-weight:100;font-size:1.2em}.topic{color:#666}.lobby>.topic{font-size:.95em;margin-left:25px;margin-bottom:5px}.lefttitle{margin-top:15px;margin-bottom:0;font-weight:100;font-size:1.2em}.leftname{margin-top:5px;margin-bottom:5px;padding:5px;font-weight:100;font-size:1em}.leftlobby>.topic{font-size:.75em;margin-left:15px;margin-bottom:5px}.subscribed,.public{cursor:pointer}.leftlobby{border:1px solid #aaa;border-radius:10px;margin-top:5px;background-color:#fff}.leftlobby.selected-lobby,.selectedidentity{color:#fff;background-color:#3ba4d7}.rightbar{position:absolute;width:185px;background-color:#fff;overflow:auto;top:130px;bottom:15px;right:15px}.user{padding:5px}.lobbyName{padding:15px;margin-top:2rem}.lobbies{position:absolute;width:185px;left:165px;bottom:15px;top:130px;overflow:auto}.messages,.setup{position:absolute;background-color:#fff;top:130px;left:360px;right:215px;overflow:auto}.messages{bottom:115px}.messagetext{white-space:break-spaces;margin-right:5px}.message>*{margin-left:5px}.username{color:#006400;font-weight:bolder}.chatMessage{position:absolute;background-color:#fff;height:85px;bottom:15px;right:215px;left:360px}textarea.chatMsg{height:100%;width:100%}.chatatchar{margin-left:.2em;margin-right:.2em;color:silver}.setupicon{margin-left:1em;cursor:pointer}.leaveicon{margin-left:1em;cursor:pointer;color:#d40000}.selectidentity{margin:15px;font-size:1.2em}.setup>.identity{cursor:pointer}.setup{bottom:15px}.createDistantChat{margin-top:1em}.no-lobbies .messages,.no-lobbies .chatMessage,.no-lobbies .setup{left:165px}@media(min-width: 900px){.node-panel.chat-room{display:grid !important;grid-template-columns:250px 1fr 200px !important;grid-template-rows:auto 1fr auto !important;grid-template-areas:"lobbies header rightbar" "lobbies messages rightbar" "lobbies input rightbar" !important;padding:0 !important;height:100% !important}.node-panel.chat-room .lobbyName{grid-area:header;padding:10px;border-bottom:1px solid #eee;margin:0;z-index:10;background:#fff}.node-panel.chat-room .lobbies{grid-area:lobbies;position:static !important;width:auto !important;height:auto !important;border-right:1px solid #ccc;overflow-y:auto;display:block !important;top:auto !important;bottom:auto !important;left:auto !important}.node-panel.chat-room .messages{grid-area:messages;position:static !important;width:auto !important;height:auto !important;overflow-y:auto;padding:10px;left:auto !important;right:auto !important;top:auto !important;bottom:auto !important;margin:0 !important}.node-panel.chat-room .rightbar{grid-area:rightbar;position:static !important;width:auto !important;border-left:1px solid #ccc;overflow-y:auto;display:block !important}.node-panel.chat-room .chatMessage{grid-area:input;position:static !important;width:auto !important;height:auto !important;border-top:1px solid #eee;left:auto !important;right:auto !important;bottom:auto !important;flex:0 0 auto;padding:10px !important;background:#fff;z-index:10}}@media(max-width: 899px){.node-panel.chat-room{display:flex !important;flex-direction:column !important;height:100% !important;position:relative !important}.node-panel.chat-room .lobbyName{flex:0 0 auto}.node-panel.chat-room .messages{flex:1 !important;overflow-y:auto !important;position:relative !important;top:0 !important;bottom:0 !important;left:0 !important;right:0 !important;width:100% !important;height:auto !important;margin:0 !important}.node-panel.chat-room .chatMessage{flex:0 0 auto !important;position:relative !important;bottom:0 !important;left:0 !important;right:0 !important;width:100% !important;height:auto !important;z-index:100}.node-panel.chat-room .rightbar,.node-panel.chat-room .lobbies{display:none !important;position:fixed !important;top:60px !important;bottom:0 !important;width:80% !important;background:#fff !important;z-index:200 !important;box-shadow:2px 0 10px rgba(0,0,0,.2) !important}.node-panel.chat-room.show-lobbies .lobbies{display:block !important;left:0 !important}.node-panel.chat-room.show-users .rightbar{display:block !important;right:0 !important}.chat-overlay{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.4);z-index:150}.show-lobbies .chat-overlay,.show-users .chat-overlay{display:block}.mobile-menu-icons{display:flex;gap:15px;font-size:1.2rem}.mobile-menu-icons i{cursor:pointer;padding:5px}}@media(min-width: 900px){.mobile-menu-icons{display:none}}.side-bar{display:flex;flex-direction:column;background:#fff}.side-bar .mail-compose-btn{width:96%;margin:.25rem;padding:.75rem 0}.compose-mail__from{display:flex;justify-content:space-between;padding-bottom:.5rem;border-bottom:2px solid #eef3f6}.compose-mail__recipients{padding:.5rem 0;display:flex;flex-direction:column;gap:.5rem;border-bottom:2px solid #eef3f6}.compose-mail__recipients__container{display:flex;gap:.5rem}.compose-mail__recipients__container>label{text-transform:capitalize}.compose-mail__recipients__container .recipients{width:100%;display:flex;gap:.5rem;flex-wrap:wrap}.compose-mail__recipients__container .recipients__selected{padding:.125rem .5rem;display:flex;align-items:center;gap:.5rem;border:1px solid #eef3f6;border-radius:3px;cursor:default}.compose-mail__recipients__container .recipients__selected i{cursor:pointer;padding:.25rem}.compose-mail__recipients__container .recipients__input{display:flex;position:relative;flex-grow:1}.compose-mail__recipients__container .recipients__input-field{flex-grow:1;min-width:200px;padding:0;border:none;box-shadow:none}.compose-mail__recipients__container .recipients__input-field:focus+.recipients__input-list{display:flex}.compose-mail__recipients__container .recipients__input-list{z-index:1;position:absolute;top:1rem;padding:0;width:100%;max-height:15rem;flex-direction:column;overflow:auto;display:none;background:#fff;border-top:1px solid #eef3f6;border-bottom:1px solid #eef3f6}.compose-mail__recipients__container .recipients__input-list:hover{display:flex}.compose-mail__recipients__container .recipients__input-list li{list-style:none;padding:.25rem .5rem;cursor:pointer;background:#fff;border:1px solid #eef3f6;border-top:0px}.compose-mail__recipients__container .recipients__input-list li:hover{background:#eef3f6}.compose-mail__recipients__container .recipients__input-list li:last-child{border-bottom:0px}.compose-mail__recipients .remove-recipient{padding:.125rem .5rem}.compose-mail input[type=text].compose-mail__subject{padding:.5rem 0;border:none;box-shadow:none;border-bottom:2px solid #eef3f6;border-radius:0}.compose-mail__message{margin:.5rem 0;height:100%;display:flex;flex-direction:column;overflow:auto}.compose-mail__message-body{height:100%;outline:rgba(0,0,0,0)}.compose-mail__send-btn{display:flex;align-items:center;gap:.5rem}.compose-mail__send-btn i{transform:translateY(-1px)}.msg-view{height:100%;display:flex;flex-direction:column;gap:1rem;overflow:auto}.msg-view-nav{display:flex;justify-content:space-between;align-items:column}.msg-view-nav__action{display:flex;gap:.5rem}.msg-view__header{display:flex;flex-direction:column;gap:1rem}.msg-view__header>h3{line-height:1}.msg-view__header .msg-details{display:flex;gap:1rem}.msg-view__header .msg-details__avatar{height:max-content}.msg-view__header .msg-details__info{display:flex;flex-direction:column}.msg-view__header .msg-details__info-item{display:flex;gap:.5rem}.msg-view__body{height:100%;overflow:auto;font-size:14px !important}.msg-view__attachment{height:50%;overflow:auto;display:flex;flex-direction:column}.msg-view__attachment-items{height:100%;overflow:auto}.mail-tag{width:8rem;padding:.5rem}.msgHeader{display:flex}.msgHeaderDetails{display:flex;flex-direction:column}table.mails th:nth-child(1){width:5%;color:#fcba03}table.mails th:nth-child(2){width:5%;color:hsl(202.5,30.7692307692%,44.9019607843%)}table.mails th:nth-child(3){width:50%;text-align:start}table.mails th:nth-child(4),table.mails th:nth-child(5){width:20%;text-align:start}table.mails td:nth-child(3){text-align:start;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}table.mails td:nth-child(4),table.mails td:nth-child(5){text-align:start}table.mails tr:hover{background-color:#eef3f6;cursor:pointer}table.mails tr.unread{color:#000;background-color:#eef3f6}table.mails>tr:hover{cursor:auto;background-color:#fff}input.star-check{display:none}input.star-check+label.star-check{color:gray}input.star-check:checked+label.star-check{color:#fcba03}#truncate{height:6rem;overflow:auto}#truncate.truncated-view{height:1.75rem;overflow:hidden}.toggle-truncate{font-size:.75rem;padding:0 .25rem;background:#999;color:#14141b;box-shadow:none;border-radius:2px}table.attachment-container{padding:0}table.attachment-container>tr{border:0}table.attachment-container .attachment-header{width:100%;display:flex;justify-content:space-between}table.attachment-container .attachment-header th{text-align:start}table.attachment-container .attachment-header th:nth-child(1){flex-basis:45%}table.attachment-container .attachment-header th:nth-child(2){flex-basis:15%}table.attachment-container .attachment-header th:nth-child(3){flex-basis:10%}table.attachment-container .attachment-header th:nth-child(4){flex-basis:20%}table.attachment-container .attachment-header th:nth-child(5){text-align:center;flex-basis:10%}table.attachment-container .attachment{width:100%;display:flex;justify-content:space-between;text-align:start}table.attachment-container .attachment__name{flex-basis:45%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}table.attachment-container .attachment__name span{margin-left:8px}table.attachment-container .attachment__from{flex-basis:15%}table.attachment-container .attachment__size{flex-basis:10%}table.attachment-container .attachment__date{flex-basis:20%}table.attachment-container .attachment td:nth-child(5){display:flex;justify-content:center;align-items:center;flex-basis:10%}table.attachment-container .attachment td:nth-child(5) button{font-size:.875rem}.view-toggle{height:max-content;border:1px solid #019dff;border-radius:4px;display:flex}.view-toggle *{padding:4px 12px;border-radius:4px}.composePopupOverlay{position:fixed;width:100%;height:100%;top:0;left:0;z-index:1;background-color:rgba(0,0,0,.2)}.composePopupOverlay .composePopup{position:absolute;inset:0;margin:auto;width:80%;height:90%}.composePopupOverlay .composePopup>.widget{padding:2rem}.composePopupOverlay .composePopup .close-btn{position:absolute;top:1.5rem;right:1.5rem}.file-view{width:100%;padding:1rem;margin-top:1.5rem;border-radius:8px;border:1px solid #ccc;animation:fadein .5s}.file-view__heading{display:flex;justify-content:space-between;margin-bottom:.5rem}.file-view__heading-chunk{display:flex;gap:1rem}.file-view__body{display:flex;flex-direction:column;gap:1rem}.file-view__body-details{display:flex;align-items:center}.file-view__body-details-stat{width:100%;display:grid;grid-template-columns:repeat(5, 1fr)}.file-view__body-details-stat span>i{margin-right:.5rem}.file-view__body-details-action{display:flex;gap:1rem;height:100%}.file-view__body-details-action button,.file-view__body-details-action button.red{padding:.25rem .75rem}table.myfiles td{word-wrap:break-word}table.myfiles th:nth-child(1){width:2%}table.myfiles th:nth-child(2){width:50%}table.myfiles td:nth-child(2){text-align:start}table.friendsfiles td{word-wrap:break-word}table.friendsfiles th:nth-child(1){width:2%}table.friendsfiles th:nth-child(2){width:50%}table.friendsfiles th:nth-child(4){width:40%}table.friendsfiles td:nth-child(2){text-align:start}.file-search-container{margin-top:1rem;padding:8px;display:flex;gap:8px;border:1px solid rgba(20,20,27,.2);border-radius:6px;height:100%;overflow:auto}.file-search-container__keywords{flex-basis:15%;padding-right:.25rem;border-right:1px solid rgba(20,20,27,.1)}.file-search-container__keywords .keywords-container{display:flex;flex-direction:column;border-top:2.5px solid rgba(20,20,27,.08);margin-top:.125rem;padding-top:.25rem}.file-search-container__keywords .keywords-container a{font-size:1.2rem;text-decoration:none;color:#14141b}.file-search-container__keywords .keywords-container a.selected{color:#019dff}.file-search-container__results{flex-basis:85%;height:100%;overflow:auto}.file-search-container__results .results-container .results-header tr{display:flex}.file-search-container__results .results-container .results-header tr th{font-size:1.25rem;font-weight:bold;text-align:left}.file-search-container__results .results-container .results-header tr th:nth-child(1){flex-basis:40%}.file-search-container__results .results-container .results-header tr th:nth-child(2){flex-basis:10%;text-align:center}.file-search-container__results .results-container .results-header tr th:nth-child(3){flex-basis:40%}.file-search-container__results .results-container .results-header tr th:nth-child(4){flex-basis:10%}.file-search-container__results .results-container .results{height:100%;overflow:auto}.file-search-container__results .results-container .results tr{display:flex}.file-search-container__results .results-container .results tr .results__hash,.file-search-container__results .results-container .results tr .results__name{text-align:left;flex-basis:40%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.file-search-container__results .results-container .results tr .results__hash span,.file-search-container__results .results-container .results tr .results__name span{margin-left:8px}.file-search-container__results .results-container .results tr .results__size{flex-basis:10%}.file-search-container__results .results-container .results tr .results__download{flex-basis:10%;display:flex;justify-content:start;align-items:center}.search-form{display:flex;width:40%}.search-form input{width:100%}.search-form button{margin-left:.5rem}.shareManagerPopupOverlay{position:fixed;width:100%;height:100%;top:0;left:0;z-index:1;background-color:rgba(0,0,0,.2)}.shareManagerPopupOverlay .shareManagerPopup{position:absolute;inset:0;margin:auto;width:80%;height:90%}.shareManagerPopupOverlay .shareManagerPopup>.widget{padding:1.5rem}.shareManagerPopupOverlay .shareManagerPopup .close-btn{position:absolute;top:1.5rem;right:1.5rem}.share-manager{display:flex;flex-direction:column;justify-content:space-between}.share-manager__table{margin:1rem 0 auto}.share-manager__table thead{font-weight:bold;text-align:left}.share-manager__table thead td:nth-child(1),.share-manager__table thead td:nth-child(2){padding-left:.5rem}.share-manager__table thead td:nth-child(3) .tooltip,.share-manager__table thead td:nth-child(4) .tooltip{font-weight:normal;font-size:1rem}.share-manager__table tbody{text-align:left}.share-manager__table tbody td:nth-child(4){font-size:1rem}.share-manager__table td input{border:0 !important}.share-manager__table td input[type=text]{width:100%}.share-manager__table td:nth-child(1){width:45%}.share-manager__table td:nth-child(2){width:20%}.share-manager__table td:nth-child(3){width:10%}.share-manager__table td:nth-child(4){width:25%}.share-manager__actions{display:flex;justify-content:space-between}.share-manager__form{display:flex;flex-direction:column;gap:.5rem}.share-manager__form_input{display:flex;flex-direction:column;gap:.5rem}.share-manager__form_input input{flex-grow:1}.share-manager .share-flags input.share-flags-check{display:none}.share-manager .share-flags input.share-flags-check+label.share-flags-label{color:gray;margin-right:.25rem;padding:.25rem .25rem .125rem;border:1px solid #6d6d6d;border-radius:.5rem}.share-manager .share-flags input.share-flags-check:checked+label.share-flags-label{color:#118fcc}.share-manager label span{display:inline-block;width:1.125rem}.manage-visibility label{width:100%;cursor:pointer}.manage-visibility{display:flex;justify-content:space-between}@media(max-width: 700px){.file-view__body-details{flex-direction:column;align-items:flex-start;gap:1rem}.file-view__body-details-stat{grid-template-columns:1fr;gap:.5rem}.file-view__body-details-stat span{display:flex;align-items:center}.share-manager__table,.share-manager__table thead,.share-manager__table tbody,.share-manager__table tr,.share-manager__table td{display:block;width:100% !important}.share-manager__table thead{display:none}.share-manager__table tr{border:1px solid #ccc;border-radius:8px;margin-bottom:1rem;padding:.5rem;background:#fff}.share-manager__table td{margin-bottom:.5rem;border:none !important;padding-left:0 !important}table.myfiles,table.myfiles tr,table.myfiles td,table.friendsfiles,table.friendsfiles tr,table.friendsfiles td{display:block;width:100% !important}table.myfiles th,table.friendsfiles th{display:none}table.myfiles tr,table.friendsfiles tr{border:1px solid #ccc;border-radius:8px;margin-bottom:1rem;padding:.5rem;background:#fff}.file-search-container{flex-direction:column}.file-search-container__keywords{flex-basis:auto;width:100%;border-right:none;border-bottom:1px solid rgba(20,20,27,.1);padding-bottom:1rem;margin-bottom:1rem}.results-container,.results-container thead,.results-container tbody,.results-container tr,.results-container td{display:block;width:100% !important}.results-container thead{display:none}.results-container tr{border-bottom:1px solid #eee;padding:1rem 0}.results-container td{margin-bottom:.5rem;word-break:break-all}}.file-section{margin-top:2rem;display:flex;flex-direction:column}.comments-section{margin-top:2rem;display:flex;justify-content:space-between}.comments-section__menu{display:flex;gap:1rem}.comments-section__menu-id{display:flex;align-items:center;gap:.25rem}#toggleunsub{position:relative;background:gray}table.channels th:nth-child(1){width:50%;text-align:start}table.channels td:nth-child(1){text-align:start;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}table.channels tr:hover{background-color:#eef3f6;cursor:pointer}table.channels tr.hidden{display:none}table{padding:.5rem}table.comments{border:1px solid #eee}table.comments th{height:40px}table.comments th:nth-child(1){width:2%}table.comments th:nth-child(2){width:40%}table.comments td{word-wrap:break-word}table.comments td:nth-child(2){text-align:start}table.files th:first-child{text-align:start;width:60%}table.files tr td:first-child{text-align:start}table.files td{word-wrap:break-word}#mtags{width:160px;text-align:center;font-size:medium;margin-left:10px;height:40px}.forums-node-panel{position:relative;bottom:200px;margin-left:200px;animation:fadein .5s}table.forums th:nth-child(1){width:50%;text-align:start}table.forums td:nth-child(1){text-align:start;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}table.forums tr:hover{background-color:#eef3f6;cursor:pointer}table.forums tr.hidden{display:none}#searchforum{position:relative;margin-left:250px}#forumdetails{position:relative;padding:10px}.p{margin:0}#toggleunsub{position:relative;background:gray}table.threads tr:hover{background-color:#eef3f6;cursor:pointer}table.threads td{word-wrap:break-word}table.threadreply th:nth-child(2){width:50%}table.threadreply th:nth-child(1){width:2%}table.threadreply td:nth-child(2){width:50%;text-align:start}table.threadreply td{word-wrap:break-word}table.threadreply tr:hover{background-color:#eef3f6;cursor:pointer}table.boards th:nth-child(1){width:50%;text-align:start}table.boards td:nth-child(1){text-align:start;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}table.boards tr:hover{background-color:#eef3f6;cursor:pointer}table.boards tr.hidden{display:none}#toggleunsub{position:relative;background:gray}#options{width:100px;text-align:center;font-size:medium;margin-left:20px;height:40px}#composepopup{height:80%;width:70%}#mtags{width:160px;text-align:center;font-size:medium;margin-left:10px;height:40px}.mail .permission-flag{margin-bottom:1rem;display:flex;gap:1rem}.mail-tags{padding:.5rem;border:1px solid rgba(20,20,27,.2);border-radius:6px}.mail-tags__container{display:flex;flex-direction:column}.mail-tags__container .tag-item{display:flex;align-items:center;gap:4px;border-bottom:1px solid rgba(20,20,27,.1);padding:2px 0}.mail-tags__container .tag-item:last-child{border:none}.mail-tags__container .tag-item__color{width:1.25rem;height:1.25rem;aspect-ratio:1}.mail-tags__container .tag-item__name{font-size:1.125rem}.mail-tags__container .tag-item__modify{margin-left:auto;font-size:.75rem;display:flex;gap:4px}.mail-tags__container .tag-item:hover{background-color:#eef3f6}.mail-tags__container .tag-item button,.mail-tags__container .tag-item button.red{padding:.25rem .6rem}.mail-tags-form .input-field{margin-bottom:.5rem}.mail-tags-form .input-field label{margin-right:.5rem}.external-address{margin:0;padding-left:1rem;height:100px;overflow:hidden auto}.external-address::-webkit-scrollbar{display:none}.proxy-server{display:flex;flex-direction:column;gap:4px}.proxy-server__tor>h4,.proxy-server__i2p>h4{margin-bottom:.25rem}.proxy-server__tor>input,.proxy-server__i2p>input{margin-right:.5rem}.proxy-server__tor .proxy-outgoing,.proxy-server__i2p .proxy-outgoing{display:inline-flex;align-items:center;gap:.5rem}.proxy-server__tor .proxy-outgoing__status,.proxy-server__i2p .proxy-outgoing__status{width:1rem;height:1rem;aspect-ratio:1;border:1px solid #000;border-radius:50%}.config-files{display:flex;flex-direction:column;gap:1rem}
+ */@font-face{font-family:"Font Awesome 5 Free";font-style:normal;font-weight:900;font-display:auto;src:url("./webfonts/fa-solid-900.eot");src:url("./webfonts/fa-solid-900.eot?#iefix") format("embedded-opentype"),url("./webfonts/fa-solid-900.woff2") format("woff2"),url("./webfonts/fa-solid-900.woff") format("woff"),url("./webfonts/fa-solid-900.ttf") format("truetype"),url("./webfonts/fa-solid-900.svg#fontawesome") format("svg")}.fa,.fas{font-family:"Font Awesome 5 Free";font-weight:900}html{font-size:87.5%;box-sizing:border-box}*,*::before,*::after{box-sizing:inherit}body,h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd{margin:0;padding:0}ul[role=list],ol[role=list]{list-style:none}html:focus-within{scroll-behavior:smooth}body{text-rendering:optimizeSpeed;line-height:1.5;font-family:"Roboto",Arial,Helvetica,sans-serif !important;letter-spacing:-0.025ch}a:not([class]){text-decoration-skip-ink:auto}img,picture{max-width:100%;display:block}input,button,textarea,select{font:inherit}@media(prefers-reduced-motion: reduce){html:focus-within{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}}#main{height:100vh}.content{display:flex;height:100%;overflow:hidden}.tab-content{display:flex;height:100%;width:100%;background-color:#eef3f6;animation:fadein .3s;overflow:auto}input[type=text],input[type=password],input[type=number],textarea{box-sizing:border-box;background:#fff;max-width:100%;font-size:1rem;font-weight:400;border:1px solid #ccc;border-radius:.25rem;padding:.25rem .5rem;outline:rgba(0,0,0,0)}input:focus{border:1px solid #3ba4d7;box-shadow:inset 0 0 5px #ccc}input.stretched{width:90%}input.small{max-width:70%;padding:.1rem}input.searchbar{width:40%}a{cursor:pointer}a[title=Back]{width:max-content;height:max-content;padding:.475rem .75rem;border-radius:50%;transition:100ms}a[title=Back]:hover{background:#eef3f6}table{padding:20px;table-layout:fixed;width:100%;border-collapse:collapse;text-align:center;color:#333;font-size:1.125rem}table th{font-size:1.125rem;color:#000;border-bottom:2px solid #eee}table tr{border-bottom:1px solid #eee}h3{color:#444}hr{margin-left:0;color:#aaa}.grid-2col{display:grid;grid-template-columns:auto auto;gap:1rem;justify-content:start}.grid-2col input[type=checkbox]{margin-top:20px}.error{color:red}.tooltip{color:#333;position:relative;display:inline-block;margin:0 .25rem}.tooltiptext{visibility:hidden;position:absolute;top:100%;left:50%;min-width:250px;margin-left:-120px;z-index:1;color:#ccc;background-color:#333;font-size:.875rem;text-align:center;padding:.25rem;border-radius:.5rem}.tooltip:hover .tooltiptext{visibility:visible;animation:fadein .5s}blockquote{color:#14141b;padding:.75rem 1rem .75rem 2rem;border-radius:.25rem}blockquote.info{position:relative;line-height:1.2;color:rgba(20,20,27,.8);border:1px solid rgba(17,143,204,.8)}blockquote.info::before{font-family:"Font Awesome 5 Free";position:absolute;top:.5rem;left:.5rem;content:"";color:#019dff}@keyframes fadein{from{opacity:0}to{opacity:1}}.fadein{animation:fadein .5s}@keyframes swipe-from-left{from{margin-left:100%}to{margin-left:0}}button{width:max-content;height:max-content;color:#fff;background:#019dff;font-size:1rem;padding:.4rem 1rem;border:0;border-radius:5px;cursor:pointer;box-shadow:inset -3px -3px 0 rgb(0,94.5826771654,154)}button:active{outline:none;box-shadow:inset 3px 3px 0 rgb(0,94.5826771654,154)}button.red{width:max-content;height:max-content;color:#fff;background:#ff3a4a;font-size:1rem;padding:.4rem 1rem;border:0;border-radius:5px;cursor:pointer;box-shadow:inset -3px -3px 0 rgb(211,0,17.1370558376)}button.red:active{outline:none;box-shadow:inset 3px 3px 0 rgb(211,0,17.1370558376)}.media-item{display:flex;margin-top:.5rem;padding:1rem;border:1px solid rgba(20,20,27,.1);border-radius:4px}.media-item__details{flex-basis:40%;display:flex;align-items:start;gap:.5rem}.media-item__details img{width:6rem;object-fit:contain}.media-item__desc{flex-basis:60%}.active-link{background:hsla(0,0%,100%,.1) !important}.nav-menu{background-color:#14141b;box-shadow:0 5px 5px #222;display:flex;flex-direction:column;align-items:center;height:100%;padding:.25rem;margin-right:0rem}.nav-menu__logo{padding:1.2rem 0;display:flex;align-items:center;gap:.3rem}.nav-menu__logo img{width:1.6rem}.nav-menu__logo h5{line-height:1;color:#fff}.nav-menu__box{padding:2rem .125rem;display:flex;flex-direction:column;gap:.5rem;position:relative}.nav-menu__box .item{margin:0;padding:.675rem .5rem;width:10rem;display:flex;align-items:center;line-height:1;border-radius:.5rem;text-decoration:none;color:#ccc;text-transform:capitalize;transition:0ms}.nav-menu__box .item:hover{background-color:rgba(238,243,246,.15)}.nav-menu__box .item i.sidenav-icon{width:2.5rem;height:1.4rem;display:grid;place-items:center}.nav-menu__box .item.item-selected{color:#9bdaff;background-color:rgba(155,218,255,.15);font-weight:medium}.nav-menu__box button.toggle-nav{display:none;position:absolute;padding:0;top:0;right:-1rem;background:rgb(77.5,186.5157480315,255);width:1.5rem;height:1.5rem;aspect-ratio:1;justify-content:center;align-items:center;border-radius:50%;box-shadow:none}.nav-menu.collapsed .nav-menu__logo .logo-container{display:flex;flex-direction:column;align-items:center;gap:.5rem}.nav-menu.collapsed .nav-menu__logo .logo-container>*:not(img){display:block}.nav-menu.collapsed .nav-menu__logo .nav-menu__logo-text{display:none !important}.nav-menu.collapsed .nav-menu__box .item{padding:.675rem 0;width:2.5rem;justify-content:center;transition:300ms}.nav-menu.collapsed .nav-menu__box .item span,.nav-menu.collapsed .nav-menu__box .item p{display:none !important}.nav-menu.collapsed button i{rotate:180deg}.nav-menu:hover button.toggle-nav{display:flex}.sidebar{width:13rem;background-color:#fff;display:flex;flex-direction:column}.sidebar a{text-decoration:none;text-transform:capitalize;padding:1rem;cursor:pointer;color:#999}.sidebar a:hover{color:#222}.sidebar .selected-sidebar-link{font-weight:bold;color:#222;border-left:5px solid #3ba4d7;animation:expand-left-border .1s}.sidebarquickview>h6{padding:.5rem}.sidebarquickview a{text-decoration:none;text-transform:capitalize;padding:.5rem 1rem;display:block;color:#999}.sidebarquickview a a:hover{color:#222}.sidebarquickview .selected-sidebarquickview-link{font-weight:bold;color:#222;border-left:5px solid #3ba4d7;animation:expand-left-border .1s}.node-panel{width:100%;padding:.5rem;animation:fadein .5s}@keyframes expand-left-border{from{border-left:0}to{border-left:5px solid #3ba4d7}}@media(max-width: 700px){.tab-content{flex-direction:column}.sidebar{width:100% !important;flex-direction:row !important;overflow-x:auto !important;overflow-y:hidden !important;white-space:nowrap !important;border-bottom:1px solid rgba(20,20,27,.1) !important;background:#fff !important;z-index:50 !important;flex-shrink:0 !important;height:auto !important;padding:0 !important}.sidebar a{display:inline-block !important;padding:.8rem 1.2rem !important;border-bottom:3px solid rgba(0,0,0,0) !important;border-left:none !important}.sidebar .selected-sidebar-link{border-left:none !important;border-bottom:3px solid #3ba4d7 !important;animation:none !important}.sidebarquickview>h4,.sidebarquickview>h6{display:none !important}}.posts{height:100%;margin-top:1rem;flex-direction:column;overflow:auto}.posts__heading{display:flex;flex-direction:column;justify-content:space-between}.posts-container{height:100%;padding:1rem;display:grid;grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));gap:2rem;border:1px solid rgba(20,20,27,.1);border-radius:4px;overflow:auto}.posts-container-card{min-height:240px;flex-direction:column;border:1px solid rgba(20,20,27,.5);border-radius:4px;cursor:pointer;text-align:center}.posts-container-card img{flex-basis:90%;object-fit:cover}.posts-container-card p{padding:0 .125rem;flex-basis:10%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.progress-bar{width:100%;height:2rem;position:relative;text-align:center;background-color:#eef3f6;border-radius:20px;overflow:hidden}.progress-bar__status{position:absolute;top:0;left:0;height:100%;color:#14141b;background-color:#019dff}.progress-bar__percent{position:absolute;inset:0;margin:auto;width:fit-content;height:fit-content}.progress-bar-chunks{position:relative;margin-top:.5rem;width:100%;height:2rem;display:flex;border-radius:.25rem;overflow:hidden;background-color:#eef3f6}.progress-bar-chunks .chunk{width:100%}.progress-bar-chunks .chunk[data-chunkVal="0"]{background-color:rgba(155,218,255,.2)}.progress-bar-chunks .chunk[data-chunkVal="1"]{background-color:#ff3a4a}.progress-bar-chunks .chunk[data-chunkVal="2"]{background-color:#019dff}.progress-bar-chunks .chunk[data-chunkVal="3"]{background-color:#fcba03}.progress-bar-chunks__percent{position:absolute;inset:0;margin:auto;width:fit-content;height:fit-content}.statusbar{display:flex;justify-content:space-between;align-items:center;height:28px;background-color:#14141b;border-top:1px solid #2e2e38;padding:0 1rem;font-size:.8rem;color:#94a3b8;z-index:100;box-sizing:border-box;user-select:none;flex-shrink:0}.statusbar-left{display:flex;align-items:center}.statusbar-right{display:flex;align-items:center;gap:1.5rem}.statusbar-item{display:flex;align-items:center}.statusbar-divider{width:1px;height:14px;background-color:#2e2e38}.status-bullet{width:8px;height:8px;border-radius:50%;display:inline-block;box-shadow:0 0 4px rgba(0,0,0,.5)}.widget{height:100%;padding:1rem;display:flex;flex-direction:column;gap:.5rem;background-color:#fff;border-radius:.5rem;overflow:auto}.widget .top-heading{display:flex;justify-content:space-between}.widget__heading{display:flex;justify-content:space-between;align-items:center;border-bottom:2px solid #999}.widget__body{height:100%;display:flex;flex-direction:column;overflow:auto}.widget__body-heading{display:flex;justify-content:space-between;align-items:center}.widget__body-heading .action{display:flex;gap:.5rem}.widget__body-content{height:100%;overflow:auto}.widget__body-box{display:flex;flex-direction:column;gap:.5rem}.widget-half{max-width:50%}#modal-container{display:none;position:fixed;z-index:1;height:100%;top:0;left:0;width:100%;background-color:rgba(0,0,0,.2)}.modal-content{position:absolute;color:#555;width:40%;min-height:10rem;height:max-content;padding:1.5rem;inset:0;margin:auto;background-color:#fff;border-radius:.5rem;animation:fadein .5s;display:flex;flex-direction:column}.modal-content button:last-child{margin-top:auto}.modal-content .close-btn{position:absolute;right:1.5rem}.modal-content .widget{padding:0}#notification-container{position:absolute;bottom:0;right:0}.login-page{background-image:linear-gradient(-45deg, rgba(1, 157, 255, 0.75), rgba(17, 143, 204, 0.75));height:100%;animation:fadein .5s}.login-page .login-container{background-color:#fff;box-shadow:3px 3px 5px rgba(20,20,27,.4);margin:auto;position:relative;top:100px;max-width:400px;max-height:500px;border-radius:5px;display:flex;flex-direction:column;align-items:center}.login-page .login-container input{padding:.375rem .75rem;border-radius:.275rem}.login-page .login-container *{margin-bottom:1rem}.login-page .login-container>img{margin:1rem 0 2rem}.login-page .login-container extra{margin:0}.login-page .login-container>a{text-decoration:underline;cursor:pointer}.login-page .extra>label,.login-page .extra>br,.login-page .extra>input{margin-bottom:0}.homepage{margin:2rem auto 0;display:flex;flex-direction:column;gap:4rem}.homepage .logo{display:flex;justify-content:center;align-items:center}.homepage .logo img{width:90px}.homepage .logo .retroshareText{display:flex;flex-direction:column;align-items:center}.homepage .logo .retroshareText .retrotext{font-size:36px;font-weight:600;line-height:1.125}.homepage .logo .retroshareText .retrotext>span{color:#118fcc}.homepage .logo .retroshareText>b{font-size:14px;line-height:1}.homepage .certificate{display:flex;flex-direction:column;gap:4rem}.homepage .certificate__heading{text-align:center}.homepage .certificate__heading>h1{margin-bottom:1rem}.homepage .certificate__content{display:flex;flex-direction:column;gap:2rem;padding:2rem;text-align:center;border:1.5px solid rgba(17,143,204,.2);border-radius:6px;box-shadow:0px 0px 8px 2px rgba(20,20,27,.05)}.homepage .certificate__content .rsId>p{margin-bottom:.5rem;color:#118fcc}.homepage .certificate__content .retroshareID{padding:.25rem;display:flex;align-items:center;justify-self:start;font-size:1.25rem;border-radius:4px;background:rgba(20,20,27,.05)}.homepage .certificate__content .retroshareID .textArea{padding:0;width:100%;height:auto;font-size:1rem;font-family:monospace;background:rgba(0,0,0,0);border:none;resize:none;overflow:hidden;field-sizing:content}.homepage .certificate__content .retroshareID i{color:#118fcc}.homepage .certificate__content .retroshareID>i{margin:0 .5rem;cursor:pointer}.homepage .certificate__content .webhelp{padding:.5rem;background:#f5f5f5;display:flex;justify-content:center;align-items:center;gap:.5rem;border-radius:4px;border:1px solid rgba(20,20,27,.5);width:fit-content;cursor:pointer}.homepage .certificate__content .webhelp-container{display:grid;place-items:center}.homepage .certificate__content .webhelp:hover{background:#eef3f6;border:1px solid #14141b}.homepage .certificate__content .webhelp>i{font-size:1.2rem;color:green}.homepage .certificate__content .add-friend>h6,.homepage .certificate__content .webhelp-container>h6{font-weight:normal;margin-bottom:.5rem}.network-container{display:flex;height:100%;width:100%;overflow:hidden;background-color:#f1f5f9}.network-left-pane{width:320px;min-width:300px;max-width:350px;border-right:1px solid #cbd5e1;display:flex;flex-direction:column;background:#fff;box-shadow:2px 0 5px rgba(0,0,0,.05)}.own-profile-card{padding:1.25rem;border-bottom:1px solid #e2e8f0;background:linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);display:flex;flex-direction:column;gap:.75rem}.own-profile-card .profile-header{display:flex;align-items:center;gap:1rem}.own-profile-card .profile-info{display:flex;flex-direction:column;flex:1;overflow:hidden}.own-profile-card .profile-info .profile-name{font-weight:700;color:#1e293b;font-size:1.1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.own-profile-card .profile-info .profile-status{font-size:.85rem;color:#10b981;font-weight:500;display:flex;align-items:center;gap:.35rem}.own-profile-card .profile-info .profile-status::before{content:"";display:inline-block;width:8px;height:8px;background-color:#10b981;border-radius:50%}.own-profile-card .own-identity-select-container{display:flex;flex-direction:column;gap:.25rem}.own-profile-card .own-identity-select-container label{font-size:.75rem;color:#64748b;font-weight:600;text-transform:uppercase;letter-spacing:.05em}.own-profile-card .own-identity-select-container select.own-identity-select{width:100%;padding:.375rem .5rem;font-size:.85rem;border:1px solid #cbd5e1;border-radius:.375rem;background-color:#fff;color:#334155;outline:none;cursor:pointer;transition:border-color .2s}.own-profile-card .own-identity-select-container select.own-identity-select:focus{border-color:#3ba4d7}.friends-list-container{flex:1;display:flex;flex-direction:column;overflow:hidden}.friends-list-container .searchbar-container{padding:.75rem 1rem;border-bottom:1px solid #e2e8f0}.friends-list-container .searchbar-container input.searchbar{width:100%;padding:.5rem .75rem;font-size:.9rem;border:1px solid #cbd5e1;border-radius:.375rem;background-color:#f8fafc;outline:none;transition:all .2s}.friends-list-container .searchbar-container input.searchbar:focus{background-color:#fff;border-color:#3ba4d7;box-shadow:0 0 0 3px rgba(59,164,215,.15)}.friends-list-container .friends-scroll{flex:1;overflow-y:auto;padding:.5rem 0}.friend-list-item{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;margin:.125rem .5rem;border-radius:.5rem;cursor:pointer;transition:all .2s}.friend-list-item:hover{background-color:#f1f5f9}.friend-list-item.selected{background-color:#e0f2fe}.friend-list-item.selected .friend-name{color:#0369a1;font-weight:600}.friend-list-item .friend-avatar{flex-shrink:0}.friend-list-item .friend-meta{flex:1;min-width:0}.friend-list-item .friend-meta .friend-name{font-size:.95rem;color:#334155;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .2s}.friend-list-item .friend-meta .friend-status{font-size:.8rem;color:#94a3b8}.friend-list-item .friend-meta .friend-status.online{color:#10b981;font-weight:500}.network-right-pane{flex:1;display:flex;flex-direction:column;overflow:hidden;background-color:#f8fafc}.network-pane-placeholder{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;color:#94a3b8;gap:1rem;padding:2rem;text-align:center}.network-pane-placeholder i{font-size:4rem;color:#cbd5e1}.network-pane-placeholder p{font-size:1.1rem;max-width:400px}.network-tabs{display:flex;background-color:#fff;border-bottom:1px solid #cbd5e1;padding:.5rem 1rem 0;gap:.5rem}.network-tabs .tab-btn{padding:.625rem 1.25rem;font-size:.95rem;font-weight:600;color:#64748b;background:rgba(0,0,0,0);border:none;border-radius:.375rem .375rem 0 0;border-bottom:3px solid rgba(0,0,0,0);cursor:pointer;box-shadow:none;transition:all .2s}.network-tabs .tab-btn:hover{color:#334155;background-color:#f1f5f9}.network-tabs .tab-btn.active{color:#3ba4d7;border-bottom-color:#3ba4d7;background-color:rgba(0,0,0,0)}.network-tab-content{flex:1;overflow-y:auto;padding:1.5rem}.network-detail-view{display:flex;flex-direction:column;gap:1.5rem}.network-detail-view .detail-header{display:flex;align-items:center;gap:1.5rem;padding-bottom:1.5rem;border-bottom:1px solid #e2e8f0}.network-detail-view .detail-header .detail-title{flex:1}.network-detail-view .detail-header .detail-title h2{font-size:1.75rem;font-weight:800;color:#1e293b;margin-bottom:.25rem}.network-detail-view .detail-header .detail-title .detail-subtitle{font-size:.9rem;color:#64748b;display:flex;align-items:center;gap:.5rem}.network-detail-view .detail-header .detail-actions{display:flex;gap:.75rem}.network-detail-view .detail-header .detail-actions button{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;font-size:.9rem}.network-detail-view .detail-section{background-color:#fff;border-radius:.5rem;border:1px solid #e2e8f0;padding:1.25rem;box-shadow:0 1px 3px rgba(0,0,0,.02)}.network-detail-view .detail-section h3{font-size:1.1rem;font-weight:700;color:#334155;margin-bottom:1rem;padding-bottom:.5rem;border-bottom:1px solid #f1f5f9}.network-detail-view .detail-section .info-grid{display:grid;grid-template-columns:120px 1fr;row-gap:.75rem;font-size:.9rem}.network-detail-view .detail-section .info-grid .info-label{font-weight:600;color:#64748b}.network-detail-view .detail-section .info-grid .info-value{color:#1e293b;word-break:break-all}.network-detail-view .locations-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));gap:1rem}.network-detail-view .location-card{background-color:#fff;border:1px solid #e2e8f0;border-radius:.5rem;padding:1rem;display:flex;flex-direction:column;gap:.5rem;box-shadow:0 1px 3px rgba(0,0,0,.02)}.network-detail-view .location-card .loc-header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #f1f5f9;padding-bottom:.5rem;margin-bottom:.25rem}.network-detail-view .location-card .loc-header .loc-name{font-weight:700;color:#334155;font-size:.95rem}.network-detail-view .location-card .loc-header .loc-status{font-size:.75rem;font-weight:600;padding:.125rem .5rem;border-radius:.25rem}.network-detail-view .location-card .loc-header .loc-status.online{background-color:#d1fae5;color:#065f46}.network-detail-view .location-card .loc-header .loc-status.offline{background-color:#f1f5f9;color:#475569}.network-detail-view .location-card .loc-body{font-size:.85rem;display:grid;grid-template-columns:80px 1fr;row-gap:.25rem}.network-detail-view .location-card .loc-body .loc-label{color:#64748b}.network-detail-view .location-card .loc-body .loc-val{color:#334155;word-break:break-all}.network-detail-view .location-card .loc-footer{margin-top:.5rem;display:flex;justify-content:flex-end}.network-detail-view .location-card .loc-footer button{font-size:.8rem;padding:.25rem .75rem}.network-chat-view{display:flex;flex-direction:column;height:100%;overflow:hidden;background-color:#f8fafc}.network-chat-view .chat-messages{flex:1;overflow-y:auto;padding:1.25rem;display:flex;flex-direction:column;gap:1rem}.network-chat-view .chat-bubble-container{display:flex;flex-direction:column;max-width:70%}.network-chat-view .chat-bubble-container.outgoing{align-self:flex-end;align-items:flex-end}.network-chat-view .chat-bubble-container.outgoing .chat-bubble{background-color:#3ba4d7;color:#fff;border-bottom-right-radius:.125rem}.network-chat-view .chat-bubble-container.incoming{align-self:flex-start;align-items:flex-start}.network-chat-view .chat-bubble-container.incoming .chat-bubble{background-color:#fff;color:#1e293b;border:1px solid #e2e8f0;border-bottom-left-radius:.125rem}.network-chat-view .chat-bubble-container .chat-sender{font-size:.75rem;color:#64748b;margin-bottom:.25rem;padding:0 .25rem}.network-chat-view .chat-bubble-container .chat-bubble{padding:.625rem .875rem;border-radius:.75rem;font-size:.925rem;line-height:1.4;white-space:break-spaces;word-break:break-word;box-shadow:0 1px 2px rgba(0,0,0,.05)}.network-chat-view .chat-bubble-container .chat-time{font-size:.7rem;color:#94a3b8;margin-top:.25rem;padding:0 .25rem}.network-chat-view .chat-input-area{padding:1rem;background-color:#fff;border-top:1px solid #cbd5e1;display:flex;gap:.75rem;align-items:center}.network-chat-view .chat-input-area textarea.chat-textarea{flex:1;resize:none;height:40px;padding:.5rem .75rem;border:1px solid #cbd5e1;border-radius:.375rem;font-size:.9rem;outline:none;transition:all .2s}.network-chat-view .chat-input-area textarea.chat-textarea:focus{border-color:#3ba4d7;box-shadow:0 0 0 3px rgba(59,164,215,.15)}.network-chat-view .chat-input-area button.send-btn{padding:.5rem 1.25rem;font-size:.9rem;height:40px;display:flex;align-items:center;gap:.5rem}.network-chat-view .chat-warning{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;color:#64748b;text-align:center;padding:2rem;gap:1rem}.network-chat-view .chat-warning i{font-size:3rem;color:#cbd5e1}.network-chat-view .chat-warning h4{font-weight:700;color:#334155}.network-chat-view .chat-warning p{max-width:350px;font-size:.9rem}.identity{color:#444;font-size:1.1em;margin:20px;padding:10px;border:1px solid #aaa;border-radius:20px}.identity>h4{margin:5px;font-size:1.3em}.identity button{font-size:.9em}.identity .details{display:grid;grid-template-columns:140px auto;grid-row-gap:5px;justify-content:left}.defaultAvatar{width:3rem;height:3rem;aspect-ratio:1;background:#b0c4de;border-radius:50%;display:grid;place-items:center}.defaultAvatar p{font-weight:900;color:#666f7f;transform:translateY(1px)}img.avatar{display:block;width:3rem;height:max-content;aspect-ratio:1;margin-right:.3em;border-radius:50%}.counter{margin-left:.5em}.counter:before{content:"("}.counter:after{content:")"}.chatInit{margin-left:.5em;color:green;cursor:pointer}.people-sidebar-header{display:flex;flex-direction:column;padding:.75rem 1rem .5rem 1rem;gap:.75rem;border-bottom:1px solid #e2e8f0;background-color:#fff}.people-sidebar-header .searchbar-wrapper{position:relative;display:flex;align-items:center}.people-sidebar-header .searchbar-wrapper i.fa-search{position:absolute;left:.85rem;color:#94a3b8;font-size:.9rem}.people-sidebar-header .searchbar-wrapper input.searchbar-input{width:100%;padding:.5rem .75rem .5rem 2.25rem;border:1px solid #e2e8f0;border-radius:.5rem;font-size:.9rem;background-color:#f8fafc;color:#1e293b;outline:none;transition:all .2s ease}.people-sidebar-header .searchbar-wrapper input.searchbar-input:focus{border-color:#3b82f6;background-color:#fff;box-shadow:0 0 0 3px rgba(59,130,246,.1)}.people-sidebar-header .segmented-control{display:flex;background-color:#f1f5f9;padding:3px;border-radius:.5rem;gap:4px}.people-sidebar-header .segmented-control button.segment-tab{flex:1;display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.5rem .75rem;font-size:.9rem;font-weight:600;color:#64748b;background:rgba(0,0,0,0);border:none;border-radius:.375rem;cursor:pointer;box-shadow:none;transition:all .2s ease}.people-sidebar-header .segmented-control button.segment-tab:hover{color:#1e293b}.people-sidebar-header .segmented-control button.segment-tab.active{background-color:#fff;color:#0f172a;box-shadow:0 1px 3px rgba(0,0,0,.1),0 1px 2px rgba(0,0,0,.06)}.people-sidebar-header .segmented-control button.segment-tab.active .segment-badge{background-color:#019dff;color:#fff}.people-sidebar-header .segmented-control button.segment-tab .segment-badge{display:inline-flex;align-items:center;justify-content:center;background-color:#cbd5e1;color:#334155;font-size:.75rem;font-weight:700;min-width:1.25rem;height:1.25rem;padding:0 .35rem;border-radius:9999px;line-height:1;transition:all .2s ease}.people-sidebar-header .sub-filter-row{display:flex;align-items:center;justify-content:space-between;gap:.5rem;min-height:32px}.people-sidebar-header .sub-filter-row select.filter-select{padding:.35rem .6rem;border:1px solid #cbd5e1;border-radius:.375rem;font-size:.85rem;font-weight:600;color:#475569;background-color:#fff;cursor:pointer;outline:none}.people-sidebar-header .sub-filter-row .btn-add-id{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:.375rem;background-color:#3b82f6;color:#fff;border:none;cursor:pointer;font-size:.9rem;transition:background-color .2s}.people-sidebar-header .sub-filter-row .btn-add-id:hover{background-color:#2563eb}.lobby{margin:10px;border:1px solid #aaa;border-radius:20px}.lobby .mainname{margin:20px;font-weight:100;font-size:1.2em}.topic{color:#666}.lobby>.topic{font-size:.95em;margin-left:25px;margin-bottom:5px}.lefttitle{margin-top:15px;margin-bottom:0;font-weight:100;font-size:1.2em}.leftname{margin-top:5px;margin-bottom:5px;padding:5px;font-weight:100;font-size:1em}.leftlobby>.topic{font-size:.75em;margin-left:15px;margin-bottom:5px}.subscribed,.public{cursor:pointer}.leftlobby{border:1px solid #aaa;border-radius:10px;margin-top:5px;background-color:#fff}.leftlobby.selected-lobby,.selectedidentity{color:#fff;background-color:#3ba4d7}.rightbar{position:absolute;width:185px;background-color:#fff;overflow:auto;top:130px;bottom:15px;right:15px}.user{padding:5px}.lobbyName{padding:15px;margin-top:2rem}.lobbies{position:absolute;width:185px;left:165px;bottom:15px;top:130px;overflow:auto}.messages,.setup{position:absolute;background-color:#fff;top:130px;left:360px;right:215px;overflow:auto}.messages{bottom:115px}.messagetext{white-space:break-spaces;margin-right:5px}.message>*{margin-left:5px}.username{color:#006400;font-weight:bolder}.chatMessage{position:absolute;background-color:#fff;height:85px;bottom:15px;right:215px;left:360px}textarea.chatMsg{height:100%;width:100%}.chatatchar{margin-left:.2em;margin-right:.2em;color:silver}.setupicon{margin-left:1em;cursor:pointer}.leaveicon{margin-left:1em;cursor:pointer;color:#d40000}.selectidentity{margin:15px;font-size:1.2em}.setup>.identity{cursor:pointer}.setup{bottom:15px}.createDistantChat{margin-top:1em}.no-lobbies .messages,.no-lobbies .chatMessage,.no-lobbies .setup{left:165px}@media(min-width: 900px){.node-panel.chat-room{display:grid !important;grid-template-columns:250px 1fr 200px !important;grid-template-rows:auto 1fr auto !important;grid-template-areas:"lobbies header rightbar" "lobbies messages rightbar" "lobbies input rightbar" !important;padding:0 !important;height:100% !important}.node-panel.chat-room .lobbyName{grid-area:header;padding:10px;border-bottom:1px solid #eee;margin:0;z-index:10;background:#fff}.node-panel.chat-room .lobbies{grid-area:lobbies;position:static !important;width:auto !important;height:auto !important;border-right:1px solid #ccc;overflow-y:auto;display:block !important;top:auto !important;bottom:auto !important;left:auto !important}.node-panel.chat-room .messages{grid-area:messages;position:static !important;width:auto !important;height:auto !important;overflow-y:auto;padding:10px;left:auto !important;right:auto !important;top:auto !important;bottom:auto !important;margin:0 !important}.node-panel.chat-room .rightbar{grid-area:rightbar;position:static !important;width:auto !important;border-left:1px solid #ccc;overflow-y:auto;display:block !important}.node-panel.chat-room .chatMessage{grid-area:input;position:static !important;width:auto !important;height:auto !important;border-top:1px solid #eee;left:auto !important;right:auto !important;bottom:auto !important;flex:0 0 auto;padding:10px !important;background:#fff;z-index:10}}@media(max-width: 899px){.node-panel.chat-room{display:flex !important;flex-direction:column !important;height:100% !important;position:relative !important}.node-panel.chat-room .lobbyName{flex:0 0 auto}.node-panel.chat-room .messages{flex:1 !important;overflow-y:auto !important;position:relative !important;top:0 !important;bottom:0 !important;left:0 !important;right:0 !important;width:100% !important;height:auto !important;margin:0 !important}.node-panel.chat-room .chatMessage{flex:0 0 auto !important;position:relative !important;bottom:0 !important;left:0 !important;right:0 !important;width:100% !important;height:auto !important;z-index:100}.node-panel.chat-room .rightbar,.node-panel.chat-room .lobbies{display:none !important;position:fixed !important;top:60px !important;bottom:0 !important;width:80% !important;background:#fff !important;z-index:200 !important;box-shadow:2px 0 10px rgba(0,0,0,.2) !important}.node-panel.chat-room.show-lobbies .lobbies{display:block !important;left:0 !important}.node-panel.chat-room.show-users .rightbar{display:block !important;right:0 !important}.chat-overlay{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.4);z-index:150}.show-lobbies .chat-overlay,.show-users .chat-overlay{display:block}.mobile-menu-icons{display:flex;gap:15px;font-size:1.2rem}.mobile-menu-icons i{cursor:pointer;padding:5px}}@media(min-width: 900px){.mobile-menu-icons{display:none}}.chat-hub-container{display:flex;height:100%;width:100%;overflow:hidden;background-color:#f1f5f9}.chat-hub-left-pane{width:320px;min-width:300px;max-width:350px;border-right:1px solid #cbd5e1;display:flex;flex-direction:column;background:#fff;box-shadow:2px 0 5px rgba(0,0,0,.05)}.chat-own-profile-card{padding:1.25rem;border-bottom:1px solid #e2e8f0;background:linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%)}.chat-own-profile-card .profile-header{display:flex;align-items:center;gap:1rem}.chat-own-profile-card .profile-info{display:flex;flex-direction:column;flex:1;overflow:hidden}.chat-own-profile-card .profile-info .profile-name{font-weight:700;color:#1e293b;font-size:1.1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chat-own-profile-card .profile-info .profile-status{font-size:.85rem;color:#10b981;font-weight:500;display:flex;align-items:center;gap:.35rem}.chat-own-profile-card .profile-info .profile-status::before{content:"";display:inline-block;width:8px;height:8px;background-color:#10b981;border-radius:50%}.chat-rooms-list-container{flex:1;display:flex;flex-direction:column;overflow:hidden}.chat-rooms-list-container .searchbar-container{padding:.75rem 1rem;border-bottom:1px solid #e2e8f0}.chat-rooms-list-container .searchbar-container input.searchbar{width:100%;padding:.5rem .75rem;font-size:.9rem;border:1px solid #cbd5e1;border-radius:.375rem;background-color:#f8fafc;outline:none;transition:all .2s}.chat-rooms-list-container .searchbar-container input.searchbar:focus{background-color:#fff;border-color:#3ba4d7;box-shadow:0 0 0 3px rgba(59,164,215,.15)}.chat-rooms-list-container .rooms-scroll{flex:1;overflow-y:auto;padding:.5rem 0}.rooms-section-title{display:flex;align-items:center;gap:.5rem;padding:.75rem 1rem .375rem;font-size:.75rem;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.05em}.rooms-section-title i{font-size:.7rem;color:#94a3b8}.chat-room-list-item{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;margin:.125rem .5rem;border-radius:.5rem;cursor:pointer;transition:all .2s}.chat-room-list-item:hover{background-color:#f1f5f9}.chat-room-list-item.selected{background-color:#e0f2fe}.chat-room-list-item.selected .room-name{color:#0369a1;font-weight:600}.chat-room-list-item .room-icon{flex-shrink:0;width:36px;height:36px;border-radius:.5rem;background:linear-gradient(135deg, #3ba4d7, #0ea5e9);display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.35rem}.chat-room-list-item.public-room .room-icon{background:linear-gradient(135deg, #10b981, #059669)}.chat-room-list-item .room-meta{flex:1;min-width:0}.chat-room-list-item .room-meta .room-name{font-size:.95rem;color:#334155;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .2s}.chat-room-list-item .room-meta .room-topic{font-size:.8rem;color:#94a3b8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chat-room-list-item .room-badge{flex-shrink:0;min-width:24px;height:24px;border-radius:12px;background-color:#e2e8f0;color:#475569;font-size:.75rem;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 .375rem}.chat-hub-right-pane{flex:1;display:flex;flex-direction:column;overflow:hidden;background-color:#f8fafc}.chat-pane-placeholder{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center;color:#94a3b8;gap:1rem;padding:2rem;text-align:center}.chat-pane-placeholder i{font-size:4rem;color:#cbd5e1}.chat-pane-placeholder p{font-size:1.1rem;max-width:400px}.chat-hub-tab-content{flex:1;overflow-y:auto;padding:1.5rem}.chat-room-detail-view{display:flex;flex-direction:column;gap:1.5rem}.chat-room-detail-view .detail-header{display:flex;align-items:flex-start;gap:1.5rem;padding-bottom:1.5rem;border-bottom:1px solid #e2e8f0;flex-wrap:wrap}.chat-room-detail-view .detail-header .detail-title{flex:1;min-width:200px}.chat-room-detail-view .detail-header .detail-title h2{font-size:1.75rem;font-weight:800;color:#1e293b;margin-bottom:.25rem}.chat-room-detail-view .detail-header .detail-title .detail-subtitle{font-size:.9rem;color:#64748b;display:flex;align-items:center;gap:.5rem}.chat-room-detail-view .detail-header .detail-actions{display:flex;gap:.75rem;flex-wrap:wrap}.chat-room-detail-view .detail-header .detail-actions button{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;font-size:.9rem}.chat-room-detail-view .detail-section{background-color:#fff;border-radius:.5rem;border:1px solid #e2e8f0;padding:1.25rem;box-shadow:0 1px 3px rgba(0,0,0,.02)}.chat-room-detail-view .detail-section h3{font-size:1.1rem;font-weight:700;color:#334155;margin-bottom:1rem;padding-bottom:.5rem;border-bottom:1px solid #f1f5f9}.chat-room-detail-view .detail-section .info-grid{display:grid;grid-template-columns:130px 1fr;row-gap:.75rem;font-size:.9rem}.chat-room-detail-view .detail-section .info-grid .info-label{font-weight:600;color:#64748b}.chat-room-detail-view .detail-section .info-grid .info-value{color:#1e293b;word-break:break-all}.participants-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(180px, 1fr));gap:.5rem}.participant-card{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;background-color:#f8fafc;border:1px solid #e2e8f0;border-radius:.375rem}.participant-card .participant-name{font-size:.875rem;color:#334155;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.no-participants{color:#94a3b8;font-size:.9rem;font-style:italic}.detail-actions-footer{display:flex;gap:.75rem}.detail-actions-footer button{display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;font-size:.9rem}.join-description{color:#64748b;font-size:.9rem;margin-bottom:1rem}.identities-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));gap:.75rem}.identity-card{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;background-color:#f8fafc;border:1px solid #e2e8f0;border-radius:.5rem;cursor:pointer;transition:all .2s}.identity-card:hover{background-color:#e0f2fe;border-color:#3ba4d7}.identity-card .identity-name{font-size:.95rem;font-weight:600;color:#334155}.identity-card i{color:#3ba4d7;font-size:.9rem}.no-rooms{padding:1rem;color:#94a3b8;text-align:center;font-style:italic}@media(max-width: 899px){.chat-hub-container{flex-direction:column}.chat-hub-left-pane{width:100%;min-width:0;max-width:none;max-height:45%;border-right:none;border-bottom:1px solid #cbd5e1}.chat-hub-right-pane{flex:1;min-height:0}}.chat-hub-header-bar{padding:.75rem 1.5rem;background-color:#fff;border-bottom:1px solid #e2e8f0;display:flex;align-items:center;justify-content:space-between;height:65px;flex-shrink:0}.chat-hub-header-bar .chat-header-info{display:flex;flex-direction:column;overflow:hidden}.chat-hub-header-bar .chat-header-info .chat-header-name{font-size:1.15rem;font-weight:800;color:#1e293b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chat-hub-header-bar .chat-header-info .chat-header-topic{font-size:.85rem;color:#64748b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:.125rem}.chat-hub-header-bar .chat-header-actions{display:flex;gap:.5rem}.chat-hub-header-bar .chat-header-actions button{display:flex;align-items:center;gap:.35rem;padding:.375rem .75rem;font-size:.85rem}.chat-hub-tabs-container{background-color:#fff;border-bottom:1px solid #cbd5e1;padding:.5rem 1.5rem 0}.chat-hub-tabs{display:flex;gap:.5rem}.chat-hub-tabs .tab-btn{padding:.625rem 1.25rem;font-size:.95rem;font-weight:600;color:#64748b;background:rgba(0,0,0,0);border:none;border-radius:.375rem .375rem 0 0;border-bottom:3px solid rgba(0,0,0,0);cursor:pointer;box-shadow:none;transition:all .2s;display:flex;align-items:center;gap:.5rem}.chat-hub-tabs .tab-btn:hover{color:#334155;background-color:#f1f5f9}.chat-hub-tabs .tab-btn.active{color:#3ba4d7;border-bottom-color:#3ba4d7;background-color:rgba(0,0,0,0)}.chat-hub-tab-content{flex:1;display:flex;flex-direction:column;overflow:hidden;background-color:#f8fafc}.chat-hub-conversation-layout{display:flex;flex-direction:row;height:100%;width:100%;overflow:hidden}.chat-hub-conversation-main{display:flex;flex-direction:column;flex:1;height:100%;overflow:hidden}.chat-hub-rightbar{width:200px;border-left:1px solid #cbd5e1;background-color:#fff;display:flex;flex-direction:column;flex-shrink:0}.chat-hub-rightbar .rightbar-title{padding:.75rem 1rem;font-size:.85rem;font-weight:700;color:#64748b;text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid #e2e8f0}.chat-hub-rightbar .rightbar-users-list{flex:1;overflow-y:auto;padding:.5rem}.chat-hub-rightbar .user{padding:.5rem .75rem;font-size:.9rem;color:#334155;border-radius:.375rem;transition:all .2s;display:flex;align-items:center;gap:.5rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chat-hub-rightbar .user:hover{background-color:#f1f5f9;color:#0f172a}.chat-hub-rightbar .user .defaultAvatar{width:2rem;height:2rem;font-size:.9rem;flex-shrink:0}.chat-hub-rightbar .user img.avatar{width:2rem;height:2rem;flex-shrink:0}@media(max-width: 899px){.chat-hub-rightbar{display:none}}.chat-hub-messages{flex:1;overflow-y:auto;padding:1.25rem 1.5rem;display:flex;flex-direction:column;gap:1rem}.chat-hub-messages .message{display:flex;flex-direction:column;max-width:70%;padding:.625rem .875rem;border-radius:.75rem;font-size:.925rem;line-height:1.4;word-break:break-word;box-shadow:0 1px 2px rgba(0,0,0,.05)}.chat-hub-messages .message.incoming{align-self:flex-start;align-items:flex-start;background-color:#fff;color:#1e293b;border:1px solid #e2e8f0;border-bottom-left-radius:.125rem}.chat-hub-messages .message.outgoing{align-self:flex-end;align-items:flex-end;background-color:#3ba4d7;color:#fff;border-bottom-right-radius:.125rem}.chat-hub-messages .message .username{font-size:.75rem;margin-bottom:.25rem;padding:0 .125rem;font-weight:700}.chat-hub-messages .message.incoming .username{color:#0369a1}.chat-hub-messages .message.outgoing .username{color:#e0f2fe}.chat-hub-messages .message .messagetext{white-space:break-spaces;margin:0}.chat-hub-messages .message .datetime{font-size:.7rem;margin-top:.25rem;padding:0 .125rem;opacity:.8}.chat-hub-messages .message.incoming .datetime{color:#64748b}.chat-hub-messages .message.outgoing .datetime{color:#f1f5f9}.chat-hub-input-area{padding:.75rem 1.5rem;background-color:#fff;border-top:1px solid #cbd5e1;display:flex;gap:.75rem;align-items:flex-end;flex-shrink:0}.chat-hub-input-area textarea.chat-hub-textarea{flex:1;resize:vertical;min-height:40px;max-height:250px;height:40px;padding:.5rem .75rem;border:1px solid #cbd5e1;border-radius:.375rem;font-size:.9rem;outline:none;transition:border-color .2s,box-shadow .2s;background-color:#f8fafc}.chat-hub-input-area textarea.chat-hub-textarea:focus{background-color:#fff;border-color:#3ba4d7;box-shadow:0 0 0 3px rgba(59,164,215,.15)}.chat-hub-input-area button.chat-hub-send-btn{padding:.5rem 1.25rem;font-size:.9rem;height:40px;display:flex;align-items:center;gap:.5rem;border-radius:.375rem}.chat-hub-messages.compact-container,.messages.compact-container{gap:0 !important;padding:.75rem 1rem !important;background-color:#fff !important;display:flex !important;flex-direction:column !important}.chat-hub-messages.compact-container .message.compact,.messages.compact-container .message.compact{display:block !important;max-width:100% !important;padding:.1rem 0 !important;border-radius:0 !important;background-color:rgba(0,0,0,0) !important;border:none !important;box-shadow:none !important;align-self:flex-start !important;font-size:.875rem !important;line-height:1.45 !important;margin:0 !important;white-space:nowrap !important}.chat-hub-messages.compact-container .message.compact:hover,.messages.compact-container .message.compact:hover{background-color:#f8fafc !important;overflow:visible !important;white-space:normal !important}.chat-hub-messages.compact-container .message.compact .datetime,.messages.compact-container .message.compact .datetime{color:#a0a0a0 !important;margin-right:.4rem !important;font-size:.78rem !important;font-family:monospace !important;opacity:1 !important;display:inline !important}.chat-hub-messages.compact-container .message.compact .username,.messages.compact-container .message.compact .username{font-weight:bold !important;margin-right:.2rem !important;font-size:.875rem !important;display:inline !important}.chat-hub-messages.compact-container .message.compact .messagetext,.messages.compact-container .message.compact .messagetext{color:#1e293b !important;white-space:normal !important;word-break:break-word !important;display:inline !important;margin:0 !important}.side-bar{display:flex;flex-direction:column;background:#fff}.side-bar .mail-compose-btn{width:96%;margin:.25rem;padding:.75rem 0}.compose-mail__from{display:flex;justify-content:flex-start;align-items:center;gap:.5rem;padding-bottom:.5rem;border-bottom:2px solid #eef3f6}.compose-mail__recipients{padding:.5rem 0;display:flex;flex-direction:column;gap:.5rem;border-bottom:2px solid #eef3f6}.compose-mail__recipients__container{display:flex;gap:.5rem}.compose-mail__recipients__container>label{text-transform:capitalize}.compose-mail__recipients__container .recipients{width:100%;display:flex;gap:.5rem;flex-wrap:wrap}.compose-mail__recipients__container .recipients__selected{padding:.125rem .5rem;display:flex;align-items:center;gap:.5rem;border:1px solid #eef3f6;border-radius:3px;cursor:default}.compose-mail__recipients__container .recipients__selected i{cursor:pointer;padding:.25rem}.compose-mail__recipients__container .recipients__input{display:flex;position:relative;flex-grow:1}.compose-mail__recipients__container .recipients__input-field{flex-grow:1;min-width:200px;padding:0;border:none;box-shadow:none}.compose-mail__recipients__container .recipients__input-field:focus+.recipients__input-list{display:flex}.compose-mail__recipients__container .recipients__input-list{z-index:1;position:absolute;top:1rem;padding:0;width:100%;max-height:15rem;flex-direction:column;overflow:auto;display:none;background:#fff;border-top:1px solid #eef3f6;border-bottom:1px solid #eef3f6}.compose-mail__recipients__container .recipients__input-list:hover{display:flex}.compose-mail__recipients__container .recipients__input-list li{list-style:none;padding:.25rem .5rem;cursor:pointer;background:#fff;border:1px solid #eef3f6;border-top:0px}.compose-mail__recipients__container .recipients__input-list li:hover{background:#eef3f6}.compose-mail__recipients__container .recipients__input-list li:last-child{border-bottom:0px}.compose-mail__recipients .remove-recipient{padding:.125rem .5rem}.compose-mail input[type=text].compose-mail__subject{padding:.5rem 0;border:none;box-shadow:none;border-bottom:2px solid #eef3f6;border-radius:0}.compose-mail__message{margin:.5rem 0;height:100%;display:flex;flex-direction:column;overflow:auto}.compose-mail__message-body{height:100%;outline:rgba(0,0,0,0)}.compose-mail__send-btn{display:flex;align-items:center;gap:.5rem}.compose-mail__send-btn i{transform:translateY(-1px)}.msg-view{height:100%;display:flex;flex-direction:column;gap:1rem;overflow:auto}.msg-view-nav{display:flex;justify-content:space-between;align-items:column}.msg-view-nav__action{display:flex;gap:.5rem}.msg-view__header{display:flex;flex-direction:column;gap:1rem}.msg-view__header>h3{line-height:1}.msg-view__header .msg-details{display:flex;gap:1rem}.msg-view__header .msg-details__avatar{height:max-content}.msg-view__header .msg-details__info{display:flex;flex-direction:column}.msg-view__header .msg-details__info-item{display:flex;gap:.5rem}.msg-view__body{height:100%;overflow:auto;font-size:14px !important}.msg-view__attachment{height:50%;overflow:auto;display:flex;flex-direction:column}.msg-view__attachment-items{height:100%;overflow:auto}.mail-tag{width:8rem;padding:.5rem}.msgHeader{display:flex}.msgHeaderDetails{display:flex;flex-direction:column}table.mails th:nth-child(1){width:5%;color:#fcba03}table.mails th:nth-child(2){width:5%;color:hsl(202.5,30.7692307692%,44.9019607843%)}table.mails th:nth-child(3){width:50%;text-align:start}table.mails th:nth-child(4),table.mails th:nth-child(5){width:20%;text-align:start}table.mails td:nth-child(3){text-align:start;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}table.mails td:nth-child(4),table.mails td:nth-child(5){text-align:start}table.mails tr:hover{background-color:#eef3f6;cursor:pointer}table.mails tr.unread{color:#000;background-color:#eef3f6}table.mails>tr:hover{cursor:auto;background-color:#fff}table.mails th.sortable-th{cursor:pointer;user-select:none;transition:background-color .2s,color .2s}table.mails th.sortable-th:hover{background-color:#eef3f6;color:hsl(202.5,30.7692307692%,14.9019607843%)}input.star-check{display:none}input.star-check+label.star-check{color:gray}input.star-check:checked+label.star-check{color:#fcba03}#truncate{height:6rem;overflow:auto}#truncate.truncated-view{height:1.75rem;overflow:hidden}.toggle-truncate{font-size:.75rem;padding:0 .25rem;background:#999;color:#14141b;box-shadow:none;border-radius:2px}table.attachment-container{padding:0}table.attachment-container>tr{border:0}table.attachment-container .attachment-header{width:100%;display:flex;justify-content:space-between}table.attachment-container .attachment-header th{text-align:start}table.attachment-container .attachment-header th:nth-child(1){flex-basis:45%}table.attachment-container .attachment-header th:nth-child(2){flex-basis:15%}table.attachment-container .attachment-header th:nth-child(3){flex-basis:10%}table.attachment-container .attachment-header th:nth-child(4){flex-basis:20%}table.attachment-container .attachment-header th:nth-child(5){text-align:center;flex-basis:10%}table.attachment-container .attachment{width:100%;display:flex;justify-content:space-between;text-align:start}table.attachment-container .attachment__name{flex-basis:45%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}table.attachment-container .attachment__name span{margin-left:8px}table.attachment-container .attachment__from{flex-basis:15%}table.attachment-container .attachment__size{flex-basis:10%}table.attachment-container .attachment__date{flex-basis:20%}table.attachment-container .attachment td:nth-child(5){display:flex;justify-content:center;align-items:center;flex-basis:10%}table.attachment-container .attachment td:nth-child(5) button{font-size:.875rem}.view-toggle{height:max-content;border:1px solid #019dff;border-radius:4px;display:flex}.view-toggle *{padding:4px 12px;border-radius:4px}.composePopupOverlay{position:fixed;width:100%;height:100%;top:0;left:0;z-index:1;background-color:rgba(0,0,0,.2)}.composePopupOverlay .composePopup{position:absolute;inset:0;margin:auto;width:80%;height:90%}.composePopupOverlay .composePopup>.widget{padding:2rem}.composePopupOverlay .composePopup .close-btn{position:absolute;top:1.5rem;right:1.5rem}.file-view{width:100%;padding:1rem;margin-top:1.5rem;border-radius:8px;border:1px solid #ccc;animation:fadein .5s}.file-view__heading{display:flex;justify-content:space-between;margin-bottom:.5rem}.file-view__heading-chunk{display:flex;gap:1rem}.file-view__body{display:flex;flex-direction:column;gap:1rem}.file-view__body-details{display:flex;align-items:center}.file-view__body-details-stat{width:100%;display:grid;grid-template-columns:repeat(5, 1fr)}.file-view__body-details-stat span>i{margin-right:.5rem}.file-view__body-details-action{display:flex;gap:1rem;height:100%}.file-view__body-details-action button,.file-view__body-details-action button.red{padding:.25rem .75rem}table.myfiles td{word-wrap:break-word}table.myfiles th:nth-child(1){width:2%}table.myfiles th:nth-child(2){width:50%}table.myfiles td:nth-child(2){text-align:start}table.friendsfiles td{word-wrap:break-word}table.friendsfiles th:nth-child(1){width:2%}table.friendsfiles th:nth-child(2){width:50%}table.friendsfiles th:nth-child(4){width:40%}table.friendsfiles td:nth-child(2){text-align:start}.file-search-container{margin-top:1rem;padding:8px;display:flex;gap:8px;border:1px solid rgba(20,20,27,.2);border-radius:6px;height:100%;overflow:auto}.file-search-container__keywords{flex-basis:15%;padding-right:.25rem;border-right:1px solid rgba(20,20,27,.1)}.file-search-container__keywords .keywords-container{display:flex;flex-direction:column;border-top:2.5px solid rgba(20,20,27,.08);margin-top:.125rem;padding-top:.25rem}.file-search-container__keywords .keywords-container a{font-size:1.2rem;text-decoration:none;color:#14141b}.file-search-container__keywords .keywords-container a.selected{color:#019dff}.file-search-container__results{flex-basis:85%;height:100%;overflow:auto}.file-search-container__results .results-container .results-header tr{display:flex}.file-search-container__results .results-container .results-header tr th{font-size:1.25rem;font-weight:bold;text-align:left}.file-search-container__results .results-container .results-header tr th:nth-child(1){flex-basis:40%}.file-search-container__results .results-container .results-header tr th:nth-child(2){flex-basis:10%;text-align:center}.file-search-container__results .results-container .results-header tr th:nth-child(3){flex-basis:40%}.file-search-container__results .results-container .results-header tr th:nth-child(4){flex-basis:10%}.file-search-container__results .results-container .results{height:100%;overflow:auto}.file-search-container__results .results-container .results tr{display:flex}.file-search-container__results .results-container .results tr .results__hash,.file-search-container__results .results-container .results tr .results__name{text-align:left;flex-basis:40%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.file-search-container__results .results-container .results tr .results__hash span,.file-search-container__results .results-container .results tr .results__name span{margin-left:8px}.file-search-container__results .results-container .results tr .results__size{flex-basis:10%}.file-search-container__results .results-container .results tr .results__download{flex-basis:10%;display:flex;justify-content:start;align-items:center}.search-form{display:flex;width:40%}.search-form input{width:100%}.search-form button{margin-left:.5rem}.shareManagerPopupOverlay{position:fixed;width:100%;height:100%;top:0;left:0;z-index:1;background-color:rgba(0,0,0,.2)}.shareManagerPopupOverlay .shareManagerPopup{position:absolute;inset:0;margin:auto;width:80%;height:90%}.shareManagerPopupOverlay .shareManagerPopup>.widget{padding:1.5rem}.shareManagerPopupOverlay .shareManagerPopup .close-btn{position:absolute;top:1.5rem;right:1.5rem}.share-manager{display:flex;flex-direction:column;justify-content:space-between}.share-manager__table{margin:1rem 0 auto}.share-manager__table thead{font-weight:bold;text-align:left}.share-manager__table thead td:nth-child(1),.share-manager__table thead td:nth-child(2){padding-left:.5rem}.share-manager__table thead td:nth-child(3) .tooltip,.share-manager__table thead td:nth-child(4) .tooltip{font-weight:normal;font-size:1rem}.share-manager__table tbody{text-align:left}.share-manager__table tbody td:nth-child(4){font-size:1rem}.share-manager__table td input{border:0 !important}.share-manager__table td input[type=text]{width:100%}.share-manager__table td:nth-child(1){width:45%}.share-manager__table td:nth-child(2){width:20%}.share-manager__table td:nth-child(3){width:10%}.share-manager__table td:nth-child(4){width:25%}.share-manager__actions{display:flex;justify-content:space-between}.share-manager__form{display:flex;flex-direction:column;gap:.5rem}.share-manager__form_input{display:flex;flex-direction:column;gap:.5rem}.share-manager__form_input input{flex-grow:1}.share-manager .share-flags input.share-flags-check{display:none}.share-manager .share-flags input.share-flags-check+label.share-flags-label{color:gray;margin-right:.25rem;padding:.25rem .25rem .125rem;border:1px solid #6d6d6d;border-radius:.5rem}.share-manager .share-flags input.share-flags-check:checked+label.share-flags-label{color:#118fcc}.share-manager label span{display:inline-block;width:1.125rem}.manage-visibility label{width:100%;cursor:pointer}.manage-visibility{display:flex;justify-content:space-between}@media(max-width: 700px){.file-view__body-details{flex-direction:column;align-items:flex-start;gap:1rem}.file-view__body-details-stat{grid-template-columns:1fr;gap:.5rem}.file-view__body-details-stat span{display:flex;align-items:center}.share-manager__table,.share-manager__table thead,.share-manager__table tbody,.share-manager__table tr,.share-manager__table td{display:block;width:100% !important}.share-manager__table thead{display:none}.share-manager__table tr{border:1px solid #ccc;border-radius:8px;margin-bottom:1rem;padding:.5rem;background:#fff}.share-manager__table td{margin-bottom:.5rem;border:none !important;padding-left:0 !important}table.myfiles,table.myfiles tr,table.myfiles td,table.friendsfiles,table.friendsfiles tr,table.friendsfiles td{display:block;width:100% !important}table.myfiles th,table.friendsfiles th{display:none}table.myfiles tr,table.friendsfiles tr{border:1px solid #ccc;border-radius:8px;margin-bottom:1rem;padding:.5rem;background:#fff}.file-search-container{flex-direction:column}.file-search-container__keywords{flex-basis:auto;width:100%;border-right:none;border-bottom:1px solid rgba(20,20,27,.1);padding-bottom:1rem;margin-bottom:1rem}.results-container,.results-container thead,.results-container tbody,.results-container tr,.results-container td{display:block;width:100% !important}.results-container thead{display:none}.results-container tr{border-bottom:1px solid #eee;padding:1rem 0}.results-container td{margin-bottom:.5rem;word-break:break-all}}.file-section{margin-top:2rem;display:flex;flex-direction:column}.comments-section{margin-top:2rem;display:flex;justify-content:space-between}.comments-section__menu{display:flex;gap:1rem}.comments-section__menu-id{display:flex;align-items:center;gap:.25rem}#toggleunsub{position:relative;background:gray}table.channels th:nth-child(1){width:50%;text-align:start}table.channels td:nth-child(1){text-align:start;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}table.channels tr:hover{background-color:#eef3f6;cursor:pointer}table.channels tr.hidden{display:none}table{padding:.5rem}table.comments{border:1px solid #eee}table.comments th{height:40px}table.comments th:nth-child(1){width:2%}table.comments th:nth-child(2){width:40%}table.comments td{word-wrap:break-word}table.comments td:nth-child(2){text-align:start}table.files th:first-child{text-align:start;width:60%}table.files tr td:first-child{text-align:start}table.files td{word-wrap:break-word}#mtags{width:160px;text-align:center;font-size:medium;margin-left:10px;height:40px}.forums-node-panel{position:relative;bottom:200px;margin-left:200px;animation:fadein .5s}table.forums th:nth-child(1){width:50%;text-align:start}table.forums td:nth-child(1){text-align:start;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}table.forums tr:hover{background-color:#eef3f6;cursor:pointer}table.forums tr.hidden{display:none}#searchforum{position:relative;margin-left:250px}#forumdetails{position:relative;padding:10px}.p{margin:0}#toggleunsub{position:relative;background:gray}table.threads tr:hover{background-color:#eef3f6;cursor:pointer}table.threads td{word-wrap:break-word}table.threadreply th:nth-child(2){width:50%}table.threadreply th:nth-child(1){width:2%}table.threadreply td:nth-child(2){width:50%;text-align:start}table.threadreply td{word-wrap:break-word}table.threadreply tr:hover{background-color:#eef3f6;cursor:pointer}table.boards th:nth-child(1){width:50%;text-align:start}table.boards td:nth-child(1){text-align:start;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}table.boards tr:hover{background-color:#eef3f6;cursor:pointer}table.boards tr.hidden{display:none}#toggleunsub{position:relative;background:gray}#options{width:100px;text-align:center;font-size:medium;margin-left:20px;height:40px}#composepopup{height:80%;width:70%}#mtags{width:160px;text-align:center;font-size:medium;margin-left:10px;height:40px}.mail .permission-flag{margin-bottom:1rem;display:flex;gap:1rem}.mail-tags{padding:.5rem;border:1px solid rgba(20,20,27,.2);border-radius:6px}.mail-tags__container{display:flex;flex-direction:column}.mail-tags__container .tag-item{display:flex;align-items:center;gap:4px;border-bottom:1px solid rgba(20,20,27,.1);padding:2px 0}.mail-tags__container .tag-item:last-child{border:none}.mail-tags__container .tag-item__color{width:1.25rem;height:1.25rem;aspect-ratio:1}.mail-tags__container .tag-item__name{font-size:1.125rem}.mail-tags__container .tag-item__modify{margin-left:auto;font-size:.75rem;display:flex;gap:4px}.mail-tags__container .tag-item:hover{background-color:#eef3f6}.mail-tags__container .tag-item button,.mail-tags__container .tag-item button.red{padding:.25rem .6rem}.mail-tags-form .input-field{margin-bottom:.5rem}.mail-tags-form .input-field label{margin-right:.5rem}.external-address{margin:0;padding-left:1rem;height:100px;overflow:hidden auto}.external-address::-webkit-scrollbar{display:none}.proxy-server{display:flex;flex-direction:column;gap:4px}.proxy-server__tor>h4,.proxy-server__i2p>h4{margin-bottom:.25rem}.proxy-server__tor>input,.proxy-server__i2p>input{margin-right:.5rem}.proxy-server__tor .proxy-outgoing,.proxy-server__i2p .proxy-outgoing{display:inline-flex;align-items:center;gap:.5rem}.proxy-server__tor .proxy-outgoing__status,.proxy-server__i2p .proxy-outgoing__status{width:1rem;height:1rem;aspect-ratio:1;border:1px solid #000;border-radius:50%}.config-files{display:flex;flex-direction:column;gap:1rem}.proxy-server-container{width:100%;display:flex;flex-direction:column;gap:1rem}.proxy-description{color:#334155;font-size:.95rem;margin-bottom:.5rem}.proxy-rows-container{display:flex;flex-direction:column;gap:.75rem;width:100%}.proxy-row{display:grid;grid-template-columns:160px 220px 220px auto;gap:.75rem;align-items:center;width:100%}.proxy-label{font-size:.95rem;font-weight:500;color:#1e293b}.proxy-addr-input,.proxy-port-input{width:100% !important;max-width:none !important}.proxy-status-container{display:flex;align-items:center;gap:.5rem}.proxy-status-bullet{width:14px;height:14px;border-radius:50%;display:inline-block;border:1px solid #475569}.proxy-status-text{font-size:.95rem;color:#1e293b}