feat: enhance ExtensionsPanel with mobile support and external link handling

- Added mobile detail view toggle in ExtensionsPanel.
- Implemented external link opening functionality using Tauri's openUrl.
- Refactored rendering of extension details and changelog to improve loading states.
- Introduced star rating display for extensions.
- Updated UI styles for better link visibility and hover effects.
- Improved category filtering UI in ExtensionsPanel.
- Added new color theme variables for link styling.
- Updated package version to 0.1.26 and added react-icons dependency.

Author: aesopov

packages/ui/lib/components/Tabs/Tabs.tsx

@@ -1,5 +1,5 @@
 import { cx } from "@/utils/cssModules";
-import { memo, useCallback, useEffect, useRef, useState } from "react";
+import { memo, useCallback, useRef, useState } from "react";
 import styles from "./Tabs.module.css";
 
 export type TabsVariant = "panel" | "subtle" | "terminal";
@@ -80,7 +80,12 @@ export const Tabs = memo(function Tabs<T extends TabsItem>({
   const handleWheel = useCallback((event: React.WheelEvent) => {
     const element = listRef.current;
     if (!element) return;
-    element.scrollLeft += event.deltaY !== 0 ? event.deltaY : event.deltaX;
+    const canScrollHorizontally = element.scrollWidth > element.clientWidth + 1;
+    if (!canScrollHorizontally) return;
+    const delta = Math.abs(event.deltaX) > Math.abs(event.deltaY) ? event.deltaX : event.deltaY;
+    if (delta === 0) return;
+    event.preventDefault();
+    element.scrollLeft += delta;
   }, []);
 
   const getDropIndex = useCallback((clientX: number): number | null => {
@@ -143,14 +148,6 @@ export const Tabs = memo(function Tabs<T extends TabsItem>({
     setDropIndex(null);
   }, []);
 
-  useEffect(() => {
-    const element = listRef.current;
-    if (!element) return;
-    const suppress = (event: WheelEvent) => event.preventDefault();
-    element.addEventListener("wheel", suppress, { passive: false });
-    return () => element.removeEventListener("wheel", suppress);
-  }, []);
-
   return (
     <div className={cx(styles, "tabs", classes.root)}>
       <div

packages/ui/lib/features/bridge/bridge.ts

@@ -204,6 +204,7 @@ export interface Bridge {
     getHomePath(): Promise<string>;
     getAppDirs(): Promise<AppDirs>;
     getEnv(): Promise<Record<string, string>>;
+    openExternal?(url: string): Promise<void>;
   };
   systemTheme: {
     get(): Promise<SystemThemeKind>;