✨ Search page, Genre icons

JulyWitch · JulyWitch · commit bb6835765676 · 2025-01-17T21:47:17.000+03:30
diff --git a/README.md b/README.md
@@ -62,14 +62,14 @@ Here's a sneak peek at what’s done and what’s cooking:
 - UI: Fix touch area for play pause button
 - Fix lag when changing the song: It was saw only on mac
 - UI: Explore
+- UI: Implement search by keyword
+- UI: [Pend by the fastest icons search engine] Show instrument icons for different genres
 
 #### 🛠️ **In Progress**
 
-- UI: Implement search by keyword
 - UI: Song details
 - Scrobble
 
-- UI: [Pend by the fastest icons search engine] Show instrument icons for different genres
 - UI: Playlists page
 - UI: Playlist songs page
 - UI: Add play and shuffle button in album page
diff --git a/assets/alternative.svg b/assets/alternative.svg
@@ -0,0 +1,10 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="currentColor"
+>
+  <path d="M13 2l.018 .001l.016 .001l.083 .005l.011 .002h.011l.038 .009l.052 .008l.016 .006l.011 .001l.029 .011l.052 .014l.019 .009l.015 .004l.028 .014l.04 .017l.021 .012l.022 .01l.023 .015l.031 .017l.034 .024l.018 .011l.013 .012l.024 .017l.038 .034l.022 .017l.008 .01l.014 .012l.036 .041l.026 .027l.006 .009c.12 .147 .196 .322 .218 .513l.001 .012l.002 .041l.004 .064v6h5a1 1 0 0 1 .868 1.497l-.06 .091l-8 11c-.568 .783 -1.808 .38 -1.808 -.588v-6h-5a1 1 0 0 1 -.868 -1.497l.06 -.091l8 -11l.01 -.013l.018 -.024l.033 -.038l.018 -.022l.009 -.008l.013 -.014l.04 -.036l.028 -.026l.008 -.006a1 1 0 0 1 .402 -.199l.011 -.001l.027 -.005l.074 -.013l.011 -.001l.041 -.002z" />
+</svg>
+
diff --git a/assets/blues.svg b/assets/blues.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M6 12H4c0 4.072 3.061 7.436 7 7.931V22h2v-2.069c3.939-.495 7-3.858 7-7.931h-2c0 3.309-2.691 6-6 6s-6-2.691-6-6z"/><path d="M8 12c0 2.206 1.794 4 4 4s4-1.794 4-4h-2v-2h2V8h-2V6h2c0-2.217-1.785-4.021-3.979-4.021a.933.933 0 0 0-.209.025A4.006 4.006 0 0 0 8 6h4v2H8v2h4v2H8z"/></svg>
diff --git a/assets/classical.svg b/assets/classical.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" id="mdi-violin" viewBox="0 0 24 24"><path d="M11,2A1,1 0 0,0 10,3V5L10,9A0.5,0.5 0 0,0 10.5,9.5H12A0.5,0.5 0 0,1 12.5,10A0.5,0.5 0 0,1 12,10.5H10.5C9.73,10.5 9,9.77 9,9V5.16C7.27,5.6 6,7.13 6,9V10.5A2.5,2.5 0 0,1 8.5,13A2.5,2.5 0 0,1 6,15.5V17C6,19.77 8.23,22 11,22H13C15.77,22 18,19.77 18,17V15.5A2.5,2.5 0 0,1 15.5,13A2.5,2.5 0 0,1 18,10.5V9C18,6.78 16.22,5 14,5V3A1,1 0 0,0 13,2H11M10.75,16.5H13.25L12.75,20H11.25L10.75,16.5Z" /></svg>
diff --git a/assets/country.svg b/assets/country.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" id="mdi-guitar-acoustic" viewBox="0 0 24 24"><path d="M19.59,3H22V5H20.41L16.17,9.24C15.8,8.68 15.32,8.2 14.76,7.83L19.59,3M12,8A4,4 0 0,1 16,12C16,13.82 14.77,15.42 13,15.87V16A5,5 0 0,1 8,21A5,5 0 0,1 3,16A5,5 0 0,1 8,11H8.13C8.58,9.24 10.17,8 12,8M12,10.5A1.5,1.5 0 0,0 10.5,12A1.5,1.5 0 0,0 12,13.5A1.5,1.5 0 0,0 13.5,12A1.5,1.5 0 0,0 12,10.5M6.94,14.24L6.23,14.94L9.06,17.77L9.77,17.06L6.94,14.24Z" /></svg>
diff --git a/assets/default-genre.svg b/assets/default-genre.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M10 3H4a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1zm10 10h-6a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1v-6a1 1 0 0 0-1-1zM17 3c-2.206 0-4 1.794-4 4s1.794 4 4 4 4-1.794 4-4-1.794-4-4-4zM7 13c-2.206 0-4 1.794-4 4s1.794 4 4 4 4-1.794 4-4-1.794-4-4-4z"/></svg>
diff --git a/assets/electronic.svg b/assets/electronic.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="-5 -2 24 24" width="24" height="24" fill="currentColor"><path d="M3 0h8a3 3 0 0 1 3 3v14a3 3 0 0 1-3 3H3a3 3 0 0 1-3-3V3a3 3 0 0 1 3-3zm4 17a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM7 7a1 1 0 1 0 0-2 1 1 0 0 0 0 2zm0 8a2 2 0 1 1 0-4 2 2 0 0 1 0 4z"/></svg>
diff --git a/assets/hiphop.svg b/assets/hiphop.svg
@@ -0,0 +1,10 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="currentColor"
+>
+  <path d="M21 18a3 3 0 0 1 -2.824 2.995l-.176 .005h-1a3 3 0 0 1 -2.995 -2.824l-.005 -.176v-3a3 3 0 0 1 2.824 -2.995l.176 -.005h1c.351 0 .688 .06 1 .171v-.171a7 7 0 0 0 -13.996 -.24l-.004 .24v.17c.25 -.088 .516 -.144 .791 -.163l.209 -.007h1a3 3 0 0 1 2.995 2.824l.005 .176v3a3 3 0 0 1 -2.824 2.995l-.176 .005h-1a3 3 0 0 1 -2.995 -2.824l-.005 -.176v-6a9 9 0 0 1 17.996 -.265l.004 .265v6z" />
+</svg>
+
diff --git a/assets/indie.svg b/assets/indie.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" id="mdi-cassette" viewBox="0 0 24 24"><path d="M4,5A2,2 0 0,0 2,7V17A2,2 0 0,0 4,19H6L7,17H17L18,19H20A2,2 0 0,0 22,17V7A2,2 0 0,0 20,5H4M6.5,10A1.5,1.5 0 0,1 8,11.5A1.5,1.5 0 0,1 6.5,13A1.5,1.5 0 0,1 5,11.5A1.5,1.5 0 0,1 6.5,10M9,10H15V13H9V10M17.5,10A1.5,1.5 0 0,1 19,11.5A1.5,1.5 0 0,1 17.5,13A1.5,1.5 0 0,1 16,11.5A1.5,1.5 0 0,1 17.5,10Z" /></svg>
diff --git a/assets/industrial.svg b/assets/industrial.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M17 10V6l-5 4V6l-5 4V4H2v16h20V6l-5 4zm-8 7H7v-3h2v3zm5 0h-2v-3h2v3zm5 0h-2v-3h2v3z"/></svg>
diff --git a/assets/jazz.svg b/assets/jazz.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" id="mdi-saxophone" viewBox="0 0 24 24"><path d="M4,2A1,1 0 0,0 3,3A1,1 0 0,0 4,4A3,3 0 0,1 7,7V8.66L7,15.5C7,19.1 9.9,22 13.5,22C17.1,22 20,19.1 20,15.5V13A1,1 0 0,0 21,12A1,1 0 0,0 20,11H14A1,1 0 0,0 13,12A1,1 0 0,0 14,13V15A1,1 0 0,1 13,16A1,1 0 0,1 12,15V11A1,1 0 0,0 13,10A1,1 0 0,0 12,9V8A1,1 0 0,0 13,7A1,1 0 0,0 12,6V5.5A3.5,3.5 0 0,0 8.5,2H4Z" /></svg>
diff --git a/assets/latin.svg b/assets/latin.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" id="mdi-shaker" viewBox="0 0 24 24"><path d="M7 16C7 16.55 6.55 17 6 17S5 16.55 5 16C5 15.45 5.45 15 6 15S7 15.45 7 16M9 16C8.45 16 8 16.45 8 17S8.45 18 9 18 10 17.55 10 17 9.55 16 9 16M4 18C3.45 18 3 18.45 3 19S3.45 20 4 20 5 19.55 5 19 4.55 18 4 18M7 19C6.45 19 6 19.45 6 20S6.45 21 7 21 8 20.55 8 20 7.55 19 7 19M15.33 2.72L9.8 9.65L13.34 13.19L20.28 7.67C21.18 6.91 21.25 5.54 20.41 4.7L18.3 2.59C17.46 1.75 16.09 1.82 15.33 2.72M8.39 12.5L10.5 14.6C10.9 15 11.54 15 11.93 14.6L12.63 13.9L9.1 10.36L8.39 11.07C8 11.46 8 12.09 8.39 12.5Z" /></svg>
diff --git a/assets/metal.svg b/assets/metal.svg
@@ -0,0 +1,10 @@
+<svg style="fill-rule:nonzero;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" width="100%" xmlns:vectornator="http://vectornator.io" version="1.1" viewBox="0 0 1024 1024">
+<defs/>
+<g id="Untitled">
+<path d="M791.035+221.808L883.555+221.808L883.555+298.588L822.515+298.588L619.431+501.671L565.301+448.309L791.035+221.808M499.654+452.148C509.636+452.148+518.849+455.987+526.911+463.665L603.691+540.445C610.602+548.123+614.825+556.953+614.825+567.318L610.985+582.674L457.425+889.795C450.131+903.231+436.695+910.142+422.874+910.142C409.438+910.142+395.617+903.231+388.707+889.795L317.301+747.752L175.258+678.65C161.054+670.971+154.144+657.535+154.144+644.098C154.144+630.662+161.054+617.225+175.258+609.547L482.379+455.987C487.753+452.148+493.512+452.148+499.654+452.148M397.921+560.408L371.047+586.513L480.459+695.925L506.564+669.052L397.921+560.408M343.791+614.538L316.534+641.795L425.178+750.439L452.434+723.182L343.791+614.538Z" opacity="1" fill="#000000"/>
+</g>
+<g id="Untitled_2">
+<path d="M314.87+136.913C314.87+123.073+331.098+115.98+340.872+125.558C370.961+155.062+388.449+219.842+367.765+268.989L366.536+271.725L366.72+271.773C376.325+273.864+385.207+265.01+402.111+237.598L404.262+234.075C406.79+229.911+411.07+227.192+415.837+226.72C420.604+226.248+425.314+228.078+428.574+231.669C449.074+254.237+468.544+300.506+468.544+330.277C468.544+397.353+413.36+451.454+345.605+451.454C277.85+451.454+222.666+397.353+222.666+330.262C222.666+294.844+238.371+256.093+263.113+231.165L272.41+221.902C276.114+218.191+279.08+215.139+281.907+212.088C303.883+188.309+314.87+166.102+314.87+136.913" opacity="1" fill="#000000"/>
+</g>
+</svg>
+
diff --git a/assets/pop.svg b/assets/pop.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="currentColor"><path d="M115.06,46.36a4,4,0,0,0-6.11.54A71.54,71.54,0,0,0,96,88a73.29,73.29,0,0,0,.63,9.42L27.12,192.22A15.93,15.93,0,0,0,28.71,213L43,227.29a15.93,15.93,0,0,0,20.78,1.59l94.81-69.53A73.29,73.29,0,0,0,168,160a71.54,71.54,0,0,0,41.09-12.93,4,4,0,0,0,.54-6.11Zm2.61,103.28-16,16a8,8,0,1,1-11.31-11.31l16-16a8,8,0,0,1,11.31,11.31Zm109.4-20.56a4,4,0,0,1-6.12.54L126.38,35.05a4,4,0,0,1,.54-6.12A71.93,71.93,0,0,1,227.07,129.08Z"/></svg>
diff --git a/assets/r&b.svg b/assets/r&b.svg
@@ -0,0 +1,23 @@
+<!-- From Lucide Icons-->
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <rect width="20" height="16" x="2" y="4" rx="2" />
+  <path d="M6 8h4" />
+  <path d="M14 8h.01" />
+  <path d="M18 8h.01" />
+  <path d="M2 12h20" />
+  <path d="M6 12v4" />
+  <path d="M10 12v4" />
+  <path d="M14 12v4" />
+  <path d="M18 12v4" />
+</svg>
+
diff --git a/assets/reggae.svg b/assets/reggae.svg
@@ -0,0 +1,20 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="24"
+  height="24"
+  viewBox="0 0 24 24"
+  fill="none"
+  stroke="currentColor"
+  stroke-width="2"
+  stroke-linecap="round"
+  stroke-linejoin="round"
+>
+  <path d="m2 2 8 8" />
+  <path d="m22 2-8 8" />
+  <ellipse cx="12" cy="9" rx="10" ry="5" />
+  <path d="M7 13.4v7.9" />
+  <path d="M12 14v8" />
+  <path d="M17 13.4v7.9" />
+  <path d="M2 9v8a10 5 0 0 0 20 0V9" />
+</svg>
+
diff --git a/assets/rock.svg b/assets/rock.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" id="mdi-guitar-electric" viewBox="0 0 24 24"><path d="M19.59,3H22V5H20.41L15.12,10.29L13.71,8.9L19.59,3M12,9C12.26,9 12.5,9.1 12.71,9.3L14.71,11.3C14.89,11.5 15,11.73 15,12L14.9,12.4L10.9,20.4C10.71,20.75 10.36,20.93 10,20.93C9.65,20.93 9.29,20.75 9.11,20.4L7.25,16.7L3.55,14.9C3.18,14.7 3,14.35 3,14C3,13.65 3.18,13.3 3.55,13.1L11.55,9.1C11.69,9 11.84,9 12,9M9.35,11.82L8.65,12.5L11.5,15.35L12.18,14.65L9.35,11.82M7.94,13.23L7.23,13.94L10.06,16.77L10.77,16.06L7.94,13.23Z" /></svg>
diff --git a/lib/main.dart b/lib/main.dart
@@ -102,6 +102,7 @@ class _MyAppState extends ConsumerState<MyApp> {
   Widget build(BuildContext context) {
     return MaterialApp.router(
       title: 'Dururu',
+      debugShowCheckedModeBanner: false,
       routerConfig: _router,
       theme: buildTheme(),
     );
diff --git a/lib/presentation/album.dart b/lib/presentation/album.dart
@@ -165,7 +165,11 @@ class AlbumPage extends ConsumerWidget {
                         '${index + 1}',
                         style: Theme.of(context).textTheme.titleMedium,
                       ),
-                      title: Text(song.title),
+                      title: Text(
+                        song.title,
+                        maxLines: 1,
+                        overflow: TextOverflow.ellipsis,
+                      ),
                       subtitle: Text(
                         '${song.artist ?? ''} • ${formatSongDuration(song.duration ?? 0)}',
                       ),
diff --git a/lib/presentation/genre.dart b/lib/presentation/genre.dart
@@ -1,6 +1,7 @@
 import 'package:dururu/models/pagination.dart';
 import 'package:dururu/models/subsonic.dart';
 import 'package:dururu/presentation/widgets/album_grid.dart';
+import 'package:dururu/presentation/widgets/genre_grid.dart';
 import 'package:dururu/presentation/widgets/loading_indicator.dart';
 import 'package:dururu/presentation/widgets/song_trailing.dart';
 import 'package:dururu/providers/audio.dart';
@@ -151,7 +152,11 @@ class GenrePageState extends ConsumerState<GenrePage> {
               errorWidget: (context, url, error) => const Icon(Icons.album),
             ),
           ),
-          title: Text(song.title),
+          title: Text(
+            song.title,
+            maxLines: 1,
+            overflow: TextOverflow.ellipsis,
+          ),
           subtitle: Text(
             '${song.artist ?? ''} • ${formatSongDuration(song.duration ?? 0)}',
           ),
@@ -205,45 +210,65 @@ class GenrePageState extends ConsumerState<GenrePage> {
                   ),
                   Positioned(
                     left: 16,
-                    right: 16,
-                    bottom: 48,
-                    child: Text(
-                      widget.genre,
-                      style:
-                          Theme.of(context).textTheme.headlineSmall?.copyWith(
-                                color: Colors.white,
-                                fontWeight: FontWeight.bold,
-                              ),
-                    ),
-                  ),
-                  Positioned(
                     right: 16,
                     bottom: 16,
-                    child: Row(
+                    child: Column(
+                      spacing: 8,
+                      crossAxisAlignment: CrossAxisAlignment.end,
                       children: [
-                        Text(
-                          'Songs',
-                          style: Theme.of(context)
-                              .textTheme
-                              .labelMedium
-                              ?.copyWith(
-                                color:
-                                    showSongs ? Colors.white : Colors.white60,
+                        Row(
+                          spacing: 8,
+                          children: [
+                            Expanded(
+                              child: Text(
+                                widget.genre,
+                                maxLines: 1,
+                                overflow: TextOverflow.ellipsis,
+                                style: Theme.of(context)
+                                    .textTheme
+                                    .headlineSmall
+                                    ?.copyWith(
+                                      color: Colors.white,
+                                      fontWeight: FontWeight.bold,
+                                    ),
                               ),
+                            ),
+                            GenreIcon(
+                              genre: widget.genre,
+                              color: Theme.of(context).colorScheme.onSurface,
+                              scale: 1.5,
+                            )
+                          ],
                         ),
-                        Switch.adaptive(
-                          value: !showSongs,
-                          onChanged: (_) => toggleView(),
-                        ),
-                        Text(
-                          'Albums',
-                          style: Theme.of(context)
-                              .textTheme
-                              .labelMedium
-                              ?.copyWith(
-                                color:
-                                    !showSongs ? Colors.white : Colors.white60,
-                              ),
+                        Row(
+                          children: [
+                            Text(
+                              'Songs',
+                              style: Theme.of(context)
+                                  .textTheme
+                                  .labelMedium
+                                  ?.copyWith(
+                                    color: showSongs
+                                        ? Colors.white
+                                        : Colors.white60,
+                                  ),
+                            ),
+                            Switch.adaptive(
+                              value: !showSongs,
+                              onChanged: (_) => toggleView(),
+                            ),
+                            Text(
+                              'Albums',
+                              style: Theme.of(context)
+                                  .textTheme
+                                  .labelMedium
+                                  ?.copyWith(
+                                    color: !showSongs
+                                        ? Colors.white
+                                        : Colors.white60,
+                                  ),
+                            ),
+                          ],
                         ),
                       ],
                     ),
diff --git a/lib/presentation/main.dart b/lib/presentation/main.dart
diff --git a/lib/presentation/search.dart b/lib/presentation/search.dart
diff --git a/lib/presentation/widgets/genre_grid.dart b/lib/presentation/widgets/genre_grid.dart
