scope: allow same-name options from different scopes

flake.nix

@@ -6,7 +6,7 @@
     flake-utils.url = "github:numtide/flake-utils";
     ixx = {
       # match version with npm package
-      url = "github:NuschtOS/ixx/v0.0.5";
+      url = "github:NuschtOS/ixx/v0.0.6";
       inputs = {
         nixpkgs.follows = "nixpkgs";
         flake-utils.follows = "flake-utils";

nix/frontend.nix

@@ -25,7 +25,7 @@ stdenv.mkDerivation (finalAttrs: {
 
   pnpmDeps = pnpm.fetchDeps {
     inherit (finalAttrs) pname version src;
-    hash = "sha256-4ri74PmqwWvuHTgrk3nnP/+RgBfl8GzA1mwBR1VJjTk=";
+    hash = "sha256-i9VzmBXirwIV9N1DupSPlKuVCBEAjaR7jwIc0p/lopA=";
   };
 
   nativeBuildInputs = [ nodejs pnpm.configHook ];

package.json

@@ -24,7 +24,7 @@
     "@feel/style": "^0.0.28",
     "@fontsource/dm-mono": "^5.1.0",
     "@fontsource/dm-sans": "^5.1.0",
-    "@nuschtos/fixx": "^0.0.5",
+    "@nuschtos/fixx": "^0.0.6",
     "rxjs": "~7.8.1",
     "tslib": "^2.8.0",
     "zone.js": "~0.15.0"

src/app/core/components/option/option.component.html

@@ -15,6 +15,10 @@ <h2><code>{{option.name}}</code></h2>
           </ng-template>
         </td>
       </tr>
+      <tr *ngIf="(scope | async) as scope">
+        <td>Scope</td>
+        <td><a [routerLink]="[]" [queryParams]="{scope}" queryParamsHandling="merge">{{scope}}</a></td>
+      </tr>
       <tr>
         <td>Description</td>
         <td [innerHTML]="option.description"></td>
@@ -25,11 +29,15 @@ <h2><code>{{option.name}}</code></h2>
       </tr>
       <tr *ngIf="option.default">
         <td>Default</td>
-        <td><pre><code [innerHTML]="option.default"></code></pre></td>
+        <td>
+          <pre><code [innerHTML]="option.default"></code></pre>
+        </td>
       </tr>
       <tr *ngIf="option.example">
         <td>Example</td>
-        <td><pre><code [innerHTML]="option.example"></code></pre></td>
+        <td>
+          <pre><code [innerHTML]="option.example"></code></pre>
+        </td>
       </tr>
     </tbody>
   </table>

src/app/core/components/option/option.component.ts

@@ -1,21 +1,25 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { ActivatedRoute } from '@angular/router';
-import { switchMap } from 'rxjs';
+import { ActivatedRoute, RouterLink } from '@angular/router';
+import { switchMap, map } from 'rxjs';
 import { AsyncPipe, NgFor, NgIf } from '@angular/common';
 import { SearchService } from '../../data/search.service';
 
 @Component({
   selector: 'app-option',
   standalone: true,
-  imports: [NgIf, NgFor, AsyncPipe],
+  imports: [NgIf, NgFor, AsyncPipe, RouterLink],
   templateUrl: './option.component.html',
   styleUrl: './option.component.scss',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class OptionComponent {
 
   protected readonly option = this.activatedRoute.queryParams.pipe(
-    switchMap(({ option }) => this.searchService.getByName(option)),
+    switchMap(({ option_scope, option }) => this.searchService.getByName(Number(option_scope), option)),
+  );
+
+  protected readonly scope = this.activatedRoute.queryParams.pipe(
+    switchMap(({ option_scope }) => this.searchService.getScopes().pipe(map(scopes => scopes[Number(option_scope)]))),
   );
 
   constructor(

src/app/core/components/search/search.component.html

@@ -13,7 +13,7 @@
 <div class="scroll" *ngIf="(results | async) as options">
   <ul>
     <li *ngFor="let option of options; trackBy trackBy">
-      <a [routerLink]="[]" [title]="option.name" [queryParams]="{option: option.name}" queryParamsHandling="merge"
+      <a [routerLink]="[]" [title]="option.name" [queryParams]="{option_scope: option.scope_id, option: option.name}" queryParamsHandling="merge"
         [class.active]="isActive(option) | async">
         <code>{{option.name}}</code>
       </a>

src/app/core/components/search/search.component.ts

@@ -38,7 +38,7 @@ export class SearchComponent implements OnInit, AfterViewInit, OnDestroy {
     )),
   );
 
-  protected readonly selectedOption = this.activatedRoute.queryParams.pipe(map(({ option }) => option));
+  protected readonly selectedOption = this.activatedRoute.queryParams.pipe(map(({ option_scope, option }) => ({ scope_id: Number(option_scope), name: option })));
   protected readonly maxSearchResults = MAX_SEARCH_RESULTS;
 
   private readonly destroy = new Subject<void>();
@@ -86,7 +86,6 @@ export class SearchComponent implements OnInit, AfterViewInit, OnDestroy {
     this.scopes.pipe(takeUntil(this.destroy), filter(scopes => scopes.length > 0))
       .subscribe(scopes => {
         const idx = scopes.findIndex(s => s === scope);
-        console.log(scopes, scope, idx);
         this.search.setValue({ query, scope: idx.toString() })
       })
   }
@@ -101,7 +100,7 @@ export class SearchComponent implements OnInit, AfterViewInit, OnDestroy {
   }
 
   protected isActive(opt: SearchedOption): Observable<boolean> {
-    return this.selectedOption.pipe(map(option => option === opt.name));
+    return this.selectedOption.pipe(map(option => option.scope_id === opt.scope_id && option.name === opt.name));
   }
 }
 

src/app/core/data/search.service.ts

@@ -5,6 +5,7 @@ import { BehaviorSubject, Observable, from, map, of, switchMap, tap } from 'rxjs
 
 export interface SearchedOption {
   idx: number;
+  scope_id: number;
   name: string;
 }
 
@@ -41,22 +42,22 @@ export class SearchService {
     return this.index.pipe(
       map(index => {
         return index ? index.search(scope_id, query, MAX_SEARCH_RESULTS).map(option => {
-          const opt = ({ idx: option.idx(), name: option.name() });
+          const opt = ({ idx: option.idx(), scope_id: option.scope_id(), name: option.name() });
           //      option.free();
           return opt;
         }) : [];
       })
     );
   }
 
-  public getByName(name: string | undefined): Observable<Option | undefined> {
+  public getByName(scope_id: number, name: string | undefined): Observable<Option | undefined> {
     if (typeof name === "undefined" || name.length == 0) {
       return of(undefined);
     }
 
     return this.index.pipe(
       switchMap(index => {
-        const idx = index?.get_idx_by_name(name);
+        const idx = index?.get_idx_by_name(scope_id, name);
         return typeof idx === "number" ? this.getByIdx(idx, index!.chunk_size()) : of(undefined);
       })
     );