Merge pull request #7 from cheeaun/main

Update from main

src/app.css

@@ -24,9 +24,9 @@ a.mention span {
   text-decoration-line: underline;
   text-decoration-color: inherit;
 }
-a.mention:has(span).hashtag {
+/* a.mention:has(span).hashtag {
   color: var(--link-light-color);
-}
+} */
 a.mention span {
   color: var(--text-color);
 }

src/components/account.jsx

@@ -9,7 +9,7 @@ import store from '../utils/store';
 import Avatar from './avatar';
 import NameText from './name-text';
 
-export default ({ account }) => {
+function Account({ account }) {
   const [uiState, setUIState] = useState('default');
   const isString = typeof account === 'string';
   const [info, setInfo] = useState(isString ? null : account);
@@ -181,4 +181,6 @@ export default ({ account }) => {
       )}
     </div>
   );
-};
+}
+
+export default Account;

src/components/avatar.jsx

@@ -8,7 +8,7 @@ const SIZES = {
   xxl: 50,
 };
 
-export default ({ url, size, alt = '' }) => {
+function Avatar({ url, size, alt = '' }) {
   size = SIZES[size] || size || SIZES.m;
   return (
     <span
@@ -24,4 +24,6 @@ export default ({ url, size, alt = '' }) => {
       )}
     </span>
   );
-};
+}
+
+export default Avatar;

src/components/icon.jsx

@@ -43,7 +43,7 @@ const ICONS = {
   plus: 'mingcute:add-circle-line',
 };
 
-export default ({ icon, size = 'm', alt, title, class: className = '' }) => {
+function Icon({ icon, size = 'm', alt, title, class: className = '' }) {
   if (!icon) return null;
 
   const iconSize = SIZES[size];
@@ -74,4 +74,6 @@ export default ({ icon, size = 'm', alt, title, class: className = '' }) => {
       </iconify-icon>
     </div>
   );
-};
+}
+
+export default Icon;

src/components/loader.jsx

@@ -1,6 +1,7 @@
 import './loader.css';
 
