Skip to content

Commit

Permalink
Update
Browse files Browse the repository at this point in the history
  • Loading branch information
MrQuackDuck committed Dec 16, 2024
1 parent a53292f commit 4f91054
Show file tree
Hide file tree
Showing 8 changed files with 359 additions and 300 deletions.
2 changes: 1 addition & 1 deletion 404.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
<html>
<head>
<meta charset="utf-8">
<title>Single Page Apps for GitHub Pages</title>
<title>Colir</title>
<script type="text/javascript">
// Single Page Apps for GitHub Pages
// MIT License
Expand Down
48 changes: 48 additions & 0 deletions src/entities/Message/ui/EditArea.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
import "moment/min/locales";
import { Button } from "@/shared/ui/Button";
import { CheckIcon, PencilOffIcon } from "lucide-react";
import { AutosizeTextarea } from "@/shared/ui/AutosizeTextarea";
import React from "react";
import { useTranslation } from "@/shared/lib/hooks/useTranslation";
import { EmojiPicker } from "@/shared/ui/EmojiPicker";

interface EditAreaProps {
textAreaRef: React.MutableRefObject<any>;
handleEditInputKeyDown: (e: React.KeyboardEvent<HTMLTextAreaElement>) => void;
setEditedContent: React.Dispatch<React.SetStateAction<string>>;
editedContent: string;
onEditModeDisabled: () => void;
onFinishedEditing: () => void;
}

function EditArea({ textAreaRef, handleEditInputKeyDown, setEditedContent, editedContent, onEditModeDisabled, onFinishedEditing }: EditAreaProps) {
const t = useTranslation();

function handleEmojiPicked(emoji: string) {
setEditedContent((prev) => prev + emoji);
}

return (
<div className="flex flex-row gap-1">
<AutosizeTextarea
ref={textAreaRef}
onKeyDown={handleEditInputKeyDown}
onChange={(e) => setEditedContent(e.target.value)}
value={editedContent}
autoFocus
placeholder={t("EDIT_MESSAGE")}
className="flex items-center w-full rounded-md border border-input bg-background py-2.5 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 h-11 resize-none
ring-0 focus-visible:ring-0 focus-visible:ring-offset-0"
/>
<Button onClick={onEditModeDisabled} className="shrink-0 w-9 h-10" variant={"outline"} size={"icon"}>
<PencilOffIcon className="text-primary/80 h-4 w-4" />
</Button>
<EmojiPicker className="shrink-0 w-9 h-10" asButton onChange={handleEmojiPicked} />
<Button onClick={onFinishedEditing} className="shrink-0 w-9 h-10" variant={"outline"} size={"icon"}>
<CheckIcon className="text-primary/80 h-4 w-4" />
</Button>
</div>
);
}

export default EditArea;
32 changes: 11 additions & 21 deletions src/entities/Message/ui/Message.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,10 +5,9 @@ import { Tooltip, TooltipContent, TooltipTrigger } from "@/shared/ui/Tooltip";
import Moment from "moment/min/moment-with-locales";
import "moment/min/locales";
import { Button } from "@/shared/ui/Button";
import { CheckIcon, CodeIcon, CopyIcon, CornerUpRightIcon, PencilIcon, PencilOffIcon, ReplyIcon, SkullIcon, Trash2Icon } from "lucide-react";
import { CodeIcon, CopyIcon, CornerUpRightIcon, PencilIcon, ReplyIcon, SkullIcon, Trash2Icon } from "lucide-react";
import classes from "./Message.module.css";
import { forwardRef, useEffect, useRef, useState } from "react";
import { AutosizeTextarea } from "@/shared/ui/AutosizeTextarea";
import { ContextMenu, ContextMenuContent, ContextMenuItem, ContextMenuTrigger } from "@/shared/ui/ContextMenu";
import ReactionBar from "@/entities/Reaction/ui/ReactionBar";
import { EmojiPicker } from "@/shared/ui/EmojiPicker";
Expand All @@ -19,11 +18,12 @@ import DeleteConfirmationDialog from "./DeleteConfirmationDialog";
import React from "react";
import { CurrentUserContext } from "@/entities/User/lib/providers/CurrentUserProvider";
import { useContextSelector } from "use-context-selector";
import { cn, decryptString, encryptString } from "@/shared/lib/utils";
import { cn, decryptString, encryptString, replaceEmojis } from "@/shared/lib/utils";
import { useTranslation } from "@/shared/lib/hooks/useTranslation";
import { LanguageSettingsContext } from "@/shared/lib/providers/LanguageSettingsProvider";
import { useInfoToast } from "@/shared/lib/hooks/useInfoToast";
import { useTheme } from "@/shared/lib/providers/ThemeProvider";
import EditArea from "./EditArea";

