Version 0.3.0!

README.md

@@ -6,7 +6,7 @@
 [![Get Queue for Chrome](./images/chrome-web-store.png)](https://chrome.google.com/webstore/detail/queue/epnbikemcmienphlfmidkimpjnmohcbl)
 [![Get Queue for Edge](./images/microsoft.png)](https://microsoftedge.microsoft.com/addons/detail/queue/aanjampfdpcnhoeglmfefmmegdbifaak)
 
-![Latest Queue screenshot](./images/queue-version-0-2-2.png)
+![Latest Queue screenshot](./images/queue-version-0-3-0.png)
 
 ## Wiki
 

source/manifest.ts

@@ -6,7 +6,7 @@ export default function createManifest(
   const manifest: Record<string, unknown> = {
     name: 'Queue',
     description: 'A WebExtension for queueing links.',
-    version: '0.2.6',
+    version: '0.3.0',
     permissions: ['contextMenus', 'storage'],
     options_ui: {
       page: 'options/index.html',

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 {
+  .buttons {
-    align-items: center;
+    display: grid;
-    background-color: var(--la-1);
+    gap: 4px;
-    border: none;
+    grid-template-columns: repeat(3, 1fr);
-    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;
 
-    &.confirm {
+    button {
-      background-color: var(--df-1);
+      align-items: center;
-      color: var(--la-1);
+      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);
+        }
+      }
     }
   }
 }

source/settings/migrations.ts

@@ -14,6 +14,23 @@ export const dataMigrations: Array<Migration<string>> = [
         migrated[key] = item;
       }
 
+      return migrated;
+    },
+  },
+  {
+    version: '0.3.0',
+    async migrate(data: Record<string, any>) {
+      const migrated: Record<string, any> = {
+        version: '0.3.0',
+      };
+
+      for (const [key, value] of Object.entries<Queue.Item>(data)) {
+        if (key.startsWith('qi')) {
+          migrated[key] = value;
+          migrated[key].sortIndex = value.id;
+        }
+      }
+
       return migrated;
     },
   },

source/settings/settings.ts

@@ -42,6 +42,7 @@ export class Settings {
     const item: Queue.Item = {
       added: new Date(),
       id,
+      sortIndex: id,
       text,
       url,
     };
@@ -51,12 +52,40 @@ export class Settings {
       [`qi${id}`]: {
         added: item.added.toISOString(),
         id,
+        sortIndex: id,
         text,
         url,
       },
     });
   }
 
+  public async moveQueueItem(
+    id: number,
+    direction: Queue.MoveDirection,
+  ): Promise<void> {
+    const targetItem = this.queue.find((item) => item.id === id);
+    if (targetItem === undefined) {
+      throw new Error(`Failed to move item with ID: ${id}`);
+    }
+
+    const previousIndex = targetItem.sortIndex;
+    let targetIndex = previousIndex;
+    if (direction === 'down') {
+      targetIndex += 1;
+    } else if (direction === 'up') {
+      targetIndex -= 1;
+    }
+
+    const existingItem = this.queue.find(
+      (item) => item.sortIndex === targetIndex,
+    );
+    if (existingItem !== undefined) {
+      existingItem.sortIndex = previousIndex;
+      targetItem.sortIndex = targetIndex;
+      await this.save();
+    }
+  }
+
   public newQueueItemId(): number {
     const item = this.queue.sort((a, b) => b.id - a.id)[0];
     return item === undefined ? 1 : item.id + 1;

source/types.d.ts

@@ -22,8 +22,11 @@ declare global {
     type Item = {
       added: Date;
       id: number;
+      sortIndex: number;
       text: string;
       url: string;
     };
+
+    type MoveDirection = 'up' | 'down';
   }
 }

tests/migrations.test.ts

@@ -13,7 +13,7 @@ const queueItemSample: Queue.Item = {
   id: 1,
   text: 'Sample',
   url: 'https://example.org',
-};
+} as unknown as Queue.Item;
 
 test('dataMigrations happy path', async (t) => {
   let data: Record<string, any> = {
@@ -37,7 +37,14 @@ test('dataMigrations unhappy path', async (t) => {
 });
 
 test('Serializing & Deserializing Queue', (t) => {
-  const serialized = serializeQueue([queueItemSample]);
+  const sample: Queue.Item = {
+    added: queueItemSample.added,
+    id: queueItemSample.id,
+    sortIndex: queueItemSample.id,
+    text: queueItemSample.text,
+    url: queueItemSample.url,
+  };
+  const serialized = serializeQueue([sample]);
   t.snapshot(serialized, 'Serialized');
 
   serialized.extra = 'Extra';

tests/snapshots/tests/migrations.test.ts.md

@@ -18,6 +18,19 @@ Generated by [AVA](https://avajs.dev).
       version: '0.1.7',
     }
 
+> Migration 0.3.0
+
+    {
+      qi1: {
+        added: Date 2022-03-02 16:00:00 UTC {},
+        id: 1,
+        sortIndex: 1,
+        text: 'Sample',
+        url: 'https://example.org',
+      },
+      version: '0.3.0',
+    }
+
 ## dataMigrations unhappy path
 
 > Migration 0.1.7
@@ -26,6 +39,12 @@ Generated by [AVA](https://avajs.dev).
       version: '0.1.7',
     }
 
+> Migration 0.3.0
+
+    {
+      version: '0.3.0',
+    }
+
 ## Serializing & Deserializing Queue
 
 > Serialized
@@ -34,6 +53,7 @@ Generated by [AVA](https://avajs.dev).
       qi1: {
         added: '2022-03-02T16:00:00.000Z',
         id: 1,
+        sortIndex: 1,
         text: 'Sample',
         url: 'https://example.org',
       },
@@ -45,6 +65,7 @@ Generated by [AVA](https://avajs.dev).
       {
         added: Date 2022-03-02 16:00:00 UTC {},
         id: 1,
+        sortIndex: 1,
         text: 'Sample',
         url: 'https://example.org',
       },