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-3-0.png)
+![Latest Queue screenshot](./images/queue-version-0-2-2.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.3.0',
+    version: '0.2.6',
     permissions: ['contextMenus', 'storage'],
     options_ui: {
       page: 'options/index.html',

source/options/components/page-main.ts

@@ -23,12 +23,6 @@ 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);
@@ -40,16 +34,9 @@ export class PageMain extends Component<Props, State> {
     const isFirefox = import.meta.env.VITE_BROWSER === 'firefox';
 
     const queueItems = this.state.queue
-      .sort((a, b) => a.sortIndex - b.sortIndex)
+      .sort((a, b) => a.added.getTime() - b.added.getTime())
       .map(
-        (item) =>
+        (item) => html`<${queueItem} item=${item} remove=${this.removeItem} />`,
-          html`
-            <${queueItem}
-              item=${item}
-              move=${this.moveItem}
-              remove=${this.removeItem}
-            />
-          `,
       );
 
     if (queueItems.length === 0) {
@@ -127,35 +114,12 @@ 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`
@@ -177,7 +141,7 @@ function queueItem(props: ItemProps): HtmComponent {
         <${PrivacyLink} attributes=${{href: url}}>${text ?? url}<//>
       </p>
 
-      <div class="buttons">${move}${remove}</div>
+      <div class="buttons">${remove}</div>
 
       <p>
         <time datetime=${added} title="Link queued on ${added}.">

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

@@ -30,34 +30,23 @@
     margin-bottom: 8px;
   }
 
-  .buttons {
+  .confirm-button {
-    display: grid;
+    align-items: center;
-    gap: 4px;
+    background-color: var(--la-1);
-    grid-template-columns: repeat(3, 1fr);
+    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;
 
-    button {
+    &.confirm {
-      align-items: center;
+      background-color: var(--df-1);
-      background-color: var(--da-3);
+      color: var(--la-1);
-      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,23 +14,6 @@ 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,7 +42,6 @@ export class Settings {
     const item: Queue.Item = {
       added: new Date(),
       id,
-      sortIndex: id,
       text,
       url,
     };
@@ -52,40 +51,12 @@ 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,11 +22,8 @@ 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,14 +37,7 @@ test('dataMigrations unhappy path', async (t) => {
 });
 
 test('Serializing & Deserializing Queue', (t) => {
-  const sample: Queue.Item = {
+  const serialized = serializeQueue([queueItemSample]);
-    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,19 +18,6 @@ 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
@@ -39,12 +26,6 @@ Generated by [AVA](https://avajs.dev).
       version: '0.1.7',
     }
 
-> Migration 0.3.0
-
-    {
-      version: '0.3.0',
-    }
-
 ## Serializing & Deserializing Queue
 
 > Serialized
@@ -53,7 +34,6 @@ Generated by [AVA](https://avajs.dev).
       qi1: {
         added: '2022-03-02T16:00:00.000Z',
         id: 1,
-        sortIndex: 1,
         text: 'Sample',
         url: 'https://example.org',
       },
@@ -65,7 +45,6 @@ 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',
       },