Re-enable 'Purchases' page

Closes 1284

## Notes
- Re-used the Library page, but disabled the [Downloads | Purchases] tabs.
- Access from Settings > Accounts > Purchases

static/app-strings.json

@@ -934,6 +934,7 @@
   "Discover Channels": "Discover Channels",
   "Downloads": "Downloads",
   "Purchases": "Purchases",
+  "View your purchased content.": "View your purchased content.",
   "No purchases found.": "No purchases found.",
   "Drop here to publish!": "Drop here to publish!",
   "Trending for %tagName%": "Trending for %tagName%",

ui/component/settingAccount/view.jsx

@@ -103,6 +103,10 @@ export default function SettingAccount(props: Props) {
                 />
               </SettingsRow>
             )}
+
+            <SettingsRow title={__('Purchases')} subtitle={__('View your purchased content.')}>
+              <Button button="inverse" label={__('Manage')} icon={ICONS.ARROW_RIGHT} navigate={`/$/${PAGES.LIBRARY}`} />
+            </SettingsRow>
           </>
         }
       />

ui/constants/pageTitles.js

@@ -16,12 +16,12 @@ export const PAGE_TITLE = {
   [PAGES.FINANCE]: 'Finance 2.0',
   [PAGES.GAMING]: 'Gaming',
   [PAGES.GENERAL]: 'Cheese',
-  [PAGES.SPORTS]: 'Sports',
   [PAGES.LAB]: 'Lab',
   [PAGES.MOVIES]: 'Movies',
   [PAGES.MUSIC]: 'Music',
   [PAGES.NEWS]: 'News & Politics',
   [PAGES.POP_CULTURE]: 'Pop Culture',
+  [PAGES.SPORTS]: 'Sports',
   [PAGES.TECH]: 'Tech',
   [PAGES.UNIVERSE]: 'Universe',
   [PAGES.WILD_WEST]: 'Wild West',
@@ -38,6 +38,7 @@ export const PAGE_TITLE = {
   [PAGES.FYP]: 'Recommended Videos (Alpha)',
   [PAGES.HELP]: 'Help',
   [PAGES.INVITE]: 'Invite',
+  [PAGES.LIBRARY]: 'Purchases',
   [PAGES.LISTS]: 'Lists',
   [PAGES.LIVESTREAM]: 'Go Live on Odysee',
   [PAGES.LIVESTREAM_CURRENT]: 'Live (Experimental)',

ui/page/fileListDownloaded/view.jsx

@@ -31,6 +31,8 @@ type Props = {
 const VIEW_DOWNLOADS = 'view_download';
 const VIEW_PURCHASES = 'view_purchases';
 
+const ENABLE_DOWNLOADS_TAB = false;
+
 function FileListDownloaded(props: Props) {
   const {
     history,
@@ -57,39 +59,29 @@ function FileListDownloaded(props: Props) {
   return (
     <>
       <div className="section__header--actions">
-        <div className="section__actions--inline">
+        {ENABLE_DOWNLOADS_TAB && (
-          <Button
+          <div className="section__actions--inline">
-            icon={ICONS.LIBRARY}
+            <Button
-            button="alt"
+              icon={ICONS.LIBRARY}
-            label={__('Downloads')}
+              button="alt"
-            className={classnames(`button-toggle`, {
+              label={__('Downloads')}
-              'button-toggle--active': viewMode === VIEW_DOWNLOADS,
+              className={classnames(`button-toggle`, {
-            })}
+                'button-toggle--active': viewMode === VIEW_DOWNLOADS,
-            onClick={() => setViewMode(VIEW_DOWNLOADS)}
+              })}
-          />
+              onClick={() => setViewMode(VIEW_DOWNLOADS)}
-          <Button
+            />
-            icon={ICONS.PURCHASED}
+            <Button
-            button="alt"
+              icon={ICONS.PURCHASED}
-            label={__('Purchases')}
+              button="alt"
-            className={classnames(`button-toggle`, {
+              label={__('Purchases')}
-              'button-toggle--active': viewMode === VIEW_PURCHASES,
+              className={classnames(`button-toggle`, {
-            })}
+                'button-toggle--active': viewMode === VIEW_PURCHASES,
-            onClick={() => setViewMode(VIEW_PURCHASES)}
+              })}
-          />
+              onClick={() => setViewMode(VIEW_PURCHASES)}
-          {loading && <Spinner type="small" />}
+            />
-        </div>
+            {loading && <Spinner type="small" />}
-
+          </div>
-        <Form onSubmit={() => {}} className="wunderbar--inline">
+        )}
-          <Icon icon={ICONS.SEARCH} />
-          <FormField
-            className="wunderbar__input--inline"
-            onChange={handleInputChange}
-            value={query}
-            type="text"
-            name="query"
-            placeholder={__('Search')}
-          />
-        </Form>
       </div>
       {IS_WEB && viewMode === VIEW_DOWNLOADS ? (
         <div className="main--empty">
@@ -108,6 +100,20 @@ function FileListDownloaded(props: Props) {
       ) : (
         <div>
           <ClaimList
+            header={<h1 className="section__title">{__('Purchases')}</h1>}
+            headerAltControls={
+              <Form onSubmit={() => {}} className="wunderbar--inline">
+                <Icon icon={ICONS.SEARCH} />
+                <FormField
+                  className="wunderbar__input--inline"
+                  onChange={handleInputChange}
+                  value={query}
+                  type="text"
+                  name="query"
+                  placeholder={__('Search')}
+                />
+              </Form>
+            }
             renderProperties={() => null}
             empty={
               viewMode === VIEW_PURCHASES && !query ? (

ui/page/library/view.jsx

@@ -31,7 +31,7 @@ function LibraryPage(props: Props) {
   }, [doPurchaseList, page]);
 
   return (
-    <Page>
+    <Page noFooter noSideNavigation settingsPage backout={{ title: __('Purchases'), backLabel: __('Back') }}>
       {loading && !hasDownloads && (
         <div className="main--empty">
           <Spinner delayed />