@shellui/core 0.0.4

package/src/features/settings/components/LanguageAndRegion.tsx

@@ -0,0 +1,329 @@
+import { useTranslation } from 'react-i18next';
+import { useSettings } from '../hooks/useSettings';
+import { useConfig } from '@/features/config/useConfig';
+import { getSupportedLanguages } from '@/i18n/config';
+import { Button } from '@/components/ui/button';
+import { ButtonGroup } from '@/components/ui/button-group';
+import { Select } from '@/components/ui/select';
+import { cn } from '@/lib/utils';
+import { useState, useEffect } from 'react';
+
+const GlobeIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="16"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <circle
+      cx="12"
+      cy="12"
+      r="10"
+    />
+    <line
+      x1="2"
+      x2="22"
+      y1="12"
+      y2="12"
+    />
+    <path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" />
+  </svg>
+);
+
+const ClockIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="16"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+  >
+    <circle
+      cx="12"
+      cy="12"
+      r="10"
+    />
+    <polyline points="12 6 12 12 16 14" />
+  </svg>
+);
+
+// Timezones organized by region
+const TIMEZONE_GROUPS = [
+  {
+    label: 'UTC',
+    timezones: [{ value: 'UTC', label: 'UTC (Coordinated Universal Time)' }],
+  },
+  {
+    label: 'North America',
+    timezones: [
+      { value: 'America/New_York', label: 'Eastern Time (US & Canada)' },
+      { value: 'America/Chicago', label: 'Central Time (US & Canada)' },
+      { value: 'America/Denver', label: 'Mountain Time (US & Canada)' },
+      { value: 'America/Los_Angeles', label: 'Pacific Time (US & Canada)' },
+      { value: 'America/Toronto', label: 'Toronto' },
+      { value: 'America/Vancouver', label: 'Vancouver' },
+      { value: 'America/Mexico_City', label: 'Mexico City' },
+    ],
+  },
+  {
+    label: 'South America',
+    timezones: [
+      { value: 'America/Sao_Paulo', label: 'São Paulo' },
+      { value: 'America/Buenos_Aires', label: 'Buenos Aires' },
+    ],
+  },
+  {
+    label: 'Europe',
+    timezones: [
+      { value: 'Europe/London', label: 'London' },
+      { value: 'Europe/Paris', label: 'Paris' },
+      { value: 'Europe/Berlin', label: 'Berlin' },
+      { value: 'Europe/Rome', label: 'Rome' },
+      { value: 'Europe/Madrid', label: 'Madrid' },
+      { value: 'Europe/Amsterdam', label: 'Amsterdam' },
+      { value: 'Europe/Stockholm', label: 'Stockholm' },
+      { value: 'Europe/Zurich', label: 'Zurich' },
+    ],
+  },
+  {
+    label: 'Asia',
+    timezones: [
+      { value: 'Asia/Tokyo', label: 'Tokyo' },
+      { value: 'Asia/Shanghai', label: 'Shanghai' },
+      { value: 'Asia/Hong_Kong', label: 'Hong Kong' },
+      { value: 'Asia/Singapore', label: 'Singapore' },
+      { value: 'Asia/Dubai', label: 'Dubai' },
+      { value: 'Asia/Kolkata', label: 'Mumbai, New Delhi' },
+      { value: 'Asia/Bangkok', label: 'Bangkok' },
+    ],
+  },
+  {
+    label: 'Australia & Pacific',
+    timezones: [
+      { value: 'Australia/Sydney', label: 'Sydney' },
+      { value: 'Australia/Melbourne', label: 'Melbourne' },
+      { value: 'Pacific/Auckland', label: 'Auckland' },
+    ],
+  },
+];
+
+// Format date based on timezone and language
+const formatDate = (date: Date, timezone: string, lang: string): string => {
+  try {
+    return new Intl.DateTimeFormat(lang, {
+      timeZone: timezone,
+      weekday: 'long',
+      year: 'numeric',
+      month: 'long',
+      day: 'numeric',
+    }).format(date);
+  } catch {
+    return date.toLocaleDateString(lang);
+  }
+};
+
+// Format time based on timezone and language
+const formatTime = (date: Date, timezone: string, lang: string): string => {
+  try {
+    return new Intl.DateTimeFormat(lang, {
+      timeZone: timezone,
+      hour: '2-digit',
+      minute: '2-digit',
+      second: '2-digit',
+      hour12: false,
+    }).format(date);
+  } catch {
+    return date.toLocaleTimeString(lang);
+  }
+};
+
+// Get browser's current timezone
+const getBrowserTimezone = (): string => {
+  if (typeof Intl !== 'undefined') {
+    return Intl.DateTimeFormat().resolvedOptions().timeZone;
+  }
+  return 'UTC';
+};
+
+// Get human-readable timezone name
+const getTimezoneDisplayName = (timezone: string, lang = 'en'): string => {
+  try {
+    // Try to get a friendly name from Intl
+    const formatter = new Intl.DateTimeFormat(lang, {
+      timeZone: timezone,
+      timeZoneName: 'long',
+    });
+    const parts = formatter.formatToParts(new Date());
+    const timeZoneName = parts.find((part) => part.type === 'timeZoneName')?.value;
+
+    if (timeZoneName) {
+      return timeZoneName;
+    }
+
+    // Fallback: try to get city name from timezone string
+    const cityName = timezone.split('/').pop()?.replace(/_/g, ' ') || timezone;
+    return cityName;
+  } catch {
+    // Final fallback: use the timezone code
+    return timezone;
+  }
+};
+
+export const LanguageAndRegion = () => {
+  const { t } = useTranslation('settings');
+  const { settings, updateSetting } = useSettings();
+  const { config } = useConfig();
+  const currentLanguage = settings.language?.code || 'en';
+  const browserTimezone = getBrowserTimezone();
+  const currentTimezone = settings.region?.timezone || browserTimezone;
+  const isUsingBrowserTimezone = currentTimezone === browserTimezone;
+
+  // Get supported languages based on config
+  const supportedLanguages = getSupportedLanguages(config?.language);
+
+  const handleResetRegion = () => {
+    updateSetting('region', { timezone: browserTimezone });
+  };
+
+  // State for current date/time
+  const [currentDateTime, setCurrentDateTime] = useState<{ date: string; time: string }>(() => {
+    const now = new Date();
+    return {
+      date: formatDate(now, currentTimezone, currentLanguage),
+      time: formatTime(now, currentTimezone, currentLanguage),
+    };
+  });
+
+  // Update date/time every second and when timezone/language changes
+  useEffect(() => {
+    const updateDateTime = () => {
+      const now = new Date();
+      setCurrentDateTime({
+        date: formatDate(now, currentTimezone, currentLanguage),
+        time: formatTime(now, currentTimezone, currentLanguage),
+      });
+    };
+
+    // Update immediately when timezone or language changes
+    updateDateTime();
+
+    // Then update every second
+    const interval = setInterval(updateDateTime, 1000);
+
+    return () => clearInterval(interval);
+  }, [currentTimezone, currentLanguage]);
+
+  return (
+    <div className="space-y-6">
+      <div className="space-y-2">
+        <label
+          className="text-sm font-medium leading-none"
+          style={{ fontFamily: 'var(--heading-font-family, inherit)' }}
+        >
+          {t('languageAndRegion.language')}
+        </label>
+        <div className="mt-2">
+          <ButtonGroup>
+            {supportedLanguages.map((lang) => {
+              const isSelected = currentLanguage === lang.code;
+              return (
+                <Button
+                  key={lang.code}
+                  variant={isSelected ? 'default' : 'outline'}
+                  onClick={() => {
+                    updateSetting('language', { code: lang.code });
+                  }}
+                  className={cn(
+                    'h-10 px-4 transition-all flex items-center gap-2',
+                    isSelected && ['shadow-md', 'font-semibold'],
+                    !isSelected && ['bg-background hover:bg-accent/50', 'text-muted-foreground'],
+                  )}
+                  aria-label={lang.nativeName}
+                  title={lang.nativeName}
+                >
+                  <GlobeIcon />
+                  <span className="text-sm font-medium">{lang.nativeName}</span>
+                </Button>
+              );
+            })}
+          </ButtonGroup>
+        </div>
+      </div>
+
+      <div className="space-y-2">
+        <div className="flex items-center justify-between">
+          <label
+            className="text-sm font-medium leading-none"
+            style={{ fontFamily: 'var(--heading-font-family, inherit)' }}
+          >
+            {t('languageAndRegion.region')}
+          </label>
+          {!isUsingBrowserTimezone && (
+            <Button
+              variant="ghost"
+              size="sm"
+              onClick={handleResetRegion}
+              className="h-8 text-xs"
+            >
+              {t('languageAndRegion.resetToBrowser')}
+            </Button>
+          )}
+        </div>
+        <div className="mt-2 space-y-3">
+          <Select
+            value={currentTimezone}
+            onChange={(e) => {
+              updateSetting('region', { timezone: e.target.value });
+            }}
+            className="w-full"
+          >
+            {TIMEZONE_GROUPS.map((group) => (
+              <optgroup
+                key={group.label}
+                label={group.label}
+              >
+                {group.timezones.map((tz) => {
+                  const isBrowserTimezone = tz.value === browserTimezone;
+                  return (
+                    <option
+                      key={tz.value}
+                      value={tz.value}
+                    >
+                      {tz.label}
+                      {isBrowserTimezone ? ` (${t('languageAndRegion.defaultBrowser')})` : ''}
+                    </option>
+                  );
+                })}
+              </optgroup>
+            ))}
+          </Select>
+          <div className="flex items-center gap-2 px-3 py-2 rounded-md bg-muted/60 border border-border/50">
+            <ClockIcon />
+            <div className="flex items-baseline gap-2">
+              <span className="text-lg font-semibold tabular-nums">{currentDateTime.time}</span>
+              <span className="text-xs text-muted-foreground">{currentDateTime.date}</span>
+            </div>
+          </div>
+          <div className="text-xs text-muted-foreground flex items-center gap-1">
+            <span>{t('languageAndRegion.timezoneLabel')}:</span>
+            <span className="font-medium">
+              {getTimezoneDisplayName(currentTimezone, currentLanguage)}
+            </span>
+            {isUsingBrowserTimezone && (
+              <span className="ml-1">({t('languageAndRegion.defaultBrowser')})</span>
+            )}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/features/settings/components/ServiceWorker.tsx

@@ -0,0 +1,363 @@
+import { useTranslation } from 'react-i18next';
+import { useSettings } from '../hooks/useSettings';
+import { Button } from '@/components/ui/button';
+import { Switch } from '@/components/ui/switch';
+import {
+  isServiceWorkerRegistered,
+  updateServiceWorker,
+  getServiceWorkerStatus,
+  addStatusListener,
+  serviceWorkerFileExists,
+} from '@/service-worker/register';
+import { shellui } from '@shellui/sdk';
+import { useState, useEffect } from 'react';
+
+export const ServiceWorker = () => {
+  const { t } = useTranslation('settings');
+  const { settings, updateSetting } = useSettings();
+  const [isRegistered, setIsRegistered] = useState(false);
+  const [updateAvailable, setUpdateAvailable] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
+  const [swFileExists, setSwFileExists] = useState(true); // Track if service worker file exists
+
+  const serviceWorkerEnabled = settings?.serviceWorker?.enabled ?? true;
+
+  useEffect(() => {
+    // Don't check service worker status if disabled
+    if (!serviceWorkerEnabled) {
+      // Immediately clear all state and hide error messages
+      setIsRegistered(false);
+      setUpdateAvailable(false);
+      setIsLoading(false);
+      setSwFileExists(true); // Set to true to prevent error messages from showing
+      return;
+    }
+
+    // Initial check with loading state
+    const initialCheck = async () => {
+      // Double-check service worker is still enabled before proceeding
+      const stillEnabled = settings?.serviceWorker?.enabled ?? true;
+      if (!stillEnabled) {
+        setIsLoading(false);
+        return;
+      }
+
+      setIsLoading(true);
+
+      // First check if service worker file exists
+      const exists = await serviceWorkerFileExists();
+
+      // Check again if service worker was disabled during the async operation
+      const currentEnabled = settings?.serviceWorker?.enabled ?? true;
+      if (!currentEnabled) {
+        setIsLoading(false);
+        return;
+      }
+
+      setSwFileExists(exists);
+
+      if (exists) {
+        // Check service worker status only if file exists
+        const status = await getServiceWorkerStatus();
+
+        // Final check before updating state
+        const finalCheck = settings?.serviceWorker?.enabled ?? true;
+        if (finalCheck) {
+          setIsRegistered(status.registered);
+          setUpdateAvailable(status.updateAvailable);
+        }
+      } else {
+        // File doesn't exist, so service worker can't be registered
+        // Only update if service worker is still enabled
+        const finalCheck = settings?.serviceWorker?.enabled ?? true;
+        if (finalCheck) {
+          setIsRegistered(false);
+          setUpdateAvailable(false);
+        }
+      }
+
+      setIsLoading(false);
+    };
+
+    // Background refresh without affecting loading state
+    const refreshStatus = async () => {
+      // Skip if service worker was disabled (check current setting value)
+      const currentEnabled = settings?.serviceWorker?.enabled ?? true;
+      if (!currentEnabled) {
+        return;
+      }
+
+      // Check if file exists first
+      const exists = await serviceWorkerFileExists();
+
+      // Check again if service worker was disabled during the async operation
+      const currentEnabledAfter = settings?.serviceWorker?.enabled ?? true;
+      if (!currentEnabledAfter) {
+        return;
+      }
+
+      setSwFileExists(exists);
+
+      if (exists) {
+        // Check service worker status only if file exists
+        const status = await getServiceWorkerStatus();
+
+        // Final check before updating state
+        const finalCheck = settings?.serviceWorker?.enabled ?? true;
+        if (finalCheck) {
+          setIsRegistered(status.registered);
+          setUpdateAvailable(status.updateAvailable);
+        }
+      } else {
+        // File doesn't exist, so service worker can't be registered
+        // Only update if service worker is still enabled
+        const finalCheck = settings?.serviceWorker?.enabled ?? true;
+        if (finalCheck) {
+          setIsRegistered(false);
+          setUpdateAvailable(false);
+        }
+      }
+    };
+
+    // Initial check immediately
+    initialCheck();
+
+    // Listen for status changes
+    const unsubscribe = addStatusListener((status) => {
+      // Only update if service worker is still enabled (check current setting value)
+      const currentEnabled = settings?.serviceWorker?.enabled ?? true;
+      if (currentEnabled) {
+        setIsRegistered(status.registered);
+        setUpdateAvailable(status.updateAvailable);
+        setIsLoading(false);
+      }
+    });
+
+    // Also check periodically as fallback (background refresh) - less frequent to avoid excessive fetches
+    const interval = setInterval(refreshStatus, 30000); // Check every 30 seconds instead of 5
+
+    return () => {
+      unsubscribe();
+      clearInterval(interval);
+    };
+  }, [serviceWorkerEnabled]);
+
+  const handleToggleServiceWorker = async (enabled: boolean) => {
+    // Immediately clear all state before updating setting to prevent error flashes
+    if (!enabled) {
+      setIsRegistered(false);
+      setUpdateAvailable(false);
+      setSwFileExists(true); // Set to true to hide error messages immediately
+      setIsLoading(false);
+    }
+
+    updateSetting('serviceWorker', { enabled });
+
+    if (!enabled) {
+      // Already cleared above, just return
+      return;
+    }
+
+    // Give it a moment to register/unregister
+    setTimeout(async () => {
+      // Double-check service worker is still enabled before updating state
+      const currentEnabled = settings?.serviceWorker?.enabled ?? true;
+      if (enabled && currentEnabled) {
+        const registered = await isServiceWorkerRegistered();
+        setIsRegistered(registered);
+      }
+    }, 1000);
+  };
+
+  const handleUpdateNow = async () => {
+    try {
+      await updateServiceWorker();
+      // Don't show toast here - updateServiceWorker() will handle the reload
+      // and the update process already provides feedback through the UI
+    } catch (_error) {
+      shellui.toast({
+        title: t('caching.updateError.title'),
+        description: t('caching.updateError.description'),
+        type: 'error',
+      });
+    }
+  };
+
+  const handleResetToLatest = async () => {
+    try {
+      // Clear all caches and reload
+      if ('caches' in window) {
+        const cacheNames = await caches.keys();
+        await Promise.all(cacheNames.map((name) => caches.delete(name)));
+      }
+
+      shellui.toast({
+        title: t('caching.resetSuccess.title'),
+        description: t('caching.resetSuccess.description'),
+        type: 'success',
+      });
+
+      // Reload the app using shellUI refresh message (refreshes entire app, not just iframe)
+      setTimeout(() => {
+        const sent = shellui.sendMessageToParent({
+          type: 'SHELLUI_REFRESH_PAGE',
+          payload: {},
+        });
+        if (!sent) {
+          // Fallback to window.location.reload if message can't be sent
+          window.location.reload();
+        }
+      }, 1000);
+    } catch (_error) {
+      shellui.toast({
+        title: t('caching.resetError.title'),
+        description: t('caching.resetError.description'),
+        type: 'error',
+      });
+    }
+  };
+
+  return (
+    <div className="space-y-6">
+      {isLoading ? (
+        <div className="text-sm text-muted-foreground">{t('caching.loading')}</div>
+      ) : null}
+
+      {!isLoading && (
+        <div className="space-y-6">
+          {/* Enable/Disable service worker */}
+          <div className="space-y-2">
+            <div className="flex items-center justify-between">
+              <div className="space-y-0.5">
+                <label
+                  className="text-sm font-medium leading-none"
+                  style={{ fontFamily: 'var(--heading-font-family, inherit)' }}
+                >
+                  {t('caching.enabled.title')}
+                </label>
+                <p className="text-sm text-muted-foreground">
+                  {serviceWorkerEnabled
+                    ? t('caching.enabled.descriptionEnabled')
+                    : t('caching.enabled.descriptionDisabled')}
+                </p>
+              </div>
+              <Switch
+                checked={serviceWorkerEnabled}
+                onCheckedChange={handleToggleServiceWorker}
+              />
+            </div>
+          </div>
+
+          {/* Status – always visible; shows Disabled when off */}
+          <div className="space-y-2">
+            <label
+              className="text-sm font-medium leading-none"
+              style={{ fontFamily: 'var(--heading-font-family, inherit)' }}
+            >
+              {t('caching.status.title')}
+            </label>
+            <div className="flex items-center gap-2 text-sm mt-2">
+              {!serviceWorkerEnabled ? (
+                <span className="text-muted-foreground">○ {t('caching.status.disabled')}</span>
+              ) : !swFileExists ? (
+                <span className="text-red-600 dark:text-red-400">
+                  ✗ {t('caching.status.fileNotFound')}
+                </span>
+              ) : (
+                <>
+                  <span
+                    className={
+                      isRegistered
+                        ? 'text-green-600 dark:text-green-400'
+                        : 'text-orange-600 dark:text-orange-400'
+                    }
+                  >
+                    {isRegistered ? '●' : '○'}{' '}
+                    {isRegistered ? t('caching.status.registered') : t('caching.status.notRunning')}
+                  </span>
+                  {updateAvailable && (
+                    <>
+                      <span className="text-muted-foreground/50">|</span>
+                      <span className="text-blue-600 dark:text-blue-400">
+                        ● {t('caching.status.updateAvailable')}
+                      </span>
+                    </>
+                  )}
+                </>
+              )}
+            </div>
+          </div>
+
+          {serviceWorkerEnabled && (
+            <>
+              {/* Error Message when file missing */}
+              {!swFileExists && (
+                <div className="rounded-lg border border-red-200 dark:border-red-800 bg-red-50 dark:bg-red-950/30 p-4 space-y-3">
+                  <div className="space-y-1">
+                    <h3
+                      className="text-sm font-medium leading-none text-red-600 dark:text-red-400"
+                      style={{ fontFamily: 'var(--heading-font-family, inherit)' }}
+                    >
+                      {t('caching.status.fileNotFound')}
+                    </h3>
+                    <p className="text-sm text-red-700 dark:text-red-300">
+                      {t('caching.status.fileNotFoundDescription')}
+                    </p>
+                  </div>
+                </div>
+              )}
+
+              {/* Update Available */}
+              {updateAvailable && (
+                <div className="space-y-2">
+                  <div className="space-y-0.5">
+                    <label
+                      className="text-sm font-medium leading-none"
+                      style={{ fontFamily: 'var(--heading-font-family, inherit)' }}
+                    >
+                      {t('caching.update.title')}
+                    </label>
+                    <p className="text-sm text-muted-foreground">
+                      {t('caching.update.description')}
+                    </p>
+                  </div>
+                  <div className="mt-2">
+                    <Button
+                      variant="outline"
+                      onClick={handleUpdateNow}
+                      className="w-full sm:w-auto"
+                    >
+                      {t('caching.update.button')}
+                    </Button>
+                  </div>
+                </div>
+              )}
+
+              {/* Reset Cache */}
+              <div className="space-y-2">
+                <div className="space-y-0.5">
+                  <label
+                    className="text-sm font-medium leading-none"
+                    style={{ fontFamily: 'var(--heading-font-family, inherit)' }}
+                  >
+                    {t('caching.reset.title')}
+                  </label>
+                  <p className="text-sm text-muted-foreground">{t('caching.reset.description')}</p>
+                </div>
+                <div className="mt-2">
+                  <Button
+                    variant="outline"
+                    onClick={handleResetToLatest}
+                    className="w-full sm:w-auto"
+                  >
+                    {t('caching.reset.button')}
+                  </Button>
+                </div>
+              </div>
+            </>
+          )}
+        </div>
+      )}
+    </div>
+  );
+};