feat: component viewer (#781)

* wip: component viewer

* feat: get component status from component viewer

* fix: remove unused property

* chore(deps): snjs 2.29.0

* fix: import location

app/assets/javascripts/components/ComponentView/OfflineRestricted.tsx

@@ -1,14 +1,6 @@
 import { FunctionalComponent } from 'preact';
 
-interface IProps {
-  isReloading: boolean;
-  reloadStatus: () => void;
-}
-
-export const OfflineRestricted: FunctionalComponent<IProps> = ({
-  isReloading,
-  reloadStatus,
-}) => {
+export const OfflineRestricted: FunctionalComponent = () => {
   return (
     <div className={'sn-component'}>
       <div className={'sk-panel static'}>
@@ -16,38 +8,29 @@ export const OfflineRestricted: FunctionalComponent<IProps> = ({
           <div className={'sk-panel-section stretch'}>
             <div className={'sk-panel-column'} />
             <div className={'sk-h1 sk-bold'}>
-              You have restricted this component to be used offline only.
+              You have restricted this component to not use a hosted version.
             </div>
             <div className={'sk-subtitle'}>
-              Offline components are not available in the web application.
+              Locally-installed components are not available in the web
+              application.
             </div>
             <div className={'sk-panel-row'} />
             <div className={'sk-panel-row'}>
               <div className={'sk-panel-column'}>
-                <div className={'sk-p'}>You can either:</div>
+                <div className={'sk-p'}>
+                  To continue, choose from the following options:
+                </div>
                 <ul>
                   <li className={'sk-p'}>
-                    Enable the Hosted option for this component by opening
+                    Enable the Hosted option for this component by opening the
                     Preferences {'>'} General {'>'} Advanced Settings menu and{' '}
                     toggling 'Use hosted when local is unavailable' under this
-                    components's options. Then press Reload below.
+                    component's options. Then press Reload.
                   </li>
                   <li className={'sk-p'}>Use the desktop application.</li>
                 </ul>
               </div>
             </div>
-            <div className={'sk-panel-row'}>
-              {isReloading ? (
-                <div className={'sk-spinner info small'} />
-              ) : (
-                <button
-                  className={'sn-button small info'}
-                  onClick={() => reloadStatus()}
-                >
-                  Reload
-                </button>
-              )}
-            </div>
           </div>
         </div>
       </div>