interface MessageProps {
message: MessageModel;
Expand Down Expand Up @@ -140,7 +140,7 @@ const Message = forwardRef(

function finishEditing() {
if (editedContent?.length < 0) return;
if (editedContent != message.content) onMessageEdited(message.id, encryptString(editedContent, decryptionKey));
if (editedContent != message.content) onMessageEdited(message.id, encryptString(replaceEmojis(editedContent), decryptionKey));
disableEditMode();
}

Expand Down Expand Up @@ -314,24 +314,14 @@ const Message = forwardRef(
</span>
)}
{isEditMode && (
<div className="flex flex-row gap-1">
<AutosizeTextarea
ref={textAreaRef}
onKeyDown={handleEditInputKeyDown}
onChange={(e) => setEditedContent(e.target.value)}
value={editedContent}
autoFocus
placeholder={t("EDIT_MESSAGE")}
className="flex items-center w-full rounded-md border border-input bg-background py-2.5 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 h-11 resize-none
ring-0 focus-visible:ring-0 focus-visible:ring-offset-0"
<EditArea
textAreaRef={textAreaRef}
handleEditInputKeyDown={handleEditInputKeyDown}
setEditedContent={setEditedContent}
editedContent={editedContent}
onEditModeDisabled={disableEditMode}
onFinishedEditing={finishEditing}
/>
<Button onClick={disableEditMode} className="w-10 h-10" variant={"outline"} size={"icon"}>
<PencilOffIcon className="text-primary/80 h-4 w-4" />
</Button>
<Button onClick={finishEditing} className="w-10 h-10" variant={"outline"} size={"icon"}>
<CheckIcon className="text-primary/80 h-4 w-4" />
</Button>
</div>
)}

{message.attachments.length > 0 && <AttachmentsSection decryptionKey={decryptionKey} attachments={message.attachments} />}
Expand Down
9 changes: 6 additions & 3 deletions src/features/send-message/ui/ChatInput.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import { Loader2, PaperclipIcon, PlugZapIcon, SendIcon } from "lucide-react";
import { useEffect, useRef } from "react";
import React from "react";
import { EmojiPicker } from "@/shared/ui/EmojiPicker";
import { cn, encryptFile, encryptString } from "@/shared/lib/utils";
import { cn, encryptFile, encryptString, replaceEmojis } from "@/shared/lib/utils";
import { MessageModel } from "@/entities/Message/model/MessageModel";
import ReplySection from "./ReplySection";
import { UserModel } from "@/entities/User/model/UserModel";
Expand Down Expand Up @@ -95,13 +95,16 @@ function ChatInput({ onSend, messageToReply, messageToReplyAuthor, className, en
async function sendMessage() {
if (textAreaRef.current.textArea.disabled) return;
// Check if the message is empty and there are no files attached
if (textAreaRef.current.textArea.value.trim() === "" && files.length === 0) return;
let text = textAreaRef.current.textArea.value;
if (text.trim() === "" && files.length === 0) return;

text = replaceEmojis(text);

setIsSending(true);
const encryptedFiles = files.length > 0 ? await Promise.all([...files].map((file) => encryptFile(file, encryptionKey))) : [];

onSend({
content: encryptString(textAreaRef.current.textArea.value, encryptionKey) ?? "",
content: encryptString(text, encryptionKey) ?? "",
attachments: encryptedFiles,
replyMessageId: messageToReply?.id
})
Expand Down
12 changes: 6 additions & 6 deletions src/pages/settings/ui/SettingsTabs.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -20,23 +20,23 @@ function SettingsTabs({ className, selectedTab, setSelectedTab }: SettingsTabsPr
<div className={className}>
<HeaderTab>{t("SETTINGS")}</HeaderTab>
<Tab className="w-full" isSelected={selectedTab == SettingsTabsEnum.Account} onClick={() => setSelectedTab(SettingsTabsEnum.Account)}>
<UserIcon className="text-popover-foreground mr-1.5 h-4 w-4" strokeWidth={2.5} /> {t("ACCOUNT")}
<UserIcon className="shrink-0 text-popover-foreground mr-1.5 h-4 w-4" strokeWidth={2.5} /> {t("ACCOUNT")}
</Tab>
<Tab className="w-full" isSelected={selectedTab == SettingsTabsEnum.VoiceSettings} onClick={() => setSelectedTab(SettingsTabsEnum.VoiceSettings)}>
<Volume2Icon className="text-popover-foreground mr-1.5 h-4 w-4" strokeWidth={2.5} /> {t("VOICE_SETTINGS")}
<Volume2Icon className="shrink-0 text-popover-foreground mr-1.5 h-4 w-4" strokeWidth={2.5} /> {t("VOICE_SETTINGS")}
</Tab>
<Tab className="w-full" isSelected={selectedTab == SettingsTabsEnum.Notifications} onClick={() => setSelectedTab(SettingsTabsEnum.Notifications)}>
<MegaphoneIcon className="text-popover-foreground mr-1.5 h-4 w-4" strokeWidth={2.5} /> {t("NOTIFICATIONS_AND_SOUNDS")}
<MegaphoneIcon className="shrink-0 text-popover-foreground mr-1.5 h-4 w-4" strokeWidth={2.5} /> {t("NOTIFICATIONS_AND_SOUNDS")}
</Tab>
<Tab className="w-full" isSelected={selectedTab == SettingsTabsEnum.Statistics} onClick={() => setSelectedTab(SettingsTabsEnum.Statistics)}>
<BarChart3Icon className="text-popover-foreground mr-1.5 h-4 w-4" strokeWidth={2.5} /> {t("STATISTICS")}
<BarChart3Icon className="shrink-0 text-popover-foreground mr-1.5 h-4 w-4" strokeWidth={2.5} /> {t("STATISTICS")}
</Tab>
<Tab className="w-full" isSelected={selectedTab == SettingsTabsEnum.Language} onClick={() => setSelectedTab(SettingsTabsEnum.Language)}>
<GlobeIcon className="text-popover-foreground mr-1.5 h-4 w-4" strokeWidth={2.5} /> {t("LANGUAGE")}
<GlobeIcon className="shrink-0 text-popover-foreground mr-1.5 h-4 w-4" strokeWidth={2.5} /> {t("LANGUAGE")}
</Tab>
<Separator orientation="horizontal" />
<Tab className="w-full" isSelected={selectedTab == SettingsTabsEnum.ImportExport} onClick={() => setSelectedTab(SettingsTabsEnum.ImportExport)}>
<ImportIcon className="text-popover-foreground mr-1.5 h-4 w-4" strokeWidth={2.5} /> {t("IMPORT_EXPORT_SETTINGS")}
<ImportIcon className="shrink-0 text-popover-foreground mr-1.5 h-4 w-4" strokeWidth={2.5} /> {t("IMPORT_EXPORT_SETTINGS")}
</Tab>
</div>
</ScrollArea>
Expand Down
Loading

0 comments on commit 4f91054

Please sign in to comment.