@shellui/core 0.0.4

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

@@ -0,0 +1,206 @@
+import { useTranslation } from 'react-i18next';
+import { useConfig } from '@/features/config/useConfig';
+import { useSettings } from '../hooks/useSettings';
+import { Button } from '@/components/ui/button';
+import {
+  isTauri,
+  getServiceWorkerStatus,
+  addStatusListener,
+  checkForServiceWorkerUpdate,
+  updateServiceWorker,
+} from '@/service-worker/register';
+import { shellui, getLogger } from '@shellui/sdk';
+import { CheckIcon } from '../SettingsIcons';
+import { useState, useEffect } from 'react';
+
+const logger = getLogger('shellcore');
+
+export const UpdateApp = () => {
+  const { t } = useTranslation('settings');
+  const { config } = useConfig();
+  const { settings } = useSettings();
+  const [updateAvailable, setUpdateAvailable] = useState(false);
+  const [checking, setChecking] = useState(false);
+  const [showUpToDateInButton, setShowUpToDateInButton] = useState(false);
+  const [checkError, setCheckError] = useState(false);
+
+  const serviceWorkerEnabled = settings?.serviceWorker?.enabled ?? true;
+
+  useEffect(() => {
+    if (isTauri()) return;
+    const load = async () => {
+      const status = await getServiceWorkerStatus();
+      setUpdateAvailable(status.updateAvailable);
+    };
+    load();
+    const unsubscribe = addStatusListener((status) => {
+      setUpdateAvailable(status.updateAvailable);
+      // If an update becomes available, hide the "You are up to date" message and clear any errors
+      if (status.updateAvailable) {
+        setShowUpToDateInButton(false);
+        setCheckError(false);
+      }
+    });
+    return unsubscribe;
+  }, []);
+
+  const handleCheckForUpdate = async () => {
+    if (isTauri()) return;
+    setShowUpToDateInButton(false);
+    setCheckError(false);
+    setChecking(true);
+    try {
+      // Check current status before triggering update check
+      const initialStatus = await getServiceWorkerStatus();
+
+      // If update is already available, don't show "You are up to date"
+      if (initialStatus.updateAvailable) {
+        return;
+      }
+
+      // Trigger update check
+      await checkForServiceWorkerUpdate();
+
+      // Wait a bit for the update check to complete and status to update
+      // The status listener will update updateAvailable if an update is found
+      await new Promise((resolve) => setTimeout(resolve, 1000));
+
+      // Check status again after update check
+      // Use the state value which may have been updated by the status listener
+      // If updateAvailable is true, don't show "You are up to date"
+      if (!updateAvailable) {
+        // Double-check with API to be sure
+        const finalStatus = await getServiceWorkerStatus();
+        if (!finalStatus.updateAvailable) {
+          setShowUpToDateInButton(true);
+          window.setTimeout(() => setShowUpToDateInButton(false), 3000);
+        }
+      }
+    } catch (error) {
+      // Error occurred during update check - show error message in button
+      setCheckError(true);
+      logger.error('Failed to check for service worker update:', { error });
+    } finally {
+      setChecking(false);
+    }
+  };
+
+  const version = config?.version ?? t('updateApp.versionUnknown');
+
+  if (isTauri()) {
+    return (
+      <div className="space-y-6">
+        <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('updateApp.currentVersion')}
+            </label>
+            <p className="text-sm text-muted-foreground">{version}</p>
+          </div>
+          <div className="rounded-lg border border-border bg-muted/30 p-4">
+            <p className="text-sm text-muted-foreground">{t('updateApp.tauriComingSoon')}</p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="space-y-4">
+        <div className="space-y-0.5">
+          <label
+            className="text-sm font-medium leading-none"
+            style={{ fontFamily: 'var(--heading-font-family, inherit)' }}
+          >
+            {t('updateApp.currentVersion')}
+          </label>
+          <p className="text-sm text-muted-foreground">{version}</p>
+        </div>
+        {!serviceWorkerEnabled ? (
+          <div className="space-y-3">
+            <p className="text-sm text-muted-foreground">{t('updateApp.swDisabledMessage')}</p>
+            <Button
+              variant="outline"
+              onClick={() => {
+                const sent = shellui.sendMessageToParent({
+                  type: 'SHELLUI_REFRESH_PAGE',
+                  payload: {},
+                });
+                if (!sent) window.location.reload();
+              }}
+              className="w-full sm:w-auto"
+            >
+              {t('updateApp.refreshApp')}
+            </Button>
+          </div>
+        ) : (
+          <>
+            <div className="space-y-2">
+              <label
+                className="text-sm font-medium leading-none"
+                style={{ fontFamily: 'var(--heading-font-family, inherit)' }}
+              >
+                {t('updateApp.status')}
+              </label>
+              <div className="flex items-center gap-2 text-sm mt-2">
+                {updateAvailable ? (
+                  <span className="text-blue-600 dark:text-blue-400">
+                    ● {t('updateApp.statusUpdateAvailable')}
+                  </span>
+                ) : (
+                  <span className="text-green-600 dark:text-green-400">
+                    ● {t('updateApp.statusUpToDate')}
+                  </span>
+                )}
+              </div>
+            </div>
+            <div className="flex items-center gap-2 flex-wrap">
+              {updateAvailable && (
+                <Button
+                  variant="default"
+                  onClick={async () => {
+                    await updateServiceWorker();
+                  }}
+                  className="w-full sm:w-auto"
+                >
+                  {t('updateApp.installNow')}
+                </Button>
+              )}
+              <Button
+                variant="outline"
+                onClick={handleCheckForUpdate}
+                disabled={checking || updateAvailable}
+                className="w-full sm:w-auto"
+              >
+                {checking ? (
+                  <>
+                    <span
+                      className="inline-block h-4 w-4 shrink-0 animate-spin rounded-full border-2 border-current border-t-transparent mr-2"
+                      aria-hidden
+                    />
+                    {t('updateApp.checking')}
+                  </>
+                ) : checkError ? (
+                  <span className="inline-flex items-center gap-2 text-red-600 dark:text-red-400">
+                    {t('updateApp.checkError')}
+                  </span>
+                ) : showUpToDateInButton && !updateAvailable ? (
+                  <span className="inline-flex items-center gap-2 text-green-600 dark:text-green-400">
+                    <CheckIcon />
+                    {t('updateApp.youAreUpToDate')}
+                  </span>
+                ) : (
+                  t('updateApp.checkForUpdate')
+                )}
+              </Button>
+            </div>
+          </>
+        )}
+      </div>
+    </div>
+  );
+};

