Add move buttons.

source/options/components/page-main.ts

@@ -23,6 +23,12 @@ export class PageMain extends Component<Props, State> {
     };
   }
 
+  moveItem = async (id: number, direction: Queue.MoveDirection) => {
+    const {settings} = this.props;
+    await settings.moveQueueItem(id, direction);
+    this.setState({queue: this.props.settings.queue});
+  };
+
   removeItem = async (id: number) => {
     const {settings} = this.props;
     await settings.removeQueueItem(id);
@@ -34,9 +40,16 @@ export class PageMain extends Component<Props, State> {
     const isFirefox = import.meta.env.VITE_BROWSER === 'firefox';
 
     const queueItems = this.state.queue
-      .sort((a, b) => a.added.getTime() - b.added.getTime())
+      .sort((a, b) => a.sortIndex - b.sortIndex)
       .map(
-        (item) => html`<${queueItem} item=${item} remove=${this.removeItem} />`,
+        (item) =>
+          html`
+            <${queueItem}
+              item=${item}
+              move=${this.moveItem}
+              remove=${this.removeItem}
+            />
+          `,
       );
 
     if (queueItems.length === 0) {
@@ -114,12 +127,35 @@ export class PageMain extends Component<Props, State> {
 
 type ItemProps = {
   item: Queue.Item;
+  move?: (id: number, direction: Queue.MoveDirection) => Promise<void>;
   remove?: (id: number) => Promise<void>;
 };
 
 function queueItem(props: ItemProps): HtmComponent {
   const added = props.item.added.toLocaleString();
   const {id, text, url} = props.item;
+
+  const move = [];
+  if (props.move !== undefined) {
+    const moveButtons: Array<[string, Queue.MoveDirection]> = [
+      ['↑', 'up'],
+      ['↓', 'down'],
+    ];
+    move.push(
+      ...moveButtons.map(
+        ([text, direction]) =>
+          html`
+            <button
+              title="Move item ${direction}"
+              onClick=${async () => props.move!(id, direction)}
+            >
+              ${text}
+            </button>
+          `,
+      ),
+    );
+  }
+
   let remove;
   if (props.remove !== undefined) {
     remove = html`
@@ -141,7 +177,7 @@ function queueItem(props: ItemProps): HtmComponent {
         <${PrivacyLink} attributes=${{href: url}}>${text ?? url}<//>
       </p>
 
-      <div class="buttons">${remove}</div>
+      <div class="buttons">${move}${remove}</div>
 
       <p>
         <time datetime=${added} title="Link queued on ${added}.">

source/options/scss/components/page-main.scss

@@ -30,11 +30,16 @@
     margin-bottom: 8px;
   }
 
-  .confirm-button {
+  .buttons {
+    display: grid;
+    gap: 4px;
+    grid-template-columns: repeat(3, 1fr);
+
+    button {
       align-items: center;
-    background-color: var(--la-1);
+      background-color: var(--da-3);
       border: none;
-    color: var(--df-1);
+      color: var(--db-1);
       cursor: pointer;
       display: flex;
       flex-direction: column;
@@ -44,12 +49,18 @@
       padding: 0;
       width: 2.5rem;
 
+      &.confirm-button {
+        background-color: var(--la-1);
+        color: var(--df-1);
+
         &.confirm {
           background-color: var(--df-1);
           color: var(--la-1);
         }
       }
     }
+  }
+}
 
 .history,
 .usage {