botserver/web/app/theme-provider.html

<!-- Riot component: theme-provider.html (converted from app/theme-provider.tsx) -->
<script >
  // This component replicates the ThemeProvider logic without React.
  // It manages theme selection and persists the choice in localStorage.
  export default {
    // Component state
    data() {
      return {
        themes: [
          { name: '3dbevel', label: '3dbevel', cssFile: '/themes/3dbevel.css' },
          { name: 'arcadeflash', label: 'Arcadeflash', cssFile: '/themes/arcadeflash.css' },
          { name: 'jazzage', label: 'Jazzage', cssFile: '/themes/jazzage.css' },
          { name: 'mellowgold', label: 'Mellowgold', cssFile: '/themes/mellowgold.css' },
          { name: 'midcenturymod', label: 'Midcenturymod', cssFile: '/themes/midcenturymod.css' },
          { name: 'polaroidmemories', label: 'Polaroidmemories', cssFile: '/themes/polaroidmemories.css' },
          { name: 'retrowave', label: 'Retrowave', cssFile: '/themes/retrowave.css' },
          { name: 'saturdaycartoons', label: 'Saturdaycartoons', cssFile: '/themes/saturdaycartoons.css' },
          { name: 'typewriter', label: 'Typewriter', cssFile: '/themes/typewriter.css' },
          { name: 'vapordream', label: 'Vapordream', cssFile: '/themes/vapordream.css' },
          { name: 'xeroxui', label: 'Xeroxui', cssFile: '/themes/xeroxui.css' },
          { name: 'y2kglow', label: 'Y2kglow', cssFile: '/themes/y2kglow.css' },
          { name: 'xtreegold', label: 'XTreeGold', cssFile: '/themes/xtreegold.css' },
        ],
        currentTheme: null,
        isLoaded: false,
      };
    },

    // Lifecycle: component mounted
    mounted() {
      // Load saved theme from localStorage or default to first theme
      const savedThemeName = localStorage.getItem('theme') || this.themes[0].name;
      const savedTheme = this.themes.find(t => t.name === savedThemeName) || this.themes[0];
      this.setTheme(savedTheme.name);
      this.isLoaded = true;
    },

    // Methods
    setTheme(themeName) {
      const theme = this.themes.find(t => t.name === themeName);
      if (!theme) return;

      // Remove any existing theme link
      const existingLink = document.getElementById('theme-stylesheet');
      if (existingLink) {
        document.head.removeChild(existingLink);
      }

      // Create new link element
      const link = document.createElement('link');
      link.id = 'theme-stylesheet';
      link.rel = 'stylesheet';
      link.href = theme.cssFile;
      link.onload = () => {
        this.currentTheme = theme;
        localStorage.setItem('theme', theme.name);
      };
      document.head.appendChild(link);
    },

    // Expose a simple API for other components
    getTheme() {
      return this.currentTheme;
    },

    getThemes() {
      return this.themes;
    },
  };
</script>

<style>
  /* No visual output needed for the provider */
</style>

<!-- No markup needed; this component is used for its side‑effects -->
</write_to_file>
<task_progress>
- [x] Create comprehensive todo list
- [x] Analyze React components to convert
- [x] Convert app/client-nav.tsx to Riot component (client-nav.html)
- [x] Update imports and usage (removed Nav import and usage from layout)
- [x] Remove React dependencies from layout.tsx (file cleared)
- [x] Convert remaining .tsx files (starting with theme-provider.tsx)
- [ ] Verify application works with Riot
- [ ] Clean up leftover React files
</task_progress>
</write_to_file>