Skip to content

Add auto-username detection, reactions, settings modal, Instagram iframe embeds, lazy loading, and performance optimization #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Copilot wants to merge 16 commits into
base: main
Choose a base branch
from
Open

Add auto-username detection, reactions, settings modal, Instagram iframe embeds, lazy loading, and performance optimization #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
22d7a72
Initial plan
Copilot Dec 9, 2025
8299e9b
Fix sidebar visibility to show with single chat
Copilot Dec 9, 2025
f2a3c35
Improve comment clarity for back button logic
Copilot Dec 9, 2025
fd84a2f
Fix: Handle inbox folder uploads correctly to detect all chats
Copilot Dec 9, 2025
f4cbe0a
Implement auto-username, reactions, settings modal, and Instagram lin…
Copilot Dec 9, 2025
530241a
Add error handling for media loading failures
Copilot Dec 9, 2025
f47239e
Fix username matching to use exact equality and improve error handling
Copilot Dec 9, 2025
6a39d00
Implement Instagram iframe embeds, improve search, remove media borde…
Copilot Dec 9, 2025
05900f4
Add security sandbox to iframe and improve bounds checking
Copilot Dec 9, 2025
76ace51
Improve reaction detection, remove embed borders, enhance styling
Copilot Dec 9, 2025
763d225
Simplify emoji regex pattern for better performance and maintainability
Copilot Dec 9, 2025
1a1c450
Remove "Click for Audio/Video" text from messages and media alt text
Copilot Dec 9, 2025
6895d13
Refactor: Extract CLICK_FOR_PATTERN constant for better maintainability
Copilot Dec 9, 2025
5cbe6c1
Remove all styling bubbles from Instagram reel/post embeds
Copilot Dec 9, 2025
6f419eb
Implement lazy loading for chats to optimize memory usage
Copilot Dec 14, 2025
d6233f3
Refactor: Extract message ownership helper and improve memory cleanup
Copilot Dec 14, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
321 changes: 307 additions & 14 deletions src/App.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -399,10 +399,10 @@ body, html {

.media-box {
position: relative;
background: rgba(255, 255, 255, 0.05);
background: transparent;
border-radius: 12px;
padding: 8px;
border: 1px solid rgba(255, 255, 255, 0.1);
padding: 0;
border: none;
}

.image-box {
Expand All @@ -415,7 +415,7 @@ body, html {
}

.video-box, .audio-box {
background: rgba(0, 0, 0, 0.3);
background: transparent;
}

.media-image {
Expand All @@ -439,29 +439,32 @@ body, html {

.video-controls {
display: flex;
gap: 6px;
margin-top: 8px;
gap: 4px;
margin-top: 4px;
flex-wrap: wrap;
align-items: center;
background: rgba(0, 0, 0, 0.7);
padding: 6px;
border-radius: 8px;
}

.speed-btn, .fullscreen-btn {
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
background: rgba(255, 255, 255, 0.15);
border: none;
color: white;
padding: 4px 10px;
border-radius: 6px;
padding: 6px 12px;
border-radius: 4px;
cursor: pointer;
font-size: 12px;
font-size: 11px;
font-weight: 500;
transition: all 0.2s ease;
display: flex;
align-items: center;
justify-content: center;
}

.speed-btn:hover, .fullscreen-btn:hover {
background: rgba(255, 255, 255, 0.2);
border-color: rgba(255, 255, 255, 0.3);
background: rgba(255, 255, 255, 0.25);
}

.fullscreen-btn {
Expand Down Expand Up @@ -566,4 +569,294 @@ body, html {
color: white;
border: none;
padding: 5px;
}
border-radius: 4px;
}

/* Reaction Bubbles */
.message-reactions {
display: flex;
gap: 2px;
margin-top: 2px;
margin-left: 4px;
flex-wrap: wrap;
position: relative;
bottom: -2px;
}

.reaction-bubble {
background: rgba(255, 255, 255, 0.15);
border: 1px solid rgba(255, 255, 255, 0.25);
border-radius: 10px;
padding: 1px 6px;
font-size: 12px;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 20px;
height: 18px;
}

/* Instagram Link Embed */
.instagram-embed {
margin: 0;
padding: 0;
background: transparent;
border: none;
}

.instagram-link {
text-decoration: none;
color: inherit;
display: block;
border: none;
outline: none;
background: transparent;
padding: 0;
margin: 0;
}

.instagram-link:hover,
.instagram-link:focus,
.instagram-link:active {
text-decoration: none;
border: none;
outline: none;
background: transparent;
}

.instagram-iframe {
width: 326px;
height: 400px;
border: none;
border-radius: 0;
overflow: hidden;
background: transparent;
display: block;
padding: 0;
margin: 0;
}

/* Settings Modal */
.settings-modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.8);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
}

.settings-content {
background: var(--ig-bg-primary);
border: 1px solid var(--ig-border);
border-radius: 12px;
width: 90%;
max-width: 600px;
max-height: 80vh;
overflow-y: auto;
}

.settings-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 20px;
border-bottom: 1px solid var(--ig-border);
}

.settings-header h2 {
margin: 0;
font-size: 24px;
}

.settings-body {
padding: 20px;
}

.setting-item {
margin-bottom: 24px;
}

.setting-item label {
display: block;
margin-bottom: 8px;
font-weight: 600;
font-size: 14px;
color: var(--ig-text-primary);
}

.setting-item select,
.setting-item input {
width: 100%;
padding: 10px;
background: var(--ig-bg-secondary);
color: var(--ig-text-primary);
border: 1px solid var(--ig-border);
border-radius: 8px;
font-size: 14px;
}

.theme-toggle {
display: flex;
gap: 8px;
}

.theme-toggle button {
flex: 1;
padding: 10px;
background: var(--ig-bg-secondary);
color: var(--ig-text-primary);
border: 1px solid var(--ig-border);
border-radius: 8px;
cursor: pointer;
font-size: 14px;
transition: all 0.2s;
}

.theme-toggle button.active {
background: var(--ig-bubble-mine);
border-color: var(--ig-bubble-mine);
}

.theme-toggle button:hover {
background: var(--ig-bg-secondary);
opacity: 0.8;
}

.search-container {
display: flex;
gap: 8px;
}

.search-container input {
flex: 1;
}

.search-container button {
padding: 10px 16px;
background: var(--ig-bubble-mine);
color: white;
border: none;
border-radius: 8px;
cursor: pointer;
font-size: 14px;
display: flex;
align-items: center;
gap: 6px;
transition: opacity 0.2s;
}

.search-container button:hover {
opacity: 0.8;
}

.search-results {
margin-top: 16px;
max-height: 300px;
overflow-y: auto;
border: 1px solid var(--ig-border);
border-radius: 8px;
}

.search-result-chat {
border-bottom: 1px solid var(--ig-border);
padding: 12px;
}

.search-result-chat:last-child {
border-bottom: none;
}

.search-result-header {
cursor: pointer;
padding: 8px;
border-radius: 6px;
margin-bottom: 8px;
transition: background 0.2s;
}

.search-result-header:hover {
background: var(--ig-bg-secondary);
}

.search-result-messages {
padding-left: 12px;
}

.search-result-message {
padding: 6px;
font-size: 13px;
color: var(--ig-text-secondary);
border-left: 2px solid var(--ig-border);
margin: 4px 0;
padding-left: 8px;
cursor: pointer;
transition: background 0.2s;
border-radius: 4px;
}

.search-result-message:hover {
background: var(--ig-bg-secondary);
}

.search-result-message .sender {
color: var(--ig-bubble-mine);
font-weight: 600;
}

/* Highlight animation for jumped-to message */
.highlight-message {
animation: highlightPulse 2s ease-in-out;
}

@keyframes highlightPulse {
0%, 100% {
background: transparent;
}
50% {
background: rgba(55, 151, 240, 0.3);
}
}

.search-result-more {
padding: 6px 8px;
font-size: 12px;
color: var(--ig-text-secondary);
font-style: italic;
}

.upload-new-btn {
width: 100%;
padding: 12px;
background: var(--ig-bubble-mine);
color: white;
border: none;
border-radius: 8px;
cursor: pointer;
font-size: 14px;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
transition: opacity 0.2s;
}

.upload-new-btn:hover {
opacity: 0.8;
}

/* Light Theme */
body.light-theme {
--ig-bg-primary: #FFFFFF;
--ig-bg-secondary: #F0F0F0;
--ig-text-primary: #000000;
--ig-text-secondary: #737373;
--ig-bubble-mine: #3797F0;
--ig-bubble-theirs: #EFEFEF;
--ig-border: #DBDBDB;
}
Loading