- Replying to @{replyInputData?.sender?.username}
+ {t('chatInput.replyingTo')} @{replyInputData?.sender?.username}
}
+ aria-placeholder={t('chatInput.enterMessage')}
+ placeholder={{t('chatInput.placeholder')}
}
spellCheck={false}
/>
{streamerData?.livestream?.session_title}
@@ -150,19 +154,19 @@ const StreamerInfo = memo(
- Live for {convertDateToHumanReadable(streamerData?.livestream?.created_at)} with{" "} - {streamerData?.livestream?.viewer_count?.toLocaleString() || 0} viewers + {t('streamerInfo.liveFor', { + duration: convertDateToHumanReadable(streamerData?.livestream?.created_at), + viewers: streamerData?.livestream?.viewer_count?.toLocaleString() || 0 + })}
- Sign in with your
Kick account + {t('auth.signInWithKick')}
Kick account + {t('auth.signInWithKick')}
-
Use username and password for login? Continue to Kick.com
+{t('auth.kickLoginDescription')}
-
Already have a Kick account with Google or Apple login?
+{t('auth.googleAppleDescription')}
- Disclaimer: We do NOT save any emails or passwords. + Disclaimer: {t('auth.disclaimer')}
- Chatters: {chattersData?.streamerData?.user?.username || ""} + {t('chatters.title')}: {chattersData?.streamerData?.user?.username || ""}
{debouncedValue ? ( <> - Showing: {filteredChatters.length} of {chattersData?.chatters?.length || 0} + {t('chatters.showing')}: {filteredChatters.length} {t('chatters.of')} {chattersData?.chatters?.length || 0} ) : ( <> - Total: {chattersData?.chatters?.length || 0} + {t('chatters.total')}: {chattersData?.chatters?.length || 0} )}
@@ -102,14 +104,14 @@ const Chatters = () => {
- setDebouncedValue(e.target.value.trim())} />
+ setDebouncedValue(e.target.value.trim())} />
{chattersData?.chatters?.length ? (
{!filteredChatters?.length && debouncedValue ? (
{
) : (
- No results found
+ {t('chatters.noResults')}
) : (
-
)}
diff --git a/src/renderer/src/components/Dialogs/Search.jsx b/src/renderer/src/components/Dialogs/Search.jsx
index 3c34a4f..5b03d13 100644
--- a/src/renderer/src/components/Dialogs/Search.jsx
+++ b/src/renderer/src/components/Dialogs/Search.jsx
@@ -1,11 +1,13 @@
import "../../assets/styles/components/Chat/Message.scss";
import { useCallback, useEffect, useState, useMemo, useRef } from "react";
+import { useTranslation } from "react-i18next";
import { Virtuoso } from "react-virtuoso";
import { useDebounceValue } from "../../utils/hooks";
import X from "../../assets/icons/x-bold.svg";
import RegularMessage from "../Messages/RegularMessage";
const Search = () => {
+ const { t } = useTranslation();
const [searchData, setSearchData] = useState(null);
const [messages, setMessages] = useState([]);
const [debouncedValue, setDebouncedValue] = useDebounceValue("", 200);
@@ -139,20 +141,20 @@ const Search = () => {
{debouncedValue ? (
No chatters tracked yet
- As users type their username will appear here. +{t('chatters.noTrackingYet')}
+ {t('chatters.trackingDescription')}- Searching History in {searchData?.chatroomName} + {t('search.searchingHistory')} {searchData?.chatroomName}
- Messages: {filteredMessages.length} of{" "} + {t('search.messages')}: {filteredMessages.length} {t('chatters.of')}{" "} {messages?.filter((m) => m.type === "message")?.length || 0}
) : (- Searching History in {searchData?.chatroomName} + {t('search.searchingHistory')} {searchData?.chatroomName}
- Messages: {messages?.filter((m) => m.type === "message")?.length || 0} + {t('search.messages')}: {messages?.filter((m) => m.type === "message")?.length || 0}
)} @@ -164,7 +166,7 @@ const Search = () => {
setDebouncedValue(e.target.value.trim())}
ref={inputRef}
/>
@@ -173,7 +175,7 @@ const Search = () => {
{!filteredMessages?.length && debouncedValue ? (
{
+ const { t } = useTranslation();
+
return (
@@ -92,7 +93,7 @@ const AboutSection = ({ appInfo }) => {
- No messages found
+ {t('search.noResults')}
) : (
-
About KickTalk
-A chat client for Kick.com.
+{t('settings.about.title')}
+{t('settings.about.description')}
-
Meet the Creators
+{t('settings.about.meetCreators')}
@@ -22,23 +25,23 @@ const AboutSection = ({ appInfo }) => {
-
Kick Username:
+{t('settings.about.kickUsername')}:
DRKNESS_x
-Role:
-Developer & Designer
+{t('settings.about.role')}:
+{t('settings.about.developerDesigner')}
- Open Twitter
+ {t('settings.about.openTwitter')}
- Open Channel
+ {t('settings.about.openChannel')}
@@ -49,23 +52,23 @@ const AboutSection = ({ appInfo }) => {
-
Kick Username:
+{t('settings.about.kickUsername')}:
ftk789
-Role:
-Developer
+{t('settings.about.role')}:
+{t('settings.about.developer')}
- Open Twitter
+ {t('settings.about.openTwitter')}
- Open Channel
+ {t('settings.about.openChannel')}
@@ -76,14 +79,12 @@ const AboutSection = ({ appInfo }) => {
-
About KickTalk
+{t('settings.about.aboutKickTalk')}
- We created this application because we felt the current solution Kick was offering couldn't meet the needs of users - who want more from their chatting experience. From multiple chatrooms to emotes and native Kick functionality all in - one place. + {t('settings.about.appDescription')}
-
{/* Current Version:
+{t('settings.about.currentVersion')}:
{appInfo?.appVersion}
-
General
-Select what general app settings you want to change.
+{t('settings.general.title')}
+{t('settings.general.description')}
+ {/* Language Selection */}
+
+
);
};
diff --git a/src/renderer/src/components/Dialogs/Settings/Sections/Moderation.jsx b/src/renderer/src/components/Dialogs/Settings/Sections/Moderation.jsx
index 1314aa8..b51aabb 100644
--- a/src/renderer/src/components/Dialogs/Settings/Sections/Moderation.jsx
+++ b/src/renderer/src/components/Dialogs/Settings/Sections/Moderation.jsx
@@ -1,14 +1,17 @@
+import { useTranslation } from "react-i18next";
import { Tooltip, TooltipContent, TooltipTrigger } from "../../../Shared/Tooltip";
import InfoIcon from "../../../../assets/icons/info-fill.svg?asset";
import clsx from "clsx";
import { Switch } from "../../../Shared/Switch";
const ModerationSection = ({ settingsData, onChange }) => {
+ const { t } = useTranslation();
+
return (
diff --git a/src/renderer/src/components/Messages/Message.jsx b/src/renderer/src/components/Messages/Message.jsx
index 2f39f84..6c59d65 100644
--- a/src/renderer/src/components/Messages/Message.jsx
+++ b/src/renderer/src/components/Messages/Message.jsx
@@ -1,5 +1,6 @@
import "../../assets/styles/components/Chat/Message.scss";
import { useCallback, useRef, useMemo, useState } from "react";
+import { useTranslation } from "react-i18next";
import ModActionMessage from "./ModActionMessage";
import RegularMessage from "./RegularMessage";
import EmoteUpdateMessage from "./EmoteUpdateMessage";
@@ -35,6 +36,7 @@ const Message = ({
chatroomName,
donators,
}) => {
+ const { t } = useTranslation();
const messageRef = useRef(null);
const getDeleteMessage = useChatStore(useShallow((state) => state.getDeleteMessage));
const [rightClickedEmote, setRightClickedEmote] = useState(null);
@@ -136,6 +138,7 @@ const Message = ({
}
};
+
const handleOpenEmoteLink = () => {
if (rightClickedEmote) {
let emoteUrl = "";
@@ -297,6 +300,8 @@ const Message = ({
message.type === "stvEmoteSetUpdate" && "emoteSetUpdate",
type === "dialog" && "dialogChatMessageItem",
shouldHighlightMessage && "highlighted",
+ message.isOptimistic && message.state === "optimistic" && "optimistic",
+ message.isOptimistic && message.state === "failed" && "failed",
)}
style={{
backgroundColor: shouldHighlightMessage ? rgbaObjectToString(settings?.notifications?.backgroundRgba) : "transparent",
@@ -343,9 +348,9 @@ const Message = ({
{message.type === "system" && (
{message.content === "connection-pending"
- ? "Connecting to Channel..."
+ ? t('messages.connecting')
: message.content === "connection-success"
- ? "Connected to Channel"
+ ? t('messages.connected')
: message.content}
)}
diff --git a/src/renderer/src/components/Messages/MessagesHandler.jsx b/src/renderer/src/components/Messages/MessagesHandler.jsx
index 8ae0d92..0b3bca4 100644
--- a/src/renderer/src/components/Messages/MessagesHandler.jsx
+++ b/src/renderer/src/components/Messages/MessagesHandler.jsx
@@ -1,5 +1,6 @@
import { memo, useMemo, useEffect, useState, useRef, useCallback } from "react";
import { Virtuoso } from "react-virtuoso";
+import { useTranslation } from "react-i18next";
import useChatStore from "../../providers/ChatProvider";
import Message from "./Message";
import MouseScroll from "../../assets/icons/mouse-scroll-fill.svg?asset";
@@ -18,6 +19,7 @@ const MessagesHandler = memo(
userId,
donators,
}) => {
+ const { t } = useTranslation();
const virtuosoRef = useRef(null);
const chatContainerRef = useRef(null);
const [silencedUserIds, setSilencedUserIds] = useState(new Set());
@@ -152,8 +154,8 @@ const MessagesHandler = memo(
{!atBottom && (
diff --git a/src/renderer/src/components/Messages/ModActionMessage.jsx b/src/renderer/src/components/Messages/ModActionMessage.jsx
index fc41b25..fb586ec 100644
--- a/src/renderer/src/components/Messages/ModActionMessage.jsx
+++ b/src/renderer/src/components/Messages/ModActionMessage.jsx
@@ -1,9 +1,11 @@
import { useCallback } from "react";
+import { useTranslation } from "react-i18next";
import { convertMinutesToHumanReadable } from "../../utils/ChatUtils";
import useCosmeticsStore from "../../providers/CosmeticsProvider";
import { useShallow } from "zustand/react/shallow";
const ModActionMessage = ({ message, chatroomId, allStvEmotes, subscriberBadges, chatroomName, userChatroomInfo }) => {
+ const { t } = useTranslation();
const { modAction, modActionDetails } = message;
const getUserStyle = useCosmeticsStore(useShallow((state) => state.getUserStyle));
@@ -51,14 +53,20 @@ const ModActionMessage = ({ message, chatroomId, allStvEmotes, subscriberBadges,
{isBanAction ? (
<>
{" "}
- {modAction === "banned" ? "permanently banned " : "timed out "}
+ {modAction === "banned"
+ ? t('messages.modAction.permanentlyBanned')
+ : t('messages.modAction.timedOut')
+ }{" "}
{" "}
- {modAction === "ban_temporary" && ` for ${convertMinutesToHumanReadable(duration)}`}
+ {modAction === "ban_temporary" && t('messages.modAction.forDuration', { duration: convertMinutesToHumanReadable(duration) })}
) : (
<>
{" "}
- {modAction === "unbanned" ? "unbanned" : "removed timeout on"}{" "}
+ {modAction === "unbanned"
+ ? t('messages.modAction.unbanned')
+ : t('messages.modAction.removedTimeoutOn')
+ }{" "}
)}
diff --git a/src/renderer/src/components/Messages/RegularMessage.jsx b/src/renderer/src/components/Messages/RegularMessage.jsx
index 352b7d0..d482b50 100644
--- a/src/renderer/src/components/Messages/RegularMessage.jsx
+++ b/src/renderer/src/components/Messages/RegularMessage.jsx
@@ -1,10 +1,12 @@
import { memo, useCallback, useMemo } from "react";
+import { useTranslation } from "react-i18next";
import { MessageParser } from "../../utils/MessageParser";
import { KickBadges, KickTalkBadges, StvBadges } from "../Cosmetics/Badges";
import { getTimestampFormat } from "../../utils/ChatUtils";
import CopyIcon from "../../assets/icons/copy-simple-fill.svg?asset";
import ReplyIcon from "../../assets/icons/reply-fill.svg?asset";
import Pin from "../../assets/icons/push-pin-fill.svg?asset";
+import RetryIcon from "../../assets/icons/arrow-clockwise-fill.svg?asset";
import clsx from "clsx";
import ModActions from "./ModActions";
import useChatStore from "../../providers/ChatProvider";
@@ -26,6 +28,7 @@ const RegularMessage = memo(
isSearch = false,
settings,
}) => {
+ const { t } = useTranslation();
const getPinMessage = useChatStore((state) => state.getPinMessage);
const canModerate = useMemo(
@@ -59,6 +62,12 @@ const RegularMessage = memo(
getPinMessage(chatroomId, data);
}, [message?.id, message?.chatroom_id, message?.content, message?.sender, chatroomName, getPinMessage, chatroomId]);
+ const handleRetryMessage = useCallback(() => {
+ if (message.isOptimistic && message.state === "failed" && message.tempId) {
+ useChatStore.getState().retryFailedMessage(chatroomId, message.tempId);
+ }
+ }, [message.isOptimistic, message.state, message.tempId, chatroomId]);
+
const usernameStyle = useMemo(() => {
if (userStyle?.paint) {
return {
@@ -66,7 +75,9 @@ const RegularMessage = memo(
filter: userStyle.paint.shadows,
};
}
- return { color: message.sender.identity?.color };
+ return {
+ color: message.sender.identity?.color || 'var(--text-primary)'
+ };
}, [userStyle?.paint, message.sender.identity?.color]);
const messageContent = useMemo(
@@ -97,7 +108,9 @@ const RegularMessage = memo(
}, [canModerate, settings?.moderation?.quickModTools, message?.deleted, message?.sender?.username, chatroomName, username]);
return (
-
+
+
+
+
+ {t('settings.language')}
+{t('settings.languageDescription')}
+
+
+
- Always on Top
+ {t('settings.general.alwaysOnTop')}
+
+
+ onChange("general", {
+ ...settingsData?.general,
+ compactChatroomsList: checked,
+ })
+ }
+ />
+
+
+ Compact Chatroom List
+
+
+
+
+
+
+
+
+
+ + Display chatroom tabs in a more compact layout to save + space +
+ {
};
const NotificationsSection = ({ settingsData, onChange }) => {
- const [notificationFiles, setNotificationFiles] = useState([]);
const [openColorPicker, setOpenColorPicker] = useState(false);
const handleColorChange = useCallback(
@@ -533,14 +580,9 @@ const NotificationsSection = ({ settingsData, onChange }) => {
const getNotificationFiles = useCallback(async () => {
const files = await window.app.notificationSounds.getAvailable();
- setNotificationFiles(files);
return files;
}, []);
- useEffect(() => {
- getNotificationFiles();
- }, [getNotificationFiles]);
-
return (
+
+ {/* Telemetry Section */}
+
@@ -813,6 +855,47 @@ const NotificationsSection = ({ settingsData, onChange }) => {
+
+
+
+ Telemetry & Analytics
+Control data collection and usage analytics.
+
+
+
+
+
+
+ onChange("telemetry", {
+ ...settingsData?.telemetry,
+ enabled: checked,
+ })
+ }
+ />
+
+
+ Enable Telemetry
+
+
+
+
+
+
+
+
+
+ Allow KickTalk to collect anonymous usage data to help improve the application. This includes app performance metrics, error reports, and feature usage statistics. No personal chat data is collected.
+
-
Moderation
-Customize your moderation experience.
+{t('settings.moderation.title')}
+{t('settings.moderation.description')}
@@ -18,7 +21,7 @@ const ModerationSection = ({ settingsData, onChange }) => {
active: settingsData?.moderation?.quickModTools,
})}>
@@ -259,27 +261,27 @@ const User = () => {
-
@@ -31,8 +35,10 @@ const EmoteUpdateMessage = ({ message }) => {
@@ -41,7 +47,7 @@ const EmoteUpdateMessage = ({ message }) => {
@@ -53,8 +59,10 @@ const EmoteUpdateMessage = ({ message }) => {
- Quick Mod Tools
+ {t('settings.moderation.quickModTools')}
- 
-
+
diff --git a/src/renderer/src/components/Dialogs/Settings/SettingsMenu.jsx b/src/renderer/src/components/Dialogs/Settings/SettingsMenu.jsx
index 5d96ebf..fefc2a2 100644
--- a/src/renderer/src/components/Dialogs/Settings/SettingsMenu.jsx
+++ b/src/renderer/src/components/Dialogs/Settings/SettingsMenu.jsx
@@ -1,8 +1,12 @@
+import { useTranslation } from "react-i18next";
import KickTalkLogo from "../../../assets/logos/KickTalkLogo.svg?asset";
import SignOut from "../../../assets/icons/sign-out-bold.svg?asset";
import clsx from "clsx";
-const SettingsMenu = ({ activeSection, setActiveSection, onLogout }) => (
+const SettingsMenu = ({ activeSection, setActiveSection, onLogout }) => {
+ const { t } = useTranslation();
+
+ return (
Enable quick moderation tools in chat messages
+{t('settings.moderation.quickModToolsDescription')}
@@ -12,34 +16,34 @@ const SettingsMenu = ({ activeSection, setActiveSection, onLogout }) => (
active: activeSection === "info",
})}
onClick={() => setActiveSection("info")}>
- About KickTalk
+ {t('settings.menu.aboutKickTalk')}
-
General
+{t('settings.menu.general')}
-
Chat
+{t('settings.menu.chat')}
{/*
-);
+ );
+};
export default SettingsMenu;
diff --git a/src/renderer/src/components/Dialogs/User.jsx b/src/renderer/src/components/Dialogs/User.jsx
index 6febf5c..3ddc315 100644
--- a/src/renderer/src/components/Dialogs/User.jsx
+++ b/src/renderer/src/components/Dialogs/User.jsx
@@ -1,5 +1,6 @@
import "../../assets/styles/dialogs/UserDialog.scss";
import { useCallback, useEffect, useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
import { userKickTalkBadges } from "../../../../../utils/kickTalkBadges";
import clsx from "clsx";
import Message from "../Messages/Message";
@@ -17,6 +18,7 @@ import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "../Sha
// TODO: Add Slider/Custom Timeout to User Dialog
const User = () => {
+ const { t } = useTranslation();
const [dialogData, setDialogData] = useState(null);
const [userProfile, setUserProfile] = useState(null);
const [userLogs, setUserLogs] = useState([]);
@@ -196,7 +198,7 @@ const User = () => {
-
Following since:
+{t('userDialog.followingSince')}:
{userProfile?.following_since ? new Date(userProfile?.following_since).toLocaleDateString(undefined, { @@ -209,11 +211,11 @@ const User = () => {
-
@@ -230,9 +232,9 @@ const User = () => {
!kickUsername
}
onClick={silenceUser}>
- {isUserSilenced ? "Unmute User" : "Mute User"}
+ {isUserSilenced ? t('userDialog.unmuteUser') : t('userDialog.muteUser')}
Subscribed for
+{t('userDialog.subscribedFor')}
{userProfile?.subscribed_for > 1 || userProfile?.subscribed_for < 1 - ? `${userProfile?.subscribed_for} months` - : `${userProfile?.subscribed_for} month`} + ? t('userDialog.monthsPlural', { count: userProfile?.subscribed_for }) + : t('userDialog.monthsSingular', { count: userProfile?.subscribed_for })} .
- 
+
Unban User
+{t('userDialog.unban')}
{/*
@@ -19,7 +23,7 @@ const EmoteUpdateMessage = ({ message }) => {
@@ -296,7 +298,7 @@ const User = () => {
-
diff --git a/src/renderer/src/components/Messages/EmoteUpdateMessage.jsx b/src/renderer/src/components/Messages/EmoteUpdateMessage.jsx
index de70a12..7374754 100644
--- a/src/renderer/src/components/Messages/EmoteUpdateMessage.jsx
+++ b/src/renderer/src/components/Messages/EmoteUpdateMessage.jsx
@@ -1,6 +1,8 @@
+import { useTranslation } from "react-i18next";
import stvLogo from "../../assets/logos/stvLogo.svg?asset";
const EmoteUpdateMessage = ({ message }) => {
+ const { t } = useTranslation();
return (
<>
{message.data.added?.length > 0 &&
@@ -9,8 +11,10 @@ const EmoteUpdateMessage = ({ message }) => {
Ban User
+{t('userDialog.ban')}
- {message.data.setType === "personal" ? "Personal" : "Channel"}
- Added
+
+ {message.data.setType === "personal" ? t('messages.emoteUpdate.personal') : t('messages.emoteUpdate.channel')}
+
+ {t('messages.emoteUpdate.added')}
{message.data.authoredBy && {message.data.authoredBy?.display_name}}
{e.name}
- Made by: {e.owner?.display_name}
+ {t('messages.emoteUpdate.madeBy', { creator: e.owner?.display_name })}
- {message.data.setType === "personal" ? "Personal" : "Channel"}
- Removed
+
+ {message.data.setType === "personal" ? t('messages.emoteUpdate.personal') : t('messages.emoteUpdate.channel')}
+
+ {t('messages.emoteUpdate.removed')}
{message.data.authoredBy && {message.data.authoredBy?.display_name}}
{e.name}
- Made by: {e.owner?.display_name}
+ {t('messages.emoteUpdate.madeBy', { creator: e.owner?.display_name })}
- {message.data.setType === "personal" ? "Personal" : "Channel"}
- Renamed
+
+ {message.data.setType === "personal" ? t('messages.emoteUpdate.personal') : t('messages.emoteUpdate.channel')}
+
+ {t('messages.emoteUpdate.renamed')}
{message.data.authoredBy && {message.data.authoredBy?.display_name}}
- Scroll To Bottom
- 
+ {t('messages.scrollToBottom')}
+
)}
{settings?.general?.timestampFormat !== "disabled" && {timestamp}}
{shouldShowModActions && 
+ {t('common.add')}
+
)}
diff --git a/src/renderer/src/components/Navbar/MentionsTab.jsx b/src/renderer/src/components/Navbar/MentionsTab.jsx
index 16886b5..d142817 100644
--- a/src/renderer/src/components/Navbar/MentionsTab.jsx
+++ b/src/renderer/src/components/Navbar/MentionsTab.jsx
@@ -1,31 +1,39 @@
import { memo } from "react";
import clsx from "clsx";
import X from "../../assets/icons/x-bold.svg?asset";
+import NotificationIcon from "../../assets/icons/notification-bell.svg?asset";
const MentionsTab = memo(({ currentChatroomId, onSelectChatroom, onRemoveMentionsTab }) => {
- return (
-
{messageContent}
- {canModerate && !message?.deleted && (
-
+ {message.isOptimistic && message.state === "failed" ? (
+ // Show retry and copy buttons for failed messages
+ <>
+
+
+
+ ) : (
+ // Show normal action buttons for successful messages
+ <>
+ {canModerate && !message?.deleted && (
+
+ )}
+
+ {!message?.deleted && (
+
+ )}
+
+
+
)}
-
- {!message?.deleted && (
-
- )}
-
-
);
diff --git a/src/renderer/src/components/Navbar.jsx b/src/renderer/src/components/Navbar.jsx
index 179098f..820382c 100644
--- a/src/renderer/src/components/Navbar.jsx
+++ b/src/renderer/src/components/Navbar.jsx
@@ -1,6 +1,6 @@
import "../assets/styles/components/Navbar.scss";
import clsx from "clsx";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import useChatStore from "../providers/ChatProvider";
import Plus from "../assets/icons/plus-bold.svg?asset";
import X from "../assets/icons/x-bold.svg?asset";
@@ -13,12 +13,16 @@ import ChatroomTab from "./Navbar/ChatroomTab";
import MentionsTab from "./Navbar/MentionsTab";
const Navbar = ({ currentChatroomId, kickId, onSelectChatroom }) => {
+ const { t } = useTranslation();
const { settings } = useSettings();
const addChatroom = useChatStore((state) => state.addChatroom);
const removeChatroom = useChatStore((state) => state.removeChatroom);
const renameChatroom = useChatStore((state) => state.renameChatroom);
const reorderChatrooms = useChatStore((state) => state.reorderChatrooms);
- const orderedChatrooms = useChatStore((state) => state.getOrderedChatrooms());
+ const chatrooms = useChatStore((state) => state.chatrooms);
+ const orderedChatrooms = useMemo(() => {
+ return [...chatrooms].sort((a, b) => (a.order || 0) - (b.order || 0));
+ }, [chatrooms]);
const hasMentionsTab = useChatStore((state) => state.hasMentionsTab);
const addMentionsTab = useChatStore((state) => state.addMentionsTab);
const removeMentionsTab = useChatStore((state) => state.removeMentionsTab);
@@ -196,7 +200,14 @@ const Navbar = ({ currentChatroomId, kickId, onSelectChatroom }) => {
return (
<>
-
+
{(provided) => (
@@ -259,35 +270,35 @@ const Navbar = ({ currentChatroomId, kickId, onSelectChatroom }) => {
-
-
Add Chatroom
-Enter a channel name to add a new chatroom
+{t('navbar.addChatroom')}
+{t('navbar.addChatroomDescription')}
-
Add Mentions Tab
-Add a tab to view all your mentions & highlights in all chats in one place
+{t('navbar.addMentionsTab')}
+{t('navbar.addMentionsDescription')}
onSelectChatroom("mentions")}
- onMouseDown={(e) => {
- if (e.button === 1) {
- onRemoveMentionsTab();
- }
- }}
- className={clsx("chatroomStreamer", currentChatroomId === "mentions" && "chatroomStreamerActive")}>
-
+ );
});
MentionsTab.displayName = "MentionsTab";
diff --git a/src/renderer/src/components/Shared/LanguageSelector.jsx b/src/renderer/src/components/Shared/LanguageSelector.jsx
new file mode 100644
index 0000000..2de9a75
--- /dev/null
+++ b/src/renderer/src/components/Shared/LanguageSelector.jsx
@@ -0,0 +1,75 @@
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useLanguage } from '../../utils/useLanguage';
+import { useSettings } from '../../providers/SettingsProvider';
+import clsx from 'clsx';
+import './LanguageSelector.scss';
+
+const LanguageSelector = ({ className, showFlags = true, compact = false }) => {
+ const { t } = useTranslation();
+ const { changeLanguage, getCurrentLanguage, getAvailableLanguages } = useLanguage();
+ const { updateSettings } = useSettings();
+ const [isOpen, setIsOpen] = useState(false);
+
+ const languages = getAvailableLanguages();
+ const currentLanguage = getCurrentLanguage();
+ const currentLangData = languages.find(lang => lang.code === currentLanguage);
+
+ const handleLanguageChange = async (languageCode) => {
+ try {
+ // Change language using the hook
+ await changeLanguage(languageCode);
+
+ // Also persist in settings store
+ await updateSettings('language', languageCode);
+
+ setIsOpen(false);
+
+ console.log(`Language successfully changed to: ${languageCode}`);
+ } catch (error) {
+ console.error('Error changing language:', error);
+ }
+ };
+
+ return (
+
- Mentions
-
-
+
+
+
+ {isOpen && (
+
+ );
+};
+
+export default LanguageSelector;
diff --git a/src/renderer/src/components/Shared/LanguageSelector.scss b/src/renderer/src/components/Shared/LanguageSelector.scss
new file mode 100644
index 0000000..56e04f3
--- /dev/null
+++ b/src/renderer/src/components/Shared/LanguageSelector.scss
@@ -0,0 +1,178 @@
+.language-selector {
+ position: relative;
+ display: inline-block;
+
+ .language-selector-button {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ padding: 8px 12px;
+ background: var(--bg-input);
+ border: 1px solid var(--border-primary);
+ border-radius: 6px;
+ color: var(--text-primary);
+ cursor: pointer;
+ transition: all 0.2s ease;
+ font-size: 14px;
+ font-family: inherit;
+
+ &:hover {
+ background: var(--bg-hover);
+ border-color: var(--border-hover);
+ }
+
+ &:focus {
+ outline: none;
+ border-color: var(--border-focus);
+ background: var(--input-focus);
+ box-shadow: 0 0 0 1px var(--border-focus);
+ }
+
+ .language-flag {
+ font-size: 16px;
+ line-height: 1;
+ display: flex;
+ align-items: center;
+ }
+
+ .language-name {
+ min-width: 60px;
+ text-align: left;
+ color: var(--text-primary);
+ font-weight: 500;
+ }
+
+ .dropdown-arrow {
+ font-size: 10px;
+ transition: transform 0.2s ease;
+ color: var(--text-tertiary);
+
+ &.rotated {
+ transform: rotate(180deg);
+ }
+ }
+ }
+
+ .language-dropdown {
+ position: absolute;
+ top: 100%;
+ left: 0;
+ right: 0;
+ background: var(--bg-dialog-secondary);
+ border: 1px solid var(--border-dialog);
+ border-radius: 6px;
+ box-shadow: var(--shadow-dialog);
+ z-index: 1000;
+ overflow: hidden;
+ margin-top: 4px;
+ backdrop-filter: blur(10px);
+
+ .language-option {
+ display: flex;
+ align-items: center;
+ gap: 8px;
+ width: 100%;
+ padding: 10px 12px;
+ background: transparent;
+ border: none;
+ color: var(--text-primary);
+ cursor: pointer;
+ transition: all 0.2s ease;
+ font-size: 14px;
+ font-family: inherit;
+
+ &:hover {
+ background: var(--bg-hover);
+ color: var(--text-primary);
+ }
+
+ &.active {
+ background: var(--bg-selected);
+ color: var(--text-primary);
+ font-weight: 600;
+ border-left: 3px solid var(--text-success);
+ }
+
+ .language-flag {
+ font-size: 16px;
+ line-height: 1;
+ display: flex;
+ align-items: center;
+ }
+
+ .language-name {
+ flex: 1;
+ text-align: left;
+ font-weight: 500;
+ }
+
+ .check-mark {
+ color: var(--text-success);
+ font-weight: bold;
+ font-size: 12px;
+ }
+ }
+ }
+
+ &.compact {
+ .language-selector-button {
+ padding: 6px 8px;
+ min-width: auto;
+
+ .language-name {
+ min-width: 30px;
+ font-size: 12px;
+ font-weight: 600;
+ }
+ }
+
+ .language-dropdown {
+ min-width: 120px;
+ }
+ }
+
+ &.open {
+ .language-selector-button {
+ border-color: var(--border-focus);
+ background: var(--input-focus);
+ box-shadow: 0 0 0 1px var(--border-focus);
+ }
+ }
+}
+
+/* Animation and smooth transitions - matching other components */
+.language-dropdown {
+ animation: fadeIn 0.2s ease-out, zoomIn 0.2s ease-out;
+}
+
+@keyframes fadeIn {
+ from {
+ opacity: 0;
+ }
+ to {
+ opacity: 1;
+ }
+}
+
+@keyframes zoomIn {
+ from {
+ opacity: 0;
+ transform: scale(0.95);
+ }
+ to {
+ opacity: 1;
+ transform: scale(1);
+ }
+}
+
+/* Focus and accessibility improvements */
+.language-selector-button:focus-visible {
+ outline: 2px solid var(--border-focus);
+ outline-offset: 2px;
+}
+
+.language-option:focus-visible {
+ outline: 2px solid var(--border-focus);
+ outline-offset: -2px;
+ background: var(--bg-hover);
+}
diff --git a/src/renderer/src/components/TitleBar.jsx b/src/renderer/src/components/TitleBar.jsx
index 0977a74..80adc37 100644
--- a/src/renderer/src/components/TitleBar.jsx
+++ b/src/renderer/src/components/TitleBar.jsx
@@ -1,4 +1,5 @@
import { useState, useEffect, useCallback } from "react";
+import { useTranslation } from "react-i18next";
import Minus from "../assets/icons/minus-bold.svg?asset";
import Square from "../assets/icons/square-bold.svg?asset";
@@ -8,11 +9,13 @@ import GearIcon from "../assets/icons/gear-fill.svg?asset";
import "../assets/styles/components/TitleBar.scss";
import clsx from "clsx";
import Updater from "./Updater";
+import useChatStore from "../providers/ChatProvider";
const TitleBar = () => {
- const [userData, setUserData] = useState(null);
const [settingsModalOpen, setSettingsModalOpen] = useState(false);
const [appInfo, setAppInfo] = useState({});
+ const currentUser = useChatStore((state) => state.currentUser);
+ const cacheCurrentUser = useChatStore((state) => state.cacheCurrentUser);
useEffect(() => {
const getAppInfo = async () => {
@@ -20,24 +23,13 @@ const TitleBar = () => {
setAppInfo(appInfo);
};
- const fetchUserData = async () => {
- try {
- const data = await window.app.kick.getSelfInfo();
- const kickId = localStorage.getItem("kickId");
-
- if (!kickId && data?.id) {
- localStorage.setItem("kickId", data.id);
- }
-
- setUserData(data);
- } catch (error) {
- console.error("[TitleBar]: Failed to fetch user data:", error);
- }
- };
-
getAppInfo();
- fetchUserData();
- }, []);
+
+ // Cache user info if not already cached
+ if (!currentUser) {
+ cacheCurrentUser();
+ }
+ }, [currentUser, cacheCurrentUser]);
const handleAuthBtn = useCallback((e) => {
const cords = [e.clientX, e.clientY];
@@ -52,39 +44,35 @@ const TitleBar = () => {
+ {languages.map((language) => (
+
+ ))}
+
+ )}
+
- {userData?.id ? (
+ {currentUser?.id ? (
) : (
)}
-
- {settingsModalOpen && (
-
No Chatrooms
-Add a chatroom by using "CTRL"+"t" or clicking Add button
+{t('chat.addChatroom')}
- Created by DRKNESS and ftk789 + {t('loader.createdBy')} DRKNESS and ftk789
{appVersion &&v{appVersion}
}