fix: Remove reach dep in favor of radix-ui

- Add env variable for app version
- Add env variable for website

.env

@@ -0,0 +1,2 @@
+REACT_APP_WEBSITE_URL="https://federike.social"
+REACT_APP_VERSION=$npm_package_version

package.json

@@ -3,10 +3,10 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@radix-ui/react-collapsible": "^1.0.1",
     "@radix-ui/react-popover": "^1.0.2",
     "@radix-ui/react-radio-group": "^1.1.0",
     "@radix-ui/react-select": "^1.1.2",
-    "@reach/disclosure": "^0.18.0",
     "@tanstack/react-query": "^4.16.1",
     "@tanstack/react-query-devtools": "^4.16.1",
     "@tanstack/react-table": "^8.5.30",

src/containers/list/list-row/index.js

@@ -1,9 +1,5 @@
 import React from "react";
-import {
-  Disclosure,
-  DisclosureButton,
-  DisclosurePanel,
-} from "@reach/disclosure";
+import * as Collapsible from "@radix-ui/react-collapsible";
 import { useDrop } from "react-dnd";
 
 import ListDeleteButton from "../list-delete-button";
@@ -37,7 +33,7 @@ function ListRow({ title, id: listId, is_exclusive, selectedItems }) {
 
   return (
     <li className="c-list-row | stack" data-open={open}>
-      <Disclosure open={open} onChange={() => setOpen(!open)}>
+      <Collapsible.Root open={open} onOpenChange={setOpen}>
         <header
           className="c-list-row-header | cluster"
           ref={drop}
@@ -59,24 +55,26 @@ function ListRow({ title, id: listId, is_exclusive, selectedItems }) {
             </>
           ) : (
             <>
-              <DisclosureButton className="c-list-row-disclosure-button">
-                <span className="icon">{open ? "↓" : "₸"}</span>
-              </DisclosureButton>
+              <Collapsible.Trigger asChild>
+                <button className="c-list-row-disclosure-button">
+                  <span className="icon">{open ? "↓" : "₸"}</span>
+                </button>
+              </Collapsible.Trigger>
               <span className="c-list-row-label">{title}</span>
               <ListDeleteButton listId={listId} />
             </>
           )}
         </header>
-        <DisclosurePanel>
+        <Collapsible.Content>
           <ListEditForm
             listId={listId}
             title={title}
             onSuccess={() => {
               setOpen(false);
             }}
           />
-        </DisclosurePanel>
-      </Disclosure>
+        </Collapsible.Content>
+      </Collapsible.Root>
     </li>
   );
 }

src/index.js

@@ -16,6 +16,9 @@ import reportWebVitals from "./reportWebVitals";
 
 import "styles/styles.css";
 import ThemeUpdateRoot from "containers/theme/theme-update-root";