package/src/features/settings/components/develop/DialogTestButtons.tsx

@@ -0,0 +1,137 @@
+import { useTranslation } from 'react-i18next';
+import { Button } from '@/components/ui/button';
+import { shellui } from '@shellui/sdk';
+
+export const DialogTestButtons = () => {
+  const { t } = useTranslation('settings');
+
+  return (
+    <div>
+      <h4
+        className="text-sm font-medium mb-2"
+        style={{ fontFamily: 'var(--heading-font-family, inherit)' }}
+      >
+        {t('develop.testing.dialogTesting.title')}
+      </h4>
+      <div className="flex flex-wrap gap-2">
+        <Button
+          onClick={() => {
+            shellui.dialog({
+              title: t('develop.testing.dialogTesting.dialogs.ok.title'),
+              description: t('develop.testing.dialogTesting.dialogs.ok.description'),
+              mode: 'ok',
+              onOk: () => {
+                shellui.toast({
+                  title: t('develop.testing.dialogTesting.toasts.okClicked'),
+                  type: 'success',
+                });
+              },
+            });
+          }}
+          variant="outline"
+        >
+          {t('develop.testing.dialogTesting.buttons.okDialog')}
+        </Button>
+        <Button
+          onClick={() => {
+            shellui.dialog({
+              title: t('develop.testing.dialogTesting.dialogs.okCancel.title'),
+              description: t('develop.testing.dialogTesting.dialogs.okCancel.description'),
+              mode: 'okCancel',
+              size: 'sm',
+              onOk: () => {
+                shellui.toast({
+                  title: t('develop.testing.dialogTesting.toasts.okClicked'),
+                  type: 'success',
+                });
+              },
+              onCancel: () => {
+                shellui.toast({
+                  title: t('develop.testing.dialogTesting.toasts.cancelClicked'),
+                  type: 'info',
+                });
+              },
+            });
+          }}
+          variant="outline"
+        >
+          {t('develop.testing.dialogTesting.buttons.okCancelDialog')}
+        </Button>
+        <Button
+          onClick={() => {
+            shellui.dialog({
+              title: t('develop.testing.dialogTesting.dialogs.delete.title'),
+              description: t('develop.testing.dialogTesting.dialogs.delete.description'),
+              mode: 'delete',
+              okLabel: t('develop.testing.dialogTesting.dialogs.delete.okLabel'),
+              cancelLabel: t('develop.testing.dialogTesting.dialogs.delete.cancelLabel'),
+              size: 'sm',
+              onOk: () => {
+                shellui.toast({
+                  title: t('develop.testing.dialogTesting.toasts.itemDeleted'),
+                  type: 'success',
+                });
+              },
+              onCancel: () => {
+                shellui.toast({
+                  title: t('develop.testing.dialogTesting.toasts.deletionCancelled'),
+                  type: 'info',
+                });
+              },
+            });
+          }}
+          variant="outline"
+        >
+          {t('develop.testing.dialogTesting.buttons.deleteDialog')}
+        </Button>
+        <Button
+          onClick={() => {
+            shellui.dialog({
+              title: t('develop.testing.dialogTesting.dialogs.confirm.title'),
+              description: t('develop.testing.dialogTesting.dialogs.confirm.description'),
+              mode: 'confirm',
+              okLabel: t('develop.testing.dialogTesting.dialogs.confirm.okLabel'),
+              cancelLabel: t('develop.testing.dialogTesting.dialogs.confirm.cancelLabel'),
+              size: 'sm',
+              onOk: () => {
+                shellui.toast({
+                  title: t('develop.testing.dialogTesting.toasts.actionConfirmed'),
+                  type: 'success',
+                });
+              },
+              onCancel: () => {
+                shellui.toast({
+                  title: t('develop.testing.dialogTesting.toasts.actionCancelled'),
+                  type: 'info',
+                });
+              },
+            });
+          }}
+          variant="outline"
+        >
+          {t('develop.testing.dialogTesting.buttons.confirmDialog')}
+        </Button>
+        <Button
+          onClick={() => {
+            shellui.dialog({
+              title: t('develop.testing.dialogTesting.dialogs.onlyCancel.title'),
+              description: t('develop.testing.dialogTesting.dialogs.onlyCancel.description'),
+              mode: 'onlyCancel',
+              cancelLabel: t('develop.testing.dialogTesting.dialogs.onlyCancel.cancelLabel'),
+              size: 'sm',
+              onCancel: () => {
+                shellui.toast({
+                  title: t('develop.testing.dialogTesting.toasts.dialogClosed'),
+                  type: 'info',
+                });
+              },
+            });
+          }}
+          variant="outline"
+        >
+          {t('develop.testing.dialogTesting.buttons.onlyCancelDialog')}
+        </Button>
+      </div>
+    </div>
+  );
+};