-export default ({ abrupt, hidden }) => (
+function Loader({ abrupt, hidden }) {
+  return (
     <div
       class={`loader-container ${abrupt ? 'abrupt' : ''} ${
         hidden ? 'hidden' : ''
@@ -8,4 +9,7 @@ export default ({ abrupt, hidden }) => (
     >
       <div class="loader" />
     </div>
-);
+  );
+}
+
+export default Loader;

src/components/modal.jsx

@@ -4,7 +4,7 @@ import { createPortal } from 'preact/compat';
 
 const $modalContainer = document.getElementById('modal-container');
 
-export default ({ children, onClick, class: className }) => {
+function Modal({ children, onClick, class: className }) {
   if (!children) return null;
 
   const Modal = (
@@ -16,4 +16,6 @@ export default ({ children, onClick, class: className }) => {
   return createPortal(Modal, $modalContainer);
 
   // return createPortal(children, $modalContainer);
-};
+}
+
+export default Modal;

src/components/name-text.jsx

@@ -5,7 +5,7 @@ import states from '../utils/states';
 
 import Avatar from './avatar';
 
-export default ({ account, showAvatar, showAcct, short, external }) => {
+function NameText({ account, showAvatar, showAcct, short, external }) {
   const { acct, avatar, avatarStatic, id, url, displayName, username, emojis } =
     account;
 
@@ -55,4 +55,6 @@ export default ({ account, showAvatar, showAcct, short, external }) => {
       )}
     </a>
   );
-};
+}
+
+export default NameText;

src/components/status.css

@@ -312,7 +312,8 @@
   background: var(--bg-color);
 }
 .card .image {
-  min-width: 120px;
+  /* min-width: 120px; */
+  width: 50%;
   max-width: 160px;
   height: auto;
   min-height: 120px;

src/components/status.jsx

@@ -54,7 +54,8 @@ function Media({ media, showOriginal, onClick }) {
     focalBackgroundPosition = `${x.toFixed(0)}% ${y.toFixed(0)}%`;
   }
 
-  if (type === 'image') {
+  if (type === 'image' || (type === 'unknown' && previewUrl && url)) {
+    // Note: type: unknown might not have width/height
     return (
       <div
         class={`media media-image`}

src/pages/home.jsx

@@ -11,7 +11,7 @@ import store from '../utils/store';
 
 const LIMIT = 20;
 
-export default ({ hidden }) => {
+function Home({ hidden }) {
   const snapStates = useSnapshot(states);
   const [uiState, setUIState] = useState('default');
   const [showMore, setShowMore] = useState(false);
@@ -215,4 +215,6 @@ export default ({ hidden }) => {
       </div>
     </div>
   );
-};
+}
+
+export default Home;

src/pages/login.jsx

@@ -6,7 +6,7 @@ import { getAuthorizationURL, registerApplication } from '../utils/auth';
 import store from '../utils/store';
 import useTitle from '../utils/useTitle';
 
-export default () => {
+function Login() {
   useTitle('Log in');
   const instanceURLRef = useRef();
   const cachedInstanceURL = store.local.get('instanceURL');
@@ -96,4 +96,6 @@ export default () => {
       </form>
     </main>
   );
-};
+}
+
+export default Login;

src/pages/notifications.jsx

@@ -187,7 +187,7 @@ function NotificationsList({ notifications, emptyCopy }) {
   );
 }
 
-export default () => {
+function Notifications() {
   useTitle('Notifications');
   const snapStates = useSnapshot(states);
   const [uiState, setUIState] = useState('default');
@@ -271,7 +271,6 @@ export default () => {
     { today: [], yesterday: [], older: [] },
   );
   // console.log(groupedNotifications);
-
   return (
     <div class="deck-container" ref={scrollableRef}>
       <div class="timeline-deck deck">
@@ -371,4 +370,6 @@ export default () => {
       </div>
     </div>
   );
-};
+}
+
+export default Notifications;

src/pages/settings.jsx

@@ -13,7 +13,7 @@ import store from '../utils/store';
   - Dark/light/auto theme switch (done with adding/removing 'is-light' or 'is-dark' class on the body)
 */
 
-export default ({ onClose }) => {
+function Settings({ onClose }) {
   // Accounts
   const accounts = store.local.getJSON('accounts');
   const currentAccount = store.session.get('currentAccount');
@@ -206,4 +206,6 @@ export default ({ onClose }) => {
       )}
     </div>
   );
-};
+}
+
+export default Settings;

src/pages/status.jsx

@@ -14,7 +14,7 @@ import Status from '../components/status';
 import states from '../utils/states';
 import useTitle from '../utils/useTitle';
 
-export default ({ id }) => {
+function StatusPage({ id }) {
   const snapStates = useSnapshot(states);
   const [statuses, setStatuses] = useState([{ id }]);
   const [uiState, setUIState] = useState('default');
@@ -215,4 +215,6 @@ export default ({ id }) => {
       </div>
     </div>
   );
-};
+}
+
+export default StatusPage;

src/pages/welcome.jsx

@@ -3,7 +3,7 @@ import './welcome.css';
 import logo from '../assets/logo.svg';
 import useTitle from '../utils/useTitle';
 
-export default () => {
+function Welcome() {
   useTitle();
   return (
     <main id="welcome" class="box">
@@ -44,4 +44,6 @@ export default () => {
       </p>
     </main>
   );
-};
+}
+
+export default Welcome;

src/utils/enhance-content.js

@@ -2,7 +2,7 @@ import emojifyText from './emojify-text';
 
 const fauxDiv = document.createElement('div');
 
-export default (content, opts = {}) => {
+function enhanceContent(content, opts = {}) {
   const { emojis, postEnhanceDOM = () => {} } = opts;
   let enhancedContent = content;
   const dom = document.createElement('div');
@@ -64,7 +64,7 @@ export default (content, opts = {}) => {
   enhancedContent = dom.innerHTML;
 
   return enhancedContent;
-};
+}
 
 function extractTextNodes(dom) {
   const textNodes = [];
@@ -80,3 +80,5 @@ function extractTextNodes(dom) {
   }
   return textNodes;
 }
+
+export default enhanceContent;

src/utils/html-content-length.js

@@ -1,5 +1,5 @@
 const div = document.createElement('div');
-export default (html) => {
+export default function htmlContentLength(html) {
   div.innerHTML = html;
   return div.innerText.length;
-};
+}

src/utils/open-compose.js

@@ -1,4 +1,4 @@
-export default (opts) => {
+export default function openCompose(opts) {
   const url = new URL('/compose/', window.location);
   const { width: screenWidth, height: screenHeight } = window.screen;
   const left = Math.max(0, (screenWidth - 600) / 2);
@@ -20,4 +20,4 @@ export default (opts) => {
   }
 
   return newWin;
-};
+}

src/utils/useTitle.js

@@ -2,8 +2,8 @@ import { useEffect } from 'preact/hooks';
 
 const { VITE_CLIENT_NAME: CLIENT_NAME } = import.meta.env;
 
-export default (title) => {
+export default function useTitle(title) {
   useEffect(() => {
     document.title = title ? `${title} / ${CLIENT_NAME}` : CLIENT_NAME;
   }, [title]);
-};
+}