Merge pull request #380 from widgetify-app/improve/ui

Improve/UI

Author: sajjadmrx

background/cache.ts

@@ -3,6 +3,14 @@ import { ExpirationPlugin } from 'workbox-expiration'
 import { registerRoute } from 'workbox-routing'
 import { CacheFirst, NetworkFirst, StaleWhileRevalidate } from 'workbox-strategies'
 import { NavigationRoute } from 'workbox-routing'
+const allowedPaths = [
+	'/extension/wigi-pad-data',
+	'/date/events',
+	'/news/rss',
+	'/currencies',
+	'/wallpapers',
+	'/contents',
+]
 
 export function setupCaching() {
 	if (typeof self !== 'undefined' && '__WB_MANIFEST' in self) {
@@ -11,6 +19,29 @@ export function setupCaching() {
 		})
 	}
 
+	registerRoute(
+		({ url, request }) => {
+			if (request.method !== 'GET') return false
+			if (url.origin !== 'https://api.widgetify.ir') return false
+
+			return allowedPaths.some((path) => url.pathname.startsWith(path))
+		},
+
+		new StaleWhileRevalidate({
+			cacheName: 'widgetify-public-api',
+			plugins: [
+				new CacheableResponsePlugin({
+					statuses: [200],
+				}),
+				new ExpirationPlugin({
+					maxEntries: 150,
+					maxAgeSeconds: 60 * 60 * 5,
+					purgeOnQuotaError: true,
+				}),
+			],
+		})
+	)
+
 	const isDev = import.meta.env.DEV
 
 	if (!isDev) {

src/assets/images/no-internet.png

@@ -6,6 +6,13 @@ export const moodOptions = [
 		colorClass: 'error',
 		borderClass: 'border-error/50',
 	},
+	{
+		value: 'normal',
+		emoji: '😴',
+		label: '',
+		colorClass: 'warning',
+		borderClass: 'border-yellow-400/50',
+	},
 	{
 		value: 'tired',
 		emoji: '😴',

src/common/constant/moods.ts

@@ -1,6 +1,5 @@
 import type { CurrencyColorMode } from '@/context/currency.context'
 import type { Theme } from '@/context/theme.context'
-import type { TodoOptions } from '@/context/todo.context'
 import type { WidgetItem } from '@/context/widget-visibility.context'
 import type { Bookmark } from '@/layouts/bookmark/types/bookmark.types'
 import type { PetSettings } from '@/layouts/widgetify-card/pets/pet.context'
@@ -63,7 +62,6 @@ export interface StorageKV {
 	}[]
 	calendarDrawerState: boolean
 	pets: PetSettings
-	todoOptions: TodoOptions
 	youtubeSettings: {
 		username: string | null
 		subscriptionStyle: 'short' | 'long'
@@ -89,5 +87,7 @@ export interface StorageKV {
 	petState: boolean
 	showNewBadgeForReOrderWidgets: boolean
 	navbarVisible: boolean
+	todoFilter: string
+	todoSort: string
 	[key: `removed_notification_${string}`]: string
 }

src/common/constant/store.key.ts

@@ -63,7 +63,8 @@ export async function setWithExpiry<K extends keyof StorageKV>(
 	value: StorageKV[K],
 	minutes: number
 ) {
-	const expiry = Date.now() + minutes * 60000
+	const safeMinutes = Math.max(1, minutes)
+	const expiry = Date.now() + safeMinutes * 60_000
 	const data = { value, expiry }
 
 	await setToStorage(key, data as any)

src/common/storage.ts

@@ -1,4 +1,4 @@
-import type React from 'react'
+import React from 'react'
 import toast from 'react-hot-toast'
 import { playAlarm } from './playAlarm'
 
@@ -165,17 +165,18 @@ export function showToast(
 			)
 		}
 	} else {
-		toast.custom((t) => (
-			<div
-				className={`${t.visible ? 'animate-enter' : 'animate-leave'} max-w-md w-full bg-white shadow-lg rounded-lg pointer-events-auto flex ring-1 ring-black ring-opacity-5`}
-			>
-				<div className="flex-1 w-0 p-4">
-					<div className="flex items-start">
-						<div className="flex-1 ml-3">{message}</div>
+		if (React.isValidElement(message))
+			toast.custom((t) => (
+				<div
+					className={`${t.visible ? 'animate-enter' : 'animate-leave'} max-w-md w-full bg-white shadow-lg rounded-lg pointer-events-auto flex ring-1 ring-black ring-opacity-5`}
+				>
+					<div className="flex-1 w-0 p-4">
+						<div className="flex items-start">
+							<div className="flex-1 ml-3">{message}</div>
+						</div>
 					</div>
 				</div>
-			</div>
-		))
+			))
 	}
 
 	if (options?.alarmSound) {

src/common/toast.tsx

@@ -24,7 +24,7 @@ export const getFaviconFromUrl = (url: string): string => {
 		}
 
 		const urlObj = new URL(processedUrl)
-		return `https://www.google.com/s2/favicons?domain=${urlObj.hostname}&sz=64`
+		return `https://www.google.com/s2/favicons?domain=${urlObj.hostname}&sz=64&fallback_opts=404`
 	} catch {
 		return ''
 	}

src/common/utils/icon.ts

@@ -0,0 +1,10 @@
+interface Prop {
+	className: string
+}
+export function NewBadge({ className }: Prop) {
+	return (
+		<span
+			className={`absolute w-2 h-2 rounded-full ${className} bg-error animate-pulse`}
+		></span>
+	)
+}

src/components/badges/new.badge.tsx

@@ -0,0 +1,25 @@
+import { useGeneralSetting } from '@/context/general-setting.context'
+import Tooltip from '../toolTip'
+import { Button } from '../button/button'
+import { FaEye, FaEyeSlash } from 'react-icons/fa'
+
+export function BlurModeButton() {
+	const { blurMode, updateSetting } = useGeneralSetting()
+
+	const handleBlurModeToggle = () => {
+		const newBlurMode = !blurMode
+		updateSetting('blurMode', newBlurMode)
+	}
+
+	return (
+		<Tooltip content={blurMode ? 'نمایش' : 'حالت مخفی'}>
+			<Button
+				size="sm"
+				onClick={handleBlurModeToggle}
+				className={`px-2 py-0! border-none! rounded-xl text-base-content/40 shrink-0 active:scale-95 h-7!`}
+			>
+				{blurMode ? <FaEye /> : <FaEyeSlash />}
+			</Button>
+		</Tooltip>
+	)
+}

src/components/blur-mode/blur-mode.button.tsx

@@ -15,6 +15,7 @@ interface ButtonProps {
 	children?: React.ReactNode
 	isPrimary?: boolean
 	size: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+	ref?: any
 }
 export function Button(prop: ButtonProps) {
 	const sizes: Record<string, string> = {
@@ -32,6 +33,7 @@ export function Button(prop: ButtonProps) {
 			disabled={prop.disabled}
 			className={`btn cursor-pointer ${prop.fullWidth ? 'full-width' : ''} ${prop.className} ${prop.rounded ? `rounded-${prop.rounded}` : ''} ${prop.isPrimary ? 'btn-primary text-white' : ''} ${sizes[prop.size] || 'btn-md'} active:!translate-y-0`}
 			style={prop.style}
+			ref={prop.ref}
 		>
 			{prop.loading
 				? prop.loadingText || (