linkfeed-pro 1.0.7

package/entrypoints/popup/modules/settings.ts

@@ -0,0 +1,78 @@
+import { settingsStorage, type Settings } from '../../../lib/storage';
+
+export async function loadSettings() {
+    const settings = await settingsStorage.getValue();
+    const hideSidebars = settings.hideSidebars ?? (settings as Settings & { removeSidebars?: boolean }).removeSidebars ?? true;
+
+    // Update UI
+    setCheckboxState('globalEnabled', settings.globalEnabled);
+    setCheckboxState('hideSidebars', hideSidebars);
+    setCheckboxState('hidePromoted', settings.hidePromoted ?? false);
+    setSliderState('feedWidth', settings.feedWidth);
+    setSliderState('feedSpacing', settings.feedSpacing ?? 24);
+    setCheckboxState('autoExpandPosts', settings.autoExpandPosts);
+    setCheckboxState('hideRemovedFeedCards', settings.hideRemovedFeedCards ?? true);
+    setCheckboxState('hideStartPost', settings.hideStartPost);
+    setCheckboxState('hideMessenger', settings.hideMessenger);
+    setCheckboxState('hideNavBar', settings.hideNavBar);
+    setSliderState('fontSize', settings.fontSize);
+
+    updateSettingsContainerState(settings.globalEnabled);
+}
+
+export function setCheckboxState(id: string, checked: boolean) {
+    const checkbox = document.getElementById(id) as HTMLInputElement;
+    if (checkbox) checkbox.checked = checked;
+}
+
+export function setSliderState(id: string, value: number) {
+    const slider = document.getElementById(id) as HTMLInputElement;
+    if (slider) {
+        slider.value = String(value);
+        updateSliderDisplay(id, value);
+    }
+}
+
+export function updateSliderDisplay(id: string, value: number) {
+    const label = document.getElementById(`${id}-value`);
+    if (label) {
+        label.textContent = `${value}px`;
+    }
+}
+
+export async function handleSettingChange() {
+    const globalEnabled = getCheckboxChecked('globalEnabled');
+
+    const settings: Settings = {
+        globalEnabled,
+        hideSidebars: getCheckboxChecked('hideSidebars'),
+        hidePromoted: getCheckboxChecked('hidePromoted'),
+        feedWidth: Number((document.getElementById('feedWidth') as HTMLInputElement).value),
+        feedSpacing: Number((document.getElementById('feedSpacing') as HTMLInputElement).value),
+        autoExpandPosts: getCheckboxChecked('autoExpandPosts'),
+        hideRemovedFeedCards: getCheckboxChecked('hideRemovedFeedCards'),
+        hideStartPost: getCheckboxChecked('hideStartPost'),
+        hideMessenger: getCheckboxChecked('hideMessenger'),
+        hideNavBar: getCheckboxChecked('hideNavBar'),
+        fontSize: Number((document.getElementById('fontSize') as HTMLInputElement).value),
+    };
+
+    await settingsStorage.setValue(settings);
+    updateSettingsContainerState(globalEnabled);
+}
+
+export function updateSettingsContainerState(enabled: boolean) {
+    const containers = document.querySelectorAll<HTMLElement>('.feature-container');
+    containers.forEach((container) => {
+        if (enabled) {
+            container.classList.remove('disabled');
+        } else {
+            container.classList.add('disabled');
+        }
+    });
+}
+
+export function getCheckboxChecked(id: string): boolean {
+    const checkbox = document.getElementById(id) as HTMLInputElement;
+    return checkbox ? checkbox.checked : false;
+}

package/entrypoints/popup/modules/ui-state.ts

@@ -0,0 +1,95 @@
+import { userEmailStorage } from '../../../lib/storage';
+import { APP_URLS } from '../../../lib/constants';
+import { t } from '../../../lib/i18n';
+import type { LicenseState } from '@linkfeed/shared';
+
+export type LicenseUIState = 'free' | 'trial' | 'pro' | 'expired';
+
+export function getLicenseUIState(state: LicenseState): LicenseUIState {
+    if (state.status === 'active') return 'pro';
+    if (state.status === 'trial-active') return 'trial';
+    if (state.status === 'trial-expired') return 'expired';
+    return 'free';
+}
+
+export function updateUIForLicenseState(state: LicenseState) {
+    const uiState = getLicenseUIState(state);
+    const badge = document.getElementById('status-badge');
+    const premiumFeatures = document.querySelectorAll('.premium-feature');
+
+    premiumFeatures.forEach((el) => {
+        const proBadge = el.querySelector('.pro-badge');
+        if (proBadge) proBadge.classList.remove('hidden');
+    });
+
+    // Update badge
+    if (badge) {
+        badge.className = `status-badge ${uiState}`;
+
+        switch (uiState) {
+            case 'pro':
+                badge.textContent = t('statusPro');
+                userEmailStorage.getValue().then((email) => {
+                    badge.setAttribute('data-title', t('licensedTo', email || t('genericYou')));
+                });
+                break;
+            case 'trial':
+                badge.textContent = t('statusTrial');
+                if (state.expiresAt) {
+                    badge.setAttribute('data-title', t('trialExpiresIn', formatDuration(state.expiresAt)));
+                }
+                break;
+            case 'expired':
+                badge.textContent = t('statusFree');
+                badge.className = 'status-badge free';
+                badge.setAttribute('data-title', t('trialExpiredBadge'));
+                break;
+            default:
+                badge.textContent = t('statusFree');
+                badge.setAttribute('data-title', t('upgradeToPremium'));
+        }
+    }
+
+    // Show appropriate UI based on state
+    if (uiState === 'trial') {
+        // Enable premium features
+        premiumFeatures.forEach(el => el.classList.remove('locked'));
+    } else if (uiState === 'pro') {
+        // Enable premium features, hide PRO badges
+        premiumFeatures.forEach(el => {
+            el.classList.remove('locked');
+            const badge = el.querySelector('.pro-badge');
+            if (badge) badge.classList.add('hidden');
+        });
+    } else if (uiState === 'expired') {
+        // Expired state - lock premiums but show "Free" badge (conceptually free tier now)
+        premiumFeatures.forEach(el => el.classList.add('locked'));
+    } else {
+        // Free state - lock premium features
+        premiumFeatures.forEach(el => el.classList.add('locked'));
+    }
+}
+
+export function formatDuration(expiresAt: string): string {
+    const now = new Date();
+    const end = new Date(expiresAt);
+    const diff = end.getTime() - now.getTime();
+
+    if (diff <= 0) return t('expiredShort');
+
+    const days = Math.floor(diff / (1000 * 60 * 60 * 24));
+    const hours = Math.floor((diff % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
+
+    if (days > 0) {
+        const dayLabel = t(days === 1 ? 'unitDay' : 'unitDays');
+        if (hours > 0) {
+            const hourLabel = t(hours === 1 ? 'unitHour' : 'unitHours');
+            return `${days} ${dayLabel} ${hours} ${hourLabel}`;
+        }
+        return `${days} ${dayLabel}`;
+    }
+
+    const safeHours = Math.max(hours, 1);
+    const hourLabel = t(safeHours === 1 ? 'unitHour' : 'unitHours');
+    return `${safeHours} ${hourLabel}`;
+}