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,23 +30,34 @@
     margin-bottom: 8px;
   }
 
-  .confirm-button {
-    align-items: center;
-    background-color: var(--la-1);
-    border: none;
-    color: var(--df-1);
-    cursor: pointer;
-    display: flex;
-    flex-direction: column;
-    font-weight: bold;
-    height: 2.5rem;
-    justify-content: center;
-    padding: 0;
-    width: 2.5rem;
+  .buttons {
+    display: grid;
+    gap: 4px;
+    grid-template-columns: repeat(3, 1fr);
 
-    &.confirm {
-      background-color: var(--df-1);
-      color: var(--la-1);
+    button {
+      align-items: center;
+      background-color: var(--da-3);
+      border: none;
+      color: var(--db-1);
+      cursor: pointer;
+      display: flex;
+      flex-direction: column;
+      font-weight: bold;
+      height: 2.5rem;
+      justify-content: center;
+      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);
+        }
+      }
     }
   }
 }