package/src/features/settings/components/develop/DrawerTestButtons.tsx

@@ -0,0 +1,67 @@
+import { useTranslation } from 'react-i18next';
+import { Button } from '@/components/ui/button';
+import { shellui, type OpenDrawerOptions } from '@shellui/sdk';
+import urls from '@/constants/urls';
+
+export const DrawerTestButtons = () => {
+  const { t } = useTranslation('settings');
+
+  const openDrawer = (options: OpenDrawerOptions) => {
+    shellui.openDrawer({ url: urls.settings, ...options });
+  };
+
+  return (
+    <div>
+      <h4
+        className="text-sm font-medium mb-2"
+        style={{ fontFamily: 'var(--heading-font-family, inherit)' }}
+      >
+        {t('develop.testing.drawerTesting.title')}
+      </h4>
+      <div className="flex flex-wrap gap-2">
+        <Button
+          onClick={() => openDrawer({ position: 'right' })}
+          variant="outline"
+        >
+          {t('develop.testing.drawerTesting.buttons.drawerRight')}
+        </Button>
+        <Button
+          onClick={() => openDrawer({ position: 'left' })}
+          variant="outline"
+        >
+          {t('develop.testing.drawerTesting.buttons.drawerLeft')}
+        </Button>
+        <Button
+          onClick={() => openDrawer({ position: 'top' })}
+          variant="outline"
+        >
+          {t('develop.testing.drawerTesting.buttons.drawerTop')}
+        </Button>
+        <Button
+          onClick={() => openDrawer({ position: 'bottom' })}
+          variant="outline"
+        >
+          {t('develop.testing.drawerTesting.buttons.drawerBottom')}
+        </Button>
+        <Button
+          onClick={() => openDrawer({ position: 'right', size: '400px' })}
+          variant="outline"
+        >
+          {t('develop.testing.drawerTesting.buttons.drawerRightNarrow')}
+        </Button>
+        <Button
+          onClick={() => openDrawer({ position: 'bottom', size: '60vh' })}
+          variant="outline"
+        >
+          {t('develop.testing.drawerTesting.buttons.drawerBottomHalf')}
+        </Button>
+        <Button
+          onClick={() => shellui.closeDrawer()}
+          variant="outline"
+        >
+          {t('develop.testing.drawerTesting.buttons.closeDrawer')}
+        </Button>
+      </div>
+    </div>
+  );
+};

