desktop button

apps/remix-ide/src/app/tabs/locales/en/desktopDownload.json

@@ -0,0 +1,14 @@
+{
+  "desktopDownload.loading": "Loading desktop app info...",
+  "desktopDownload.error": "Unable to load desktop app. Check the {link} for downloads.",
+  "desktopDownload.title": "Remix Desktop",
+  "desktopDownload.releaseDate": "Released {date}",
+  "desktopDownload.downloadSpan": "Download Remix Desktop {platform} {version}",
+  "desktopDownload.downloadSpanGeneric": "Download Remix Desktop {version}",
+  "desktopDownload.downloadCompactFull": "Download Remix Desktop {platform} {version}",
+  "desktopDownload.downloadCompactGeneric": "Download Remix Desktop {version}",
+  "desktopDownload.downloadButton": "Download for {platform}",
+  "desktopDownload.viewReleases": "View Downloads",
+  "desktopDownload.otherVersions": "Other versions and platforms",
+  "desktopDownload.noAutoDetect": "Available for Windows, macOS, and Linux"
+}

libs/remix-ui/desktop-download/README.md

@@ -0,0 +1,139 @@
+# Desktop Download Component
+
+A React component for downloading the latest Remix Desktop application from GitHub releases.
+
+## Features
+
+- **Auto OS Detection**: Automatically detects the user's operating system (Windows, macOS, Linux) and suggests the appropriate download
+- **Architecture Support**: Detects Apple Silicon Macs and provides ARM64 builds when available
+- **Smart Caching**: Caches release data for 30 minutes to reduce API calls
+- **Internationalization**: Fully supports i18n with FormattedMessage components
+- **Responsive Design**: Works on both desktop and mobile devices
+- **Error Handling**: Graceful fallback when GitHub API is unavailable
+
+## Usage
+
+```tsx
+import { DesktopDownload } from '@remix-ui/desktop-download'
+
+function MyComponent() {
+  return (
+    <div>
+      {/* Compact layout with tracking */}
+      <DesktopDownload trackingContext="navbar" />
+
+      {/* Full layout */}
+      <DesktopDownload compact={false} trackingContext="home" />
+
+      {/* Span variant for dropdowns */}
+      <DesktopDownload variant="span" trackingContext="dropdown" />
+    </div>
+  )
+}
+```
+
+### Compact Layout (Default)
+Perfect for navigation bars, toolbars, or anywhere space is limited. Shows a button with "Download Remix Desktop {OS} {version}" and a small muted link to other releases below.
+
+```tsx
+<DesktopDownload />
+<DesktopDownload compact={true} />
+```
+
+### Full Layout
+Great for landing pages, cards, or dedicated download sections. Shows detailed information including release date, file size, and platform-specific icons.
+
+```tsx
+<DesktopDownload compact={false} />
+```
+
+### Span Variant
+Perfect for dropdown items or anywhere you need a simple link without button styling.
+
+```tsx
+<DesktopDownload variant="span" />
+```
+
+### With custom styling
+
+```tsx
+<DesktopDownload className="my-custom-class" compact={false} />
+<DesktopDownload style={{ color: '#007bff', fontSize: '14px' }} />
+<DesktopDownload variant="span" style={{ fontWeight: 'bold' }} />
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `className` | `string` | `''` | Additional CSS classes |
+| `compact` | `boolean` | `true` | Use compact layout |
+| `variant` | `'button' \| 'span'` | `'button'` | Display variant |
+| `style` | `CSSProperties` | `{}` | Inline styles |
+| `trackingContext` | `string` | `'unknown'` | Context for Matomo analytics (e.g., 'hometab', 'dropdown', 'navbar') |
+
+## Analytics Tracking
+
+The component includes automatic Matomo analytics tracking for all download interactions. Set the `trackingContext` prop to identify where the component is used:
+
+```tsx
+<DesktopDownload trackingContext="hometab" />
+```
+
+**Tracking Events:**
+- Category: `desktopDownload`
+- Action: `{context}-{variant}` (e.g., `hometab-compact`, `dropdown-span`)
+- Name: `{platform}-{filename}` or `releases-page` for fallbacks
+
+**Examples:**
+- `['trackEvent', 'desktopDownload', 'hometab-compact', 'linux-remix-desktop_1.1.0_amd64.deb']`
+- `['trackEvent', 'desktopDownload', 'dropdown-span', 'windows-remix-desktop-1.1.0-setup.exe']`
+- `['trackEvent', 'desktopDownload', 'navbar-full-fallback', 'releases-page']`
+
+## Platform Support
+
+The component automatically detects and provides downloads for:
+
+- **Windows**: `.exe` installer
+- **macOS**: `.dmg` disk image (ARM64 for Apple Silicon, Intel for older Macs)
+- **Linux**: `.deb` package (with `.AppImage` fallback)
+
+## API
+
+The component fetches release data from:
+`https://api.github.com/repos/remix-project-org/remix-desktop/releases/latest`
+
+## Caching
+
+Release data is cached in localStorage for 30 minutes to reduce GitHub API calls and improve performance.
+
+## Dependencies
+
+- React 18+
+- @remix-ui/helper (for CustomTooltip)
+- react-intl (for internationalization)
+- Bootstrap CSS classes (for styling)
+- FontAwesome icons (for platform icons)
+
+## Internationalization
+
+The component is fully internationalized using react-intl. Translation strings are located in:
+
+- `apps/remix-ide/src/app/tabs/locales/en/desktopDownload.json` - All translation keys for the component
+
+### Translation Keys
+
+| Key | Default Message | Description |
+|-----|-----------------|-------------|
+| `desktopDownload.loading` | "Loading desktop app info..." | Loading state message |
+| `desktopDownload.error` | "Unable to load desktop app. Check the {link} for downloads." | Error fallback message |
+| `desktopDownload.title` | "Remix Desktop" | Main title in full layout |
+| `desktopDownload.releaseDate` | "Released {date}" | Release date display |
+| `desktopDownload.downloadSpan` | "Download Remix Desktop {platform} {version}" | Span variant with platform |
+| `desktopDownload.downloadSpanGeneric` | "Download Remix Desktop {version}" | Span variant without platform |
+| `desktopDownload.downloadCompactFull` | "Download Remix Desktop {platform} {version}" | Compact button with platform |
+| `desktopDownload.downloadCompactGeneric` | "Download Remix Desktop {version}" | Compact button without platform |
+| `desktopDownload.downloadButton` | "Download for {platform}" | Full layout button text |
+| `desktopDownload.viewReleases` | "View Downloads" | Fallback button text |
+| `desktopDownload.otherVersions` | "Other versions and platforms" | Link to releases page |
+| `desktopDownload.noAutoDetect` | "Available for Windows, macOS, and Linux" | Platform availability message |

