Improve User Profile Page

package.json

@@ -93,7 +93,8 @@
 			"https://*.skinbid.com/*"
 		],
 		"optional_host_permissions": [
-			"*://*.steamcommunity.com/*"
+			"*://*.steamcommunity.com/*",
+			"*://*.steampowered.com/*"
 		],
 		"externally_connectable": {
 			"matches": [

src/background/index.ts

@@ -22,6 +22,9 @@ chrome.runtime.onInstalled.addListener(async (details) => {
 		const thisVersion = chrome.runtime.getManifest().version;
 		console.log('[BetterFloat] Updated from version ' + details.previousVersion + ' to ' + thisVersion + '!');
 
+		// delete user setting
+		// ExtensionStorage.sync.removeItem('user');
+
 		// set default settings
 		await initializeSettings();
 

src/lib/util/steam.ts

@@ -4,7 +4,12 @@ import type { SettingsUser } from './storage';
 export async function getSteamLogin(): Promise<SettingsUser['steam'] | null> {
 	const settingsUser = {} as SettingsUser;
 
-	const steamPage = await fetch('https://steamcommunity.com/');
+	const steamPage = await fetch('https://steamcommunity.com/', {
+		credentials: 'include',
+        headers: {
+            Accept: 'text/html,application/xhtml+xml,application/xml;q=0.9;q=0.8,application/signed-exchange;v=b3;q=0.7',
+        },
+	});
 	const steamPageText = await steamPage.text();
 
 	// get steam user info

src/lib/util/storage.ts

@@ -159,7 +159,7 @@ export const DEFAULT_SETTINGS = {
 	'baron-color-loss': '#ce0000',
 	'baron-color-neutral': '#708090',
 	'display-updatepopup': true,
-	user: { steam: { isLoggedIn: false } } as SettingsUser,
+	user: { steam: { isLoggedIn: false }, plan: { type: 'free' } } as SettingsUser,
 };
 
 export const DEFAULT_FILTER = {
@@ -186,6 +186,11 @@ export type SettingsUser = {
 		avatar_url?: string;
 		display_name?: string;
 	};
+	plan: {
+		type: 'free' | 'pro';
+		expiry?: number;
+		jwt?: string;
+	}
 };
 
 export type IStorage = typeof DEFAULT_SETTINGS;

src/popup/index.tsx

@@ -20,7 +20,7 @@ import { SkinbaronSettings } from '~popup/tabs/Skinbaron';
 import { SkinbidSettings } from '~popup/tabs/Skinbid';
 import { SkinportSettings } from '~popup/tabs/Skinport';
 import Header from './layout/header';
-import { UserProfile } from './tabs/UserProfile';
+import { UserProfile } from './tabs/user/UserProfile';
 import { Tabs, TabsList, TabsTrigger } from './ui/tabs';
 
 export default function IndexPopup() {

src/popup/layout/header.tsx

@@ -5,8 +5,11 @@ import { DISCORD_URL, GITHUB_URL, WEBSITE_URL } from '~lib/util/globals';
 import { IcRoundWarning, MdiGithub, SkillIconsDiscord } from '~popup/components/Icons';
 import { Badge } from '~popup/ui/badge';
 import { Button } from '~popup/ui/button';
+import { useStorage } from '@plasmohq/storage/hook';
+import { DEFAULT_SETTINGS, type IStorage } from '~lib/util/storage';
 
 export default function Header() {
+	const [user] = useStorage<IStorage['user']>('user', DEFAULT_SETTINGS.user);
 	const hostpermissions = chrome.runtime.getManifest().host_permissions as string[];
 
 	const requestPermissions = () => {
@@ -44,6 +47,9 @@ export default function Header() {
 		<header className="w-full flex align-middle justify-between px-4 py-1.5 bg-card text-card-foreground border-b border-muted shadow-sm">
 			<div className="flex gap-2 align-middle items-center">
 				<img className="h-[38px] cursor-pointer" src={betterfloatLogo} onClick={() => window.open(WEBSITE_URL)} />
+				<Badge variant={user.plan.type === 'free' ? 'secondary' : 'default'}>
+					{user.plan.type === 'free' ? 'Free' : 'Pro'}
+				</Badge>
 				<Badge id="version" variant="outline" className="border-muted text-muted-foreground">
 					v. 2.0.0
 				</Badge>

src/popup/tabs/user/UserProfile.tsx

@@ -0,0 +1,21 @@
+import { useStorage } from '@plasmohq/storage/hook';
+import { DEFAULT_SETTINGS, type IStorage } from '~lib/util/storage';
+import { TabTemplate } from '../TabTemplate';
+import { LoggedInView } from './UserProfileLoggedIn';
+import { LoggedOutView } from './UserProfileLoggedOut';
+
+export const UserProfile = () => {
+	const [user, setUser] = useStorage<IStorage['user']>('user', DEFAULT_SETTINGS.user);
+
+	return (
+		<TabTemplate value="user">
+			<div className="flex flex-col items-center justify-center gap-4 pt-4">
+				{user.steam.logged_in ? (
+					<LoggedInView user={user} setUser={setUser} />
+				) : (
+					<LoggedOutView user={user} setUser={setUser}/>
+				)}
+			</div>
+		</TabTemplate>
+	);
+};

src/popup/tabs/user/UserProfileLoggedIn.tsx

@@ -0,0 +1,59 @@
+import type { IStorage } from '~lib/util/storage';
+import { Avatar, AvatarFallback, AvatarImage } from '~popup/ui/avatar';
+import { Button } from '~popup/ui/button';
+import { Card, CardContent } from '~popup/ui/card';
+
+interface LoggedInViewProps {
+	user: IStorage['user'];
+	setUser: (user: IStorage['user']) => void;
+}
+
+export function LoggedInView({ user, setUser }: LoggedInViewProps) {
+	const steamLogout = () => {
+		setUser({ ...user, steam: { logged_in: false } });
+	};
+
+	return (
+		<>
+			<div className="flex flex-col items-center justify-center">
+				<div className="relative mb-2">
+					<div className="absolute inset-0 bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500 rounded-full animate-spin-slow blur-sm" />
+					<div className="relative bg-background rounded-full p-0.5">
+						<Avatar className="size-20">
+							<AvatarImage src={user.steam.avatar_url} />
+							<AvatarFallback>{user.steam.display_name?.slice(0, 2)}</AvatarFallback>
+						</Avatar>
+					</div>
+				</div>
+				<span className="text-lg font-semibold">{user.steam.display_name}</span>
+				<span className="text-sm text-muted-foreground">{user.steam.steamid}</span>
+			</div>
+
+			<Card className="shadow-md border-muted mx-1 w-full">
+				<CardContent className="space-y-3 flex flex-col justify-center">
+					{/* Display details about current plan / payment details */}
+					<p className="text-base font-semibold leading-none tracking-tight uppercase">Current plan</p>
+
+					<div className="flex justify-between items-center gap-2">
+						{user.plan.type === 'free' ? (
+							<span className="text-lg font-semibold text-center">Free</span>
+						) : (
+							<span className="font-semibold text-lg bg-clip-text text-transparent bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500">Pro</span>
+						)}
+						<Button variant="secondary" asChild>
+							<a href="https://betterfloat.com/pricing" target="_blank" rel="noreferrer">
+								{user.plan.type === 'free' ? 'Upgrade' : 'Manage'}
+							</a>
+						</Button>
+					</div>
+				</CardContent>
+			</Card>
+
+			<div className="flex justify-center mt-4">
+				<Button variant="destructive" onClick={steamLogout}>
+					Logout
+				</Button>
+			</div>
+		</>
+	);
+}