package/src/features/settings/components/develop/ModalTestButtons.tsx

@@ -0,0 +1,30 @@
+import { useTranslation } from 'react-i18next';
+import { Button } from '@/components/ui/button';
+import { shellui } from '@shellui/sdk';
+import urls from '@/constants/urls';
+
+export const ModalTestButtons = () => {
+  const { t } = useTranslation('settings');
+
+  return (
+    <div>
+      <h4
+        className="text-sm font-medium mb-2"
+        style={{ fontFamily: 'var(--heading-font-family, inherit)' }}
+      >
+        {t('develop.testing.modalTesting.title')}
+      </h4>
+      <div className="flex flex-wrap gap-2">
+        <Button
+          onClick={() => shellui.openModal(urls.settings)}
+          variant="outline"
+        >
+          {t('develop.testing.modalTesting.buttons.openModal')}
+        </Button>
+      </div>
+      <p className="text-xs text-muted-foreground mt-2">
+        {t('develop.testing.modalTesting.description')}
+      </p>
+    </div>
+  );
+};

package/src/features/settings/components/develop/ToastTestButtons.tsx

@@ -0,0 +1,179 @@
+import { useTranslation } from 'react-i18next';
+import { Button } from '@/components/ui/button';
+import { shellui } from '@shellui/sdk';
+
+export const ToastTestButtons = () => {
+  const { t } = useTranslation('settings');
+
+  return (
+    <div>
+      <h4
+        className="text-sm font-medium mb-2"
+        style={{ fontFamily: 'var(--heading-font-family, inherit)' }}
+      >
+        {t('develop.testing.toastNotifications.title')}
+      </h4>
+      <div className="flex flex-wrap gap-2">
+        <Button
+          onClick={() => {
+            shellui.toast({
+              title: t('develop.testing.toastNotifications.messages.success.title'),
+              description: t('develop.testing.toastNotifications.messages.success.description'),
+              type: 'success',
+            });
+          }}
+          variant="outline"
+        >
+          {t('develop.testing.toastNotifications.buttons.success')}
+        </Button>
+        <Button
+          onClick={() => {
+            shellui.toast({
+              title: t('develop.testing.toastNotifications.messages.error.title'),
+              description: t('develop.testing.toastNotifications.messages.error.description'),
+              type: 'error',
+            });
+          }}
+          variant="outline"
+        >
+          {t('develop.testing.toastNotifications.buttons.error')}
+        </Button>
+        <Button
+          onClick={() => {
+            shellui.toast({
+              title: t('develop.testing.toastNotifications.messages.warning.title'),
+              description: t('develop.testing.toastNotifications.messages.warning.description'),
+              type: 'warning',
+            });
+          }}
+          variant="outline"
+        >
+          {t('develop.testing.toastNotifications.buttons.warning')}
+        </Button>
+        <Button
+          onClick={() => {
+            shellui.toast({
+              title: t('develop.testing.toastNotifications.messages.info.title'),
+              description: t('develop.testing.toastNotifications.messages.info.description'),
+              type: 'info',
+            });
+          }}
+          variant="outline"
+        >
+          {t('develop.testing.toastNotifications.buttons.info')}
+        </Button>
+        <Button
+          onClick={() => {
+            shellui.toast({
+              title: t('develop.testing.toastNotifications.messages.default.title'),
+              description: t('develop.testing.toastNotifications.messages.default.description'),
+              type: 'default',
+            });
+          }}
+          variant="outline"
+        >
+          {t('develop.testing.toastNotifications.buttons.default')}
+        </Button>
+        <Button
+          onClick={() => {
+            const toastId = shellui.toast({
+              title: t('develop.testing.toastNotifications.messages.processing.title'),
+              description: t('develop.testing.toastNotifications.messages.processing.description'),
+              type: 'loading',
+            });
+
+            // Simulate async operation and update toast
+            if (typeof toastId === 'string') {
+              setTimeout(() => {
+                shellui.toast({
+                  id: toastId,
+                  type: 'success',
+                  title: t('develop.testing.toastNotifications.messages.uploadComplete.title'),
+                  description: t(
+                    'develop.testing.toastNotifications.messages.uploadComplete.description',
+                  ),
+                });
+              }, 2000);
+            }
+          }}
+          variant="outline"
+        >
+          {t('develop.testing.toastNotifications.buttons.loadingSuccess')}
+        </Button>
+        <Button
+          onClick={() => {
+            shellui.toast({
+              title: t('develop.testing.toastNotifications.messages.withAction.title'),
+              description: t('develop.testing.toastNotifications.messages.withAction.description'),
+              type: 'success',
+              action: {
+                label: t('develop.testing.toastNotifications.messages.actionLabels.undo'),
+                onClick: () => {
+                  shellui.toast({
+                    title: t('develop.testing.toastNotifications.messages.undone.title'),
+                    description: t(
+                      'develop.testing.toastNotifications.messages.undone.description',
+                    ),
+                    type: 'info',
+                  });
+                },
+              },
+            });
+          }}
+          variant="outline"
+        >
+          {t('develop.testing.toastNotifications.buttons.withAction')}
+        </Button>
+        <Button
+          onClick={() => {
+            shellui.toast({
+              title: t('develop.testing.toastNotifications.messages.withAction.title'),
+              description: t('develop.testing.toastNotifications.messages.withAction.description'),
+              type: 'success',
+              action: {
+                label: t('develop.testing.toastNotifications.messages.actionLabels.undo'),
+                onClick: () => {
+                  shellui.toast({
+                    title: t('develop.testing.toastNotifications.messages.undone.title'),
+                    description: t(
+                      'develop.testing.toastNotifications.messages.undone.description',
+                    ),
+                    type: 'info',
+                  });
+                },
+              },
+              cancel: {
+                label: t('develop.testing.toastNotifications.messages.actionLabels.cancel'),
+                onClick: () => {
+                  shellui.toast({
+                    title: t('develop.testing.toastNotifications.messages.cancelled.title'),
+                    description: t(
+                      'develop.testing.toastNotifications.messages.cancelled.description',
+                    ),
+                    type: 'info',
+                  });
+                },
+              },
+            });
+          }}
+          variant="outline"
+        >
+          {t('develop.testing.toastNotifications.buttons.withActionAndCancel')}
+        </Button>
+        <Button
+          onClick={() => {
+            shellui.toast({
+              title: t('develop.testing.toastNotifications.messages.persistent.title'),
+              description: t('develop.testing.toastNotifications.messages.persistent.description'),
+              type: 'info',
+              duration: 10000,
+            });
+          }}
+          variant="outline"
+        >
+          {t('develop.testing.toastNotifications.buttons.longDuration')}
+        </Button>
+      </div>
+    </div>
+  );
+};

package/src/features/settings/hooks/useSettings.tsx

@@ -0,0 +1,10 @@
+import { useContext } from 'react';
+import { SettingsContext } from '../SettingsContext';
+
+export function useSettings() {
+  const context = useContext(SettingsContext);
+  if (context === undefined) {
+    throw new Error('useSettings must be used within a SettingsProvider');
+  }
+  return context;
+}