import {html} from 'htm/preact'; import {Component, render} from 'preact'; import Settings from '../settings.js'; import { Link, createReportTemplate, initializeGlobals, } from '../utilities/exports.js'; import {AppContext} from './context.js'; import {features} from './features.js'; window.addEventListener('load', async () => { initializeGlobals(); const settings = await Settings.fromSyncStorage(); render( html`<${App} manifest=${settings.manifest()} settings=${settings} />`, document.body, ); }); type Props = { manifest: TRXManifest; settings: Settings; }; type State = { activeFeature: string; enabledFeatures: Set; }; class App extends Component { state: State; constructor(props: Props) { super(props); const {settings} = props; this.state = { activeFeature: settings.data.latestActiveFeatureTab, enabledFeatures: this.getEnabledFeatures(), }; } getEnabledFeatures = (): Set => { return new Set( Object.entries(this.props.settings.features) .filter(([_, value]) => value) .map(([key, _]) => key), ); }; setActiveFeature = (feature: string) => { const {settings} = this.props; settings.data.latestActiveFeatureTab = feature; void settings.save(); this.setState({activeFeature: feature}); }; toggleFeature = (feature: string) => { const {settings} = this.props; settings.features[feature] = !settings.features[feature]; void settings.save(); const features = this.getEnabledFeatures(); this.setState({enabledFeatures: features}); }; render() { const {manifest, settings} = this.props; const {activeFeature, enabledFeatures} = this.state; // Create the version link for the header. const version = manifest.version; const versionURL = encodeURI( `https://gitlab.com/tildes-community/tildes-reextended/-/tags/${version}`, ); const versionLink = html` <${Link} class="version" text="v${version}" url="${versionURL}" /> `; // Create the GitLab report a bug link for the footer. const gitlabTemplate = createReportTemplate('gitlab', version); const gitlabURL = encodeURI( `https://gitlab.com/tildes-community/tildes-reextended/issues/new?issue[description]=${gitlabTemplate}`, ); const gitlabLink = html`<${Link} text="GitLab" url="${gitlabURL}" />`; // Create the Tildes report a bug link for the footer. const tildesReportTemplate = createReportTemplate('tildes', version); const tildesURL = encodeURI( `https://tildes.net/user/Community/new_message?subject=Tildes ReExtended Bug&message=${tildesReportTemplate}`, ); const tildesLink = html`<${Link} text="Tildes" url="${tildesURL}" />`; const asideElements = features.map( ({key, value}) => html`
  • ${value}
  • `, ); const mainElements = features.map( ({key, value, component}) => html` <${component()} class="${activeFeature === key ? '' : 'trx-hidden'}" enabled="${enabledFeatures.has(key)}" feature=${key} key=${key} title="${value}" /> `, ); return html` <${AppContext.Provider} value=${{ settings, setActiveFeature: this.setActiveFeature, toggleFeature: this.toggleFeature, }} >
    ${mainElements}

    Report a bug via ${gitlabLink} or ${tildesLink}.

    © Tildes Community and Contributors

    `; } }