+const { REACT_APP_VERSION, REACT_APP_WEBSITE_URL } = process.env;
+
+console.info("Federike", REACT_APP_WEBSITE_URL, REACT_APP_VERSION);
 
 const queryClient = new QueryClient({
   defaultOptions: {

src/lib/mastodon/provider.js

@@ -4,10 +4,10 @@ import axios from "axios";
 const MastodonAppContext = React.createContext();
 
 const LOCAL_STORAGE_KEY = "FEDERIKE_MASTODON_APP";
-const WEBSITE = "http://localhost:3000";
+const WEBSITE = process.env.REACT_APP_WEBSITE_URL;
 const SCOPES = ["read", "write", "follow", "push"];
 const CLIENT_NAME = "Federike";
-const REDIRECT_URI = `http://localhost:3000/settings/instances/add`;
+const REDIRECT_URI = `${WEBSITE}/settings/instances/add`;
 
 async function getAccessTokenFromAuthCode(props = {}) {
   const {
@@ -114,22 +114,18 @@ function MastodonAppProvider(props) {
   async function redirectToOauth(props = {}) {
     const { instance } = props;
 
-    let { app } = state;
-
-    if (!app) {
-      const { data } = await registerApp(props);
-      const {
-        client_id: clientId,
-        client_secret: clientSecret,
-        vapid_key: vapidKey,
-      } = data;
+    const { data } = await registerApp(props);
+    const {
+      client_id: clientId,
+      client_secret: clientSecret,
+      vapid_key: vapidKey,
+    } = data;
 
-      app = {
-        clientId,
-        clientSecret,
-        vapidKey,
-      };
-    }
+    const app = {
+      clientId,
+      clientSecret,
+      vapidKey,
+    };
 
     const loginURL = new URL(`https://${instance}/oauth/authorize`);
     loginURL.searchParams.append("client_id", app.clientId);

src/router.js

@@ -5,7 +5,6 @@ import Root from "routes/root/root";
 
 import Followers from "routes/followers";
 import Following from "routes/following";
-import Lists from "routes/lists";
 
 import SettingsRoot from "routes/settings";
 import Settings from "routes/settings/settings";

src/routes/root/public.js

@@ -1,6 +1,8 @@
 import { Link } from "react-router-dom";
 import { ReactComponent as Logo } from "logo.svg";
 
+const { REACT_APP_VERSION } = process.env;
+
 function Public() {
   return (
     <section className="r-public | wrapper">
@@ -19,6 +21,9 @@ function Public() {
             to start.
           </p>
         </div>
+        <footer>
+          <span>V.{REACT_APP_VERSION}</span>
+        </footer>
       </div>
     </section>
   );

src/routes/root/styles.css

@@ -1,14 +1,20 @@
+.r-public {
+  display: flex;
+  flex-flow: row;
+  align-items: center;
+  justify-content: center;
+}
+
 .r-public-inner {
+  width: clamp(100px, 50vw, 300px);
   align-items: center;
   justify-content: center;
   padding: var(--spacing-02);
   background-color: var(--color-bg-alt);
-  /* margin-right: auto; */
-  /* width: min-content; */
 }
 
 .r-public .logo {
+  width: 100%;
   display: block;
-  width: clamp(100px, 50vw, 300px);
   height: auto;
 }

src/routes/settings/instances/add/index.js

@@ -9,6 +9,8 @@ import Spinner from "components/spinner";
 
 import "./styles.css";
 
+const { REACT_APP_VERSION } = process.env;
+
 function Add() {
   const [isLoading, setIsLoading] = React.useState(false);
   const ref = React.useRef(false);
@@ -56,6 +58,9 @@ function Add() {
           {isLoading || code != null ? <Spinner /> : "Login"}
         </button>
       </form>
+      <footer>
+        <span>V.{REACT_APP_VERSION}</span>
+      </footer>
     </div>
   );
 }

src/routes/settings/instances/add/styles.css

@@ -5,8 +5,8 @@ div.r-instances-add {
   gap: 0;
 }
 
-.r-instances-add-header {
-  border-bottom: var(--border);
+.r-instances-add > *:not(:first-child) {
+  border-top: var(--border);
 }
 
 .r-instances-add-title {
@@ -20,3 +20,12 @@ div.r-instances-add {
 .r-instances-add form {
   padding: var(--spacing-02);
 }
+
+.r-instances-add footer {
+  padding: var(--spacing-01) var(--spacing-02);
+  font-size: var(--size-400);
+  text-align: center;
+  font-style: italic;
+  font-variation-settings: "slnt" -10;
+  font-variant-numeric: tabular-nums;
+}

src/routes/settings/settings.js

@@ -3,6 +3,7 @@ import { Link } from "react-router-dom";
 import { useMastodonApp } from "lib/mastodon/provider";
 
 import ThemeRadioGroup from "containers/theme/theme-radio-group";
+const { REACT_APP_VERSION } = process.env;
 
 function Settings() {
   const { auth, app, clear } = useMastodonApp();
@@ -30,6 +31,9 @@ function Settings() {
           <Link to={"instances/add"}>Login</Link>
         )}
       </section>
+      <footer>
+        <span>V.{REACT_APP_VERSION}</span>
+      </footer>
     </div>
   );
 }

src/routes/settings/styles.css

@@ -24,3 +24,12 @@ div.r-settings-root {
 .r-settings-account-wrapper {
   align-items: center;
 }
+
+.r-settings-root footer {
+  padding: var(--spacing-01) var(--spacing-02);
+  font-size: var(--size-400);
+  text-align: center;
+  font-style: italic;
+  font-variation-settings: "slnt" -10;
+  font-variant-numeric: tabular-nums;
+}

yarn.lock

@@ -1621,6 +1621,21 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/react-primitive" "1.0.1"
 
+"@radix-ui/react-collapsible@^1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-collapsible/-/react-collapsible-1.0.1.tgz#7184312ce18e703628b9ef75cdc44b896d6f06b1"
+  integrity sha512-0maX4q91iYa4gjt3PsNf7dq/yqSR+HGAE8I5p54dQ6gnveS+ETWlMoijxrhmgV1k8svxpm34mQAtqIrJt4XZmA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/primitive" "1.0.0"
+    "@radix-ui/react-compose-refs" "1.0.0"
+    "@radix-ui/react-context" "1.0.0"
+    "@radix-ui/react-id" "1.0.0"
+    "@radix-ui/react-presence" "1.0.0"
+    "@radix-ui/react-primitive" "1.0.1"
+    "@radix-ui/react-use-controllable-state" "1.0.0"
+    "@radix-ui/react-use-layout-effect" "1.0.0"
+
 "@radix-ui/react-collection@1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-collection/-/react-collection-1.0.1.tgz#259506f97c6703b36291826768d3c1337edd1de5"
@@ -1889,32 +1904,6 @@
   dependencies:
     "@babel/runtime" "^7.13.10"
 
-"@reach/auto-id@0.18.0":
-  version "0.18.0"
-  resolved "https://registry.yarnpkg.com/@reach/auto-id/-/auto-id-0.18.0.tgz#4b97085cd1cf1360a9bedc6e9c78e97824014f0d"
-  integrity sha512-XwY1IwhM7mkHZFghhjiqjQ6dstbOdpbFLdggeke75u8/8icT8uEHLbovFUgzKjy9qPvYwZIB87rLiR8WdtOXCg==
-  dependencies:
-    "@reach/utils" "0.18.0"
-
-"@reach/disclosure@^0.18.0":
-  version "0.18.0"
-  resolved "https://registry.yarnpkg.com/@reach/disclosure/-/disclosure-0.18.0.tgz#a68fca7f043258512353790400cb756aa6c3be57"
-  integrity sha512-09WUO8CouTgtTjWONZLf/YEzatsUZAAs9hpfA6a4Bq918jQtVLffytShlSD7u0evzU0keZBcmIM+jV/WI/K1VA==
-  dependencies:
-    "@reach/auto-id" "0.18.0"
-    "@reach/polymorphic" "0.18.0"
-    "@reach/utils" "0.18.0"
-
-"@reach/polymorphic@0.18.0":
-  version "0.18.0"
-  resolved "https://registry.yarnpkg.com/@reach/polymorphic/-/polymorphic-0.18.0.tgz#2fe42007a774e06cdbc8e13e0d46f2dc30f2f1ed"
-  integrity sha512-N9iAjdMbE//6rryZZxAPLRorzDcGBnluf7YQij6XDLiMtfCj1noa7KyLpEc/5XCIB/EwhX3zCluFAwloBKdblA==
-
-"@reach/utils@0.18.0":
-  version "0.18.0"
-  resolved "https://registry.yarnpkg.com/@reach/utils/-/utils-0.18.0.tgz#4f3cebe093dd436eeaff633809bf0f68f4f9d2ee"
-  integrity sha512-KdVMdpTgDyK8FzdKO9SCpiibuy/kbv3pwgfXshTI6tEcQT1OOwj7BAksnzGC0rPz0UholwC+AgkqEl3EJX3M1A==
-
 "@react-dnd/asap@^5.0.1":
   version "5.0.2"
   resolved "https://registry.yarnpkg.com/@react-dnd/asap/-/asap-5.0.2.tgz#1f81f124c1cd6f39511c11a881cfb0f715343488"