libs/remix-ui/desktop-download/index.ts

@@ -0,0 +1 @@
+export * from './lib/desktop-download'

libs/remix-ui/desktop-download/lib/desktop-download.css

@@ -0,0 +1,98 @@
+.desktop-download {
+  max-width: 350px;
+}
+
+.desktop-download.compact {
+  max-width: none;
+}
+
+.desktop-download.compact .btn {
+  white-space: normal; /* Allow text wrapping */
+  text-align: center;
+  line-height: 1.3;
+  min-height: 2.5rem; /* Ensure consistent button height */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.desktop-download.compact .text-muted {
+  font-size: 0.75rem;
+  text-align: center;
+}
+
+.desktop-download.span-variant {
+  max-width: none;
+}
+
+.desktop-download.span-variant a {
+  color: inherit !important;
+  text-decoration: none !important;
+  position: relative;
+  z-index: 10;
+}
+
+.desktop-download.span-variant a:hover {
+  color: inherit !important;
+  opacity: 0.8;
+}
+
+.desktop-download.span-variant .d-flex {
+  pointer-events: auto;
+}
+
+.desktop-download .btn {
+  border-radius: 8px;
+  font-weight: 500;
+  transition: all 0.2s ease;
+  white-space: normal; /* Allow text wrapping on all buttons */
+  text-align: center;
+  line-height: 1.3;
+}
+
+.desktop-download .btn:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.desktop-download .badge {
+  font-size: 0.75rem;
+  padding: 0.25rem 0.5rem;
+  border-radius: 4px;
+}
+
+.desktop-download .text-muted a:hover {
+  text-decoration: underline !important;
+}
+
+.desktop-download .spinner-border-sm {
+  width: 1rem;
+  height: 1rem;
+}
+
+.desktop-download .fab,
+.desktop-download .fas,
+.desktop-download .far {
+  min-width: 1.2rem;
+}
+
+/* Dark mode support - removed custom colors to use app defaults */
+
+@media (max-width: 768px) {
+  .desktop-download.full {
+    max-width: 100%;
+  }
+
+  .desktop-download.full .btn {
+    width: 100%;
+    justify-content: center;
+  }
+
+  .desktop-download.full h5 {
+    font-size: 1.1rem;
+  }
+
+  .desktop-download.compact .btn {
+    font-size: 0.875rem;
+  }
+}