feat: fix interaction and improve Design for extension (#679)01-17-feat_fix_interaction_and_improve_design_for_extension

### TL;DR

Redesigned the browser extension UI with a dark theme and improved the Twitter bookmarks import experience with a new onboarding flow.

### What changed?

- Added a new `RightArrow` icon component for UI navigation
- Completely redesigned the popup UI with a dark theme and improved layout
- Enhanced Twitter bookmarks import functionality:
  - Added an onboarding toast that appears the first time a user visits the bookmarks page
  - Implemented a persistent import intent system that automatically opens the import modal when navigating to the bookmarks page
  - Created a progress toast to show import status
  - Improved folder import UI
- Updated the extension icon and added a new logo SVG
- Improved the project selection modal with better styling

3 files changed, 21 insertions, 8 deletions

diff --git a/apps/browser-extension/utils/api.ts b/apps/browser-extension/utils/api.ts
index b002aff7..1a22af04 100644
--- a/apps/browser-extension/utils/api.ts
+++ b/apps/browser-extension/utils/api.ts
@@ -114,7 +114,7 @@ export async function validateAuthToken(): Promise<boolean> {
 /**
  * Get user data from storage
  */
-export async function getUserData(): Promise<{ email?: string } | null> {
+export async function getUserData(): Promise<{ email?: string; name?: string } | null> {
 	try {
 		return (await userData.getValue()) || null
 	} catch (error) {
diff --git a/apps/browser-extension/utils/constants.ts b/apps/browser-extension/utils/constants.ts
index 14552865..5d61ffdf 100644
--- a/apps/browser-extension/utils/constants.ts
+++ b/apps/browser-extension/utils/constants.ts
@@ -15,6 +15,8 @@ export const API_ENDPOINTS = {
  */
 export const ELEMENT_IDS = {
 	TWITTER_IMPORT_BUTTON: "sm-twitter-import-button",
+	TWITTER_ONBOARDING_TOAST: "sm-twitter-onboarding-toast",
+	TWITTER_IMPORT_PROGRESS_TOAST: "sm-twitter-import-progress-toast",
 	SUPERMEMORY_TOAST: "sm-toast",
 	SUPERMEMORY_SAVE_BUTTON: "sm-save-button",
 	SAVE_TWEET_ELEMENT: "sm-save-tweet-element",
@@ -27,11 +29,21 @@ export const ELEMENT_IDS = {
 } as const
 
 /**
+ * Storage Keys for local
+ */
+export const STORAGE_KEYS = {
+	TWITTER_BOOKMARKS_ONBOARDING_SEEN: "sm_twitter_bookmarks_onboarding_seen",
+	TWITTER_BOOKMARKS_IMPORT_INTENT_UNTIL: "sm_twitter_bookmarks_import_intent_until",
+} as const
+
+/**
  * UI Configuration
  */
 export const UI_CONFIG = {
 	BUTTON_SHOW_DELAY: 2000, // milliseconds
 	TOAST_DURATION: 3000, // milliseconds
+	ONBOARDING_TOAST_DURATION: 6000, // milliseconds (6 seconds for progress bar)
+	IMPORT_INTENT_TTL: 2 * 60 * 1000, // 2 minutes TTL for import intent
 	RATE_LIMIT_BASE_WAIT: 60000, // 1 minute
 	PAGINATION_DELAY: 1000, // 1 second between requests
 	AUTO_SEARCH_DEBOUNCE_DELAY: 1500, // milliseconds to wait after user stops typing
@@ -75,6 +87,7 @@ export const MESSAGE_TYPES = {
 	FETCH_PROJECTS: "sm-fetch-projects",
 	SEARCH_SELECTION: "sm-search-selection",
 	OPEN_SEARCH_PANEL: "sm-open-search-panel",
+	TWITTER_IMPORT_OPEN_MODAL: "sm-twitter-import-open-modal",
 } as const
 
 export const CONTEXT_MENU_IDS = {
diff --git a/apps/browser-extension/utils/ui-components.ts b/apps/browser-extension/utils/ui-components.ts
index 3654f6f7..99f96cbb 100644
--- a/apps/browser-extension/utils/ui-components.ts
+++ b/apps/browser-extension/utils/ui-components.ts
@@ -545,10 +545,10 @@ export function createProjectSelectionModal(
 	importButton.textContent = "Import"
 	importButton.style.cssText = `
 		padding: 10px 16px;
-		border: none;
+		border: 1px solid rgba(255, 255, 255, 0.1);
 		border-radius: 12px;
-		background: #d1d5db;
-		color: #9ca3af;
+		background: rgba(255, 255, 255, 0.05);
+		color: rgba(255, 255, 255, 0.3);
 		font-size: 14px;
 		font-weight: 500;
 		cursor: not-allowed;
@@ -577,10 +577,10 @@ export function createProjectSelectionModal(
 			importButton.disabled = true
 			importButton.style.cssText = `
 				padding: 10px 16px;
-				border: none;
-				border-radius: 8px;
-				background: #d1d5db;
-				color: #9ca3af;
+				border: 1px solid rgba(255, 255, 255, 0.1);
+				border-radius: 12px;
+				background: rgba(255, 255, 255, 0.05);
+				color: rgba(255, 255, 255, 0.3);
 				font-size: 14px;
 				font-weight: 500;
 				cursor: not-allowed;