v2.0.1

* `new` support lower resolutions by switching to single letters
* `chg` control panel lower-cased to better fit the design

Author: svyatov

CHANGELOG.md

@@ -1,5 +1,10 @@
 # Changelog
 
+## v2.0.1
+
+* `new` support lower resolutions by switching to single letters
+* `chg` control panel lower-cased to better fit the design
+
 ## v2.0.0
 
 * `new` the project is rewritten with TypeScript and [Plasmo framework](https://docs.plasmo.com)

app/components/ControlPanel.tsx

@@ -12,11 +12,11 @@ const ControlPanel = (): ReactElement => {
   const [activeSort, setActiveSort] = useState<SortVariant>(lastActiveSort);
   const { parsedRows, footerRows } = useParsedRows();
   const sortButtonProps = { activeSort, setActiveSort };
-  const sortOptions: { sortBy: SortVariant; text: string }[] = [
-    { sortBy: 'points', text: 'Points' },
-    { sortBy: 'time', text: 'Time' },
-    { sortBy: 'comments', text: 'Comments' },
-    { sortBy: 'default', text: 'Original' },
+  const sortOptions: { sortBy: SortVariant; text: string; shortcut: string }[] = [
+    { sortBy: 'points', text: 'points', shortcut: 'P' },
+    { sortBy: 'time', text: 'pime', shortcut: 'T' },
+    { sortBy: 'comments', text: 'pomments', shortcut: 'C' },
+    { sortBy: 'default', text: 'peset', shortcut: 'R' },
   ];
 
   useEffect(() => {
@@ -25,13 +25,11 @@ const ControlPanel = (): ReactElement => {
 
   return (
     <>
-      <span className="hns-sort-by-label">Sort By:</span>
+      <span className="hns-sort-by-label">sort by:</span>
 
       {sortOptions.map((option, index) => (
         <Fragment key={option.sortBy}>
-          <SortButton sortBy={option.sortBy} {...sortButtonProps}>
-            {option.text}
-          </SortButton>
+          <SortButton {...sortButtonProps} {...option} />
           {index < sortOptions.length - 1 && ' · '}
         </Fragment>
       ))}

app/components/SortButton.tsx

@@ -1,5 +1,5 @@
 import clsx from 'clsx';
-import { useCallback, type ReactElement, type ReactNode } from 'react';
+import { useCallback, type ReactElement } from 'react';
 
 import type { SortVariant } from '~app/types';
 import { setLastActiveSort } from '~app/utils/storage';
@@ -8,10 +8,11 @@ type ControlPanelButtonProps = {
   sortBy: SortVariant;
   activeSort: SortVariant;
   setActiveSort: (sortBy: SortVariant) => void;
-  children: ReactNode;
+  text: string;
+  shortcut: string;
 };
 
-const SortButton = ({ sortBy, activeSort, setActiveSort, children }: ControlPanelButtonProps): ReactElement => {
+const SortButton = ({ sortBy, activeSort, setActiveSort, text, shortcut }: ControlPanelButtonProps): ReactElement => {
   const isActive = activeSort === sortBy;
   const defaultSort = sortBy === 'default';
 
@@ -26,7 +27,8 @@ const SortButton = ({ sortBy, activeSort, setActiveSort, children }: ControlPane
       onClick={updateActiveSort}
       className={clsx('hns-btn', isActive && 'hns-active')}
       title={defaultSort ? 'Original sort order' : `Sort by ${sortBy}`}>
-      {children}
+      <span className="hns-btn-text">{text}</span>
+      <span className="hns-btn-shortcut">{shortcut}</span>
     </span>
   );
 };

content.css

@@ -15,6 +15,14 @@
   margin: 0 5px;
 }
 
+.hns-btn-text {
+  display: none;
+}
+
+.hns-btn-shortcut {
+  display: inline;
+}
+
 .hns-active {
   color: #fff;
 }
@@ -27,3 +35,13 @@
   display: inline-block;
   margin: 0 10px;
 }
+
+@media screen and (min-width: 1280px) {
+  .hns-btn-text {
+    display: inline;
+  }
+
+  .hns-btn-shortcut {
+    display: none;
+  }
+}

package.json

@@ -1,13 +1,14 @@
 {
   "name": "hacked_news_sorted",
   "displayName": "Hacker News Sorted",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "Gives the ability to sort posts on the news.ycombinator.com site by the number of points, time, or comments.",
   "author": "Leonid Svyatov <leonid@svyatov.com>",
   "scripts": {
     "dev": "plasmo dev",
     "build": "plasmo build",
-    "package": "plasmo package"
+    "package": "plasmo package",
+    "release": "pnpm run build && pnpm run package"
   },
   "dependencies": {
     "clsx": "^2.1.0",